How to set up a Smashing dashboard on your Raspberry Pi

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 # Autostart run script for Kiosk mode, based on @AYapejian https://github.com/MichaIng/DietPi/issues/1737#issue-318697621 # - Please see /root/.chromium-browser.init (and /etc/chromium.d/custom_flags) for additional egl/gl init options # Command line switches https://peter.sh/experiments/chromium-command-line-switches/ # --test-type gets rid of some of the chromium warnings that you may or may not care about in kiosk on a LAN # --pull-to-refresh=1 # --ash-host-window-bounds="400,300" # Resolution to use for kiosk mode should ideally match current system resolution 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" # If you want tablet mode, uncomment the next line. #CHROMIUM_OPTS+=' --force-tablet-mode --tablet-ui' # Add URL for the first run: URL=$(sed -n '/^[[:blank:]]*SOFTWARE_CHROMIUM_AUTOSTART_URL=/{s/^[^=]*=//p;q}' /boot/dietpi.txt) CHROMIUM_OPTS+=" --homepage $URL" # Find absolute file path location of Chromium binary. FP_CHROMIUM=$(command -v chromium) if [[ ! $FP_CHROMIUM ]]; then # Assume RPi 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:

# Install ruby sudo apt install ruby-dev # Install gems sudo gem install smashing bundler # Generate sample project smashing new sample_dashboard cd sample_dashboard # Install dependencies bundle install # Run 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 #ExecStop=/usr/local/bin/smashing stop 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:

# Reload the Daemon to see our changes sudo systemctl daemon-reload # Start smashing on boot 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.