3

node.js の新機能

node.js を介してprocessingおよびprocessing.jsと対話しようとしていますが、うまくいきません。

index.html をブラウザーで直接開くと、テストは正常に機能しますが、ノード (localhost:8080 のノード sample.js) を使用しようとすると、activity.pde が正しく読み込まれません。

次のような sample.js があります。

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);

シンプルな 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>

そして、次のような単純な .pde ファイル:

// @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);
}

sample.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;
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;

アクティビティ pde は正しくロードされているようですが (200 OK 128ms)、「doIT」ボタンを使用しようとすると、「TypeError: processingInstance.myTest は関数 processingInstance.myTest(0.8,51.5); ではありません」というエラーが表示されます。

このセットアップで作業するための提案はありますか?

PS: このコードは、ノードを使用せずに、ボタンが押されると、処理によって画像を読み込み、読み込まれた画像の上に楕円を描画します。

前もって感謝します。

4

1 に答える 1

2

デバッグの目的で、おそらく doIT 関数を次のように変更する必要があります。

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

doIT 関数が失敗する理由はいくつかあります。1 つ目は通常、初期化される前にスケッチ インスタンスにアクセスしようとすることです。スケッチの参照がインスタンス リストに追加される短い間隔もありますが、すべての関数のバインドが完了していないため、通常は呼び出す関数をテストする必要があります。別の方法は次のとおりです。

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

これは、250 ミリ秒ごとに試行をスケジュールすることにより、参照が完了するまで、スケッチへの完全に初期化された参照を取得しようとします。

于 2013-02-04T22:03:34.723 に答える