2013-02-04 82 views
3

新來的Node.js的Node.js +處理(.js文件)

我試圖通過node.js的失敗processingprocessing.js互動。

如果我打開我的index.html直接進入瀏覽器在我的測試工作正常但 當我嘗試使用節點(節點sample.js在localhost:8080)的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:這個代碼,不使用節點,經由加載處理的圖像和繪製一個橢圓,用加載的圖像,當按鈕被按下

預先感謝。

+0

Processing.getInstanceById('pippo')是否成功返回實例? – stevejpurves

回答

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> 

有幾個原因,你大一函數調用失敗,第一個通常是試圖訪問草圖實例它被初始化之前。當素描的引用被添加到實例列表中時,也存在一個簡短的時間間隔,但它尚未完成綁定其所有功能的過程,因此這就是爲什麼您通常要測試將要調用的函數的原因。另一種方法是這樣的:

<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毫秒調度嘗試參考。