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

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!

hannes_oberreiter · June 15, 2022, 8:10am

@clemens das keine .map Dateien existieren ist jetzt nix schlimmes und auch irrelevant. Hast meine Version auch probiert?

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

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

for file 1: `kiosk.sh`

for file 2: `autostart`

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