Skip to content
Dashboard application for home use
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode Enable board sets (default, small, ...) Mar 1, 2018
dist Fire animation has different colors. (blue, green) now. May 20, 2019
src Fire animation has different colors. (blue, green) now. May 20, 2019
test Fix movies Nov 12, 2018
util Implement simple retry for fetch requests Jan 7, 2019
.eslintignore Fixed picture issue Jan 22, 2018
.gitignore
LICENSE
README.md Fix movies Nov 12, 2018
dashboard-example.png Fixed picture issue Jan 22, 2018
eslint.config.json Fixed picture issue Jan 22, 2018
gulpfile.js Fixed picture issue Jan 22, 2018
notes.txt Fixed picture issue Jan 22, 2018
package-lock.json Fix family activities URL Dec 20, 2018
package.json Fix movies Nov 12, 2018

README.md

dashydash

A dashboard application intended for home use. It keeps your appointments, family pictures, bus connections, ... at glance.

Installation

# On a RaspberryPi (run as root)
curl -sL https://deb.nodesource.com/setup_11.x | bash -
apt-get install -y nodejs
  • Clone this repository
    git clone https://github.com/z1c0/dashydash
  • Install gulp globally
sudo npm install -g gulp
  • npm install
  • Run with gulp

Troubleshooting

On a RaspberryPi, if you encounter this error: sass/context.h: No such file or directory, try running LIBSASS_EXT="no" npm install.

Technologies

The application is implemented using Node.js and React.

Modules

These are some of the mentioned modules displayed on the dashboard. A lot of them are specific and tailored to my family's needs, but feel free to extend them or add your own.

Here's an example of how this dashboard looks like.

The dashboard in action.

abc

This lets my 4 year old learn the alphabet in a playful way. It displays capital letters and images of things starting with this letter.

appointments / birthdays

Displays a list of upcoming appointments or birthdays fetched from Google calendars using the npm ical package.

blog

This module displays the title, a short description and the date of my latest blog post. It acts as a subtle reminder to come up with a new post should I let too much time pass without one.

bus

The bus schedule from home to work. Very useful.

family

A couple of years ago I built this website. It acts as a little helper tool for planning our family activities. This module reminds us of the currently planned activity.

football

Displays time and venue of the upcoming game of my favorite football team Borussia Dortmund.

games

These are a couple of 32x32 pixel animations reminding of retro computer games. I actually built this as a testing environment for another project but considered it way too nice to be kept in hiding.

movies

This component has no actual visual representation. It only runs on the server side and periodically checks my regular movie theater for new OV movies. If a new OV version of a movie is released, I get a mobile phone notification using IFTTT. Nifty.

news

This one cycles through a list of news head lines and pictures taken from newsapi.org.

pics

This is my favorite module by far. It looks for a special album in my Google photos collectionb and displays its pictures. That way, I only have to add my favorite new photos to this album and I automatically seen them on the dashboard. Awesome!

weather

Using data from openweathermap.org, this module displays weather information for a given location.

Boards

These modules are arranged in configurations called Boards. Arranging these boards is simply a matter of editing a JSON configuration file. The layout in the picture above e.g. is configured like this (the numbers between the square brackets represent top / left / width / height position in a 8 x 6 grid.

"main" : {
  "modules" : {     
    "timeofday" :    [ 1, 1, 5, 1 ],
    "appointments" : [ 1, 2, 2, 3 ],
    "birthdays" :    [ 3, 2, 2, 3 ],
    "pics" :         [ 5, 2, 4, 3 ],
    "games" :        [ 4, 5, 1, 1 ],
    "family" :       [ 1, 5, 2, 1 ],
    "blog" :         [ 3, 6, 2, 1 ],
    "weather" :      [ 6, 1, 3, 1 ],
    "bus" :          [ 5, 5, 2, 2 ],
    "abc" :          [ 8, 5, 1, 1 ],
    "football" :     [ 7, 6, 1, 1 ]
  }
}

So, displaying a component (e.g. pictures) full screen can be done like this:

"photos" : {
  "modules" : {     
    "pics" : [ 1, 1, 8, 6 ]
  }
}  

Switching between these layouts ("boards") happens automatically after a certain amount of time or - of course - manually.

More?

This blog post gives some more detail on how the dashboard (both hardware and software) were made.

Get Engaged!

A lot of these modules or their functionality are tailored to personal needs and use cases. However, if you have ideas, suggestions or feedback do not hesitate to contact me.
Of course, pull requests are welcome anytime!

You can’t perform that action at this time.