node-red-dashboard: how to embed local and remote HTML contents into a single webpage ?

[iBlio connect]

How can I embed local and remote HTML contents (like HTML pages and image) on a single node-red-dashboard webpage with other HTML nodes ?

Tried with <iframe> inside 'template' node but does not work. 

I'm using Node-RED v0.17.5 with node-red-dashboard v2.4.3.

Thanks in advance for any advice.

Valter.

[steve rickus]

Using the ui_template node (not the core template node), I have successfully included content from other web sites into my dashboard, using both <img> and <iframe> elements. Any regular html/js/css can be embedded into your dashboard this way -- so what part of your flow "does not work"? Have you used the browser's dev console (F12) to see if you are getting the content correctly from the remote sites? Any javascript errors in the browser console?

[iBlio connect]

Attached here the JSON flow I used for tests.

It's based on Julian Knight "How to access the msg object in a Template script" at https://flows.nodered.org/flow/2f1aaf0635f9bf23207152682323240a.

The issues that I have are :

1. the <hr> tag it's rendered as a centerd single point
   
2. the <iframe> does not work

I'm using Node-RED v0.17.5 with node-red-dashboard v2.4.3.

Thanks in advance for any further advice.

Valter.

[steve rickus]

Ok, using the dev console, I can see what is happening in both cases:

1. the <hr> tag is inheriting the -webkit-margin-start (and -end) values of "auto", which makes them as large as possible. To override that, you can either give the <hr> a width: 100%, or turn off those webkit margins.

2. in the ui_template node, you cannot use mustache substitutions inside html attributes, so the iframe src url is not valid. You can fix that by using a regular template node to create the ui_template html source, and passing it to a ui_template node with just the default content:

<div ng-bind-html="msg.payload"></div>

[steve rickus]

I forgot to mention that the angular ng-bind-html does not allow ALL html/js content, so you will have to use the "trusted" filter as well...

This is what I'm doing to make it work on my system... inject the url into the following template node:

<iframe src="{{{payload}}}">
    content will be rendered here...
</iframe>

Confusingly, the template syntax does not begin with "msg." -- also, the triple-braces are required to stop the mustache substitution from url encoding the string. This output is passed to this ui_template code:

<div ng-bind-html="msg.payload | trusted"></div>

<script>
    (function(scope) {
        console.log('Position 1');
        console.dir(scope);
        console.log(scope.msg);
        scope.$watch('msg.payload', function(data) {
            console.log('Position 2');
            console.dir(data);
        });
    })(scope);
</script>

[Jan Van den Audenaerde]

Hi Valter,

You can do that using iframes as explained in following post : 

https://groups.google.com/forum/#!searchin/node-red/iframe%7Csort:relevance/node-red/Qk290lm-Ito/Hf0dgW_1BwAJ

kr

Jan

[iBlio connect]

Hi Jan, 

using the discussion in the post you indicated to me I finally successfully verified the solution in my real application. 

Thank you very much.

Valter