新到node.js
我试图通过正在处理中和processing.js通过node.js进行交互,但没有成功。
--如果我将index.html直接打开浏览器,我的测试工作良好--,但是当我尝试使用节点(localhost上的节点sample.js :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;activity似乎加载正确(200 OK 128 is ),但是当我尝试使用"doIT“按钮时,我得到了一个错误:"TypeError: processingInstance.myTest不是函数processingInstance.myTest(0.8,51.5);”
您对此设置有什么建议吗?
PS:此代码不使用节点,通过处理加载图像,并在按下按钮时在加载的图像上绘制一个椭圆。
提前谢谢。
发布于 2013-02-04 22:03:34
出于调试目的,您可能希望将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函数失败有几个原因,第一个原因通常是在初始化草图实例之前访问它。当草图的引用被添加到实例列表中时也有一个短暂的间隔,但是它还没有完成所有函数的绑定,所以这就是为什么您通常希望测试要调用的函数。另一种选择是:
<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 by安排一次尝试来表示引用为止。
https://stackoverflow.com/questions/14682786
复制相似问题