Emoji

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

Usage

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

Graphic

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

Attention

The M5GO screen resolution is 320X240

Example

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.

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