Driving an E-Paper Display with an ESP32

0:00From eBook readers to those digital price tags at the grocery store, you've likely come across

0:05e-paper displays. Today, I'm going to show you how to get one up and running with an ESP32. But

0:11first, let's find out how this amazing piece of tech actually works. So, let's get started and

0:17put one under a microscope to find out. Under the lens, we can see randomly scattered tiny bubbles.

0:26Inside each of these is a clear fluid filled with millions of electrically charged particles,

0:31specifically white titanium dioxide and black carbon. These sit on a grid made of millions of

0:37individual pixel electrodes. On top, we have a transparent conductive cover. Now, here's where

0:44the magic happens. When the electrode underneath applies a positive charge, the negatively charged

0:50white particles are pulled down to the bottom. At the same time, the oppositely charged black

0:55particles are repelled and float up towards the top. That's what creates a dark spot on your

1:00screen. The best part is that even if we take the charge away, those particles just stay suspended

1:06right where they are. By applying extremely short electrical pulses, the controller can

1:12stop particles mid-flight. Because the internal fluid is highly viscous, the particles remain

1:18in a mixed state between top and bottom which our eyes see as gray. You can also buy e- ink displays

1:25with three or more colors. Along with black and white, these use larger heavier color pigments

1:31stored in tiny hexagonal structures called micro cups. Because of their higher mass and size,

1:37they move much more slowly than the black particles. So the smaller black particles easily

1:42surpass them and reach the surface first resulting in a black spot. However, we can isolate the third

1:49color by rapidly alternating the electric field. Then the lighter black and white particles are

1:54whirled around in the fluid while the sluggish color particles remain relatively unaffected,

2:00allowing them to slowly migrate to the surface and take over the pixel. So, unlike black and white

2:07displays, color displays take longer to update than black and white ones, and the timing is also

2:13more complicated. But don't worry, you don't have to deal with any of that. The display's firmware

2:19handles it all for you. The more colors an e-paper has, the longer it takes to update. The four color

2:25e-paper you see here needs about 40 seconds for a full refresh. It kind of reminds me of a Polaroid

2:31photo developing. Anyone who grew up before the 2000s knows what I mean. e-paper panels are

2:38connected to the driver circuits through a 24 pin FPC pigtail. Here's a pin out. They are typically

2:45controlled via SPI. It's also necessary to provide both positive and negative driving voltages,

2:52usually around 25 volts, to generate the electric field that moves the particles. This is usually

2:58handled by a boost converter circuit. And if you want to drive the e-paper with 5V TTL devices

3:04like AVR based Arduinos, you also need this level shifter and a voltage regulator. Since

3:10e-paper panels accept only 3.3 volts for both supply and input signals, no worries,

3:16you don't have to solder this yourself. This is why manufacturers offer ready to go driver

3:22boards like this Waveshare e-paper driver head. It fits perfectly onto Raspberry Pi 0, but thanks to

3:29the included breakout cables, you can use it with pretty much any microcontroller that speaks SPI.

3:38And you can minimize wiring even more. Waveshare also sells a development board that integrates

3:44an ESP32 or the circuitry needed to drive an e-paper. Just connect it to the pigtail and you're

3:51ready to go. or you can simply choose an e-paper module with the driver head already integrated.

3:59But if you decide to build all the electronics yourself, this is where my longtime partner PCB

4:05way comes in. Building circuits on messy breadboards can get frustrating. So why

4:10not order a custom PCB instead? Just design your layout, send them the Gerber files, specify your

4:17requirements, and a few days later the boards will arrive. I really like the quality of the PCBs,

4:24which is why I enjoy working with PCB Way. Soldering is always fun and done in no time,

4:30even for beginners. And PCB Way not only makes PCBs, they also offer CNC machining, sheet

4:37metal fabrication, 3D printing, and injection molding. Everything you need for your projects

4:43in one place. So, give them a try. Okay, let's get an image onto this 7.5 in display. I've got

4:53it connected to the e-paper head and an ESP 32. To figure out the next steps, just head over to

5:00the Wave Share Viki. You'll find all the displays there sorted by size. Just find your model and

5:06give it a click. This brings us to its manual. By clicking on the tiles, we can jump directly

5:12to the section where the configuration for each platform is explained. It starts with instructions

5:18for Raspberry Pi. But of course, there are also guides and examples for Arduino, Jetson Nano and

5:26related and also SDM32 boards. However, the ESP32 and A266 are missing there. Instead,

5:36when we expand it, we find two links that bring us to the documentation for their driver boards.

5:43The ESP32 driver board contains both the driver circuits for the e-paper and the ESP32 chip.

5:50You don't need to buy it if you already have an e-paper head and a deaf module like I do.

5:56Just hook up the pins like shown in the table and you're good to go. It works exactly the

6:01same. The newer revision 2.3 has an additional pin that isn't mentioned here. So, what does

6:08that extra pin actually do? Let's have a look at the schematic again. When you tie it to VCC, the

6:14high-side switch Q31 turns on and supplies power to the e-paper and the rest of the board. But when

6:21you pull that pin down to ground, the switch cuts the supply voltage off and the quiet send current

6:27drops to almost zero. So pull that pin to VCC when the display should be updating and to ground

6:33when it's idle. For our test, we'll connect it to the enable pin of the ESP32 DEF module. That pin

6:43is permanently pulled to 3.3 volts through a 10 kiloohm resistor and pull to ground whenever you

6:49press the reset button. On both the driver board and the driver head, there's a small switch that

6:54sets the driving voltage for the color particles. The table shows the correct position for your

7:00specific display. If it's set wrong, you'll get low contrast or some pretty strange behavior.

7:06For the 7.5 in e- paper, that switch needs to be in position B. There's a second switch that

7:13lets you choose between three line and four line SPI. Set it to position zero for four line SPI,

7:19even though in our case we're only using three of the four lines. Now that everything's set up,

7:26let's run one of the examples. Click the download link and save the seven zip archive. Inside you'll

7:34find three different examples. We are going to start with the first one. So just copy the folder

7:40into your Arduino's project directory and open the sketch. Once it's open, just click over to

7:47the tab for the header file named srvh.h. This is where you'll configure your SSID, password,

7:55and IP address to match your local network. Once that's done, just hit compile and upload.

8:04The sketch hosts a web server right on the ESP32 that you can reach under the IP address we just

8:10set up. On the sidebar, find and check your display. Then drag your image file right in.

8:18Just a quick heads up, your image needs to match the display's resolution exactly since this demo

8:24won't scale it for you. If you click one of the buttons on the left, you can convert the image

8:30into a format the display can actually handle. Clicking this one gives us a black and white

8:35version which you can preview right down here. Clicking dithering mono generates a desert image

8:44that mimics grayscale. Finally, just click upload image to send it over to the display.

8:59The next example works with an Android app that uses Bluetooth to send the images.

9:04Install the app using the Android package file that's in the archive. Copy this file

9:09into the download folder of your phone's file system. Then tap it to start the installation.

9:19After that, copy the Arduino sketch from the archive to the Arduino sketch folder. Then

9:24compile and upload it to the ESP32. Just like we did in the web example,

9:30start by picking your specific display model in the app so it knows what it's working with.

9:36Then you can grab any image you want to send directly from your gallery or file manager.

9:41The app lets you crop the photo to fit the screen perfectly. And you can still

9:46choose between a simple black and white look or that cool desert effect that we

9:50saw earlier. Once you're happy with the preview, just hit upload image. The app

9:56handles the Bluetooth transfer and your e-paper will update as soon as the transfer is finished.

10:13The third and last example is for those who want to write their own code. To get started,

10:19open the example directory and in another explorer window, open your Arduino user library

10:25folder. Then simply drag the subfolder from the examples over to the other explorer window.

10:35Once it's in place, open the Arduino IDE, go to file, then examples,

10:40and scroll down to WaveShare e-papers. There's a massive list of supported panels here. So,

10:46just pick the one that matches your hardware. We are using the 7.5 in V2, so select it here.

10:54This opens a new window with the main code and all the supporting header files ready to go.

10:59I don't want to explain the example in too much detail, but if you scroll down a bit, you'll

11:05see that it provides basic drawing functions for circles, rectangles, and other geometric

11:10shapes. And it can also display bitmaps. These are defined in a bite array in a separate file.

11:20Each bite represents eight pixels in a row where a zero plots a black pixel and a one plots a white

11:25pixel. With this, for our 800x 480 display, the array has a size of 48 kilobytes. If you want to

11:35bring your own bitmaps to the screen, you first have to convert them into C arrays. Waveshare

11:40actually provides a converter app for this, but as you can tell from the design, it's more than

11:4620 years old. It also only supports basic black and white, so there's no option for dithering. So,

11:53you need another tool for this. I recommend the website dithering studio. Once you upload

11:59your photo, you can experiment with different algorithms like Sierra and try which one looks

12:04best. To my eyes, the default Floyd Steinberg gives the cleanest result, so I'll stick with

12:10that. You can also adjust how coarse the dithering is, but I prefer to keep it as

12:16fine as possible for the best detail. You can also fine-tune the look by bumping up the contrast or

12:22adjusting the midtones with the gamma slider. And there are plenty of other settings to play with.

12:31Once you're happy with the real-time preview, just hit download and save the result as a

12:36JPEG. To keep things compatible with the converter tool, just make sure to remove the E from the file

12:42extension. Now, back in the image converter tool, set the output file type to see array and enter

12:49the resolution of your display. Then, make sure that none of the checkboxes below are selected.

12:55Finally, save the header file into the same folder as your demo script and name it house.h.

13:02A text editor automatically opens to show you the generated byte array. Just make sure to take note

13:08of the array's name because we going to need it in just a minute. In the Arduino sketch, include

13:16the header file you just created and call the draw bitmap function with the array name we just noted.

13:22To wrap things up, I'm using a rectangle, two circles, and some text to draw a custom label

13:29right over the image. To prevent the program from running into a next section, you can simply add a

13:35return statement here or delete the remaining code. And here is how it turns out. Strangely

13:42enough, the image came out as a negative, but you can fix this easily by going back to the converter

13:48app and checking the reverse color box. This flips the preview, and since the library function

13:55performs another inversion, the final result on the display comes out as a perfect positive.

14:03There's another library that can be easily installed through the Arduino library manager,

14:08GX EPD2. It is mainly designed to support displays from a company named good display

14:15but Waveshare and others use identical panels. So the library works with these as well. JXP2

14:22relies on the ardafruit gfx library. So it will be installed automatically as a

14:27dependency. This allows you to use all the standard Adafruit functions

14:31for drawing shapes and bit maps. Check out the online documentation for more details.

14:38And in this video, I show you how to build a super handy e-paper dashboard, a silent

14:43companion through the hectic everyday life. Thanks for watching. See you in the next one.