32″ ePaper 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. Setting it up was quite straight forward. These Raspberry Pi’s are quite cool and fun to setup and use.

The ePaper screen is so choice. If you have the means, I highly recommend picking one up.

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.

BOM – Bill of Materials

  1. Visionect 32″ ePaper screen (Visionect).
  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 32″ ePaper Screen spec

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 ePaper

Boxed ePaper screen
32 inches of awesome ePaper

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

The ePaper screen 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 ePaper screen – 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. The washers didn’t fit inside so they guards are a bit loose, but as they only provide padding, it doesn’t matter.

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 ePaper screen.

Visionect ePaper CMS

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

Now with a browser I could access the Visionect Software Suit, the CMS (Content Management System) provided and installed on the Pi by visiting the IP on 8081 (I think the link provided in the Configurator after successfully setup incorrectly used port 8080):

http://xxx.xx.xx.xxx:8081

Configuring the ePaper

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

I hooked the ePaper screen to my Mac with a type-C USB to a micro-B USB 2.0 cable certified by USB-IF for both power and data (the accompanying USB cable is type-A). 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).

Then I downloaded the Visionect Configurator and installed it on the Mac, but the ePaper was not detected by the Mac. I shot off 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.

https://start.visionect.com/FAQTroubleshooting.html#q-i-cant-connect-my-device-to-the-computer-using-the-provided-usb-configuration-cable-and-the-visionect-configurator-what-could-be-the-problem

The USB driver was outdated, and 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 ePaper screen 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 ePaper 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 page.

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 need to include them here.

Johan

Leave a comment