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. M5StickC Firmware & Program
step_run

M5StickC 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 M5StickC in M5Burner, as shown in the image below.

2. USB Driver Installation

Connect the device to the PC and open Device Manager to install the FTDI driver for the device. For example, in Windows 10, download the driver matching your operating system, unzip it, and install it through Device Manager. (Note: In some system environments, you may need to install the driver twice for it to take effect. The unrecognized device name is usually M5Stack or USB Serial. It is recommended to use the driver files for installation directly in Device Manager for Windows, as the executable file installation method may not work properly.) Click here to download the FTDI driver
For MacOS users, before installation, please check System Preferences -> Security & Privacy -> General -> Allow apps downloaded from: -> App Store and identified developers.

3. Port Selection

  1. Connect the device to the computer via USB. In M5Burner, select the Burn button for the corresponding firmware, fill in 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, try updating the USB cable, or lower the baud rate.

5. API KEY

  1. After completing the firmware burning, the device will restart while remaining connected via USB. Use M5Burner to click the Configure option, select the corresponding port, and click Load to load the current device configuration. Once loaded successfully, 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 later steps. Note: In this example, we will use UIFlow Web IDE (web version) for programming, so the Start Mode needs to be 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, allowing programs to be pushed to the specified device. Users need to visit flow.m5stack.com on their computer's browser to enter the UIFlow programming page.

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

6. RUN

  1. After completing the above steps, you can start programming with UIFlow. Below is a demonstration of a simple program to light up the LED on the M5StickC. (1. Drag the LED lighting block 2. Connect it to the Setup initialization program 3. Click the run button in the upper right corner)
On This Page