QR has become one of the most prominent sources of sharing links among ourselves, whether for social media or any payment link, everything seems one scan away. So, keeping the trend alive, I wanted to create a QR that anyone can wear as a badge and share any link like their portfolio, social media handles, etc. and event change the link anytime with their mobile app.

Supplies

Components

ESP12-E/F
SPDT Switch as On/Off Switch
ST7789 - 240x240 IPS display
2* 10k Ohm Resistor (SMD 0805)
Lipo Battery
TP4056 Lipo Charger
PCB

Tools / Extra Stuff

3D Printed Parts
FTDI or NodeMCU for Programming
Double-Sided Tape or Glue Gun
Soldering Iron
Wires
KeyChain/Safety Pin (Optional)

Software

Arduino IDE

Step 1: Circuit Designing

I used EagleCAD to design the schematic and board for this project.

The microcontroller of choice is ESP8266 in the form of the ESP12-E/F Module. The Display used is ST7789 IPS Display of 240X240 Resolution. The board also includes the pads for programming and power supply, coming out of the TP4056 lipo charge and protection circuit.

Step 2: PCB Manufacturing

After creating the schematic and board design, rather than troubling myself with homemade PCBs, I generated the Gerber File (you can download it from this link) and ordered from the quick PCB Prototyping service of PCBWay.com, and within a few days 10 pcs of professional-made PCBs arrived at my home.

Step 3: PCB Assembly

After receiving PCBs and all the components it's time for the fun part i.e. soldering and assembling.

I started with ESP followed by SMD Resistors and the Switch then soldered the programming wires and the display followed by the lipo battery.

Step 4: Soldering Display and Batteries

After soldering all the components we can go for the display for which although through-hole pads are provided in the PCB but I still attached the display using wires so as to make assembly in the enclosure easier.

I removed the male Header Pins soldered onto the display and the soldered it will wires.

Thereafter you can connect the lipo battery to the Charge Circuit and then connect the output from the charge circuit to the Power Pads on the PCB.

Also, solder the wires on the programming pads on the back of the PCB which will be used for programming the ESP12 Module.

Step 5: Programming ESP12-E/F

You can find the code on my Github or as a Zip File from this Link.

In the Arduino IDE, we need to install the following Libraries

ArduinoJson.h
FS.h
Adafruit_GFX.h
Adafruit_ST7789.h
ESP8266WiFi.h
ESP8266WebServer.h

The rest of the libraries which are needed for QR Generation are attached in the Zip file and I recommend you to use the same folder hierarchy for proper compilation of the code.

You can use FTDI or NodeMCU to program the ESP12 module, I choose the NodeMCU option as it is easy because we don't require the flash and reset button separately.

To use the NodeMCU option assemble the circuit as shown in the image above and simple connect the NodeMCU using a USB cable.

The ESP will be used as an access point and will host a webpage from which we can control the QR Display(Demo in Step 10) The webpage which is hosted is loaded in the memory of ESP i.e the SPIFFS memory and to load the files into the memory of ESP we need to use the "ESP8266 Sketch Data Upload" option in the Tools section of the Arduino IDE which the board Selected is ESP8266.

If you can't see this option then you need to undergo a few steps which are well explained by Andreas Spiess in this video.

So after you install all the tools needed then you can first load the data by using the ESP8266 Sketch Data Upload option and then upload the code provided

After programming desolders the programming wires.

Step 6: 3D Print Enclosure

There are only two parts that need to be 3d Printed

Top Cover

Bottom Cover

Both the parts don't require any support and contain a few short bridges which can be printed with any FDM 3D Printer.

I have also attached the STEP file if you want to tweak any parameter.

Step 7: Assembly

This is just an Animation of the assembly for reference purposes.

Step 8: Attach Display to Top Cover

In the Top Cover, there are snaps that are made to secure the display to the top part without using any screws or adhesive. Just push the display against it and it will snap into it.

Step 9: Bottom Cover Assembly

In the Bottom section, we will install the assembled PCB, TP4056 lipo protection, and charge circuit then we need to add the lipo battery to it and then we can close the top cover using the snaps built into the top part. To secure the Board onto the base I have used two layers of double-sided tape and the same for the TP4056 Charge Module.

You can alternatively use some glue gun to stick the board to the base.

Step 10: Testing the Features

As all the steps are complete now we can test the features.

To connect to the Badge we need to go to the wifi options and connect to the "ESP_AP" by using the password set in the Arduino code.

Then we need to open the browser and go to "192.168.4.1"

There we can enter the link for which we want to show the QR on the display and also we can configure the four buttons for predefined links so that you will be able to change the QR on display without entering any link.

When we open the main page i.e. "192.168.4.1" the link showing in the field is the one that is currently being shown on the Badge.

Step 11: Applications

Woohoo...you have created a digital QR Display Badge which you can use anywhere by attaching to keychains, backpacks, T-Shirts, Shirts, Trousers, or Blazers and I am sure you can find many more places where you can attach your badge & share any link as QR to the world.

If you made one for your self then do share it below and if you face any issue during building drop me a message, I would love to help as much as I can.