FabGL
ESP32 VGA Controller and Graphics Library
fabgl::CanvasClass Class Reference

A class with a set of drawing methods. More...

#include <canvas.h>

Public Member Functions

void clear ()
 Fill the entire canvas with the brush color. More...
 
void copyRect (int sourceX, int sourceY, int destX, int destY, int width, int height)
 Copy a screen rectangle to the specified position. More...
 
void drawBitmap (int X, int Y, Bitmap const *bitmap)
 Draw a bitmap at specified position. More...
 
void drawChar (int X, int Y, char c)
 Draw a character at specified position. More...
 
void drawEllipse (int X, int Y, int width, int height)
 Draw an ellipse specifying center and size, using current pen color. More...
 
void drawGlyph (int X, int Y, int width, int height, uint8_t const *data, int index=0)
 Draw a glyph at specified position. More...
 
void drawLine (int X1, int Y1, int X2, int Y2)
 Draw a line specifying initial and ending coordinates. More...
 
void drawPath (Point const *points, int pointsCount)
 Draw a sequence of lines. More...
 
void drawRectangle (int X1, int Y1, int X2, int Y2)
 Draw a rectangle using the current pen color. More...
 
void drawText (int X, int Y, char const *text, bool wrap=false)
 Draw a string at specified position. More...
 
void drawText (FontInfo const *fontInfo, int X, int Y, char const *text, bool wrap=false)
 Draw a string at specified position. More...
 
void drawTextFmt (int X, int Y, const char *format,...)
 Draw formatted text at specified position. More...
 
void fillEllipse (int X, int Y, int width, int height)
 Fill an ellipse specifying center and size, using current brush color. More...
 
void fillPath (Point const *points, int pointsCount)
 Fill the polygon enclosed in a sequence of lines. More...
 
void fillRectangle (int X1, int Y1, int X2, int Y2)
 Fill a rectangle using the current brush color. More...
 
FontInfo const * getFontInfo ()
 Get info about currently selected font. More...
 
int getHeight ()
 Return the canvas height in pixels. More...
 
int getWidth ()
 Return the canvas width in pixels. More...
 
void lineTo (int X, int Y)
 Draw a line starting from current pen position. More...
 
void moveTo (int X, int Y)
 Move current pen position to the spcified coordinates. More...
 
void scroll (int offsetX, int offsetY)
 Scroll pixels horizontally and/or vertically. More...
 
void selectFont (FontInfo const *fontInfo)
 Select a font to use for the next text drawings. More...
 
void setBrushColor (uint8_t red, uint8_t green, uint8_t blue)
 Set brush (background) color specifying color components. More...
 
void setBrushColor (Color color)
 Set brush (background) color using a color name. More...
 
void setGlyphOptions (GlyphOptions options)
 Set drawing options for the next glyphs. More...
 
void setPaintOptions (PaintOptions options)
 Set paint options. More...
 
void setPenColor (uint8_t red, uint8_t green, uint8_t blue)
 Set pen (foreground) color specifying color components. More...
 
void setPenColor (Color color)
 Set pen (foreground) color using a color name. More...
 
void setPixel (int X, int Y)
 Fill a single pixel with the pen color. More...
 
void setScrollingRegion (int X1, int Y1, int X2, int Y2)
 Define the scrolling region. More...
 
void swapBuffers ()
 Swap screen buffer when double buffering is enabled. More...
 
void swapRectangle (int X1, int Y1, int X2, int Y2)
 Swap pen and brush colors of the specified rectangle. More...
 
void waitCompletion (bool waitVSync=true)
 Wait for drawing queue to become empty. More...
 

Static Public Member Functions

static FontInfo const * getPresetFontInfo (int columns, int rows)
 Get the font info that best fits the specified number of columns and rows. More...
 

Detailed Description

A class with a set of drawing methods.

This class interfaces directly to the VGA controller and provides a set of primitives to paint lines, circles, etc. and to scroll regions, copy rectangles and draw glyphs.
Origins are at top left, starting from (0, 0) up to (Canvas Width - 1, Canvas Height - 1).

Example:

// Setup pins and resolution (5 GPIOs hence we have up to 8 colors)
VGAController.begin(GPIO_NUM_22, GPIO_NUM_21, GPIO_NUM_19, GPIO_NUM_18, GPIO_NUM_5);
VGAController.setResolution(VGA_640x350_70Hz);

// Paint a green rectangle with red border
Canvas.setPenColor(Color::BrightRed);
Canvas.setBrushColor(Color::BrightGreen);
Canvas.fillRectangle(0, 0, Canvas.getWidth() - 1, Canvas.getHeight() - 1);
Canvas.drawRectangle(0, 0, Canvas.getWidth() - 1, Canvas.getHeight() - 1);

Member Function Documentation

◆ clear()

void fabgl::CanvasClass::clear ( )

◆ copyRect()

void fabgl::CanvasClass::copyRect ( int  sourceX,
int  sourceY,
int  destX,
int  destY,
int  width,
int  height 
)

Copy a screen rectangle to the specified position.

Source and destination rectangles can overlap. The copy is performed pixel by pixel and it is a slow operation.

Parameters
sourceXLeft source rectangle horizontal position.
sourceYTop source rectangle vertical position.
destXLeft destination rectangle horizontal position.
destYTop destination rectangle vertical position.
widthRectangle horizontal size.
heightRectangle vertical size.

◆ drawBitmap()

void fabgl::CanvasClass::drawBitmap ( int  X,
int  Y,
Bitmap const *  bitmap 
)

Draw a bitmap at specified position.

A bitmap is an rectangular image with one byte per pixel. Each pixel has up to 64 colors (2 bits per channel) and can have 4 level of transparency. At the moment only level 0 (full transparent) and level 3 (full opaque) is supported.

Parameters
XHorizontal position of bitmap left side.
YVertical position of bitmap top side.
bitmapPointer to bitmap structure.
Examples:
CollisionDetection/CollisionDetection.ino, and SpaceInvaders/SpaceInvaders.ino.

◆ drawChar()

void fabgl::CanvasClass::drawChar ( int  X,
int  Y,
char  c 
)

Draw a character at specified position.

drawChar() uses currently selected font (selectFont() method) and currently selected glyph options (setGlyphOptions() method).

Parameters
XHorizontal position of character left side.
YVertical position of character top side.
cCharacter to draw (an index in the character font glyphs set).

Example:

// Draw a 'C' at position 100, 100
Canvas.drawChar(100, 100, 'C');
Examples:
SpaceInvaders/SpaceInvaders.ino.

◆ drawEllipse()

void fabgl::CanvasClass::drawEllipse ( int  X,
int  Y,
int  width,
int  height 
)

Draw an ellipse specifying center and size, using current pen color.

Parameters
XHorizontal coordinate of the ellipse center.
YVertical coordinate of the ellipse center.
widthEllipse width.
heightEllipse height.

Example:

// Paint a yellow ellipse
Canvas.setPenColor(Color::BrightYellow);
Canvas.drawEllipse(100, 100, 40, 40);
Examples:
SimpleTerminalOut/SimpleTerminalOut.ino.

◆ drawGlyph()

void fabgl::CanvasClass::drawGlyph ( int  X,
int  Y,
int  width,
int  height,
uint8_t const *  data,
int  index = 0 
)

Draw a glyph at specified position.

A Glyph is a monochrome bitmap (1 bit per pixel) that can be painted using pen (foreground) and brush (background) colors.
Various drawing options can be set using CanvasClass.setGlyphOptions() method.
Glyphs are used by TerminalClass to render characters.

Parameters
XHorizontal coordinate where to draw the glyph.
YVertical coordinate where to draw the glyph.
widthHorizontal size of the glyph.
heightVertical size of the glyph.
dataMemory buffer containing the glyph. Each line is byte aligned. The size must be "(width + 7) / 8 * height" (integer division!).
indexOptional index inside data. Use when the buffer contains multiple glyphs.

Example:

// draw an 'A' using the predefined font to fit 80x25 screen text
Canvas.setPenColor(Color::BrightGreen);
const fabgl::FontInfo * f = Canvas.getPresetFontInfo(80, 25);
Canvas.drawGlyph(0, 0, f->width, f->height, f->data, 0x41);

// draw a 12x8 sprite
const uint8_t enemy[] = {
  0x0f, 0x00, 0x7f, 0xe0, 0xff, 0xf0, 0xe6, 0x70, 0xff,
  0xf0, 0x39, 0xc0, 0x66, 0x60, 0x30, 0xc0,
};
Canvas.setPenColor(Color::BrightYellow);
Canvas.drawGlyph(50, 80, 12, 8, enemy);

◆ drawLine()

void fabgl::CanvasClass::drawLine ( int  X1,
int  Y1,
int  X2,
int  Y2 
)

Draw a line specifying initial and ending coordinates.

The line has the current pen color.

Parameters
X1Starting horizontal coordinate.
Y1Starting vertical coordinate.
X2Ending horizontal coordinate.
Y2Ending vertical coordinate.

Example:

// Paint a blue X over the whole canvas
Canvas.setPenColor(Color::BrightBlue);
Canvas.drawLine(0, 0, Canvas.getWidth() - 1, Canvas.getHeight() - 1);
Canvas.drawLine(Canvas.getWidth() - 1, 0, 0, Canvas.getHeight() - 1);
Examples:
SimpleTerminalOut/SimpleTerminalOut.ino, and SpaceInvaders/SpaceInvaders.ino.

◆ drawPath()

void fabgl::CanvasClass::drawPath ( Point const *  points,
int  pointsCount 
)

Draw a sequence of lines.

Because the path is drawn on VSync (vertical retracing) the provided array of points must survive until the path is completely painted.
To avoid it, application can disable drawing on vsync (calling VGAControllerClass.enableBackgroundPrimitiveExecution()) or just wait until all the drawing have been completed(calling CanvasClass.waitCompletion()).

Parameters
pointsA pointer to an array of Point objects.
pointsCountNumber of points in the array.

Example:

Point points[3] = { {10, 10}, {20, 10}, {15, 20} };
Canvas.setPenColor(Color::Red);
Canvas.drawPath(&points, 3);
Canvas.waitCompletion();

◆ drawRectangle()

void fabgl::CanvasClass::drawRectangle ( int  X1,
int  Y1,
int  X2,
int  Y2 
)

Draw a rectangle using the current pen color.

Parameters
X1Top left horizontal coordinate.
Y1Top left vertical coordiante.
X2Bottom right horizontal coordinate.
Y2Bottom right vertical coordiante.

Example:

// Paint a yellow rectangle
Canvas.setPenColor(Color::BrightYellow);
Canvas.drawRectangle(10, 10, 100, 100);
Examples:
ModelineStudio/ModelineStudio.ino, SimpleTerminalOut/SimpleTerminalOut.ino, and SpaceInvaders/SpaceInvaders.ino.

◆ drawText() [1/2]

void fabgl::CanvasClass::drawText ( int  X,
int  Y,
char const *  text,
bool  wrap = false 
)

Draw a string at specified position.

drawText() uses currently selected font (selectFont() method) and currently selected glyph options (setGlyphOptions() method).

Parameters
XHorizontal position of first character left side.
YVertical position of first character top side.
textString to draw (indexes in the character font glyphs set).
wrapIf true text is wrapped at the end of line.

Example:

// Draw a 'Hello World!' at position 100, 100
Canvas.drawText(100, 100, "Hellow World!");
Examples:
ModelineStudio/ModelineStudio.ino, and SpaceInvaders/SpaceInvaders.ino.

◆ drawText() [2/2]

void fabgl::CanvasClass::drawText ( FontInfo const *  fontInfo,
int  X,
int  Y,
char const *  text,
bool  wrap = false 
)

Draw a string at specified position.

drawText() uses the specified font and currently selected glyph options (setGlyphOptions() method).

Parameters
fontInfoPointer to font structure containing font info and glyphs data.
XHorizontal position of first character left side.
YVertical position of first character top side.
textString to draw (indexes in the character font glyphs set).
wrapIf true text is wrapped at the end of line.

Example:

// Draw a 'Hello World!' at position 100, 100
Canvas.drawText(&FONT_8x8, 100, 100, "Hellow World!");

◆ drawTextFmt()

void fabgl::CanvasClass::drawTextFmt ( int  X,
int  Y,
const char *  format,
  ... 
)

Draw formatted text at specified position.

drawTextFmt() uses currently selected font (selectFont() method) and currently selected glyph options (setGlyphOptions() method).

Parameters
XHorizontal position of first character left side.
YVertical position of first character top side.
formatFormat specifier like printf.

Example:

Canvas.drawTextFmt(100, 100, "Free DMA memory: %d", heap_caps_get_free_size(MALLOC_CAP_DMA));
Examples:
DoubleBuffer/DoubleBuffer.ino, ModelineStudio/ModelineStudio.ino, MouseOnScreen/MouseOnScreen.ino, and SpaceInvaders/SpaceInvaders.ino.

◆ fillEllipse()

void fabgl::CanvasClass::fillEllipse ( int  X,
int  Y,
int  width,
int  height 
)

Fill an ellipse specifying center and size, using current brush color.

Parameters
XHorizontal coordinate of the ellipse center.
YVertical coordinate of the ellipse center.
widthEllipse width.
heightEllipse height.

Example:

// Paint a filled yellow ellipse
Canvas.setBrushColor(Color::BrightYellow);
Canvas.fillEllipse(100, 100, 40, 40);

// Paint a yellow ellipse with blue border
Canvas.setPenColor(Color::BrightBlue);
Canvas.setBrushColor(Color::BrightYellow);
Canvas.fillEllipse(100, 100, 40, 40);
Canvas.drawEllipse(100, 100, 40, 40);

◆ fillPath()

void fabgl::CanvasClass::fillPath ( Point const *  points,
int  pointsCount 
)

Fill the polygon enclosed in a sequence of lines.

Because the path is drawn on VSync (vertical retracing) the provided array of points must survive until the path is completely painted.
To avoid it, application can disable drawing on vsync (calling VGAControllerClass.enableBackgroundPrimitiveExecution()) or just wait until all the drawing have been completed(calling CanvasClass.waitCompletion()).

Parameters
pointsA pointer to an array of Point objects.
pointsCountNumber of points in the array.

Example:

Point points[3] = { {10, 10}, {20, 10}, {15, 20} };
Canvas.setBrushColor(Color::Red);
Canvas.fillPath(&points, 3);
Canvas.waitCompletion();

◆ fillRectangle()

void fabgl::CanvasClass::fillRectangle ( int  X1,
int  Y1,
int  X2,
int  Y2 
)

Fill a rectangle using the current brush color.

Parameters
X1Top left horizontal coordinate.
Y1Top left vertical coordiante.
X2Bottom right horizontal coordinate.
Y2Bottom right vertical coordiante.

Example:

// Paint a filled yellow rectangle
Canvas.setBrushColor(Color::BrightYellow);
Canvas.fillRectangle(10, 10, 100, 100);

// Paint a yellow rectangle with blue border
Canvas.setPenColor(Color::BrightBlue);
Canvas.setBrushColor(Color::BrightYellow);
Canvas.fillRectangle(10, 10, 100, 100);
Canvas.drawRectangle(10, 10, 100, 100);
Examples:
ModelineStudio/ModelineStudio.ino, and SpaceInvaders/SpaceInvaders.ino.

◆ getFontInfo()

FontInfo const* fabgl::CanvasClass::getFontInfo ( )
inline

Get info about currently selected font.

Returns
FontInfo structure representing font info and data.
Examples:
SpaceInvaders/SpaceInvaders.ino.

◆ getHeight()

int fabgl::CanvasClass::getHeight ( )
inline

Return the canvas height in pixels.

This is equivalent to VGA Controller viewport height.

Returns
The canvas height in pixels.
Examples:
AnsiTerminal/AnsiTerminal.ino, ModelineStudio/ModelineStudio.ino, and MouseOnScreen/MouseOnScreen.ino.

◆ getPresetFontInfo()

FontInfo const * fabgl::CanvasClass::getPresetFontInfo ( int  columns,
int  rows 
)
static

Get the font info that best fits the specified number of columns and rows.

Parameters
columnsMinimum number of required columns.
rowsMinimum number of required rows.
Returns
The font info of the preset font.
Examples:
DoubleBuffer/DoubleBuffer.ino, ModelineStudio/ModelineStudio.ino, MouseOnScreen/MouseOnScreen.ino, and SpaceInvaders/SpaceInvaders.ino.

◆ getWidth()

int fabgl::CanvasClass::getWidth ( )
inline

Return the canvas width in pixels.

This is equivalent to VGA Controller viewport width.

Returns
The canvas width in pixels.
Examples:
AnsiTerminal/AnsiTerminal.ino, ModelineStudio/ModelineStudio.ino, and MouseOnScreen/MouseOnScreen.ino.

◆ lineTo()

void fabgl::CanvasClass::lineTo ( int  X,
int  Y 
)

Draw a line starting from current pen position.

Starting pen position is specified using CanvasClass.moveTo() method or from ending position of the last call to CanvasClass.lineTo().
The line has the current pen color.

Parameters
XHorizontal ending line position.
YVertical ending line position.

Example:

// Paint white a triangle
Canvas.setPenColor(Color::BrightWhite);
Canvas.moveTo(10, 12);
Canvas.lineTo(30, 40);
Canvas.lineTo(10, 12);

◆ moveTo()

void fabgl::CanvasClass::moveTo ( int  X,
int  Y 
)

Move current pen position to the spcified coordinates.

Some methods expect initial pen position to be specified, like Canvas.lineTo().

Parameters
XHorizontal pen position.
YVertical pen position.

Example:

// Paint a triangle
Canvas.moveTo(10, 12);
Canvas.lineTo(30, 40);
Canvas.lineTo(10, 12);
Examples:
MouseOnScreen/MouseOnScreen.ino.

◆ scroll()

void fabgl::CanvasClass::scroll ( int  offsetX,
int  offsetY 
)

Scroll pixels horizontally and/or vertically.

Scrolling occurs inside the scrolling region defined by CanvasClass.setScrollingRegion().
Vertical scroll is done moving line pointers, so it is very fast to perform.
Horizontal scroll is done moving pixel by pixel (CPU intensive task).

Parameters
offsetXNumber of pixels to scroll left (offsetX < 0) or right (offsetX > 0).
offsetYNumber of pixels to scroll up (offsetY < 0) or down (offsetY > 0).
Examples:
SpaceInvaders/SpaceInvaders.ino.

◆ selectFont()

void fabgl::CanvasClass::selectFont ( FontInfo const *  fontInfo)

Select a font to use for the next text drawings.

Parameters
fontInfoPointer to font structure containing font info and glyphs data.

Examples:

// Set a font for about 40x14 text screen
Canvas.selectFont(Canvas.getPresetFontInfo(40, 14));

// Set the 8x8 predefined font (FONT_8x8 defined in font_8x8.h)
Canvas.selectFont(&FONT_8x8);
Examples:
DoubleBuffer/DoubleBuffer.ino, ModelineStudio/ModelineStudio.ino, MouseOnScreen/MouseOnScreen.ino, and SpaceInvaders/SpaceInvaders.ino.

◆ setBrushColor() [1/2]

void fabgl::CanvasClass::setBrushColor ( uint8_t  red,
uint8_t  green,
uint8_t  blue 
)

Set brush (background) color specifying color components.

Parameters
redRed color component. Minimum value is 0, maximum value is 1 with 8 colors and 3 with 64 colors.
greenGreen color component. Minimum value is 0, maximum value is 1 with 8 colors and 3 with 64 colors.
blueBlue color component. Minimum value is 0, maximum value is 1 with 8 colors and 3 with 64 colors.

Example:

// Set blue brush with 8 colors setup
Canvas.setBrushColor(0, 0, 1);

// Set blue brush with 64 colors setup
Canvas.setBrushColor(0, 0, 3);
Examples:
CollisionDetection/CollisionDetection.ino, DoubleBuffer/DoubleBuffer.ino, ModelineStudio/ModelineStudio.ino, MouseOnScreen/MouseOnScreen.ino, and SpaceInvaders/SpaceInvaders.ino.

◆ setBrushColor() [2/2]

void fabgl::CanvasClass::setBrushColor ( Color  color)

Set brush (background) color using a color name.

Parameters
colorThe color name.

Example:

 // Set blue brush
 Canvas.setBrushColor(Color::BrightBlue);

◆ setGlyphOptions()

void fabgl::CanvasClass::setGlyphOptions ( GlyphOptions  options)

Set drawing options for the next glyphs.

Setting glyph options allows to slightly change how a glyph is rendered, applying effects like Bold, Italic, Inversion, double width or height and so on.
Because CanvasClass draws text using glyphs these options affects also how text is rendered.

Parameters
optionsA bit field to specify multiple options

Example:

// Draw "Hello World!"
Canvas.setGlyphOptions(GlyphOptions().FillBackground(true).DoubleWidth(1));
Canvas.drawText(20, 20, "Hello World!");
Examples:
DoubleBuffer/DoubleBuffer.ino, ModelineStudio/ModelineStudio.ino, MouseOnScreen/MouseOnScreen.ino, and SpaceInvaders/SpaceInvaders.ino.

◆ setPaintOptions()

void fabgl::CanvasClass::setPaintOptions ( PaintOptions  options)

Set paint options.

◆ setPenColor() [1/2]

void fabgl::CanvasClass::setPenColor ( uint8_t  red,
uint8_t  green,
uint8_t  blue 
)

Set pen (foreground) color specifying color components.

Parameters
redRed color component. Minimum value is 0, maximum value is 1 with 8 colors and 3 with 64 colors.
greenGreen color component. Minimum value is 0, maximum value is 1 with 8 colors and 3 with 64 colors.
blueBlue color component. Minimum value is 0, maximum value is 1 with 8 colors and 3 with 64 colors.

Example:

// Set white pen with 8 colors setup
Canvas.setPenColor(1, 1, 1);

// Set white pen with 64 colors setup
Canvas.setPenColor(3, 3, 3);
Examples:
CollisionDetection/CollisionDetection.ino, DoubleBuffer/DoubleBuffer.ino, ModelineStudio/ModelineStudio.ino, MouseOnScreen/MouseOnScreen.ino, SimpleTerminalOut/SimpleTerminalOut.ino, and SpaceInvaders/SpaceInvaders.ino.

◆ setPenColor() [2/2]

void fabgl::CanvasClass::setPenColor ( Color  color)

Set pen (foreground) color using a color name.

Parameters
colorColor name.

Example:

 // Set white pen
 Canvas.setPenColor(Color::BrightWhite);

◆ setPixel()

void fabgl::CanvasClass::setPixel ( int  X,
int  Y 
)

Fill a single pixel with the pen color.

Parameters
XHorizontal pixel position.
YVertical pixel position.
Examples:
CollisionDetection/CollisionDetection.ino, MouseOnScreen/MouseOnScreen.ino, and SimpleTerminalOut/SimpleTerminalOut.ino.

◆ setScrollingRegion()

void fabgl::CanvasClass::setScrollingRegion ( int  X1,
int  Y1,
int  X2,
int  Y2 
)

Define the scrolling region.

A scrolling region is the rectangle area where CanvasClass.scroll() method can operate.

Parameters
X1Top left horizontal coordinate.
Y1Top left vertical coordiante.
X2Bottom right horizontal coordinate.
Y2Bottom right vertical coordiante.

◆ swapBuffers()

void fabgl::CanvasClass::swapBuffers ( )

Swap screen buffer when double buffering is enabled.

Double buffering is enabled calling VGAController.setResolution() with doubleBuffered = true.
Buffers swap is always executed in vertical retracing (at VSync pulse).

Examples:
DoubleBuffer/DoubleBuffer.ino.

◆ swapRectangle()

void fabgl::CanvasClass::swapRectangle ( int  X1,
int  Y1,
int  X2,
int  Y2 
)

Swap pen and brush colors of the specified rectangle.

Parameters
X1Top left horizontal coordinate.
Y1Top left vertical coordiante.
X2Bottom right horizontal coordinate.
Y2Bottom right vertical coordiante.

◆ waitCompletion()

void fabgl::CanvasClass::waitCompletion ( bool  waitVSync = true)

Wait for drawing queue to become empty.

Parameters
waitVSyncIf true drawings are done on vertical retracing (slow), if false drawings are perfomed immediately (fast with flickering).

The documentation for this class was generated from the following files: