clerie/pixelnode
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added PX read, STATS, SIZE

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
index.js
View File

@ -10,7 +10,65 @@ const input_port = 1337;
// define canvas // define canvas
var canvas_size_x = 100; var canvas_size_x = 100;
var canvas_size_y = 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 // define static folder
app.use(express.static(__dirname + '/public')); app.use(express.static(__dirname + '/public'));
@ -24,20 +82,44 @@ io.on('connection', function (socket){
var server = net.createServer(); var server = net.createServer();
server.on('connection', function (server_socket) { server.on('connection', function (server_socket) {
conn_count++;
server_socket.setEncoding('utf8'); server_socket.setEncoding('utf8');
console.log('[INPUT] new input'); console.log('[INPUT] new input');
server_socket.on('data', function (data) { server_socket.on('data', function (data) {
var command = data.split(" "); var command = data.split(" ");
if (command.length == 4) { if (command[0] == "PX") {
if (command[0] == "PX") { var x = parseInt(command[1]);
var x = parseInt(command[1]); var y = parseInt(command[2]);
var y = parseInt(command[2]); if (x <= canvas_size_x && y <= canvas_size_y) {
if (!isNaN(x) && !isNaN(y)) { if (!isNaN(x) && !isNaN(y)) {
var color = command[3] if (command[3] != undefined) {
io.sockets.emit('draw', {type: 'pixel', x: x, y: y, color: color}); 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--;
}); });
}); });

1
public/index.html
View File

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

10
public/main.js
View File

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

9
public/style.css
View File

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