要通过Node-Red仪表板控制机器人，我需要某种用于UI的操纵杆控件（而不是硬件操纵杆）。
幸运的是，我发现nippleJS确实可以满足我的需求。另外，我还可以使其与ui_template节点一起运行。
现在我被卡住了。如何将坐标发送回红色节点？我知道我无法到达任何上下文，并且只得到一个msg对象。但我无法更改它（味精未定义）。
这是我目前的流量。要运行它，您必须加载nipplejs并相应地设置路径。我希望外面有人可以向我展示一种如何将数据发送回红色节点的方法
[{"id":"ff5f827f.796e","type":"ui_template","z":"9738c4ac.01e748","group":"9550e4e.ea6f618","name":"","order":0,"width":"6","height":"6","format":"\n<script src=\"/myjs/nippleJS/nipplejs.min.js\" ></script>\n\n<div data-type=\"semi\" id=\"zone_joystick\" style=\"position:absolute; width:200px; height:200px; background-color:grey;\"></div>\n\n<script>\n\n\n (function(scope){ \n\n scope.$watch('msg', function(msg) {\n createJoystick();\n \n });\n })(scope);\n\n\nfunction createJoystick(){\n var semi = nipplejs.create({\n zone: document.getElementById('zone_joystick'),\n mode: 'semi',\n catchDistance: 150,\n color: 'white'\n });\n\t\n\n\tsemi.on('move', function(evt, nipple_obj) {\n\t debug(nipple_obj);\n\t});\n\t\n\t}\n\nfunction debug(obj) {\n setTimeout(function() {\n var test = obj.position.x;\n console.log(test);\n }, 0);\n}\t\n\t\n\t\t\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":286,"y":708,"wires":[["17f18c51.494204","3e99bf46.a8532"]]},{"id":"b2219879.075b28","type":"inject","z":"9738c4ac.01e748","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":117,"y":675,"wires":[["ff5f827f.796e"]]},{"id":"17f18c51.494204","type":"ui_text","z":"9738c4ac.01e748","group":"9550e4e.ea6f618","order":0,"width":"3","height":"2","name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":468,"y":736,"wires":[]},{"id":"3e99bf46.a8532","type":"debug","z":"9738c4ac.01e748","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":314,"y":769,"wires":[]},{"id":"9550e4e.ea6f618","type":"ui_group","z":"","name":"Joystick","tab":"ccfc45fa.de7cb8","order":1,"disp":true,"width":"6","collapse":false},{"id":"ccfc45fa.de7cb8","type":"ui_tab","z":"","name":"Bubbles","icon":"dashboard"}]
对于那些不想导入流程的人，这是我使用的脚本。如您在函数调试中看到的，我可以将值打印到控制台。我需要这个值。
<script src="/myjs/nippleJS/nipplejs.min.js" ></script>
<div data-type="semi" id="zone_joystick" style="position:absolute; width:200px; height:200px; background-color:grey;"></div>
<script>
(function(scope){
scope.$watch('msg', function(msg) {
createJoystick();
});
})(scope);
function createJoystick(){
var semi = nipplejs.create({
zone: document.getElementById('zone_joystick'),
mode: 'semi',
catchDistance: 150,
color: 'white'
});
semi.on('move', function(evt, nipple_obj) {
debug(nipple_obj);
});
}
function debug(obj) {
setTimeout(function() {
var test = obj.position.x;
console.log(test);
}, 0);
}
</script>
谢谢您的支持，帕特里克。
答案 0 :(得分：2)
scope对象具有一个send函数，可用于在运行时内从ui_template节点发送消息。
您需要结构化代码，以便move事件的回调在scope变量的范围内。例如，将<script>块中的代码替换为：
(function(scope){
function createJoystick(){
var semi = nipplejs.create({
zone: document.getElementById('zone_joystick'),
mode: 'semi',
catchDistance: 150,
color: 'white'
});
semi.on('move', function(evt, nipple_obj) {
setTimeout(function() {
var test = obj.position.x;
// use scope.send to trigger a message in the runtime flow
scope.send({payload:test});
}, 0);
});
}
scope.$watch('msg', function(msg) {
createJoystick();
});
})(scope);
答案 1 :(得分：0)
以防万一其他人想要使用nippleJS，这是我的工作代码
[{"id":"d1cb92a5.0e9b2","type":"inject","z":"cf477024.84de6","name":"Trigger UI Templates","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":163,"y":209,"wires":[["93a7c595.e3b868","8b092d1b.0e2ed"]]},{"id":"8b092d1b.0e2ed","type":"ui_template","z":"cf477024.84de6","group":"52892a0c.d9c5b4","name":"Joystick","order":0,"width":"6","height":"6","format":"<script src=\"/myjs/nippleJS/nipplejs.min.js\" ></script>\n\n<div data-type=\"dynamic\" id=\"zone_joystick\" style=\"position:absolute; width:200px; height:200px; background-color:grey;\"></div>\n\n<script>\n\n\n(function(scope){ \n\n function createJoystick(){\n var dynamic = nipplejs.create({\n zone: document.getElementById('zone_joystick'),\n mode: 'dynamic',\n catchDistance: 150,\n color: 'white'\n });\n dynamic.on('move', function(evt, nipple_obj) {\n setTimeout(function() {\n var posx = nipple_obj.position.x;\n var posy = nipple_obj.position.y;\n var centerx = nipple_obj.instance.position.x;\n var centery = nipple_obj.instance.position.y;\n // use scope.send to trigger a message in the runtime flow\n scope.send({payload:{x: posx, y:posy, centerx:centerx, centery:centery}});\n }, 0);\n\n });\n }\n\n\n scope.$watch('msg', function(msg) {\n createJoystick();\n\n });\n})(scope);\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":434,"y":212,"wires":[["65da6852.c65ac8","fbdf3963.9c2858"]]},{"id":"fbdf3963.9c2858","type":"function","z":"cf477024.84de6","name":"","func":"\nvar x = {payload:msg.payload.centerx - msg.payload.x};\nvar y = {payload:msg.payload.centery - msg.payload.y};\n\nreturn [x, y];","outputs":2,"noerr":0,"x":578,"y":216,"wires":[["26f05e22.8d3a12"],["2d78681b.d82be8"]]},{"id":"26f05e22.8d3a12","type":"ui_text","z":"cf477024.84de6","group":"52892a0c.d9c5b4","order":0,"width":"3","height":"1","name":"","label":"X","format":"{{msg.payload}}","layout":"row-spread","x":710,"y":227,"wires":[]},{"id":"2d78681b.d82be8","type":"ui_text","z":"cf477024.84de6","group":"52892a0c.d9c5b4","order":0,"width":"3","height":"2","name":"","label":"Y","format":"{{msg.payload}}","layout":"row-spread","x":719,"y":275,"wires":[]},{"id":"65da6852.c65ac8","type":"debug","z":"cf477024.84de6","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":571,"y":257,"wires":[]},{"id":"52892a0c.d9c5b4","type":"ui_group","z":"","name":"Default","tab":"56c2703a.7a819","disp":true,"width":"6","collapse":false},{"id":"56c2703a.7a819","type":"ui_tab","z":"","name":"Manual","icon":"dashboard"}]
再次感谢贵族