Infinite Wishes: ♾️🧞‍♀️✨

Is a weblog by Emma Humphries

An eInk calendar for Raspberry Pi

28 Dec 2020

Photo of eInk display of calendar
Credit: Photo by the author

I wanted a simple desk calendar. Like the ones you’d get from the buisnesses you traded with over the previous year.

A photo of a paper calendar for 2016 from the Tasty Crust restaurant in Wailuku, Maui, Hawai'i

I had an eInk display which would work with a Raspberry Pi. Generating the calendar page as HTML and sending a screenshot to the eInk display was appealing to me, so after finding useful note on using CSS grid to display a calendar, I extended on it to make a calendar generator.

The generated HTML is intended for display on an eInk display, via a screen capture by running a browser on the command line, or a screenshot service.

The CSS on this project is optimized for display on Pimoroni’s seven-color eInk display for the Raspberry Pi.

Generating the calendar

Browsers have HTML and CSS engines we can use to lay out the calendar for us.

Start with three-line layout using CSS Grid where you wrap a list in a container with display: grid set on it, and format the list as a seven column display.

<div class="calendar-wrapper">
    <h1>December 2020</h1>
    <ul class="calendar">
    <li class="weekday">Sun</li>
    ...
    <li class="weekday">Sat</li>
    <li class="last-month">29</li>
    <li class="last-month">30</li>
    <li class="">1</li>
    ...
    <li class="">31</li>
    <li class="next-month">1</li>
    ...
    </ul>
</div>

Instead of frameworks, the JavaScript uses native date functions to figure out the current date (as determined by the system running the browser,) the start, end, and previous/next month’s overlapping dates. The calendar markup is generated using JavaScript template strings.

Starting from the current day:

var today = new Date();
var first = new Date(today.getFullYear(), today.getMonth(), 1);
var DoW   = first.getDay();

then you can check if DoW is a Sunday, and fill in the days from the previous month which fall in the first week accordingly. And yes, if you use a calendar that starts weeks on Monday, you may want to make a fix and submit a patch to the project on GitHub.

Adding a custom background, different typography, or even date-sensitive styling is a straightforward extension of the project. Other things to try would be to fetch personal or household calendar items and merge the data in with the calendar grid.

You can see the code in a Glitch project and at 7-calendar-cafe.glitch.me/. Patches are accepted on GitHub.

URL parameters

This project accepts the optional query string parameter month which can take on the value previous and next to display the calendar for the previous and next months.

The current date is highlighted when the calendar is displayed.

Using with eInk Display

If you have an eInk display is attached to a Pi or other device and the necessary drivers and libraries are installed, you can fetch a screenshot with the current calendar using Firefox:

firefox --headless --screenshot --window-size=600,448 'https://7-calendar-cafe.glitch.me/'

You need to be specific about the --window-size parameter for the dimensions of your eInk display’s screen.

You’ll need a script (in this case Python) which works with the Pimoroni eInk display’s libraries:

#!/usr/bin/env python3

import sys

from PIL import Image
from inky.inky_uc8159 import Inky

inky = Inky()
saturation = 0.5

image = Image.open("/home/pi/screenshot.png")

inky.set_image(image, saturation=saturation)
inky.show()

And a bash script can run the process daily once you set up crontab entries for it. You’ll want to run the script at startup and at least once a day.

cd $HOME bash
firefox --headless --screenshot --window-size=600,448 "https://7-calendar-cafe.glitch.me/"
./calendar.py

Since the idea behind eInk is to only update when you need to, using a whole Raspberry Pi (even a Pi Zero W) feels like one’s over specified the hardware for the project.

I’m not sure if a Pi Zero W can run Firefox, if you’re using one to drive the eInk display, you might want to use a screenshotting service in the workflow.

However, that Pimoroni display has buttons you can program, and using them will be the next version of this project.

Show off your mods with the hashtag #SevenCalendarCafe on Twitter and the Fediverse.

The project’s title is a nod to both the Pimoroni Inky Impression and The Cocteau Twins.

Replies to this post are welcome. You can send an email, or a WebMention. Be kind, not clever.

Send a WebMention