This repository contains a program to create a freely paintable canvas with an Arduino UNO R3/R4 and a 3.5" touch screen display shield, as shown below -

Most 3.5" TFT 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 on the Arduino UNO R3, Arduino UNO R4 Minima & Arduino UNO R4 WiFi.

Since this project has been written using PlatformIO by default, simply run the following commands to fetch the libraries, build the project and upload the program -

pio pkg install
pio run
pio run --target upload

Create a new sketch and copy the contents of src/main.cpp from this repository into the default .ino file. Create a new tab/file in the IDE named constants.h and copy the contents of src/constants.h from this repository into this file.

Install the Adafruit Touch Screen Library and Adafruit GFX Library from the Library Manager (under Sketch>Include Library>Manage Libraries...)

Download this repository as a ZIP file and install it by navigating to Sketch>Include Library>Add .ZIP Library, and selecting the downloaded file from the file explorer.

After this, you can Build and Upload the program as usual.

As soon as the program is uploaded, the display should turn black and the following widgets should be displayed -

Widgets on canvas app

• Color Selection Grid with 9 colors to choose from (bottom-left of the screen)
• Thickness Selection Grid with 4 sizes to choose from (bottom-right of the screen)
• Paintable Canvas to paint in covering roughly the top two-thirds of the entire screen

To choose a color/pen-size, simply tap its icon. The icons in the thickness selection grid display the currently active color.

The colors being shown can be changed by changing the following values in src/constants.h

const uint16_t PAINT_COORS[][3] = {
    {0, 0, RED},    {35, 0, GREEN},     {70, 0, BLUE},      // colors in top-row
    {0, 35, CYAN},  {35, 35, MAGENTA},  {70, 35, YELLOW},   // colors in middle-row
    {0, 70, WHITE}, {35, 70, GRAY},     {70, 70, BLACK}     // colors in bottom-row
};

The pen-sizes being shown can be changed by changing the following values in src/constants.h

const uint16_t THICKNESS_OPTIONS[] = {3, 5, 7, 9};

Note that the above two snippets contain comments for clarity which are not present in the source file.

Some common problems and their solutions -