Hello,
I wonder if anybody can help me?
I would like to embed a webpage on the dashboard. I have tried iframe and embed and have failed to achieve an outcome. I have looked at various previous posts to no avail.
Thanks in advance
Glenn
Hi @GChapo
Embedding an iframe inside a uitemplate node is the way to do it.
It may help if you share what you've tried in that direction and describe how it didn't work for you.
1 Like
Hi Nick,
I have followed previous posts like https://groups.google.com/forum/#!searchin/node-red/how$20to$20embed$20local$20and$20remote$20html|sort:date/node-red/o0LN30Og6Ag/a7K8VI3gAAAJ and have tried simple ifame wrapped webpage to no avail. I am simply trying to have a dashboard display of a locally hosted webpage fed back to the dashboard so I can see that the message i send from the dashboard to the localhosted webpage through websockets has appeared. I have tried this with both localhosted attributes and port forwarded ddns attributes and indeed an external website such as bbc.co.uk, but all I have ever received is a blank box.
Thanks
Glenn
Without specific details of what you've tried we can't say why it hasn't worked. I suggest you share your uitemplate node with us that tries to iframe in the BBC website so we can see where you're going wrong.
It's very simple
[{"id":"be3c7f1d.b4124","type":"ui_template","z":"ef772b5d.4dce88","group":"5d1ea164.97ce","name":"","order":13,"width":"6","height":"6","format":"<iframe src="https://www.bbc.co.uk">\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":100,"y":900,"wires":[[]]},{"id":"5d1ea164.97ce","type":"ui_group","z":"","name":"Tests","tab":"26dcbff.4d90d4","order":2,"disp":false,"width":"12","collapse":false},{"id":"26dcbff.4d90d4","type":"ui_tab","z":"","name":"Tests","icon":"dashboard"}]
the worldmap node has an example of this in its examples... the simple trick is to use a "normal" template node to create the html to feed a ui-template node on the dashboard - BUT you need to add the angular filter | trusted so that it doesn't strip out any extra tags that it would otherwise try to remove.
[{"id":"1271593d.5d1a27","type":"inject","z":"dfe4ec36.0a5a5","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":310,"y":1200,"wires":[["33bad88.3a3b028"]]},{"id":"5778320b.bba91c","type":"ui_template","z":"dfe4ec36.0a5a5","group":"53e6c4b8.1b0f7c","name":"","order":0,"width":"6","height":"6","format":"<div ng-bind-html=\"msg.payload | trusted\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":680,"y":1200,"wires":[[]]},{"id":"33bad88.3a3b028","type":"template","z":"dfe4ec36.0a5a5","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<iframe src=\"/worldmap\" height=300px ></iframe>","x":510,"y":1200,"wires":[["5778320b.bba91c"]]},{"id":"53e6c4b8.1b0f7c","type":"ui_group","z":"dfe4ec36.0a5a5","name":"Default","tab":"d78b32f4.2797f","disp":true,"width":"6"},{"id":"d78b32f4.2797f","type":"ui_tab","z":"dfe4ec36.0a5a5","name":"Home","icon":"dashboard"}]
Thank you,
I'm getting some way there with your flow, but because the local hosted website is fed by websockets, it just flashes up "unknown". This happens when it first loads on the webpage, when it reboots or redeploys and then goes blank. Once a message from a text input is sent it populates the webpage.
However, the output to the dashboard just flashes unknow and is never populated by a message?
Hope that makes sense?
Dear dceejay,
With your flow if I put https://www.bbc.co.uk in place of /worldmap I still fail to get the bbc website embedded?
[{"id":"d36f7b98.984b88","type":"inject","z":"ef772b5d.4dce88","name":"","topic":"","payload":"","payloadType":"str","repeat":"","crontab":"","once":true,"onceDelay":"","x":810,"y":160,"wires":[["b5317a16.c85048"]]},{"id":"8deb5cbb.3e029","type":"ui_template","z":"ef772b5d.4dce88","group":"5d1ea164.97ce","name":"","order":0,"width":"6","height":"6","format":"<div ng-bind-html="msg.payload | trusted">","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1080,"y":160,"wires":[[]]},{"id":"b5317a16.c85048","type":"template","z":"ef772b5d.4dce88","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<iframe src="https://www.bbc.co.uk" height=300px >","x":940,"y":160,"wires":[["8deb5cbb.3e029"]]},{"id":"5d1ea164.97ce","type":"ui_group","z":"","name":"Tests","tab":"26dcbff.4d90d4","order":2,"disp":false,"width":"12","collapse":false},{"id":"26dcbff.4d90d4","type":"ui_tab","z":"","name":"Tests","icon":"dashboard"}]
Glenn
Glenn,
When you paste in flow JSON, you must put three backticks (```) on a new line before and after it. This ensures its proper formatting is preserved. Without it, we cannot cleanly import your flow.
I did a quick test myself. With local web sites, it worked for me but not for https. Could that be the problem?
This simple example embedding the Node-RED editor itself into the dashboard
1 Like
Sorry, I did wonder how to send.
Can you send me your flow krambriw so I can hopefully understand why I can't get a local or any website embedded?
Thanks
Glenn
Make sure you check for errors in your browser when you are doing things like this. It is perfectly possible that you've triggered a security block.
If you are not sure how. Hit F12 and look at the console in the resulting developer tools window.
Here is the flow, it is just a very simple dashboard ui_template node
You have to edit the url in the code to match yours
[{"id":"afc87756.fa10b8","type":"ui_template","z":"bccd3f77.b2e57","group":"d08e9520.258a68","name":"www","order":0,"width":0,"height":0,"format":"<iframe style=\"width:558px; height:400px;\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"http://192.168.10.241:1880\"></iframe>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":310,"y":1100,"wires":[[]]},{"id":"d08e9520.258a68","type":"ui_group","z":"","name":"www","tab":"c36f57c4.301058","disp":false,"width":"35"},{"id":"c36f57c4.301058","type":"ui_tab","z":"","name":"Button Panel","icon":"dashboard"}]
1 Like
Indeed - quite a few sites (not unnaturally) don't allow themselves to iframed into someone else's page.
1 Like
Thanks for your flow.
I have finally discovered why I was and I am still unable to view embedded websites. I followed your example and tried to link to the NODE-RED editor, but to no avail. However, when I viewed it from my PC and not my phone I was able to see the editor at last. It would appear that the phone browser doesn't support this process. I shall review separate methods and try to pick up and put back together my sanity.
Glenn
I do not know with your phone but mine (Iphone) is working fine for this as well but you have to be connected to the same network as your NR, either via wifi or 3/4G (where I am using a VPN)
1 Like
Have you checked that if you enter the url that you are trying to embed into the phone browser that it works?
Hi Colin,
I have and it does.
Upon further investigation I have narrowed it down to a reverse tunnelling & web socket issue. If I connect on the same network or with 4G via ddns to the Node-RED editor it works. If I reverse tunnel it doesn't. If I try to connect to a website incorporating web sockets it never works.
Glenn
dceejay - you mean that there may be actuaaly now way of incorporating some websites - I am trying to incorporate the waze livemap into my dashboard. So far i have only been sucessful in getting a youtube video in the dashboard - anyother https webpage would fail.
@Bobet21 you can use the standard <iframe> HTML element in a ui_template node to try to embed any webpage in your dashboard. The point DCJ is making is that not all pages allow themselves to be viewed in an iframe. Also you may have issues adding HTTPS content into a dashboard served over HTTP - and vice versa. You should check your browser javascript console for any error messages to see if content is being blocked by the browser for some reason.
1 Like
