Tutorial: Raspberry Pi powered Digital Dashboard

Software focussed with not much of a hardware component. Will require basic HTML skills for landing page.

6
6

Pi MakersBox

A few days back over a series of meetings at our incubator, Sproutbox, we came across the inspiration for our next project. As a co-working space, the venue plays host to a range of interesting workshops and they are pretty quick to update their website with their upcoming schedule. That said, we felt that there had to be a better way of informing everyone working out of Sproutbox about coming sessions and a whiteboard just wasn’t going to cut it. As technology enthusiasts, we keep trying to find a better way to do things through science and so we decided to have some fun over the weekend by hacking together a digital dashboard powered by a Raspberry Pi for the guys over at Sproutbox

The idea was to have a Raspberry Pi hidden behind a screen that would show a dynamically updating page with updated information about meeting rooms and upcoming workshops. We’ve documented the exact steps we took so that you can easily follow along.

STEPS

While we are assuming that most of you who are attempting this project probably already have a Raspberry Pi set up or are aware of how to get started with it, we’re including set up instructions from scratch to help first timers as well.

  1. Boot into the Raspberry Pi and enter Raspi-Config
  2. Head over into option 8 ie Advanced Settings and enable SSH.

If you installed Raspbian on your Pi using NOOBS, you will not have to expand the filesystem however if you flashed it manually, you should now select the expand filesystem option to gain access to the entire storage.

Next, we set up the Raspberry Pi to auto connect to WiFi. Follow the steps below and reboot your Raspberry Pi using the command sudo reboot to ensure that the changes take effect.

Show Code

sudo nano /etc/wpa_supplicant/wpa_supplicant.conf

In the text editor add lines

network = {
\ssid="your SSID"
psk="your password"
}

Press ctrl + o then ctrl + x to save

Now that we’ve got WiFi set up on the Pi, we can simply log in to it via SSH and make and changes needed without requiring a separate keyboard and mouse connected to it.

Dashboard 3

Let’s also install Chromium and any updates while we’re at it to make sure that the Pi is all set up for configuration. Follow the steps below to do that.
sudo apt-get update
sudo apt-get upgrade
sudo apt-get rpi-update
sudo apt-get install chromium x11-xserver-utils unclutter

Adding unclutter to the code removes the mouse pointer from the display which is quite important for our usage. A kiosk or dashboard with a pesky little mouse pointer just wouldn’t look very professional, would it?

Dashboard 19

We like to think that we’re a bunch of hard working guys and expect the same from our machines. Keeping that in mind, our next step was to play around with power management and similar settings to ensure that our dashboard didn’t go to sleep during operations.

 The Raspberry Pi loads up a specific file everytime it boots up. We’ll now be making changes to this file to control the behavior of the Pi once it boots up.

sudo nano /etc/xdg/lxsession/LXDE/autostart

In case you set up the Pi using NOOBS, there’s a chance that the above code might not work. In this case replace the above mentioned code with the following:

sudo nano /etc/xdg/lxsession/LXDE-pi/autostart

As you are aware, adding a # in front of a line of code will comment it out. Since we’re trying to disable the screensaver, we’ll be doing just that. Add a hash (#) in front of  @xscreensaver -no-splash so that it appears as

#@xscreensaver -no-splash

Next add these lines underneath the screensaver line
@xset s off
@xset -dpms
@xset s noblank

This disables power management settings and stops the screen blanking after a period of inactivity. Since the Pi is going to be placed in a regular office environment, we wanted to ensure that it wasn’t daunting to use.

Dashboard 20

Indeed, accidental power cycling or abrupt power failure is something that we had to account for. In this case, we wanted to make sure that the Pi did not display an intimidating error message when booted and instead went back to its regular task. The steps below show you how to do exactly that.

@sed -i 's/"exited_cleanly": false/"exited_cleanly": true/' ~/.config/chromium/Default/Preferences

Our final step was to point Chromium to the exact page we wanted it to load.

@chromium --noerrdialogs --kiosk http://sproutbox.in/events/ --incognito

As always, hit ctrl+o and ctrl+x to save and exit the file. You can of course replace the URL above with anything else you might want displayed. Reboot the system using sudo reboot to test everything out. If you’ve followed along correctly, the Pi should now reboot and bring you straight into kiosk mode displaying whatever URL you’ve added above.

ADDITIONAL STEPS

While the above mentioned steps are sufficient to get you started, our particular use case involved a vertically oriented monitor to display a longer list of workshops. Thankfully, changing the display orientation on the Pi is a pretty straightforward process. Go ahead and SSH into your Pi and follow the steps below.

Dashboard 17

Show Code

sudo nano /boot/config.txt

Add lines

overscan_left=0 overscan_right=0 overscan_top=0
overscan_bottom=0 display_rotate=1 gpu_mem=256

Use ctrl+0 and ctrl+x to write to the file and exit.

Done? Great. Since our project was going to be implemented in a professional setting, our final step was to display a custom Sproutbox splash-screen during boot up.

Once again, SSH into the console. We’ll be editing the cmdline.txt file.
sudo nano /boot/cmdline.txt

– Replace “console=tty1” by “console=tty3” to redirect boot messages to the third console.

– Add “loglevel=3” to disable non-critical kernel log messages

We’ll be installing FBI which is a framebuffer imageviewer to enable our next step.
sudo apt-get install fbi

Copy your custom splash image to /etc/ and name it “splash.png”.
Next, we create an init.d script called “asplashscreen” in “/etc/init.d/”

Show Script

#! /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 () {

/usr/bin/fbi -T 1 -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

:

 Our next step will be to make that script executable and install it for init mode rcS. 

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

Our final step is to reboot the Pi and we’re all set.
sudo reboot

If all went correctly, you’ll notice your custom splashscreen here and the Pi will boot straight to the webpage.

There’s a thousand different ways you can use this around your house. How about running an RSS News Ticker with an image slide show above it? Or perhaps viewing timezones around the world while pulling your twitter updates over RSS? We hope we’ve got your inspired to build your very own digital dashboard! Questions? Hit us up in the comments section and we’ll be sure to answer them as soon as possible. To know more about SproutBox, visit them at www.sproutbox.in!

Comments

comments