Desktop Weather Display

desktop_weather_display_top
desktop_weather_display_bottom
radar_weather_display_bottom
power_to_raspberrypi
interior_layout
mounted_display_main_board

I have to admit, I’m a bit obsessed with weather. To feed that obsession, I have a sizable bookmark list on my computer and a whole folder of weather apps on my phone. If there is a type of weather data out there, I’ve probably found a way to get it. Issue is, that in order to get all I’m looking for I usually need to jump to a few different places – Wundergraoud for the most recent conditions, National Weather Service for forecast, etc. Not a huge deal, but it is something that can be made easier.

The first step to solving this, was building a dashboard-style website, to aggregate it all in one place. Turns out that almost all weather data sources expose some sort of API functionality that allows developers to plug in to the weather data feed and use that data in their own apps and websites. Some of those APIs are friendlier, easier to use, and more encompassing then others. After taking some time to understand and play around with various APIs,  I ended up with a single webpage that had all the stuff I was looking for in one place – really handy.

Like with many of my projects, it couldn’t simply end there. No doubt, having your very own, customized, just right, weather status display webpage is cool. However, I couldn’t help but think… what would be even cooler is to have a dedicated screen, a device that can display all that info all the time. So, the idea for the desktop weather display was born.

Now, I know that there is a number of weather stations and other similar products that can do something like this. Generally speaking, weather stations are great for current weather information, but they are not that great in forecasting. I most cases, they will use barometric pressure to provide short-term forecast. Think old-school, dial barometers with that dial divided in rain/sunny sections – same concept. If you are in to weather at all and have space to do it, you should consider getting your very own, internet connected weather station. I’ve used Davis Instruments Vantage Pro2 Weather Station and while it is pricey, it works wonderfully. WUnderground has a lot of information on other supported weather stations and necessary software here.  In relation to this project, an extra benefit to having your own weather station is that you can actually integrate its real-time, super-local weather data and forecast in to this display. More on that later.

 

Introduction

To make this happen we’ll need a few things: a computer of some sort, suitable display that can be connected to that computer, a way to connect to the internet, a custom web page formatted to fit this screen just right and finally an enclosure to make the whole thing presentable and desk-worthy. This whole tutorial is written in a choose-your-own-adventure style. In a build like this there is always more than one way to do something, so I tried to have different options for different skill levels for every step. If you come up with a better or simpler way to do something, please let me know.

Lastly, I need to mention that some of the links in this post are Amazon affiliate links. This means that if you click on the link and purchase the item, we may receive commission. Your support is greatly appreciated! More details on how this works can be found under disclosures link at the bottom of every page.

Computer

This is an easy one. With so many inexpensive, single board computers out on the market, it is really just the matter of picking out something. I happened to have an older version of Raspberry Pi, the B+ version, that wasn’t being used for anything, so it was drafted for this mission.  All the instructions here will work on any version of Raspberry Pi, being that they all run same flavor of Linux. You can use any other single board computer, like Pine64 or C.H.I.P. or really anything that has HDMI out and runs Linux. Other video output types can work as well, but that would require some modification to the display configuration. You could even do this on windows-based machine, like something that runs Windows 10 for IoT; the general, high-level steps would still be the same.

mini keyboardAnother note about the computer is that you will need something to control it, as in keyboard and a mouse. While you are working on building this, any old wired keyboard and mouse would work just fine. Once it’s all set up and in the enclosure, wired doesn’t look so good anymore. I have considered adding a USB port that can be mounted on the back of the enclosure, to make it easier to connect peripherals, but ultimately ended up going with an inexpensive mini wireless keyboard/touch pad combo instead. Once everything is set up, a need to make any changes should be minimal, so for occasional use, something like that should be fine.

Display

This one also turned out to be easier than expected. There are many, low cost displays of various sizes on the market that would work for this project. When deciding on the size to use, there are two considerations: the enclosure options and the amount of information that you want to display. Obviously, with a larger display you’ll be able to show more info, but at the same time you’ll need a larger enclosure and more desk space for it. After looking around for a while, I settled on a 7-inch, 800×480, wide-screen display. This particular one would work with just about any single-board computer, as it supports HDMI, VGA and composite video inputs. This tutorial will assume that you have a display with the 800×480 resolution. You can choose to use any other display type and resolution that works for you, but some adjustments will need to be made to the RaspberryPi configuration as well as to the web page that you end up displaying.

In my case, display arrived disassembled: display panel, main board with all the connectors, control buttons and a cable to connect control buttons to the main board. If you’ve ever looked on the inside of a monitor these components and connectors should look very familiar – when you buy something like this, you are essentially getting a small monitor that never made it in to an enclosure. The only tricky part in connecting it all together could be connector for the display panel flex ribbon cable. In order to connect it, first gently pull out the black clips on either side of the connector – they will come out just a little bit. Place the ribbon cable underneath it with bare copper lines of the ribbon cable facing the pins on the inside of the connector. While holding the ribbon like that, push the clips back down. Once pins are down and secured, make sure that ribbon cable is perfectly parallel with the connector before powering it all up.

Control buttons and cable for them can only be plugged in one way and in one place on the main board. Buttons themselves will be: power, menu, input, up and down. Different versions of display may have them in different order. In most cases power will be at one end, so that should be easy one to identify. Next one would be the input, again easy to identify as you’ll see inputs change as you press it. Menu will get the configuration menu to pop-up. With these three out of the way, it’s just the matter of figuring out which ones are up and down.

If you are not comfortable with working with bare-bones components, exactly the same display, at least specification wise, is available as a complete device, for a bit higher price, like this one or this one.

Whichever display you end up using, you will also need an HDMI cable, a really short one. Initially, I went with a flat HDMI cable, thinking that it would be easier to route it. But once it arrived, it turned out that it was very rigid and not at all suitable for this application. I sent that one back and instead I ended up with an ultra-thin round cable. Connectors were smaller than standard and cable was very flexible, making it all fit perfectly.

Power

First, what are the power requirements that we need to meet? Well, that will depend on the computer that you decided to use. Different versions of RaspberryPi have different power requirements (more specific details here). If you have RaspberryPi 2 or before, you will want 2A (2000mA) 5V supply. For RaspberryPi 3 requirements go up to 3A (3000mA). For the display, make sure to check the specifications of whatever display you end up using. One that I used in this project, specified that it requires 12V at 2A.

power cable detail

We can certainly provide power by using separate power adapters, one for each device, but that doesn’t leave us with a very elegant solution. After some searching and looking at all the different options, I ended up using a single power adapter with dual-output. This particular one was scavenged from an old 3.5in IDE hard drive enclosure (remember the wide ribbon cables?) as 3.5in spinning drives use both 12V and 5V for power. Not everyone will have one of these just laying around, so let’s talk about some other options.

One approach is to just go with two separate adapters – one for computer and one for the display. Definitely the easiest way, just plug them in and you are ready to go. The down side is that you will need two outlets and have two cables running in to the desktop display.

Another options is buy a dual-output adapters, similar to the one I used. They are still available and come with two different styles of connectors – DIN and Molex. DIN connector looks like an old, round keyboard/mouse plug. Molex is actually a brand of that makes all sorts of connectors, but in the context of hard drive power connectors, it refers to a 4-pin connector that was used on older hard drives. Whichever you decide to go with, make sure that 5V and 12V outputs provide enough current.

Lastly, you could use a 12V adapter with a 5V voltage regulator circuit. This would be the way to go if you happen to have an orphan power adapter in a box somewhere that can be re-purposed. With just a little bit of soldering we can give it a new life. Before you decide to go down this road, make sure that you have an adapter that outputs 12V DC at least 5A.

Enclosure

After spending some quality time in the local craft stores and on Amazon looking for a suitable enclosure, I finally settled on a shadow box frame. It was almost a perfect fit for the display, it had plenty of room for rest of the electronics and completely free-standing. Obviously, this is only one of the enclosure options. The methodology that was used to mount the display in the shadow box, can be used for just about any enclosure and even for much larger displays.

frame materials

If you end up with an enclosed version of the display, instead of bare bones, and like the way that looks, it may be easier to just purchase an enclosure for the RaspberryPi and mount it to the back of the display. This approach would certainly eliminate some of the “arts and crafts” steps what will be required later on.

While on the subject of arts and crafts, in addition to the shadow box you’ll need a foam core board and some matt cardstock. The foam core board is used to mount the display panel to the shadow box. Cardstock is there purely for appearance, trying to make finished product look a bit more like a picture frame. If you are ok with the slightly glossy appearance of the foam core, cardstock can be skipped altogether and foam core can be used for everything. To make the enclosure complete, last thing you will need is some sort of non-conductive material that we can use to mount the single-board computer and the display control board. I ended up using a clear acrylic sheet (a.k.a pexiglass) because it was readily available at a local hardware store. Anything made out of plastic, fiberglass or similar non-conductive material should work fine. As tempting as it may be to just stuff everything in the back of the frame without mounting it, I would strongly advise against that. There is a lot of stuff that needs to fit in there and you would risk shorting something out if it’s not properly mounted and prevented from moving around.

Network access

In order to get weather data to the display, we will need internet access. If you are using a single board computer, like RaspberryPi 3 that has WiFi built or if you are planning on using wired Ethernet connection, you can skip this section. If you are using RaspberryPi B+ like I did or any other board that doesn’t have WiFi, we’ll need to get a WiFi adapter for it. With my B+ I’ve used TP-Link N150 and EDUP N8508GS. Both were supported by the Raspbian OS and just worked right out of the box. There are many other adapters out there that will work as well. When choosing a suitable one, pay close attention to more recent reviews, as sometimes manufacturers will keep the adapter model number but change the wireless chipset in the adapter. This can cause compatibility issues and force you in to doing some Linux driver voodoo to get it all working. Some adapters will advertise RaspberryPi or Linux compatibility and those are usually a safer bet.

 

Let’s Build it!

Power

Let’s start with power. As I said before, we have three options: option zero, using two distinct power adapters, option one, power adapter with dual output, and option two, using a 12V adapter and stepping down the voltage to 5V.

Option zero

If you don’t feel comfortable with the soldering iron or multimeter, this is probably the simplest way to handle power. Purchase two separate adapters, one for RaspberryPi (like this or this) and one for the display (like this or this) . Plug them in to the corresponding devices and you are all set to go! If you go this route, board layout inside of the frame will probably have to be a bit different from what I ended up with, because of extra space needed for the connectors. Make sure to measure this out before mounting anything.

Option one

If you decided to purchase one of the old hard drive adapters (like this or this), we’ll need to do some surgery on the cable to identify which wire is which. Couple of notes on this before we get to cutting things off. Generally, when you cut off the connector from the adapter, you will want to leave a couple of inches of cable on it, as this is extremely helpful in determining which wire does what. In general, these adapters will have 4-pin rectangular connector or 4 – 5 pin round connector. Once you receive the adapter, before you do anything, check the label and make sure that output voltages are 5V DC and 12V DC and that they can each can provide enough current to power your devices – 2A or 3A each or whatever the power requirements are for your chosen devices.

Wire Identification

In many cases, label on the power adapter should tell you what is the function of each connector pin. Take a look at the label of my power adapter that had a 5-pin din connector.  We will cut off the connector leaving about 2 inches of cable on the connector side. Then, we will want to strip back the wires on both sides of this this cut – connector side and adapter side. We will first work on the connector side to determine which color wire goes to what pin. Then, using the graphics on the label we can use that information to determine which color wire is supposed to provides which voltage. Finally, we will verify that.power adapter

Let’s start with the connector side. First, set your multimeter to do continuity testing. For most meters, when set to this mode, meter will beep when you touch the probes together and display will show all zeros. Take any one wire sticking out from the cut off connector and connect it to one of the probes. Then, carefully touch every pin on the inside of the connector until meter beeps. That means that his wire is connected to that pin. Using the graphics below, determine what function that is that pin supposed to have and write it down. For example: Pin 1, yellow, 12V. Make sure to test every pin with every wire as some wires may connect to multiple pins – 5v pins were connected to the same wire in my case.  Repeat this process until you’ve identified all the wires. In my case, white wire was 12V, green was 5V and black was ground.

Once this is complete, we want to make sure that power adapter indeed outputs the voltage we are expecting on the wires we identified. We will do this by setting the multimeter to measure voltage over 12V, (usually, setting is 20V on most meters) and then connect the wire that was identified as 12V (white wire in my case) to the red probe and one that is identified as ground (black wire for me) to black probe. Plug in the adapter and make sure that your meter is reading 12V or there about. Then, repeat the process to verify the remaining wires. When you are done, you should be able to tell which wire is 12V, 5V and the ground. Make sure to document this!

Option two

For this option, we can use any 12V power adapter that can provide at least 5A. Power adapter would be used directly to run the display, but in order to power the RaspberryPi, we will need to find a way to step down the 12V to 5V. There are several ways to do this and some are more DIY than others.

12V to 5V converter

One solution is to use a pre-made DC voltage converter. There are many of them out there. Some have just 4 wires, two for 12V to come in and two for 5V to come out, like this one. Others are designed to be used as permanently installed car phone chargers and will have two wires on one end for 12V in and micro USB plug on the other end, like this one.  Any of these adapters or variations will work, as long as they can provide enough current for your model of RaspberryPi. The idea here is to split the 12V power supply. One branch would go directly to the display’s main board and the other branch would be passed trough the DC voltage converter that provides 5V at the output going to the computer.

 Hooking up power with options one and two

Whichever of these two option you ultimately decide on, in the end you should have three (maybe four)  wires: 12V, 5V and ground(s).  Got it? Great! Now, let’s connect power to the display control board and RaspberryPi.

power distirbutionIn the final design, I soldered power wires directly to each board. These power wires were powered from the power distribution “rails” that were created on a piece of scrap solder board. Wires from the two sources are connected to row of header pins each. Inner two rails are connected together and they are both ground. The wires that were soldered to each board terminated in female header connectors. These connectors slipped over header “rail” with the appropriate voltage. This seemed like the most flexible option that didn’t take up too much space and still allowed to disconnect power to each device if needed. You can see the whole setup below.

power to raspberrypiSoldering power wires to the board was not much of an issue for the display control board. It uses standard barrel connector for power, making it easy to identify where to connect 12V power feed. RaspberryPi was a different story entirely. It gets its power from the micro USB connector. While it is quite easy to identify various pins on the micro USB connector, the micro USB solder pads are certainly not designed to be used as a solder point for wire. So, I had to look for an alternative.

Every revision of RaspberryPi has a number of test points on the bottom of the board. Purpose of these test points is not formally documented, but there is a lot of open source information available all over the internet that documents potential purposes of these points and how some people are using them to power their Pis. I used information from one of these guides, did some of my own testing and decided to use the test points to power my Pi. As you can see below, for my B+ model, I used pads labeled PP1 and PP3. On my Pi PP1 was +5V and PP3 was ground.

Please understand that using these test points to provide power is dangerous – slightest mistake WILL permanently destroy your Pi.

Simpler approach is to use solder connectors and solder power wires we identified to these connectors. Solder micro USB connectors can be found here or here. 2.1mm barrel connectors for the display control board are here or here. On the Micro USB, the outer most pin on either side are used for power and ground. Exact layout of solder pads to connect to those pins will vary, depending on the connector that you end up purchasing. On the barrel connector, usually the center pin is positive, and outer shell is negative, but again make sure to verify this before connecting anything, as various control boards may have different configurations. Just like with power option zero, allow for enough space in the enclosure for the connectors, before you permanently mount anything.

Mounting

The final version of this project was mounted in a shadow box frame. This is a basic, deep wooden frame that is available form most craft stores or form Amazon. The one you can see in the pictures came from Michael’s.

Inner frame spacer

In my case, there was a spacer frame on the inside that supported the back plate and held front glass in place. Since glass wasn’t needed and box was just a little too small with the inner frame left in place, I removed it. That inner support frame was held in place by a single braid nail on every side, so just a little bit of prying is all that took to get it removed. In some other shadow boxes I’ve come across, inner frame is made to be removable.

The next challenge was to find a way to hold the display in place. What worked the best was creating a recessed slot for display panel to sit in.  I used out-facing card stock frame and inner foam core support frame. Each piece is first cut to the exactly same outer dimensions – use the glass that we removed as a size template. Then, the out-facing cardboard frame was cut a perfectly centered with an opening that matched sized of the viewable part of the screen. The foam board was cut to the exact size of the whole display panel, but not centered – it had to be offset on two sides to account for asymmetric metal bezel around the display panel. Definitely measure twice and cut once situation! When cutting the foam board, make sure to save the center cutout piece as it works perfectly to secure and protect the display once everything is assembled.

inner and outer frameSo, once all the pieces are cut, assemble it like this: place the cardboard cutout in the bottom of the frame, follow that with foam board cutout making sure that they align correctly. This will result in the cardboard frame creating a “lip” that will mask everything except for the viewable part of the screen and then the foam board will make sure that display stays in place. Place the display panel in to the opening in the foam board, followed by the foam cutout. I used cellophane tape to secure the display to the foam board. Then I secured the cutout in the same manned on top of the display. Practically speaking, taping is exactly necessary as piece of acrylic will come right on top of it and press it all down. Once everything is in place, you will end up with just the display ribbon cable sticking out.

mounte display main boardAs I mentioned before, you should mount both circuit boards to something to make sure that they stay in place. In this case I went with a piece of acrylic found at the local hardware store. Acrylic is easy to work with and most importantly non-conductive. Wood or other plastics can work just as well. Acrylic was cut to almost the same size as the foam board and cardboard, just slightly narrower, to allow for display ribbon to pass between it and the wood frame.

The location of the display main board is determined by the ribbon cable, so let’s mount that first. Connect the display panel ribbon to the main board and mark the locations of mounting holes. Drill those out and mount the display main board to the acrylic using machine screws and appropriately sized plastic spacers. The simplest way to make plastic spacers is to use drinking straws and cut them to size. Machine screws can be found at any hardware store. Alternatively, I ended up stacking several PC motherboard spacers, to accomplish the same thing.

interior layout

With the display main board in place, we now need to mount the RaspberryPi. In this configuration, because of the location of all the ports, there was only one location that seemed to work properly: perpendicularly and partially overlapping the display main board. Mounting and spacing process is the same. Make sure to allow for enough space to that no part of RaspberryPi comes in contact with display main board when it is all mounted.

display control buttonsNext, we need to mount the control panel. I opted to mount it towards what’s going to be the top of the frame and in the area that is on the opposite end from where the RaspberryPi is mounted. The buttons are not equally spaced, so this is another step that will require careful measurement before drilling the holes. The holes should be just large enough to fit the entire  square push button, making the buttons just slightly recessed on the back.

If you look at the picture below, you will notice three poles that are sticking out of the back cover plate. These poles are just the right length to push down on to the acrylic and line up the back cover with the slot for the retaining clips. Again, I used hardware that I happened to have left over from past projects. You can use a flat machine screw of an appropriate length with couple of bolts and washers to keep it in place.

entire back panel

Setting up the RaspberryPi

In order to continue you will need a working RaspberryPi, with an SD card that has Raspbian OS loaded on it. If you haven’t done this yet, head on over to raspberrypi.org and get your SD card set up. I would recommend full Raspbian OS. SD cards pre-loaded with an OS are another option and can be purchased here from multiple vendors. Once you have your SD card, put it in to the Pi, plug in the WiFi adapter, keyboard/ mouse receiver, HDMI cable and power to both devices. Your Pi should boot to the Raspbian desktop!

In the upper right hand corner, you will see a network connection icon. Click on that icon and connect to your wireless network.

If you followed along, at this point you have a fully functional computer in a fancy frame. YAY!

Now, let’s make it display some weather.

Making the RaspberryPi screen vertical

You may have noticed that the weather is displayed vertically in all the pictures. You probably also noticed that vertical is not the default display orientation on the RaspberryPi. In order to flip the display on its side, we will need to modify the /boot/config.txt file located on the SD card. This is a configuration file that specifies display properties for you RaspberryPi and this is what we will use to tell it the resolution of our display and which way it needs to be rotated.

This file can be edited right from the Pi, as explained below. If you are not comfortable with Linux environment you can also shut down the Pi, remove the SD card and edit it on a PC/Mac.

Editing /boot/config.txt on the Pi

go to Raspberry menu
select “Accessories”
click on “Terminal”

Once in Terminal, first let’s back up the file we are about to edit. Type:

next, let’s edit the file. Type:

This will open config.txt in the “nano” text editor. Note: you can only navigate with keyboard arrows within the editor.

Add the following lines to the bottom of the file.

Press CTRL+X
Press “y” followed by  Enter
Reboot

With these lines in the configuration file we are creating a custom mode for HDMI output, since 800×480 is not a standard resolution. If you are using a different display that is also non-standard, make sure to replace 800 and 480 above with your display’s resolution. If you are using a standard display, can just add the last line “display_rotate=1” and skip everything before it.

More details on what all different sections of config.txt mean and what are the standard resolutions can be found here.

Your Pi should boot with screen oriented vertically.

Which web browser to use

RaspberryPi comes with a default web browser that’s very limited. While it will work fine for most things, personally I am not a fan of how it renders webpages – it’s different from what we are used to seeing in Chrome and Firefox. This is mainly a cosmetic/appearance issue, so if you just want to move along and get this whole thing working, you can skip this section for now and get back to it later.

The solution for this problem is simple, we’ll install a different browser. Raspbian is flavor of Linux that is derived from a well-known Debian distribution. We’ll start by making sure that everything is up to date. Open the terminal and type in the following commands:

followed by

Each command may take a while to complete, especially the second one. Essentially, first command looks for any available updates and second one installs them. This process is not very different from what happens when you freshly install your Windows or Mac OS. Click yes on any prompts that come up. If you are asked to make any choices during upgrade, just use the default, pre-selected options.

Now, let’s install Firefox. We are installing Firefox version that goes by name Ice Weasel that is supported in Rasbipian. You can also install Chromium, a community version of Chrome but few extra steps are required since Chromium is not officially supported on RaspberryPi. You can find the details on how to do that here.

Tap “y” when you are asked if you would like to continue. This command will install Icewasel browser (a flavor of Firefox) for you. New icons should show up in the “Internet” section of raspberry menu. You will want to use one labeled “Firefox ESR”.

RaspberryPi web server

In order to display a webpage, in our case one that displays weather, we will need a web server. One way to do that is to use a solution that you purchased from a commercial hosting provided. In this configuration your weather display web page will be hosted on the public internet. If that’s something that you happen to have already, great, you can skip this section and jump down to setting up your weather page.

If you don’t have hosting service, no worries, RaspberryPi can take care of that for you and keep it all local! In this particular instance we will need to install two software components to make that happen: Apache web server and PHP interpreter. Apache is the software that will run on your RaspberryPi and serve up the webpage when your browser requests it. PHP is a scripting language that is used to get the most resent data and generate the page we will see using the code we provide.

To get them installed, we will start by opening the terminal and typing:

followed by

Note: If you just did this in the previous, browser install step, it is not necessary to do it again

Next, we will install apache. Type the following in the terminal window:

Tap “y” when you are asked if you would like to continue.

Then, let’s install php with necessary apache libraries:

Tap “y” when you are asked if you would like to continue.

With both apache and php installed you should be able to go to open the browser window on your RaspberryPi and type in http://localhost followed by “Enter” and you should see Apache server welcome page.

You are now ready to host your own webpages!

Configuring the weather display

We are getting in to the final stretch! Last step we need is to configure your weather display pages.

Below I provided three configurations for the weather display, each in its own zip file. Click the corresponding button to download. These are based on the aggregation webpage I mentioned earlier, just scaled down in amount of information and sized to fit 800×480 screen. Before we can make them fully functional for your use, we will need to get a few more things and change couple of lines in the index.php files for the version you would like to use. You will want to do the file editing on the RaspberryPi, just for simplicity sake. Otherwise, you can update the files on your PC and then move them to the Pi.

WUnderground Data

As I mentioned at the beginning, this display page uses Weather Underground for some of its data – the current conditions and three-day forecast. In order to get the data, we will first need to obtain the free WUnderground API key. You can do this by registering as a WUnderground developer. This developer API key allows you to pull data from the WUnderground data feed 500 times a day and no more than 10 times a minute. The weather display pages provided below are set to auto refresh every 20 minutes, so there is no risk of exceeding that limit if the key is used for this purpose alone.

If you are at all familiar with PHP you will see that code below extracts far more info from the Wunderground feed then what’s shown on the final page. Every piece of info extracted is assigned a variable, so if you would like to display it, just call that variable. There is far more data that can be extracted using the same API. You can find more details along with sample code at the Wunderground developer page linked above.

Once you have the key, next we will want to pick a weather station that we will use as a source of our real-time data – more specifically, we will need a station ID. Station IDs usually has state name, then few letters of the city followed by some numbers. For example, I am using KILCHICA130 which is a station in downtown Chicago. If you decided to set up your very own internet connected weather station, you can use your own station ID. If you don’t have your own source for weather data, head on over to wunderground.com, enter your zip code and you’ll be automatically sent to page of one of the nearby weather stations. Right below the name of the station you will see a link that says “Change Station”. If you click on that link you will be taken to a page that lists all nearby weather stations along with location map. Take a look at the list and pick something that relatively close to your location but also something that will be reliable. Generally speaking, weather stations managed by local government agencies, schools, universities or similar entities are more likely to have more consistent operation as compared to personal weather stations owned by an individual that can just disappear. You will be able to see the station ID next to the station name – note this somewhere as well be adding that to the code later.

Bottom half of the display

This will take care of the top half of the display. For the bottom half, I choose a product from the local National Weather Service Weather Forecast Office (WFO) called a “Weather Story”. Weather story is a single image that is usually updated couple times a day and it usually shows graphical forecast for the wider region. Most WFOs have weather stories. You can find them all here. From the drop-down menu select your office and you will be taken to the today’s weather story. From there, right-click on the Weather Story image and copy the URL location. Save this as we will need to paste it in to our page later on.

Weather Story is not the only option here; basically, any image anywhere on the internet that has URL that doesn’t change can be used. Second option I have shown below is using a radar image instead of the weather story. You can find your own on the webpage of your local WFO. Unfortunately, every office designs their page differently, so you will need to do some looking around to find a suitable radar image. Third option below includes not only current weather and an image but also most recent Reuter’s news. That version of the page utilizes Magipee RSS library and uses it to retrieve an RSS feed from Reuters. In the file named NewsFeed.php you can replace Reuters RSS URL with a RSS URL form any other webpage and data from that page will show up on the bottom of your display – some tweaking may be needed.  This option is particularly useful if you are using a larger screen. Obviously, all these pages are just examples so feel free to mix and match until you find something that works for you.

weather story dispaly   radar weather display   weather story with news feed

Now, let’s get all of your stuff plugged in. Above you were able to download one or more zip files that contain everything you need to run that particular option. In every zip file you will find a file named index.php. If you made up your mind and you will only use one, unzip the content of that zip file to /var/www/ on your RaspberryPi. Then, we will use nano editor to plug in your WUnderground API key, station ID and the URL for the weather story from your WFO.

In the terminal type:

You should see something similar to what’s below. If you just get a blank file, make sure that you unzipped your files to the correct location. Depending on how you unzipped it, files you are looking for may ended up being placed in a folder, /var/www/WUStationWXStory/ instead of just /var/www/ for example.

  • On line 17, enter station ID of your choice in place of <STATION ID>. Make sure to keep the quotes.
  • On line 22, enter your WUnderground API key in place of <API KEY>. Make sure to keep the quotes.
  • On line 155, replace the Weather Story URL with the URL from your own WFO. If you happen to live in or around Chicago, you don’t need to change anything.

If you are all done, press CTRL+X, then press “Y” and finally Enter. All done!

Open Firefox ESR and navigate to http://localhost. You’ll be able to see your newly configured weather page!

All done!

Hopefully, you stuck with me on this journey. If you have any questions or problems getting it all going, let me know here.