Added PX read, STATS, SIZE
This commit is contained in:
@@ -8,6 +8,7 @@
|
||||
<body>
|
||||
|
||||
<canvas class="display" ></canvas>
|
||||
<div class="stats"></div>
|
||||
|
||||
<script src="socket.io.js"></script>
|
||||
<script src="main.js"></script>
|
||||
|
@@ -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;
|
||||
|
@@ -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;
|
||||
}
|
||||
|
Reference in New Issue
Block a user