External JavaScripted site in certain group of Dashboard

Dashboard
1

Hi guys,

Again the question about representation of external web-site in Node-RED Dashboard. Different flavour.

https://www.google.com/maps/dir/Perth,+UK/Glasgow,+UK/?hl=en
Normally, this link shows 2-3 proposed routes and time estimation. Plus a map, which isn't needed for often commuter. Routes and time estimation is crucial.

How to show a part or full page in a certain group in the Dashboard?

What I tried so far and failed:

  1. Use "Link" tab.
  2. Use UI template node and refer to the link as iframe.
  3. Use nbrowser node - nothing comes out of it.
  4. Wrote python script for parsing and using curl with the link.
  5. Searched this forum, found couple "sounds like the subject" threads, and nothing.

In all cases (except 5th) the problem was:
The link to maps just loads JS which does the job. When the JS isn't loaded in browser with regular UI the JS doesn't run -> so no results.

Ideas welcome.
Thank you.

2

Google maps does not allow embedding, unless you have an API key. Else you will find a same origin error in the console of your browser.

3

Hi,
not quite sure which part you are trying to embed - but if you go to the menu top left - image
there is an optionimage
which then gives you an iframe link you can probably put into a ui_template node if you like

1 Like
4

djeez have been looking for that option for ages, always arrived at the "get an API key".
It does require you to be logged in with your own google account.

5

Thank you @dceejay. This works as content of ui_template:

<iframe src="https://www.google.com/maps/embed?pb=your_content_here"  width="400" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>

I thought that periodic input to the ui_template will reload the template content. This doesn't happen. Entire tab needs to be reloaded to refresh iframe content.
Stackoverfow recommended this method to refresh iframe content (I added to original iframe variable name="taffic"):

 window.setInterval("reloadIFrame();", 30000);

 function reloadIFrame() {
  document.frames["traffic"].location.reload();
 }
 </script>

I added this part (including iframe name) before the iframe tag in the ui_template. Refresh doesn't happen.

How do i use the script inside ui_template? Or how to refresh iframe content periodically?

Thank you.