How can I send canvas information to be executed in another browser over nodejs?
up vote
0
down vote
favorite
1
I have a javascript programm, which uses canvas to draw:
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
<meta charset="utf-8" />
<title>digitale Tafel</title>
<div id="spielfeld"></div>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="static/jquery.min.js"></script>
<script src="static/draw.js"></script>
</body>
</html>
javascript
var malen = {
gemaltBis: 0,
koordinaten: {},
menu: {
farben: [
'white',
'blue',
'red',
'black',
'darkgreen',
'yellow',
'orange',
'purple',
'saddlebrown',
'grey',
'pink'
],
breiten: [
3,
6,
9,
12,
15
]
},
punkte: ,
letztePunkte: ,
serverPunkte: 0,
vomServer:
}
malen.durchmesser = 3;
malen.colorStatus = 'black';
$('<div>').addClass('leiste').css({
position: 'fixed',
top: -1+'px',
left: 70+'px',
width: 625+'px',
height: 40+'px',
border: 1+'px solid grey',
backgroundColor: 'lightgrey',
borderBottomLeftRadius: 20+'px',
borderBottomRightRadius: 20+'px',
}).appendTo('#spielfeld');
for (color in malen.menu.farben) {
$('<div>').addClass('farben').css({
position: 'fixed',
top: 9+'px',
left: 100+color*30+'px',
width: 20+'px',
height: 20+'px',
backgroundColor: malen.menu.farben[color],
borderRadius: 15+'px',
}).click(farbeÄndern).appendTo('#spielfeld');
}
for (breite in malen.menu.breiten) {
$('<div>').addClass('esels').css({
border: 1+'px solid grey',
position: 'fixed',
top: 2+'px',
left: 450+breite*45+'px',
width: 40+'px',
height: malen.menu.breiten[breite]+'px',
backgroundColor: 'lightgrey',
borderRadius: 15+'px',
}).click(dickeÄndern).appendTo('#spielfeld');
}
function farbeÄndern() {
$('.farben').css({'border':0+'px'});
malen.colorStatus = this.style.backgroundColor;
document.getElementsByClassName('farben')[malen.menu.farben.indexOf(malen.colorStatus)].style.border = 2+'px solid';
this.style.borderColor = this.style.backgroundColor;
$('.esels').eq(malen.menu.breiten.indexOf(malen.durchmesser)).css({backgroundColor: malen.colorStatus,});
}
function dickeÄndern() {
$('.esels').css({'background-color':'lightgrey'});
malen.durchmesser = ((parseFloat(this.style.left)-450)/45+1)*3;
this.style.backgroundColor = malen.colorStatus;
}
$('.farben').eq(malen.menu.farben.indexOf('black')).css({border: 2+'px solid',})
$('.esels').eq(malen.menu.breiten.indexOf(3)).css({backgroundColor: malen.colorStatus});
var canvas = document.getElementById('canvas');
malen.ctx = canvas.getContext('2d');
$(window).resize(function () {
canvas.width = window.innerWidth;
canvas.height = window.innerWidth;
for (sache in malen.menu.breiten) {
$('.esels').eq(sache).css({height: malen.menu.breiten[sache]*canvas.width/500+'px'})
}
draw(0);
}).resize();
$('#canvas').on('mousedown', function (e) {
captureMousePoint(e)
$('#canvas').on('mousemove', captureMousePoint);
}).on('mouseup', function () {
$('#canvas').off('mousemove', captureMousePoint);
})
function captureMousePoint(e){
var einPunkt = {
x: 1 / canvas.width * e.pageX,
y: 1 / canvas.width * e.pageY,
radius: malen.durchmesser/2,
farbe: malen.colorStatus,
};
malen.punkte.push(einPunkt);
malen.letztePunkte.push(einPunkt);
draw(malen.punkte.length - 1);
}
function draw(since) {
var len = malen.punkte.length;
for (var i=since; i< len; i++) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.punkte[i].farbe;
malen.ctx.arc(
malen.punkte[i].x * canvas.width,
malen.punkte[i].y * canvas.width,
malen.punkte[i].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
}
function anServerSenden() {
console.log("anServerSenden", malen.letztePunkte.length);
if (malen.letztePunkte.length == 0) {
window.setTimeout(anServerSenden, 1000);
return;
}
$.ajax({
method: 'POST',
url: '/data/test',
headers: { 'Content-Type': 'application/json' },
data: JSON.stringify(malen.letztePunkte),
success: function(fromServer){
malen.vomServer = fromServer;
console.log("Antwort vom Server", malen.vomServer);
window.setTimeout(anServerSenden, 1000);
}
});
malen.letztePunkte = ;
}
vomServerMalen();
function vomServerMalen() {
for (item in malen.vomServer.punkte) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.vomServer.punkte[item].farbe;
malen.ctx.arc(
malen.vomServer.punkte[item].x * canvas.width,
malen.vomServer.punkte[item].y * canvas.width,
malen.vomServer.punkte[item].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
window.setTimeout(vomServerMalen, 1000);
}
anServerSenden();
And I want it to be an application, which can be used in a server-client-application for multiple clients. Therefor I am using nodejs and try to send the stats of every point I draw, in an array, so that another client can get these informations for every point and draw exactly this on his browser.
nodejs
var http = require("http");
var fs = require('fs');
function dateiLesen(dateiName, naechsteFunktion) {
fs.readFile(dateiName, function (err, data) {
if (err) {
naechsteFunktion("Kann nicht geladen werden: "+dateiName);
} else {
naechsteFunktion(data);
}
});
}
var listeGesamt = ;
http.createServer(function (request, response) {
console.log(request.url);
console.log(request.method, request.url);
console.log(" ", request.url.substring(1));
var found;
if (request.url === '/') {
request.url = '/draw.html';
// redirect auf eine BildId → über HTTP-Header im Response
} else if (found = request.url.match(/^/static/([^/]+)$/)) {
console.log(found);
dateiLesen(found[1], function(data){ response.end(data); })
} else if (found = request.url.match(/^/data/(w+)$/)) {
var daten = '';
response.setHeader('Content-Type', 'application/json');
request.on('data', function (chunk) {
daten += chunk;
}).on('end', function (){
// alle Daten geladen
liste = JSON.parse(daten);
listeGesamt = listeGesamt.concat(liste);
console.log("alle Daten: ", liste)
response.end(JSON.stringify({
"Datensaetze empfangen": liste.length,
serverListe: listeGesamt.length,
punkte: liste
}));
})
} else if (/^/w+$/.test(request.url)) {
dateiLesen('draw.html', function(data){ response.end(data); })
} else {
response.end("Kann Anfrage nicht bearbeiten");
}
}).listen(8081);
How can I make another browser to draw these points, that are send in the array 'liste'?
javascript node.js
asked Nov 19 at 13:28
Daniel Reimer
229
add a comment |
up vote
0
down vote
favorite
1
I have a javascript programm, which uses canvas to draw:
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
<meta charset="utf-8" />
<title>digitale Tafel</title>
<div id="spielfeld"></div>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="static/jquery.min.js"></script>
<script src="static/draw.js"></script>
</body>
</html>
javascript
var malen = {
gemaltBis: 0,
koordinaten: {},
menu: {
farben: [
'white',
'blue',
'red',
'black',
'darkgreen',
'yellow',
'orange',
'purple',
'saddlebrown',
'grey',
'pink'
],
breiten: [
3,
6,
9,
12,
15
]
},
punkte: ,
letztePunkte: ,
serverPunkte: 0,
vomServer:
}
malen.durchmesser = 3;
malen.colorStatus = 'black';
$('<div>').addClass('leiste').css({
position: 'fixed',
top: -1+'px',
left: 70+'px',
width: 625+'px',
height: 40+'px',
border: 1+'px solid grey',
backgroundColor: 'lightgrey',
borderBottomLeftRadius: 20+'px',
borderBottomRightRadius: 20+'px',
}).appendTo('#spielfeld');
for (color in malen.menu.farben) {
$('<div>').addClass('farben').css({
position: 'fixed',
top: 9+'px',
left: 100+color*30+'px',
width: 20+'px',
height: 20+'px',
backgroundColor: malen.menu.farben[color],
borderRadius: 15+'px',
}).click(farbeÄndern).appendTo('#spielfeld');
}
for (breite in malen.menu.breiten) {
$('<div>').addClass('esels').css({
border: 1+'px solid grey',
position: 'fixed',
top: 2+'px',
left: 450+breite*45+'px',
width: 40+'px',
height: malen.menu.breiten[breite]+'px',
backgroundColor: 'lightgrey',
borderRadius: 15+'px',
}).click(dickeÄndern).appendTo('#spielfeld');
}
function farbeÄndern() {
$('.farben').css({'border':0+'px'});
malen.colorStatus = this.style.backgroundColor;
document.getElementsByClassName('farben')[malen.menu.farben.indexOf(malen.colorStatus)].style.border = 2+'px solid';
this.style.borderColor = this.style.backgroundColor;
$('.esels').eq(malen.menu.breiten.indexOf(malen.durchmesser)).css({backgroundColor: malen.colorStatus,});
}
function dickeÄndern() {
$('.esels').css({'background-color':'lightgrey'});
malen.durchmesser = ((parseFloat(this.style.left)-450)/45+1)*3;
this.style.backgroundColor = malen.colorStatus;
}
$('.farben').eq(malen.menu.farben.indexOf('black')).css({border: 2+'px solid',})
$('.esels').eq(malen.menu.breiten.indexOf(3)).css({backgroundColor: malen.colorStatus});
var canvas = document.getElementById('canvas');
malen.ctx = canvas.getContext('2d');
$(window).resize(function () {
canvas.width = window.innerWidth;
canvas.height = window.innerWidth;
for (sache in malen.menu.breiten) {
$('.esels').eq(sache).css({height: malen.menu.breiten[sache]*canvas.width/500+'px'})
}
draw(0);
}).resize();
$('#canvas').on('mousedown', function (e) {
captureMousePoint(e)
$('#canvas').on('mousemove', captureMousePoint);
}).on('mouseup', function () {
$('#canvas').off('mousemove', captureMousePoint);
})
function captureMousePoint(e){
var einPunkt = {
x: 1 / canvas.width * e.pageX,
y: 1 / canvas.width * e.pageY,
radius: malen.durchmesser/2,
farbe: malen.colorStatus,
};
malen.punkte.push(einPunkt);
malen.letztePunkte.push(einPunkt);
draw(malen.punkte.length - 1);
}
function draw(since) {
var len = malen.punkte.length;
for (var i=since; i< len; i++) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.punkte[i].farbe;
malen.ctx.arc(
malen.punkte[i].x * canvas.width,
malen.punkte[i].y * canvas.width,
malen.punkte[i].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
}
function anServerSenden() {
console.log("anServerSenden", malen.letztePunkte.length);
if (malen.letztePunkte.length == 0) {
window.setTimeout(anServerSenden, 1000);
return;
}
$.ajax({
method: 'POST',
url: '/data/test',
headers: { 'Content-Type': 'application/json' },
data: JSON.stringify(malen.letztePunkte),
success: function(fromServer){
malen.vomServer = fromServer;
console.log("Antwort vom Server", malen.vomServer);
window.setTimeout(anServerSenden, 1000);
}
});
malen.letztePunkte = ;
}
vomServerMalen();
function vomServerMalen() {
for (item in malen.vomServer.punkte) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.vomServer.punkte[item].farbe;
malen.ctx.arc(
malen.vomServer.punkte[item].x * canvas.width,
malen.vomServer.punkte[item].y * canvas.width,
malen.vomServer.punkte[item].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
window.setTimeout(vomServerMalen, 1000);
}
anServerSenden();
And I want it to be an application, which can be used in a server-client-application for multiple clients. Therefor I am using nodejs and try to send the stats of every point I draw, in an array, so that another client can get these informations for every point and draw exactly this on his browser.
nodejs
var http = require("http");
var fs = require('fs');
function dateiLesen(dateiName, naechsteFunktion) {
fs.readFile(dateiName, function (err, data) {
if (err) {
naechsteFunktion("Kann nicht geladen werden: "+dateiName);
} else {
naechsteFunktion(data);
}
});
}
var listeGesamt = ;
http.createServer(function (request, response) {
console.log(request.url);
console.log(request.method, request.url);
console.log(" ", request.url.substring(1));
var found;
if (request.url === '/') {
request.url = '/draw.html';
// redirect auf eine BildId → über HTTP-Header im Response
} else if (found = request.url.match(/^/static/([^/]+)$/)) {
console.log(found);
dateiLesen(found[1], function(data){ response.end(data); })
} else if (found = request.url.match(/^/data/(w+)$/)) {
var daten = '';
response.setHeader('Content-Type', 'application/json');
request.on('data', function (chunk) {
daten += chunk;
}).on('end', function (){
// alle Daten geladen
liste = JSON.parse(daten);
listeGesamt = listeGesamt.concat(liste);
console.log("alle Daten: ", liste)
response.end(JSON.stringify({
"Datensaetze empfangen": liste.length,
serverListe: listeGesamt.length,
punkte: liste
}));
})
} else if (/^/w+$/.test(request.url)) {
dateiLesen('draw.html', function(data){ response.end(data); })
} else {
response.end("Kann Anfrage nicht bearbeiten");
}
}).listen(8081);
How can I make another browser to draw these points, that are send in the array 'liste'?
javascript node.js
asked Nov 19 at 13:28
Daniel Reimer
229
Maybe in some different words: "How can I draw at the same time on two open browsers. I draw on the one and the other uses the sended stats to draw it automaticaly?"
– Daniel Reimer
Nov 19 at 14:08
add a comment |
up vote
0
down vote
favorite
1
up vote
0
down vote
favorite
1
1
I have a javascript programm, which uses canvas to draw:
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
<meta charset="utf-8" />
<title>digitale Tafel</title>
<div id="spielfeld"></div>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="static/jquery.min.js"></script>
<script src="static/draw.js"></script>
</body>
</html>
javascript
var malen = {
gemaltBis: 0,
koordinaten: {},
menu: {
farben: [
'white',
'blue',
'red',
'black',
'darkgreen',
'yellow',
'orange',
'purple',
'saddlebrown',
'grey',
'pink'
],
breiten: [
3,
6,
9,
12,
15
]
},
punkte: ,
letztePunkte: ,
serverPunkte: 0,
vomServer:
}
malen.durchmesser = 3;
malen.colorStatus = 'black';
$('<div>').addClass('leiste').css({
position: 'fixed',
top: -1+'px',
left: 70+'px',
width: 625+'px',
height: 40+'px',
border: 1+'px solid grey',
backgroundColor: 'lightgrey',
borderBottomLeftRadius: 20+'px',
borderBottomRightRadius: 20+'px',
}).appendTo('#spielfeld');
for (color in malen.menu.farben) {
$('<div>').addClass('farben').css({
position: 'fixed',
top: 9+'px',
left: 100+color*30+'px',
width: 20+'px',
height: 20+'px',
backgroundColor: malen.menu.farben[color],
borderRadius: 15+'px',
}).click(farbeÄndern).appendTo('#spielfeld');
}
for (breite in malen.menu.breiten) {
$('<div>').addClass('esels').css({
border: 1+'px solid grey',
position: 'fixed',
top: 2+'px',
left: 450+breite*45+'px',
width: 40+'px',
height: malen.menu.breiten[breite]+'px',
backgroundColor: 'lightgrey',
borderRadius: 15+'px',
}).click(dickeÄndern).appendTo('#spielfeld');
}
function farbeÄndern() {
$('.farben').css({'border':0+'px'});
malen.colorStatus = this.style.backgroundColor;
document.getElementsByClassName('farben')[malen.menu.farben.indexOf(malen.colorStatus)].style.border = 2+'px solid';
this.style.borderColor = this.style.backgroundColor;
$('.esels').eq(malen.menu.breiten.indexOf(malen.durchmesser)).css({backgroundColor: malen.colorStatus,});
}
function dickeÄndern() {
$('.esels').css({'background-color':'lightgrey'});
malen.durchmesser = ((parseFloat(this.style.left)-450)/45+1)*3;
this.style.backgroundColor = malen.colorStatus;
}
$('.farben').eq(malen.menu.farben.indexOf('black')).css({border: 2+'px solid',})
$('.esels').eq(malen.menu.breiten.indexOf(3)).css({backgroundColor: malen.colorStatus});
var canvas = document.getElementById('canvas');
malen.ctx = canvas.getContext('2d');
$(window).resize(function () {
canvas.width = window.innerWidth;
canvas.height = window.innerWidth;
for (sache in malen.menu.breiten) {
$('.esels').eq(sache).css({height: malen.menu.breiten[sache]*canvas.width/500+'px'})
}
draw(0);
}).resize();
$('#canvas').on('mousedown', function (e) {
captureMousePoint(e)
$('#canvas').on('mousemove', captureMousePoint);
}).on('mouseup', function () {
$('#canvas').off('mousemove', captureMousePoint);
})
function captureMousePoint(e){
var einPunkt = {
x: 1 / canvas.width * e.pageX,
y: 1 / canvas.width * e.pageY,
radius: malen.durchmesser/2,
farbe: malen.colorStatus,
};
malen.punkte.push(einPunkt);
malen.letztePunkte.push(einPunkt);
draw(malen.punkte.length - 1);
}
function draw(since) {
var len = malen.punkte.length;
for (var i=since; i< len; i++) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.punkte[i].farbe;
malen.ctx.arc(
malen.punkte[i].x * canvas.width,
malen.punkte[i].y * canvas.width,
malen.punkte[i].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
}
function anServerSenden() {
console.log("anServerSenden", malen.letztePunkte.length);
if (malen.letztePunkte.length == 0) {
window.setTimeout(anServerSenden, 1000);
return;
}
$.ajax({
method: 'POST',
url: '/data/test',
headers: { 'Content-Type': 'application/json' },
data: JSON.stringify(malen.letztePunkte),
success: function(fromServer){
malen.vomServer = fromServer;
console.log("Antwort vom Server", malen.vomServer);
window.setTimeout(anServerSenden, 1000);
}
});
malen.letztePunkte = ;
}
vomServerMalen();
function vomServerMalen() {
for (item in malen.vomServer.punkte) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.vomServer.punkte[item].farbe;
malen.ctx.arc(
malen.vomServer.punkte[item].x * canvas.width,
malen.vomServer.punkte[item].y * canvas.width,
malen.vomServer.punkte[item].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
window.setTimeout(vomServerMalen, 1000);
}
anServerSenden();
And I want it to be an application, which can be used in a server-client-application for multiple clients. Therefor I am using nodejs and try to send the stats of every point I draw, in an array, so that another client can get these informations for every point and draw exactly this on his browser.
nodejs
var http = require("http");
var fs = require('fs');
function dateiLesen(dateiName, naechsteFunktion) {
fs.readFile(dateiName, function (err, data) {
if (err) {
naechsteFunktion("Kann nicht geladen werden: "+dateiName);
} else {
naechsteFunktion(data);
}
});
}
var listeGesamt = ;
http.createServer(function (request, response) {
console.log(request.url);
console.log(request.method, request.url);
console.log(" ", request.url.substring(1));
var found;
if (request.url === '/') {
request.url = '/draw.html';
// redirect auf eine BildId → über HTTP-Header im Response
} else if (found = request.url.match(/^/static/([^/]+)$/)) {
console.log(found);
dateiLesen(found[1], function(data){ response.end(data); })
} else if (found = request.url.match(/^/data/(w+)$/)) {
var daten = '';
response.setHeader('Content-Type', 'application/json');
request.on('data', function (chunk) {
daten += chunk;
}).on('end', function (){
// alle Daten geladen
liste = JSON.parse(daten);
listeGesamt = listeGesamt.concat(liste);
console.log("alle Daten: ", liste)
response.end(JSON.stringify({
"Datensaetze empfangen": liste.length,
serverListe: listeGesamt.length,
punkte: liste
}));
})
} else if (/^/w+$/.test(request.url)) {
dateiLesen('draw.html', function(data){ response.end(data); })
} else {
response.end("Kann Anfrage nicht bearbeiten");
}
}).listen(8081);
How can I make another browser to draw these points, that are send in the array 'liste'?
javascript node.js
asked Nov 19 at 13:28
Daniel Reimer
229
I have a javascript programm, which uses canvas to draw:
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
<meta charset="utf-8" />
<title>digitale Tafel</title>
<div id="spielfeld"></div>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="static/jquery.min.js"></script>
<script src="static/draw.js"></script>
</body>
</html>
javascript
var malen = {
gemaltBis: 0,
koordinaten: {},
menu: {
farben: [
'white',
'blue',
'red',
'black',
'darkgreen',
'yellow',
'orange',
'purple',
'saddlebrown',
'grey',
'pink'
],
breiten: [
3,
6,
9,
12,
15
]
},
punkte: ,
letztePunkte: ,
serverPunkte: 0,
vomServer:
}
malen.durchmesser = 3;
malen.colorStatus = 'black';
$('<div>').addClass('leiste').css({
position: 'fixed',
top: -1+'px',
left: 70+'px',
width: 625+'px',
height: 40+'px',
border: 1+'px solid grey',
backgroundColor: 'lightgrey',
borderBottomLeftRadius: 20+'px',
borderBottomRightRadius: 20+'px',
}).appendTo('#spielfeld');
for (color in malen.menu.farben) {
$('<div>').addClass('farben').css({
position: 'fixed',
top: 9+'px',
left: 100+color*30+'px',
width: 20+'px',
height: 20+'px',
backgroundColor: malen.menu.farben[color],
borderRadius: 15+'px',
}).click(farbeÄndern).appendTo('#spielfeld');
}
for (breite in malen.menu.breiten) {
$('<div>').addClass('esels').css({
border: 1+'px solid grey',
position: 'fixed',
top: 2+'px',
left: 450+breite*45+'px',
width: 40+'px',
height: malen.menu.breiten[breite]+'px',
backgroundColor: 'lightgrey',
borderRadius: 15+'px',
}).click(dickeÄndern).appendTo('#spielfeld');
}
function farbeÄndern() {
$('.farben').css({'border':0+'px'});
malen.colorStatus = this.style.backgroundColor;
document.getElementsByClassName('farben')[malen.menu.farben.indexOf(malen.colorStatus)].style.border = 2+'px solid';
this.style.borderColor = this.style.backgroundColor;
$('.esels').eq(malen.menu.breiten.indexOf(malen.durchmesser)).css({backgroundColor: malen.colorStatus,});
}
function dickeÄndern() {
$('.esels').css({'background-color':'lightgrey'});
malen.durchmesser = ((parseFloat(this.style.left)-450)/45+1)*3;
this.style.backgroundColor = malen.colorStatus;
}
$('.farben').eq(malen.menu.farben.indexOf('black')).css({border: 2+'px solid',})
$('.esels').eq(malen.menu.breiten.indexOf(3)).css({backgroundColor: malen.colorStatus});
var canvas = document.getElementById('canvas');
malen.ctx = canvas.getContext('2d');
$(window).resize(function () {
canvas.width = window.innerWidth;
canvas.height = window.innerWidth;
for (sache in malen.menu.breiten) {
$('.esels').eq(sache).css({height: malen.menu.breiten[sache]*canvas.width/500+'px'})
}
draw(0);
}).resize();
$('#canvas').on('mousedown', function (e) {
captureMousePoint(e)
$('#canvas').on('mousemove', captureMousePoint);
}).on('mouseup', function () {
$('#canvas').off('mousemove', captureMousePoint);
})
function captureMousePoint(e){
var einPunkt = {
x: 1 / canvas.width * e.pageX,
y: 1 / canvas.width * e.pageY,
radius: malen.durchmesser/2,
farbe: malen.colorStatus,
};
malen.punkte.push(einPunkt);
malen.letztePunkte.push(einPunkt);
draw(malen.punkte.length - 1);
}
function draw(since) {
var len = malen.punkte.length;
for (var i=since; i< len; i++) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.punkte[i].farbe;
malen.ctx.arc(
malen.punkte[i].x * canvas.width,
malen.punkte[i].y * canvas.width,
malen.punkte[i].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
}
function anServerSenden() {
console.log("anServerSenden", malen.letztePunkte.length);
if (malen.letztePunkte.length == 0) {
window.setTimeout(anServerSenden, 1000);
return;
}
$.ajax({
method: 'POST',
url: '/data/test',
headers: { 'Content-Type': 'application/json' },
data: JSON.stringify(malen.letztePunkte),
success: function(fromServer){
malen.vomServer = fromServer;
console.log("Antwort vom Server", malen.vomServer);
window.setTimeout(anServerSenden, 1000);
}
});
malen.letztePunkte = ;
}
vomServerMalen();
function vomServerMalen() {
for (item in malen.vomServer.punkte) {
malen.ctx.beginPath();
malen.ctx.fillStyle = malen.vomServer.punkte[item].farbe;
malen.ctx.arc(
malen.vomServer.punkte[item].x * canvas.width,
malen.vomServer.punkte[item].y * canvas.width,
malen.vomServer.punkte[item].radius * canvas.width/500,
0,
2*Math.PI
);
malen.ctx.fill();
}
window.setTimeout(vomServerMalen, 1000);
}
anServerSenden();
And I want it to be an application, which can be used in a server-client-application for multiple clients. Therefor I am using nodejs and try to send the stats of every point I draw, in an array, so that another client can get these informations for every point and draw exactly this on his browser.
nodejs
var http = require("http");
var fs = require('fs');
function dateiLesen(dateiName, naechsteFunktion) {
fs.readFile(dateiName, function (err, data) {
if (err) {
naechsteFunktion("Kann nicht geladen werden: "+dateiName);
} else {
naechsteFunktion(data);
}
});
}
var listeGesamt = ;
http.createServer(function (request, response) {
console.log(request.url);
console.log(request.method, request.url);
console.log(" ", request.url.substring(1));
var found;
if (request.url === '/') {
request.url = '/draw.html';
// redirect auf eine BildId → über HTTP-Header im Response
} else if (found = request.url.match(/^/static/([^/]+)$/)) {
console.log(found);
dateiLesen(found[1], function(data){ response.end(data); })
} else if (found = request.url.match(/^/data/(w+)$/)) {
var daten = '';
response.setHeader('Content-Type', 'application/json');
request.on('data', function (chunk) {
daten += chunk;
}).on('end', function (){
// alle Daten geladen
liste = JSON.parse(daten);
listeGesamt = listeGesamt.concat(liste);
console.log("alle Daten: ", liste)
response.end(JSON.stringify({
"Datensaetze empfangen": liste.length,
serverListe: listeGesamt.length,
punkte: liste
}));
})
} else if (/^/w+$/.test(request.url)) {
dateiLesen('draw.html', function(data){ response.end(data); })
} else {
response.end("Kann Anfrage nicht bearbeiten");
}
}).listen(8081);
How can I make another browser to draw these points, that are send in the array 'liste'?
javascript node.js
javascript node.js
asked Nov 19 at 13:28
Daniel Reimer
229
asked Nov 19 at 13:28
Daniel Reimer
229
asked Nov 19 at 13:28
Daniel Reimer
229
asked Nov 19 at 13:28
Daniel Reimer
229
asked Nov 19 at 13:28
Daniel Reimer
229
229
Maybe in some different words: "How can I draw at the same time on two open browsers. I draw on the one and the other uses the sended stats to draw it automaticaly?"
– Daniel Reimer
Nov 19 at 14:08
add a comment |
Maybe in some different words: "How can I draw at the same time on two open browsers. I draw on the one and the other uses the sended stats to draw it automaticaly?"
– Daniel Reimer
Nov 19 at 14:08
Maybe in some different words: "How can I draw at the same time on two open browsers. I draw on the one and the other uses the sended stats to draw it automaticaly?"
– Daniel Reimer
Nov 19 at 14:08
Maybe in some different words: "How can I draw at the same time on two open browsers. I draw on the one and the other uses the sended stats to draw it automaticaly?"
– Daniel Reimer
Nov 19 at 14:08
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
I found an answer. It was not so difficult, unfortunately it took some longer then I thought.
answered Nov 28 at 10:42
Daniel Reimer
229
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
I found an answer. It was not so difficult, unfortunately it took some longer then I thought.
answered Nov 28 at 10:42
Daniel Reimer
229
add a comment |
up vote
0
down vote
accepted
I found an answer. It was not so difficult, unfortunately it took some longer then I thought.
answered Nov 28 at 10:42
Daniel Reimer
229
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
I found an answer. It was not so difficult, unfortunately it took some longer then I thought.
answered Nov 28 at 10:42
Daniel Reimer
229
I found an answer. It was not so difficult, unfortunately it took some longer then I thought.
answered Nov 28 at 10:42
Daniel Reimer
229
edited Nov 28 at 11:16
answered Nov 28 at 10:42
Daniel Reimer
229
answered Nov 28 at 10:42
Daniel Reimer
229
answered Nov 28 at 10:42
Daniel Reimer
229
229
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53375683%2fhow-can-i-send-canvas-information-to-be-executed-in-another-browser-over-nodejs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Maybe in some different words: "How can I draw at the same time on two open browsers. I draw on the one and the other uses the sended stats to draw it automaticaly?"
– Daniel Reimer
Nov 19 at 14:08