Panel für Webcam-Bild, das regelmäßig aktualisiert wird

ich versuche gerade mit mäßigem erfolg, ein auf meinem webserver regelmäßig erneuertes bild der bienenstöcke in einem grafana-panel darzustellen (hier, ganz runterscrollen).

ich schaffe:
dass das bild dargestellt wird und in grafana aktualisiert wird, wenn ich den ganzen dashboard reloade. auch wird das aktuelle bild angezeigt, wenn ich mit rechtslick “bild in anderem tab öffnen” mache.

schön wäre:

  • wenn das bild sich im panel automatisch aktualisiert,
  • ich den aktualisierungsintervall festlegen könnte, je nachdem wie häufig die aktualisierung auf dem server stattfindet.

probiert habe ich:
das pictureit-panel. allderdings stürzt es regelmäßig ab, bevor ich irgendetwas speichern kann: “An unexpected error happened. Details: Type Error, str is undefined”.
außerdem greift das panel konsequent auf die gecachte uraltversion des bildes zurück.

das internet empfiehlt:
eine html-seite in einem grafana-html-panel aufrufen. in der html-seite das bild darstellen und die aktualisierung umsetzen, z.b. so:

<!DOCTYPE html>
<html>
<head>
	<title>Live-B-Cam (almost)</title>
	<meta http-equiv="refresh" content="600">
</head>
<body>
	<img src="latest.jpg?nocache=" + new Date().getTime() />
</body>
</html>

leider ist das html-panel nicht im angebot hier im schwarm. sicherheitsgründe? kann ich ja immer nicht so gut einschätzen. würde mir aber intuitiv einleuchten, bei einem html-panel, das dann auch noch js zulässt…

sieht wer noch andere möglichkeiten für mein einbettungsproblem?

1 Like

Hallo Mois,

das HTML plugin for Grafana | Grafana Labs bzw. GitHub - aidanmountford/aidanmountford-html-panel: Grafana panel for rendering data aware HTML braucht man wohl nicht mehr, das hat Grafana schon als “Text” Panel eingebaut, das auch HTML beherrscht.

Dein angestrebtes <meta http-equiv="refresh" content="600"> ist problematisch, weil es die komplette Seite neu lädt, auch, wenn Du gerade im Editor Modus bist [1]. Es ist besser, nur selektiv das Bild neu zu laden, per JavaScript, wie bei Refreshing gif image - #11 by svetb - Grafana - Grafana Labs Community Forums gezeigt.

Drüben im Dashboard Labor » HTML embedding findest Du nun die HTML Vorlage für Deinen Anwendungsfall. Hier als Embed und bei [2] als HTML/JavaScript Code abgebildet.

Mit dem data-refresh Attribut lässt sich die Refresh-Rate bestimmen. Die Einheit ist “Sekunden”.

<img id="image" src="https://www.euse.de/honig/beescale/latest.jpg" data-refresh="30" />

Du könntest die Implementierung vielleicht noch in Browsern verschiedener Hersteller testen? Ich habe es bislang nur im Firefox entwickelt und getestet.

Viele Grüße,
Andreas.

P.S.: Wenn es nur um Bilder geht, könnte zukünftig vielleicht Dynamic image panel plugin for Grafana | Grafana Labs noch höheren Komfort bieten. Das gibts aber erst ab Grafana 8.5.0.


  1. Soweit nicht so problematisch, wenn nur alle 10 Minuten aktualisiert wird. Bei höheren Refresh-Raten, zum Experimentieren, wirkt es sich aber negativ aus, und ist im Entwicklungsbetrieb hinderlich. ↩︎

  2. Bild aus anderer Quelle im Grafana anzeigen, mit Cache Busting.

    <!DOCTYPE html>
    <!--
    https://community.hiveeyes.org/t/panel-fur-webcam-bild-das-regelmassig-aktualisiert-wird/4921
    https://community.grafana.com/t/refreshing-gif-image/49507/11
    -->
    <html>
    <head>
    	<title>mois' Beecam</title>
    
        <script type="text/javascript">
            /**
             * Refresh image in HTML body, with cache busting.
             */
            function updateImage() {
    
                // Acquire image object from DOM.
                const image = document.getElementById("image")
    
                // Define default settings.
                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}`)
                image.src = image_url
    
                // Schedule next refresh cycle.
                console.log(`Scheduling refresh in ${refresh_delay} seconds`)
                setTimeout(updateImage, refresh_delay * 1000);
            }
    
            // Start a bit later, after the page's body has been loaded into the DOM.
            setTimeout(updateImage, 1000);
        </script>
    
    </head>
    <body>
    	<img id="image" src="https://www.euse.de/honig/beescale/latest.jpg" data-refresh="10" />
    </body>
    </html>
    
    ↩︎
3 Likes

cool! habs gleich auf meinem hauptdashboard eingebaut.

Netsurf 3.6 (2016) laut wikipedia mit eigener Rendering Engine (über die Quellen: “bespoke”) schmiert schon bei swarm.hiveeyes.org ab:

mois@weidenteich:~$ netsurf swarm.hiveeyes.org
netsurf: content/fetchers/curl.c:683: fetch_curl_initiate_fetch: Zusicherung »codem == CURLM_OK || codem == CURLM_CALL_MULTI_PERFORM« nicht erfüllt.
Abgebrochen

andere tests laufen. ab montag dann auch auf windows und den dortigen browsern.

OK scheinen:

  • Chromium Version 113.0.5672.63 (Offizieller Build) snap (Linux, 64-Bit)
  • WebKitGTK 2.38.6 (Web 3.36.4, Linux Mint 20.3)
1 Like

Das allerdings ist ein Problem von netsurf selbst, und es ist ab Version 3.9 gefixt. Aber netsurf 3.10 zeigt die Seite ebenfalls nicht an, explodiert aber immerhin nicht! ,)

I think it may not be ready yet, but maybe soon: What about trying Ladybird next time?

Overview

Details

Ladybird: A truly new Web Browser (with a from-scratch engine) comes to Linux
2022: The Year of the Haiku and Serenity Operating Systems
SerenityOS Web Browser passes Acid3 Test - by Bryan Lunduke

In the press

Browser-Nachwuchs: Freie Engine tritt gegen Googles De-facto-Monopol an | heise online
Ein neuer Browser von Grund auf: Ladybird startet offiziell durch | heise online

1 Like

Hi Markus,

ich hab das Beispiel grade bei [image-refresh] Embedding remote images with Grafana's Text Panel, with interval-based refresh and cache busting by amotl · Pull Request #1 · panodata/grafana-snippets · GitHub eingearbeitet, damit es nicht so lose im Forum rumfliegt. Dort kommt auch gleich noch ein zweites Beispiel dazu.

Sag Bescheid, wenn Du dort nicht Dein Beispiel sehen willst. Schick(t) gerne Vorschläge für eine anonymere Variante, z.B. zu irgendeinem öffentlichen Webcam Bild. Der einzige Wunsch ist, dass die URL zum Bild halt einigermaßen stabil sein sollte. Wenn dort dann auch noch “mehr passiert”, als typischerweise bei Deiner Bienenkiste, ist es vielleicht auch nicht schlecht als kanonisches Beispiel.

Merci für Eure Ideen, schon im Voraus.

Viele Grüße,
Andreas.

1 Like