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?