DIY Minimalist Weather Display (built in ReactJS and RaspberryPi)
Weather monitors are all over the place. They’re one of those little projects that countless people post on Reddit. Some have integrations with Google Calendars, Twitter accounts, and a ton of other neat features. But there’s always one major gripe I have with them: they’re way too busy, and impossible to read from a few feet away. I wanted one that I could see and understand from my bed.
Groggy Requirements
My brain is a bit of a mess in morning. The first couple of seconds are usually a series of mini panic attacks. “Huh? What day is it? Wait, do I have work today? Holy crap, am I late for work?? Is it going to rain today?”
I decided that if I make a morning monitor, it should have some simple rules:
- It should turn on and off by itself.
- If it’s a weekday, the background should be yellow to tell me it’s time to get out of bed!
- If there’s a chance of rain or snow that day, the background should be blue to let me know I need to dress accordingly.
- If it’s a weekend, the background should be grey… because maybe I want to go back to bed. And while we’re at it, maybe it should turn on a bit later than usual.
- It should show me the temperature for the next 12 hours. I should also be able to get a quick glimpse into the chance of precipitation.
- It should update by itself.
The Setup
There are a few parts to the monitor:
- The website that shows the date, time, temp, and forecast.
- The hardware needed to run the setup.
- The configuration of the operating system needed to rotate the screen, go to that website, and turn itself on and off.
The Website
Good news! I’ve hosted a version of the website for you- I’m calling it “Daylight”. It currently only supports a vertical orientation, but I plan on adding in landscape very soon.
There’s a catch. The account I use from Weather Underground is limited, so you’re going to have to create your own free API account at Weather Underground ($0 Stratus account). After you create the account, they’ll give you an API key that you can find under “Key Settings”. Take the “Key ID” and use it in this url:
http://daylight.danielmconrad.com/?key=YOUR_KEYThe site will automatically detect your location. If you’d like to hardcode a zipcode (US only) instead, use this url:
http://daylight.danielmconrad.com/?key=YOUR_KEY&zipCode=YOUR_ZIPCODEYou can also set units to metric by using:
http://daylight.danielmconrad.com/?key=YOUR_KEY&units=metricMaybe set your browser to fullscreen and call it a day? If you’re curious how I setup Daylight to display on a TV with a schedule, keep reading.
The link to the source code is below. Feel free to fork the repo and host anywhere you’d like. Details on getting the repo up and running and even deployed to Github Pages are in the ReadMe.
danielmconrad/daylight
Contribute to daylight development by creating an account on GitHub.
github.com
I’ve been writing React apps for a bit over a year now, but hadn’t yet had a chance to use create-react-app from the Facebook team. I really enjoyed it for building something that’s solely front-end. I decided not to “eject” the app so other devs can easily create their own version.
If anyone has any suggestions for a decent weather API that doesn’t have absurd limits, I’d love to adopt it and not require people to use a token to visit the hosted version of the site.
The Hardware
Okay, with the custom software out of the way, here’s what you’ll need:
- A RaspberryPi. I bought this kit on Amazon, which came with a heat sink and power adapter. You’ll also need to get a 16GB microSD card (or larger), which was not included in the kit.
- A USB mouse and keyboard to use for initial setup.
- A separate computer.
- A TV that supports CEC (this article has more info). CEC is a way to communicate with devices over HDMI. If your TV supports it, the RaspberryPi can be setup to tell the TV to turn on and off, and even adjust brightness, etc.
- An HDMI cable.
- A wall mount that matches with the TV from step 2. I bought this one.
- A magic box of miscellaneous cables and adapters. I needed this one to properly hide the Pi inside of my TV.
The last two items are completely optional, but I wanted mine on the wall. I also wanted to hide the Pi inside the TV but due to the orientation of the port, I had to cut away a bit of plastic from the case and attach an adapter to run a cable back inside. It wound up looking a bit like this:
I don’t have a lot of detailed shots of the internals since my focus was making the software side of these kind of projects easy. If you’d like to see a pretty cool how-to on the construction, give this Reddit post a read.
The Configuration
If you have plenty of Linux experience and want to skip the excruciating step-by-step and beginner-level explanation, here’s the Manual Installation. If you’re super new to RaspberryPi or Linux in general… here we go:
- Follow this guide to install Raspbian, not NOOBS, on the SD card. You’ll see a bunch of recommendations to use NOOBS instead, but I found that many of the packages I wanted to install weren’t available for that distro.
- After the OS is installed on the Pi, you’ll need to connect it to your WIFI network. Before you disconnect your keyboard and mouse, you’ll need to find the IP address (unless you’re using a Mac as your separate computer). Follow this guide to find that number, and take note of it for later. Ok, all good. Disconnect the keyboard and mouse.
- Time to open a secure shell (SSH), meaning you need to open a remote connection to the Pi and run commands from another computer. The Pi will come with a default user account for you to connect with. So, if you’re on Mac or Linux, fire up a Terminal window. If you’re on Windows, download PuTTY.
# On a Mac:
> ssh pi@raspberrypi.local# Linux / PC:
> ssh pi@IP_ADDRESS
When prompted, the password is “raspberry”. You should now see something like this:
Head over to the daylight-kiosk page and follow the installation instructions. At the time that I write this, the instructions are pretty simple:
git clone https://github.com/danielmconrad/daylight-kiosk.git
cd daylight-kiosk
./install.shThis should get you to a point that looks something like this:
All Done!
As long as you have your Pi attached to a power source and connected to a TV, you should be all set. Luckily, there’s no need to worry about power outages since the config should persist across restarts.
