IoT Emoji Sign

3,993

53

4

About: Make it yourself if you cannot buy one!

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!

Arduino Contest 2019

Runner Up in the
Arduino Contest 2019

Share

Recommendations

  • Pets Challenge

    Pets Challenge
  • Colors of the Rainbow Contest

    Colors of the Rainbow Contest
  • Backyard Contest

    Backyard Contest

4 Discussions

0
None
Penolopy Bulnick

21 days ago

This is a really cute idea! It would be fun if someone could have this plugged into their computer and someone else could send them the emoji :)

0
None
DutchTaurus

Question 6 weeks ago on Step 1

Cool project! Just one question, where did you source the small black USB metal flexible cable from? I checked the usual suspects but all I came up with is a very short purple one and some other (too) long ones. Thanks for sharing!

0
None
countspicy

2 months ago

Hello, I was able to get my matrix to display the emojis as shown in the tutorial but I was wondering if you could go into more detail on how to make custom images. I am trying to add http://pixeljoint.com/pixelart/86686.htm to my display and could use a bit more info on how to convert it to the correct format.

1 reply
0
None
陳亮countspicy

Reply 2 months ago

The image file name said it is scaled 4x, so you should resize to 25% first. Then adjust variables in HTML, wild guess it should be xo = 2, yo = 2, xs = 9, ys = 9