9.7 KiB
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