Drawing Shapes

Shape Drawing API. More...

Functions list
void	gl_draw_rect (gl_coord_t top_left_x, gl_coord_t top_left_y, gl_uint_t width, gl_uint_t height)
	Draw a rectangle on display. More...
void	gl_draw_rect_rounded (gl_coord_t top_left_x, gl_coord_t top_left_y, gl_uint_t width, gl_uint_t height, gl_uint_t radius)
	Draw a rounded rectangle on display. More...
void	gl_draw_point (gl_coord_t x, gl_coord_t y)
	Draw a point on display. More...
void	gl_draw_line (gl_coord_t x1, gl_coord_t y1, gl_coord_t x2, gl_coord_t y2)
	Draw a line on the display. More...
void	gl_draw_circle (gl_coord_t x0, gl_coord_t y0, gl_uint_t radius)
	Draw a circle on display. More...
void	gl_draw_ellipse (gl_coord_t x0, gl_coord_t y0, gl_uint_t half_a, gl_uint_t half_b)
	Draw ellipse to the display driver using previously set pen and brush. More...
void	gl_draw_arc (gl_coord_t x, gl_coord_t y, gl_uint_t radius, gl_angle_t start, gl_angle_t end)
	Draw an arc on display. More...

Detailed Description

This API is used for drawing and managing shapes on the display.

Function Documentation

gl_draw_rect()

void gl_draw_rect	(	gl_coord_t	top_left_x,
		gl_coord_t	top_left_y,
		gl_uint_t	width,
		gl_uint_t	height
	)

This function draws a rectangle on a display with top left corner positioned at top_left_x and top_left_y coordinates using pen and brush previously set. Coordinates are represented by a special type gl_coord_t. Look of the rectangle can be customized using different pen and brush. To see how they can be set, please see Basic Library Configuration.

Parameters

[in]	top_left_x	X coordinate of rectangle's top left corner.
[in]	top_left_y	Y coordinate of rectangle's top left corner.
[in]	width	Width of rectangle.
[in]	height	Height of rectangle.

Returns

Nothing.

Precondition

Before calling this function, be sure to initialize driver using gl_set_driver.

See also

gl_draw_rect_rounded, gl_set_pen, gl_set_brush_color, gl_set_brush_style

Example

 
#include "gl.h"
#include "board.h"
#include "tft8.h"
 
static gl_driver_t driver;
static tft8_cfg_t tft_cfg;
 
void main()
{
 // initialize driver
 TFT8_MAP_PINOUTS_16BIT(tft_cfg);
 tft_cfg.board = &TFT_BOARD_7_CAPACITIVE; 
 tft8_init(&tft_cfg, &driver);
 
 // prepare display for drawing
 gl_set_driver(&driver); // set initialized driver
 gl_clear(GL_CHARLESTON_GREEN ); // clear display
 
 // 4 rects changing in size
 gl_draw_rect(10, 5, 25, 120);
 gl_draw_rect(205, 5, 100, 30);
 gl_draw_rect(415, 5, 50, 60);
 gl_draw_rect(620, 5, 100, 120);
 
 // 4 rects changing in pen
 gl_set_pen(GL_GREEN, 10);
 gl_draw_rect(10, 145, 25, 120);
 gl_set_pen(GL_RED, 0);
 gl_draw_rect(205, 145, 100, 30);
 gl_set_pen(GL_PURPLE, 20);
 gl_draw_rect(415, 145, 50, 60);
 gl_set_pen(GL_LIME, 5);
 gl_draw_rect(620, 145, 100, 120);
 
 // 4 rects changing in brush
 gl_set_brush_style(GL_BRUSH_STYLE_GRADIENT_LEFT_RIGHT);
 gl_set_brush_color_from(GL_PURPLE);
 gl_set_brush_color_to(GL_BLUE);
 gl_draw_rect(10, 280, 25, 100);
 
 gl_set_brush_style(GL_BRUSH_STYLE_GRADIENT_TOP_DOWN);
 gl_set_brush_color_from(GL_GREEN);
 gl_set_brush_color_to(GL_ORANGE);
 gl_draw_rect(205, 280, 100, 30);
 
 gl_set_brush_style(GL_BRUSH_STYLE_FILL);
 gl_set_brush_color(GL_AZURE);
 gl_draw_rect(415, 280, 50, 60);
 
 gl_set_brush_style(GL_BRUSH_STYLE_NONE);
 gl_draw_rect(620, 280, 100, 120);
 
}
 

gl_draw_rect_rounded()

void gl_draw_rect_rounded	(	gl_coord_t	top_left_x,
		gl_coord_t	top_left_y,
		gl_uint_t	width,
		gl_uint_t	height,
		gl_uint_t	radius
	)

This function draws a rounded rectangle on a display using previously set pen and brush. Coordinates are represented by a special type gl_coord_t. Look of the rounded rectangle can be customized using different pen and brush. To see how they can be set, please see Basic Library Configuration.

Parameters

[in]	top_left_x	X coordinate of rectangle's top left corner.
[in]	top_left_y	Y coordinate of rectangle's top left corner.
[in]	width	Width of the rectangle.
[in]	height	Height of the rectangle.
[in]	radius	Radius of rounded corners.

Returns

Nothing.

Precondition

Before calling this function, be sure to initialize driver using gl_set_driver.

See also

gl_draw_rect, gl_set_pen, gl_set_brush_color, gl_set_brush_style, gl_set_brush_color_from, gl_set_brush_color_to.

Example

 
#include "gl.h"
#include "board.h"
#include "tft8.h"
 
static gl_driver_t driver;
static tft8_cfg_t tft_cfg;
 
void main()
{
 uint16_t padding = 100;
 uint16_t vertical_paddding = 20;
 uint16_t rect_y;
 
 // initialize driver
 TFT8_MAP_PINOUTS_16BIT(tft_cfg);
 tft_cfg.board = &TFT_BOARD_7_CAPACITIVE; 
 tft8_init(&tft_cfg, &driver);
 
 // prepare display for drawing
 gl_set_driver(&driver); // set initialized driver
 gl_clear(GL_CHARLESTON_GREEN); // clear display
 
 /*
 * If radius is equal or greater than 1/2 of smallest dimension 
 * then edges coresponding to that dimension are semicircles
 * for a square this results in a circle
 */
 
 // 4 rects changing in size
 gl_draw_rect_rounded(10, 5, 25, 100, 10);
 gl_draw_rect_rounded(205, 5, 100, 25, 10);
 gl_draw_rect_rounded(415, 5, 50, 50, 10);
 gl_draw_rect_rounded(620, 5, 100, 100, 10);
 
 
 // 4 rects changing in pen
 gl_set_pen(GL_GREEN, 10);
 gl_draw_rect_rounded(10, 125, 25, 100, 10);
 gl_set_pen(GL_RED, 0);
 gl_draw_rect_rounded(205, 125, 100, 25, 10);
 gl_set_pen(GL_PURPLE, 20);
 gl_draw_rect_rounded(415, 125, 50, 50, 10);
 gl_set_pen(GL_LIME, 5);
 gl_draw_rect_rounded(620, 125, 100, 100, 10);
 
 // 4 rects changing in brush
 gl_set_brush_style(GL_BRUSH_STYLE_GRADIENT_LEFT_RIGHT);
 gl_set_brush_color_from(GL_PURPLE);
 gl_set_brush_color_to(GL_BLUE);
 gl_draw_rect_rounded(10, 240, 25, 100, 10);
 
 gl_set_brush_style(GL_BRUSH_STYLE_GRADIENT_TOP_DOWN);
 gl_set_brush_color_from(GL_GREEN);
 gl_set_brush_color_to(GL_ORANGE);
 gl_draw_rect_rounded(205, 240, 100, 25, 10);
 
 gl_set_brush_style(GL_BRUSH_STYLE_FILL);
 gl_set_brush_color(GL_AZURE);
 gl_draw_rect_rounded(415, 240, 50, 50, 10);
 
 gl_set_brush_style(GL_BRUSH_STYLE_NONE);
 gl_draw_rect_rounded(620, 240, 100, 100, 10);
 
 // 4 rect changing in radius size
 gl_draw_rect_rounded(10, 365, 25, 100, 1);
 gl_draw_rect_rounded(205, 365, 100, 25, 10);
 gl_draw_rect_rounded(415, 365, 50, 50, 40);
 gl_draw_rect_rounded(620, 365, 100, 100, 90);
 
}
 

gl_draw_point()

void gl_draw_point	(	gl_coord_t	x,
		gl_coord_t	y
	)

This function draws point on a display using previously set pen. Coordinates are represented by a special type gl_coord_t. Look of the point can be customized using different pen. To see how it can be set, please see Basic Library Configuration.

Parameters

[in]	x	X coordinate of the point.
[in]	y	Y coordinate of the point.

Returns

Nothing.

Precondition

Before calling this function, be sure to initialize driver using gl_set_driver.

See also

gl_draw_line, gl_set_pen_width, gl_set_pen_color.

Example

 
#include "gl.h"
#include "board.h"
#include "tft8.h"
 
static gl_driver_t driver;
static tft8_cfg_t tft_cfg;
 
void main()
{
 // initialize driver
 TFT8_MAP_PINOUTS_16BIT(tft_cfg);
 tft_cfg.board = &TFT_BOARD_7_CAPACITIVE; 
 tft8_init(&tft_cfg, &driver);
 
 // prepare display for drawing
 gl_set_driver(&driver); // set initialized driver
 gl_clear(GL_CHARLESTON_GREEN); // clear display
 
 // coordinates describe the center of the point, not top left
 
 // when pen is not set, default pen values will be used
 gl_draw_point(10,10);
 
 // we can change color of pen
 gl_set_pen_color(GL_BLUE);
 gl_draw_point(10,20);
 
 // we can change width of pen also
 gl_set_pen_width(3);
 gl_draw_point(10,30);
 
 // ...or we can set both at once
 gl_set_pen(GL_YELLOW, 5);
 gl_draw_point(10,40);
 
 // every part out of borders will be cropped
 gl_set_pen_width(15);
 gl_draw_point(-1,-1); 
 
 // if point is out of display, it wont be drawn at all
 gl_set_pen_width(1);
 gl_draw_point(-10,10);
}
 

gl_draw_line()

void gl_draw_line	(	gl_coord_t	x1,
		gl_coord_t	y1,
		gl_coord_t	x2,
		gl_coord_t	y2
	)

This function draws a A-B line on a display using previously set pen. Coordinates are represented by a special type gl_coord_t. Look of the line can be customized using different pen. To see how it can be set, please see Basic Library Configuration.

Parameters

[in]	x1	X coordinate of point A.
[in]	y1	Y coordinate of point A.
[in]	x2	X coordinate of point B.
[in]	y2	Y coordinate of point B.

Returns

Nothing.

Precondition

Before calling this function, be sure to initialize driver using gl_set_driver.

See also

gl_draw_line, gl_set_pen_width, gl_set_pen_color.

Example

 
#include "gl.h"
#include "board.h"
#include "tft8.h"
 
static gl_driver_t driver;
static tft8_cfg_t tft_cfg;
 
void main()
{ 
 // initialize driver
 TFT8_MAP_PINOUTS_16BIT(tft_cfg);
 tft_cfg.board = &TFT_BOARD_7_CAPACITIVE; 
 tft8_init(&tft_cfg, &driver);
 
 // prepare display for drawing
 gl_set_driver(&driver); // set initialized driver
 gl_clear(GL_CHARLESTON_GREEN); // clear display
 
 // get screen dimension to calculate coordinates more easily
 uint16_t screen_width = gl_get_screen_width(); 
 uint16_t screen_height = gl_get_screen_height();
 
 // when pen is not set, default pen values will be used 
 gl_draw_line(10, 10, screen_width/2, 10);
 gl_draw_line(10, 40, screen_width/2, 15);
 gl_draw_line(10, 70, screen_width/2, 20);
 
 // we can change color of pen
 gl_set_pen_color(GL_GREEN);
 gl_draw_line(10, 100, screen_width/2, 25);
 gl_draw_line(10, 130, screen_width/2, 30);
 gl_draw_line(10, 160, screen_width/2, 35);
 
 // we can change width of pen also
 gl_set_pen_width(2);
 gl_draw_line(10, 160, screen_width/2, 160);
 gl_draw_line(10, 165, screen_width/2, 190);
 gl_draw_line(10, 170, screen_width/2, 210);
 
 // ...or we can set both at once
 gl_set_pen(GL_DARK_GREEN,1);
 gl_draw_line(10, 175, screen_width/2, 240);
 gl_draw_line(10, 180, screen_width/2, 270);
 gl_draw_line(10, 180, screen_width/2, 300);
 
 // every part out of borders will be cropped
 gl_set_pen(GL_WHITE,1);
 gl_draw_line(-10, 7, screen_width+10, 7);
 gl_draw_line(7, -10, 7, screen_height+10);
 gl_draw_line(-10, screen_height-10, screen_width+10, screen_height-10);
 gl_draw_line(screen_width-7, -10, screen_width-7, screen_height+10);
 
 // some more lines
 gl_set_pen(GL_RED,10);
 gl_draw_line(-10, -10, screen_width+10, screen_height+10);
 gl_draw_line(-10, screen_height+10, screen_width+10, -10);
 
 gl_set_pen(GL_GREEN,1);
 for(int y = 10; y < screen_width; y+=10)
 {
 gl_draw_line(screen_width/2, y, screen_width-10, y+10);
 gl_draw_line(screen_width/2 + y, 10, screen_width/2+y+10, screen_height-10);
 }
}

gl_draw_circle()

void gl_draw_circle	(	gl_coord_t	x0,
		gl_coord_t	y0,
		gl_uint_t	radius
	)

This function draws a circle on a display using previously set pen and brush. Coordinates are represented by a special type gl_coord_t. Look of the circle can be customized using different pen and brush. To see how they can be set, please see Basic Library Configuration.

Parameters

[in]	x0	X coordinate of center.
[in]	y0	Y coordinate of center.
[in]	radius	Circle radius.

Returns

Nothing.

Precondition

Before calling this function, be sure to initialize driver using gl_set_driver.

See also

gl_draw_ellipse gl_draw_arc, gl_set_pen, gl_set_brush_style, gl_set_brush_color, gl_set_brush_color_from, gl_set_brush_color_to.

Example

 
#include "gl.h"
#include "board.h"
#include "tft8.h"
 
static gl_driver_t driver;
static tft8_cfg_t tft_cfg;
 
void main()
{
 // initialize driver
 TFT8_MAP_PINOUTS_16BIT(tft_cfg);
 tft_cfg.board = &TFT_BOARD_7_CAPACITIVE; 
 tft8_init(&tft_cfg, &driver);
 
 // prepare display for drawing
 gl_set_driver(&driver); // set initialized driver
 gl_clear(GL_CHARLESTON_GREEN); // clear display
 
 // circles increasing in size
 gl_draw_circle(100, 100, 10);
 gl_draw_circle(200, 100, 20);
 gl_draw_circle(300, 100, 30);
 gl_draw_circle(400, 100, 40);
 gl_draw_circle(500, 100, 50);
 gl_draw_circle(600, 100, 60);
 gl_draw_circle(700, 100, 70);
 
 // circles increasing in size with different pen and color 
 gl_set_pen(GL_BLUE, 10);
 gl_set_brush_color(GL_ORANGE);
 gl_draw_circle(100, 250, 10);
 gl_draw_circle(200, 250, 20);
 gl_draw_circle(300, 250, 30);
 gl_draw_circle(400, 250, 40);
 gl_draw_circle(500, 250, 50);
 gl_draw_circle(600, 250, 60);
 gl_draw_circle(700, 250, 70);
 
 // comparison of pen width difference on same radius circles
 gl_set_pen_color(GL_YELLOW);
 gl_set_pen_width(0);
 gl_draw_circle(100, 400, 30);
 
 gl_set_outer_pen(0);
 gl_set_inner_pen(20);
 gl_draw_circle(200, 400, 30);
 
 gl_set_pen_width(20);
 gl_draw_circle(300, 400, 30);
 
 gl_set_outer_pen(20);
 gl_set_inner_pen(0);
 gl_draw_circle(400, 400, 30);
 
 // circles out of screen will be cutt off
 gl_set_pen_width(0);
 gl_draw_circle(0, 0, 30);
 gl_draw_circle(gl_get_screen_width(), 0, 30);
 gl_draw_circle(0, gl_get_screen_height(), 30);
 gl_draw_circle(gl_get_screen_width(), gl_get_screen_height(), 30);
 
 // circles completely out of screen wont be drawn at all
 gl_draw_circle(-30, 0, 30); // beyond left border
 gl_draw_circle(0, -30, 30); // beyond top border
 gl_draw_circle(gl_get_screen_width()+ 30 , 0, 30); // beyod right border
 gl_draw_circle(0, gl_get_screen_height()+ 30, 30); // beyod bottom border
}
 

gl_draw_ellipse()

void gl_draw_ellipse	(	gl_coord_t	x0,
		gl_coord_t	y0,
		gl_uint_t	half_a,
		gl_uint_t	half_b
	)

Coordinates are represented by special type gl_coord_t. Look of the shape can be cusomized using different pen and brush. To see how they can be set, visit gl.h .

Parameters

[in]	x0	X coordinate of the center.
[in]	y0	Y coordinate of the center.
[in]	half_a	Semi-length on the X axis.
[in]	half_b	Semi-length on the Y axis.

Precondition

Before calling this function, be sure to initialize the driver using gl_set_driver.

See also

gl_draw_circle, gl_draw_arc, gl_set_pen, gl_set_brush_style, gl_set_brush_color, gl_set_brush_color_from, gl_set_brush_color_to.

gl_draw_arc()

void gl_draw_arc	(	gl_coord_t	x,
		gl_coord_t	y,
		gl_uint_t	radius,
		gl_angle_t	start,
		gl_angle_t	end
	)

This function draws an arc on a display with center in x and y coordinates and radius size . The start (end) of the arc is determined by start (end) angle made with x axis. Coordinates are represented by a special type gl_coord_t. Look of the arc can be customized using different pen and brush. To see how they can be set, please see Basic Library Configuration. If any of the given angles are over 360, angle will be recalculated as modulo 360.

Parameters

[in]	x	X coordinate of center.
[in]	y	y coordinate of center.
[in]	radius	radius of arc.
[in]	start	the angle made with x axis which determines where the arc stars.
[in]	end	the angle made withh x axis which determines where the arc ends.

Returns

Nothing.

Precondition

Before calling this function, be sure to initialize driver using gl_set_driver.

See also

gl_draw_circle, gl_set_pen, gl_set_brush_style, gl_set_brush_color, gl_set_brush_color_from, gl_set_brush_color_to.

Example

 
#include "gl.h"
#include "board.h"
#include "tft8.h"
 
static gl_driver_t driver;
static tft8_cfg_t tft_cfg;
 
void main()
{
 // initialize driver
 TFT8_MAP_PINOUTS_16BIT(tft_cfg);
 tft_cfg.board = &TFT_BOARD_7_CAPACITIVE; 
 tft8_init(&tft_cfg, &driver);
 
 // prepare display for drawing
 gl_set_driver(&driver); // set initialized driver
 gl_clear(GL_CHARLESTON_GREEN); // clear display
 
 // full circle progression
 gl_set_brush_color(GL_RED );
 gl_draw_arc(50, 50, 40, 0, 40);
 gl_draw_arc(150, 50, 40, 0, 80);
 gl_draw_arc(250, 50, 40, 0, 120);
 gl_draw_arc(350, 50, 40, 0, 160);
 gl_draw_arc(450, 50, 40, 0, 200);
 gl_draw_arc(550, 50, 40, 0, 240);
 gl_draw_arc(650, 50, 40, 0, 280);
 gl_draw_arc(750, 50, 40, 0, 320);
 
 // full circle progression - inverted
 gl_set_brush_color(GL_GREEN);
 gl_draw_arc(50, 200, 40, 40, 0);
 gl_draw_arc(150, 200, 40, 80 , 0);
 gl_draw_arc(250, 200, 40, 120, 0);
 gl_draw_arc(350, 200, 40, 160, 0);
 gl_draw_arc(450, 200, 40, 200, 0);
 gl_draw_arc(550, 200, 40, 240, 0);
 gl_draw_arc(650, 200, 40, 280, 0);
 gl_draw_arc(750, 200, 40, 320, 0);
 
 // angles greater than 360 are processed as modulo 360
 gl_set_brush_color(GL_ORANGE);
 gl_set_pen_width(10);
 gl_draw_arc(50, 350, 20, 270, 0); 
 gl_draw_arc(100, 350, 20, 270+360, 0); 
 gl_draw_arc(150, 350, 20, 270+360*3, 0); 
 
 // difference in size based on pen width
 gl_set_pen_width(3);
 gl_draw_arc(50, 400, 20, 270, 0); 
 gl_draw_arc(100, 400, 20, 270+360, 0); 
 gl_draw_arc(150, 400, 20, 270+360*3, 0); 
 
 // when start and end angle are the same, then no drawing happens
 // when start and end aggles are different but overlaping, then full circle is drawn
 gl_draw_arc(300, 375, 20, 0, 0); // no drawing
 gl_draw_arc(350, 375, 20, 360, 0); // full circle
 gl_draw_arc(400, 375, 20, 0, 360); // full circle
 gl_draw_arc(450, 375, 20, 360, 360); // no drawing
 gl_draw_arc(500, 375, 20, 10, 370); // full cricle
 gl_draw_arc(550, 375, 20, 370, 370); // no drawing
 
 // extreme angles
 gl_draw_arc(600, 375, 20, 0, 359); // too small radius to be noticeable
 gl_draw_arc(650, 375 , 20, 359, 0); // too small radius to be displayed properly
}