Node.js + Processing (.js)
New to node.js
I am trying to interact with processing and processing. js via node.js without success.
If I open my index.html directly in the browser my test works fine , but when I try to use node (node sample.js on localhost: 8080) the activity.pde doesn't load correctly
I have sample.js like this:
var http = require('http'),
url = require('url'),
fs = require('fs'),
io = require('socket.io'),
sys = require(process.binding('natives').util ? 'util' : 'sys');
send404 = function(res) {
res.writeHead(404);
res.write('404');
res.end();
};
server = http.createServer(function(req, res) {
// your normal server code
var path = url.parse(req.url).pathname;
switch(path) {
//case '/json.js':
case '/':
fs.readFile(__dirname + "/index.html", function(err, data) {
if(err) return send404(res);
res.writeHead(200, {
'Content-Type': path == 'json.js' ? 'text/javascript' : 'text/html'
})
res.write(data, 'utf8');
res.end();
});
break;
}
});
server.listen(8080);
// socket.io
var socket = io.listen(server);
Simple index.html:
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://github.com/downloads/processing-js/processing-js/processing-1.4.1.min.js"></script>
<canvas id="pippo" data-processing-sources="activity.pde"></canvas>
<script type="application/javascript">
function doIT() {
var processingInstance;
processingInstance = Processing.getInstanceById('pippo');
processingInstance.myTest(0.8,51.5);
processingInstance.myTest(9.19,45.27);
}
</script>
<button onclick="doIT();">doit</button>
</body>
</html>
And a simple .pde file like this:
// @pjs preload must be used to preload the image
/* @pjs preload="image.png"; */
PImage backgroundMap;
float mapScreenWidth,mapScreenHeight; // Dimension of map in pixels.
void setup()
{
size(600,350);
smooth();
noLoop();
backgroundMap = loadImage("image.png");
mapScreenWidth = width;
mapScreenHeight = height;
}
void draw()
{
image(backgroundMap,0,0,mapScreenWidth,mapScreenHeight);
}
void myTest(float a, float b) {
ellipse(a,b,5,5);
}
if i try to update sample.js to:
case '/':
fs.readFile(__dirname + "/index.html", function(err, data) {
if(err) return send404(res);
res.writeHead(200, {
'Content-Type': path == 'json.js' ? 'text/javascript' : 'text/html'
})
res.write(data, 'utf8');
res.end();
});
break;
case '/activity.pde':
fs.readFile(__dirname + "/activity.pde", function(err, data) {
if(err) return send404(res);
res.writeHead(200, {
'Content-Type': 'plain/text'
})
res.write(data, 'utf8');
res.end();
});
break;
the pde activity seems to be loaded correctly (200 OK 128ms), but when I try to use the "doIT" button, I get this error: "TypeError: processingInstance.myTest is not a function handlingInstance.myTest (0.8.51.5);"
Do you have any suggestions on how to work with this setting?
PS: this code without using node loads the image via processing and draws an ellipse over the loaded image on button click
Thanks in advance.
source to share
For debugging purposes, you probably want to change your doIT function to this:
<script type="application/javascript">
function doIT() {
var processingInstance = Processing.getInstanceById('pippo');
if(!processingInstance) {
console.log("'pippo' instance not loaded (yet)");
return;
}
if(!processingInstance.myTest) {
console.log("'pippo' instance started loading, but hasn't completed yet");
return;
}
// if we do get here, the instance should be ready to go.
processingInstance.myTest(0.8,51.5);
processingInstance.myTest(9.19,45.27);
}
</script>
There are several reasons why your doIT function is failing, the former usually trying to access the sketch instance before initializing it. There's also a short interval where the thumbnail link was added to the list of instances, but it hasn't finished linking all of its functions yet, so you usually want to test the function you are about to call. An alternative might be the following:
<script type="application/javascript">
var pippoSketch = false;
(function bindSketch() {
pippoSketch = Processing.getInstanceById('pippo');
if(!pippoSketch || !pippoSketch.myTest) {
setTimeout(bindSketch, 250); }
}());
function doIT() {
if (!pippoSketch) {
console.log("pippoSketch not ready yet.");
return;
}
pippoSketch.myTest(0.8,51.5);
pippoSketch.myTest(9.19,45.27);
}
</script>
This will try to get the full initialized link to your thumbnail until the link is mentioned by scheduling retries every 250ms.
source to share