You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
117 lines
4.0 KiB
117 lines
4.0 KiB
7 years ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>mtloginchart</title>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<meta name="viewport">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
7 years ago
|
<canvas id="myCanvas" width="100" height="1540"> <!--style="border:1px solid #c3c3c3;">-->
|
||
|
7 years ago
|
Your browser does not support the canvas element.
|
||
|
|
</canvas>
|
||
|
7 years ago
|
<div style="color:gray" id="outputArea">loading...</div>
|
||
|
7 years ago
|
<script>
|
||
|
7 years ago
|
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;
|
||
|
7 years ago
|
var hour_width = 60; // 60 pixels per hour
|
||
|
7 years ago
|
var pixels_per_m = hour_width/60.0;
|
||
|
|
var pixels_per_s = pixels_per_m/60.0;
|
||
|
7 years ago
|
var player_name_width = 100;
|
||
|
7 years ago
|
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;
|
||
|
|
|
||
|
7 years ago
|
var players = [];
|
||
|
|
var stats_html = "";
|
||
|
|
var time_area_width = hour_width*hour_count;
|
||
|
|
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>' + time_area_width + "px + " + player_name_width + "px player name = " + canvas_w + 'px canvas width</div>'
|
||
|
|
var outputE = document.getElementById("outputArea");
|
||
|
7 years ago
|
outputE.innerHTML = stats_html;
|
||
|
7 years ago
|
players[0] = {};
|
||
|
|
players[0].login_time = "16:20:03"
|
||
|
|
players[0].logout_time = "16:28:45"
|
||
|
7 years ago
|
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"
|
||
|
7 years ago
|
var canvas = document.getElementById("myCanvas");
|
||
|
7 years ago
|
canvas.width = canvas_w;
|
||
|
7 years ago
|
var ctx = canvas.getContext("2d");
|
||
|
7 years ago
|
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.fillRect(left_x, border_y+(row_y_offset/3.0), right_x-left_x, row_y_offset/3.0);
|
||
|
|
ctx.fillStyle = "#000000";
|
||
|
|
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();
|
||
|
|
text_y += row_y_offset;
|
||
|
|
border_y += row_y_offset;
|
||
|
|
index++;
|
||
|
|
}
|
||
|
7 years ago
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|