pdf-icon

Remote+

Feature Description

The 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

In the block menu, REMOTE+ offers a draw QR code block that can display the URL of the control webpage as a QR code on the device screen.
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.

Note:
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 Topic
3. 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_value and joystick_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

Instructions:
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.
On This Page