Touchscreen Draw

This example demonstrates how to use the built-in touchscreen on the Inkplate 4TEMPERA to draw directly on the screen. It turns the device into a simple sketchpad using finger or stylus input.

ℹ️

The touchscreen on Inkplate 4TEMPERA uses a capacitive controller and supports multi-touch gestures. This example focuses on basic single-point drawing.

---

Example Code

The following sketch initializes the display and touchscreen and allows the user to draw by touching the screen. Touch coordinates are used to draw small black circles at the touched location.

/*
    Inkplate4TEMPERA_Touchscreen_Draw example for Soldered Inkplate 4TEMPERA

    This sketch shows how to draw using the touchscreen on Inkplate 4TEMPERA.
    Touch the screen to leave a trail of black dots wherever you move your finger.

    Select "Soldered Inkplate 4TEMPERA" from Tools -> Board menu.

    Want to learn more about Inkplate? Visit www.inkplate.io
    Looking to get support? Write on our forums: https://forum.soldered.com/
*/

#include "Inkplate.h" // Include Inkplate library

Inkplate display; // Create display object

void setup()
{
    display.begin();               // Initialize the display
    display.clearDisplay();        // Clear the display
    display.display();             // Update the screen
}

void loop()
{
    // Check if the screen is being touched
    if (display.ts.touched())
    {
        TPPoint p = display.ts.getPoint(0); // Get the first touch point

        // Draw a small circle at the touch location
        display.fillCircle(p.x, p.y, 2, BLACK);
        display.display(); // Refresh the screen to show the change
    }

    delay(20); // Small delay to reduce CPU usage
}

---

display.ts.touched()

Checks if the touchscreen is being touched.

Returns type: bool

display.ts.getPoint()

Returns the TPPoint (touch point) at a given index. Typically only index 0 is used for single touch.

Returns type: TPPoint

Function parameters:

Type	Name	Description
int	index	Touch point index (0 for the first point).

display.fillCircle()

Draws a filled circle at the specified coordinates.

Returns type: void

Function parameters:

Type	Name	Description
int16_t	x	X-coordinate of the circle center.
int16_t	y	Y-coordinate of the circle center.
int16_t	r	Radius of the circle.
uint16_t	color	Color of the circle.

---

Full example

You can find the complete example in the Inkplate Arduino library repository:

Inkplate4TEMPERA_Touchscreen_Draw

Draw on the screen using your finger with Inkplate 4TEMPERA's touchscreen.