pdf-icon

UIFlow Guide

UIFlow 1.0 Quick Start

1. UIFlow Web IDE 1.0

UIFlow 1.0 Blockly

Event

Event
Blockly Custom

UIFlow 2.0 Quick Start

1. UIFlow Web IDE 2.0

UIFlow 2.0 Blockly

UIFlow 2.0 API Docs

UIFlow 2.0 Project

Import & Export Project
Device Share
Project Zone

M5Burner

Firmware Export
Firmware Publish

Desktop IDE

UIFlow 1.x Desktop IDE
1. UIFlow Web IDE 1.0
step_done
2. M5Core Firmware & Program
step_run

M5Core Firmware Burning and Program Pushing

1. Preparation

  • Refer to the UIFlow Web IDE Tutorial to understand the basic workflow of using UIFlow and complete the installation of the M5Burner firmware burning tool.
  • Download the firmware compatible with M5Core in M5Burner, as shown below.

2. USB Driver Installation

Click the link below to download the driver program matching your operating system. Currently, there are two versions of driver chips, CP210X (for the CP2104 version) / CP34X (for the CH9102 version) driver packages. After unzipping the package, select the installation package for your operating system's bit version. (If you're unsure which USB chip your device uses, you can install both drivers. CH9102_VCP_SER_MacOS v1.7 may report an error during installation, but it has actually been installed, so you can ignore the error.)
Driver Name Applicable Driver Chip Download Link
CP210x_VCP_Windows CP2104 Download
CP210x_VCP_MacOS CP2104 Download
CP210x_VCP_Linux CP2104 Download
CH9102_VCP_SER_Windows CH9102 Download
CH9102_VCP_SER_MacOS v1.7 CH9102 Download

3. Port Selection

  1. Connect the device to the computer via a USB cable, in M5Burner, select the Burn button for the corresponding firmware, fill in the WiFi information, and select the corresponding device port.

4. Firmware Burning

  1. Click the Start button to begin burning. Note: If the burning process fails or a connection timeout occurs, check for port occupancy or try using a different USB cable or lowering the baud rate.

5. API KEY

  1. After completing the firmware burning, the device will restart, keeping the USB connection. Use M5Burner to click the Configure option, select the corresponding port, and click Load to load the current device configuration. A popup will display the device's API KEY, Start Mode, and other information. You can copy and save the device's API KEY for later use. Note: In this example, we will use UIFlow Web IDE (online version) for programming, so ensure that Start Mode is set to Internet Mode.
  1. After configuring the device for online programming mode, we need to use the API KEY to connect the device with UIFlow, enabling program pushing to the specified device. Users need to access flow.m5stack.com in

5. API KEY

  1. After completing the firmware flashing, the device will restart and maintain the USB connection. Use M5Burner and click the Configure option, select the corresponding port, and click Load to load the current device configuration. A popup displaying the current device's API KEY, Start Mode, and other information will appear upon successful retrieval. At this point, we can copy and save the device's API KEY information for use in subsequent steps. Note: In this example, we will use UIFlow Web IDE (network version) for programming, so the Start Mode needs to be set to Internet Mode.

  1. After setting the device to online programming mode, we need to use the API KEY to establish a connection between the device and UIFlow, enabling us to push programs to the specified device. Users need to visit flow.m5stack.com in their computer's web browser to enter the UIFlow programming page.

  2. Click the settings button in the top right corner of the page, enter the API KEY we obtained in the previous step, click OK to save, and wait for the connection successful prompt.

6. RUN

  1. After completing the above steps, you can start programming with UIFlow. Below we will demonstrate a simple program that drives the screen to display "Hello M5". (1. Place a label 2. Add a label block 3. Click the run button in the top right corner)

7. USB Programming Mode

  • Refer to the UIFlow Desktop IDE Tutorial for the basic installation process of UIFlow Desktop and understand the basic usage flow. Follow the steps below to set the device to USB programming mode, or you can program via UIFlow Desktop IDE after setting the Start Mode to USB Mode through M5Burner's Configure option.

8. Related Links

9. Related Videos

  • Introduction to UIFlow
  • Video Tutorial on Developing M5Core with UIFlow
On This Page