Create a Digital Sign Using a Raspberry Pi (Automated Setup)

Introduction

I was asked to create digital signage using a Raspberry Pi 4, displaying upcoming events of a club based in Munich.

One requirement was, to implement an automated setup so that it can be quickly deployed to new devices.

After a bit of research, I found DietPi which is a lightweight OS based on Debian. DietPi is configured using a config file. In there, system settings can be configured. DietPi will then set up your system on the first run using those settings. It is also possible to automatically launch a Chromium instance on a specific URL after starting up.

Our digital sign is implemented using Vue.js and a simple Bootstrap slider which cycles through images. It is served on a publicly accessible URL.

Configuration

You can adjust the standard Raspberry Pi config file to your needs. In most cases, you want to disable the overscan using disable_overscan=1 and disable the splash screen with disable_splash=1. If you are using a Raspberry Pi 4, you also want to switch to the new graphics driver by setting dtoverlay=vc4-fkms-v3d.

You can create a dietpi-wifi.txt file to specify a WiFi network, the Pi should automatically connect to:

# - Entry 0
#   WiFi SSID (Case Sensitive)
aWIFI_SSID[0]='My Wifi'
#   Key options: If no key (open), leave this blank
aWIFI_KEY[0]=''
#   Available options: NONE (no key/open) | WPA-PSK | WEP | WPA-EAP (then use settings below)
aWIFI_KEYMGR[0]='WPA-PSK'

The most important configuration is done in the dietpi.txt. Here you want to define a static IP, set an SSH server to launch for maintenance, and set the Pi to wait for a network with CONFIG_BOOT_WAIT_FOR_NETWORK=2. To enable the automatic setup, define AUTO_SETUP_AUTOMATED=1, AUTO_SETUP_AUTOSTART_LOGIN_USER=root and AUTO_SETUP_INSTALL_SOFTWARE_ID=113 (the 113 instructs DietPi to install chromium, see here). Chromium will be automatically launched in kiosk mode by setting AUTO_SETUP_AUTOSTART_TARGET_INDEX=11.

Then configure chromium. E.g.:

SOFTWARE_CHROMIUM_RES_X=1920
SOFTWARE_CHROMIUM_RES_Y=1080
SOFTWARE_CHROMIUM_AUTOSTART_URL=https://google.de

Custom Automation Script

You can also define a script that runs once at the setup. This is useful if you want to pass custom arguments to the chromium executable and handle other logic as automatically turning off the display during night time.

To be able to use a custom script, set AUTO_SETUP_AUTOSTART_TARGET_INDEX=7 and AUTO_SETUP_CUSTOM_SCRIPT_EXEC=0.

Then create a new shell script called Automation_Custom_Script.sh.
Add the following to that script to automatically run a script during startup:

echo -e "if [[ \"$(tty)\" = \"/dev/tty1\" ]]; then
  . /root/startup.sh
fi
" > /root/.bashrc

echo -e "# turn off screensaver
xset -dpms
xset s off
xset s noblank

# Resolution to use for kiosk mode, should ideally match current system resolution
RES_X=$(grep -m1 '^[[:blank:]]*SOFTWARE_CHROMIUM_RES_X=' /DietPi/dietpi.txt | sed 's/^[^=]*=//')
RES_Y=$(grep -m1 '^[[:blank:]]*SOFTWARE_CHROMIUM_RES_Y=' /DietPi/dietpi.txt | sed 's/^[^=]*=//')

# URL
URL=$(grep -m1 '^[[:blank:]]*SOFTWARE_CHROMIUM_AUTOSTART_URL=' /DietPi/dietpi.txt | sed 's/^[^=]*=//')

# Chromiom args
CHROMIUM_OPTS=\" --no-sandbox --homepage \$URL --app --start-fullscreen --check-for-update-interval=604800 --window-size=\$RES_X,\$RES_Y --app-window-size=\$RES_X,\$RES_Y --window-position=0,0 --incognito --noerrdialogs --disable-infobars \"

# Chromium binary
FP_CHROMIUM=\"$(command -v chromium-browser)\"

xinit \$FP_CHROMIUM \$CHROMIUM_OPTS -- -nocursor
" > /root/startup.sh

These commands will also create the custom startup script, which will disable the screensaver and run Chromium on the URL specified in the dietpi.txt as before. The chromium arguments will launch chromium in fullscreen app mode and block any messages from appearing.

Turn the Screen off During Nighttime

To turn the screen off during certain times, add and adjust the following to the Automation_Custom_Script.sh:

echo "0 1 * * * root DISPLAY=:0 xset dpms force off
55 7 * * * root DISPLAY=:0 xset dpms force on
" >> /etc/crontab

Install the Raspberry Pi

So lets set up the Raspberry Pi:

Prepare the SD card

1. Download the DietPi image
2. Unzip the image
3. Insert SD card
4. Use balenaEtcher to patch the image onto the SD card.
5. A) Put the config.txt, dietpi.txt, dietpi-wifi.txt and Automation_Custom_Script.sh in the root (/) folder on the SD card. You might want to modify dietpi-wifi.txt, to adjust the WiFi credentials.

Setup

1. Safely eject the SD card and put it in the Raspberry Pi
2. Plug all your cables into the Raspberry Pi (making sure the power cable is last).
3. Let the setup run. You have to interact once and accept software terms by pressing enter. The website should open after the setup finished.