Feature introduction

UIFlow has a Block that makes the creation of simple images on the screen a walk in the park. By clicking the squares on the emoji grid we can draw a picture and use the color swatch to set the color of the pixels

Set emoji map in

Click on the squares of the grid to set which pixels will be filled with color on the pixel grid

Set line x row x in

This block allows you to individually set the position and color of individual pixels on the grid

Set background image x

Choose from a list of preset backgrounds for the backdrop of the grid


When the grid has been filled and you have uploaded your code you will see the picture appear on the M5 screen


Feature introduction

Apart from the circle and rectangle provided in the UI designer, there are other shapes and elements we can program with the graphic blocks

LCD clear

Clear the screen

LCD fill Fill the screen with the color selected in the color swatch

LCD print x,y Display text on the screen at the selected x/y coordinates

Font Set the font of the text with a font from the list

LCD pixel Draw a pixel at the selected x/y coordinate

line Draw a line from origin point x/y to end point x/y

rect Draw a rectangle of a desired width and height

triangle Define the coordinates of the 3 points of a triangle and draw it in the color specified

circle Draw a circle from the x/y origin and choose the radius and color

ellipse Draw an ellipse from the x/y origin, set the radius with 2 parameters and choose the color

polygon Draw a polygon at the x/y origin with a set radius and amount of sides


The M5GO screen resolution is 320X240


Create a triangle and set its color to red

Displaying images

Feature introduction

Upload some photos from your computer and display them on your device(Attention:Images must be below 25k,in jpg or bmp format)

Upload image

Connect to UIflow with your API key,Select the cloud file icon in the top right,select the image tab,click Add image and browse for an image,choose your image and upload, its name will appear in the list if it has successfully been uploaded.

Display the image

In the UI designer grab an image placeholder and set it in the middle of the screen. Click on the image placeholder,choose your image name from the drop down list

Image manipulation

After uploading an image and assigning it to the place holder, you can manipulate it with the image blocks in the UI blocks section. You can choose whether to show or hide the image and set its position on the screen.


Feature introduction

Perform operations on the screen display such as adjusting the brightness, changing the background color, rotating the screen, and so on.

Set the screen background color

Set the background color of the screen to work with the UI emulator

Set Screen backgroundColor Set backgroundColor

Set screen rotate mode Rotating screen with mode 0-3,default value is 1, if you change value, the screen with anticlockwise rotation

Set screen brightness Set screen brightness

On This Page