How to Use the ESP32 CYD an As Electronic Shelf Label

A while ago, I made an ESP8266-based electronic shelf label that benefited from utilizing the Google Firebase. However, I wanted to take things a step further and make an ESL that eliminates the need for assembly and allows for easy reconfiguration without firmware updates.

To achieve this, I chose the ESP32 Cheap Yellow Board as the core of the device and modified the firmware to request the necessary values during the configuration process.

Without further ado, let me tell you how to build that device.

• ESP32-2432S028R x1

Before you start making the actual thing, let me explain how the whole ESL system I designed works.

The ESL Management Software keeps the ID and encryption key of each ESL that you have. When you choose an ESL on which you want to display a certain image, select that image, and press the "Upload Image To Cloud" button, the ESL Management Software extracts the pixels from the image, converts each 888-color pixel to a 565-color one, splits the resulting 16-bit color into two 8-bit values, and encrypts them with AES-256 in CBC mode using the encryption key of that specific ESL.

Once the software encrypts 960 pixels, it uploads the encrypted data to the Firebase.

When the whole image is encrypted, the software puts the image hash to the Firebase.

The ESL then checks if the image hash it already has is the same as the one stored in the Firebase. If not, then the ESL retrieves the encrypted image line by line, decrypts it, saves it in memory, saves its hash, and displays the newly retrieved and decrypted image.

Take into account that the information presented in this step is just an opinion based on observations and should not be considered factual. The billing policy, methods used to calculate the billing amount, as well as methods for calculation of the used storage and bandwidth, are determined by Google.

Each encrypted image stored in the Google Firebase weighs 0.33636 MB. Based on this, you should be able to store up to 2972 encrypted images for free.

As for the bandwidth, Google offers a no-cost limit of 360 MB per day per project.

Uploading an image to Google Firebase and downloading it to the ESL takes 3.07 MB of bandwidth. So, technically, up to 117 images a day can be uploaded to the cloud and then downloaded by the ESLs for free, assuming that no ESL will request the same image more than once.

Checking whether the image stored in the cloud is the same as the one stored in the ESL requires at least 64 bytes of bandwidth, and by default, each ESL does that every ten minutes.

To flash the ESP32 CYD, you need to configure the Arduino IDE, install the necessary libraries, and put the “User_Setup.h” file where it should be. You can read how to do all of that at https://randomnerdtutorials.com/cheap-yellow-display-esp32-2432s028r/

Download the archive with the library from https://github.com/mobizt/Firebase-ESP-Client

And then unpack its content into the "…\Arduino\libraries" folder or open the Arduino IDE, click on "Sketch" -> "Include Library" -> "Add .ZIP Library…" and select the archive with the library.

You can download the archive with firmware from one of these sources:

https://sourceforge.net/projects/esp32-cyd-esl-with-firebase/

https://github.com/Northstrix/ESP32-Cheap-Yellow-Display-Electronic-Shelf-Label-with-Google-Firebase

The primary purpose of the ESP32 Filesystem Uploader is to let you upload files into ESP's filesystem. In this tutorial, the purpose of this tool is to upload an empty SPIFFS image into ESP.

Download the file called ESP32FS-1.0.zip from https://github.com/me-no-dev/arduino-esp32fs-plugin/releases/

And then extract the content of the archive into the "...\Arduino\Tools\" folder.

After that, restart the Arduino IDE.

The ESL makes use of SPIFFS to store the decrypted image. To ensure that the SPIFFS works properly, you should format the ESP32 Flash before working with it.

To format the ESP32 Flash memory:

1. Connect the ESP32 CYD to the computer;
2. Click on "Tools" menu -> "ESP32 Sketch Data Upload" line;
3. Click Yes in the pop-up window.

The program is going to format the built-in flash memory.

Upload the firmware from the "...\V1.0\Firmware_for_ESP32_CYD" folder into the ESP32 CYD.

I would be happy to explain to you how to set up Google Firebase. However, I believe that the article at https://medium.com/firebase-developers/getting-started-with-esp32-and-firebase-1e7f19f63401 does a better job on that. I suggest reading the article up until the "Development Environment Setup" headline.

When setting up the database, save the "Realtime Database URL" and "Web API Key."

These values will be needed later.

To upload data to Firebase, you need to get the private key and place it in the same folder as the desktop (client) application.

To do so:

• Open your database;
• Click on the "Settings" icon;
• Click on the "Project settings" line;
• When the next tab loads, go to the "Service accounts" tab;
• Click the "Generate new private key" button;
• Click the "Generate key" button in the pop-up window;
• Save the private key to the "...\V2.0\Desktop App" folder under the "firebase key.json" name.

Navigate to the "...\V1.0\Desktop App" folder, open the "db_url.txt" file, replace my database URL with yours, press "Ctrl + S" and close the file.

Launch the "Launch.py" file from the "...V1.0/Desktop App" folder.

Attention!!!

The Electronic Shelf Label Management Software provided with this ESL is incompatible with that of the DIY IoT Electronic Shelf Label With Google Firebase V2.0. The ESL Management Software that accompanies this ESL encrypts three lines (960 pixels) of an image at a time, while the software from its predecessor only encrypts one.

The ESLs are distinguished from each other by their unique IDs.

To generate an ID for an ESL, go to the "Add ESL" tab, and click on the "Generate" button. The newly generated ESL ID should appear in the designated entry box. The software checks each generated ID, and if it's already present in the database, it'll keep generating new IDs until it comes up with the one that's not in the database.

Technically, ESL ID can vary from one character to several hundred characters. But for the sake of convenience, I set the default length of ID to 8 characters. If you choose to generate IDs for the ESLs by means other than this software, make sure that you don't set ESL ID to "-1" because the string "-1" is reserved for the system use and indicates that the file doesn't exist.

Put a jumper wire between the "IO22" and "GND" pins and connect the ESP32 CYD to the USB Port.

Once you've put the ESL into the configuration mode, open the serial terminal, set the baud rate to 115200, and set the value of the first checkbox to "No line ending."

Once you've done that, disconnect the "IO22" pin from the ground and start configuring the ESL.

Copy the ESL encryption key from the serial terminal, paste it to the ESL management software, and then paste the following values to the serial terminal one by one while pressing the "Send" button each time after you paste a value:

• ESL ID
• Access Point Name
• Access Point Password
• WEB API KEY
• Database URL

It's entirely up to you how to make the images.

I made them using the stock photos from Pexels.

Whatever images you make, make sure that their resolution is 320x240 pixels.

*All products and product-related information demonstrated in this tutorial are entirely fictitious. Any similarity to actual products and product-related information is purely coincidental.

*Credit for photos:

Photo by Karolina Grabowska: https://www.pexels.com/photo/healthy-organic-apricots-placed-on-table-near-sliced-melon-4397753/

Photo by Pixabay: https://www.pexels.com/photo/smooties-with-berries-434295/

Photo by David Bartus: https://www.pexels.com/photo/white-and-black-wooden-board-963278/

*I originally presented these images in the DIY Electronic Shelf Label Management System V2.0 tutorial.

When the ESL is configured and added to the database, you can upload an image for that ESL to the Google Firebase.

To do so:

1. Click on the ESL to which you want to add the image in the table;
2. Click the "Select Image For ESL" button;
3. Browse to the folder where the image is located, select the image you want to display on the ESL, and click the "Open" button;
4. Click the "Upload Image To Cloud" button. The progress of the upload will be shown in the shell.

The ESL shown in this tutorial is a convenient device that doesn't require assembly. It uses Google Firebase and the ESP32 Flash for data storage and employs the AES-256 for data encryption.

Additionally, I've added a feature that will reboot the ESL if it fails to receive an encrypted line from the Firebase more than three times in a row, preventing it from freezing if something goes wrong.

Also, the source code of the ESL demonstrated in this tutorial is distributed under the MIT license. That grants you the freedom to customize, adapt, and modify it according to your needs and preferences. In other words, you can create your own version of this device or use it as a starting point for building new projects without the need for external permission.

If you found this tutorial to be useful, please consider sharing it.

Thank you for reading this tutorial.