Introduction: IoT Emoji Sign

By Follow my bilibili：陳亮手痕定律

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.

NeoPixels

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 ;>

Sign Stand

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.

  1. 3D print the case: https://www.thingiverse.com/thing:3553675
  2. Put on SK6812mini chip in Zigzag direction
  3. Soldering work
  4. Use hot glue seal the circuit
  5. Connect power pins and signal pin (SK6812 Din to ESP8266 pin 4 / D2) to ESP8266 dev board
  6. Screw up
  7. Plug the USB cable

Step 3: Software Preparation

Arduino IDE

If you are not yet install Arduino IDE, please download and install it from the official site:

https://www.arduino.cc/en/main/software

ESP8266 Support

If you are not yet install Arduino ESP8266 support, please follow the steps in "Arduino on ESP8266" section:

https://github.com/esp8266/Arduino

Arduino Libraries

Use Arduino Library install 3 depending libraries:

  • WiFiManager
  • ArduinoWebSockets
  • Adafruit_NeoPixel

Step 4: Download Source Code

Please download my source code here:

https://github.com/moononournation/IoT-Emoji-Sign

Step 5: 8x8 Emoji

This project require some 8x8 pixels emoji, I google and get a simple set from Justin Cyr tweet:

https://twitter.com/JUSTIN_CYR/status/658031097805...

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

  1. Connect the ESP8266 dev board to the computer
  2. Open Arduino IDE
  3. Select correct board at the Tools menu
  4. Press Upload button

Step 8: Setup & Play!

Please see the video demo for the setup and play details.

Here are the summary:

  1. Plug the IoT Emoji Sign
  2. Setup WiFi (first time only)
    1. Use your mobile search and connect to the AP "esp-emoji"
    2. WiFiManager Captive Portal show
    3. Press "Configure WiFi" button
    4. Select your AP
    5. Fill AP password
    6. Press "Save" button
    7. ESP8266 auto restart
  3. ESP8266 auto connect to your AP
  4. Use your mobile browse to "esp-emoji.local"
  5. Pick a Emoji and Play!

Ref.: https://www.instructables.com/id/WiFi-WebSocket-Re...

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!