Show image through UI_Template node

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?

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.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.