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

Benutzung / Usage Datenanzeige / Data display
, , , ,
1

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
2

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
3

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
4

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! ,)

5

6 posts were merged into an existing topic: Ladybird Browser

6

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
7

habe jetzt einen zweiten visuellen sensor (ip-cam) für die zweite kiste und dabei fällt mir in meinem dual-dashboard auf:
sobald zwei solche autoaktualisierungs-panels auf einem dashboard liegen, scheint das automatische nachladen nicht mehr zu funktionieren, beispiel hier:
https://swarm.hiveeyes.org/grafana/d/W6SAtSu4k
hier liegt das bild, das eigentlich auf dem dashboard nachgeladen werden sollte:
https://www.euse.de/honig/beescale/latest_b-cam2.jpg

8

Hi Markus,

Das ist gut möglich. Mit den gerade eben publizierten Verbesserungen [1] 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 können nun mehrere Bilder innerhalb eines Panels verarbeitet/aktualisiert werden.

Vielleicht könntest Du ausprobieren, ob sich damit auch schon problemlos mehrere Bilder innerhalb verschiedener Panels aktualisieren lassen?

Viele Grüße,
Andreas.

  1. Improve snippet `image-refresh` · panodata/grafana-snippets@4a0f749 · GitHub ↩︎

1 Like
9

Hmm. Es wird vermutlich augenscheinlich funktionieren, aber zu viele Refresh Handler installieren, so dass die Bilder jedesmal “x-mal zu oft” neu geladen werden. Das wird eine Benutzer:in nicht merken, aber technisch ist es nicht korrekt und es wird bei steigender Panelanzahl schmerzhaft ineffizient.

10

die effizienzüberlegungen leuchten mir ein. aber mein szenario ist mit zwei bildern in zwei panels auch ausgereizt (maximal käme noch eine dritte kiste dazu. aber ich hab nichtmal die cam oder den schwarm. nur die leere kiste. dieses jahr wird das also nix mehr.)

11

Ja klar. Kannst ruhig schonmal ausprobieren. Ggf. kommt halt noch ne verbesserte Version nach.

12

ja, damit funktioniert es, habs eben live umswitchen sehen: sowohl mehrere panels pro dashboard, als auch mehrere bilder innerhalb eines panels. vielen dank mal wieder @Andreas !

2 Likes
13

Mit diesem Patch jetzt hoffentlich auch effizienter unterwegs.

1 Like
19

Jetzt auch gemerged hier drüben zum Nachlesen oder Cherrypicken, wenn man wieder mal was ähnliches braucht.

1 Like