UIFlow Guide
UIFlow 1.0 Quick Start
2. Firmware & Program 1.0
UIFlow 1.0 Blockly
Event
UI
UIFlow 2.0 Quick Start
2. Firmware & Program 2.0
UIFlow 2.0 Blockly
Desktop IDE
Remote+
Feature Description
Remote+ function creates a web page composed of controls for remotely controlling M5Stack devices. This page is associated with the device's API KEY, will be permanently stored in M5 services, and provides a fixed access link. Users can access and share device information or remotely control the device anytime, anywhere.Note:
1. This feature requires the online version of UIFlow.
2. When running offline, a WiFi connection program must be added to the setup. See WiFi connection program instructions
3. Before using, the program must first be pushed, and then the QR code/URL for the access page can be obtained.
QRCODE
Click on the Remote+ feature, a preview window will appear on the right side for adding controls. Users can drag and drop controls onto the blank page.
After configuring all controls
and completing program push, clicking on the QR code above the preview window can get the control page link.
Remote qrcode show in x y size
- Specifies the size (width) of the QR code, as well as the display coordinates x, y.
Title
Adds a text Title to the control page.
Widget Properties
| Property | Description |
|---|---|
| Label | Title content |
| Color | Title font color |
| Background | Title background color |
| Font Size | Title font size |
Button
Adds a touch button to the control page. Each button added generates a corresponding Callback function in the programming area. Pressing the button triggers the execution of the function's content.
Widget Programming
Button x Callback
- Pressing the button triggers the execution of the function's content.
Widget Properties
| Property | Description |
|---|---|
| Name | Widget title |
| Show Title | Whether to show the widget title True/False |
| Color | Title font color |
| Background | Title background color |
| Edges | Button edge style, sharp/Pill |
| Style | Sets the button fill style. Outline/Solid |
Switch
Adds a toggle switch to the control page. Each switch added generates a corresponding Callback function in the programming area. The switch action triggers the execution of the function's content and passes the switch state through the variable switch_value.
Widget Programming
Switch x Callback with: switch_value
- The switch action triggers the execution of the function's content and passes the switch state through the variable
switch_value. switch_value: 1(ON)/0(OFF)
Widget Properties
| Property | Description |
|---|---|
| Name | Widget title |
| Show Title | Whether to show the widget |
title True/False | | Off Label | Label for off state | | On Label | Label for on state | | Off Color | Font color for off state | | On Color | Font color for on state | | Off Background| Background color for off state | | On Background | Background color for on state |
Slider
Adds a slider to the control page. Each slider added generates a corresponding Callback function in the programming area. Slider action triggers the execution of the function's content and passes the slider position through the variable slider_value.
Widget Programming
Slider x Callback with: slider_value
- Slider action triggers the execution of the function's content and passes the slider position through the variable
slider_value. slider_value can be configured through the widget properties.
Widget Properties
| Property | Description |
|---|---|
| Name | Widget title |
| Show Title | Whether to show the widget title True/False |
| Show Value | Whether to show the current slider value True/False |
| Color | Slider color |
| Min Value | Minimum value for the slider range |
| Max Value | Maximum value for the slider range |
Label
Adds a display label to the control page. Each label added generates a corresponding Event timer function in the programming area. The device program will automatically upload data content at specified intervals (default interval is 3000ms), and the uploaded content will automatically update on the page widget.
Widget Programming
Label 1 Event interval(ms): 3000 Set Data x
- The device program will automatically upload data content at specified intervals (default interval is 3000ms), and the uploaded content will automatically update on the page widget. The upload interval can be configured through widget properties, recommended interval is greater than 3000ms.
Widget Properties
| Property | Description |
|---|---|
| Name | Widget title |
| Show Title | Whether to show the widget title True/False |
| Font Size | Text font size |
| Color | Data text display color |
| Interval(ms) | Data reporting interval in milliseconds |
Input
Adds an input text box to the control page. Each input box added generates a corresponding Callback function in the programming area. Text changes in the input box trigger the execution of the function's content and pass the input text through the variable input_value.
Widget Programming
Input 1 Callback with:input_value
- Text changes in the input box trigger the execution of the function's content and pass the input text through the variable
input_value.
Widget Properties
| Property | Description |
|---|---|
| Name | Widget title |
| Show Title | Whether to show the widget title True/False |
| Font Size | Text font size |
| Color | Data text display color |
| Hint | Input text hint |
| Character Limit | Input character length limit, default is 8 |
Image
Adds an image widget to the control page. When accessing the control page, the page will request image data from a specified URL at specified intervals (default interval is 3000ms), and update the display on the page widget.
Widget Properties
| Property | Description |
|---|---|
| Name | Widget title |
| Show Title | Whether to show the widget title True/False |
| Interval(ms) | Data reporting interval in milliseconds |
| Fallback URL | URL of the requested image |
Stepper
Adds a Stepper to the control page. Each slider added generates a corresponding Callback function in the programming area. Stepper action triggers the execution of the function's content and passes the current value through the variable stepper_value.
Widget Programming
Stepper x Callback with: stepper_value
- Stepper action triggers the execution of the function's content and passes the current value through the variable `stepper_value
| Font color for off state | | On Color | Font color for on state | | Off Background | Background color for off state | | On Background | Background color for on state |
Slider
Adds a slider to the control page. Each slider added generates a corresponding Callback function in the programming area. The slider action triggers the execution of the function's content and passes the slider position state through the variable slider_value.
Widget Programming
Slider x Callback with: slider_value
- The slider action triggers the execution of the function's content and passes the slider position state through the variable
slider_value. The slider_value range can be configured through the widget properties.
Widget Properties
| Property | Description |
|---|---|
| Name | Widget title |
| Show Title | Whether to show the widget title True/False |
| Show Value | Whether to show the current slider value True/False |
| Color | Slider color |
| Min Value | Minimum value for the slider range |
| Max Value | Maximum value for the slider range |
Label
Adds a display label to the control page. Each display label added generates a corresponding Event timer function in the programming area. When the device program runs, it will automatically upload data content at specified intervals (default interval is 3000ms), and the uploaded content will automatically update on the page widget.
Widget Programming
Label 1 Event interval(ms): 3000 Set Data x
- When the device program runs, it will automatically upload data content at specified intervals (default interval is 3000ms), and the uploaded content will automatically update on the page widget. The upload interval can be configured through the widget properties, recommended interval is greater than 3000ms.
Widget Properties
| Property | Description |
|---|---|
| Name | Widget title |
| Show Title | Whether to show the widget title True/False |
| Font Size | Text font size |
| Color | Data text display color |
| Interval(ms) | Data report interval time/ms |
Input
Adds a text input box to the control page. Each input box added generates a corresponding Callback function in the programming area. When the input box text changes, it triggers the execution of the function's content and passes the input text through the variable input_value.
Widget Programming
Input 1 Callback with:input_value
- When the input box text changes, it triggers the execution of the function's content and passes the input text through the variable
input_value.
Widget Properties
| Property | Description |
|---|---|
| Name | Widget title |
| Show Title | Whether to show the widget title True/False |
| Font Size | Text font size |
| Color | Data text display color |
| Hint | Input text hint |
| Character Limit | Input character length limit, default is 8 |
Image
Adds an image widget to the control page. When accessing the control page, the page will request image data from the specified URL at specified intervals (default interval is 3000ms), and update the image on the page widget.
Widget Properties
| Property | Description |
|---|---|
| Name | Widget title |
| Show Title | Whether to show the widget title True/False |
| Interval(ms) | Data report interval time/ms |
| Fallback URL | URL of the requested image |
Stepper
Adds a Stepper to the control page. Each stepper added generates a corresponding Callback function in the programming area. Stepper action triggers the execution of the function's content and passes the current number state through the variable stepper_value.
Widget Programming
Stepper x Callback with: stepper_value
- Stepper action triggers the execution of the function's content and passes the current number state through the variable
stepper_value.
Widget Properties
| Property | Description | |
----------- | ----------------------------------------- | | Name | Widget title | | Show Title | Whether to show the widget title True/False | | Min Value | Minimum value for the Stepper range | | Max Value | Maximum value for the Stepper range | | Step | Step value for each click |
Chart
Adds a chart to the control page. This chart requires specifying data sources through the Ezdata feature , supports configuring chart refresh intervals and basic styles.
1. Before using, please click here to understand the basics of Ezdata
2. When combining Ezdata with Chart, the data saving method
must be List, not Topic3. When passing data, use
map (dictionary) to pass key-value form data. The key needs to correspond to the X, Y Data Source fields in the chart widget, leaving it blank will result in data not being displayed.
Widget Properties
| Property | Description |
|---|---|
| Name | Widget title |
| Show Title | Whether to show the widget title True/False |
| Theme | Set chart theme Light/Dark |
| Color | Set chart element color |
| Chart Type | Set chart type, Bar/Line |
| Interval(ms) | Set chart refresh interval |
| Show Legend | Show legend True/False |
| Dataset Name | Configure dataset name |
| Y Axis Label Suffix | Configure Y axis data suffix |
| EzData Token | Configure EzData data source Token |
| List | Specify List in EzData data source |
| X Data Source | Set a field in the List data as the content for the X axis |
| Y Data Source | Set a field in the List data as the content for the Y axis |
| Max Count | Maximum display data amount for the current chart |
Joystick
Adds a joystick widget to the control page. Each joystick widget added generates a corresponding Callback function in the programming area. Joystick movement triggers the execution of the function's content and passes the current joystick state through variables joystick_x_value and joystick_y_value.
Widget Programming
Joystick x Callback with: joystick_x_value,joystick_y_value
- Joystick movement triggers the execution of the function's content and passes the current joystick state through variables
joystick_x_valueandjoystick_y_value.
Widget Properties
| Property | Description |
|---|---|
| Name | Widget title |
| Show Title | Whether to show the widget title True/False |
| Color | Joystick color |
| Auto Return | Whether the joystick auto-returns to center True/False |
| X Min | Minimum value for the X axis |
| X Max | Maximum value for the X axis |
| Y Min | Minimum value for the Y axis |
| Y Max | Maximum value for the Y axis |
Gauge
Adds a gauge to the control page. Each gauge added generates a corresponding Event timer function in the programming area. When the device program runs, it will automatically upload data content at specified intervals (default interval is 3000ms), and the uploaded content will automatically update on the page widget.
Widget Programming
Gauge 1 Event interval(ms): 3000 Set Data x
- When the device program runs, it will automatically upload data content at specified intervals (default interval is 3000ms), and the uploaded content will automatically update on the page widget. The upload interval can be configured through the widget properties, recommended interval is greater than 3000ms.
Widget Properties
| Property | Description |
|---|---|
| Name | Widget title |
| Show Title | Whether to show the widget title True/False |
| Label | Gauge title |
| Color | Gauge display color |
| Suffix | Gauge data suffix |
| Min Value | Minimum range value for the gauge |
| Max Value | Maximum range value for the gauge |
| Interval(ms) | Data report interval time |
Widget Properties
| Property | Description |
|---|---|
| Name | Widget title |
| Show Title | Whether to display the widget title True/False |
| Label | Dashboard title |
| Color | Dashboard display color |
| Suffix | Suffix for dashboard data |
| Min Value | Minimum value for the dashboard range |
| Max Value | Maximum value for the dashboard range |
| Interval(ms) | Data reporting interval in milliseconds |
Example Program
1. This example program includes the use of most REMOTE+ widgets.
2. Click to download the example program M5F file and open it in the online version of UIFlow, then push the program to your M5 device.
3. Click on the QR code button on the REMOTE+ preview window, use your phone to scan the popping QR code or copy the URL to visit the control page, and start remote control and data monitoring.