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

Direkt zum posting #7 mit der Anleitung für documenta / BeeCoin staff.

Für die documenta 15 wollen wir eine Auswahl dieser Grafana-dashboards bzw. panels auf zwei Monitoren anzeigen, die an einen Raspberry Pi 4 angeschlossen sind.

Der RasPi 4 hat zwei Micro-HDMI-Schnittstellen und kann darüber zwei Monitore ansteuern.

Nun soll ein skript dafür sorgen, dass

  • autostart alles soll automatisch nach dem Hochfahren passieren
  • browser starten und zwar
  • in fullscreen / kiosk mode
  • nun soll Grafana-Panel 1 auf Monitor 1 dargestellt werden
  • und Grafana-Panel 2 auf Monitor 2
  • ggf. default vorhandene screensaver sollen aus sein
  • ggf. Mauszeiger ausblenden

Recherche dazu

Work in progress

Autostart file

  • Autostart path / file (für Pi 4 / Buster und neuer)
    sudo nano /etc/xdg/lxsession/LXDE-pi/autostart
  • file
    @lxpanel --profile LXDE-pi
    @pcmanfm --desktop --profile LXDE-pi
    @xscreensaver -no-splash
    @chromium-browser --kiosk www.raspberrypi.org

Frage: (Wie) kann man hier einen dezidierten Monitor zuweisen?

ODER (!) *.desktop files

  • *.desktop path / file (für Pi 4 / Buster und neuer)
    für alle user:
    sudo nano /etc/xdg/autostart/chromiumstart.desktop
    oder für aktuellen user:
    nano ~/.config/autostart/chromiumstart.desktop
  • file 1
    [Desktop Entry]
    Type=Application
    Name=ChromiumScreen1
    NoDisplay=false
    Exec=sh -c 'chromium-browser --user-data-dir=/tmp/browser-1 --new-window --window-position="0,0" --window-size="1920,1080" --kiosk --force-device-scale-factor=1 https://www.beecoin.de/beecoin/
  • file 2
    [Desktop Entry]
    Type=Application
    Name=ChromiumScreen2
    Exec=sh -c 'chromium-browser --user-data-dir=/tmp/browser-2 --new-window --window-position="0,1081" --window-size="1920,1080" --kiosk --force-device-scale-factor=1 https://www.beecoin.de/beecoin/

anderer Eintrag mit vollem Pfad:
Exec=/usr/bin/chromium-browser --noerrdialogs --disable-session-crashed bubble --disable-infobars --kiosk http://www.xyl.ch

optinale Parameter

 --disable-restore-session-state --disable-session-storage --disable-session-crashed-bubble --disable-infobars

Mauszeiger deaktivieren

  • unclutter installieren
    sudo apt-get install unclutter
  • und aktivieren
    @unclutter -idle 5

wait for network

https://forums.raspberrypi.com/viewtopic.php?t=294014

If your command or app requires network and does not seem to work from autostart, then try enabling the wait for network at boot option in sudo raspi-config

Unterschied Fullscreen / Kiosk

https://gist.github.com/rampfox/085bf3ffb9ff51e114bf7afdf3ced71b

  • Full-screen mode: @chromium-browser --start-fullscreen. The browser starts in app. mode but expanded to full-screen. You can press the F11 key to break out of full-screen mode.
  • Kiosk mode: @chromium-browser --kiosk. The browser starts in full-screen mode but does not respond to the F11 key, nor to any command to get it to switch tasks.
1 Like

Hi Clemens,

hier sind auch noch ein paar auf die Schnelle rausgesuchte Links zum Thema.

2019

2020

2021

Und hier die edelste aller Varianten, als Standalone-Gerät, schonmal erwähnt bei Kiosk-Display mit RaspberryPi und Grafana - #4 by Andreas.

Viele Grüße,
Andreas.

Chromium sollte einen --display command haben:

--display // Which X11 display to connect to. Emulates the GTK+ "--display=" command line argument. 

Das starten der Kioske könnte man auch über ein Python script theoretisch machen und dieses in den Autostart hauen. Ist vielleicht cleaner weil dann könnte man ein Bild anzeigen wenn kein Internet vorhanden ist.

Cheers
Hannes

1 Like

Danke Hannes für den Hinweis, bisher habe ich dazu nur Berichte gefunden, die sagen, dass sie es damit nicht hinbekommen haben, etwa:

Hier noch eine andere Lösung Launch Chromium browser on second display? - Raspberry Pi Forums


DISPLAY=:0 /usr/bin/chromium-browser \
--noerrdialogs \
--kiosk \
--incognito \
--window-position=1920,0 \
http://localhost:8080/secondpage
1 Like

Hallo clemens,

wäre ja zu einfach gewesen. ;9

Hier noch ein Link warum man verschiedene User Profile braucht und anscheinend hilft --app url um PWA style zu bekommen.

https://forums.raspberrypi.com/viewtopic.php?t=257688#p1571376

Cheers
Hannes

1 Like

Danke für den Link Hannes, dann scheint es über die autostart file ähnlich zu funktionieren wie über die *.desktop files:

Also ohne --display, dafür mit --window-position, --app und unterschiedliche --user-data-dir-Angaben, so wie im Beispiel unter deinem LInk:

@chromium-browser --window-position=0,0   --window-size=900,440 --app=http://*address1* --user-data-dir="/home/pi/Documents/Profiles/1
@chromium-browser --window-position=0,500 --window-size=900,440 --app=http://*address2* --user-data-dir="/home/pi/Documents/Profiles/2

Voll kann ichs noch nicht testen, da gerade nur ein RasPi4 mit einem Monitor da ist, ich werde aber berichten! Danke für eure Hilfe!

1 Like

Anleitung für die documenta-Technik / Team Georg

[edit1] laut Ruppert ist der Standard-user auf den Raspberrys vor Ort nicht pi, sondern production, daher geändert.
[edit2] ergänzt um sudo chmod +x ...
[edit3] ergänzt um URL mit Platzhalter xx für hive-ID
[edit4 ergänzt um default chromium-Profil in neu angelegte Profile kopieren
[edit5] profile path geändert, nun nicht mehr in /tmp/ (wird ggf. bei restart gelöscht) und für ersten profile path default chromium verwendet
[edit6] /tmp/ wieder zurück geändert to respect courrent installation in Kassel

RasPi HowTo for BeeCoin / documenta

You have to create kiosk.sh, edit autostart and copy the default chromium profile to a new directory.

for file 1: kiosk.sh

  • open a terminal
  • install unclutter with:
    sudo apt-get install unclutter
  • create file kiosk.sh for mousepointer, sleep mode, … with
    sudo nano /home/production/kiosk.sh
  • copy this text in the new created file kiosk.sh

#!/bin/bash
# hide mousepointer
unclutter -idle 0.5 -root &

# switch sleep mode off
xset s noblank
xset s off
xset -dpms

# wait for internet connection
# I think we do not need this
#sleep 15
  • save and close file with
    Strg + x > y(es) > return
  • !! do not forget this make file executable with
    sudo chmod +x /home/production/kiosk.sh

for file 2: autostart

  • [in case it is not done yet] open a terminal
  • edit file autostart for chromium in kiosk mode
    sudo nano /etc/xdg/lxsession/LXDE-pi/autostart
  • copy this text in the file kiosk.sh (there may be the first 3 lines already) and edit xx and yy along the two required hive ID e.g. /hive.html#03 or /hive.html#15
@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
@xscreensaver -no-splash
@chromium-browser --disable-infobars --app=https://beedao.zku-berlin.org/hive.html#xx --user-data-dir=/tmp/browser1 --window-position=0,0    --kiosk --noerrdialogs --disable-session-crashed-bubble
@chromium-browser --disable-infobars --app=https://beedao.zku-berlin.org/hive.html#yy --user-data-dir=/tmp/browser2 --window-position=1281,0 --kiosk --noerrdialogs --disable-session-crashed-bubble
@/home/production/kiosk.sh
  • save and close file with
    Strg + x > y(es) > return

Copying chromium user profiles

  • Copy the default chromium user profile under /home/pi/.config/chromium/ to the new profile dir in /home/pi/...
    cp -r /home/pi/.config/chromium/. /home/pi/browser2

  • restart and test settings with
    sudo reboot now

(Just as note) Optional parameters for chromium-browser

--window-position=0,0
--window-size=1280,1024
--disable-infobars
--new-window
--kiosk
--force-device-scale-factor=1.0
--noerrdialogs
--disable-session-crashed-bubble

Momentan geht der screen saver trotz

# switch sleep mode off
@xset s off
@xset -dpms
@xset s noblank

nach 5 Minuten los bzw. irgendwas schaltet sich ab und die Monitore sind schwarz, ggf. können die Tipps hier helfen

Generell

Ich weiß nicht genau, was das mit dem @ Zeichen soll. Innerhalb von Makefile Dateien unterdrückt das einen etwaigen Fehlerfall, glaube ich. Und war da vielleicht auch noch was mit Echo-Unterdrückung in ner DOS "cmd" Konsole? In nem ganz normalen Bash Gerödel kommt es mir jedenfalls komisch vor.

Screensaver deaktivieren

Schau doch auch mal in der GUI rum, ob Du den Screensaver dort noch irgendwo deaktivieren kannst. Falls ja, finden wir dann ggf. von dort aus vielleicht die dazu passende Automatisierungsdirektive.

Das muss manchmal auch nicht direkt bei “klassischen” Screensaver Einstellungen zu finden sein, wenn man darunter versteht, dass sich irgendwelche Sprites in Abwesenheit des Benutzers über den Bildschirm bewegen können.

Heutzutage ist das ja auch manchmal (zusätzlich) in den Energy Preferences/Settings untergebracht, wo es dann heißt »Sleep [and blank screen] after 5 minutes of inactivity«, oder so.

Danke, Andreas, die Lösung war noch einfacher, wir hatten keine execute-Rechte auf der Datei. Nun geht es (zumindest bei mir) mit:

Lars (H.) / ZK/U hat unter BeeDAO eine Seite gebaut, die unterschiedliche Grafana-Panels per iframe nacheinander anzeigt. Das läuft auch ganz smooth nur ab und an bekomme ich diese Fehlermeldung:

Habe ich einfach eine schlechte Verbindung oder könnten es noch andere Gründe geben?

@clemens bei mir läuft es, soweit ich sehe ladet er am Anfang gleich alle iFrames rein was vll. zu Problemen führen kann. Hier wäre ein lazy attribute im iFrame hilfreich, <iframe loading='lazy'>.

  • Es laufen anscheinend auch noch developer dependencies, da die Seite livereload.js ladet.
  • Die Ladereihenfolge schaut auch falsch aus, ganz zu beginn ladet er die iFrame obwohl die Parameter noch nicht gesetzt sind:

Cheers
Hannes

1 Like

Danke Hannes / @hannes_oberreiter für die detaillierte Analyse, gebe ich gerne ans ZK/U weiter, vielleicht erledigt sich mit einem fix dann auch die Fehlermeldung oben!

Hoi @clemens,

kein Problem. Hier wäre ein einfaches Example wie man es auch lösen könnte und auch immer aktuelle Daten zu bekommen. Einfach als index.html abspeichern und sollte funktionieren. Ich habe wikimedia als Beispiel genommen, weil auf swarm.hiveeyes dürfen nur gewisse Header zugreifen.

<!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>
  </head>
  <body>
    <iframe
      id="iframe_graphana"
      lazy="true"
      src=""
      width="100%"
      height="400"
      frameborder="0"
    ></iframe>
  </body>
</html>

<script>
  const panelIds = [2, 8];
  const baseUrl =
    "https://grafana.wikimedia.org/d-solo/-K8NgsUnz/grafana-home-dashboard-with-status-page-panels";
  const hash = window.location.hash.substring(1);
  const id = parseInt(hash) || 1;

  // https://stackoverflow.com/a/44476626/5316675
  function timer(ms) {
    return new Promise((res) => setTimeout(res, ms));
  }

  async function main(id, panelIds) {
    let panelIndex = 0;
    let iFrameLoaded = false;
    const iframe = document.getElementById("iframe_graphana");
    iframe.addEventListener("load", function () {
      iFrameLoaded = true;
    });
    while (true) {
      iFrameLoaded = false;
      iframe.src = `${baseUrl}?orgId=${id}&panelId=${panelIds[panelIndex]}`;
      panelIndex++;
      panelIndex = panelIds.length > panelIndex ? panelIndex : 0;
      while (!iFrameLoaded) {
        await timer(1000);
      }
      await timer(5000);
    }
  }

  main(id, panelIds);
</script>

Bei mir im Firefox geht sie gar nicht. Das kann aber u.U. an meinen Einstellungen liegen, also keine Panik.

Vielen Dank für die Hilfe, @hannes_oberreiter! Sag weiter Bescheid, wenn irgendwas klemmt, @clemens. Ggf. müssten wir auf swarm noch kurzfristig ein Upgrade auf Grafana 7 machen, falls daran irgendetwas “zu alt” sein sollte.

Sofern notwendig und wenn ihr auf euren swarm einen externen Zugriff von *.github.io erlaubt, könnte ich das angeführte Script auf GitHub hosten.

Momentan erlaubt sind folgende:

# Refused to frame 'https://swarm.hiveeyes.org/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors hiveeyes.org *.hiveeyes.org getkotori.org *.getkotori.org panodata.org *.panodata.org zku-berlin.de *.zku-berlin.de zku-berlin.org *.zku-berlin.org beecoin.de *.beecoin.de".

Cheers
Hannes

Lars hatte was geändert, bei mir geht gerade auch nix, ich hab ihm gerade geschrieben.

Ist kein Problem. Ich habe die Nginx Konfiguration noch um einen Schwung weiterer Domains erweitert und auch Deine btree.at hinzugefügt.

# Policy parameters
# https://chrisguitarguy.com/2019/07/05/working-with-multiple-content-security-policy-headers/
# https://content-security-policy.com/
set $CSP "frame-ancestors";
set $CSP "${CSP} hiveeyes.org *.hiveeyes.org getkotori.org *.getkotori.org panodata.org *.panodata.org";
set $CSP "${CSP} gitlab.com *.gitlab.com";
set $CSP "${CSP} github.com *.github.com github.io *.github.io githubusercontent.com *.githubusercontent.com";
set $CSP "${CSP} btree.at *.btree.at";
set $CSP "${CSP} zku-berlin.de *.zku-berlin.de zku-berlin.org *.zku-berlin.org beecoin.de *.beecoin.de";
add_header Content-Security-Policy $CSP;

Na dann ist noch leichter, hier eine Live Demo: Swarm Hiveeyes

Ladezeiten sind halt ziemlich zäh, da müsste man ein Caching überlegen, zB iFrame immer im Hintergrund laden bevor man es nächste Anzeigt oder so.

Edit: Habe verschiedene Preload Techniken versucht, klappt net wirklich gut. Im Endeffekt werden iFrames erst geladen wenn sie auch angezeigt werden.

Cheers
Hannes

Das läuft leider noch nicht wirklich rund:

Bei mir im Brower unter Windows läuft z.B. https://beedao.zku-berlin.org/hive.html#04 auch auf dem RasPi läuft das leidlich, wenn ich einen Broser starte und die URL aufrufe. Beim autostart aber nicht. Ich vermute die WLAN-connection ist da noch nicht da und der Browser lädt dann (oder auch nicht) den content. Wobei die letzte Fehlermeldung oben ja von Grafana kommt. Eine Idee was das sein könnte?

Beim Aufruf von https://beedao.zku-berlin.org/hive.html#06 bekomme ich auf der JS-Konsole eine ganze Menge timeout-Fehler, die ich beim direkten Aufruf von https://swarm.hiveeyes.org/grafana/d/cx_KOvH7k/documenta-stockubersicht-and-bienenwetter?orgId=2&var-beekeeper=hiveeyes_beecoin&var-measurement=documenta_hive_06_sensors… nicht bekomme, z.B.


DevTools failed to load source map: Could not load content for https://swarm.hiveeyes.org/grafana/public/plugins/petrslavotinek-carpetplot-panel/libs/d3-scale-chromatic/colors.js.map: Load canceled due to load timeout

DevTools failed to load source map: Could not load content for https://swarm.hiveeyes.org/grafana/public/plugins/petrslavotinek-carpetplot-panel/libs/d3-scale-chromatic/ramp.js.map: Load canceled due to load timeout

DevTools failed to load source map: Could not load content for https://swarm.hiveeyes.org/grafana/public/plugins/petrslavotinek-carpetplot-panel/css/carpet-plot.css.map: Load canceled due to load timeout

Ist bei mir aber nur stochern im Nebel!