ESP32 - Weather Display

7.5-inch three color E-Paper Display, showing the current weather and five-day forecast from OpenWeatherMap as well as indoor sensor measurements using an ESP32

This project started inspired by other E-Paper-based weather displays. A layout requirement was a prominent indicator of the day of the month and the weekday and sensors for the standard inside parameters, including temperature, relative humidity, and sea level pressure. Also, the weather data should come from DarkSky as it was exact and had a very good one-sentence summary for today's forecast.

Initally using DarkSky after it got acquired by Apple (Apple Inc. has acquired Dark Sky) and is no longer available, the weather data is now received from the OpenWeatherMap API. You can get an OpenWeatherMap developer account with 1000 API calls/day for free.

The display is updated about every 30 min by default and is performing three API calls, one to receive the current weather data and a five-day forecast, one for the 48-hours of hourly forecast and one to receive the current air quality.

Previously, the Arduino IDE had been used, but with the change to OpenWeatherMap, also the software package for development has been switched to Platform IO for easier version control of libraries.

Color Modes

The UI provides three color modes, a light mode with a white background and a highlight color, a dark mode with a black background and a highlight color, and a black and white mode with only two colors. The mode can be selected in the configuration file (see below).

Depending on the E-Paper display, the highlight color is either yellow or red. Displays with more than three colors or grayscale have not been tested but should be able to display a highlight color.

Settings (configuration.h)

When installing the library, rename the file configuration.h.template in the /include/ folder to configuration.h and enter your settings.

I18n (Internationalization)

OpenWeatherMap supports several different languages. For a full list refer to the API documentation. The UI is not supporting all of them and the fallback language is English, with only the current weather wording provided by the OpenWeather in the selected language. As of now only German (de), Dutch (nl), and French (fr) are also available for the UI.

Several languages require the full set of ASCII characters, meaning language-specific special characters might not be displayed correctly at this point.

Wiring Components

Thanks to Robert Zegarac for his help designing the circuit to measure the battery charge and powering down the sensors as well as soldering the SMD parts.

Hardware Components

• Picture Frame
  • Make sure to have enough room in the back for the electronics
• Controller (Driver)
  • E-Paper ESP32 Driver Board
• Display
  • 7.5inch e-Paper HAT (C) - V1, resolution 640x384
• Sensors
  • Sparkfun HTU21D - Humidity/Temperature - discontinued
  • Sparkfun BME180 - Pressure/Temperature - discontinued
  • Adafruit BMP280 - Pressure/Temperature - replacement for BME180 since it supports 5V input
  • Adafruit CSS811 - MOC/eCO2
• Power
  • Micro LiPo Charger
• LiPO battery - can be one off the shelf or in my case I used an old laptop cell (3.7v @ 16.07Wh).

Modifying the Controller

The power regulator on the controller board is not the best when using the board with a battery, dropping out too early and not making use of the battery's full capacity. It has been replaced with an AP7361C-33ER-13 from Digi-Key, which has a lower dropout voltage (0.36V @ 1A).

Software and Dependencies

• Display Driver and GFX
  • Display Driver (Jean-Marc Zingg)
• Fonts
  • OpenSans - Standard open font
  • GNU FreeFont - included in Adafruit's GFX library
• Other
  • ArduinoJson - Powerful JSON parser for Arduino
  • WiFi - Arduino IDE
  • HTTPClient - Arduino IDE
  • WiFiClientSecure - Arduino IDE
  • math - Arduino IDE

Inspiration for Code and Design

• David Bird (G6EJD) - Fantastic display for weather data from Open Weather Map
• Weather Icons (Erik Flowers) - Beautiful icon font for weather icons

Fonts

The project uses the popular open-source font Open Sans for all larger fonts. To reduce the amount of memory used, the character set has been reduced to the ones required.

For small fonts like the ones used for units and in the graph the standard fonts packaged with the Adafruit GFX library were used.

Local

To create the custom font files the fontconvert script packaged with the Adafruit GFX library was used.

The font files can be generated in the following way, where size is the desired font size, and the first character and last character are the positions within the ASCII table.

fontconvert <font.ttf> <size> <first character> <last character> > <out.h>

A nice video on how to create these files by Kris Kasprzak can be found here.

Online

A more convenient option is using online tools to generate the bitmap fonts. The selected TrueType font can be converted using the truetype2gfx tool.

The second tool can be used to select a subset of characters if needed or the characters can be edited using the Adafruit GFX Pixel font customiser tool.

Graphics

The display shows the weather data using icons depicting the weather as well as graphs to illustrate a 48-hour forecast.

Icons

All icons depicting the current weather and forecast are created after the beautiful set of icons by Erik Flowers (Weather Icons). They are not bitmaps but all drawn using the shapes provided by the GFX library, allowing them to be scaled depending on where they are used and ultimately saving memory.

The Moon

The moon displayed to represent the current moon phase is not a bitmap. The shadow is drawn depending on the value provided by the weather API ranging between 0 - 1. The surface was generated by taking a picture of a full moon and turning it into a true black-and-white image (dithering). After resizing it to match the size on the display a short JavaScript script was used to determine all black pixels and output the code required by the GFX library to draw the surface. The moon cannot be scaled when including the surface, but on the other hand no bitmap is required.

House (indoor)

The second version of the house depicting indoor values collected is more detailed. The window and streetlight are yellow or have a yellow cone, depicting light at night. When the display is in "night mode" and only updating every 2 hours, the "lights" are on to indicate the energy saving mode.

Graphs

The two graphs have each two plots a black line plot and a yellow filled area plot. The temperature graph shows the predicted temperature (black line) and apparent temperature (yellow area) for the next 48 hours. The other one shows the relative humidity (black line) and rain probability (yellow area) forecast for the same timeframe.

Sensors

The sensors in the frame collect data to display the indoor climate. The frame is now hanging on the wall with a little gap and the values are comparable to the thermostat in the house, indicating that there is enough airflow to acquire reasonable measurements. The CCS811 is a difficult sensor since it needs time to heat up for a correct measurement of volatile compounds (VOC) and eCO₂. The sensor is run for 30s before the display is updated. Most of the time it is showing 400 ppm for eCO₂ and 0-20 for VOC. Due to power saving, the sensor can't be run for longer, for stable reads, but also the lack of an available calibration makes the sensor more of a guesstimate than an actual measurement at this point.

Assembling the Frame (1st Version)

1. Rectangular hole cut at the bottom of the frame for the display's FPC cable.
2. Double-sided sticky tape was added to the corners of the display's backside.
3. The display is glued into the center of the picture frame.
4. Inside, the FPC adapter is glued to the back with hot glue.
5. Insert all the components into the back of the frame. Female connectors are glued into the frame, so the two boards (sensors & controller) can be easily attached with male pin connectors and be removed at any time. The battery is attached with velcro tape.
6. Cover the display with the plexiglas. To cover up the gap between the display and the frame, a vinyl frame was laser-cut from a vinyl sheet with a sticky back and glued onto the plexiglass.

Battery Life

The first version of the code would update the display every 30 minutes and together with the CCS811 not being able to properly power down, it would last for about a week.

The new version updates the display every 30 minutes during the day and only every 2 hours at night. Also, the hardware has been updated, allowing to turn off the power for the sensors completely, resulting in a battery life of about 3 months now (see battery discharge graph). The battery low icon will now be displayed when the ADC value to monitor the battery charge drops below 2000 or about 3.6V. The display should work for about a week or so until it stops working at an ADC value of about 1400 or 2.55V.

Previous Versions

As DarkSky is no longer available, find the latest version in the darksky branch.

Updated Layout: Larger font for temperature and units. New icon for in-house values and rearranged values for current weather.

Old Layout: Initial layout.