Reload UI Template Image

3,090 views
Skip to first unread message

Kay Pohl

unread,
May 13, 2017, 11:38:37 AM5/13/17
to Node-RED
Hello all. I try to show a cover.jpg from my music server on an UI Template:

<!DOCTYPE html>

It works 1 time. So i´d like to refresh the UI Template to get every 5 second a reload from my cover. How can i do this ?

Kind Regards
Kay

steve rickus

unread,
May 13, 2017, 12:29:23 PM5/13/17
to Node-RED
Replace the hardcoded src string with a mustache reference (using triple braces to stop html encoding from changing your string):

<!DOCTYPE html>
<img src="{{{payload.cover_url}}}" height="42" width="42" />

Then every time your flow sends a new msg.payload it will update the img element.

Kay Pohl

unread,
May 13, 2017, 2:18:10 PM5/13/17
to Node-RED
Hello Steve. Thanks for your answer. But it doesn´t work for me.

What i´ve done:
- Inject with String. String contains URL
- UI Template with your code -> i changed the {{{payload.cover_url}}} to {{{msg.payload}}}
- On UI Template Output i set a debug node

Every Time the Inject injects i see the correct URL on the debug node. But not image appears on Dashboard UI.

Anything i am doing wrong ?

Kay

steve rickus

unread,
May 13, 2017, 6:06:40 PM5/13/17
to Node-RED
i believe that in the ui_template (and most other places) mustache references do not use the prefix "msg." since that is the context for the whole template.
Try using just src="{{{payload}}}"

Kay Pohl

unread,
May 13, 2017, 7:22:43 PM5/13/17
to Node-RED
I have :-( It doesn´t work. I just found this:

Normally, getting Angular to output HTML is simply a case of wrapping in triple brackets {{{msg.payload}}} but this doesn't seem to work with Dashboard.

Instead, use the alternative syntax:

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

But i don´t know how to add this in my ui template.

Kay

Julian Knight

unread,
May 14, 2017, 9:33:31 AM5/14/17
to Node-RED
Add a Dashboard template and put something like this:

<div ng-bind-html="msg.payload"></div>
<script>
//console.dir(scope) // this also works
//console.dir(scope.msg) // This doesn't because scope.msg doesn't yet exist
// Lambda function to access the Angular Scope
;(function(scope) {
    //console.log('--- SCOPE ---')
    //console.dir(scope) // this works but you only get it once (on startup)
    //console.dir(scope.msg) // Doesn't work for  because scope.msg doesn't yet exist
    //Have to use $watch so we pick up new, incoming msg's
    scope.$watch('msg.payload', function(newVal, oldVal) {
        console.log('- Scope.msg -')
        console.dir(scope.msg)
    })
})(scope)
</script>


You don't really need the script stuff for your question but you might find it useful later on.

Kay Pohl

unread,
May 14, 2017, 1:49:47 PM5/14/17
to Node-RED
I´ve done now the follwoing:

<div ng-bind-html="msg.payload"></div>
<img src={{{msg.payload}}} height="42" width="42" />

But it doesn´t work. With ng-bind-html i "transfer" the msg.payload into the ui-template correct ?

Kay

Julian Knight

unread,
May 14, 2017, 5:20:53 PM5/14/17
to Node-RED
You don't want that in the src entry. You would want a specific element of msg that would contain a URL.

The div should be fine as long as msg.payload contains valid html.

Nick O'Leary

unread,
May 14, 2017, 5:26:47 PM5/14/17
to Node-RED Mailing List
Kay,

in your original post, you said the url of the image never changes - it's always cover.jpg. And that you want the browser to reload the image at regular intervals.

If you set the src attribute of an image to the url it is already set to, most browsers will ignore it as the url hasn't been changed.

What I suggest is adding a query parameter with a random number or timestamp on - so that the url appears different to the browser and you'll trigger a reload.

A simple Function node such as the following would do it:


    msg.payload += "&ts="+Date.now();
    return msg;

You can then get your ui_template right, knowing that the browser will actually try to reload the image once you get the template syntax right.

Nick



--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
To view this discussion on the web, visit https://groups.google.com/d/msgid/node-red/68b45f6f-6f4c-4c1a-9058-21737d89204f%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

Kay Pohl

unread,
May 14, 2017, 6:54:29 PM5/14/17
to Node-RED
Hi Nick,

thanks also for your help. I´ve created the function you proposed. 

image once you get the template syntax right.

That´s the problem at all i think. I tried this:

 
<!DOCTYPE html>
<img src="{{{msg.payload}}}" height="42" width="42" />

But no image appears :-(

Kay
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.

To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.

Dave C-J

unread,
May 14, 2017, 6:59:53 PM5/14/17
to node...@googlegroups.com

Kay Pohl

unread,
May 15, 2017, 12:08:47 PM5/15/17
to Node-RED
That was the trick :-) Thanks to all for the help.

Kay
Reply all
Reply to author
Forward
0 new messages