UI Elements

Feature introduction

UIFlow Designer allows you to create and manipulate various shapes and images on the M5Stack screen

  • Title Display a title bar at the top of the screen

  • Label Display a text element wherever you place it on the screen

  • Rect Display a square or rectangle (Parameters can be set by clicking on the element and changing the settings)

  • Circle Display a circle (Parameters can be set by clicking on the element and changing the settings)

  • image Display an image that has been uploaded to the M5 device

Adding and removing elements

Add an element

Remove an element

Programming UI elements

Method 1:After placing an element on the screen, single press it to display the parameters window. From here you can adjust the elements color,size,position and layer

Method 2:After adding an element to the screen, its equivalent blocks will appear in the UI section of the blocks menu. Using blocks you can program all of the parameters of the element within your program.

Unicode

UIFlow firmware integrates some common character libraries in Unicode, so you can directly input and use it when editing text.

The following are the addresses corresponding to different characters in the UIFlow custom font.

Start address End address Description reference
0x3040 0x30FF Hiragana and Katakana /
0x0400 0x04FF Cyrillic /
0x0020 0x007F Basic Latin /
0x2100 0x214F Letterlike Symbols Click for details
0x2150 0x218F Number Forms Click for details
0x2190 0x21FF Arrows Click for details
0x2200 0x23f0 Mathematical Operators
Miscellaneous Technical
Click for details
0x2460 0x24FF Enclosed Alphanumerics Click for details
0x2500 0x257F Box Drawing Click for details
0x2580 0x259F Block Elements Click for details
0x2600 0x27BF Miscellaneous Symbols Click for details
0xFF00 0xFFEF Halfwidth and Fullwidth Forms Click for details
0x25A0 0x25FF Geometric Shapes Click for details
0x2000 0x206F General Punctuation Click for details
0x0370 0x03FF Greek and Coptic Click for details
0x0080 0x00FF Latin-1 Supplement Click for details
0xFF00 0xFFEF Half-width and full-width forms Click for details
Chinese GB2312 + Commonly used Japanese Kanji A total of 7857 characters

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