Friday, February 10, 2017

Kevin's Weather Clock

I've been wanted to get a Raspberry Pi 3 for a few months now and over Christmas I got a starter kit. Of course this gave me the impetus to do something with it. Coming up with a basic first project was the tricky part. First, I thought about a few complicated things and then decided that a clock would be a good first project. After thinking more about it, maybe a clock that showed the current weather would be a good first project.

So I did some research and decided on the following parts.
  • Raspberry Pi 3 Starter kit (32GB, 2.5A powersupply)
  • Official RPi 7" touchscreen
  • Eleduino Bamboo Touchscreen case 
  • Rii K12BT Bluetooth keyboard (optional)
Putting the unit together was pretty easy, I have done a lot of computer building over the years and this was only difficult because the parts are small.

I decided that for the software side I wanted to use NodeJS. I hadn't done much with it at the time so I made a simple website and did most of the data retrieval using client side javascript. In fact the node server was only really serving the pages and not doing any processing on them.

I liked this design but felt the current temp was not as easy to read as I wanted it, and it was not a very 'nodejs' project.

So I decided to take on a v2 of this project. This time using electron, nodejs, reactjs, and mobx. These are some technologies I had become familiar with at work and wanted to use them for a personal project. The clock, map, current, and forecast elements are all react components now and there is a mobx store that has the weather data in in. So when the weather data is updated all the react components respond and are automatically updated. Electron makes the whole project feel more like an 'app' and that is why I used it.

I have some more ideas on what I might do with it. But for right now, I am happy how it all turned out.

The code can be found at: in the v2 branch. And to make it work you will need a Weather Underground developer key (free) and to put that and your city and state in the config.js file at the root of the project. The run 'npm install' once and then 'npm run kiosk' to run it full screen or 'npm run start' to run it on your desktop. Kiosk mode is specifically designed for the dimensions of the RPi touchscreen, so if it looks bad on another screen that is why.