IoT Emoji Sign

by 陳亮

13K11124

Intro: 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.

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!

18 Comments

MalcolmP5 1 year ago

Hi, can someone help me with that project. I'm using Wemos D1 mini, program compiled and uploaded correctly, I can connect to esp-emoji and configure AP but can't do anything after that, it looks like board is not connecting to AP for some reason. Am I missing something?

krisferrari 1 year ago

Any idea how to drawImage - spanning 2 icons ( next to each other ) . Is it related xs or 131 ? ctx.drawImage(img, -(xo + (xs * c)), -(yo + (ys * r)), 260, 122); is not working

var xo = 3;
var yo = 3;
var xs = 13;
var ys = 12;
var x = e.offsetX;
var y = e.offsetY;
var c = Math.round((x - xo - 4) / xs);
var r = Math.round((y - yo - 4) / ys);

document.getElementById('out').innerText = 'Selected [' + c + ', ' + r + ']';

var img = document.getElementById('emojis');
var ce = document.getElementById('emoji');
var ctx = ce.getContext('2d'); ctx.drawImage(img, -(xo + (xs * c)), -(yo + (ys * r)), 131, 122);

krisferrari 3 years ago

Looks like there is a limitation. works only till 16 x 6 .
Trying on my l6 x 16, with canvas 16 x 8 only
var width=16;var ht=8;var d=ctx.getImageData(0,0,width,ht).data;var t='';for(var i=0;i < ht;i++){for(var j=0;j < width;j++){t+=cc(d[(((i%8)*width+j)*4)]);t+=cc(d[(((i%8)*width+j)*4)+1]);t+=cc(d[(((i%8)*width+j)*4)+2]);}}

Using modulo just to be sure that I dont get zeros or large numbers

But No luck for 16 x 8
Dont know if I have to dump this for 16 x8 . 2 people clicked made this and I was one of them.

krisferrari 3 years ago

Hi, Did anyone try 16 x 16 version? mine is not working as I dont understand this line - returnString.fromCharCode(c / 64); why 64?

陳亮 3 years ago

this line convert 1 of RGB value to 1 character. divided by 64 just because I would like to reduce the brightness. sorry for not leaving comments in javascript part.

krisferrari 3 years ago

Thank you for the reply. I was trying 16 x 16 version, and I am failing miserably. I used JSBin to test the html bit, which looks ok. But drawing on 16 x 16 ws2812B matrix is failing. unable to troubleshoot setPixelColor thing (seems like all black). I can upload the code, if that helps. Also one pattern observed, when playing with the logic is - first 86 pixels red, next 86 or so blue, and remaining in green. {displayed shape looks 50% like the emoji selected}

陳亮 3 years ago

can you show the data send to ESP8266

krisferrari 3 years ago

I have uploaded updated version of code [index file only] - https://github.com/kswat/IoT-Emoji-Sign/blob/master/src/index.html

I added below code - just after for loop (0 to 256) where 't' is constructed (in index.html)
var transformed ='';
for( var u = 0 ; u < 768 ; u ++){
transformed += t[u].charCodeAt(0);
}
console.log(transformed);
But I did observe lots of non-zeroes, a couple of days ago. But still no leds turned on

krisferrari 3 years ago

author, can you suggest whats wrong with the logic please

nolandoktor 5 years 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.

陳亮 5 years 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

krisferrari 3 years ago

please can you help me understand what is xo/yo xs/ys numbers? what are they 3 /3 and 13/12

davew89 4 years ago

hi cant get this to complie and upload comes up with these errors
C:\Users\daves\Documents\Arduino\libraries\ESP8266WebServer\src\ESP8266WebServer.cpp:41:1: error: specializing member 'esp8266webserver::ESP8266WebServerTemplate<WiFiServer>::ESP8266WebServer' requires 'template<>' syntax
ESP8266WebServer::ESP8266WebServer(IPAddress addr, int port)
^
C:\Users\daves\Documents\Arduino\libraries\ESP8266WebServer\src\ESP8266WebServer.cpp:55:1: error: specializing member 'esp8266webserver::ESP8266WebServerTemplate<WiFiServer>::ESP8266WebServer' requires 'template<>' syntax
ESP8266WebServer::ESP8266WebServer(int port)
^
C:\Users\daves\Documents\Arduino\libraries\ESP8266WebServer\src\ESP8266WebServer.cpp:69:1: error: specializing member 'esp8266webserver::ESP8266WebServerTemplate<WiFiServer>::~ esp8266webserver::ESP8266WebServer<WiFiServer>' requires 'template<>' syntax
ESP8266WebServer::~ESP8266WebServer() {
^
C:\Users\daves\Documents\Arduino\libraries\ESP8266WebServer\src\Parsing.cpp:66:6: error: specializing member 'esp8266webserver::ESP8266WebServerTemplate<WiFiServer>::_parseRequest' requires 'template<>' syntax
bool ESP8266WebServer::_parseRequest(WiFiClient& client) {
^
any help would be great thanks

陳亮 4 years ago

I have just tried compile with latest software and libraries without errors. You may try to update to latest software and libraries first.

Penolopy Bulnick 4 years 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 :)

DutchTaurus 4 years ago

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!