DIY Electronic Shelf Label Management System V2.0

An Electronic Shelf Label is a device that’s typically attached to the front edge of retail shelving. ESLs can be used to show relevant prices, product descriptions, and other information. One of the advantages of employing the ESLs instead of the traditional paper price tag is the ease of updating it. With ESL acting as a price tag, you no longer need to wander around the store searching for the right price tag on the right shelf. All you need to do is select the image that will be displayed on the ESL using the ESL management software.

To make things even better, the DIY ESL management system demonstrated in this tutorial doesn’t require an expensive gateway to function. It only needs a Wi-Fi access point, a power supply for the electronic shelf labels, and a computer that can run the ESL management software.

This tutorial is also available on Instructables and Medium.

Supplies

Supplies for the ESL manager:

• An environment that can execute a Python script or a PC with Windows x1

Supplies for one ESL:

• ESP8266 x1
• Either TFT LCD with ILI9341 or TFT LCD with ST7789 x1

Supplies that can be shared by several ESLs:

• Wi-Fi Access Point x1
• 3.3V or 5V Power Supply x1

Algorithm for Image Encryption

The software encrypts the image using AES-256 in CBC mode before sending it to the ESL.

When you click the “Send Image To ESL” button, 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 16 of them at a time using the AES-256 in CBC mode.

Once the software encrypts a line of 320 pixels, it sends that line to the specified ESL.

The ESL then receives the encrypted image line by line, decrypts it, displays it, and saves it into its Flash memory so it can later display that image when powered up.

Prepare the Software *Optional

If you’ve never flashed ESP8266 before you’ll need to configure Arduino IDE and install drivers to upload the firmware to the boards, you can find drivers here:

CH340 driver: https://sparks.gogo.co.nz/ch340.html

CP210x driver: https://www.silabs.com/developers/usb-to-uart-bridge-vcp-drivers

In case you don’t have Arduino IDE, you can download it here:

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

Configuring IDE isn’t a part of this tutorial, you can read about it here:

Installing ESP8266 in Arduino IDE (Windows, Mac OS X, Linux) | Random Nerd TutorialsLearn how to install the ESP8266 board add-on in Arduino IDE in less than 1 minute. This guides works in any operating…randomnerdtutorials.com

Download and Unpack Project Archive

Download the project archive either from SourceForge or Github and unpack its content to the folder of your choosing.

Here are the download links for you:

https://sourceforge.net/projects/esl-management-system/

https://github.com/Northstrix/Electronic-Shelf-Label-Management-System

Download and Install the Required Libraries

ESPAsyncUDP: https://github.com/me-no-dev/ESPAsyncUDP

Adafruit-GFX-Library: https://github.com/adafruit/Adafruit-GFX-Library

Adafruit_ILI9341: https://github.com/adafruit/Adafruit_ILI9341

Adafruit-ST7735-Library: https://github.com/adafruit/Adafruit-ST7735-Library

Adafruit_BusIO: https://github.com/adafruit/Adafruit_BusIO

The process of unpacking libraries is typical. You can unpack the content of the archive into the folder: …\Arduino\libraries. Or open the Arduino IDE, click to the Sketch -> Include Library -> Add.ZIP Library… and select every archive with libraries.

Other required libraries are already present in one way or another.

Install ESP8266 Filesystem Uploader

The primary purpose of the ESP8266 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 archive called ESP8266FS-0.5.0.zip from https://github.com/esp8266/arduino-esp8266fs-plugin/releases

And then extract the content of that archive into the “…\Arduino\Tools\” folder.

After that, restart the Arduino IDE.

Format ESP8266’s Built-In Flash Memory

Allocate some memory for the file system in the “Tools” -> “Flash Size” line, and then click Tools -> ESP8266 Sketch Data Upload. Then click Yes in the pop-up window. The program is going to format the built-in flash memory.

Modify Firmware

Open the .ino file with the firmware for ESP8266 and replace my access point credentials with yours.

Flash ESP8266

Upload the modified firmware to the ESP8266.

Assemble ESL

Assembling the circuit shouldn’t be hard, you only need to connect the display to the ESP8266.

Also, save a jumper wire for the mode selection.

Difference Between the ESL Management Software Versions

Once you get to the “Desktop App” folder, you’ll find the two versions of the ESL management software, so-called desktop apps, written in two programming languages. Each of them has its own pros and cons. Let’s examine them.

C# software:

Pros:

• A bit faster than the one written in Python;
• Encrypts all data stored in the database, including the images;
• Supports custom resolutions.

Con:

• It only runs on Windows.

Python Software:

Pros:

• Should run on Windows, GNU/Linux, Mac OS, Free BSD, and any OS that can execute the Python Script;
• Has a better-looking GUI than its C# equivalent.

Cons:

• A bit slower than its C# equivalent;
• It only encrypts the string data (Label, IP address, UDP port, image encryption key) and doesn’t encrypt images. It instead stores the unencrypted images in the specifically designated folder.

At the end of the day, both apps perform necessary functions such as database maintenance, string data encryption, and encryption of the image that’s being sent to the ESL using the image encryption key of that specific ESL.

Launch the ESL Management Software and Set Your Password

Either launch the “Launch.py” file from the “…V2.0\Desktop App\Python” folder or the “ESL Management System.exe” file from the “…V2.0\Desktop App\C#\ESL Management System\ESL Management System\bin\Debug\net6.0-windows” folder and then set the password to the software.

Note that the cryptographic keys used to encrypt and decrypt data are derived directly from your password. As a result, you will not be able to change your password once it has been set. Additionally, if you lose your password, the data stored in the database will be inaccessible, as the software won’t be able to decrypt it.

Power Up the ESL in Configuration Mode

Put a jumper wire between the “D1” and “G” pins and connect the ESP8266 to the USB Port.

Get ESL Credentials

After powering up the ESL in configuration mode and opening the Serial Terminal, switch the ESL to the operating mode by disconnecting the “D1” pin from the ground and connecting it to the “3V” pin.

After doing so, you should get the ESL’s encryption key and the UDP port. Once the ESL connects to your access point, you should also get its IP address.

Add ESL Credentials to ESL Management Software

To add an ESL to the ESL Management Software database:

• Depending on the software, either click the “Add ESL” button or open the “Add ESL” tab.
• Copy the ESL credentials from the Serial Terminal.
• Paste the encryption key, UDP port, and IP address into the appropriate fields in the pop-up window.
• Name the ESL and select the resolution (for C# Version).
• Click the “Add” button to complete the process.

As you can see on the second screenshot, I’ve added two ESLs to the database.

Make Images for the ESLs

It’s entirely up to you how to make the images for the ESLs.

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/

Select the ESL You Would Like to Display Image On

Select the ESL you would like to display the image on by clicking on its name in the treeview.

Select the Image to Be Displayed on ESL

Click the “Select Image for ESL” button, navigate to the folder with the image you want to display on the ESL, select that image, and click the “Open” button.

Hit the “Send Image To ESL” Button

At that point, click the “Send Image To ESL” button and wait ‘till the image is transferred to the ESL.

The animated GIF shown in this step plays eight times its original speed.

Enjoy the Result

Aside from being functional and utilizing the AES-256 encryption algorithm in CBC mode to encrypt the data that is transferred to the ESLs, the DIY ESL management system demonstrated in this tutorial offers two desktop applications for you to choose from.

I think it’s also worth mentioning that the source code of the DIY electronic shelf label management system 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 the DIY ESL management system 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.