DIY Info-Screen Using a Raspberry Pi and Dashing

When we discovered the Raspberry Pi we thought about possible use-cases for our office. As a software development company we immediately thought of a dashboard visualizing all the metrics we deal with each day. We want to share with you, how we created our own ultimate info-screen dashboard with a Raspberry Pi.

What you need

  • Raspberry Pi + SD-Card
  • TV
  • A web-server

If you buy a new TV, watch out for one with integrated USB port. This enables you to connect the Raspberry Pi’s power cord directly to the TV.

The web-application itself

We first created the web-application itself which will then be shown on the info-screen. We used Dashing to create a beautiful java-script based user interface.

On top of Yii Framework and Dashing we created an application that enables us to define custom widgets in a straight-forward way. Watch out for the next blog post on this topic!

Assuming you are able to create the web-application itself on your own, we will just fast-forward to the really interesting part: Using the Raspberry Pi as “thin-client” in kiosk-mode.

Setting up the Raspberry Pi

First install your Raspberry Pi like described in the guide for beginners. While installation the base-system and raspi-config you sould configure the Raspberry Pi to log in the “pi” user automatically on startup. After the first launch we will need to install some additional software:

Dashboard

1
pi@dashboard ~ $ sudo apt-get install chromium-browser unclutter x11vnc
  • Chromium is a powerful and fast web-browser which allows kiosk-mode.
  • Unclutter is needed to hide the mouse-pointer after a few seconds of inactivity.
  • X11VNC is a lightweight VNC server which shares the current X session and allows easy remote maintenance.

After installing this software, we can start configuring our setup.

Disable screen-blanking

Usually the screen of your Raspberry Pi will be blanked after a few minutes of inactivity. To avoid this behaviour, update the LightDM configuration:

1
pi@dashboard ~ $ sudo nano /etc/lightdm/lightdm.conf

And change the line which holds the X-Command like this:

1
xserver-command=X -s 0 dpms

Create the startup-script

We want the Raspberry Pi to boot directly to Chromium Kiosk-Mode and the correct URL. For this we create a startup-script in our home directory and make it executable:

1
2
3
pi@dashboard ~ $ touch ~/startup.sh
pi@dashboard ~ $ chmod +x ~/startup.sh
pi@dashboard ~ $ nano ~/startup.sh

Use the following code to start Chromium in kiosk-mode. We will do that after 30 seconds because the Raspberry Pi won’t have the network connection set up immediately. Unclutter will hide the mouse cursor and the X11VNC server will share the current X session.

1
2
3
4
5
6
7
8
9
#!/bin/sh
unclutter &
sleep 30
chromium-browser \
--kiosk \
--ignore-certificate-errors \
--disable-restore-session-state \
http://infoscreen.internal/webapp &
x11vnc -forever

Don’t forget to change the URL to your info-screen web-application ;-)

What does your project look like?

Go to our German post to learn more about the benefits of such a dashboard solution.

Want to build a professional info-screen for your company? Feel free to ask questions in the comments or contact us for professional assistance.