From 811ecfddfb38c6db60545b0673fda752a41b09b5 Mon Sep 17 00:00:00 2001 From: clerie Date: Wed, 4 Apr 2018 11:57:43 +0200 Subject: [PATCH] Added PX read, STATS, SIZE --- index.js | 94 ++++++++++++++++++++++++++++++++++++++++++++--- public/index.html | 1 + public/main.js | 10 ++++- public/style.css | 9 +++++ 4 files changed, 107 insertions(+), 7 deletions(-) diff --git a/index.js b/index.js index 5a4421f..88e0077 100644 --- a/index.js +++ b/index.js @@ -10,7 +10,65 @@ const input_port = 1337; // define canvas var canvas_size_x = 100; var canvas_size_y = 100; +var canvas_background = 'ffffff'; +var canvas_content = []; +// stats counter +var pixel_count = 0; +var pixel_count_flat = 0; +var conn_count = 0; +var conn_count_flat = 0; + +// FUNCTIONS +// get color +function get_color(x, y) { + if (canvas_content[x] != undefined) { + if (canvas_content[x][y] != undefined) { + return canvas_content[x][y]; + } + } + return canvas_background; +} + +// str to color +function str_to_color(color) { + color = color.trim(); + color = color.toLowerCase(); + if (color.match(/^[a-f0-9]{6}$/i) == color) { + return color; + } + else if (color.match(/^[a-f0-9]{8}$/i) == color) { + return color.substr(0, 6); + } + else { + return false; + } +} + +// color to HTML color +function color_to_html(color) { + return '#' + color; +} + +// save color to canvas content +function color_to_canvas_content(x, y, color) { + if (canvas_content[x] == undefined) { + canvas_content[x] = []; + } + canvas_content[x][y] = color; +} + +// STATS +function stats() { + pixel_count_flat = pixel_count; + pixel_count = 0; + conn_count_flat = conn_count; + io.sockets.emit('stats', {pixel: pixel_count_flat, connections: conn_count_flat}) + +} +setInterval(() => stats(), 1000); + +// CONNECTIONS // define static folder app.use(express.static(__dirname + '/public')); @@ -24,20 +82,44 @@ io.on('connection', function (socket){ var server = net.createServer(); server.on('connection', function (server_socket) { + conn_count++; server_socket.setEncoding('utf8'); console.log('[INPUT] new input'); server_socket.on('data', function (data) { var command = data.split(" "); - if (command.length == 4) { - if (command[0] == "PX") { - var x = parseInt(command[1]); - var y = parseInt(command[2]); + if (command[0] == "PX") { + var x = parseInt(command[1]); + var y = parseInt(command[2]); + if (x <= canvas_size_x && y <= canvas_size_y) { if (!isNaN(x) && !isNaN(y)) { - var color = command[3] - io.sockets.emit('draw', {type: 'pixel', x: x, y: y, color: color}); + if (command[3] != undefined) { + console.log("c is there"); + var color = str_to_color(command[3]); + console.log(color); + if (color !== false) { + console.log("c ok"); + io.sockets.emit('draw', {type: 'pixel', x: x, y: y, color: color_to_html(color)}); + pixel_count++; + color_to_canvas_content(x, y, color); + } + else { + console.log("c not ok"); + } + } + server_socket.write('PX ' + x + ' ' + y + ' ' + get_color(x, y) + '\n'); } } } + else if (command[0] == 'SIZE') { + server_socket.write('SIZE ' + canvas_size_x + ' ' + canvas_size_x + '\n'); + } + else if (command[1] == 'STATS') { + server_socket.write('STATS px:' + pixel_count_flat + ' conn:' + conn_count_flat + '\n'); + } + }); + + server_socket.on('close', function() { + conn_count--; }); }); diff --git a/public/index.html b/public/index.html index 268817a..045b0ca 100644 --- a/public/index.html +++ b/public/index.html @@ -8,6 +8,7 @@ +
diff --git a/public/main.js b/public/main.js index 8b024d8..aff4831 100644 --- a/public/main.js +++ b/public/main.js @@ -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; diff --git a/public/style.css b/public/style.css index 71c129a..000fdba 100644 --- a/public/style.css +++ b/public/style.css @@ -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; +}