Building a dashboard with Raspberry Pi, Dashing and SignalR

I heard of raspberry pi quite a while ago, I think the first time was when Scot Hanselman talked about it on his blog or his podcast. Still I was a little surprised when I recently spotted 2 different magazines just about the raspberry pi at a newsstand and raspberry pi books at a generic bookstore chain here in Berlin.

Neither am I a hardware guy and nor would I call myself a linux expert but still I had to get one even when I didn't exactly know what to do with it yet.

Well actually I had thought about a few scenarios like using it as a media server or for displaying a dashboard in my home office. So I chose to tackle the latter and to my surprise it went really well.

The Result

Here you can see the current state (with some dummy data).

I have tweaked and enhanced the dashboard since I first got it running quite a bit (mostly on the software and data side) and I just love it. A few things that my dashboard currently shows:

  • the clock
  • motivational quote
  • percentage of time budget spent vs time to spend for a current contract
  • email inbox count
  • current bank account balances
  • current count of keystrokes and clicks for the day
  • a picture of my girlfriend
  • a list of Trello cards with a certain label

I think lots of people not just developers would greatly benefit from a dashboard like this, even if it's just for one important data point they want to keep an eye on.

The ingredients

Here is a list of stuff I used to build it:

Hardware

  • Raspberry Pi Model B
  • 16GB Class 10 SD Card
  • Micro USB Charger from my spare phone
  • BenQ GL2250 21" FullHD Display
  • HDMI->DVI-cable
  • short CAT5 cable

Software

  • Raspbian
  • Chromium
  • Dashing (UI and client side parts)
  • WebApi & SignalR

custom code to for the basic setup

  • Scripts to run chromium on startup in full screen
  • Javascript to make Dashing listen to SignalR
  • simple SignalrR hub to send realtime widget updates from anywhere
  • web api controller to dynamically output widgets
  • Authentication setup to use the new OWIN / ASP.NET Identity for to protect the endpoints
  • code to persist und retreive the latest widget updates in Azure Blob Storage

custom code to get some data

  • C# code that runs in a windows service watching for updated csv-Files which I regularly export from my banking software
  • some F# to read from the csv file (props to the F# team for type providers!)
  • C# to check an Exchange server for unread E-Mail over Exchange Web Services
  • some ReactiveUI to react to global mouse and keyboard input
  • C# to send updates using the SignalR .NET Client

With a little help from the community

At first I followed this tutorial in a gist to set up Dashing completely on the pi. It was definetly fun to see node compiling on the pi and I got it working as well but running ruby, node and chromium ate up almost all of the pis resources, so I decided to try to use the frontend parts of Dashing and then build a simple custom backend with tools I knew (unfortunately I can't write decent ruby yet).

It turned out to be really simple to plug the SignalR JavaScript client into Dashing's existing JavaScript. Of course Dashing has a few features that I am missing now. And I can't just plug in existing plugins for Dashing without writing some code to generate the data (Dashing uses simple ruby scripts to run on a schedule to update widgets). On the other hand with SignalR I am a bit more flexible because it supports not only server sent events but also web sockets.

To make the pi boot directly into chrome I found this blogpost very useful. Here the author even provides ways to automaticaly set up multiple pis hooked up to different displays detecting available tv modes and configuring accordingly.

Many thanks to the Shopyfi team for open sourcing Dashing. Really digging the style and being able to use the widget and data binding infrastructure saved me a lot of time.

If you are interested in more details about the setup let me know @mpseidel.

If you liked this post, feel free to join my little list or follow me on Twitter for updates and the occasional content goody.