Passing msg.payload to template node

Dashboard
1

Hi,
I have a template node to display video from uv4l
Inside it the following code works:

Now, I want to replace the fixed IP address inside src with the one obtain from hostIP node
I placed the following code inside the template node:

2

where is the code ? :slight_smile:

3

it says: Sorry, new users can not upload attachments.

4

I'm new too but you can link to a gist or a paste text file or just past directly here as quote

5

.Please read the following post How to share code or flow json

6 
[{"id":"3aa66755.4eb88","type":"ui_template","z":"17fd675a.21c6a9","group":"cab0f2f3.38805","name":"Display image","order":1,"width":"12","height":"12","format":"<script id=\"VScript\" type=\"text/javascript\">\n$('#VFrame').src = \"http://\"+ msg.payload +\"/stream\";\n</script>\n\n<iframe id=\"VFrame\" width=\"640\" height=\"480\" frameborder=\"0\" src = \"\"></iframe>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":440,"y":140,"wires":[["badece5a.72b42"]]},{"id":"cab0f2f3.38805","type":"ui_group","z":"","name":"Video","tab":"87292ee3.d0c23","order":1,"disp":true,"width":"12","collapse":true},{"id":"87292ee3.d0c23","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
7

How to code the template node to pass the IP address? (currently is hard-coded)

[{"id":"17fd675a.21c6a9","type":"tab","label":"IoBees_00","disabled":false,"info":""},{"id":"3aa66755.4eb88","type":"ui_template","z":"17fd675a.21c6a9","group":"cab0f2f3.38805","name":"Display image","order":1,"width":"12","height":"12","format":"<script id=\"VScript\" type=\"text/javascript\">\n$('#VFrame').src = \"http://\"+ msg.payload +\"/stream\";\n</script>\n\n<iframe id=\"VFrame\" width=\"640\" height=\"480\" frameborder=\"0\" src = \"http://192.168.1.8:8080/stream\"> </iframe>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":440,"y":140,"wires":[["badece5a.72b42"]]},{"id":"404cc60a.39e1b8","type":"ui_template","z":"17fd675a.21c6a9","group":"cab0f2f3.38805","name":"Clock Toolbar","order":4,"width":"0","height":"0","format":"<script id=\"titleScript\" type=\"text/javascript\">\n    $('#clock').remove();\n    var toolbar = $('.md-toolbar-tools');\n    var div = $('<div/>');\n    var p = $('<p/ id=\"clock\">');\n    \n    $('#titleScript').parent().hide();\n    div.append(p);\n    div[0].style.margin = '5px 5px 5px auto';\n    toolbar.append(div);\n\n    function displayTitle(lh) {\n        p.text(lh); \n    }\n    \n    function upTime() {\n        var d = new Date();\n        p.text(d.toLocaleTimeString('de-AT'));\n    }\n\n    \n\n    // Watch the payload and update the title\n    (function(scope) {\n        scope.$watch('msg.payload', function(data) {\n            displayTitle(data);\n        });\n        setInterval(upTime,1000);\n    })(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":220,"y":140,"wires":[[]]},{"id":"39f722d3.cc9636","type":"hostip","z":"17fd675a.21c6a9","name":"Host IP","x":280,"y":60,"wires":[["a253a9b5.b4c618"]]},{"id":"18ff6de1.3d316a","type":"debug","z":"17fd675a.21c6a9","name":"","active":false,"tosidebar":true,"console":true,"tostatus":true,"complete":"payload","x":620,"y":60,"wires":[]},{"id":"57ff7bed.2cbbfc","type":"inject","z":"17fd675a.21c6a9","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":110,"y":60,"wires":[["39f722d3.cc9636"]]},{"id":"badece5a.72b42","type":"debug","z":"17fd675a.21c6a9","name":"","active":false,"tosidebar":true,"console":true,"tostatus":true,"complete":"true","x":590,"y":140,"wires":[]},{"id":"a253a9b5.b4c618","type":"function","z":"17fd675a.21c6a9","name":"hostIP","func":"msg.payload = msg.payload[0].address;\nreturn msg;","outputs":1,"noerr":0,"x":430,"y":60,"wires":[["18ff6de1.3d316a","3aa66755.4eb88"]]},{"id":"cab0f2f3.38805","type":"ui_group","z":"","name":"Video","tab":"87292ee3.d0c23","order":1,"disp":true,"width":"12","collapse":true},{"id":"87292ee3.d0c23","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
8

you need to put {{ }} around the variable like {{msg.payload}}

9

I did it now, still doesn't work

<iframe id="VFrame" width="640" height="480" frameborder="0" src = ""> </iframe>

<script id="VScript" type="text/javascript">
$('#VFrame').src = "http://"+ {{msg.payload}} +"/stream";
</script>
10

The following code works: (but has a hard-coded IP address)

<iframe id="VFrame" width="640" height="480" frameborder="0" src = "http://192.168.1.8:8080/stream"> </iframe>

I need to insert the IP address as it will be different for different RPi, so the value "192.168.1.8" has to be taken from host IP address. How to do it?

11

You can use an exec node with a command like
ifconfig wlan0 |grep netmask |sed 's/.*inet \([^ ]*\).*/\1/'

12

Thanks, but I have no problem with reading the host IP, I use the hostIP node. My problem is how to insert that address into the template node inside the iframe src

13

I'm still stack, no solution, no help :cry:

14

Use a debug node on the hostip node to find out what it is sending out. Then change the template node to use he correct variable. msg.payload.something.

(edit) - Having now had a look at the hostip node - it returns an array of objects - so you will probably need a function node to do some processing to extract the ip you actually want from the array.

In my case it is the 4th object in the array so would be something like {{msg.payload[3].address}}

15

thanks, i have found the solution:

<iframe id="myFrame" width="640" height="480" src = ""></iframe>
<script>
(function(scope) {
    // watch msg object from Node-RED
    scope.$watch('msg', function(msg) {
        // new message received
        var x = document.getElementById('myFrame');
        x.setAttribute('src', msg.payload); 
        });
})(scope);
</script>
2 Likes