UIFlow 1.0 Quick Start

1. UIFlow Web IDE 1.0

UIFlow 1.0 Blockly

Blockly Custom

UIFlow 2.0 Quick Start

1. UIFlow Web IDE 2.0

UIFlow 2.0 Blockly

UIFlow 2.0 API Docs

M5Burner

Firmware Export
Firmware Publish

Desktop IDE

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

M5Atom 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 M5Atom in M5Burner, as shown below.

2. USB Driver Installation

  • Connect the device to the PC, open the device manager to install the FTDI driver for the device. For Windows 10, download the driver file matching your operating system and unzip it. Install via the device manager. (Note: In some system environments, it may be necessary to install the driver twice for it to take effect. Devices usually appear as M5Stack or USB Serial. Windows recommends using the driver file for direct installation through the device manager (custom update), as the executable file installation method may not work properly). Click here to download the FTDI driver .
  • For MacOS users, please check System Preferences -> Security & Privacy -> General -> Allow apps downloaded from: -> App Store and identified developers before installation.

<img src=" https://static-cdn.m5stack.com/resource/docs/static/image/base/System_preferences.webp ) width="50%"

3. Port Selection

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

4. Firmware Burning

  1. Click the Start button to begin burning. Note: If burning fails or connection times out, check for port occupancy or try updating the USB cable, reducing the baud rate.

5. API KEY

  1. After completing the firmware burning, the device will restart while keeping the USB connection. Use M5Burner to click the Configure option, select the corresponding port, and click Load to load the current device configuration. After a successful load, a popup will display the device's API KEY, Start Mode, and other information. At this point, we can copy and save the device's API KEY for use in subsequent steps. Note: In this example, we will use the UIFlow Web IDE (network version) for programming, so 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 connect the device with UIFlow, enabling program pushing to the specified device. Users need to access flow.m5stack.com in a browser on the computer 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 a connection success prompt.

6. RUN

  1. After completing the above configurations, let's try programming to light up the LED. First, from the program block menu on the left, select Hardware -> RGB -> Set RGB Bar color. Drag it to the workspace and connect to setup. Click the run button in the top right corner to execute the program.
On This Page