poikilos
/
EnlivenMinetest
mirror of https://github.com/poikilos/EnlivenMinetest
1
0
Fork 0
Code Issues 2 Projects Releases Wiki Activity
Browse Source

working example output 

to be generated by backend
master
poikilos 7 years ago
committed by Jacob Gustafson
parent
549aed408d
commit
e54ba45d5c
1 changed files with 87 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 92
      etc/unused/mtloginchart-output-example.html

92
etc/unused/mtloginchart-output-example.html
View File

@ -7,15 +7,28 @@
<meta name="viewport"> <meta name="viewport">
</head> </head>
<body> <body>
<div id="outputArea">loading...</div> <canvas id="myCanvas" width="100" height="1540"> <!--style="border:1px solid #c3c3c3;">-->
<canvas id="myCanvas" width="100" height="1540"
style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element. Your browser does not support the canvas element.
</canvas> </canvas>
<div style="color:gray" id="outputArea">loading...</div>
<script> <script>
var hour_count = 24; var start_hour = 0;
var start_m = start_hour*60;
var start_s = start_m*60;
var endbefore_hour = 24;
var hour_count = endbefore_hour - start_hour;
var hour_width = 60; // 60 pixels per hour var hour_width = 60; // 60 pixels per hour
var pixels_per_m = hour_width/60.0;
var pixels_per_s = pixels_per_m/60.0;
var player_name_width = 100; var player_name_width = 100;
var text_size = 16.0;
var row_y_offset = text_size * (22.0/16.0); // if 16px font is drawn at (x,16), line at (x,21) is one pixel away from the bottom of the descenders
var border_y = 0.5; //canvas uses 0.5 as middle of pixel
var border_start_x = 0.5+player_name_width;
var border_x = border_start_x;
var text_y = text_size;
var text_start_x = 3.5;
var players = []; var players = [];
var stats_html = ""; var stats_html = "";
var time_area_width = hour_width*hour_count; var time_area_width = hour_width*hour_count;
@ -23,16 +36,81 @@ var canvas_w = player_name_width + time_area_width;
stats_html += '<div>' + hour_count + "hrs * " + hour_width + "px = " + time_area_width + '</div>' stats_html += '<div>' + hour_count + "hrs * " + hour_width + "px = " + time_area_width + '</div>'
stats_html += '<div>' + time_area_width + "px + " + player_name_width + "px player name = " + canvas_w + 'px canvas width</div>' stats_html += '<div>' + time_area_width + "px + " + player_name_width + "px player name = " + canvas_w + 'px canvas width</div>'
var outputE = document.getElementById("outputArea"); var outputE = document.getElementById("outputArea");
outputE.innerHTML = stats_html;
players[0] = {}; players[0] = {};
players[0].login_time = "16:20:03" players[0].login_time = "16:20:03"
players[0].logout_time = "16:28:45" players[0].logout_time = "16:28:45"
players[0].display_name = "rando"
players[1] = {};
players[1].login_time = "16:23:03"
players[1].logout_time = "16:22:45"
players[1].display_name = "still_on"
players[2] = {};
players[2].login_time = "10:23:03"
players[2].logout_time = "16:22:45"
players[2].display_name = "obsessed"
var canvas = document.getElementById("myCanvas"); var canvas = document.getElementById("myCanvas");
canvas.width = canvas_w;
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
ctx.font = text_size+"px Arial";
var arrayLength = players.length;
var text_x;
var index = -1;
for (var i = 0; index < arrayLength; i++) {
text_x = text_start_x;
ctx.fillStyle = "#dce5ea";
ctx.fillRect(0, border_y+1.0, player_name_width, row_y_offset-1.0);
//ctx.stroke();
ctx.fillStyle = "#000000";
ctx.moveTo(0, border_y);
ctx.strokeStyle = "#000000";
ctx.lineTo(canvas_w, border_y);
//ctx.stroke();
ctx.fillStyle = "#000000";
if (index==-1) {
ctx.font = "bold "+text_size+"px Arial";
ctx.fillText("Name", text_x, text_y);
ctx.font = text_size+"px Arial";
text_x = player_name_width+0.5;
//ctx.fillStyle = "#000000";
ctx.strokeStyle = "#008000";
for (var hour=0; hour<endbefore_hour; hour++) {
ctx.fillStyle = "#B0B0B0";
ctx.moveTo(text_x, border_y);
ctx.lineTo(text_x, border_y+row_y_offset-0.5);
//ctx.stroke();
ctx.fillText(hour+":00", text_x+3, text_y);
text_x += hour_width;
}
}
else {
ctx.fillText(players[index].display_name, text_x, text_y);
var border_x = border_start_x;
var login_places = players[index].login_time.split(':');
var logout_places = players[index].logout_time.split(':');
var login_second = (+login_places[0]) * 60 * 60 + (+login_places[1]) * 60 + (+login_places[2]);
var login_m = login_second / 60.0;
var logout_second = (+logout_places[0]) * 60 * 60 + (+logout_places[1]) * 60 + (+logout_places[2]);
var logout_m = logout_second / 60.0;
var left_x = border_x + (login_m-start_m)*pixels_per_m;
var right_x = border_x + (logout_m-start_m)*pixels_per_m;
if (right_x<left_x) {
right_x = canvas_w; //not logged out yet, so end of bar is at end
}
ctx.fillStyle = "#FF0000"; ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75); ctx.fillRect(left_x, border_y+(row_y_offset/3.0), right_x-left_x, row_y_offset/3.0);
ctx.moveTo(0,0); ctx.fillStyle = "#000000";
ctx.lineTo(200,100); ctx.fillText(login_places[0]+":"+login_places[1], left_x, text_y-(row_y_offset/3.0));
ctx.fillStyle = "#808080";
ctx.fillText(logout_places[0]+":"+logout_places[1], right_x, text_y+(row_y_offset/3.0));
}
ctx.stroke(); ctx.stroke();
text_y += row_y_offset;
border_y += row_y_offset;
index++;
}
</script> </script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save