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 ![GFX] and TFT_eSPI libraries ![ESPI]. 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. Usage

Type of Displays supported

All display supported by Adafruit GFX and TFT_eSPI libraries

Installation
Code Setup Adafruit GFX ![GFX]
Code Setup TFT_eSPI ![ESPI]
Examples
Serial Commands Reference
Using Fonts
Library Configuration
Library Size
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. Installation

Code Setup Adafruit GFX ![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 ![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 ![GFX] and supported by TFT_eSPI is indicated with ![ESPI]

| Graphics functions | Corresponding Serial Command Example | Description | |--------------------|---------------------------------------|-------------| | Text Functions | | |
| setTextColor(color) ![GFX]![ESPI] | #00FF | Set Text and Graphic color | ✓ | ✓ | | setCursor(x,y) ![GFX]![ESPI] | sc10,20 | Set the text cursor at position x,y| | print(string) ![GFX]![ESPI] | ttHello World! | Print string at current cursor position using the current font | | setTextSize(size) ![GFX]![ESPI] | ts3 | Set character size multiplier (increases pixel size) | | Basic Drawing Functions | | |
| fillScreen(0x0000) ![GFX]![ESPI] | x | Clear the screen to black | | fillScreen(color) ![GFX]![ESPI] | y | Fill the screen with the current color | | drawPixel(x,y,color) ![GFX]![ESPI] | dp10,10 | Draw a pixel at position x,y using the current color | | drawLine(x1,y1,x2,y2,color) ![GFX]![ESPI] | dl10,10,50,50 | Draw a line between 2 points (x1,y1,x2,y2) using the current color | | drawFastHLine(x,y,l,color) ![GFX]![ESPI] | lh20,30,100 | Draw a horizontal line from position x,y of length l using the current color | | drawFastVLine(x,y,l,color) ![GFX]![ESPI] | 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) ![GFX]![ESPI] | 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) ![GFX]![ESPI] | 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) ![ESPI] | 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) ![ESPI] | 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) ![ESPI] | 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) ![ESPI] | 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) ![ESPI] | 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) ![ESPI] | 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) ![GFX]![ESPI] | 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) ![GFX]![ESPI] | rf20,20,40,30 | Draw a filled rectangle at position x,y of width w and height h usin

FastDisplayPrototyping

Install / Use

README