Maker.io main logo

Preparing Graphics for E-Ink Displays

2019-09-12 | By Adafruit Industries

License: See Original Project

Courtesy of Adafruit

Guide by Phillip Burgess

Overview

What’s old is new again.

Back in the early Macintosh computer days, when the Earth’s crust was still cooling, getting photos and artwork to look presentable on these computers’ 1-bit monochrome displays was something of an art form.

team_1

Easter egg from Macintosh SE ROM — one of four development team photos

Much of that know-how has fallen by the wayside as screens improved…but with wafer-thin, ultra-low-power 2- and 3-color E-Ink displays appearing everywhere now, a refresher in those techniques is suddenly relevant again.

display_2

A couple of software options are shown in this guide. ImageMagick (a free command-line tool) and Photoshop (not free, but many folks already have it).

software_3

Convert with ImageMagick

Setting Up

ImageMagick is a command-line tool for image conversion and processing. The software feels a bit anachronistic because it has no GUI…but to its credit it does a fantastic job, is available for Windows, Mac and Linux, and is entirely free so everyone has a shot at using it.

Installing ImageMagic varies by platform and is beyond the scope of this guide, so head over to the ImageMagick download page for guidance on setting up the software.

Regardless of platform or installation procedure, in the end you will be working from the command line and typing things in…that’s just how it works. This means you’ll likely be using the Command Prompt in Windows, Terminal in macOS or Linux.

After ImageMagick is installed, download these two PNG images to your computer and stash them away for safe keeping. You’ll need them later:

2color_4

3color_5

Working the Magic

Source images can be most any format. We’ll ask ImageMagic to output everything as .BMPs, because that’s what CircuitPython works with…it’s a relatively easy image format for microcontrollers to handle.

We’ll assume your source image(s) are already sized for the e-ink display. ImageMagick does have scale and crop functions, but that’s a whole added layer of complexity…you’ll probably have an easier time using GUI tools, most operating systems have something basic included. But if you really need it, refer to the ImageMagic documentation for image resizing.

Put the image(s) you want to convert and the eink-*.png images in the same directory, then “cd” to that directory. (These could be in separate directories, but you’ll need to specify relative paths in that case…we’re keeping this example simple for command line novices.)

Supposing your source image is called “input.jpg,” and you want to create “output.bmp,” you’d type:

Download: file

Copy Code
convert input.jpg -dither FloydSteinberg -define dither:diffusion-amount=85% -remap eink-3color.png -type truecolor output.bmp

If using a monochrome (black & white) e-ink display, substitute eink-2color.png for the -remap argument.

Diffusion dithering used here gives us the most bang-for-buck in most cases.

Try different dither:diffusion-amount=X% settings until you find the right compromise between “too contrasty” (lower values) and “too snowy” (higher values). This is very subjective, and the ideal setting will vary from image to image! Also, this setting is only available in recent releases of ImageMagick…older versions only work at 100%. If you have an old version 6 installation, this might be the time to upgrade.

Too-low_6

Too-low diffusion amount makes lighter areas “blown out.” (60%).

80_7

80% seems a good diffusion amount for this image.

100_8

100% has the smoothest transitions, but very “snowy” throughout.

Special Cases

A couple of alternate dither settings might be useful in certain situations…

Ordered dithering uses a structured pattern. It’s usually not the best for photos, as it tends to lose edge details, but may provide a “clean” look for flat artwork and diagrams:

Download: file

Copy Code
convert input.jpg -ordered-dither o8x8 -remap eink-3color.png -type truecolor output.bmp

In place of “o8x8”, you can try “o4x4” and “o2x2” for different (sometimes cleaner) results.

ordered_9

Ordered dither is not great for photos, maybe good for artwork.

You can also disable dithering altogether, which may be useful for text, high-contrast line art and 1980s Patrick Nagel prints:

Download: file

Copy Code
convert input.jpg -dither None -remap eink-3color.png -type truecolor output.bmp

 

nails_10

BRB, getting my nails done.

While ImageMagick does have other dithering options, they tend to look best for ultra-high-DPI printed matter and are not well suited for these displays. We’ll not cover them here.

Some displays operate natively in a “portrait” orientation (tall vs wide). If your source image is in the opposite orientation, you have two choices…

1. In your CircuitPython code, instruct the display to use a different rotation setting, e.g.:

Download: file

Copy Code
display.rotation = 1

(try 0, 1, 2, or 3)

2. Alternately, leave the code unchanged and rotate the image using ImageMagick, in which case you would add the following before the output filename:

Download: file

Copy Code
-rotate 90

Use 90 to rotate the image clockwise, or -90 to rotate counterclockwise.

Convert with Photoshop

Adobe Photoshop is not inexpensive. But if you’re fortunate enough to already have it, this does make conversion a bit simpler.

To begin, download and unzip these Photoshop color tables:

eink-palettes.zip

Your source image should be in RGB mode (ImageModeRGB) if it isn’t already. Use the Image Size and/or crop tools to match the dimensions of your image(s) to your e-ink display.

Then we’ll do the e-ink conversion using Image→Mode→Indexed Color…

From the “Palette:” menu, select “Custom…” then click the “Load…” button to import one of the color tables from the ZIP you downloaded above. Use “eink-3color” to process images for 3-color displays, “eink-2color” for monochrome (black & white) displays.

palette_11

Then experiment with settings in the Options pane to get the effect you desire (keep the “Preview” box checked to see the results interactively).

index_12

Diffusion dithering used here gives us the most bang-for-buck in most cases.

Try different “Amount” settings until you find the right compromise between “too contrasty” (lower values) and “too snowy” (higher values). This is very subjective, and the ideal setting will vary from image to image!

too-low_13

Too-low diffusion amount makes lighter areas “blown out.” (60%).

80_14

80% seems a good diffusion amount for this image.

100_15

100% has the smoothest transitions, but very “snowy” throughout.

Special Cases

A couple of alternate dither settings might be useful in certain situations…

Pattern dithering uses a uniform dot arrangement. It’s usually not the best for photos, as it tends to lose edge details, but may provide a “clean” look for flat artwork and diagrams:

pattern_16

Pattern dither is not great for photos, maybe good for artwork.

Unlike ImageMagick (explained on the prior page), Photoshop just has one pattern dither setting, there are no available tweaks.

The “None” dither setting may be useful for text, high-contrast line art and 1980s Patrick Nagel prints:

BRB_17

BRB, getting my nails done.

Photoshop also has a “Noise” dither setting — it looks okay for ultra-high-DPI printed matter but is not well suited for these displays.

Once you have a satisfactory conversion, it’s necessary to change the color mode back to RGB (Image→Mode→RGB Colordon’t simply Undo, we need the dithered version in RGB mode, not the original image), then select File→Save As… and use BMP (24 bit) as the file format. That’s what CircuitPython works with…it’s a relatively easy image format for microcontrollers to handle.

bmp_18

Some displays operate natively in a “portrait” orientation (tall vs wide). If your source image is in the opposite orientation, you have two choices…

1. In your CircuitPython code, instruct the display to use a different rotation setting, e.g.:

Download: file

Copy Code
display.rotation = 1

(try 0, 1, 2, or 3)

2. Alternately, leave the code unchanged and rotate the image using Photoshop:

Image→Image Rotation→90° Clockwise or

Image→Image Rotation→90° Counter Clockwise

Then save as a 24-bit BMP as described above.

TechForum

Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.

Visit TechForum