CODEWITHSUNDEEP
node.jsprocessing
Cristian Porta
Cristian Porta

Reputation: 4433

Node.js + Processing(.js)

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.

Upvotes: 3

Views: 2735

Answers (1)

Mike &#39;Pomax&#39; Kamermans
Mike &#39;Pomax&#39; Kamermans

Reputation: 53597

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'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:

<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 grab a full initialised reference to your sketch, until it has said reference by scheduling attempts every 250ms.

Upvotes: 2

Related Questions