Dashboard 2 Template Node

Dashboard
1

In dashboard 2 I am setting the templet node from a incoming msg to display a ifram, this is a Grafana dashboard, it does not display the ifram.

The same flow with a Old dashboard templet node works.

Are there any changes from old dashboard to Dashboard2 to handle ifram of setting the template?

The msg

{"_msgid":"01b538a4af8fd2d7","payload":["10.0.0.11","\n"],"rc":{"code":0},"template":"<iframe src='http://10.0.0.11:3000/d/bbae67aa-afc9-4bbe-aeb8-76339748f1bc/aquaponics-1?orgId=1' th='3500'height='1800' frameborder='0'></iframe>'"}

The flow

[
    {
        "id": "6564d0b5b467e2fd",
        "type": "tab",
        "label": "Flow 2",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "c3f5a68812aca5d6",
        "type": "debug",
        "z": "6564d0b5b467e2fd",
        "name": "debug 14",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 920,
        "y": 300,
        "wires": []
    },
    {
        "id": "2f65950e206b0751",
        "type": "ui-template",
        "z": "6564d0b5b467e2fd",
        "group": "3f3131ffec036689",
        "dashboard": "2a0aae187070df62",
        "page": "2b0f4e6f0f7de505",
        "name": "",
        "order": 0,
        "width": "34",
        "height": "14",
        "head": "",
        "format": "",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 780,
        "y": 360,
        "wires": [
            []
        ]
    },
    {
        "id": "9283fc7f8810b080",
        "type": "inject",
        "z": "6564d0b5b467e2fd",
        "name": "",
        "props": [
            {
                "p": "payload"
            }
        ],
        "repeat": "30",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 110,
        "y": 300,
        "wires": [
            [
                "161bc4b5d6586be4"
            ]
        ]
    },
    {
        "id": "161bc4b5d6586be4",
        "type": "exec",
        "z": "6564d0b5b467e2fd",
        "command": "hostname -I",
        "addpay": "",
        "append": "",
        "useSpawn": "false",
        "timer": "",
        "winHide": false,
        "oldrc": false,
        "name": "",
        "x": 270,
        "y": 300,
        "wires": [
            [
                "3f17a18435ea04ed"
            ],
            [],
            []
        ]
    },
    {
        "id": "854edd9f0b30d69f",
        "type": "change",
        "z": "6564d0b5b467e2fd",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "hostIP",
                "pt": "flow",
                "to": "payload[0]",
                "tot": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 580,
        "y": 300,
        "wires": [
            [
                "9630b8c4d1fa11e1"
            ]
        ]
    },
    {
        "id": "9630b8c4d1fa11e1",
        "type": "function",
        "z": "6564d0b5b467e2fd",
        "name": "iframe",
        "func": "let ip = flow.get(\"hostIP\")\n\n\nmsg.template = \"<iframe src='http://\" + ip + \":3000/d/bbae67aa-afc9-4bbe-aeb8-76339748f1bc/aquaponics-1?orgId=1' th='3500'height='1800' frameborder='0'></iframe>'\"\n\n\nreturn msg;\n\n\n//<iframe src=\"http://10.0.0.7:3000/d-solo/bbae67aa-afc9-4bbe-aeb8-76339748f1bc/aaquaponics-1?orgId=1\" width=\"450\" height=\"200\" frameborder=\"0\"></iframe>\n\n\n//http://10.0.0.7:3000/d/bbae67aa-afc9-4bbe-aeb8-76339748f1bc/aquaponics-1?orgId=1",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 750,
        "y": 300,
        "wires": [
            [
                "2f65950e206b0751",
                "c3f5a68812aca5d6"
            ]
        ]
    },
    {
        "id": "3f17a18435ea04ed",
        "type": "function",
        "z": "6564d0b5b467e2fd",
        "name": "split",
        "func": "let a = msg.payload.split(' ')\n\nmsg.payload = a\nreturn msg;",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 410,
        "y": 300,
        "wires": [
            [
                "854edd9f0b30d69f"
            ]
        ]
    },
    {
        "id": "3f3131ffec036689",
        "type": "ui-group",
        "name": "Grafana",
        "page": "2b0f4e6f0f7de505",
        "width": "36",
        "height": "1",
        "order": -1,
        "disp": true,
        "className": ""
    },
    {
        "id": "2a0aae187070df62",
        "type": "ui-base",
        "name": "1234",
        "path": "/dashboard"
    },
    {
        "id": "2b0f4e6f0f7de505",
        "type": "ui-page",
        "name": "Aqua",
        "ui": "2a0aae187070df62",
        "path": "/this is it",
        "layout": "grid",
        "theme": "42a04c91ac70eb75",
        "order": -1,
        "className": ""
    },
    {
        "id": "42a04c91ac70eb75",
        "type": "ui-theme",
        "name": "Theme Name",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094ce",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        }
    }
]
2

Check if you see any errors in the browser Developer Console when you refresh the page.

3

I can't see any

This is from the dashboard2

image
image1358Ă—596 40.9 KB

4

I can't actually see anywhere in the docs that is says you can pass in the complete template content in msg.template. Perhaps @joepavitt could comment.

5

It works with passing the complete templet in the msg.templet in the old dashboard, I did not read the new doc, assumed it will be a similar node in dashboard 2.

If you set the templet node up with

<template>
<iframe src='https://www.google.com' th='3500'height='1800' frameborder='0'></iframe>'
<template>

and you open up the dashboard2 the web browser freeze up and node-red. You have to stop node-red and restart in safe mode.

Node-red is running on a Raspberry PI 4 and I an remotely opening the via my laptop the dashboard

Have anyone tried ifram with dashboard2?

6

I don't get a lockup. Google won't connect, which is a cross site issue I suspect. If I put "http://localhost:1880" as the source it shows correctly. It doesn't recognise th='3500' of course, but it doesn't appear to cause a problem. Are you using the latest version of D2? 1.0.2
Perhaps your browser doesn't like th=

7

The templet node are very syntax sensitive, make a mistake and it will crash the flow.

With the old dash board you could pass in the 'templet' into the node, not with the dashboard2 templet node.

If you want a iframe of Grafana in the dashboard2 templet node add

image
image868Ă—317 10.7 KB

If I replace the IP with 'http://localhost:3000' it does not build.

Although if you use '' it builds your node-red flow.

Wil need to look a bit more into how to call the IP with in the node (if you can) and build the iframe, as I need the IP to be dynamic.

If the PI reboots and get a new IP assigned I need the iframe to reflect this.

8

What do you mean by does not build?

What happens if, in a command window on the pi, you run
wget http://localhost:3000
and
ping localhost

Is node-red running in Docker or similar?

9

Sorry my bad here.

I have node-red running on my laptop, so if you use 'http://localhost:1800' the ifram is off my laptops node-red, not the PI. (missing a small detail here).

I don't have Grafana on my laptop, that is why the iframe will not build 'http://localhost:3000'

Node-red is not running in docker.

The issue now is to try and make the iframe dynamic.

10

So none of that is anything to do with the template node itself.

I still don't understand what you mean by not building, also I don't understand in what way you have managed to crash node red.

1 Like
11

Use this as your iframe. (Use a port number not used on you system at all)

<iframe src='http//10.0.0.1:3001 width='1500' height='800' frameborder='0$125'></iframe>

Deploy your dashbard2, do your node-red stop working?

Yes you can set the templet node from a incoming message like the old dashboard

12

No, node-red is not affected. The browser hangs so you can't do anything via the browser, closing that tab in the browser stops the hang and all is well again.

But you are correct in that the D1 template, given that iframe, does not hang the browser.

13

It would possibly be worth while submitting an issue against the dashboard suggesting that it should at least check for valid html in the template before passing it to the browser, if that is what is causing the problem.

14

As @Colin has mentioned, currently dynamic msg.template isn’t supported.

15

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