Refreshing gif image

Grafana
1

Hi, im pulling this image from here: https://api.sat24.com/animated/EU/visual/2/GTB%20Standard%20Time/ and im using html plugin, its work but wont refresh image one is loaded, i need to refresh hole grafana page and then will update the image.
Little help how i can make it to work without refreshing hole grafana page?

2

You can write some JavaScript to refresh the image periodically. It’s not related to Grafana really. See e.g. javascript - Refresh image with a new one at the same url - Stack Overflow

3

Hi Svet. I am a total klutz when it comes to HTML or Javascript. Most discussions of this ‘refresh image with a new one’ topic are ~10 years old, so obviously this is a well studied problem. I have tried as many ways as I can to get my image to refresh WITHOUT clicking the refresh button on the browser, but none have worked, so maybe you could help a brother out (even though this is the Grafana forum)…

My URL loads perfectly via the Text panel in Grafana when I have just

<img src="http://192.168.10.140/Streaming/channels/101/picture"/>

but like the original poster here, my image (which is a still image from a video camera) does not refresh. Here is what I added:
image

<img src="http://192.168.10.140/Streaming/channels/101/picture"/>

<SCRIPT language="JavaScript" type="text/javascript">

var t = 20 // Interval in Seconds

image = "http://192.168.10.140/Streaming/channels/101/picture" //URL of the Image

function Start() {

tmp = new Date();

tmp = "?"+tmp.getTime()

document.images["refresh"].src = image+tmp

setTimeout("Start()", t*1000)

}

Start();

</SCRIPT>

and here is what I see:

image
image811×567 30.3 KB

1 Like
4

Hm I think you have at least two issues:

5

Thank you. Re: the second point, I will try something like this:

<!DOCTYPE html>
<html>

<head>
	<title>Refresh Image</title>
</head>

<body>
	<!-- Display the image -->
	<img id="gfgimage" src="bg.png"
		height="500" width="700" />

	<script>
		// Create a timestamp
		var timestamp = new Date().getTime();

		// Get the image element
		var image = document.getElementById("gfgimage");

		// Adding the timestamp parameter to image src
		image.src = "bg.png?t=" + timestamp;
		console.log(image.src);
	</script>
</body>

</html>
6

Back again…Disabling the HTML sanitize made it better in that I no longer see the script text on the screen. But even after trying various coding ways to get the image URL to refresh (incl. using an ID), I still cannot get it to automatically refresh.

7

I am wondering if this whole disabling HTML sanitize got inadvertently broken in v8.1. I have read several past instances of scripts not working (even after setting the HTML sanitize option to TRUE), only to be fixed in another point release by Grafana. I am fairly confident that of all the various trials I have run, at least one had correct javascript code in there to automatically refresh the image. But it does not happen. Can someone running v8.1 say for sure that they are using the Text panel, set the Disable HTML sanitize to TRUE, and they are still running javascript code in the panel? Maybe show a snippet so I can try to duplicate it on my end?

8

I haven’t tried JS in 8.1 but would be surprised if it has suddenly been disabled altogether (with the correct settings option).

Can you share your “best” attempt at the relevant JavaScript? I’m afraid the one you shared in your last post doesn’t actually do any refreshing, so I strongly suspect the issue is with the code. Checking your browser’s dev tools may offer some clues (e.g. JS errors). Have in mind that you shouldn’t include any <html>, <head>, and <body> tags - those already exist in the webpage. Only the stuff inside <body> is what you should provide.

I can try to share a working example when I’m back in front of my computer, but it’ll be a few days (am currently on holiday)

9

Thanks for helping me during your holiday! Here is one that I found online that people said worked and which I could generally understand…

<script language="javascript">

function updateImage() {

   obj = document.imagename;

   obj.src = obj.src + "?" + Math.random();

   //Following statement sets the delay before the function will

   //call itself again (in milliseconds)

   setTimeout("updateImage()",5000);

}

//-->

</script>

<body onload="updateImage()">

<img src="http://192.168.10.144/Streaming/channels/101/picture" name="imagename">

</body>
10

Here is another attempt…

image

11

Hi @grant2 I’m afraid it looks like you’re stabbing in the dark here. A couple of points regarding the last few versions you shared:

  • As I mentioned, your HTML should not include <body> tags; the Grafana web page already has a body and you can’t nest another one inside it.
  • You should give the image an id (not a name), and then use that id to refer to it in the JavaScript. The way to do that is document.getElementById(id). I don’t think that document.id does anything useful.
  • You should make sure that the function you define actually gets called.

I haven’t tested it myself, but I feel like something like the below might work:

<img src="http://192.168.10.144/Streaming/channels/101/picture" id="imageToUpdate" />
<script language="javascript">
function updateImage() {
   image = document.getElementById("imageToUpdate");
   image.src = "http://192.168.10.144/Streaming/channels/101/picture" + "?r=" + Math.random();
   setTimeout(updateImage, 5000);
}
updateImage();
</script>

Maybe give it a go and see what happens? Be sure to check your browser’s JavaScript console (inside developer tools) for any errors. Good luck!

12

Thank you Svet! It works flawlessly. I have been working on getting this to work in some form or another for months…tried every plug in and now it’s finally working! I owe you a beer or coffee!

1 Like
13

Ah, great to hear it’s working! Happy to help

14

Thank you for posting this! It doesn’t seem to work for me though as the image does not refresh. Here’s the code I am using. I have disable_sanitize_html set to true. Any ideas?

<img src="http://localhost:8000/my_picture.jpg" id="imageToUpdate" />
<script language="javascript">
function updateImage() {
   image = document.getElementById("imageToUpdate");
   image.src = "http://localhost:8000/my_picture.jpg" + "?r=" + Math.random();
   setTimeout(updateImage, 2000);
}
updateImage();
</script>
15

Hmm…not sure. Maybe check your browser’s JavaScript console/log in dev tools? You could also add a debug message (like console.log("Refreshing")) to the function, to check that it’s actually being run (again, by looking for that message in the browser log).

16

Thanks! I added the message to the code and the “Refreshing” message showed in the console and yeah! the image now refreshes. I doubt that adding a message fixed it – I also decided to stop the docker, rebuild it and restart it so that is probably what fixed it. Thank you again for the solution!

17

This topic was automatically closed after 365 days. New replies are no longer allowed.