Electronic ink devices are so lovely. They do not depend harsh backlight, they are readable in strong light conditions and it uses no energy once the screen content has been displayed.

And now that color eInk displays are coming, I hope to see more interfaces made with this technology.

In my home I have a eInk display to show content. I have created a Content Manager, that runs off a Raspberry Pi. With it I present new content on the display at certain times of the day. The content is mostly family photos and line art.

Below you can find what I do to ensure the content looks as good as possible of a 4 bit black and white eInk display.

Black and White Line Art

I love line art imagery presented on eInk displays as the contrast is just so pleasing. Which is why I had to find a way to convert my raster based images to vectors.

The solution is combining potrace with magick (ref. update 2 above) and/or mkbitmap (bundled with potrace).

Potrace is a command line tool that can batch convert your lineart to .svg files which can easily be displayed on the 4-bit display (I wrap them in an html file).

To install Potrace and ImageMagick on your Mac I highly recommend using the amazingly helpful Homebrew manager in the terminal:

brew install potrace
brew install imagemagick

With the software installed I ran the below command in the folder with all the line art that I wanted to show on the display. The result is pure black vector images that produces lovely crisp lines on the screen:

find *.gif -exec bash -c "magick {} -distort Resize 800% -level 20%,90% -morphology Erode Octagon -adaptive-resize 2048x1152 -density 94 pbm:- | potrace --svg --flat --tight -t 8 -r 94 -o {}.svg" \;

How It Works

The command processes each image in three steps (please let me know if you have a better approach):

1. First the relevant files are found, and passed to the command one by one, which is executed in bash:
2. Using magick, the image is prepared for vectorisation:
   • First, the image is scaled to 800%.
   • Then push the darkest pixels to black, and the brightest pixels to white. This parameter is worth some experimentation, as it depends very much on the image you are trying to trace.
   • Erode the edges, which basically means the black lines get a little bit thicker (this is the reason why I first increased the image to 800%).
   • Then the images is scaled down to the desired dimensions (which in my case includes a desired padding). If you want the art to cover the full screen, you should only have to replace the dimensions “2048×1152” with “2560×1440^” (without the quotation marks).
   • Finally, magick sets the DPI of the image to match the eInk display – approx. 94 dots per inch.
3. The resulting bitmap is piped to potrace as a grayscale bitmap so it can be traced.:
   • The output format is set to SVG using –svg.
   • The curves are all joined using –flat. The result is one large shape, instead of hundreds or thousands of smaller shapes. You may want to change that if you’ll be adjusting colors and such manually post-processing.
   • Then the empty margins around the output is removed using –tight.
   • Noise smaller than 8 pixels are removed with -t 8.
   • Resolution of the SVG is set to 94 DPI with -r 94.
   • Finally, the resulting image is saved as the original file name, with the .svg extension. I think I could have used regexp with the find command to avoid that.

And there you have it! Nice and crisp monochrome vector art, ideally suited for ePaper displays.

I’m still tweaking the image processing done by imagemagick. I fear there is not a single setting that works for all my comics. Ideally I would find some machine learning approach to finding the optimal settings for each strip to obtain the optimal result.

Optimise Color Photos

After some experimentation, I found out that the best way to prepare an image is to manually convert it to a 4-bit image before presenting it on the display.

First you’ll have to install imagick:

brew install imagemagic

After that you can open the Terminal and move to the folder containing the pictures and run the following. It will convert the entire folder with no fuzz:

find *.jpg -exec bash -c "magick {} -quiet -define dither:diffusion-amount=97% -resize 2560x1440^ -gravity center -crop 2560x1440+0+0 -grayscale Lightness -dither FloydSteinberg -colors 16 {}.png" \;

At least for my images, the output is a .png file with better dithering than what the Visionects software would present. The images are sharp, with no compression artefacts, and the file size is not too bad at all. Lovely!

How It Works

This command is used to batch process all .jpg images in the current directory, applying a series of transformations to each image and saving the result as a .png file.

Here’s a more high-level explanation:

1. Finding Files: It searches for all files ending in .jpg.
2. Executing a Command on Each File: For each .jpg file found, it executes a series of image processing commands.
3. Image Processing Steps:
   • Resizes the image to specific dimensions (2560×1440 pixels), ensuring it fills this size.
   • Crops the resized image to the exact dimensions from the center.
   • Converts the image to grayscale.
   • Applies a dithering effect to reduce the color range and create a visually appealing pattern.
   • Reduces the color palette to 16 colors.
4. Saving the Result: After processing, each image is saved as a .png file, keeping the original file’s name but changing the extension.

The command uses ImageMagick, a powerful tool for image manipulation, to perform these transformations in a single step for each file.

I hope you found this useful.

Johan

PS: You can read this post about how I setup a 32″ eInk display to show family photos, sketches and black and white line art.