Creating a Weather Display
This post covers making an E-Paper display to show me the daily weather forecast. Obviously I can just use my phone to do this, but I wanted a free standing, battery powered display to show me this info quickly and easily. E-Paper is perfect as I can just get this info every few hours and then put the unit into sleep mode, with the display still available.
I’ve done a post on using the TTGO 2.19″ EPaper ESP32 Unit v2.3. This was the basis for the code presented here. Basically this wakes up every so often, tries to connect to WiFi, creates an access point to add WiFi info if it can’t connect or, if it can connect, it collects some data from different web streams, displays the info and then goes back to sleep.
This post covers a couple of additional things: finding weather data and displaying images on the E-Paper display.
Getting Weather Data
Update 28/11/2020: I have been emailed about a review of weather APIs which acutally looked quite interesting and useful: https://www.climacell.co/blog/top-8-weather-apis-for-2020/ . This has a review of 8 weather APIs, including Open Weather Map. I used Open Weather Map.
I found some example code which connected to Open Weather Map via their API. Details for connection are here. You need to register and get an API key. With their free level you are limited to a certain number of API calls (1,000,00 a month or 60 per minute!), but for this application the free level is fine.
Once connected to WiFi then you can start an HTTP client and then http.begin to a URL using the following URL. You might have to figure out your city code (from me is was “Nottingham, GB”).
https://api.openweathermap.org/data/2.5/?q={YOUR CITY CODE},pt&APPID={YOUR API KEY}
Then sent an http.GET() request which should return the payload, which includes the JSON formatted data you want. An example is here:
{"coord":{"lon":-1.15,"lat":52.95},"weather":[{"id":803,"main":"Clouds","description":"broken clouds","icon":"04d"}],"base":"stations","main":{"temp":289.52,"feels_like":283.07,"temp_min":288.15,"temp_max":290.37,"pressure":1011,"humidity":72},"visibility":10000,"wind":{"speed":9.8,"deg":190},"clouds":{"all":75},"dt":1593783351,"sys":{"type":1,"id":1430,"country":"GB","sunrise":1593747909,"sunset":1593808338},"timezone":3600,"id":2641170,"name":"Nottingham","cod":200}I’m most interested in the daily and 3-hour forecast information. Lets start by showing the daily forecast data.
I found someone else (G6EJD – David) had already produced code to do this which is available via their github link here. This seemed to do everything I wanted so I got this code and had a look at what was happening… David had created some icons to display and also an additional file with some fonts in it. I added those to my ESP32 code and followed how to parse the data and use it to display different icons.
I had to do a few tweaks to get the basic code working on my smaller display, using a newer version of ArduinoJson which caused some issues. I also had a problem with using the inverted bitmap code from the GxEPD library. But got those solved through a bit of trial and error!
Designing Logos for Display
I wanted to figure out how to design my own logos and bitmap graphics for displaying on the E-Paper. I had tried out the logos above but wanted to create my own icons for this unit. I searched a bit and found this LCD Icon Converter program. I downloaded it and tried with a few examples created in Inkscape.
The work flow was:
- Create icon in Inkscape. Export as a .png.
- Open .png in GIMP and convert to a 1-bit .bmp image
- Do this using Image -> Mode -> Indexed and click on “Black & White 1 bit” option.
- Open the .bmp using Image2LCD.
- Use the default options (horizontal scan with nothing else checked).
- You do want to ‘reverse color’ and also ‘mirror Left-Right’.
- Save as .c file
- Copy the .c file data into an icons.h file within your Arduino project.
This is given in much better detail than I can in this youTube video here (not mine and might contain ads!):
I needed to download Image2LCD from here. This is used to convert the 1-bit bmp files. I found that I needed to register the software, but the register code was just on the link page (0000-0000-0000-0000-6A3B). This removes the “Image2LCD” watermark from your images. It appears to be free software, as there is nowhere to pay money to register it…
The main other point (that took me quite a while to figure out) is that you MUST, in your arduino code have the correct size for the image in terms of pixels. Otherwise the image will be gibberish! In this example below the image was 100 pixels wide and 120 pixels high, so the drawExampleBitmap code must have those two values, as shown here:
display.drawExampleBitmap(CE_logo, x, y, 100, 120, GxEPD_BLACK);
Will all the thing above sorted out then the display sprung to life with this image!
The code for this project (still a work in progress!) is available in my TTGO project github here. Here are the graphics I developed for the display (I might adjust them a bit more, as the details got a bit lost when they were resized):
Finished Display
After a bit more messing around with information placement, I now have a unit which gives me the weather for now and also the next five 3 hour forecasts. It also tells me the radiation counts per minute from my workshop (which is always useful to know!). It only wakes up every 15 mins and so should last a pretty long time on a fully charged 18650 cell. I needed to remove the blue power LED, though, as this is not controllable. I just desoldered the LED. Very pleased with the final unit!
Oh yes: If you would like to order one of these displays in a nice wooden enclosure, then please see my electronics kit webshop. I’ve got them available here: https://www.curiouselectric.co.uk/collections/featured/products/e-paper-display-unit