« Back to all articles

Creating a dashboard image for the Raspberry Pi

Written by René Santing on 13th March 2015

• Raspberry Pi

Monitoring performance using a Raspberry Pi

Here at Spindle HQ, we have a variety of web dashboards to monitor the performance of our platform and other things. Behind these dashboards is a Raspberry Pi running the uzbl browser. We chose uzbl, because with uzbl it is possible to run javascript scripts when loading a website. For example, we use those scripts to auto login.

To accomplish this, the following tools are most important:

• MINIBIAN: this is our base image.
• uzbl: the browser
• nodm: to auto login
• matchbox: a very small window manager
• unclutter: to hide the on screen mouse pointer

As an extra we use:

• fbi: to show the splash screen during boot
• feh: to show the loading screen

Installation

We start with the installation of MINIBIAN on our SD card.

Then we install some basics that are missing from MINIBIAN

Naturally, we first update the distro.

apt-get update
apt-get dist-upgrade

Then we install raspi-config and rpi-update.

 apt-get install raspi-config rpi-update

We run raspi-config to resize the partition so that we can install the following.

Choose Option 1 “expand filesystem”

We also disable overscan, because we don’t want it.

Choose option 8 Advanced

Then choose option A1 disable overscan

Now we reboot the pi.

Next up we install all the packages we need (note: we also install packages needed for WiFi connections here, because some of our pi’s use WiFi).

apt-get install nodm uzbl matchbox fbi vim sudo unclutter xinit feh wireless-tools wpasupplicant firmware-linux-nonfree firmware-ralink

To free up some space we run

apt-get clean

We don’t want to run everything as a root user, so we create a pi user. As password for the image we use the default raspberry that is used in all standard raspberry images.

adduser pi
usermod -G sudo pi

To let the pi auto login we configure nodm. Edit /etc/default/nodm and make sure it has the following settings.

NODM_ENABLED=true
NODM_USER=pi

Now the pi user is logged in on boot so we edit its xsession file. Open up /home/pi/.xsession in your editor.

#!/bin/bash
# Make sure the screen isn't blanked ever.
xset s off
xset -dpms
xset s noblank
# Run the window manager and set the loading screen background.
unclutter -jitter 1 -idle 1 -noevents -root & feh --bg /home/pi/splash-loading.png & exec matchbox-window-manager -use_titlebar no &
# We ping the public google dns to test for internet connectivity. Only start uzbl when the ping works.
while true; do
       ping -c 1 -s 1 -W 1 8.8.8.8 1>/dev/null 2>&1
       if [ $? -eq 0 ]; then
               uzbl -u http://wearespindle.com; sleep 2s; 
       fi
done

We run uzbl once from the cli, so that the config dir is created. Then we edit /home/pi/.config/uzbl/config and add the following just above

vim: set fdm=syntax:

# Because setting show status in this config does not appear to work
# we use this event to make sure the status bar is hidden.
set on_event        = request ON_EVENT
@on_event LOAD_START set show_status=0
# Load uzbl per site settings
`@on_event   LOAD_FINISH    spawn @scripts_dir/per-site-settings.py @data_home/uzbl/per-site-settings

For the splash screen on boot we create an init script in “/etc/init.d/” that we name we “asplashscreen” this way it will be one of the first things that starts.

#! /bin/sh
### BEGIN INIT INFO
# Provides:          asplashscreen
# Required-Start:
# Required-Stop:
# Should-Start:      
# Default-Start:     S
# Default-Stop:
# Short-Description: Show custom splashscreen
# Description:       Show custom splashscreen
### END INIT INFO 

do_start () {
   # We show the splash screen on vt7, when we show it on vt1
   # vt7 will end up with a ugly black rectange in the top left corner.
   /usr/bin/fbi -T 7 -noverbose -a /etc/splash.png    
   exit 0
}

case "$1" in
 start|"")
   do_start
   ;;
 restart|reload|force-reload)
   echo "Error: argument '$1' not supported" >&2
   exit 3
   ;;
 stop)
   # No-op
   ;;
 status)
   exit 0
   ;;
 *)
   echo "Usage: asplashscreen [start|stop]" >&2
   exit 3
   ;;
esac
:

Now we make that script executable and make sure it gets started on boot.:

chmod a+x /etc/init.d/asplashscreen
insserv /etc/init.d/asplashscreen

Now let’s make sure our splash screens are copied over the pi. The first one we show should be /etc/splash.png. For the loading screen we use /home/pi/splash-loading.png.

We are almost finished, but we want to hide vertical scrollbars. We can do this with some custom gtk setting.

Open /home/pi/.gtkrc-2.0 in your editor. It should contain the following.

style "uzbl" {
       GtkScrollbar::slider-width=0
       GtkScrollbar::trough-border=0
       GtkScrollbar::has-backward-stepper=0
       GtkScrollbar::has-forward-stepper=0
       GtkScrollbar::has-secondary-backward-stepper=0
       GtkScrollbar::has-secondary-forward-stepper=0
}
widget "Uzbl*" style "uzbl"

Next we do some preliminary WiFi setup and we set eth0 to allow-hotplug instead of auto. Our /etc/network/interfaces contains the following.

auto lo
iface lo inet loopback

allow-hotplug eth0
iface eth0 inet dhcp

allow-hotplug wlan0
iface wlan0 inet dhcp
       post-up iwconfig wlan0 power off
       wpa-ssid "ssid"
       wpa-psk  "secret"

Base image

Now that all of our default settings are done, we are going to create a base image that we can copy to other pi’s. We want our image to be small and because our SD card is 8GB we will need to do some resizing. We use gparted to resize our partitions to something under 2GB. Then we create the image using dd.

sudo dd if=/dev/mmcblk0  of=/home/spindle/rpi-dashboard.img bs=1M count=2048

Because we use a blocksize of 1M and a count of 2048, dd will stop after 2GB which is enough to contain everything we need.

And there you have it, a dashboard image for a Raspberry Pi using uzbl.