Fast Display Prototyping using the Arduino IDE Serial Monitor for Adafruit GFX and TFT_eSPI

Streamline your development process! This library enables rapid prototyping of graphical functions by utilizing the Arduino IDE's serial monitor to communicate via the serial port with any display supported by Adafruit GFX and TFT_eSPI libraries . It eliminates the need for time-consuming microcontroller uploads when testing graphical functions, you can focus on refining your designs more efficiently.

Youtube Tutorial

https://youtu.be/09negq9Zk_c

Usage

Simply use the serial monitor to send graphical commands to your microcontroller, in the example below the commands x;sc0,0;ttHello World! when sent will clear the display and show Hello World! Make sure the option No Line Endind is selected in the Serial Monitor.

Type of Displays supported

All display supported by Adafruit GFX and TFT_eSPI libraries

Contents

1. Installation
2. Code Setup Adafruit GFX
3. Code Setup TFT_eSPI
4. Examples
5. Serial Commands Reference
6. Using Fonts
7. Library Configuration
8. Library Size
9. Serial Buffer Limitation

Installation

You can easily install the library in the Arduino IDE using the Library Manager, just search for "fastdisplay" and locate the FastDisplayPrototyping library and click the "Install" button.

Code Setup Adafruit GFX

ℹ️ You can also use get this setup code with the examples provided with the library in the Arduino IDE through the menu File > Examples > FastDisplayPrototyping

// Core graphics library
#include <Adafruit_GFX.h>     

// -- Hardware-specific library & Definitions Section
// -- Change this section according to your type of display
#include <Adafruit_TFTLCD.h>  

#define LCD_CS A3 // Chip Select goes to Analog 3
#define LCD_CD A2 // Command/Data goes to Analog 2
#define LCD_WR A1 // LCD Write goes to Analog 1
#define LCD_RD A0 // LCD Read goes to Analog 0
#define LCD_RESET A4 // Can alternately just connect to Arduino's reset pin

Adafruit_TFTLCD tft(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET); // Initialize the display
// -- End of the Hardware-specific Section

// Fast Display Prototyping library
#define OUTPUT_CODE_ON_SERIAL // Output graphical functions on the Serial Monitor, comment it to disable
#include <FastDisplayPrototyping.h>

// Initialize the display prototyping library
FastSerialDisplay sDisplay(&tft, "tft");

void setup() {
  Serial.begin(9600); // This line mandatory for using the display prototyping library, change the baud rate if needed

  tft.begin();
  tft.setRotation(0);

  // Your specific code here
}

void loop(void) {
  sDisplay.readCommandsFromSerial(); // This line mandatory for using the display prototyping library
  // Your specific code here
}

Code Setup TFT_eSPI

ℹ️ You can also use get this setup code with the examples provided with the library in the Arduino IDE through the menu File > Examples > FastDisplayPrototyping

// Core graphics library
// Don't forget to select the driver of your display in the User_Setup_Select.h file 
#include <TFT_eSPI.h>

// Initialize the display
TFT_eSPI tft = TFT_eSPI(); 

// Fast Display Prototyping library
#define OUTPUT_CODE_ON_SERIAL         // Output graphical functions on the Serial Monitor, comment it to disable
#include <FastDisplayPrototyping.h>

// Initialize the display prototyping library
FastSerialDisplay sDisplay(&tft,"tft");

void setup() {
  Serial.begin(115200);  // This line mandatory for using the display prototyping library, change the baud rate if needed

  tft.begin();
  tft.setRotation(0);

  // Your specific code here
}

void loop(void) {
  sDisplay.readCommandsFromSerial(); // This line mandatory for using the display prototyping library
  // Your specific code here
}

Examples

ℹ️ You can send multiple graphical commands through the Serial Monitor by seperating them with a semicolon ;

Type this in the Serial Monitor	Result on the display
x;sc10,10;ttHello World!	Clear screen & print text on row 10
x;#ffe0;cf50,60,10	Clear screen & Yellow filled circle at position 50,60 radius of 10
x;#077f;ri10,10,40,40,10	Clear screen & Blue rounded rectangle outline at position 10,10, width 40, height 40, corner radius 10

Serial Commands Reference

ℹ️ You can replace any numeric value with w, h, c or m and it will be replaced by the width, the height, half of the height or half of the width of the display respectively. For example lhc,10,w
ℹ️ For most serial commands, you don't need to specify a color, as they will use the current color set by the # serial command. This reduces the amount of typing needed
ℹ️ Color format is RGB565, you can use this Color Name Defintions Reference or RGB565 Color Picker (There are many others on the web)
ℹ️ A graphical function supported by Adafruit GFX is indicated with and supported by TFT_eSPI is indicated with

Graphics functions	Corresponding Serial Command Example	Description
Text Functions
setTextColor(color)	#00FF	Set Text and Graphic color
setCursor(x,y)	sc10,20	Set the text cursor at position x,y
print(string)	ttHello World!	Print string at current cursor position using the current font
setTextSize(size)	ts3	Set character size multiplier (increases pixel size)
Basic Drawing Functions
fillScreen(0x0000)	x	Clear the screen to black
fillScreen(color)	y	Fill the screen with the current color
drawPixel(x,y,color)	dp10,10	Draw a pixel at position x,y using the current color
drawLine(x1,y1,x2,y2,color)	dl10,10,50,50	Draw a line between 2 points (x1,y1,x2,y2) using the current color
drawFastHLine(x,y,l,color)	lh20,30,100	Draw a horizontal line from position x,y of length l using the current color
drawFastVLine(x,y,l,color)	lv20,30,100	Draw a vertical line from position x,y of length l using the current color
Circle Functions
drawCircle(x,y,r,color)	ch50,50,30	Draw a circle outline with the center at position x,y of radius r using the current color
fillCircle(x,y,r,color)	cf75,50,30	Draw a filled circle with the center at position x,y of radius r using the current color
drawSmoothCircle(x,y,r,fgColor,bgColor)	ci65,35,13,77e0,0	Draw an anti-aliased circle outline with the center at position x,y of radius r using a foreground color fgColor background color bgColor
fillSmoothCircle(x,y,r,fgColor,bgColor)	cj65,75,13,07e5,0	Draw an anti-aliased filled circle with the center at position x,y of radius r using a foreground color fgColor background color bgColor
drawEllipse(x,y,r1,r2,color)	ce75,75,25,50	Draw an ellipse outline with the center at position x,y of horizontal radius r1 and vertical radius r2 using the current color
fillEllipse(x,y,r1,r2,color)	cg75,75,25,50	Draw a filled ellipse with the center at position x,y of horizontal radius r1 and vertical radius r2 using the current color
drawArc(x,y,r1,r2,startAngle,endAngle, fgColor,bgColor,smoothArc)	ca50,50,50,40,0, 180,00ff,0000,1	Draw an arc with the center at position x,y outer radius of r1 inner radius of r2 starting at angle (in degrees) startAngle ending at endAngle using a foreground color fgColor background color bgColor and with anti-aliasing (smoothArc=1) or no anti-aliasing (smoothArc=0). The start angle may be larger than the end angle. Arcs are always drawn clockwise from the start angle.
drawSmoothArc(x,y,r1,r2,startAngle,endAngle, fgColor,bgColor,roundEnds)	cb50,50,50,40,0, 180,00ff,0000,1	Draw an anti-aliased (smooth) arc with the center at position x,y outer radius of r1 inner radius of r2 starting at angle (in degrees) startAngle ending at endAngle using a foreground color fgColor background color bgColor and with round ends (roundEnds=1) or square ends(roundEnds=0). The start angle may be larger than the end angle. Arcs are always drawn clockwise from the start angle.
Rectangle Functions
drawRect(x,y,w,h,color)	rh20,20,40,30	Draw a rectangle outline at position x,y of width w and height h using the current color
fillRect(x,y,w,h,color)	rf20,20,40,30	Draw a filled rectangle at position x,y of width w and height h using the current color
drawRoundRect (x,y,w,h,r,color)	ri20,20,40,30,5	Draw a rounded corner rectangle outline at position x,y of width w, height h and radius r using the current color
fillRoundRect (x,y,w,h,r,color)	rj20,20,40,30,5	Draw a filled rounded corner rectangle at position x,y of width w, height h and radius r using the current
drawSmoothRoundRect(x,y,r,ir,w,h, fgColor,bgColor)	rs70,60,5,8,20,30,f820,0	Draw an anti-aliased rounded corner rectangle outline at position x,y radius outer corner of r, radius inner corner ir, of width w, height husing a foreground color fgColor background color bgColor. The rectangle that has a line thickness of r-ir+1
fillSmoothRoundRect(x,y,w,h,r, fgColor,bgColor)	rt80,100,20,20,5,fde0,0	Draw an anti-aliased filled rounded corner rectangle at position x,y, width w, height h, corner radius of r using a foreground color fgColor background color bgColor.
Triangle Functions
drawTriangle (x1,y1,x2,y2,x3,y3,color)	gh10,10,20,20,30,10	Draw a triangle outline using 3 points x1,y1,x2,y2,x3,y3 (vertices) using the current color
fillTriangle (x1,y1,x2,y2,x3,y3,color)	gf10,10,20,20,30,10	Draw a filled triangle using 3 points x1,y1,x2,y2,x3,y3 (vertices) using the current color

Using Fonts

The library utilizes the currently defined font in the code. Support for handling multiple preloaded fonts is planned for the upcoming release of the library.

Library Configuration

By default, the graphical commands corresponding to the serial commands sent are displayed in the Serial Monitor, allowing you to easily copy and paste them into your code. If you wish to disable this feature and reduce the library size, you can comment out this definition:

// #define OUTPUT_CODE_ON_SERIAL  

To facilitate the process of copying graphical commands into your code, you can initialize the library using the variable that represents the display in your code. For instance, if you have a variable named "display" for the display in your code, you can initialize the library as follows:

// Initialize the display
TFT_eSPI tft = TFT_eSPI(); 

// Initialize the display prototyping library
serialDisplay sDisplay(&tft);

// Initialize the display
Adafruit_TFTLCD display(LCD_CS, LCD_CD, LCD_WR, LCD_RD, LCD_RESET);

// Initialize the display prototyping library
serialDisplay sDisplay(&tft,"display"); 

All the graphical commands will be preceded by the "display" keyword, for example display.fillSmoothRoundRect(80,100,20,20,5,0xfde0,0x0);

Library Size

The library utilizes a wide range of graphical functions, which can pose a challenge for microcontrollers with limited memory, such as the Arduino Uno or Nano. In such cases, you can use the library within an empty sketch to prototype your designs and then copy the code output from the Serial Monitor into your main sketch. This approach helps you avoid potential memory issues while still benefiting from the library's functionality.

Serial Buffer Limitation

Arduino Uno and Nano, both equipped with the ATmega328P microcontroller, have a default serial buffer size of 64 bytes. When sending data through the Serial Monitor it is crucial to be aware of this limitation, as attempting to send a message larger than 64 bytes can lead to data loss or unexpected behavior.

On the ESP32, the default serial buffer size is typically set to 256 bytes.