A simple HTML/CSS/JS time and weather dashboard for use with Raspberry Pi and Chromium

  • By null
  • Last update: Aug 24, 2022
  • Comments: 6

This project is not maintained and is presented for archival purposes only

Pi Kitchen Dashboard

Because thrift store monitors still need things to do.

This project turns your monitor and Raspberry Pi into a simple, skinnable time and weather dashboard for your kitchen. Want it in your living room? Too bad.

alt text

Items needed

  • Raspberry Pi
  • Monitor
  • Adapter to hook said Raspberry Pi to said monitor
  • Internet connection



Clone this repository with git clone https://github.com/userexec/Pi-Kitchen-Dashboard.git.

If your Pi does not currently have git, you will need to install it first with sudo apt-get install git.

Fulfilling requirements

This project is not distributed with its dependencies; however, Bower will automatically pull them in.

  1. sudo apt-get update && sudo apt-get upgrade - Update your system
  2. Install Node Package Manager (required for Bower)
Raspberry Pi A/B/B+
wget https://nodejs.org/dist/v4.0.0/node-v4.0.0-linux-armv6l.tar.gz 
tar -xvf node-v4.0.0-linux-armv6l.tar.gz 
cd node-v4.0.0-linux-armv6l
sudo cp -R * /usr/local/
Raspberry Pi 2 Model B
wget https://nodejs.org/dist/v4.0.0/node-v4.0.0-linux-armv7l.tar.gz 
tar -xvf node-v4.0.0-linux-armv7l.tar.gz 
cd node-v4.0.0-linux-armv7l
sudo cp -R * /usr/local/

Node install instructions by Conall Laverty

  1. sudo npm install -g bower - Install Bower
  2. cd ~/Pi-Kitchen-Dashboard - cd into the directory of the cloned project
  3. bower install - Install the project's dependencies

Setting your location

Open js/weather.js and find the following section at the top:

// Your Yahoo WOEID code
// Find your WOEID code at http://zourbuth.com/tools/woeid/
var woeid = 23416998;

// Your temperature unit measurement
// This bit is simple, 'c' for Celcius, and 'f' for Fahrenheit
var unit = 'c';

// Yahoo! query interval (milliseconds)
// Default is every 15 minutes. Be reasonable. Don't query Yahoo every 500ms.
var waitBetweenWeatherQueriesMS = 900000;

Change these variables to match your location, unit measurement, and desired update interval, and your part of the coding is done!

Configuring your Pi

You will need a Raspberry Pi (although you could use anything else) with Raspbian (again, or anything else) and an internet connection. To complete the dashboard, your Pi will need disallow screen sleep and automatically start kiosk mode.

Disallowing screen sleep

Unless screen sleep is prevented, the dashboard screen will go black after a few minutes and require a mouse movement or keypress to wake up. Scheduled times for the display to turn off are covered in a later section.

sudo nano /etc/lightdm/lightdm.conf

Add the following lines to the [SeatDefaults] section:

xserver-command=X -s 0 -dpms

Installing Unclutter

Unclutter causes the mouse cursor to disappear when the mouse isn't being moved. This prevents the dash from having a cursor over the middle unless you plug in a mouse and move it elsewhere.

sudo apt-get install unclutter

Installing Midori

Midori is used for its compatibility with multiple RPi generations and reasonably solid rendering. Other browsers may be used if preferred using much the same strategy.

sudo apt-get install midori

Auto-starting Unclutter and Midori

  1. Create a new directory at ~/.config/autostart if it does not exist

  2. cd ~/.config/autostart - cd into this directory

  3. nano unclutterAuto.desktop - Create a new .desktop file

  4. Add the following lines and save. Customize the file path to where this project's index.html lives on your Pi.

    [Desktop Entry]
    Exec=unclutter -idle 0.1
  5. nano midoriAuto.desktop - Create a new .desktop file

    [Desktop Entry]
    Exec=midori -e Fullscreen -a file:///home/pi/Pi-Kitchen-Dashboard/index.html

Your Pi should now atomatically start kiosk mode and show the dashboard full screen once your desktop loads.

If your time or date are incorrect, use sudo raspi-config to set your locale and timezone.

Scheduling screen sleep

If you don't want your display to run 24/7, you can use cron jobs to fire a pair of included bash scripts: screenOff.sh and screenOn.sh. Please ensure you've completed the Disallowing screen sleep step above in order to keep the display always on during the times it's scheduled to be on.

  1. cd into your Pi-Kitchen-Dashboard directory and set both scripts to executable

    chmod +x screenOff.sh
    chmod +x screenOn.sh
  2. Run crontab -e and add cronjobs to the end using the provided scripts. If you're not comfortable writing cronjobs manually, you can use a crontab generator. The following lines, for example, shut off the display at 11:00PM each night and turn it back on at 6:00AM. Be sure to edit the file paths if necessary.

    0 23 * * * /home/pi/Pi-Kitchen-Dashboard/screenOff.sh
    0 6 * * * /home/pi/Pi-Kitchen-Dashboard/screenOn.sh

Changing the skin

Skins are kept, conveniently, in the skins folder. To switch skins, edit Pi-Kitchen-Dashboard/index.html and insert the folder name of the skin you wish to use where the comments direct.

Creating skins

Creating your own skin or a new skin for distribution is easy and only requires knowledge of HTML and CSS. Just copy the default folder under skins, rename it, and begin editing. Comments in the default skin will guide you through the process, but it basically boils down to 99% using your imagination and 1% placing a few IDs and classes so that time and weather data can be auto-populated.


Weather icons by Lukas Bischoff and Erik Flowers https://github.com/erikflowers/weather-icons. Icons licensed under SIL OFL 1.1.

Time formatting by Moment.js

Weather data retrieved using Yahoo! Weather API.

Default skin responsiveness by RYJASM.

Project is under MIT license.




  • 1

    error when installing bower

    Hi when i try to install bower it gives me this error

    i have installed node

    pi@PiServer ~ $ sudo npm install -g bower

    /usr/local/bin/node: /usr/lib/arm-linux-gnueabihf/libstdc++.so.6: version GLIBCXX_3.4.20' not found (required by /usr/local/bin/node) /usr/local/bin/node: /lib/arm-linux-gnueabihf/libc.so.6: versionGLIBC_2.16' not found (required by /usr/local/bin/node)

  • 2

    Second time zone


    Sorry not really an issue, more a query...

    How would I go about adding a second time zone under the current time in:



    <!-- Current date and time information -->
              <div id="time"></div>
              <div id="time2"></div>
              <div id="date"></div>

    Thanks for your work !

  • 3

    README: Fix disabling of dpms

    Checked per google, e.g. https://www.raspberrypi.org/forums/viewtopic.php?t=11815

    And per my own experience, as well as the git history, using xset -dpms

    Thanks for the awesome project!

  • 4

    Added worldwide localisation

    • Modified location preferences to enhance worldwide localisation handling through Yahoo WOEID code rather than USA only ZIP code. • Added ability for temperature unit to be displayed in either degrees Celsius or Fahrenheit • Modified update time to 15 minutes rather than 30 minutes

  • 5

    the first item in the five day forecast is supposed to be labelled "Today" but it shows the date instead

    In function fillForecast( ) in the file weather.js the first past parameter is named num. But the function almost immediately overwrite it with a local variable. Solution is to change the name of either the passed parameter or the local variable so they don't conflict. That will result in the label above the most left hand icon in the five day forecast reading "Today" rather then the current date.

  • 6

    screenOn.sh results in wrong resolution

    Updated my Pi to the latest Jessie distribution and the new Pixel desktop environment. Since doing so, screenOn.sh does not return my monitor to the 1680x1050 resolution that it should be displaying. I'm not entirely sure what resolution is being restored as the display is practically unusable and I have to pull the power plug.