As an OS we are going to use DietPi because it automates most of the setups. There is a 64Bit version available but at the time of writing this, I can't install Chromium on it.
To install DietPi you can follow their Guide. For flashing I used RPi Imager.
Now you should be here:
First Run
Enter Software Optimised, select Chromium (using the arrows and spacebar), and then press Enter.
After that go to DietPi-Config -> Display Options -> Display Resolution and select the current screen resolution.
After that go back until you see AutoStart Options, select Chromium with Enter, you can leave the URL as it is and make sure the user is set to root. Go all the way back by selecting Exit.
Then go to Software Additional and select Build-Essentials, Git, Node.JS, and your editor of choice. Exit by pressing Enter. (Pressing Esc will clear your Settings)
And finally, select Install and reboot at the end.
Setting up Chromium
In some cases, the window size of Chromium might be smaller than the resolution. Looking like this:
To fix this we have to edit these variables in the file at /boot/dietpi.txt and set them to your appropriate resolution:
SOFTWARE_CHROMIUM_RES_X=1280
SOFTWARE_CHROMIUM_RES_Y=720
After that, we have to modify the chromium autostart script to fix some glaring issues. It can be found here /var/lib/dietpi/dietpi-software/installed/chromium-autostart.sh
CHROMIUM_OPTS="--kiosk --test-type --window-size=$RES_X,$RES_Y --start-fullscreen --start-maximized --window-position=0,0"
To this variable add these options:
--no-default-browser-check Disables the default browser check. Useful for UI/browser tests where we want to avoid having the default browser info-bar displayed.--disable-component-update Disable the popup for updating chromium or saying it can't update chromium.--no-first-run Skip First Run tasks, whether or not it's actually the First Run.
More info on command line switches here
Right before:
xinit $FP_CHROMIUM $CHROMIUM_OPTS
add these commands:
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/' ~/.config/chromium/'Local State'
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/; s/"exit_type":"[^"]\+"/"exit_type":"Normal"/' ~/.config/chromium/Default/Preferences
These set in the local chromium settings the exited_cleanly value, it tells chromium it always exited as it should. This being a RaspberryPi, Chromium might close directly and we don't want to see the "Restore Previous Session" pop-up.
In the end, you should have a file that looks like this
#!/bin/bash
RES_X=$(sed -n '/^[[:blank:]]*SOFTWARE_CHROMIUM_RES_X=/{s/^[^=]*=//p;q}' /boot/dietpi.txt)
RES_Y=$(sed -n '/^[[:blank:]]*SOFTWARE_CHROMIUM_RES_Y=/{s/^[^=]*=//p;q}' /boot/dietpi.txt)
CHROMIUM_OPTS="--kiosk --test-type --no-default-browser-check --no-first-run --disable-component-update --window-size=$RES_X,$RES_Y --start-fullscreen --start-maximized --window-position=0,0"
URL=$(sed -n '/^[[:blank:]]*SOFTWARE_CHROMIUM_AUTOSTART_URL=/{s/^[^=]*=//p;q}' /boot/dietpi.txt)
CHROMIUM_OPTS+=" --homepage $URL"
FP_CHROMIUM=$(command -v chromium)
if [[ ! $FP_CHROMIUM ]]; then
FP_CHROMIUM="$(command -v chromium-browser)"
fi
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/' ~/.config/chromium/'Local State'
sed -i 's/"exited_cleanly":false/"exited_cleanly":true/; s/"exit_type":"[^"]\+"/"exit_type":"Normal"/' ~/.config/chromium/Default/Preferences
xinit $FP_CHROMIUM $CHROMIUM_OPTS
Setting up Smashing
Smashing is a Sinatra based framework that lets you build beautiful dashboards. (from their docs)
Log in as the user dietpi(it's the default user) and run these steps:
sudo apt install ruby-dev
sudo gem install smashing bundler
smashing new sample_dashboard
cd sample_dashboard
bundle install
smashing start
Now you should be able to connect to it on localhost, or using the LAN address of the Raspberry Pi on port 3030 and it should look something like this:
Now that we know it works we need to set up the service that autostarts the dashboard and tell chromium to load our link on boot.
Create a file called smashing.service in path /etc/systemd/system containing:
[Unit]
Description=Start Smashing Dashboard
Before=graphical.target
After=network.target remote-fs.target
[Service]
Type=exec
Restart=always
RestartSec=60
TimeoutSec=5min
KillMode=control-group
GuessMainPID=no
User=dietpi
Group=dietpi
WorkingDirectory=/home/dietpi/sample_dashboard
ExecStart=/usr/local/bin/smashing start
PrivateTmp=true
PrivateDevices=true
ProtectSystem=full
MountFlags=private
NoNewPrivileges=true
[Install]
WantedBy=multi-user.target
Make sure to change the WorkingDirectory to the path where your dashboard is at.
More info about the service options here
After that do:
sudo systemctl daemon-reload
sudo systemctl enable smashing
And to modify the link that Chromium loads we can either modify from the TUI using the app dietpi-config or modify the variable SOFTWARE_CHROMIUM_AUTOSTART_URL in /boot/dietpi.txt and set it to http://localhost:3030
Now reboot and it should automagically load the dashboard full-screen on boot having this as a final result:
More info on Smashing here
If you want to have more control over the performance of the smashing service you can use dietpi-services.
DietPi has a lot of tooling that makes your life with a RaspberryPi much much better and I recommend looking more into it.
