Introduction: IoT Emoji Sign
This instructables show how to use an ESP8266 and some NeoPixels to create an IoT Emoji Sign.
Step 1: Preparation
ESP8266 dev board
Any ESP8266 board should be ok. This time I am using WeMos D1 Mini Pro, this is smallest and thinnest dev board I can find. If you want it portable, choose a board with Lipo support.
This project use Arduino Adafruit_NeoPixel library, any compatibles LED chip is ok, such as WS2812, WS2812B, SK6812, SK6812mini ... etc.
This time I am using 64 LED chips of SK6812mini to make a tiny 8x8 matrix panel. But the soldering work is not the main job of this project, you can use a LED strip to simplify the job or even direct buy a 8x8 NeoPixel LED Matrix ;>
This time I am using a micro USB metal flexible tube cable as a sign stand.
Step 2: Optional: 3D Printing & Assembly
If you simply buy a 8x8 NeoPixel LED Matrix, you can skip this steps.
- 3D print the case: https://www.thingiverse.com/thing:3553675
- Put on SK6812mini chip in Zigzag direction
- Soldering work
- Use hot glue seal the circuit
- Connect power pins and signal pin (SK6812 Din to ESP8266 pin 4 / D2) to ESP8266 dev board
- Screw up
- Plug the USB cable
Step 3: Software Preparation
If you are not yet install Arduino IDE, please download and install it from the official site:
If you are not yet install Arduino ESP8266 support, please follow the steps in "Arduino on ESP8266" section:
Use Arduino Library install 3 depending libraries:
Step 4: Download Source Code
Please download my source code here:
Step 5: 8x8 Emoji
This project require some 8x8 pixels emoji, I google and get a simple set from Justin Cyr tweet:
Then I resized the image and use base64decode.org convert to an base64 encoded string to embed it into the HTML.
You may find the resized image at: src/emojis.png
Step 6: Simple HTML UI
I have scripted a very simple HTML for selecting the emoji and then transfer the pixels to ESP8266 by Web Socket protocol in binary format.
Then I use html-minifier convert to a long single line string to embed it into Arduino code.
You may find the HTML file at: src/index.html
Step 7: Arduino Program
- Connect the ESP8266 dev board to the computer
- Open Arduino IDE
- Select correct board at the Tools menu
- Press Upload button
Step 8: Setup & Play!
Please see the video demo for the setup and play details.
Here are the summary:
- Plug the IoT Emoji Sign
- Setup WiFi (first time only)
- Use your mobile search and connect to the AP "esp-emoji"
- WiFiManager Captive Portal show
- Press "Configure WiFi" button
- Select your AP
- Fill AP password
- Press "Save" button
- ESP8266 auto restart
Step 9: Happy Signature!
The Emoji set from Justin Cyr tweet is only an simple example, you can prepare your own 8x8 Emoji set and show your signature!
Runner Up in the
Arduino Contest 2019