Feature Description

UIFlow provides a pixel point editing Block that allows for quick drawing of patterns by piecing together pixel points to create various designs.

Set emoji map in Set matrix pixel points, checking the small squares in the matrix to display corresponding pixel points.

Set line x row x in Set a single pixel point, choose row and column, to display the corresponding single pixel point.

How to Use

Add the Emoji Block to the program, check the small squares to activate pixel points.


Feature Description

In addition to several directly usable geometric shapes, Graphic can be used to draw some complex shapes.

LCD clear Clear screen content.

LCD fill Set screen background color.

LCD print x,y Print text at a specified location on the screen.

Font Set the font of the text.

LCD pixel Draw a pixel at a specified location on the screen.

line Draw a line.

rect Draw a rectangle.

triangle Draw a triangle.

circle Draw a circle.

ellipse Draw an ellipse.

arc Draw an arc.

polygon Draw a polygon.


The screen resolution of M5GO is 320X240.

Example Use

Use the Graphic function to draw a triangle and change its color to red.

Displaying Images

Feature Description

Add some local images to display on the screen (Requirements: size below 25K, format jpg or bmp).

Show Display an image.

Hide Hide an image.

Set x y Set the x, y coordinates of the image.

Set x Set the x coordinate of the image.

Set y Set the y coordinate of the image.

Set image Set the image to image0.

Adding Images

First, establish a connection between the device and UIFlow with the APIKey, click the cloud save button in the top right corner of the page, click the image option, click Add image to add images from local, wait for the image upload to complete.

Displaying Images

Drag an image element onto the screen, click on the element, and select the image to display in the pop-up property box.

Image Operations

In addition to editing the image in the property box, you can add image Block from the UI options to operate on the image in the program.


Feature Description

Operate on the screen display such as adjusting brightness, changing background color, rotating the screen, etc.

Setting Screen Background Color

Set the background color of the screen, can be used in conjunction with the UI simulator.

Set Screen backgroundColor Set the screen background color.

Set screen rotate mode Set the screen rotation angle, the default value is 1, if changed to other values, the screen will rotate counterclockwise.

Set screen brightness Set the screen brightness.

On This Page