e-paper.name/tag

Introduction

This 4.2" e-paper name tag (the size of a normal paper name tag!) is an accessible, customizable, electronic badge for people who want a neat electronic badge, but don't want to learn multiple new electronics skill sets, and are comfortable downloading things from the Internet, carefully assembling some parts, cutting cardboard, and taping or gluing paper or fabric. It's just two parts that run around $40 and snap together.

The provided software (kitbodged from the manufacturer's demo code) provides a useful and understandable out-of-box experience. Connect your phone or computer to the badge's WiFi access point, visit the badge's web server with your browser, and draw your name.

#badgelife fans who are more comfortable with HTML, CSS, or JavaScript can add new badge images and new in-browser image customization functionality without needing to learn Arduino or ESP8266 coding. Add to or replace the standalone HTML, CSS, and JavaScript in the "data" folder and re-upload to the onboard 4MB flash using the Arduino IDE.

Using a commercial, off-the-shelf, black, white, and red e-paper display and driver board means a standard form factor for shells, cases, and holders. Tape the display and driver board to a piece of cardboard roughly 13cm tall by 11cm wide, and you have over eight (8) square inches to draw on.

Punch a hole in the cardboard to wear the name tag as-is, or add foam or other non-conductive backing approximately 1cm thick to protect the glass and pins, and you can safely wrap it in a fabric case.

Peers

e-paper.name/tag isn't the first e-paper #badgelife badge, nor the first e-paper name tag, nor the first ESP8266 driver. It's just the first DIY one that 🅰 looks like a regular red-and-white name tag, 🅱 is the same size as a regular red-and-white name tag, and 🔟 is also accessible for non-engineers. Recognizing your colleagues in a space is important, so here are the other e-paper badges I know about:

• WyoLum's BADGEr for the Open Hardware Summit 2013 used an Arduino, and is still available for purchase from Seeed (2013)
• New Relic's FutureStack14 conference badge was backed by an Electric Imp (2014)
• DG-TAG's commercial offering of digital name badges, e-paper displays of varying sizes which update offline through a special cradle and software (2015)
• Blendology's commercial offering of reusable e-paper conference badges with contactless tracking and contact information transfer (2017)
• Josh King's PiE-Ink Name Badge uses a Raspberry Pi Zero and a 2" e-paper add-on board (2017)
• Antmicro's RISC-V Electronic Badge for the 7th RISC-V workshop (2017)
• SHA2017's Badge with the ESP32 and wireless updating (2017)
• Drew Fustini's E-Paper Badge with Teensy LC designed in KiCad (2017)
• Squaro Engineering's Badgy has a 2.9" e-paper display with an ESP8266, meant as a common platform for custom badge code, currently waitlisted on Tindie (2018)
• Noel Portugal's Oracle Code Card, built as a Badgy variant for Oracle developer demos (2018)
• OSH Park and Screaming Circuits' Open Hardware Summit 2018 badge, five years after a previous e-paper badge there (2018)
• Jon Heise's e-paper badge uses a Raspberry Pi Zero and a 2" red/white/black e-paper board (2018)
• DFRobot's name badge has a red/white/black 2" display on an ESP32 (2018)
• There's two other e-paper badges in this BadgeLove challenge, Shahariar's Animated E-Paper Badge (2018) and Robert Poser's Self-Powered EPD-Badge (2019)
• HackerHotel's 2019 badge following on from the SHA2017 badge (2019)

Make yours/1: Hardware

To make your own e-paper.name/tag, you'll need all the things in the "Things" section of this page. We'll start by carefully assembling the hardware, then we'll load the software and test it all out, then we'll make a cover or case for it, and finally we'll put it all together.

Even if you get the electronics as part of a kit or bundle, they won't come pre-assembled. You'll need to carefully protect and connect the flexible printed circuit (FPC) coming out of the e-paper display panel and plug it into the driver board. You may or may not have an extension board and cable; it makes it easier to test with if you have one, but it's not required.

First, protect the FPC. The thin, flat cable coming out of the display panel is fragile! Any twisting from side to side, or too much repeated bending front to back, can fray or break it, and then you'll need a new panel. Put adhesive tape or electrical tape on both sides of it to protect it.

Then, insert the end of the FPC into the extension board (if you have it), or directly into the driver board (if you don't). Gently pull the little black tabs on either side forward, slide the connector in (it doesn't go in very far!) and then push the little black tabs back in to lock it. If you're using the extension board, you'll do this twice: first to plug the panel into the extension, and then again to plug the extension into the driver board.

That's it! All the electronics are assembled.

Make yours/2: Software

With the panel and driver board connected, now we need to load the e-paper.name/tag software onto the driver board.

If you're going to be using the badge as-is, with the provided name tag backgrounds, and just changing what you've written on it, you'll only have to do this once! Here are what the provided name tags look like:

If you want to make custom name tag backgrounds, or make new HTML/CSS/JS features, you'll only have to do part of this once. There's two parts, uploading the code, and then uploading the files. As you change the art or front-end code, you can skip re-uploading the code and just upload your new files.

To upload anything to the driver board, you'll need the Arduino Desktop IDE installed on your computer. (It's not possible to use the new Arduino Web Editor.) Follow the installation instructions for your Windows, Mac, or Linux computer as linked to from this page, under the "Install the Arduino Desktop IDE" heading.

To get the Arduino IDE to recognize the driver board, you'll need to add ESP8266 support. Follow these instructions from the Arduino ESP8266 manual, under the "Instructions" heading. (I have "esp8266 by ESP8266 Community" version 2.4.2 installed, but whatever the latest one is should work.) When you get to the last step, the board to select under the "Tools", "Board" menu is "NodeMCU 1.0 (ESP-12E Module)".

You'll need an additional tool to upload the files. Visit the latest releases page for the Arduino ESP8266FS plugin and download it. In the Arduino IDE, go to "File", "Preferences", and look at the "Sketchbook location". In that folder, add a "tools" directory. Then, uncompress the downloaded ESP8266FS-x.y.z.zip into it (so you should have your sketchbook location "Arduino" folder, then "tools", then "ESP8266FS", then "tool", then "esp8266fs.jar").

You can also check to make sure the other board parameters in the "Tools" menu are correct: Upload Speed is 115200, CPU Frequency is 80 MHz, Flash Size is 4M (1M SPIFFS).

Plug your driver board into your computer using a micro-USB cable. If you can see the top of the driver board, LEDs should flash red and blue briefly. Under the "Tools" menu, under "Port", it should have detected your board and switched to it (on my Mac, it reads, "/dev/cu.SLAB_USBtoUART"). If it doesn't, and there's nothing like that to pick from under the "Port" menu, you may need to install a driver for the USB chip on the driver board. Download the driver for your Windows, Mac, or Linux computer from the Silicon Labs CP210x USB to UART Bridge VCP Drivers page and install it (you may have to reboot, be sure to unplug the driver board before you do).

The e-paper.name/tag software has some dependencies on additional libraries. Under "Tools", "Manage Libraries...", search for and install the "Adafruit GFX Library", "GxEPD2", and "U8g2_for_Adafruit_GFX" libraries. I have 1.3.4, 1.1.0, and 1.5.2 respectively, but the latest versions should work.

Finally, download the e-paper.name/tag software itself, linked to from under the "Code" section of this page. When you download it, rename the folder it's in to "epapernametag"; the Arduino software is picky about that. In the Arduino IDE, "File", "Open...", "epapernametag" folder, "epapernametag.ino" file.

Upload the code to your driver board with "Sketch", "Upload". It'll say "Compiling sketch" for a while, then the blue LED on your driver board will start flashing as it uploads. When the upload completes, the board will reset, but the display may or may not update yet.

Upload the files to your driver board with "Tools", "ESP8266 Sketch Data Upload". This will push everything from the "data" folder to the driver board. The blue LED will flash as it uploads.

When the upload completes, the board will reset, and the panel will update!

The four digits at the end of the WiFi SSID, and the eight-digit password, are randomly generated each time the flash memory is wiped, or any time you force them to be reset by jumping the pins mentioned (we'll get into that later).

If you unplug the driver board from your PC, the e-paper display will keep that information on it! It doesn't need power. (You'll need to provide power to the driver board to connect to its WiFi and web server with your phone or computer, though.)

Leave the driver board plugged into your computer, or unplug and plug it into any USB power supply. Write down the WiFi SSID and password (the credentials display will be erased once you upload a name tag). Connect to the WiFi access point credentials displayed on your panel, visit the URL in your browser, write your name on the virtual name tag, and hit Upload!

Make yours/3: Crafts

With your hardware and software now working and tested, we need to stick it to something so we can use it as a badge.

If you lay your display and driver board face-down on your piece of cardboard, and draw a rectangle with some padding around it, you'll end up with something about 11cm wide and 13cm tall.

You'll also see the black outline of the visible portion of the display on the back of the glass, which I've extended on each side in red:

Carefully mark the eight ends of those lines, and connect them (you'll find it's around 8.5cm by 6.5cm). This is the area you will cut out of the interior of the cardboard to show the display through.

Fold the cardboard in half and use scissors to cut out the rectangle, or carefully use a hobby knife or utility knife (don't forget to protect the surface you're cutting on, and keep your extra fingers out of the way!).

Put the display back in place over your cutout, and decide where you'll put the driver board. If it's directly connected, you don't have any choice, but if you're using the extension board, you can move it around! Draw an outline around where you're going to mount it. Take your ruler and give yourself a centimeter around all sides (of everything, inclusive, the driver board and display both), and cut out your final piece of cardboard.

Flip the cardboard over, and ornament the front however you'd like. Or, just leave it blank, let your name do the talking. You're done!

Make yours/4: Assembly

Put the driver board and display back on the back of the cardboard, and tape it down with scotch tape. Maybe use double-faced tape, or a loop of tape, on the driver board, so you can still get to the USB jack for powering it.

Flip it over.

That's it! You can clip a lanyard directly to the cardboard and use it as-is. (If you're going to do this, put some tape over the pins of the driver board so you don't short it out accidentally.)

However, this isn't incredibly safe. The e-paper display panel is made of glass, and ideally you'd put some clear, matte plastic in front to protect it, and also some padding on the back.

In this first prototype, using the extension cable, I used a very thick piece of corrugated cardboard on the back of the glass, and pressed the pins of the driver board into the cardboard (don't do this, it's a good way to bend your pins):

Here's another, larger prototype, again with a thick corrugated cardboard back:

For the final, slimmer version we've been working on here, I just cut a piece of 1cm-thick packing foam into a 10cm by 11cm rectangle. Then I cut a 3cm by 11cm rectangle in half, and cut one of the halves in half by thickness. The driver board is about half a centimeter thick, so the thinner half got pressed over the pins, and the thicker half just takes up the rest of the horizontal space:

It's held together with rubber bands, and then slides inside the fabric sleeve. I only need to remove the top 3cm piece to plug in USB power to change the name tag.

That's it! You're done!

Make yours/5: Customizing

There are lots of customization possibilities! You don't have to be a hardware hacker or a software programmer to do them.

Customize the case. These instructions covered making a plain vertical name tag. You could use different materials, like colored or patterned cardboard. You could make a collage or print out art, and cut it out and glue it on. Cut out a pattern or shape that sits on top of the display so only part of it shows through. You could use the measurements you took (or the ones from the PDF schematics Waveshare provides) and 3D print one.

Customize the holder. If you chose to put a backing material behind the cardboard to protect the driver board pins and display glass, you have a stable size of ~11cm × ~13cm × ~1cm that you can wrap fabric or paper around. I used scrap Skylanders-themed fabric left over from my nfc.toys talk for the hero image, and scrap emoji-themed fabric for my original prototype, cut a hole for the display, and used fabric glue to hold it all together. No sewing necessary! Making a pattern and creating disposable paper holders is an opportunity, too

Customize the badge art. Making art that looks good with only three colors (black, red, and white, no shades in between, no antialiasing) isn't easy, but it's possible! You don't even need to modify any of the HTML or CSS; just replace the four PNG files in the "data" directory with your own three-color pixel art, and re-upload the files as described in section 2 above. (By default, the total contents of the "data" folder can't be larger than 1MB, but the display is only 400×300, so that shouldn't be a problem.)

Customize the HTML/CSS/JS. If you're a front-end designer or developer, you can do anything. If you don't mess with how the uploading works, you don't even need to upload it to the ESP8266 for testing, just use your normal local development web server and upload it once when it all works. I talk about possibilities in the "Future work for you!" section below.

Licensing caveats

While this text (written by me), the photos not credited to someone else (taken by me), and the name tag art (designed by Jules Naujoks) are all in the public domain, the code is not. Even though I cobbled it together from publicly-available sources (Waveshare Team provides their demo code freely on their wiki, and Zipso provides their code inline in their articles, and all the Stack Overflow answers are CC-BY), there's no licensing information provided by Waveshare or Zipso. That means the e-paper.name/tag ESP8266/HTML/CSS/JS code itself in the linked GitLab repo is copyright them, and I'm not permitted to redistribute it. If Waveshare or Zipso tell me to take it down, I'll have to.

(If you downloaded the original Waveshare Team code, and the original Zipso code, and applied all the same changes I made to your one badge, that'd be fine. With copyright, it's the distribution that's the thing.)

Please consider this a (great) proof of concept, but not a platform to build on besides for your own personal use.

Why I made it

Because #badgelife is neat. (For background, see the Hackaday documentary video or the Vice Motherboard article.)

I attended HOPE 2018 (to deliver this talk) and had been following the development of Mr. Robot Badge on Twitter leading up to it. I bought one while I was there (still available on Tindie!), and later also an Antitronics unofficial JoCo Cruise 2018 Pirate Monkey Badge (still available on eBay!). I'd love to get a Twilio Hackpack v.4 from SIGNAL 2018.

But, if I'm being realistic, I'm not going to learn electronics or PCB design and manufacture, probably, like, ever. I explicitly teach designers how they don't need to learn to code or learn electronics to effectively design and prototype Internet of Things devices. So, what's the simplest hardware that meets the definition of an "electronic badge" which could still be a practical and useful actual badge for other non-electronics folks to make and use? This was it.

How I made it/1: Hardware

Waveshare's reasonably-priced, rebranded e-paper displays had been gaining usage share since at least late 2017. But, I hate teaching people without electronics experience about wiring things up, because there is so much that can go wrong. The new Adafruit PyPortal has the right idea for ease-of-use: a display and driver and microcontroller and program it with something reasonable over USB all as a single unit. That's all the commercial e-paper badges I linked to above are, and they're commanding a price premium for it.

However, in March 2018, Waveshare launched their all-in-one, ESP8266 driver board, the one we use here. There was no longer any wiring necessary like with a Raspberry Pi or third-party ESP8266 board.

How I made it/2: ESP8266

I've done some Arduino-based work in the past, and ESP8266 can be programmed using the Arduino IDE, so, that seemed like a straightforward thing to continue with. But, digging into the demo code provided by Waveshare Team, I found it wasn't going to be able to be used by a layperson as-is.

First, even though their ESP8266 chip of choice has onboard Flash, they don't use it. All their HTML/CSS/JS is compiled into the code in headers! No front-end designer is going to be able to work with that.

Second, you can't use the demo code out of the box. You have to hardcode credentials for an existing WiFi access point and upload it. There's no onboard UI using a soft access point to set them, or just supporting the soft access point itself.

Third, despite advertising an mDNS name, uploading images over that name didn't actually work, the JS needed an IP.

Fourth, the Waveshare documentation says to use any of the ESP8266 pins, disconnect the display. That's not very friendly. And, they mean it: if you try to initialize the SPI flash before you initialize the SPI display, it'll reset.

Fixing these thing became my to-do list.

The two most unfamiliar things were the ESP8266 pins (why are they all named differently on different boards?) and random numbers. It took me a while to confirm that GPIO9 and GPIO10 are safe to use for WiFi resets, because this flash is in "DIO" mode and doesn't use those extra pins like other modules do. It also took me a while to figure out if the ESP8266 had a better hardware random number generator than just getting entropy from a pin; it does! Support was added in 2016: either don't seed the RNG (otherwise it maintains Arduino compatibility), or explicitly use new secureRandom functions (which I used).

How I made it/3: Art

I am not an artist, and I wanted this to be usable by laypeople with as little effort as possible. That meant three-color pixel artwork of a red and white name tag, with fonts selected and a pronoun pin drawn by someone who knew what they were doing.

After attending XOXO 2018 (which had really lovely pronoun pins for all attendees to wear), I decided to do the same thing here. There isn't a name tag image without a pronoun pin.

I found artist Jules Naujoks through the XOXO community, and the contract for the art specified the pins would be released to the public domain. Enjoy!

How I made it/4: Crafts

While I am more comfortable with cardboard and fabric crafts, and I technically know how to sew (and own a sewing machine, which works, and I have used), I'm not actually proficient.

Here's several hours of me trying (and failing!) to figure out the most reproducible process for making this badge, reduced to a 45 second time-lapse. I start with foamboard before going back to cardboard, and then spend a while looking for backing foam, and finally make the fabric holder.

Future work for you!

👩‍⚖️ Because of the unclear licensing of the Waveshare Team demo code and the Zipso drawing code, this project can't really be used as a robust platform for e-paper name tags. It's a nice proof of concept, and the code is there, but I can't tell you to use it, because it's not mine. Both the ESP8266 backend and the HTML/CSS/JS frontend really need to be rewritten using code with documented licensing. (The name tag art is public domain, though!)

✏️ You can't natively draw aliased (pixelated) lines on HTML5 canvases, apparently. There's a wonderful, terrible hack I found on StackOverflow in the code to fake this on desktop, but doing it on mobile crashes Android Chrome. It'd be great to have a new/different/robust solution for drawing aliased lines on both desktop and mobile so your name can be written and displayed as clearly as possible.

🏷 The name tag display is pretty simple, it's just an image, and the pronoun pin is part of the image, so it's possible to draw over it. It'd be neat if the pronoun pin was separate and an overlay, so you could pick a name tag background, draw your name, and then pick a pin, and place it where you want.

🖼 I gutted all support for other e-paper display sizes from the original demo code. For properly-sized name tags, it'd probably be nice to at least restore support for other 4.2" displays. Waveshare sells black/white and yellow/black/white ones as well.

📷 I gutted all support for uploading custom images from the original demo code. It'd be nice to be able to upload files and take webcam photos, resize them, and position them on the canvas.

🏭 The standard size of the display and driver board mean a slim, 3D printed clamshell case with eyelets for lanyards could work well. Don't forget to leave access for the USB port, or room for a micro-USB extension!

✂️ Printable papercraft and sewing patterns for making wrappers and holders would make them more accessible.

⚡️ After I finished this project, Waveshare released an ESP32-based driver board as well. While their sample Android app for Bluetooth transfers seems like a lot of overhead compared to a cross-platform self-hosted web page, maybe Web Bluetooth is an option for desktop Chrome and Android users?

📻 The WiFi SSID and password are stored in the SPIFFS in a regular data file. Should they be stored in the emulated EEPROM instead? Would that allow them to stay the same across SPIFFS uploads?

✅ This is an e-paper name tag, but if you wanted it to be full-on proper reusable conference badge you could do worse than remaking it to follow the guidelines on Badge Reviews. Using a 7.5" e-paper display would be large enough to put all of their recommended information digitally! You could also have just the name, or just the three talking points, be displayed on the e-paper, and use stickers or whiteboard vinyl to support making the rest dynamic. (If you're making a badge for more than yourself, Rands' 2013 article Full of Interesting Strangers includes considerations on aesthetics and nostalgia.)