Added PX read, STATS, SIZE
This commit is contained in:
clerie
parent
f5728a4704
commit
811ecfddfb
94
index.js
94
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--;
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user