[image-refresh] Operate on multiple images

The component is now able to run refreshes on multiple image elements independently. With the new implementation, the `id="image"` attribute can be removed from the `img` element. Whether to refresh an image or not will now be exclusively determined by the `data-refresh` attribute.
grafana-toolbox · Jun 17, 2023 · 113262d · 113262d
1 parent 026f70b
commit 113262d
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 14 deletions.
diff --git a/text-panel/image-refresh.html b/text-panel/image-refresh.html
@@ -14,38 +14,66 @@
 <head>
   <title>mois' Beecam</title>
 
+  <!--
+  Refresh image elements in HTML body, with cache busting.
+  The refresh interval unit is "seconds".
+  -->
+
   <script type="text/javascript">
+
       /**
-       * Refresh image in HTML body, with cache busting.
+       * Apply image refreshing to all `img` elements which have a `data-refresh` attribute.
        */
-      function updateImage() {
+      function registerRefreshingImages() {
+          const images = document.getElementsByTagName("img")
+          for (const image of images) {
+              if ("data-refresh" in image.attributes) {
+                  console.log(`Registering image refresh for: ${image.src}`)
+                  refreshImage(image)
+              }
+          }
+      }
 
-          // Acquire image object from DOM.
-          const image = document.getElementById("image")
+      /**
+       * Continuously refresh image element using an interval obtained
+       * from its `data-refresh` attribute. The unit is "seconds".
+       */
+      function refreshImage(image) {
 
-          // Define default settings.
+          // Get settings from DOM element.
+          const refresh_delay = Number.parseInt(image.attributes["data-refresh"].value)
+
+          // Remember original image URL.
           if (!image["data-src"]) image["data-src"] = image.src
-          const refresh_delay = Number.parseInt(image.attributes["data-refresh"].value) || 60
 
           // Compute URL, with cache busting query parameter.
           let cachebuster = (Math.random() * 10000000).toFixed()
           const image_url = image["data-src"] + "?nocache=" + cachebuster.toString()
 
           // Load image.
-          console.log(`Loading image at ${image_url}`)
+          console.log(`Refreshing image at ${image_url}`)
           image.src = image_url
 
           // Schedule next refresh cycle.
           console.log(`Scheduling refresh in ${refresh_delay} seconds`)
-          setTimeout(updateImage, refresh_delay * 1000);
+          setTimeout(refreshImage, refresh_delay * 1000, image)
       }
 
-      // Start a bit later, after the page's body has been loaded into the DOM.
-      setTimeout(updateImage, 1000);
+      /**
+       * Start a bit later, after the component's body has been loaded into the DOM.
+       *
+       * Using the `DOMContentLoaded` event does not work, because the page has
+       * been loaded already, while this component is only loaded inside a panel.
+       *
+       * TODO: Use corresponding Grafana events?
+       */
+      setTimeout(registerRefreshingImages, 1000)
+
   </script>
 
 </head>
 <body>
-  <img id="image" src="https://www.euse.de/honig/beescale/latest.jpg" data-refresh="10"/>
+  <img width="640" src="https://www.euse.de/honig/beescale/latest_b-cam1.jpg" data-refresh="10"/>
+  <img width="640" src="https://www.euse.de/honig/beescale/latest_b-cam2.jpg" data-refresh="15"/>
 </body>
 </html>
diff --git a/text-panel/readme.md b/text-panel/readme.md
@@ -10,13 +10,17 @@ Ready-to-run implementations for [Grafana Text Panel]'s HTML display mode.
 
 ### Embedding remote images, with interval-based refresh and cache busting
 
-A HTML/JavaScript component, which applies refreshing to an image in the HTML body.
+A HTML/JavaScript component, which applies refreshing to all image elements in the
+HTML body, which have a `data-refresh` attribute.
+
 It will also handle cache busting properly, by appending a `?nocache=` query parameter
 with a random value to the image source URL.
 
-The refresh rate can be determined with the `data-refresh` attribute. The unit is "seconds".
+The refresh rate is the value of the `data-refresh` attribute. The unit is "seconds".
+Individual images can have individual refresh rates.
 ```html
-<img id="image" src="https://www.euse.de/honig/beescale/latest.jpg" data-refresh="30" />
+<img width="640" src="https://www.euse.de/honig/beescale/latest_b-cam1.jpg" data-refresh="10"/>
+<img width="640" src="https://www.euse.de/honig/beescale/latest_b-cam2.jpg" data-refresh="15"/>
 ```
 
 Reference: https://community.hiveeyes.org/t/panel-fur-webcam-bild-das-regelmassig-aktualisiert-wird/4921