In this tutorial, I will demonstrate how to transfer an encrypted image from your PC to the display connected to the microcontroller via Wi-Fi using the UDP protocol.

Supplies

PC x1
Wi-Fi Access Point x1
ESP8266 x1
2.4 Inch TFT LCD with ILI9341 x1
4.7k resistor x1
Button x1

Step 1: How It Works

UDP stands for User Datagram Protocol. It is a simple and connectionless protocol used for sending data over the network that does not guarantee the delivery of packets. I have chosen UDP over TCP because it is faster. Before encrypted data can be sent over the air, a common encryption/decryption key must be established. In this tutorial, I'll call it the "Security Key" for convenience. It is also necessary for the software on the PC to know the IP address and the UDP port of the receiver board. Once these three variables have been set up, you can finally send an image. To do this, select an image you want to send, and the software on your PC will frame it into a 320x240px picture box.

When you are done adjusting the image and press the "Send Image" button, the software takes the first row of the image from the picture box. It extracts red, green, and blue (24-bit) 888 color values of each pixel and converts each pixel into (16-bit) 565 colors. It then splits each 16-bit color value into two 8-bit ones and adds them into an array. The resulting 640-element array is passed to the Serpent encryption algorithm that works in CBC mode. When Serpent gets that array, it encrypts it and puts the ciphertext to the array that can be accessed by the functions that send encrypted data to the ESP8266. When the sending function does its job, ESP8266 receives a 656-byte long packet (16-byte encrypted IV + 640-byte encrypted row), decrypts it, and displays the decrypted row on the LCD with ILI9341 connected to the ESP8266.

The same operation is done for each row.

*Why I didn't use the block cipher in the ECB mode (and you shouldn't too):

Step 2: Prepare the Arduino IDE *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:

https://randomnerdtutorials.com/how-to-install-esp8266-board-arduino-ide/

Step 3: Download and Unpack Archive With the Firmware

Download the archive with the microcontroller firmware and the UDP Image Uploader software from SourceForge.

Here's the link for you: https://sourceforge.net/projects/udp-image-uploader/

Unpack the content of archive to any folder of your choosing after downloading it.

Step 4: Download and Install the Required Libraries

ESP8266TrueRandom: https://github.com/marvinroger/ESP8266TrueRandom

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_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.

Step 5: Modify Firmware

Open the "Firmware_for_ESP8266.ino" file from the "UDP Image Uploader with Serpent Encryption Algorithm in CBC Mode\Firmware_for_ESP8266" folder and replace my access point credentials with yours.

Step 6: Flash ESP8266

Upload the modified firmware to the ESP8266.

Step 7: Assemble the Circuit

Assemble the circuit according to the circuit diagram above.

Step 8: Get Security Key, IP Address, and UDP Port From ESP

The software on your PC needs the security key so it can encrypt an image for the ESP8266. To get the security key from the ESP8266:

Connect ESP8266 to your computer;
Open the Serial Terminal with the baud rate 115200;
Hold the button connected to the D0 pin of the ESP8266, and reboot the ESP8266;
Once you see the "ESP8266 will generate a security key and print it to the Serial Terminal in 5 seconds" inscription on the display, you can let go of the button.

Note that the security key is only printed to the Serial Terminal at the moment of its generation. If you lose the security key, you'll have to generate a new one.

The IP address assigned to the board and the UDP port on which the board is listening will be displayed on the LCD as soon as the board connects to the access point.

To make ESP8266 listen for packets on a different UDP port, hold the button connected to the D0 pin after ESP connects to Wi-Fi and reboot the board to apply the changes.

Step 9: Launch the Software and Set Security Key

Launch the "UDPImageUploader.exe" file from the "UDP Image Uploader with Serpent Encryption Algorithm in CBC Mode\Software\bin\Release" folder.

Click "Yes" in the pop-up window. Paste the security key into the text field and press "Continue".

Step 10: Set Receiver IP

Click the "Set Receiver IP" button, then paste the IP address displayed on the LCD with ILI9341 into the text field in the pop-up window, and click the "Continue" button.

Step 11: Set UDP Port

Click the "Set UDP Port" button, then paste the UDP port displayed on the LCD with ILI9341 into the text field in the pop-up window, and click the "Continue" button.

Step 12: Load Image to Software

Click the "Open Image" button, navigate to the image you'd like to send to the ESP8266, select it, and click the "Open" button.

Or you can drag and drop the image to the "Preview" picture box instead.

Step 13: Send Image

Once you have set up the necessary variables and loaded the image to the picture box, hit the "Send Image Over UDP" button to start the uploading process.

It takes roughly 82 seconds for the image to be encrypted, sent, decrypted, and displayed.

The GIF shown in this step is sped up to be 8 times faster than the original video.

Step 14: Enjoy the Result

Even though it takes over a minute for an image to fill the screen, the method demonstrated in this tutorial is fully functional and ensures that every transmitted pixel is encrypted.

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

The GIF shown in this step is sped up to be 16 times faster than the original video.

*Credit for photos

https://www.pexels.com/photo/bird-s-eye-view-of-city-during-daytime-2815170/

https://unsplash.com/photos/landscape-photography-of-cityscape-ADU_kR0RiBI

https://pixabay.com/photos/architecture-city-townscape-3251733/