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

Added draw feature and input option

Browse Source
This commit is contained in:
clerie 2018-04-03 12:48:19 +02:00
parent 49686db41d
commit 8ee0d9d122
8 changed files with 129 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.js
View File

@ -6,12 +6,24 @@ const port = process.env.PORT || 61813;
app.use(express.static(__dirname + '/public')); app.use(express.static(__dirname + '/public'));
/*
function onConnection(socket){ function onConnection(socket){
socket.on('drawing', (data) => socket.broadcast.emit('drawing', data)); socket.on('input', function(data) {
var command = data.split(" ");
if (command.lenght() == 4) {
if (command[0] == "PX") {
var x = parseInt(command[1]);
var y = parseInt(command[2]);
if (!isNaN(x) && !isNaN(y)) {
var color = command[3]
socket.broadcast.emit('draw', {type: 'pixel', x: x, y: y, color: color}}));
}
}
}
}
} }
io.on('connection', onConnection); io.on('connection', onConnection);
*/
http.listen(port, () => console.log('listening on port ' + port)); http.listen(port, () => console.log('listening on port ' + port));

16
public/index.html
View File

@ -1 +1,15 @@
<h1>It work's!</h1> <!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PixelNode</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas class="display" ></canvas>
<script src="socket.io.js"></script>
<script src="main.js"></script>
</body>
</html>

2
public/jquery.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

44
public/main.js Normal file
View File

@ -0,0 +1,44 @@
'use strict';
(function() {
var socket = io();
var canvas = document.getElementsByClassName('display')[0];
var context = canvas.getContext('2d');
socket.on('draw', onDraw);
window.addEventListener('resize', onResize, false);
onResize();
function drawLine(x0, y0, x1, y1, color){
context.beginPath();
context.moveTo(x0, y0);
context.lineTo(x1, y1);
context.strokeStyle = color;
context.lineWidth = 2;
context.stroke();
context.closePath();
}
function drawPixel(x, y, color){
context.fillStyle = '#' + color;
context.fillRect(x - (canvas.width * 0.005),y - (canvas.height * 0.005), canvas.width * 0.01, canvas.height * 0.01);
}
function onDraw(data){
var w = canvas.width;
var h = canvas.height;
if (data.type == 'pixel') {
drawPixel(data.x * w, data.y * h, data.color);
}
}
// make the canvas fill its parent
function onResize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
})();

18
public/send.html Normal file
View File

@ -0,0 +1,18 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PixelNode</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form action="">
<input id="m" autocomplete="off"><button>Send</button>
</form>
<script src="socket.io.js"></script>
<script src="jquery.js"></script>
<script src="send.js"></script>
</body>
</html>

8
public/send.js Normal file
View File

@ -0,0 +1,8 @@
$(function () {
var socket = io();
$('form').submit(function(){
socket.emit('input', $('#m').val());
$('#m').val('');
return false;
});
});

8
public/socket.io.js Normal file
View File

File diff suppressed because one or more lines are too long

19
public/style.css Normal file
View File

@ -0,0 +1,19 @@
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.display {
height: 100%;
width: 100%;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
}