Building a Weather Dashboard on a 7 colour E-paper Display

2025-07-06, 9 minutes reading for Electronic Hobbyist

TL;DR

• Source Code
• Pimoroni E-paper display
• 3D printed Case

This project started because I had a spare raspberry pi zero laying around, being a resourceful guy, I didn't want to leave it there. After seeing a few E-paper related projects, I decided to make a dashboard of my work calendar.

So I ordered the Inky Impression 7.3" 7-colour e-paper display(the 2024 edition), however after drawing my first image onto it, I realised that it took 30 seconds to full refresh, it didn't support partial refresh :(.

The refresh rate was not advertised on the website when I ordered it! this was a no go for me as the refreshing was too distracting ¹.

So after a few months of sitting idle, I pivoted to creating a Weather Dashboard as a gift for my parents. I started by putting down my requirements

Dashboard requirement

• Stupid simple control over dashboard component, for me this meant templating SVG
• Optimise icons/font colours for E-paper
• The final Image is abstracted from the hardware, so you can use it with any display
• 3D printed frame
• Beauty over Human Centric Design :)

There are plenty of weather dashboard projects out there, almost all are black and white, none checked all boxes of my requirements, however the esp32 weather EPD stood out the most. Unfortunately, it was written in C++.

So I decided to write mine in Rust.

Getting thing together

Graphing

I started with what I thought would be the hardest part which was creating an SVG graph. Thankfully there was already a guide on how to create one.

The implementation can be found in charts.rs, it supports both Bezier curves and straight lines.

<!-- A Bezier curve with control points at (0,0) and (50,100), ending at (100,0) -->
<path d="
M 0 0
C 0 0 50 100 100 0
">

<!-- A simple line from point (5,5) to (15,15)-->
<path d="
M 5 5
L 15 15
">

There is a small problem though, given the y-axis bounds are dictated by the actual or feel like temperature, when interpolating the points, the curve might slightly overshoot outside the bounds axis bounds(top and bottom), I have yet to find an algorithm that is smooth and only overshoots in the x dimension.

Icon pack

The design took way too long, after going though several SVG icons packs, I settled for these beautiful icons by Bas. I overhauled the ones I used, so that the shapes and colours are fit for the display. This manual process was extremely time consuming.

The icon pack provides three types of icons, Fill, Line and Animated, the last one opens the option for using animated icons when high refresh rate E-paper displays become cheaper and more colour rich.

Display Colours

When display saturation is set to 1.0, the display supports the following colours without any dithering:

[0, 0, 0],        // Black
[255, 255, 255],  // White
[0, 255, 0],      // Green
[0, 0, 255],      // Blue
[255, 0, 0],      // Red
[255, 255, 0],    // Yellow
[255, 140, 0],    // Orange

As of writing the Waveshare EPD offers a full colour version! Just like LED display, they can show every colour by mixing multiple colours to form a solid colour when seen from a distance. See this video that explains the colours on a microcapsules level.

Dithering

When an image contains a colour that is not supported natively, the Inky image generation script reverts to Dithering using pillow python library

I have intentionally chosen gradients in some of the icons to force dithering, such as portraying heavy clouds.

3D printing the case

This one required a bit of learning, I used an existing 3D frame for a different model as my base and adjusted it using Blender software to my EPD dimensions and features, I then printed the 3D frame at a local library makerspace using a 2mm nozzle.

The STL files and How to Assemble are on my Inky impression 7-3-colour case repository.

Fonts

I expected the handwriting fonts to look good on such display, however after going through a dozen, I settled on trusty plain Regular-Roboto.

However, given that I use Green and Red in the graph, these colours are hard to distinguish for colour-blind people, so I needed to differntiate them. I created my own Dashed Roboto font using Font Forge software for the digit charachters only, since no such font existed before.

Beauty over Human Centric Design

The design took the longest and I iterated several times, before I was satisfied². For example, I attempted to use icons over words like "Now" and "Max", however

I wanted the dashboard to be look beautiful without much clutter.

So far I have not explained what some of the shapes/elements represent, and this is intentional, because I chose not to follow Human Centric Design.

“Human-centred design is a creative approach to interactive systems development that aims to make systems usable and useful by focusing on the users, designing around their needs and requirements at all stages, and by applying human factors/ergonomics, usability knowledge, and techniques. This approach enhances effectiveness and efficiency, improves human well-being, user satisfaction, accessibility and sustainability; and counteracts possible adverse effects of use on human health, safety and performance.” [ISO 9241-210:2010(E)].

Conveying the meaning of these shapes on the display without adding a legend or words is quite challenging.

Human Guessing Design

--- You are now entering a Roast-Friendly Area ---

So folks, I introduce:

“The goal of Human Guessing Design is to produce software products that pragmatically use space instead of adding clutter, it does so by strategically concealing the legend within other elements. The high priority elements act as clues or building blocks steer the user in the direction of understanding the meaning of other more lower priority elements. This process is carried from the very beginning of the development process. The moto is The legend is in the details”³/

I think this sort of design is similar to how video game first introduce a new mechanic to the player(usually in a tutorial).The first encounter of said mechanism includes many clues, and the number of clues in subsequent encounters follow an exponential decay curve.

Note, this is different from Bad Design, bad design doesn't take users into account. An example of bad design is in IOS where you have to shake your phone to undo keyboard entered text, seriously who thought this was a good idea when typing on your phone!

--- You are now leaving the Roast-Friendly Area ---

So can you guess?

Given this image:

• What do the continuous, dashed and filled lines in the graph represent?
• What is the colourful bar above the graph?
  • Can you guess the values these colours represent?
• Why does the Max24 column become italic sometimes?

A gif can be found in the main repo.

Feedback

Version 1: very minimal

• M: What is this thing dashboard?
• P: Looks at the Dashboard and says, "Wait I need glasses"

So what the client actually meant to say, the font is too small

• What are these values while pointing at the 2 large font values?
• "One is Celsius and the other is Fahrenheit"

So what the client meant to say, the values had no unit. I guess I can't assume the degree symbol ° refers to local temperature unit

Version 2: close to final

• M: Describe this thing to me?
• P: "Is this a Calendar"
• M: Why do you think it's a calendar?
• P: "Well there is a Date and these weekdays(Mon to Sun)"
• M: Sobbing internally, Could you please take more time with it
• P: "It tells me the weather"
• M: Ok, go one, what do you think these lines are while pointing at the graph
• P: "Humidity"
• M: :(
• M: Why do you think it's humidity
• P: "I'm too tired son, I've grown old"

Here I realised that I should have picked a different time to seek feedback

Compromises

• It displays the maximum value from the higher curve and the minimum from the lower curve, whether that's the actual or “feels like” temperature.
• The meaning of UV gradient bar is not obvious in winter when UV index is low and thus dominated by the Green colour.

Final

The Final Dashboard is an SVG file, which then gets rendered onto PNG. Overall, I'm very happy with it :)

---