This repository contains a program to create a freely paintable canvas with an Arduino UNO R4 WiFi and a 3.5" ILI9486 touch screen display shield. The contents of the canvas can be saved to and loaded from a server running on your PC/cloud VM. Connections to WiFi can be made on the fly using a full android-style keyboard.
Overall, the project attempts to provide a smartphone-like experience using just the Arduino UNO R4 WiFi and Display Shield, both of which are relatively inexpensive and easy to acquire. This enhances the ability of the Arduino to drive sensors and actuators. Pictures of the App are included the following sections.
![]() |
![]() |
---|---|
Most 3.5" LCD Touch displays use the ILI9486 Display Driver and include a resistive touchscreen. The PCB Layout & silkscreen text may vary slightly between displays. This does not change their behaviour and functionality. This repository depends on the following libraries -
- Adafruit Touch Screen Library to manage touch input
- Adafruit GFX Library for graphics primitives
- This fork of the MCUFriend KBV library to drive the display (this makes it compatible with the UNO R4)
The program has been written using PlatformIO, and has been tested to work on the Arduino UNO R4 WiFi.
Note- While the drawing can be used without any connectivity, saving and loading require a WiFi network with its credentials known, as well as the server program (found at this repository). The server can directly be installed using Rust too, as explained in the next section. It is a lightweight process and does not need any special hardware to run.
For a simpler version of this program that works on the Arduino UNO R4 Minima and UNO R3, see this.
Tip
A detailed tutorial on how to use this repository with video demonstration is available at https://dumblebots.com/2024/07/27/using-3-5-tft-lcd-display-ili9486-arduino-part-5-paint-app/. The tutorial includes a comprehensive explanation of the code.
First, install the necessary libraries using the following command -
pio pkg install
Then, copy the pre-rendered custom fonts in the Fonts/
directory to the appropriate directory within the Adafruit GFX library with the following command -
cp Fonts/* ".pio/libdeps/uno_r4_wifi/Adafruit GFX Library/Fonts"
Finally, run the following commands to build and upload the project -
pio run
pio run --target upload
Optionally, you can create the include/arduino_secrets.h
file with the following macros -
#define DEFAULT_SECRET_SSID "REPLACE WITH YOUR SSID"
#define DEFAULT_SECRET_PASS "REPLACE WITH YOUR PASS"
#define DEFAULT_SERVER_ADDR "0.0.0.0:0"
This file is not tracked by git and are used as default values for textboxes while connected to WiFi.
To save and load images, the server program has to be run on a machine that the Arduino can access over WiFi, such as your PC or a cloud VM with a public facing IP (and open ports). The server has been written in Rust and can be downloaded using cargo
by simply running the following command-
rustup default nightly # required
cargo install arduino-wifi-tft-lcd-server
# To view its useage
dumblebots-wifi-server -h
# To run it in the current directory on the default port (5005)
dumblebots-wifi-server
The source code for the server can be found here.
After uploading the program and rebooting, the device may take 5-10 seconds to show movement, after which the display should show 3 apps, as shown below -
The first app is the drawings are made on the canvas and saved/loaded from the server. It includes a Canvas, Color Selector, Stroke Size Selector and buttons to save, load, clear canvas, manage WiFi and view information, as shown below -
At any time, the clear button (Big red button marked "C") can be used to clear the contents of the canvas. After the drawing has been made, the save button (green button marked "save") can be used to open a prompt from which 1 of 6 slots needs to be selected to save the drawing to. In reality, the program supports 256 slots but only 6 are shown in the GUI to maintain simplicity. If a slot is selected while the device is not connected to WiFi, the prompt will inform the user that a connection with the server could not be established, as shown -
To connect to WiFi, click on the button marked WiFi (below save) or go to the "Device Settings" App in the home screen. Type the WiFi SSID, WiFi Password and Server Address in the boxes using the keyboard. The address is printed by the server when it starts. Entering an incorrect SSID/Password will result in a connection failure. Entering an incorrectly formatted address will also result in a failure. Finally, click on the connect button, as shown -
Now, images can be saved and loaded from the server (as long as it is left running), as shown below -
The IP Address of the Device can be seen in the "Device Information" App.
Logically, the code is organized into three parts-
- GUI Framework- This consists of various classes and interfaces to create a widget-tree in the app and automatically manage re-painting widgets and event propagation. Since display libraries usually only support drawing basic shapes/lines, having a GUI framework greatly simplifies application development. This is found in
lib/gui
. - Touchscreen Controller- This provides a single class to use the touchscreen. The class provided by this library is a wrapper around the Adafruit Touchscreen library and provides events for the GUI Framework. This is found
include/touchscreen_driver.h
andsrc/touchscreen_driver.cpp
. - Application Code- This consists of the application, including the instantiation, placement, styling of widgets and callbacks. It can be found in
src/main.cpp
.
For a detailed look at the GUI framework's architecture, see lib/gui/README.md.