Turning ON/OFF a template

Hi,

I'm streaming video through a template, but because I'm limited to the amount of streaming, I decided to control it with a switch.
When the switch is ON, the video is streaming otherwise, not. The switch turns OFF automatically after a period of 10 seconds, but not the template widget.

I just don't know how to stop streaming. The enable option in the template just greys it, but nothing else.

So, my question is, how can I block the widget from streaming?
TIA

[
    {
        "id": "6933f86e.a4a8f",
        "type": "ui_template",
        "z": "80a6d81ce6b76e0a",
        "group": "a35b2905.c83aa8",
        "name": "Camera",
        "order": 1,
        "width": "6",
        "height": "6",
        "format": "<!-- <div>\n    <img src=\"http://192.168.1.120:5000/html/min.php\" height=\"300\" width=\"300\"> \n</div> \n<iframe scrolling=no marginwidth=0 marginheight=0 frameborder=0 height=300 width=300 src=\"http://192.168.1.120:5000/html/min.php\"></iframe>\n-->\n{{payload}}",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 1060,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "3381048c6f112247",
        "type": "ui_switch",
        "z": "80a6d81ce6b76e0a",
        "name": "Cam ON/OFF",
        "label": "{{msg.label}}",
        "tooltip": "",
        "group": "a35b2905.c83aa8",
        "order": 3,
        "width": "5",
        "height": 1,
        "passthru": true,
        "decouple": "false",
        "topic": "",
        "topicType": "str",
        "style": "",
        "onvalue": "true",
        "onvalueType": "bool",
        "onicon": "",
        "oncolor": "",
        "offvalue": "false",
        "offvalueType": "bool",
        "officon": "",
        "offcolor": "",
        "animate": true,
        "className": "",
        "x": 760,
        "y": 260,
        "wires": [
            [
                "0b8be1f3c6abb021",
                "f65f56261d3dd123"
            ]
        ]
    },
    {
        "id": "f65f56261d3dd123",
        "type": "function",
        "z": "80a6d81ce6b76e0a",
        "name": "Enable Camera",
        "func": "if (msg.payload === true){\n    msg.payload = '<iframe scrolling=no marginwidth=0 marginheight=0 frameborder=0 height=300 width=300 src=\"http://192.168.1.120:5000/html/min.php\"></iframe>';\n}\nelse\n{\n    msg.payload = '<iframe scrolling=no marginwidth=0 marginheight=0 frameborder=0 height=300 width=300 src=\"\"></iframe>';\n}\nreturn msg;\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 1000,
        "y": 260,
        "wires": [
            [
                "6933f86e.a4a8f"
            ]
        ]
    },
    {
        "id": "67cd9c7cf5b4a0d6",
        "type": "inject",
        "z": "80a6d81ce6b76e0a",
        "name": "Set at start",
        "props": [
            {
                "p": "set",
                "v": "false",
                "vt": "bool"
            },
            {
                "p": "label",
                "v": "Cam OFF",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": "1",
        "topic": "",
        "x": 750,
        "y": 180,
        "wires": [
            [
                "3381048c6f112247"
            ]
        ]
    },
    {
        "id": "0b8be1f3c6abb021",
        "type": "trigger",
        "z": "80a6d81ce6b76e0a",
        "name": "",
        "op1": "true",
        "op2": "false",
        "op1type": "bool",
        "op2type": "bool",
        "duration": "10",
        "extend": false,
        "overrideDelay": false,
        "units": "s",
        "reset": "false",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 790,
        "y": 360,
        "wires": [
            [
                "3381048c6f112247",
                "87b89d385b8e497d"
            ]
        ]
    },
    {
        "id": "87b89d385b8e497d",
        "type": "function",
        "z": "80a6d81ce6b76e0a",
        "name": "",
        "func": "if(msg.payload === false){\n    msg.label = \"Cam OFF\";\n    msg.payload = false;\n}\nelse{\n    msg.label = \"Cam ON\";\n    msg.payload = true;\n}\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 980,
        "y": 360,
        "wires": [
            [
                "3381048c6f112247"
            ]
        ]
    },
    {
        "id": "a35b2905.c83aa8",
        "type": "ui_group",
        "name": "Camera",
        "tab": "fcae68a61b2b76db",
        "order": 4,
        "disp": true,
        "width": "6",
        "collapse": true
    },
    {
        "id": "fcae68a61b2b76db",
        "type": "ui_tab",
        "name": "DEMO",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

All the ui_template node does is to send the data out to the browser. It is the browser that is doing the streaming. If you want to change what the browser is doing then one way is to send a different template contents. So you could make it show an image in the iframe instead of the stream.

Got it, however, this test code only works for an image and not for the video. If I plug in the html code into the template, it works but not when sent out as a payload.

[
    {
        "id": "7a380429e9cc07f5",
        "type": "debug",
        "z": "80a6d81ce6b76e0a",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1270,
        "y": 600,
        "wires": []
    },
    {
        "id": "038009a1bcdf223a",
        "type": "inject",
        "z": "80a6d81ce6b76e0a",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "true",
        "payloadType": "bool",
        "x": 760,
        "y": 580,
        "wires": [
            [
                "d26531ed5911bca4"
            ]
        ]
    },
    {
        "id": "b774b399437d088c",
        "type": "inject",
        "z": "80a6d81ce6b76e0a",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "false",
        "payloadType": "bool",
        "x": 760,
        "y": 640,
        "wires": [
            [
                "259bd40bf907177f"
            ]
        ]
    },
    {
        "id": "f590832c0e77661b",
        "type": "ui_template",
        "z": "80a6d81ce6b76e0a",
        "group": "a35b2905.c83aa8",
        "name": "Camera",
        "order": 1,
        "width": "6",
        "height": "6",
        "format": "<div ng-bind-html=\"msg.payload\"></div>\n",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 1060,
        "y": 600,
        "wires": [
            [
                "7a380429e9cc07f5"
            ]
        ]
    },
    {
        "id": "d26531ed5911bca4",
        "type": "template",
        "z": "80a6d81ce6b76e0a",
        "name": "Video",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<div><iframe scrolling=no marginwidth=0 marginheight=0 frameborder=0 height=300 width=300 src=\"http://192.168.1.120:5000/html/min.php\"></iframe></div>",
        "output": "str",
        "x": 910,
        "y": 580,
        "wires": [
            [
                "f590832c0e77661b"
            ]
        ]
    },
    {
        "id": "259bd40bf907177f",
        "type": "template",
        "z": "80a6d81ce6b76e0a",
        "name": "Image",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<div><img src=\"/canvas2.png\" height=\"300\" width=\"300\" /></div>",
        "output": "str",
        "x": 910,
        "y": 640,
        "wires": [
            [
                "f590832c0e77661b"
            ]
        ]
    },
    {
        "id": "a35b2905.c83aa8",
        "type": "ui_group",
        "name": "Camera",
        "tab": "fcae68a61b2b76db",
        "order": 4,
        "disp": true,
        "width": "6",
        "collapse": true
    },
    {
        "id": "fcae68a61b2b76db",
        "type": "ui_tab",
        "name": "DEMO",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

Look in your first post at how you have referenced the payload in the template and compare it with this one.

I tried {{payload}} and {{msg.payload}} with no avail.
This line is the only one which allows to view the image but not the video based on my last nodes I posted.

<div ng-bind-html=msg.payload> </div>

and this' what I get in the debug console:

object
_msgid: "f110b3eb15fd63d1"
payload: "<iframe scrolling=no marginwidth=0 marginheight=0 frameborder=0 height=300 width=300 src="http://192.168.1.120:5000/html/min.php"></iframe>"
topic: ""

object
_msgid: "41dd123999432595"
payload: "<img src="/canvas2.png" height="300" width="300" />"
topic: ""

Meaning the code is switching ok but some happens in the template node which doesn't decode the html code to be sent to the browser.
I simplified even further the code:

[
    {
        "id": "7a380429e9cc07f5",
        "type": "debug",
        "z": "80a6d81ce6b76e0a",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1150,
        "y": 580,
        "wires": []
    },
    {
        "id": "038009a1bcdf223a",
        "type": "inject",
        "z": "80a6d81ce6b76e0a",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "true",
        "payloadType": "bool",
        "x": 760,
        "y": 580,
        "wires": [
            [
                "d26531ed5911bca4"
            ]
        ]
    },
    {
        "id": "f590832c0e77661b",
        "type": "ui_template",
        "z": "80a6d81ce6b76e0a",
        "group": "a35b2905.c83aa8",
        "name": "Camera",
        "order": 1,
        "width": "6",
        "height": "6",
        "format": "<div ng-bind-html=msg.payload> </div>\n",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 1020,
        "y": 580,
        "wires": [
            [
                "7a380429e9cc07f5"
            ]
        ]
    },
    {
        "id": "d26531ed5911bca4",
        "type": "template",
        "z": "80a6d81ce6b76e0a",
        "name": "Video",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<iframe scrolling=no marginwidth=0 marginheight=0 frameborder=0 height=300 width=300 src=\"http://192.168.1.120:5000/html/min.php\"></iframe>",
        "output": "str",
        "x": 890,
        "y": 580,
        "wires": [
            [
                "f590832c0e77661b"
            ]
        ]
    },
    {
        "id": "a35b2905.c83aa8",
        "type": "ui_group",
        "name": "Camera",
        "tab": "fcae68a61b2b76db",
        "order": 4,
        "disp": true,
        "width": "6",
        "collapse": true
    },
    {
        "id": "fcae68a61b2b76db",
        "type": "ui_tab",
        "name": "DEMO",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

That looks as if it should work.

  1. If you restart and then press the image inject does it show the image?
  2. What happens if you then press the other one?
  3. What happens if you then press the image again?

Ok, this' what happens:

  1. Yes, I can see the image.
  2. Black screen. (widget)
  3. Can see the image again.

Also, if I paste the video html code directly into the template, I can see the video streaming (from a Pi0 with a Pi cam) so, I know the link works. It just won't work if I'm pushing it through as I'm doing with the image.

What happens if you restart node-red, refresh the browser page and then hit the streaming inject?

Nothing. No video. Just a missing widget. The image part of it, still works.

I thought it was stopping the video that didn't work, but actually you are saying that you can't start it.

Can you post an example where the stream works?

Sure and thanks for helping.

With this stand alone node, the video is working (streaming from a web page). I also tried a public webcam outside my network.

[
    {
        "id": "f590832c0e77661b",
        "type": "ui_template",
        "z": "80a6d81ce6b76e0a",
        "group": "a35b2905.c83aa8",
        "name": "Camera",
        "order": 1,
        "width": "6",
        "height": "6",
        "format": "<!-- <div ng-bind-html=msg.payload> </div> -->\n<iframe scrolling=no marginwidth=0 marginheight=0 frameborder=0 height=300 width=300 src=\"http://192.168.1.120:5000/html/min.php\"></iframe>\n",
        "storeOutMessages": false,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 1100,
        "y": 600,
        "wires": [
            []
        ]
    },
    {
        "id": "a35b2905.c83aa8",
        "type": "ui_group",
        "name": "Camera",
        "tab": "fcae68a61b2b76db",
        "order": 4,
        "disp": true,
        "width": "6",
        "collapse": true
    },
    {
        "id": "fcae68a61b2b76db",
        "type": "ui_tab",
        "name": "DEMO",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

This' what I see inspecting the widget (template).

<md-card ui-template="me.item.format" ui-card-size="6x6" class="nr-dashboard-template visible" ng-class="[{'nr-dashboard-disabled':me.item.disabled}, me.item.className]" ng-show="true" node-id="f590832c0e77661b" aria-hidden="false" style="left: 0px; top: 0px; width: 318px; height: 318px;"><!-- <div ng-bind-html=msg.payload> </div> -->
<iframe scrolling="no" marginwidth="0" marginheight="0" frameborder="0" height="300" width="300" src="http://192.168.1.120:5000/html/min.php">
</iframe></md-card>

When injecting the video html code from outside the template node, the above line cointaining the video info is missing thus no video is displayed.

Probably it's do to the element: <iframe></iframe> when passed on.

The technique to use here is to leave the ui-template contents blank and feed in the complete template via msg.template as described in the help text for the node. Try this, note that the template nodes are now filling msg.template not msg.payload.

[{"id":"535b74e881244d26","type":"debug","z":"84405ff5.25fa6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":610,"y":2480,"wires":[]},{"id":"0f7af9df0d5d4155","type":"inject","z":"84405ff5.25fa6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":160,"y":2460,"wires":[["339ff0b7c77c96bc"]]},{"id":"673a952df4ccee95","type":"inject","z":"84405ff5.25fa6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":160,"y":2520,"wires":[["449cb8858a645404"]]},{"id":"558fc687ba0fb9b0","type":"ui_template","z":"84405ff5.25fa6","group":"a2fd251646d3069d","name":"Camera","order":1,"width":"6","height":"6","format":"","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","className":"","x":460,"y":2480,"wires":[["535b74e881244d26"]]},{"id":"339ff0b7c77c96bc","type":"template","z":"84405ff5.25fa6","name":"Video","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div><iframe scrolling=no marginwidth=0 marginheight=0 frameborder=0 height=300 width=300 src=\"http://192.168.1.120:5000/html/min.php\"></iframe></div>","output":"str","x":310,"y":2460,"wires":[["558fc687ba0fb9b0"]]},{"id":"449cb8858a645404","type":"template","z":"84405ff5.25fa6","name":"Image","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div><img src=\"/canvas2.png\" height=\"300\" width=\"300\" /></div>","output":"str","x":310,"y":2520,"wires":[["558fc687ba0fb9b0"]]},{"id":"a2fd251646d3069d","type":"ui_group","name":"Test","tab":"3febc928.86e386","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"3febc928.86e386","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

It worked, thank you much!! Of course, I've used always msg.payload. I even saw msg.template in the help page, but I didn't think it applied in my case. Oh well, another learning experience. :slightly_smiling_face:
Thanks again.

Using msg.template is the way to solve this problem because you want to replace the complete template contents.

Got you! :+1:

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.