[{"_1":2,"_22":-5,"_23":-5},"loaderData",{"_3":4},"routes/home",{"_5":6},"notes",[7],{"_8":9,"_10":11,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21},"slug","iot-eink-screen","title","Making my own e-paper board","updated","2025-10-19","tag","IoT","content","# Making my own e-Paper home board\n\nWhen I moved to Sweden, I fell in love with those e-paper displays at bus stops. Fast forward to summer of 2025, and I remembered I had a [Pi Zero W](https://www.electrokit.com/raspberry-pi-zero-2-w) collecting dust.\n\nSo first step, was figuring out how these displays work. I ended up ordering the [e-Paper hat screen](https://www.electrokit.com/2.7e-papper-hat-svart/vit) which can be easily attached to a raspberry pi. You will save a lot of time with these screens from [WaveShare since they have their libraries easily accesible](https://github.com/waveshareteam/e-Paper).\n\n![Digital skyld](/notes-imgs/2025-10-19-skyld.jpeg)\n\n## The hardware\n\nAttaching the display to the raspberry is very simple. The raspberry pi has a HAT interface. This is a series of inputs and outputs that allow you to attach and connect other hardware safely.\n\nYou will need either an external power supply or batteries with a booster/limiter to 5V.\n\n## The software\n\nYou can find in my [GitHub the source code](https://github.com/fede/diy-digital-skylt). It is a little bit messy since it has been a long time I've used Python and first time creating a bitmap with it.\n\n### main.py\n\nIn this file you will find what creates the bitmap. I'll explain part by part how it works so it is easy for you to experiment and update.\n\nIn the following snippet you will find the `imports`, we load, if it exists, the `.env` file with your own variables. And we set where we are temporarily saving the bitmap.\n\n```python\nimport sys\nimport os\nimport json\nimport requests\n\nfrom dotenv import load_dotenv\n\nload_dotenv()\n\nlibdir = os.path.join(os.path.dirname(os.path.realpath(__file__)), 'lib')\nfrom PIL import Image, ImageDraw, ImageFont\nfrom datetime import datetime\nif os.path.exists(libdir):\n sys.path.append(libdir)\n\nfrom waveshare_epd import epd4in26\n\nAPI_URL = os.getenv(\"API_URL\", \"http://localhost:3000/display\")\nAPI_KEY = os.getenv(\"API_KEY\", \"your_auth_key_here\")\n\nDUMP_BMP_PATH = \"/tmp/dump.bmp\"\n```\n\nThe `API_URL` is from where we are retrieving the payload to render the bitmap. That API runs in another file that I'll explain after.\n\n```python\ndef fetch_api_response():\n headers = {\"Authorization\": f\"Bearer {API_KEY}\"}\n try:\n response = requests.get(API_URL, headers=headers, timeout=20)\n response.raise_for_status()\n return response.json()\n except Exception as e:\n print(f\"API fetch error: {e}\")\n return None\n\ndef get_buses(api_response):\n return api_response.get(\"buses\", []) if api_response else []\n\ndef get_weather(api_response):\n return api_response.get(\"weather\", {}) if api_response else {}\n\ndef get_calendar(api_response):\n return api_response.get(\"calendar\", {}) if api_response else {}\n```\n\nThe function `fetch_api_repsonses()` fetches from the API a single JSON and then selects the different keys with the information we will display.\n\nAfter this we define the size of our bitmap, where we are positioning different elements and also you will find some mappings of unicode emoji's.\n\n```python\nWIDTH, HEIGHT = 800, 480\nLEFT_MARGIN = 20\n// ...\nICON_TWILIGHT = \"\\uE1C6\"\nICON_SUN = \"\\uE81A\"\n```\n\nOne very good advantage of doing a bitmap instead of just sending text to the screen is the fact that we can use whatever font we want. This is not possible when using the screen directly because it just has some basic fonts loaded.\n\n```python\ntry:\n FONT_LARGE = ImageFont.truetype(os.path.join(libdir, \"fonts/NotoSans-Regular.ttf\"), 42)\n FONT_MEDIUM = ImageFont.truetype(os.path.join(libdir, \"fonts/NotoSans-Regular.ttf\"), 34)\n// ...\n FONT_EMOJI_SMALL = ImageFont.truetype(os.path.join(libdir, \"fonts/NotoEmoji-VariableFont_wght.ttf\"), 30)\nexcept:\n FONT_LARGE = FONT_MEDIUM = FONT_SMALL = FONT_BOLD_LARGE = FONT_BOLD_MEDIUM = FONT_BOLD_SMALL = ICON_LARGE = ICON_MEDIUM = ICON_SMALL = ImageFont.load_default()\n```\n\nNow time for the different sections / contents of the screen:\n\n```python\ndef draw_buses(draw, buses):\n y = TOP_MARGIN\n for bus in buses[:3]:\n row_left = LEFT_MARGIN\n// ...\n\ndef draw_separator(draw):\n line_y = Y_OFFSET_BOTTOM_CONTENT-20\n draw.line([(LEFT_MARGIN, line_y), (WIDTH - RIGHT_MARGIN, line_y)], fill=\"black\", width=2)\n\ndef draw_weather(draw, weather):\n temp_text = f\"{weather['current_temp']}\"\n wind_text = f\"{weather.get('wind_condition', '')}\"\n// ...\n\ndef draw_calendar(draw, calendar):\n right_x = WIDTH // 2 + 10\n event_title = calendar.get('event_date', '')\n// ...\n\n```\n\nIf you want to modify how any of the sections look or the data looks you shoud look into those functions.\n\nThe other functions are helpers for identifying emojis and replacing unicode\n\n```python\ndef is_emoji(char):\n codepoint = ord(char)\n return (\n 0x1F600 <= codepoint <= 0x1F64F or # emoticons\n//...\n\ndef draw_mixed_text(draw, pos, text, font, emoji_font, fill=\"black\"):\n x, y = pos\n// ...\n\n```\n\nAnd then the execution of everything, drawing, and uploading to the screen.\n\nThe `epd` is the main controller library of your screen, after updating it, you send a `sleep()` command that closes the GPIO, this way you avoid wasting energy keeping the channel open.\n\n```python\ndef main():\n api_response = fetch_api_response()\n buses = get_buses(api_response)\n// ...\n\nif __name__ == \"__main__\":\n main()\n epd = epd4in26.EPD()\n// ...\n```\n\n### api-server.py\n\nThis is a simple http server that returns your sources already formatted. My recommendation is that unless you want to display different type of information, you keep the same payload. This way you don't have to update the previous file as well.\n\nThe **weather** API is free (rate limited) from [open-meteo](https://open-meteo.com/).\n\nSince I live in Sweden, I use the **public transport** API provided by [Trafiklab](https://www.trafiklab.se/), kudos to these people, the API is amazing.\n\nFor **calendar events** I use iCloud, I have a shared calendar with my girlfriend for our common events and is very easy to consume it. I'm guessing it would be the same with Google or any other calendar that supports WebDAV.\n\nYou can run the server in the same RPI or somewhere else.\n\n## The case\n\nYou can find the [STL files](https://www.printables.com/model/1408332-e-ink-e-paper-digital-board-case/files) in my printables profile. If you want a variation and don't know how to do it, let me know maybe I can help you.\n\nIt is very simple to assemble it, to accomodate where the PI seats you can just use the screws from the HAT. And to close it you will need a couple of M3 screws.\n\nThe design is based on the marvelous old Braun designs.\n\n![Digital skyld](/notes-imgs/2025-10-19-braun.jpg)\n\n## What is next\n\nI want to add a `C` written script that maybe does everything. If I had to do it again I would instead use a ESP32. I would not buy a RPI for this, but this PI is so unstable that it didn't serve the purpose I originally bought it for.\n","compiledSource","

Making my own e-Paper home board

When I moved to Sweden, I fell in love with those e-paper displays at bus stops. Fast forward to summer of 2025, and I remembered I had a Pi Zero W collecting dust.

So first step, was figuring out how these displays work. I ended up ordering the e-Paper hat screen which can be easily attached to a raspberry pi. You will save a lot of time with these screens from WaveShare since they have their libraries easily accesible.

$\"Digital$

The hardware

Attaching the display to the raspberry is very simple. The raspberry pi has a HAT interface. This is a series of inputs and outputs that allow you to attach and connect other hardware safely.

You will need either an external power supply or batteries with a booster/limiter to 5V.

The software

You can find in my GitHub the source code. It is a little bit messy since it has been a long time I've used Python and first time creating a bitmap with it.

main.py

In this file you will find what creates the bitmap. I'll explain part by part how it works so it is easy for you to experiment and update.

In the following snippet you will find the imports, we load, if it exists, the .env file with your own variables. And we set where we are temporarily saving the bitmap.

import sys\nimport os\nimport json\nimport requests\n\nfrom dotenv import load_dotenv\n\nload_dotenv()\n\nlibdir = os.path.join(os.path.dirname(os.path.realpath(__file__)), 'lib')\nfrom PIL import Image, ImageDraw, ImageFont\nfrom datetime import datetime\nif os.path.exists(libdir):\n    sys.path.append(libdir)\n\nfrom waveshare_epd import epd4in26\n\nAPI_URL = os.getenv(\"API_URL\", \"http://localhost:3000/display\")\nAPI_KEY = os.getenv(\"API_KEY\", \"your_auth_key_here\")\n\nDUMP_BMP_PATH = \"/tmp/dump.bmp\"\n

The API_URL is from where we are retrieving the payload to render the bitmap. That API runs in another file that I'll explain after.

def fetch_api_response():\n    headers = {\"Authorization\": f\"Bearer {API_KEY}\"}\n    try:\n        response = requests.get(API_URL, headers=headers, timeout=20)\n        response.raise_for_status()\n        return response.json()\n    except Exception as e:\n        print(f\"API fetch error: {e}\")\n        return None\n\ndef get_buses(api_response):\n    return api_response.get(\"buses\", []) if api_response else []\n\ndef get_weather(api_response):\n    return api_response.get(\"weather\", {}) if api_response else {}\n\ndef get_calendar(api_response):\n    return api_response.get(\"calendar\", {}) if api_response else {}\n

The function fetch_api_repsonses() fetches from the API a single JSON and then selects the different keys with the information we will display.

After this we define the size of our bitmap, where we are positioning different elements and also you will find some mappings of unicode emoji's.

WIDTH, HEIGHT = 800, 480\nLEFT_MARGIN = 20\n// ...\nICON_TWILIGHT = \"\\uE1C6\"\nICON_SUN = \"\\uE81A\"\n

One very good advantage of doing a bitmap instead of just sending text to the screen is the fact that we can use whatever font we want. This is not possible when using the screen directly because it just has some basic fonts loaded.

try:\n    FONT_LARGE = ImageFont.truetype(os.path.join(libdir, \"fonts/NotoSans-Regular.ttf\"), 42)\n    FONT_MEDIUM = ImageFont.truetype(os.path.join(libdir, \"fonts/NotoSans-Regular.ttf\"), 34)\n// ...\n    FONT_EMOJI_SMALL = ImageFont.truetype(os.path.join(libdir, \"fonts/NotoEmoji-VariableFont_wght.ttf\"), 30)\nexcept:\n    FONT_LARGE = FONT_MEDIUM = FONT_SMALL = FONT_BOLD_LARGE = FONT_BOLD_MEDIUM = FONT_BOLD_SMALL = ICON_LARGE = ICON_MEDIUM = ICON_SMALL = ImageFont.load_default()\n

Now time for the different sections / contents of the screen:

def draw_buses(draw, buses):\n    y = TOP_MARGIN\n    for bus in buses[:3]:\n        row_left = LEFT_MARGIN\n// ...\n\ndef draw_separator(draw):\n    line_y = Y_OFFSET_BOTTOM_CONTENT-20\n    draw.line([(LEFT_MARGIN, line_y), (WIDTH - RIGHT_MARGIN, line_y)], fill=\"black\", width=2)\n\ndef draw_weather(draw, weather):\n    temp_text = f\"{weather['current_temp']}\"\n    wind_text = f\"{weather.get('wind_condition', '')}\"\n// ...\n\ndef draw_calendar(draw, calendar):\n    right_x = WIDTH // 2 + 10\n    event_title = calendar.get('event_date', '')\n// ...\n\n

If you want to modify how any of the sections look or the data looks you shoud look into those functions.

The other functions are helpers for identifying emojis and replacing unicode

def is_emoji(char):\n    codepoint = ord(char)\n    return (\n        0x1F600 <= codepoint <= 0x1F64F or  # emoticons\n//...\n\ndef draw_mixed_text(draw, pos, text, font, emoji_font, fill=\"black\"):\n    x, y = pos\n// ...\n\n

And then the execution of everything, drawing, and uploading to the screen.

The epd is the main controller library of your screen, after updating it, you send a sleep() command that closes the GPIO, this way you avoid wasting energy keeping the channel open.

def main():\n    api_response = fetch_api_response()\n    buses = get_buses(api_response)\n// ...\n\nif __name__ == \"__main__\":\n    main()\n    epd = epd4in26.EPD()\n// ...\n

api-server.py

This is a simple http server that returns your sources already formatted. My recommendation is that unless you want to display different type of information, you keep the same payload. This way you don't have to update the previous file as well.

The weather API is free (rate limited) from open-meteo.

Since I live in Sweden, I use the public transport API provided by Trafiklab, kudos to these people, the API is amazing.

For calendar events I use iCloud, I have a shared calendar with my girlfriend for our common events and is very easy to consume it. I'm guessing it would be the same with Google or any other calendar that supports WebDAV.

You can run the server in the same RPI or somewhere else.

The case

You can find the STL files in my printables profile. If you want a variation and don't know how to do it, let me know maybe I can help you.

It is very simple to assemble it, to accomodate where the PI seats you can just use the screws from the HAT. And to close it you will need a couple of M3 screws.

The design is based on the marvelous old Braun designs.

$\"Digital$

What is next

I want to add a C written script that maybe does everything. If I had to do it again I would instead use a ESP32. I would not buy a RPI for this, but this PI is so unstable that it didn't serve the purpose I originally bought it for.

","frontmatter",{"_10":11,"_14":15,"_12":13},"actionData","errors"]

Fede Ratier

Notes

Making my own e-paper board