New to node.js
I’m trying to interact with processing and processing.js via node.js unsuccessfully.
If I open my index.html direct into 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 a 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);
A 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 one:
// @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 my 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 activity pde seems to load correctly (200 OK 128ms) but when I try to use the “doIT” button I get this error:
“TypeError: processingInstance.myTest is not a function processingInstance.myTest(0.8,51.5);”
Do you have any suggestion for work with this setup?
PS: This code, without using node, loads an image via processing and draw an ellipse, over the loaded image, when a button is pressed
Thanks in advance.
For debugging purposes, you probably want to change your doIT function to this:
There’s a couple of reasons your doIT function fails, the first usually being trying to access the sketch instance before it’s been initialised. There’s also the brief interval when the sketch’s reference has been added to the instance list, but it hasn’t finished binding all its functions, so that’s why you usually want to test for the function you’re going to call. An alternative would be this:
This will try to grab a full initialised reference to your sketch, until it has said reference by scheduling attempts every 250ms.