Blog:

Project statussen visualiseren

Published on jul 30, 2018
By Jorg / Senior Software Design Engineer

Ontstaan van het idee…

Binnen Fourtress maken we al enige tijd gebruik van grote touchscreens waarbij we iedere morgen met de projectteams de standup meetings houden. Hierbij maken we gebruik van het scrum board van Atlassian JIRA.

In de tijd dat de schermen niet gebruikt worden voor standups of demo’s gebruiken we ze om de status van onze projecten te presenteren. Op deze manier zijn altijd alle medewerkers op de hoogte van de status van de lopende projecten.

Doordat het aantal projecten en de beschikbare informatie dermate is gegroeid is het idee ontstaan om een status/build monitor per projectteam in het leven te roepen.

Nu zou je misschien denken is dat geen overkill en wegen de kosten wel op tegen de baten? Het opzetten hoeft niet veel te kosten, misschien heb je nog wel een scherm staan dat niet meer gebruikt wordt en een Raspberry Pi liggen? Dan kun je die er uitstekend voor gebruiken.

In dit blog wil ik vooral ingaan op de technische implementatie zodat je dit zelf ook kunt toepassen.

Wat willen we op de monitor weergeven?

Het idee is om een webbrowser full screen te tonen die rouleert over openstaande tabbladen. Hierin willen we status pagina’s en rapportages van tools tonen. Ook zou het mooi zijn dat er demo content of video’s op afgespeeld kunnen worden en dat dit alles centraal te beheren is.

Wat heb je nodig?

  • Monitor + HDMI kabel
  • Raspberry Pi (model 2b of nieuwer)
    Wij hebben voor model 3b gekozen omdat deze net wat sneller is en standaard over Wifi en Bluetooth beschikt. Ook presteert dit model beter als je er bijvoorbeeld continu Youtube filmpjes op wilt afspelen.
  • SDHC kaart (minimaal 4 GB)
  • *optioneel behuizing voor de Pi
    Mocht je de beschikking hebben over een 3D printer dan kun je op Thingiverse genoeg mooie behuizingen vinden. Wij hebben gekozen voor een case die beschikte over een VESA-mount zodat we de Pi achter op de monitor kunnen monteren en alles netjes weg gewerkt kan worden.

Installatie van de benodigde software…

Besturingssysteem
In deze tutorial ben ik ervanuit gegaan dat je al over een Raspberry Pi beschikt met een SDHC kaart waarop Raspbian is geïnstalleerd (niet de Lite variant we hebben tenslotte een desktop nodig). Als dit niet het geval is kun je op de site van Raspberry Pi de benodigde informatie vinden.

Basis instellingen
Boot de Pi, open een terminal venster en voer onderstaand commando uit, hiermee update je de package list en upgrade je de packages:

sudo apt-get update && sudo apt-get upgrade -y

Omdat we de Pi op afstand willen beheren zetten we SSH aan. Dit kan eenvoudig via de Raspbian wizard zie onderstaand commando. Ook kun je hier het standaard wachtwoord (raspberry) wijzigen indien wenselijk.

sudo raspi-config

Installeer de benodigde software
Voor het tonen van de webpagina’s maken we gebruik van Chromium, x11-xserver-utils en unclutter (tooltje om de muis cursor te verbergen).

sudo apt-get install chromium x11-xserver-utils unclutter

Om de tabbladen te laten rouleren maken we gebruik van de TabCarousel extension voor Chrome. Deze kun je vinden in de “Extension manager” van Chromium. Na de installatie kun je opgeven om de hoeveel seconden je het volgende tabblad wilt tonen ook ververst de plug-in iedere 5 minuten de pagina’s.

Aanpassen van het startup script
Om te zorgen dat iedere keer alles automatisch opstart moeten we het startup script wijzigen. We schakelen hier de screensaver uit en voegen een regel toe naar het script dat Chromium met de gewenste pagina’s zal starten. Gebruik onderstaand commando om de wijzigingen door te voeren:

sudo nano /home/pi/.config/lxsession/LXDE-pi/autostart

Wijzig de inhoud van het autostart bestand als volgt:
@lxpanel --profile LXDE-pi
@pcmanfm --desktop --profile LXDE-pi
#@xscreensaver -no-splash
@point-rpi

@xset s off
@xset -dpms
@xset s noblank

@bash /home/pi/browser_start.sh

Chromium browser start script
Onderstaand script dient aangemaakt te worden op de locatie die gebruikt is in het autostart script.

Dit script toont de websites die per regel gedefinieerd zijn in de <hostname>.txt file en als die niet bestaat de defaultPages.txt file. Maar het script zorgt er ook voor dat Chromium altijd “denkt” dat hij netjes is afgesloten, ook al is dat niet gebeurd. Na bijvoorbeeld een power failure zou er anders bij het (her)starten een dialoog verschijnen met de melding of je de sessie wilt herstellen.

Gebruik onderstaand commando om dit script aan te maken:

nano /home/pi/browser_start.sh

Inhoud van het browser_start.sh script:
#!/bin/bash
#Clean up the file(s) created after incorrect shutdown
for i in /home/pi/.config/chromium/.org.chromium.Chromium.*; do
sed -i 's/"exited_cleanly": false/"exited_cleanly": true/' $i
sed -i 's/"exit_state": "Crashed"/"exit_state": "Normal"/' $i
done


#Clean up preferences
sed -i 's/"exited_cleanly": false/"exited_cleanly": true/' /home/pi/.config/chromium/Default/Preferences
sed -i 's/"exit_state": "Crashed"/"exit_state": "Normal"/' /home/pi/.config/chromium/Default/Preferences

#Clean up local State
sed -i 's/"exited_cleanly": false/"exited_cleanly": true/' /home/pi/.config/chromium/"Local State"

#Delete singletonLock
rm -f /home/pi/.config/chromium/SingletonLock

# Run script on display 0 (monitor)
export DISPLAY=:0

# Create an array containing the lines defined in the *txt file called <hostname>.txt
# or defaultPages.txt if not found
if [ ! -f /home/pi/kioskPages/$HOSTNAME.txt ]; then
# Not found, use default "defaultPages.txt" file
input="/home/pi/kioskPages/defaultPages.txt"
else
# File found!
input="/home/pi/kioskPages/$HOSTNAME.txt"
fi

sites=""
while IFS= read -r var
do
sites=$sites" "$var
done < "$input"

# Start Chromium and open the urls in tabs
chromium-browser --disable-infobars --disable-session-crashed-bubble --start-fullscreen $sites

Optioneel, remote desktop/screen sharing via VNC
Als je remote desktop via VNC wilt inschakelen bij het starten van de Pi voer dan onderstaande stappen uit. Ook worden UVNC en TightVNC file transfer ondersteund.

Open een terminal venster en voer het volgende commando uit: sudo apt-get install netatalk x11vnc om de benodigde packages te installeren.

Gebruik het commando: x11vnc -storepasswd om het wachtwoord in te stellen dat gebruikt moet worden bij het opzetten van de sessie. Om te zorgen dat de VNC server wordt gestart bij het opstarten van de Pi moet je onderstaande regels toevoegen in een nieuw bestand op de volgende locatie: ~/.config/autostart/x11vnc.desktop

Inhoud x11vnc.desktop bestand:
[Desktop Entry]
Encoding=UTF-8
Type=Application
Name=X11VNC
Comment=Exec=x11vnc -forever -usepw -display :0 -ultrafilexfer
StartupNotify=false
Terminal=false
Hidden=false

Om de VNC server als een Bonjour service te registreren moet je een nieuw bestand aanmaken in /etc/avahi/services/rfb.service met onderstaande inhoud. Let op doe dit als root dus typ sudo voor de naam van je editor
<?xml version="1.0" standalone='no'?>
<!DOCTYPE service-group SYSTEM "avahi-service.dtd">
<service-group>
<name replace-wildcards="yes">%h</name>
<service>
<type>_rfb._tcp</type>
<port>5900</port>
</service>
</service-group>

Als deze folder niet bestaat moet je waarschijnlijk de avahi package installeren. Recente netatalk packages installeren avahi als een dependency. Je hoeft nu enkel nog de Pi te rebooten om gebruik te kunnen maken van de remote desktop en file sharing functionaliteit.

Optioneel, toevoegen van je public key
Om ervoor te zorgen dat alleen jij zonder wachtwoord kunt inloggen is het handig om een SSH-key pair aan te maken en de public key hiervan op de Pi te registreren. Hoe je dit doet is op internet te vinden zoek hiervoor op “ssh login without password”.

Doe je dat niet dan dien je bij ieder remote commando het wachtwoord van de Pi op te geven bijvoorbeeld bij het gebruik van het onderstaande content beheer script. Ga je slechts één of twee monitoren gebruiken dan kun je dit waarschijnlijk overslaan.

Content beheer

Binnen Fourtress hebben we inmiddels 9 schermen geïnstalleerd allemaal voorzien van een gekloonde SDHC kaart, enkel de hostname is aangepast. Het klonen van de kaartjes is in Linux/OSX is eenvoudig te realiseren met behulp van het dd commando.

Kopiëren van de configuratie files
Om de config files te kopiëren naar de monitoren gebaseerd op de hostname maken we gebruik van onderstaand script (“updateMonitors.sh”). Je dient het pad naar je eigen private key nog te wijzigen. Verder moet je op hetzelfde niveau als het script nog een directory “kioskPages” aanmaken waarin de <hostname>.txt configuratie files staan. In deze configuratie files neem je per regel een url, afbeelding of video op die je in een tabblad in de browser wilt weergeven. Let op deze files moeten eindigen met een lege regel!

#!/bin/bash

## Array containing the hostnames
declare -a hostnames=("buildmonitor1" "buildmonitor2" "buildmonitor3")

## Add SSH key so script can login without credentials
ssh-add ~/.ssh/<your_private_key_here>

## Loop through the array
for i in "${hostnames[@]}"
do
echo ""
echo "+------------------------------------+"
echo "| Configuring monitor: $i |"
echo "+------------------------------------+"

# Always copy the default websites
scp -rp kioskPages/defaultPages.txt pi@$i:/home/pi/kioskPages

# Copy the text file that equals the hostname of the device,
# this file contains the urls that will be presented on the screen.
scp -rp kioskPages/$i.txt pi@$i:/home/pi/kioskPages
scp -rp WelcomeImages/WelcomeHome.jpg pi@$i:/home/pi/Pictures/WelcomeImages

# Enable the line below to: Kill the chromium-browser gracefully and
# reboot after 1 minute (The delay is added so Chromium can be closed
# correctly otherwise the next boot an error dialog will be displayed)
ssh pi@$i "/usr/bin/pkill --oldest -f chromium-browser && sleep 2 && sudo shutdown -r"

# Enable the line below to: Kill the chromium-browser and shutdown
#    ssh pi@$i "/usr/bin/pkill --oldest -f chromium-browser && sleep 2 && sudo shutdown"
done

Vervolg…

Mocht je na het lezen van dit blog nog vragen hebben neem dan gerust contact op. In een volgende blog zal ik ingaan op wat het heeft opgeleverd en de informatie die we op de schermen tonen.

Status monitoren