Grafana-Grafiken mit Raspberry Pi 4 auf 2 Monitoren und Browser autostart / fullscreen

Leider zu früh gefreut, Ich konnte mit dem Rüberkopieren der Profil-Daten per bash das Panel starten, aber in der autoconfig geht es nicht und auch nach einem Restart des Raspis geht es nicht, als ob durch den Neustart wieder was gelöscht / zurückgesetzt wurde. :-/

Hier wird Raspbian bei einem Problem mit LocalStorage und Chromium genannt: javascript - LocalStorage variable not persisting in Chromium Kiosk mode - Stack Overflow

pfff, noch eine Idee?

Wo liegt denn das “neue” Verzeichnis?

Ja, /tmp wird gelöscht.

Firefox ausprobieren!

Ich habe /home/pi/.config/chromium2/ versucht und /tmp/browser2/.

Firefox ist installiert über man finde ich aber keine Parameter oder Optionen den irgendwo zu positionieren. Also Äquivalent für --window-position=0,0

Vielleicht hilft das hier weiter.

Ich weiß nicht wie wichtig dieses ganze Projekt ist, aber theoretisch könnte ich ansonsten auch einen Webserver aufsetzen der Screenshot macht und diese dann über eine URL served. Die images könnte man dann “einfach” über die URL laden.

Eg. sowas in der Art:

Des ist aber natürlich nicht “ganz” trivial aber machbar, würde mich aber bissl Zeit kosten.

Cheers
Hannes

1 Like

Es läuft bei mir einfach nur sehr “random” über die Autostart. Wenn man das schon vorhandene default chromium Verzeichnis verwendet --user-data-dir=/home/pi/.config/chromium geht es meist (aber auch nicht immer), aber mit einem zweiten hat er häufig Probleme, gestern ging es gar nicht, heute bei einem ab und an. Ich kann es auch nicht eingrenzen.

Ich bin zu den RasPis im Projekt auch wie die Jungfrau zum Kind gekommen und habe schon vielzuviel Zeit investiert, möchte dich, Hannes, da nicht auch noch weiter einspannen, vielen lieben Dank für eure Hilfe Hannes / @hannes und Andreas / @Andreas!

Aber darüber hatte ich auch schon nachgedacht, entweder auf einer Maschine screenshots machen, oder können wir auch von Grafana JPGs oder PNGs über eine URL abrufen – und im besten Fall die gewünschte Größe angeben, die Monitore vor Ort haben 1280 x 1024 px, das ist 5:4. Exportieren über die GUI geht ja, ggf. geht das auch als Link? Ja: Is it possible exporting (render as a png) a especific panel in dashboard? - api - Grafana Labs Community Forums

[edit] Hier wird z.B. für Hive 2, Panel 25 eine Grafik mit 1280 x 1024 ausgegeben:

https://swarm.hiveeyes.org/grafana/render/d-solo/cx_KOvH7k/documenta-stockubersicht-and-bienenwetter?panelId=25&orgId=2&var-beekeeper=hiveeyes_beecoin&var-measurement=documenta_hive_02_sensors&var-COMMON_CDC_NAME=Schauenburg-Elgershausen&var-COMMON_MOSMIX_NAME=SCHAUENBURG-ELGERSH.&var-STATION=Schauenburg-Elgershausenfrom=now-14d&to=now&width=1280&height=1024

1 Like

Tzzz, des ist natürlich die leichteste Lösung, hier jetzt als Images:

https://btree.at/swarm/embed.html

Edit: noch einen simple Fade Effekt hinzugefügt. ;)

Edit2: wenn du mir sagst welche Panels ihr braucht kann ich das auch noch hinzufügen. Momentan: const panelIds = [31, 8, 14, 32];

Cheers
Hannes

3 Likes

Danke!! Momentan sind es die Panel-IDs 23, 25, 31, 32, 8, 6, 14

Das oben zeigt gerade hive4. Könnte man das auch noch parametrisieren z.B.
https://btree.at/swarm/embed.html?hive=xx xx ist die ID, etwa 04 oder 08

und dann beim Aufruf von &var-measurement=documenta_hive_04_sensors die 04 durch den Inhalt der hive-Variable aus dem Search-String ersetzen. Aber nur wenn du gerade Lust und Zeit hast, Lars vom ZK/U sitzt vermutlich auch schon dran. :-)

1 Like

Panels sind hinzugefügt, des mit den Ids funktioniert gleich wie beim anderen mit hash

eg.: https://btree.at/swarm/embed.html#2

Edit hier ist der aktuelle Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Swarm Hiveeyes</title>
    <style>
      .slideshow {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .container {
        display: none;
      }

      /* Animation */
      .fade-image {
        animation: fadeIn 5s;
        -webkit-animation: fadeIn 5s;
        -moz-animation: fadeIn 5s;
        -o-animation: fadeIn 5s;
        -ms-animation: fadeIn 5s;
      }

      @keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      @-moz-keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      @-webkit-keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      @-o-keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }

      @-ms-keyframes fadeIn {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body style="background-color: #161719">
    <div id="container" class="slideshow"></div>
    <div id="template" class="fade-image">
      <object id="image" data="" type="image/png" width="1280" class="fade-image">
        <img src="https://hiveeyes.org/assets/img/hiveeyes.gif" />
      </object>
    </div>
  </body>
</html>

<script>
  const panelIds = [23, 25, 31, 32, 8, 6, 14];
  const baseUrl =
    "https://swarm.hiveeyes.org/grafana/render/d-solo/cx_KOvH7k/documenta-stockubersicht-and-bienenwetter?var-beekeeper=hiveeyes_beecoin&from=now-7d&to=now&height=1024&width=1280";
  const hash = window.location.hash.substring(1);
  const id = parseInt(hash) || 2;
  const container = document.getElementById("container");
  const template = document.getElementById("template");
  panelIds.forEach((panelId) => {
    const newChild = template.cloneNode(true);
    newChild.className = "container";
    newChild.childNodes[1].data = `${baseUrl}&orgId=${id}&panelId=${panelId}&var-measurement=documenta_hive_${
      id < 10 ? "0" + id : id
    }_sensors`;
    container.appendChild(newChild);
  });

  const slides = document.getElementsByClassName("container");
  let position = 0;
  function main() {
    slides[position].style.display = "none";
    position++;
    if (position > slides.length - 1) position = 0;
    slides[position].style.display = "block";
    setTimeout(main, 5000);
  }

  main();
</script>

2 Likes

Fein dass das so klappt. Vielen Dank fürs Mithelfen, Hannes!

So, Lars hat den code auf dem ZK/U-Server geändert und statt der iframes nun die von Grafana generierten pngs verwendet. Auf meinem Test-RasPi lief das schon mal deutlich stabiler, zwar immer noch nicht 100%ig, aber mit einem Reload mit F5 konnte man zumindest das fixen. Ich denke das war dann der Fall wenn der Raspi die Seite startet, die WLAN-connection aber noch nicht aufgebaut ist. Matthias hat dann die RasPis in Kassel neu gestartet und dort läuft es jetzt, alle Panels werden angezeigt und wir sind super zufrieden, dass es endlich so ist wie gedacht.

Heute wurde die documenta schon für die Presse geöffnet und ab morgen darf auch “normales” Publikum hin. Das heute-journal hat gerade vom zweiten ZK/U-Projekt für die documenta, das about | citizenship berichtet so ab Minute 2:25.

Nochmal lieben Dank Hannes / @hannes_oberreiter und Andreas / @Andreas für eure Hilfe!

2 Likes

Impressionen

IMG_4814

2 Likes

26 posts were merged into an existing topic: “Panel-als-Bild” funktioniert nicht mehr