32″ electronic ink on the wall

The Visionect 32" ePaper screen hanging on a wall

This is the first time I am doing anything with electronic paper, and a Raspberry Pi for that matter. Getting it all up and working was quite fun, though frustrating at times.

The Raspberry Pi’s are really very cool. With such an active community, it is easy to put them to good use.

The Visionect Place & Play 32″ is absolutely amazing. Having that much ePaper opens many doors as to what you can present on the screen. I’ll probably do another post on that later, but here is an example: a collection of info and puzzles for the kids every morning (fixed at the ratio of the display). It really looks great on the wall.

I should mention that Visionect offers a reasonably priced  Cloud Plan which will allow you to skip the entire set-up process below, and go straight to creating the content (more details in update 4 below).

By the way, I snapped the screenshot of Alba on my AppleTV by hooking it up to Xcode, then I added the logo and uploaded to the web page the screen uses for content. More about this at the bottom of this post.

Now, let’s get going!

BOM – Bill of Materials

  1. Visionect Place & Play 32″
  2. Flat to Wall Low Profile VESA Mount (Amazon).
  3. Micro SD card with minimum 8GB (32 GB Amazon).
  4. Raspberry Pi 3 Model B (PiHut).
  5. A Pi enclosure (FLIRC Raspberry Pi 3 Case, PiHut).
  6. A power adapter suitable for the Pi (5.1V with 1.2A).
  7. Power cable from power adapter to a micro-B USB plug.
  8. Wired keyboard & mouse via a single micro-B USB plug.
  9. HDMI to mini HDMI adapter/cable to setup the Raspberry Pi.
  10. A screen with HDMI port for the Pi.

I mounted the screen on a concrete wall, which meant I needed:

  1. Bosch PSB 500 RE Hammer Drill
  2. 10mm Masonry drill bit for the expansion plugs
  3. Screwdriver Bit Accessory Set for the wall mount screws
  4. A spirit level to and a marker to align the screen
  5. 9-10 mm machine screws for the VESA mount

The expansion plugs, and screws needed to put the wall mount on the wall came with the mount. But the screws that was intended for the screen didn’t fit, neither did the washers.

Links to visit from the Mac

  1. Visionect Place & Play 32″ product w/ specifications

Downloads for the Mac

  1. Visionect ePaper Screen Configurator
  2. The USB driver required to configure the screen
  3. SD Card formatter to prepare micro SD card

Links to visit from the Pi

  1.  Visionect Software Suite for the Pi

Wall mounting the Display

Boxed ePaper screen
32 inches of awesomeness

The display itself is quite handsome. However, I think at some point I might frame it so it blends better with the other picture frames I plan to hang around it.

The Place & Play 32″ is padded with cardboard. On top of the screen is a box (containing the USB cable) that matches the size and volume of the screen after it has been mounted on the wall. I used it to place the screen.

In the BOM you will find the thinnest wall mount I could find. However, the screws that came with it, were too long to fit the display – so you might want to buy a new set of 9-10 mm screws.

The holes in the screen for the VESA mount are 8 mm deep. The mount I bought had 1 mm thick components. Adding the washer (those that came with the mount didn’t fit the screws) you’ll want screws 7-10 mm long.

The mount itself is straight forward. To get the screen as close to the wall as possible, I decided to not use the nylon spacers that came with the mount.

To avoid damage to the wall I used the guards. They also ensured that the screen hung parallel to the wall. Very happy with the result.

The guard for the bottom screws prevents the wall from being damaged, however I didn’t need the spacer that was suppose to be below it.

Charging the display

To charge the screen you can use any power delivering micro-usb cable. I’m using the cable from the Xbox charging kit, as it’s long enough to reach the outlet while the screen hangs on the wall.

The connector is on the left hand side, with the widest part facing the screen.
The cable that come with a Ultimate Ears Wonderboom speaker is the perfect fit, as the distance from the back to the connector matches perfectly with the plug, letting you easily guide the plug in blind (while screen is on the wall).

Preparing the Raspberry Pi Software

I bought a Raspberry Pi 3, with a really nice FLIRC case (just in case the Pi stays visible).

First I formatted the 32GB micro SD card using the recommended tool from SDCard.org: https://www.sdcard.org/downloads/formatter/

Then I downloaded the official Raspberry PI Imager which when run, let me pick which operating system to clone. I picked the recommended variant at the top (2GB), but in retrospect I think I could have gotten away with the minimum installation (0.4GB).

In the imager I picked the OS installation, and the SD card, and pressed Write. The SD card was then ejected from the Mac and installed on the Pi (the case has an access port for the memory card).

Raspberry Pi Setup

With the SD card installed and ready in the Pi, I connected the Pi to the monitor using a HDMI cable, and my trusted wired Logitech Laser mouse and wired Apple keyboard to the Pi.

Finally I hooked the Pi up to power, which booted it up. Now it was time to prepare the required environment for the display.

The Visionect web page points Pi users to two different web pages:

  1. 32-bit ARM build of Visionect Server
  2. Visionect Software Suit for embedded boards

The first link provides the Visionect Software Suite, and the listing of a docker-compose file. First I started with updating the Pi:

sudo apt-get update && sudo apt-get upgrade

After that I installed docker and added my user to the docker group (as suggested at the end of the docker installation):

sudo curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh
sudo usermod -aG docker pi

Then from this page https://hub.docker.com/r/visionect/visionect-server-v3-armhf/ I got the command to pull the ARM version of the Visionect Software Suite:

sudo docker pull visionect/visionect-server-v3-armhf

Then I installed docker-compose:

sudo apt-get install docker-compose

To create the docker-compose.yml file I used nano on the Pi. First I changed directory to the Desktop, then launched the editor and simply pasted the content from the web page:

nano docker-compose.yml

Then I exited nano, which prompted me to save the the file. After that I ran the docker-compose command:

docker-compose up -d

The YAML installed the components and completed with no errors. Excellent!

If you do get an error however, you may need to restart your session (log out and back in again).

With the container installed and running I was now able to use the browser to access the Visionect Software Suit CMS (Content Management System) installed and running on the Pi by visiting the IP on port 8081 (I think the link provided in the Configurator after setup incorrectly provided port 8080):

http://×××.××.××.×××:8081

Updating VSS

When it is time to update the Visionect Software Suit CMS, only replace the Visionect container itself – and not the Redis nor Postgres containers.

I tried a full upgrade, and the resulting installation was not happy with the redis container, which kept crashing with signal 6 and 11:

1:M -12669 Jan 1970 -18:-21:-4.5611
# Redis 7.0.7 crashed by signal: 6, si_code: -6
1:M -12669 Jan 1970 -18:-21:-4.5611
# Crashed running the instruction at: 0xb6b477e6

1:M 01 Jan 1970 00:00:01.000
# Redis 7.0.7 crashed by signal: 11, si_code: 1
# Accessing address: 0x10 1:M 01 Jan 1970 00:00:01.000
# Crashed running the instruction at: 0x4f96c0

In the end, I restored the backup and decided to not upgrade the VSS, as no matter what I tried, the setup stopped working.

Minimum about Docker

To get the basic Docker information, you can run:

docker info

Look for Docker Root Dir to get the location of your docker containers. Your containers will be saved to the containers subfolder under the root directory. On the raspberry I am using the default storage driver overlay2, which apparently means that the Docker images are stored in /var/lib/docker/overlay2.

To verify Docker’s status run the following command, and look under the Active field:

sudo systemctl status docker

To stop a running Docker container, you will need to first obtain the container ID (add -a to the command below to see all containers, including those that are not currently running):

docker ps

The container ID is shown in the first column. Use it with the following command (replace the ×××× with the ID):

docker stop ××××

After you have stopped a container, your safest approach for removing it is by pruning. Run this command to remove all stopped and unused containers:

docker system prune -a

This will remove all content in the overlay2 and containers subfolders.

Configuring the Display

Now that the Pi backend was setup, I could configure the screen. For this I decided to use my Mac.

I hooked the display to my Mac with a type-C USB to a micro-B USB 2.0 cable certified by USB-IF (both power and data). The screen made a sound, which likely means it is charging (at least it does not mean a data connection is established, as I tried a non-data USB cable first which also triggered a sound when connected).

Then I downloaded the Visionect Configurator and installed it on the Mac, but the Place & Play 32" was not detected by the Mac. I sent an email to Visionect Support, but kept looking for answers – and found it in their FAQ (no troubleshooting section on their site):

MAC users may experience issues utilizing their USB ports when running the FTDI driver. This is due to an issue with the driver software. An update has been issued, resolving the problem.

The USB driver was outdated, but an updated version was available that was signed by Apple. I downloaded and installed the signed driver from the mentioned page, but the screen was still not detected. From my Windows days I learned that a system restart solves many problems, so tried it. When I launched the Visionect Configurator after the reboot, the display was detected immediately. Excellent!

I configured the screen to connect to the Raspberry Pi IP address. Additionally I reserved the IP address of both the Place & Play 32″ and Pi on the router, to avoid them changing.

Now that the Mac and screen were talking, and the screen setup to the best of my ability, I moved my focus to the Raspberry Pi.

Preparing Content

I decided to create a simple web page to show on the screen. So I created a HTML file showing a single edge-to-edge image:

<html>
	<head>
		<title>Benson 1.0</title>
		<style>
		body {
			margin: 0;
			padding: 0;
		}
		
		div {
			height: 100%;
			position: relative;
			background: white;
		}

		img.aspectFill {
			width:100%;
			height:100%;
			object-fit: cover;
			overflow: hidden;
		}

		</style>
	</head>
	<body>
		<div>
		<img src="./images/Alba.jpg" class="aspectFill"/>
		</div>
	</body>
</html>

To get a picture on the screen to show in this post, I connected my Mac to the AppleTV with a USB-C cable, launched Xcode and snapped a screenshot of Alba – a wildlife adventure. Then I added the Alba logo using Affinity Designer and uploaded it to the web server.

With the image in the images folder, I verified that the page worked in the browser. Then in the CMS I selected the device from the Devices list, then Change Content, Display web page – and filled in the URI.

Going back to the device level, I finally I tapped Refresh Content – and the screen updated!

I say this in the video comment, but it looks like the screen tries to refresh but fails, only to try again some seconds later. Could this be because the Raspberry Pi 3 is a bit slow to fill the image buffer on the screen?

And if you still haven’t played Alba with your kids, you really should! You learn about animals, get to help and do nice things, adventure on an island, and simply hang out. Love it!

And if you still haven’t watched Planes, Trains & Automobiles (1987) – then – what!? Get on that this evening. It’s a funny and heart warming comedy – or involuntary road movie with Steve Martin and John Candy.

Next I’ll setup a web server on the Pi itself, so I have everything running on the Pi. But those steps are straight forward, so no need to include them here.

Johan

Analytics

The Visionect software suit has some nice analytics to monitor battery, data transferrals, signal strength and so on.

After 58 days of using the screen the battery was down from 98% to 2% – which is far from the suggested 6 months.

The latest period started at 100% charge and dropped to 1% in exactly 70 days. The period before that was 53 days long.

Battery level and data transfer to display.

It’s interesting to see that since 16th of August, it appears like a lot less data has been transferred daily – despite no changes to the backend.

Update 1

Reducing Power Consumption

I reached out to Visionect who was more than happy to give me a call to help me setup the screen to reduce battery consumption. Now the screen goes to sleep between the image updates, and it really helped:

The charge increase in the middle there happened as I had to update the screen with new IP address and WiFi settings after installing a mesh network at home.

With the new backend settings, it seems like the power consumption has been reduced by 60% – very nice! Seems the screen might be running for more than 6 months without a recharge.

I am still not able to prevent the screen from doing “false” updates: the screen refreshes the content every hour despite the image being exactly the same (unchanged). Not sure why though, as Visionect ensured me it wouldn’t.

Hopefully I can get that sorted as well, so the battery profile is improved even further.

Update 2

Optimise Images

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. Lovely.

Update 3

Firmware Update

I have now been working for almost a year on my content manager that generates the content for the Place & Play 32″ display. But no matter what I did, the screen would do a refresh – despite the content being the same. This of course wastes energy, which means I’ll need to charge the battery more often than strictly necessary.

In my attempts to fix the false refresh I tried everything I could imagine. Eventually I gave up and reached out to Visionect, which promptly replied with a suggestion to update the firmware of the display. Having failed twice to update the Visionect Software Suit (VSS) I feared that updating the firmware and not VSS would create issues, but I was assured it would be smooth sailing. And they were right – the update was applied and nothing broke.

Now I am using Sleep Manager to put the display to sleep between updates. Every hour it wakes up, and only if there is new content – will it get pushed to the display to trigger an update.

Before, the battery would drop by 10% after 25 updates. Here you can see the power consumption before and after the firmware update:

After the firmware update the battery has only dropped 5% in about 60 days, which suggests that the screen will only need to be charged every 3 years. Nice!

At this rate, the display battery will last almost 6 times longer than before; from 6 to 36 months! Now this is truly Place & Play!

Improving Lineart Images

Since I love line art imagery on the Place & Play 32″—the contrast is just so pleasing—I had to find a way to convert raster 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 is easily installed using the amazingly helpful Homebrew manager in the terminal:

brew install potrace

Then you 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).

I ran this 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" \;

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 which is executed in bash:
  2. Using magick, the image is prepared for vectorisation:
    • First, the image is scaled to 800%.
    • 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 to 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.

Update 4

Getting started with the Visionect Place & Play displays now seems to be easier, as I think their online documentation has improved.

I have not tried this myself, but I think you might have a smoother ride than I had by following this: Getting Started with Place & Play.

Alternatively you can use their cloud subscription, which ensures you are always running on the latest software—which if you read my experience above—can have a big impact on the use and milage of the display. Check out the details on the Visionect web page.

As an alternative to the online Cloud Plan, you have the Essential Plan which enables on-site installation of their software (needed to pre-process and deliver the content to the display).

Leave a comment