Dashboard Setup

A fancy home automation control panel

On this page

Installing Prerequisites

The dashboard site can run on your Raspberry Pi. To turn your Pi into a web server, you need to first install Apache:

sudo apt-get install apache2

If you enabled persistence and want to be able to view logs, you also need to install PHP, and the MySQL PHP libraries:

sudo apt-get install php5 libapache2-mod-php5
sudo apt-get install php5-mysql

To check if Apache works, just browse to your Pi's IP address (eg. http://192.168.1.80). If Apache installed correctly, you'll see a page saying "It works!".

If you also followed the guide to install Samba (recommended!), you can now add a section to add access to /var/www, so you can develop the site from your regular computer:

sudo nano /etc/samba/smb.conf

At the end, add this:

[www]
comment = www
path = /var/www
browseable = Yes
writeable = Yes
only guest = no
create mask = 0777
directory mask = 0777
public = no
force user = root

The Weather Underground API

The weather bar uses the Weather Underground API to get weather data. Before it can get weather data, you'll need two things:

  1. A (free) Weather Underground API key
  2. A weather station ID

Start by requesting an API key:

  1. Go to the Weather Underground API and click the Sign Up button
  2. Create an account, and activate it using the confirmation e-mail
  3. Once you're logged in, you need to request an API key: you can select the biggest (Anvil) plan and the history add-on: as long as you select the Developer option it will be $0.
  4. Make a note of your API key.
  5. Also note that the free key allows 500 calls per day. By default, the weather refresh interval on the sample dashboard is every 10 minutes, which would make 144 calls per day. If you change it, make sure you don't go over your quota - or buy an upgrade plan.

The next step is to find a weather station ID:

  1. Go to the Weather Underground home page.
  2. Search for your location - it will take you to the weather detail page for a nearby station.
  3. Optional: change the default station to one closer to you by clicking on "Change Station".
  4. Click on the weather station name - it's right under your location name.
  5. On this page the station's ID will be right next to the station name - make a note of that ID.
  6. Example: if you search for "New York, New York", the default station is "Flatiron". If you click on Flatiron, the station's page lists the ID as "KNYNEWYO118".

Download the project files

Download the dashboard and unzip it to /var/www on your Pi. Then check index.html and look for all the places where it says TODO. That's where you need to change things like insert your weather API key.

You'll probably want to look through the code to understand what's going on. There are comments explaining things throughout. The main files are:

  • index.html: set up general configuration + add, remove and configure widgets (HTML)
  • js/dashboard.js: main logic (javascript/jQuery)
  • css/style.css: widget style (CSS)
  • data.php: used to query the openhab logs in MySQL and return the last 6 entries as JSON (PHP)

The latest version of the dashboard can always be found on GitHub.

Full Screen Mode on your Android tablet

If you're using an Android tablet as your screen, you'll want the browser to work in full screen mode so the various tool bars don't take up precious screen space.

The dashboard running on a cheap Android tablet

There are probably several ways to do it - here's one way:

  1. Install the Chrome For Android browser, or update it to the latest version (you need at least version 39).
  2. Browse to to your dashboard site, and once it's loaded open the Settings menu and click "Add to homescreen". This will create a launcher icon, and allow it to start full-screen. If you're curious, see here for how that works.
  3. Install the Immersive Mode app. Once installed open the app and have it start on boot.
  4. Open your dashboard site using the launcher icon you created earlier. The Chrome interface (address bar etc) should be hidden, but you can still see the Android notifications bar at the top and actions bar at the bottom.
  5. Slide down the Android notifications from the top, and select the right-most icon in the Immersive Mode notification. This should hide both bars - your dashboard is now the only thing visible on the tablet.
You probably also want to set the display to never sleep, and to disable auto-update of apps in the settings of Google Play (these updates have a tendency to kick you out of full-screen mode).

Go Back

Guides