IoT Emoji Sign V2

This instructables show how to use a Waveshare ESP32-S3-Matrix build a simple IoT Emoji Sign.

This is the revamped version of my previous project:

https://www.instructables.com/IoT-Emoji-Sign/

1. Waveshare ESP32-S3-Matrix
2. Matt white window film
3. 50 percent black window film

In my previous project, IoT Emoji Sign, use a small size ESP8266 dev board, the corresponding LED matrix is small too. It use 3.5mm x 3.5mm size NeoPixel and self soldering a compact 8x8 LED matrix. It works but a little bit too complicated for the beginner.

Now Waveshare released a dev device, ESP32-S3-Matrix, that already built-in a much more compact 8x8 LED matrix. You can play it out of the box.

The UI, a HTML web page, is mostly the same as my previous project. But previously it require connect to the dev device softAP first, then manual type the IP in the mobile browser to enter the web page. Now it utilized the ESP32RobotWebServer Captive Portal capability. So once you connect to the softAP, the web page will popup. The user experience should be much better.

Previously, I use transparent black material 3D print the LED filter. The edge between each pixel is not very clear and the color in each pixel is not well distributed. This project use a much smaller size LED and the filter wall only have 0.4mm, the outcome will become more blurry.

The beauty of the NeoPixel matrix is ​​in displaying pixel art. I think it's very important that every pixel is clear and sharp.

So this time I used some technique learnt from LCD and LED segment display. First I use solid black material 3D print the pixel edge, so no light diffused to adjacent pixel. Then I use a matt white window film cover on it to diffuse the color light inside the pixel, so the color of each pixel is well distributed. But the "black" pixels are not black enough, so finally I cover it with a 50 percent black window film to increase the contrast.

Please download and 3D print the models at Thingiverse:

https://www.thingiverse.com/thing:6949072

Note:

The model file ESP32-S3-Matrix-LED(transparent-black).stl is optional in case you have transparent black material in hand. But the display outcome is not very good.

Arduino IDE

Download and install Arduino IDE latest 1.x version if not yet:

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

Arduino-ESP32

Follow installation step to add Arduino-ESP32 support if not yet:

https://docs.espressif.com/projects/arduino-esp32/en/latest/installing.html

Arduino_GFX Library

Open Arduino IDE Library Manager by selecting "Tools" menu -> "Manager Libraries...". Search "GFX for various displays" and press "install" button.

You may refer my previous instructables for more information about Arduino_GFX.

FastLED

Open Arduino IDE Library Manager by selecting "Tools" menu -> "Manager Libraries...". Search "FastLED" and press "install" button.

Dev Device Pins

Open Arduino IDE Library Manager by selecting "Tools" menu -> "Manager Libraries...". Search "Dev Device Pins" and press "install" button.

arduino-esp32fs-plugin

Follow installation step to add Arduino-esp32fs-plugin if not yet:

https://github.com/lorol/arduino-esp32fs-plugin

As same as my previous project, 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...

1. Download source code at GitHub: https://github.com/moononournation/ESP32RobotWebServer.git
2. Open ESP32RobotWebServer.ino in Arduino IDE
3. Select Board Options as above pictureYou may define your own `AP_SSID` and `AP_PASSWORD` values
4. Ensure only one Dev Device Pins header uncommented and that is `#include <PINS_ESP32-S3-MATRIX.h>`
5. Connect ESP32-S3-Matrix
6. Select Correct port
7. Press Upload button
8. Upload web page files by select Tools menu -> ESP32 Sketch Data Upload -> Littlefs -> OK

1. Cutout 2 films a little bit bigger than the 3D printed LED filter
2. Stick matt white film
3. Stick 50 percent black film
4. Cutout 4 sides along the filter edge

Follow above video for the assembly.

1. Power on the ESP32-S3-Matrix
2. Use your mobile connect to the defined softAP, e.g. "Emoji Sign"
3. Wait the Captive Portal web page popup
4. Select the Emoji you want to show

Note:

Some mobile OS version may not popup the Captive Portal correctly, you still can open it in browser manually:

"http://192.168.4.1"

It is the most eye catching decoration on the desk!