Using Openweathermap with Grafana and Displaying it on a Raspberry Pi Touchscreen

In this post, I’ll show you how to use the Openweathermap API with Grafana, and how to display it on a nice little touchscreen powered by a Raspberry Pi. Even though I’ll be going over the hardware I’ll be using specifically, you don’t need to be using the same hardware as me. The software setup should be pretty similar to most hardware.

Prerequisites

Before you start, you’ll need a working Grafana install (Instructions here if you don’t), and an Openweathermap API key. I would recommend using the Onecall API since it provides a good amount of information with a single API call (Although Grafana still makes multiple calls, more on that later).

Setting up The Raspberry Pi

Before creating your dashboard, you’ll want something to test it on. If you’re going to do the hardware part last, I recommend setting up a Debian VM with the same screen resolution as the display that you’re going to use. I’ll be going over hardware (Briefly) and software setup. If you’re not using the same hardware as me, then skip the hardware sections. If you only care about using the Openweathermap API with Grafana, then skip this entire section.

Hardware

The hardware I’m using is a Raspberry Pi 3B with an official Raspberry Pi touchscreen and a case that I happened to have laying around. The pictures below show the case that I’m using, and I believe that you can still purchase it on Amazon:

All I had to do to install the Pi was to put it in the case (It was kind of difficult because of the black foam pads), and screw in two screws. I also needed to connect the ribbon cable:

For whatever reason, the cover wasn’t fitting right, so I just clipped it in and rested it on the case. Luckily it still feels pretty secure:

And to my relief, my Pi (I manhandled it out of my old case) and my screen (It has been sitting for months) still worked. It’s impossible to find Pi’s for a reasonable price, so if I broke mine, then this blog post would be even more overdue.

Installing Raspberry Pi OS

Since the Pi will be doing nothing more than displaying a Grafana dashboard inside of a web browser, you don’t need anything fancy. You also don’t need to use Raspberry Pi OS specifically, but I recommend using it for the best compatibility. To install Raspberry Pi OS, download the Raspberry Pi Imager from here.

Once you’ve launched Raspberry Pi Imager, insert your SD card, and select the Choose OS button:

From the list, select Raspberry Pi OS (Other):

Since we don’t need a desktop or anything fancy preinstalled, select Raspberry Pi OS Lite (I recommend 64-bit for better software compatibility):

To save yourself some time, click the settings icon to preconfigure some settings. It will allow you to do stuff like enable SSH, set a hostname, and connect it to a WiFi network. I would recommend enabling SSH and setting a static IP later on so you can easily manage the Pi.

Once you click Save, select the Choose Storage button, select your SD card, then click write. Once it’s done, you should now have a bootable SD card for your Pi, and if you’ve preconfigured it, you shouldn’t need to do any additional setup for now.

After your Pi has successfully booted (And maybe asked a few questions depending on how you’ve preconfigured it), you should see a screen that looks something like this:

Installing Some Software

In order to display your Grafana dashboard, you’ll need some sort of desktop environment or window manager. I personally used Openbox with Lightdm, and I had it open Firefox automatically in kiosk mode. There’s probably a bunch of other ways of doing this (And might be more efficient), but I’ll show you my way.

First, you’ll want to install Openbox (Window Manager), Lightdm (Login Screen Thing), and XFCE Terminal (To manage the Pi directly if you need to):

sudo apt install openbox lightdm xfce4-terminal

Manually start Lightdm’s service:

sudo systemctl start lightdm

After about 5-10 seconds at most, you should see a login screen that looks something like this:

This is a more general tip, but if you’re stuck with a black screen, or you forgot to install a terminal emulator, you can switch your tty by using the following keyboard shortcut:

ctrl + alt + random function key

After a few attempts with random function keys, you should eventually be brought to a normal text-based terminal. Using F7 will bring you back to Openbox.

If you’re able to successfully login, you should see a screen that looks something like this (You might have a wallpaper):

To access the terminal, right click, and locate it in the applications menu. Configure Lightdm’s autologin by opening /etc/lightdm/lightgm.conf, and look for the following lines under [Seat:*]:

#autologin-user=
#autologin-user-timeout=

Uncomment both lines, and replace username with the user that you want to autologin with:

autologin-user=username
autologin-user-timeout=0

Restart Lightdm’s service:

sudo systemctl restart lightdm

And if you’ve followed these steps correctly, after a few seconds you should automatically be dropped into Openbox. If Lightdm’s service is not already enabled, enable it by running the following command:

sudo systemctl enable lightdm

After a quick reboot, Lightdm should automatically start then drop you into Openbox. If Lightdm still doesn’t run at startup, the following command fixed the issue for me (Credit):

sudo systemctl set-default graphical.target

The decade-old StackExchange thread also has a few other solutions if the above command didn’t fix the problem.

Installing Firefox

Now that you have an OS and a window manager, now you need something to actually display that Grafana dashboard. There’s probably better and more efficient ways, but I personally use Firefox since it works well enough. Most importantly, it has a built in kiosk mode that can be activated through the command line.

First, install Firefox:

sudo apt install firefox-esr

Launch Firefox through the right-click menu, and go into settings and disable everything that you can. By disabling everything, it helps to reduce writes to the SD card since Firefox won’t need to save anything, and it might even free up a bit of memory. A more adventurous user might be interested in Arkenfox, which will allow you to disable more stuff beyond the GUI. To run Firefox at startup, create the following file ~/.config/openbox/autostart with a text editor, and add the following line:

firefox --kiosk "dashboard-link"

If you haven’t created a dashboard yet, skip this step for now and come back to it later. If you did, then you should be able to reboot your Pi, and have it automatically display your Grafana dashboard.

Grafana

Before you can display your dashboard on your Pi, there’s a few steps that you need to do to enable anonymous access. You can sign in on your Pi, but I discovered during testing that it likes to sign me out every so often, so it’s important to enable anonymous access.

Anonymous Access

In order to enable anonymous access, open /etc/grafana/grafana.ini in a text editor, and locate the following lines:

#################################### Anonymous Auth ######################
[auth.anonymous]
# enable anonymous access
;enabled = false

# specify organization name that should be used for unauthenticated users
;org_name = Main Org.

# specify role for unauthenticated users
;org_role = Viewer

Remove the ;’s before the lines to uncomment them. For the organization specified in org_name, anonymous users will be able to view all dashboards created in it, so you might want to use a separate one for anonymous access, especially since the default organization specified is the default one. After uncommenting the enabled line, change false to true:

#################################### Anonymous Auth ######################
[auth.anonymous]
# enable anonymous access
enabled = true

# specify organization name that should be used for unauthenticated users
org_name = Main Org.

# specify role for unauthenticated users
org_role = Viewer

Restart your Grafana server, and try to access it logged out. It should now look similar to how it looked while logged in.

Installing and Configuring a JSON Plugin

As far as I’m aware, there doesn’t seem to be a plugin for the Openweathermap API, so we’ll have to do this the manual way. First navigate to the plugins screen:

By default, it might only be showing your installed plugins, so click All:

Next, type “json” into the search bar, and install the plugin that looks like this:

After you’ve installed the plugin, navigate to the Data Sources tab, click Add data source, then locate JSON API from the list of options:

Copy and paste the URL for the Openweathermap API, paste it in URL, and delete everything after the ?. The URL that you paste in should look something like this:

https://api.openweathermap.org/data/3.0/onecall?

Next, scroll down to Misc, and paste everything after the ? in Query string. The part of the URL that you paste should look something like this:

lat=notmylat&lon=notmylon&units=imperial&appid=notmyapikey

The configuration should look something like this:

Now click Save & Test to save your settings. If everything is working correctly, you should see a green check mark that says Success.

Before creating your dashboard, I would recommend messing around in the Explore screen. To actually query data, you’ll enter what data you want to get by using JSONPath. As an example, if you want to get the current temp and your API response looks something like this:

You’ll want your JSONPath to look something like this:

$.current.temp

The same concept applies if you want to get the content of the description field under the weather field:

$.current.weather.0.description

As another example, if you have an API response that looks something like this:

And you want to get all of the values of the precipitation field, your JSONPath would look something like this:

$.minutely.[*].precipitation

Here’s what the JSONPath for one of my panels looks like:

You probably get the idea, so experiment, and see what you discover and break.

Tips with Creating a Grafana Dashboard

Before you create your dashboard, I do have a few tips and tricks I’ve discovered, and they might even save you a few hours of troubleshooting. Here’s all of my tips in no particular order:

Correct Timestamps from Openweathermap API

Openweathermap returns all dates and times in Unix Epoch, but for whatever reason, having Type set to Auto will cause the time/date to display incorrectly. Set Type to Time to correct this:

Openweathermap API Decimal Weirdness

For whatever reason, the Openweathermap API will only display the precipitation probability as a decimal even though it seems to be a percentage. Every other percentage seems to be displayed as a regular number. This isn’t much of a problem, but it can create issues for panels like one of mine:

You might want to try and create a field override under the Overrides tab:

But this is what you’ll end up with instead:

Luckily this issue is easily solved by creating a simple transform rule:

This transform rule will add a new field that will represent the precipitation probability as a number like everything else. You can hide the old field by adding an override that looks something like this:

Automatic Grafana Dashboard Update and Kiosk Mode

To make your Grafana dashboard more useful, you’ll want it to automatically update. Plus, you probably don’t want to see the sidebar buttons and stuff like that. You could click the TV-looking icon in the top right corner and click the little dropdown next to the refresh button, but you probably don’t want to do that everytime your Pi reboots. A better solution is to use URL parameters. Simply set your settings to how you want them to be, then copy the URL. Your URL might look something like this:

http://10.0.1.183:3000/d/b7QDxVO4k/pi-dashboard?refresh=15m&kiosk

Notice the chances to the URL as you change your settings. You can also use playlists to cycle between multiple dashboards. But keep in mind that they refresh everytime they cycle, so it might be a problem for metered APIs.

Automatically Turn The Display On and Off

If you just simply want to disable screen blanking, this can be accomplished by running sudo raspi-config, and disable screen blanking under Display Options.

However, if your Pi display is located in a place like your room, chances are you’ll want to turn the display off at certain hours. Simply run sudo crontab -e, and add the following lines:

0 21 * * * sudo sh -c "echo 0 > /sys/class/backlight/10-0045/brightness"
0 7 * * * sudo sh -c "echo 40 > /sys/class/backlight/10-0045/brightness"

This will turn the display off at 9PM then turn it back on at 7AM. Use a website like crontab.guru to create your own crontab expression. Replace 40 with your desired brightness between 0 and 255. /sys/class/backlight/10-0045/brightness was the file that set the brightness of my display, but it might be different on your own set up.

Update 2/25/2023: For me at least, a recent update has seem to broken the xset commands for DPMS. Running them will result in nothing happening. From searching around online, other people seem to be complaining about the same problem. However, I haven’t found a properly working solution that will actually turn off the backlight and not just display a black screen. Your mileage may vary.

It’s also possible to make the display to turn off after a certain period of inactivity instead of at certain times. First, run sudo raspi-config, go to Display Options, then enable screen blanking. You’ll also want to ensure that the xscreensaver package isn’t installed. Next, install some packages that you might need (At least for me):

sudo apt install x11-xserver-utils libxcb-dpms0

Disable the default screen blanking:

xset s off

Then set how long you want your screen to stay on for before turning off:

xset dpms <time in seconds> <time in seconds> <time in seconds>

After you’ve confirmed that these settings work for you, add those two commands to your ~/.config/openbox/autostart file (These settings don’t seem to save on reboot). Here’s what mine looks like as an example:

xset s off
xset dpms 7200 7200 7200

You can also add su username -c "xset -display :0 dpms force off" to your crontab if you still want the screen to turn off at a certain time. Just keep in mind when scripting that these commands can only be run under the same user that your logged into your desktop environment as.

Addressing Rate Limiting Issues

From what I can tell, each individual panel will make its own API call even when they’re all using the same data source. Throw in a 15 minute or so refresh with enough panels, then that’s a lot of API calls! If you were like me and didn’t know this then added a bunch of panels, you might’ve gotten an email that looked like this:

Then soon discover that your Grafana dashboard was flooded with errors like this one:

Fortunately, the solution is pretty simple (Besides paying for your API calls). Simply combine multiple similar panels into one:

This should help reduce the amount of API calls that you use and eliminate those errors.

Conclusion

This is my first proper blog post, so hopefully you’ve enjoyed it and learned something new. This was a project that I’ve completed a couple months before I’ve gotten around to completing this post. As a result, this blog post a way overdue. If you have any problems, suggestions, or complaints, feel free to leave a comment. I have at least one other blog post in mind, so hopefully it isn’t as overdue as this one (No guarantees).

References

Various sections from Grafana’s documentation: https://grafana.com/docs/grafana/latest/

I’ve probably used my plugin’s docs at some point: https://grafana.github.io/grafana-json-datasource/

Since I’m bad at remembering things sometimes (Part of the reason why this blog post is so late), there’s probably some other resources that I’ve forgotten about.