New third-party iframe widget & updated docs

[joepavitt]

Hi All, just wanted to do a little shout to say that I've just published a much-requested node for Dashboard 2.0 - ui-iframe: node-red-dashboard-2-ui-iframe (node) - Node-RED as a third-party widget.

It's available now, and can embed into any group within your Dashboard 2.0 applications.

Just to answer the inevitable question - "can I make the iframe full screen" - not yet. It'll come, and may well come with some underlying structural changes to how we do sizing generally in Dashboard 2.0.

I've also added a section to our docs to list known third-party widgets available for Dashboard 2.0 too, you can see that here.

[dceejay]

Fantastic work. Great step forward.

[RedTom]

Hi,

can you please give me an example flow with http page,
i tried the widget but I cannot see anything on the page ?

thanks

[joepavitt]

Its likely you'll need to restart Node-RED after installing the iframe node.

I need to work on a bettwr eay of loading it so that this step isnt requieed

[RedTom]

Thanks,

thas was it.

[RedTom]

Hi,

I have three iframes on a page,

sometimes when I navigate to this page, I see three times the last iframe,
when i refresh the page with F5, it shows the three different iframes ?

after refresh

[
    {
        "id": "1e3f7eaa6d9ba3d5",
        "type": "ui-iframe",
        "z": "bc177cd36da9ce47",
        "g": "a6edcd62a7ed016d",
        "name": "temperature",
        "group": "929305cee870702d",
        "order": 1,
        "src": "http://dummy",
        "width": 6,
        "height": "5",
        "x": 950,
        "y": 6120,
        "wires": []
    },
    {
        "id": "929305cee870702d",
        "type": "ui-group",
        "name": "My Group",
        "page": "9c87487d35af84fe",
        "width": "6",
        "height": "1",
        "order": -1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "9c87487d35af84fe",
        "type": "ui-page",
        "name": "grafana",
        "ui": "91ac914334bc2f74",
        "path": "/grafana",
        "icon": "home",
        "layout": "grid",
        "theme": "713e504734925435",
        "order": 12,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "91ac914334bc2f74",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "713e504734925435",
        "type": "ui-theme",
        "name": "HN Theme",
        "colors": {
            "surface": "#5c5c5c",
            "primary": "#0094ce",
            "bgPage": "#383838",
            "groupBg": "#4f4f4f",
            "groupOutline": "#858585"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

[joepavitt]

Have you set the src as part of the node config for these, or is it dynamically set at runtime?

Definitely an odd one

[RedTom]

dynamically,

adapted from an dashboard 1 example,
panelid's are 1,2,3

let panelid = 1

var newMsg={"src":null}

newMsg.src = "http://192.168.70.190:3000/d-solo/bdmo7ceu462v4c/mydashboard?orgId"
    +
    "&refresh=1m" +
    "&theme=dark" +
    "&from=" + msg.payload.fromdate +
    "&to=" + msg.payload.enddate +
    "&panelId=" + panelid

return newMsg;

[joepavitt]

Have tried to replicate with:

[
    {
        "id": "1c29cfb4332ab651",
        "type": "inject",
        "z": "39687e2457e622f1",
        "name": "editor",
        "props": [
            {
                "p": "src",
                "v": "/",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 410,
        "y": 120,
        "wires": [
            [
                "c0489bef35748b70"
            ]
        ]
    },
    {
        "id": "f852e128e6bcc295",
        "type": "inject",
        "z": "39687e2457e622f1",
        "name": "nodered.org",
        "props": [
            {
                "p": "src",
                "v": "https://nodered.org",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 430,
        "y": 160,
        "wires": [
            [
                "40e07503ceef3498"
            ]
        ]
    },
    {
        "id": "40e07503ceef3498",
        "type": "ui-iframe",
        "z": "39687e2457e622f1",
        "name": "",
        "group": "bb21a845cf454195",
        "order": 0,
        "src": "http://dummy",
        "width": 6,
        "height": 8,
        "x": 570,
        "y": 160,
        "wires": []
    },
    {
        "id": "c0489bef35748b70",
        "type": "ui-iframe",
        "z": "39687e2457e622f1",
        "name": "",
        "group": "bb21a845cf454195",
        "order": 0,
        "src": "http://dummy",
        "width": 6,
        "height": 8,
        "x": 570,
        "y": 120,
        "wires": []
    },
    {
        "id": "bb21a845cf454195",
        "type": "ui-group",
        "name": "iframe",
        "page": "85043ba28e0273fe",
        "width": "10",
        "height": "8",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "85043ba28e0273fe",
        "type": "ui-page",
        "name": "Third Party Widgets",
        "ui": "c2e1aa56f50f03bd",
        "path": "/third-party",
        "icon": "account-group",
        "layout": "grid",
        "theme": "129e99574def90a3",
        "order": 2,
        "className": "",
        "visible": true,
        "disabled": "false"
    },
    {
        "id": "c2e1aa56f50f03bd",
        "type": "ui-base",
        "name": "Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-control",
            "ui-notification",
            "ui-text",
            "ui-template"
        ],
        "showPathInSidebar": true,
        "navigationStyle": "temporary",
        "titleBarStyle": "fixed"
    },
    {
        "id": "129e99574def90a3",
        "type": "ui-theme",
        "name": "Another Theme",
        "colors": {
            "surface": "#000000",
            "primary": "#ff4000",
            "bgPage": "#f0f0f0",
            "groupBg": "#ffffff",
            "groupOutline": "#d9d9d9"
        },
        "sizes": {
            "pagePadding": "24px",
            "groupGap": "12px",
            "groupBorderRadius": "9px",
            "widgetGap": "6px"
        }
    }
]

but am not able to. The only thing I can think of that's occurring is you've got injections going into the wrong iframe, or the wrong values going into the wrong iframe nodes?

[RedTom]

Hi,

it happens on PC with firefox (I did not see it on Android tablets) and only the first time I go to grafana page.

1. I connect to the dashboard
2. it' on the start page, then I navigate to my grafana page.
3. I sometimes get a wrong page, I cannot see the grafana loading symbol inside the iframes,
4. I go back to start page and back to grafana page, then I see grafana loading symbols and page is ok.

today I got the following

I opened the inspect console in firefox (sorry no experience yet) and saved th following messages

setup 
Object { RED: {…}, socketio: {…}, basePath: "/dashboard" }
index-DEHum2uc.js:52:34800
SIO connected index-DEHum2uc.js:244:408793
ui-config received. topic: 91ac914334bc2f74 payload: 
Object { dashboards: {…}, heads: {}, pages: {…}, themes: {…}, groups: {…}, widgets: {…} }
index-DEHum2uc.js:236:12226
Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. 3 mydashboard
WEBGL_debug_renderer_info is deprecated in Firefox and will be removed. Please use RENDERER. 3 fp.esm.js:2388:27
[Deprecation warning] DataSource influxdb: templateSrv.getAdhocFilters is deprecated. Use filters property on the request (DataQueryRequest). Or if this is called from interpolateVariablesInQueries or applyTemplateVariables it is passed as a new argument instead 3 deprecationWarning.ts:14:12

I also tried to get some information of the iframes.
I made two pictures of the content, one of wrong page and another of good page, but I cannot see any difference ?

wrong page

page ok

It's not so important, because until now it does not happen on the Android tablets.
Please tell me if I can test anything else.