Display Cup

This is one of those crazy ideas that just spontaneously lodge in my brain. I thought, wouldn't it be awesome if there was a coffee cup that you could customize on the fly? One that looked pretty much like an ordinary cup. I did a search and found only one example of something similar, but it did not look like normal coffee cup and the display was flat.

With flexible e-ink displays, I thought why not make a cup with a display that curves to the cup? I found an inexpensive e-ink display that would fit the bill (in fact the only flexible one that I could find for purchase by a mere mortal) and so I set out to build my vision.

Step 1: Parts

The parts breakdown is pretty straight forward. The waveshare flexible e-ink display is the only one I could find, and its available easily on ebay or AlieEpress. I chose an ESP32 Lolin Lite for the microcontroller because it was inexpensive (pretty sure the one I got was a clone) but had Bluetooth LE as well as a LiPo battery charger and enough storage for fonts and bitmaps for the display.

The only hard to find item was a suitable cup to fit the electronics into. I couldn't really find anything. Originally, I had planned to use a ceramic "I am not a paper cup" cup, and bend an acrylic sheet around it. Since the cup is tapered and the acrylic sheet tube would be straight, there would be enough space near the bottom to fit the parts. I didn't have much luck with the acrylic bending though.

Then I remembered years ago my kids made custom mugs with a store bought kit. I went looking for that and found places that used to sell them no longer did, until I found that Hobby Lobby still sold them. They are cheap, in every way. But for under $1 it worked perfectly, having just enough space to snugly fit all the parts inside.

Lolin Lite ESP32 board

Waveshare 2.13" flexible e-ink display with HAT

150 mAh LiPo battery with JST connector

Design a Mug

Cardboard

Tape

Printed paper insert (see attached SVG file)

Foam cup

Step 2: Paper Insert and Cardboard Base

Because the cup is clear and you don't want to see the electronics, print out the insert and carefully cut it with a razor blade or scissors. Because the e-ink display isn't paper white, the insert has a light gray pattern on it that pretty closely matches the background color of the e-ink display. Cut out the rectangle for the display to show through. Put the insert into the cup to make sure it fits, and decide what side of the cup you want the display on.

Also on this sheet is a circle pattern that you can use to cut a cardboard base. I used a very thin corrugated cardboard from a small box.

This cardboard disk with serve to mount the electronics to, and to hold the paper insert against the cup at the bottom.

Step 3: Mount Electronics to Base

I soldered right angle headers to the ESP32 and only to the pins I needed. Specifically this would leave space on one side for the small LiPo battery. Connect the wires from the harness provided with the e-ink display hat as shown. Then, with the ESP32 centered and positioned with the USP and battery connector as close to the edge as you can get, press down so the header pins puncture the top of the cardboard.

Plug in the JST battery connector and use some double sided tape to stick the battery down next to the ESP32. Be careful not to put too much pressure on the battery as they are delicate.

Plug the wire harness into the e-ink driver hat, and try to curve the wires around the female header strip and across the top of the board. Secure it with some tape. Make sure the ribbon cable is connected, and place the hat over the ESP32 as far back as it will go without going over the edge of the cardboard circle, and guide the wire harness behind the JST battery connector and USB port. Secure with more tape.

This is kinda tricky but the wires pretty much go where they need to go, and it all fits together pretty snugly.

Step 4: Charge Port

You're going to want to be able to charge your cup and also program it, so you need to place the cardboard electronics assembly into the cup and note where the USB port is. Mark a square big enough for your cable to fit through (I put it near the base of the handle so it would be less visible when holding the cup), and then cut out a hole. I used a 3/16" drill on both sides and then cut the rest out with an x-acto blade.

Place the assembly in the cup again and test that your cable can fit through and connect.

Step 5: Final Assembly

Remove the base assembly again, and then insert the paper liner. Make sure it is fully spread out inside the cup and then tape the edges to retain the shape. Attach the e-ink display to the little connector board, and the board to the ribbon coming from the hat. Carefully slide the base assembly into the cup, orient the USB port to the hole in the cup and push it down to the bottom of the cup. Again make sure you can plug your USB cable into the board.

Now center the e-ink display into the cutout on the paper liner. Make sure it is level, and pressed all the way into the curve of the cup. Use some tape to hold it in place. I added an additional paper backing to help hold the e-ink display in place. You will need to also tape the ribbon cables to the liner, and you will need to make one 45 degree fold in the ribbon to make it go from horizontal to vertical, going down to the base.

You should now be able to place the inner cup insert into the cup.

Step 6: Insulation

Because the cup is thin plastic it has almost no insulation. The e-ink display I found was sensitive to heat, so the heat from a typical cup of coffee was enough to cause the display to fade. I added some insulation around the cup by cutting the bottom off a common styrofoam cup and then wrapping it around the cup insert, trimming off the excess foam. It also needed a slot cut into it in order to fit around the little connector board.

This helped a great deal. And of course it also means your coffee stays hotter longer.

Step 7: Programming

I've provided the code on GitHub for programming the ESP32. I am using the Atom editor with PlatformIO extensions installed. The code is using Arduino framework with espressif32 platform, using Adafruit GFX Library from Adafruit to put text onto the display. I plan to add images as well as a Bluetooth connection, used with a mobile app to dynamically upload images and text. For now, there are several amusing text displays it cycles through.

I've tried to keep power consumption as low as possible but I think it is not as optimized as it could be. Still, it lasts several hours when changing the display every 10 seconds or so.

The code is a bit messy! There's stuff in there for implementing the BLE communication which is not done yet. There is also some code to communicate to a Slack Bot, the intention to let my co-workers send texts to the cup in real time from our company Slack chat room...

Source Code

Step 8: Use It

Take Display Cup into your next company meeting. Drink coffee. Wait for co-workers to notice... enjoy!

Please also see this project on https://www.instructables.com/id/Display-Cup/ and vote for it for the Arduino contest.