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

clemens · June 1, 2022, 5:13pm

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

alles soll per autostart 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

sehr knappe Infos zu Autostart path / file und Beispiel-Struktur einer Autostart-Datei für Chromium:
Raspberry Pi, Raspbian Jessie: Chromium GUI Autostart - MvA Internet Services
gute aktuelle Übersicht für Raspbian ‘Buster’ and later
STICKY: How to use Autostart - Raspberry Pi OS (Desktop) - Raspberry Pi Forums
Mehrere Monitore
Autostart mehrere Chromium-Fenster positionieren - Allgemeine Software - Deutsches Raspberry Pi Forum
Hier unter “[Update2]” Info zu neuem Autostart path unter Raspbian Buster für RasPi 4:
https://itrig.de/index.php?/archives/2309-Raspberry-Pi-3-Kiosk-Chromium-Autostart-im-Vollbildmodus-einrichten.html
detailierte Infos zu den optionalen Chromium-Parametern unter
– https://pimylifeup.com/raspberry-pi-kiosk/ und
– List of Chromium Command Line Switches « Peter Beverloo (nicht alle verfügbar bei meiner Chromium-Version)
Brauchen wir das? Viele Details, schon etwas älter:
http://www.netzmafia.de/skripten/hardware/RasPi/Projekt-Kiosk/index.html

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.

Andreas · June 1, 2022, 6:28pm

Hi Clemens,

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

2019

Grafana Tutorial: How to Create Kiosks to Display Dashboards on a TV | Grafana Labs
- GitHub - grafana/grafana-kiosk: Kiosk Utility for Grafana

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.

hannes_oberreiter · June 2, 2022, 5:54am

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

clemens · June 3, 2022, 6:39am

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

hannes_oberreiter · June 3, 2022, 11:16am

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

clemens · June 3, 2022, 4:08pm

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!

clemens · June 10, 2022, 1:38pm

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

clemens · June 12, 2022, 11:58am

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

Andreas · June 12, 2022, 12:47pm

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.

clemens · June 13, 2022, 4:04pm

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

clemens · June 13, 2022, 8:37pm

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?

hannes_oberreiter · June 14, 2022, 8:03am

@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

clemens · June 14, 2022, 9:08am

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!

hannes_oberreiter · June 14, 2022, 9:17am

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>

Andreas · June 14, 2022, 9:45am

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.

hannes_oberreiter · June 14, 2022, 9:55am

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

clemens · June 14, 2022, 10:42am

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

Andreas · June 14, 2022, 10:49am

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;

hannes_oberreiter · June 14, 2022, 11:08am

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

clemens · June 14, 2022, 9:45pm

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!

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

Recherche dazu

Work in progress

Autostart file

ODER (!) *.desktop files

Mauszeiger deaktivieren

wait for network

Unterschied Fullscreen / Kiosk

2019

2020

2021

RasPi HowTo for BeeCoin / documenta

for file 1: kiosk.sh

for file 2: autostart

Copying chromium user profiles

(Just as note) Optional parameters for chromium-browser

Generell

Screensaver deaktivieren

ODER (!) `*.desktop` files

for file 1: `kiosk.sh`

for file 2: `autostart`

(Just as note) Optional parameters for `chromium-browser`