Introduction: E-Paper Photo Frame

About: Electrical Engineer and a Maker from India. Engineering is fun once you start applying it!

Hello and welcome back to another Instructable! Someone has rightly said that "Memories are special moments that tell our story!". I wanted to build something which can bring back the old memories from my favorite places. I had recently got my hands on an e-paper display and such displays mimic the appearance of ink on a good old paper. Perfect!

In this Instructable, I will be making a photo frame using a PCB showing my favorite places on a map. Touching any one of the location touchpads will display an image from that place on an e-paper display.

Supplies

1x 4.3" Waveshare E-Paper Display

1x ESP32-WROOM-32 Module

1x AMS1117 3.3V Regulator

1x Push Button

1x 10uF capacitor

1x 10k Resistor

Tools:

3D Printer

Step 1: The Plan

The brains of the project will be an ESP32 microcontroller. I chose this microcontroller mainly for its touch sensing capability on 10 GPIO pins.

The plan is to display a few of my favorite places on a map on the PCB's silkscreen layer. The copper touchpads would then be placed pointing at the locations. The PCB will have a cutout in the middle for the e-paper display i.e. the PCB itself will be a part of the frame. PCB will have a black solder mask along with an ENIG finish. White silkscreen on a black background and gold-plated touchpads. Sweet!

Next, I have to select my favorite images from each location, prepare them for the e-paper display in bitmap (BMP) format, and store them on an SD card.

The next step is to write a code that detects touch and displays an image from that place.

Finally, the last step is to design and 3D print a body to hold all the electronics.

Let's get started!

Step 2: PCB Design

I will be using Altium Designer to design the PCB. This software lets you customize pretty much everything on every layer. You can also use CircuitMaker, a free PCB designer from Altum.

The first step is to create a silkscreen layer showing the layout of the maps. I wanted only the roads to be visible on the map. For that, I used this amazing tool by Google Maps. It allows us to edit a lot of things visible on the map. I removed all the buildings and labels and set the color of the road to black and the rest of everything to white. I then grabbed a screenshot and converted the image into PNG showing only the roads and some other stuff that I wanted to be on the silkscreen layer. Finally, after converting the PNG to DXF (which shows just the outline), I imported it onto the silkscreen layer. Pretty sure that there's an efficient way of doing it.

Next, I designed the copper touchpads (as a PCB footprint) to look like the map 'location' symbol. I then placed the pads on the front copper layer at appropriate locations. When it comes to capacitive touchpads, there are few rules which you need to follow. You can read a complete guide on touchpad design here. That's a lot but this is the minimum I followed and it worked:

  • Trace length should not exceed 300mm
  • Trace width < 0.18mm (7 mil)
  • The angle between two connecting trace segments should not be less than 90 degrees
  • No ground plane directly behind (i.e. on bottom layer) or beside the pad. The guide tells us to add a 'hatched' ground plane but that would have affected the appearance. Anyway, it worked for me.
  • No ground plane besides the traces
  • Pads and traces on the separate layers

Also, make sure that there is no ground pour under ESP32's antennae.

I finally exported the gerber files and sent them to JLCPCB for fabrication. You can download the Gerber files from here if you want to have a look at them.

Step 3: Electronics

The circuit is very simple. I have attached the schematic in this step.

Pads are provided for connecting the e-paper display and to program the ESP32. Since I will be using USB to power the frame, the AMS1117 voltage regulator is used for stepping down the voltage from 5V to 3.3V for powering the ESP32. Luckily the display works on 3.3V just fine.

ESP32 can be programmed using an FT232 USB to UART converter using the provided pads. Three wires viz. RX, TX, and GND are required for programming. Make sure that the ESP32 is powered ON while programming since it is not using power from the programmer. Hold the PROG push button while powering ON to put ESP32 in program mode. You can also use the CH340 programming circuit to eliminate all this hassle but will also add up to the overall circuit size.

Originally, I had thought of making the frame battery-powered but even after putting the ESP32 and display in deep sleep mode, the current consumption was still high enough to drain the battery in just 3 days. So I scrapped this idea and now the frame will be continuously ON and can be turned OFF if I don't want the screen to be refreshed every hour.

Step 4: 3D Printing

I have designed the body of the photo frame in Fusion 360 and printed using white PLA on Ender 3.

It consists of 3 parts. One is the main body on which the display is mounted. The PCB sits on top of the display while the face cover holds it in place. The face cover is secured to the main body using four M3 screws. The stand provides support to the entire frame and keeps it at an angle. It also houses a nicely hidden USB micro breakout board to power the photo frame.

Step 5: Time for Coding

Follow this guide by Adafruit on preparing the images for e-Paper displays using Photoshop. Before you copy your images on the SD card, make sure that the image file names are in UPPERCASE. For example, PIC1.BMP.

I am attaching the code just for reference as it may vary for you. Feel free to modify it.

The code basically performs the following functions:

  • It checks if a touch is detected using touch interrupts and displays an image associated with that touchpad
  • If the time elapsed is > 1hr, it displays a joke/quote from the internet (for fun!)

I am pulling jokes from JokeAPI and quotes from Quotable. The data is received in JSON format which is deserialized to get the required jokes/quotes.

I have used the following libraries in the code:

All other libraries should be already there by default when you install the boards.

Step 6: Enjoy!

Finally, the moment of truth! I am using an old mobile charger (5V/2A) to power the display. The photo frame turned out to be very beautiful, just can't take my eyes off it! This can be a perfect gift for your loved ones.

Improvements:

ESP32 has Bluetooth and WiFi built-in and so there are endless possibilities to try. Let me know in the comments section what more features you would like to have in the photo frame.

Also, the image takes more than 5secs to display after the touch is detected. I guess this is some kind of issue with the library I'm using, it does not seem to be well written.

Thank you for sticking to the end. I hope you love this project. Get vaccinated, stay safe and I’ll see you in the next one!

Maps Challenge

Runner Up in the
Maps Challenge