With TFT_eSPI, you can create a wide range of graphics and UI elements, from simple shapes and text to complex user interfaces.

Drawing Shapes and Graphics

TFT_eSPI provides a variety of functions for drawing shapes and graphics on the TFT display. These include:

Shapes

Drawing

• drawPixel(): Draws a single pixel at a specified location.
• drawLine(): Draws a line between two specified points. See also drawFastHLine() and drawFastVLine().
• drawRect(): Draws a rectangle with specified dimensions and location.
• drawCircle(): Draws a circle with specified center and radius.
• drawTriangle(): Draws a triangle with specified vertices.
• drawRoundRect(): Draws a rounded rectangle with specified dimensions and location.

Filling

• fillScreen(): Fills the entire screen with a specified color.
• fillRect(): Fills a rectangle with a specified color.
• fillCircle(): Fills a circle with a specified color.
• fillTriangle(): Fills a triangle with a specified color.

These functions allow you to create complex graphics and shapes, from simple icons to intricate designs.

Graphics Coordinates and Referential

In TFT_eSPI, the referential is the coordinate system used to position and orient graphical elements on the TFT display. The referential is defined by the following axes:

• X-axis: Horizontal axis, increasing from left to right.
• Y-axis: Vertical axis, increasing from top to bottom.
• Origin: The point where the X and Y axes intersect, located at the top-left corner of the display.

Graphics coordinates are used to position and size graphical elements on the TFT display. Coordinates are specified in pixels, with the origin (0, 0) located at the top-left corner of the display.

• x: The X-coordinate of the graphical element, increasing from left to right.
• y: The Y-coordinate of the graphical element, increasing from top to bottom.
• width: The width of the graphical element in pixels.
• height: The height of the graphical element in pixels.

Axis Resolution

The axis resolution determines the number of pixels per unit of measurement on the X and Y axes. In TFT_eSPI, the axis resolution is fixed at 1 pixel per unit.

Dimensions and Graphics

The dimensions of a graphical element refer to its width and height in pixels.

• getWidth(): Returns the width of the graphical element in pixels.
• getHeight(): Returns the height of the graphical element in pixels.

Text Rendering and Styling

TFT_eSPI also provides a range of functions for rendering and styling text on the TFT display. These include:

• setTextSize(): Sets the size of the text.
• setTextColor(): Sets the color of the text.
• setTextWrap(): Enables or disables text wrapping.
• drawString(): Draws a string of text at a specified location.
• drawChar(): Draws a single character at a specified location.
• setTextFont(): Sets the font used for rendering text.

These functions allow you to customize the appearance of text on the TFT display, from font size and color to text wrapping and alignment.

Creating UI Elements (Buttons, Sliders, etc.)

TFT_eSPI provides a range of functions for creating UI elements, such as buttons, sliders, and other interactive components. These UI elements are provided in the TFT_eWidget class, available in another library. These include: