New third-party iframe widget & updated docs

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.

7 Likes

Fantastic work. Great step forward.

1 Like

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

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

Thanks,

thas was it. :smiley:

1 Like

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

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

Definitely an odd one :thinking:

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;

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?

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.