Remote+

Function Description

Create a web page composed of controls through the Remote+ function, which can be used to remotely control the M5Stack device. This page is associated with the API KEY of the device and will be stored in the M5 service for a long time, and a fixed access link is provided. Users can access and share device information or remotely control the device anytime and anywhere.
Note: This function requires the online version of UIFlow

QRCODE

In the program block menu, REMOTE+ provides a drawing QR code block, which can display the URL of the access control webpage on the device screen in the form of a QR code.
Click the Remote+ function, and a preview window will appear on the right side of the page for adding controls. The user can add controls to the blank space of the page by dragging.
After configuring all the controls and completing the program push, click the QR code at the top of the preview window to get the control page link.

Remote qrcode show in x y size

  • Specify the size (width) of the QR code and the coordinates x, y of the display position

Title

Add a text Title to the control page

Properties

Properties Description
Label Title Content
Color Title font color
Background Title background color
Font Size Title Font Size

Button

Add a touch button to the control page. Each time a button is added, a corresponding Callback function will be automatically generated in the programming area. After the button is pressed, the content of the execution function will be triggered.

Blockly

Button x Callback

  • After pressing the button, the content of the execution function will be triggered

Properties

Properties Description
Name Control Title
Show Title Whether to display the control title True/False
Color Title font color
Background Title background color
Edges Button edge style, sharp/Pill
Style Set the button fill style. Outline/Solid

Switch

Add a toggle switch to the control page. Each time you add a toggle switch, a corresponding Callback function will be automatically generated in the programming area. The content of the execution function will be triggered when the switch is activated, and the switch state will be passed through the variable switch_value.

Blockly

Switch x Callback with: switch_value

  • When the switch is activated, the content of the execution function will be triggered, and the switch state will be passed through the variable switch_value. switch_value: 1(ON)/0(OFF)

Properties

Properties Description
Name Control Title
Show Title Whether to display the control title True/False
Off Label Off Status Identification
On Label On Label
Off Color Off status font color
On Color Open state font color
Off Background Off status background color
On Background Open state background color

Slider

Add a slider to the control page. Each time you add a slider, a corresponding Callback function will be automatically generated in the programming area. When the slider moves, the content of the execution function will be triggered, and the switch state will be passed through the variable slider_value.

Blockly

Slider x Callback with: slider_value

  • The content of the execution function will be triggered when the slider moves, and the position of the slider will be passed through the variable slider_value. slider_value: The value range can be configured through Properties.

Properties

Properties Description
Name Control Title
Show Title Whether to display the control title True/False
Show Value Whether to display the current slider value True/False
Color Slider Color
Min Value The minimum value of the slider range
Max Value The maximum value of the slider range

Label

Add a display label to the control page. Each time you add a display label, a corresponding Event timer function will be automatically generated in the programming area. When the device program is running, the data content will be automatically uploaded at the specified interval (the default interval is 3000ms). The content will be automatically updated and displayed on the page controls.

Blockly

Label 1 Event interval(ms): 3000 Set Data x

  • When the device program is running, the data content will be automatically uploaded at the specified interval (the default interval is 3000ms), and the uploaded content will be automatically updated and displayed on the page controls. The upload interval can be configured through Properties, and the recommended interval is greater than 3000ms.

Properties

Properties Description
Name Control Title
Show Title Whether to display the control title True/False
Font Size Text font size
Color Data text display color
Interval(ms) Data reporting interval/ms

Input

Add an input text box to the control page, each time an input text box is added, a corresponding Callback function will be automatically generated in the programming area, and the content of the execution function will be triggered when the text of the input box changes, and the input text will be passed through the variable input_value .

Blockly

Input 1 Callback with:input_value

  • When the input box text changes, the content of the execution function will be triggered, and the input text will be passed through the variable input_value.

Properties

Properties Description
Name Control Title
Show Title Whether to display the control title True/False
Font Size Text font size
Color Data text display color
Hint -Input text hint
Character Limit Enter the character length limit, the default is 8

Image

Add an image control to the control page. When accessing the control page, the page will obtain the image data from the specified URL at the specified interval (the default interval is 3000ms), and update the display on the page control.

Properties

Properties Description
Name Control Title
Show Title Whether to display the control title True/False
Interval(ms) Data reporting interval/ms
Fallback URL URL of the requested image

Stepper

Add a Stepper to the control page. Each time you add a slider, a corresponding Callback function will be automatically generated in the programming area. When the Stepper acts, the content of the execution function will be triggered, and the current value status will be passed through the variable stepper_value.

Blockly

Stepper x Callback with: stepper_value

  • When the Stepper action, it will trigger the content of the execution function, and pass the current value state through the variable stepper_value.

Properties

Properties Description
Name Control Title
Show Title Whether to display the control title True/False
Min Value Stepper range minimum value
Max Value Stepper range maximum value
Step Set the Step value for each click

Chart

To add an icon to the control page, the icon needs to specify the data source through Ezdata function , and supports the configuration of the chart refresh interval and basic style.

Note

1. Before using, please click here to understand the basic use of Ezdata
2. When using Ezdata with Chart, the data storage method that needs to be used is topic, Not List
3. When transferring data, you need to use map (dictionary) to transfer data in the form of key-value. The key needs to correspond to the X and Y Data Source fields in the chart control.

Properties

Properties Description
Name Control Title
Show Title Whether to display the control title True/False
Theme Set chart theme Light/Dark
Color Set the color of chart elements
Chart Type Set chart type, Bar/Line
Interval(ms) Set chart refresh interval
Show Legend Show Legend True/False
Dataset Name Configuration Dataset Name
Y Axis Label Suffix Configure Y Axis Data Suffix
EzData Token Configure EzData Data Source Token
Topic Specify Topic of EzData Data Source
X Data Source Set a field in Topic data as X-axis content (usually use time as data to form historical records)
Y Data Source Set a field in Topic data as Y-axis content (usually use monitoring content as data to form a data trend)
Max Count The maximum amount of data displayed in the current chart

Joystick

Add a joystick control to the control page, each time a joystick control is added, a corresponding Callback function will be automatically generated in the programming area, and the content of the execution function will be triggered when the joystick control moves, and through the variables joystick_x_value and joystick_y_value Pass the current joystick state.

Blockly

Jpystick x Callback with: joystick_x_value,joystick_y_value

  • The content of the execution function will be triggered when the joystick control moves, and the current joystick state will be passed through the variables joystick_x_value and joystick_y_value

Properties

Properties Description
Name Control Title
Show Title Whether to display the control title True/False
Color Rocker Color
Auto Return Whether to return to the origin automatically when the joystick is released True/False
X Min X-axis minimum position value
X Max X-axis maximum position value
Y Min Y-axis minimum position value
Y Max Y axis maximum position value

Gauge

Add a dashboard to the control page. Each time a dashboard is added, a corresponding Event timer function will be automatically generated in the programming area. When the device program is running, the data content will be automatically uploaded at the specified interval (the default interval is 3000ms). The content will be automatically updated and displayed on the page controls.

Blockly

Gauge 1 Event interval(ms): 3000 Set Data x

  • When the device program is running, the data content will be automatically uploaded at the specified interval (the default interval is 3000ms), and the uploaded content will be automatically updated and displayed on the page controls. The upload interval can be configured through the control properties, and the recommended interval is greater than 3000ms.

Properties

Properties Description
Name Control Title
Show Title Whether to display the control title True/False
Label Dashboard Title
Color Dashboard display color
Suffix Dashboard data suffix
Min Value The minimum value of the instrument panel range
Max Value The maximum value of the instrument panel range
Interval(ms) Data reporting interval/ms

Example

Instructions for use:
1. This case program contains the use of most REMOTE+ controls
2. Click to download the sample program M5F file and open it in the online version of UIFlow, and push the program to the M5 device.
3. Click the QR code button on the REMOTE+ preview window, use your mobile phone to scan the pop-up QR code or copy the URL to access the control page to start remote control and data monitoring.

On This Page