Node-Red UI_Template send msg

Question

to control my robot via Node-Red dashboard, I need some kind of joystick control for UI (not a hardware joystick).

Luckily I found nippleJS which does exactly what I was looking for. Also I was able to get it running with ui_template node.

Now I get stuck. How can I send the coordinates back to node-red node? I know that I can't reach any context and I only get a msg object. But I'm unable to change it (msg undefined).

Here is my current flow. To run it you must load nipplejs and set the path accordingly. I hope someone out there can show me a way how to send data back to node-red

[{"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"}]

For those who don't want to import the flow, here is the Script I use. As you see in function debug, I can print the values to console. I need this value back.

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

Thank you for your support, Patrick.

knolleary knolleary · Accepted Answer · 2018-06-21T13:16:46

The scope object has a send function that can be used to send a message from the ui_template node within the runtime.

You need to structure your code so the callback for the move event is in scope of the scope variable. For example, replace your code inside the <script> block with:

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

Node-Red UI_Template send msg

2 Answers