[Announce] New node-red-node-ui-iframe node

Dashboard
1

Just in case anyone missed it we have added a dashboard iframe widget to the flows site.

The ui-iframe node is a UI widget that can be used to embed an external Web page in a Node-RED dashboard.

The URL of a web page to embed can be specified in the settings menu or by the url property of an input message.

The payload property of the input message specifies data to send to the embedded page using the Web messaging API (postMessage). This allows commands to be sent to the embedded page. This capability may not be all browsers. If data from the embedded web page is received via the Web messaging API, it is output as the payload value the of the outgoing message.

Several examples are included to import. Hopefully this will be useful. As usual comments welcome.

13 Likes
2

Name your favorite sweets and where to send :slight_smile:

2 Likes
3

If I use this to show a Grafana chart for example, will the iframe contents be downloaded on opening the dashboard in the browser if the frame is not on the open tab, or will it wait until the tab is opened to download the page?

4

As it's a single page application I think it downloads everything on load - but the contents would then be updated via websocket or whatever. But you can try it and let us know :slight_smile:

5

I was going to say it might be difficult to know, but I suppose I can look in the browser developer console to see when they load.
I am asking as I don't want to slow the initial load of the dashboard, particularly on a mobile device where it takes a little while already.
I will respond when I have tried it.

6

In fact it does not load the contents of the frame till the tab is opened in the dashboard. This is easily shown by using for the url http://localhost:1880 which rather incestuously loads the editor in the frame. It can be seen when the tab is opened that it opens the editor (the Loading Nodes progress bar appears), and in fact it is destroyed when the switching to another tab, as it re-loads the editor when going back to the tab, at least that is my interpretation of what I am seeing.
Grafana doesn't work in the frame but I seem to remember seeing that something in Grafana has to be configured to allow that so I need to google a bit.

[Edit] for the record, to allow Grafana in an iframe you have to set, in grafana.ini, cookie_samesite = none and allow_embedding = true, both in the [security] section.

1 Like
7

That's what I'm seeing.

graf2

8

My interest is what happens if the chart isn't on the initial tab in the dashboard. Looking in the developer console it doesn't appear to load anything grafana related until I go to the dashboard tab with the chart on it. For me that is good as it shouldn't slow down initial load of the front page.

9

Would it be possible to add a setting to fix size of the iframe (width/height) in pixel?

I added grafana iframes via ui-template node so far. F.e.

<iframe src="https://some.domain/grafana/d-solo/8KrbiFJMk/random?orgId=1&refresh=5s&panelId=3" width="349" height="200" frameborder="0"></iframe>

With this I nail the width of the chart to what is max feasible on most mobile devices. And while I tap on it to scroll a whole dashboard page, the chart stays fix and I can easily slide the whole page.

Whith iframe-node, however, I would waste a bit of space left/right of the raster. And, more importantly, when I tap on it to scroll a dashboard page up/down, I move the graph inside the iframe and not the entire page up/down.

10

Not sure what you mean. The frame is scaled to maximise the space available within the declared size of the widget. Otherwise yes you can just use a ui-template ?

11

Thanks for your prompt reply @dceejay.

The main advantage of the iframe node: it fits better into my Dashboard's optics. More "integrated".

The "disadvantage" is, that the size of the content rarely fits 100% to the dashboard's raster. Even if it looks almost perfect, once you tap it on a mobile (in particular), it is no longer that easy to scroll the whole page. Scrolling the content inside the iframe, even if it's only 1 or 2 pixel up/down, "wins". On a mobile, this can lead to a situation, that you cannot scroll the page as a whole anymore, only the content in the iframe.

Note: this applies if the content fits to the mobile screen without necessity to scroll, as would be required for full blown external websites. It wouldn't make sense to embed latter for this use case anyway. However, its a nice option to integrate small grafana charts f.e..

To be absolutely honest :slight_smile: - This is not at all a critical thing. Just FYI. I can easily leave it to my current solution with ui-template.

12

So maybe disabling/not allowing scroll would be better ?

13

Oh yes, that should have the same effect. I think :slight_smile:

Even if the group's height offers plenty of space for the chart. If you tap it, it will always wiggle a bit up and down. Width is different. The chart scales automatically and no wiggle left or right.

14

Hmm sounds like something not quite lining up. Maybe there is something else. Do you have an example of something I can iframe to test ? (Eg something on web) as I don’t have grafana

15

I was already thinking about it, however, my whole setup is not exposed to the internet. And I cannot find a live dashboard to share from :frowning:

16

yes - I wasn't expecting you to :-)... such wondering if there were any public grafana instances or example - or indeed any other web page that shows the same behaviorr.

1 Like
17

This is an example that at least shows, what I was talking about :slight_smile:

[{"id":"a709c558.00bc38","type":"ui_template","z":"17fdb8cc.477b0f","group":"aaf91b7e.c5ca7","name":"","order":13,"width":"6","height":"6","format":"<div style=\"display: flex; justify-content: center;\"><iframe src=\"https://avatars.plurk.com/9854110-big2.jpg\" width=\"320\" height=\"250\" frameborder=\"0\"></iframe></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":390,"y":160,"wires":[[]]},{"id":"54a1c1ce.75a4a8","type":"ui_iframe","z":"17fdb8cc.477b0f","group":"d7c16b88.658fa8","name":"","order":14,"width":"6","height":"6","url":"https://avatars.plurk.com/9854110-big2.jpg","origin":"","x":390,"y":200,"wires":[[]]},{"id":"aaf91b7e.c5ca7","type":"ui_group","name":"template","tab":"579134ab.a3cad4","order":1,"disp":true,"width":"6","collapse":false},{"id":"d7c16b88.658fa8","type":"ui_group","name":"iframe","tab":"579134ab.a3cad4","order":2,"disp":true,"width":"6","collapse":false},{"id":"579134ab.a3cad4","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
18

well for me they behave the same - no slight scroll at all.
What browser / device are you viewing on ? What other dashboard config details have you set ?

image
image1370Ă—810 97.2 KB

19

Mh. Dashboard settings are standard. Nothing changed.

I have tested it with windows / macos / linux and ios:

Safari and Firefox do show the behavior I have written about. Opera and Edge and Chrome, however, are all equally non-wiggly :smiley:

Bildschirmfoto 2020-12-19 um 09.31.47
Bildschirmfoto 2020-12-19 um 09.31.471370Ă—1478 178 KB

20

Pushed version 0.1.2 with a fix that works for me... :slight_smile:
(at least with that test case...)

1 Like