Added PX read, STATS, SIZE

This commit is contained in:
clerie
2018-04-04 11:57:43 +02:00
parent f5728a4704
commit 811ecfddfb
4 changed files with 107 additions and 7 deletions

View File

@@ -8,6 +8,7 @@
<body>
<canvas class="display" ></canvas>
<div class="stats"></div>
<script src="socket.io.js"></script>
<script src="main.js"></script>

View File

@@ -2,7 +2,10 @@
(function() {
var stats = document.getElementsByClassName('stats')[0];
var socket = io();
var canvas = document.getElementsByClassName('display')[0];
var context = canvas.getContext('2d');
@@ -10,8 +13,8 @@
var canvas_size_y = 100;
socket.on('setting', onSetting);
socket.on('draw', onDraw);
socket.on('stats', onStats);
window.addEventListener('resize', onResize, false);
onResize();
@@ -38,6 +41,7 @@
}
function onDraw(data){
console.log(data);
var w = canvas.width;
var h = canvas.height;
if (data.type == 'pixel') {
@@ -45,6 +49,10 @@
}
}
function onStats(data) {
stats.innerHTML = 'px/s: ' + data.pixel + ' connections: ' + data.connections;
}
// make the canvas fill its parent
function onResize() {
canvas.width = window.innerWidth;

View File

@@ -17,3 +17,12 @@ html, body {
bottom: 0;
top: 0;
}
.stats {
z-index: 100;
position: absolute;
background-color: #00000022;
padding: 3px;
left: 10px;
bottom: 10px;
}