Show image through UI_Template node

Dashboard
1

Hello. I am trying to show an image in the browser that updates frequently. In order to avoid the flicker from loading the image too much, I am using some Javascript which seems to do the trick. The thing is, if I load the HTML into a browser it works just fine, but when I try to load it through the Dashboard the image isn't loaded. Here is the HTML file:

<html>
<head>
<script type="text/JavaScript">
var url = "url"; //url to load image from
var refreshInterval = 100; //in ms
var drawDate = true; //draw date string
var img;

function init() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    img = new Image();
    img.onload = function() {
        canvas.setAttribute("width", img.width)
        canvas.setAttribute("height", img.height)
        context.drawImage(this, 0, 0);
        if(drawDate) {
            var now = new Date();
            var text = now.toLocaleDateString() + " " + now.toLocaleTimeString();
            var maxWidth = 100;
            var x = img.width-10-maxWidth;
            var y = img.height-10;
            context.strokeStyle = 'black';
            context.lineWidth = 2;
            context.strokeText(text, x, y, maxWidth);
            context.fillStyle = 'white';
            context.fillText(text, x, y, maxWidth);
        }
    };
    refresh();
}
function refresh()
{
    img.src = url + "?t=" + new Date().getTime();
    setTimeout("refresh()",refreshInterval);
}

</script>
<title>JavaScript Refresh Example</title>
</head>

<body onload="JavaScript:init();">
<canvas id="canvas"></canvas>
</body>
</html>

I just put this into a Dashboard ui_template node. Any ideas on what I am doing wrong?

2

Welcome! I suspect that the JS and other tags you have defined inside the <head> tags are being ignored. Since the NR Dashboard uses Angular v1, it places the body of your ui_template node into that section of the dashboard page -- including a bunch of html header elements would not normally be valid html structure.

However, you can place your refresh() function and external script library tags inside another ui_template, and select the 'Added to the header section' checkbox -- this causes the dashboard page to include it for all of your dashboard templates to use.