IDE Layout Introduction

UiFlow2 Web IDE is a graphical programming tool whose interface is generally divided into 6 sections: menu bar, UI editor, functional extension module, Blockly list, workspace, and run & debug. Users can carry out product development, project management, and various personalized experiences on UiFlow2. This article introduces the layout of UiFlow2 Web IDE to help users better understand and use UiFlow2.

1. Menu Bar
2. UI Editor
3. Functional Extension Module
4. Blockly List
5. Workspace
6. Run and Debug

Menu Bar

The menu bar is located at the top of the UiFlow2 Web IDE interface and mainly includes the following modules:

1. Login: Saved project files can achieve cloud engineering synchronization.

2. Project Management: Perform reference or modification operations on cloud-synchronized engineering files.

3. Save Project: Manually store engineering files locally and in the cloud.

4. Project Naming: Modify the name of the current engineering file.

5. Code Preview: Click here to switch between the graphical programming mode and the code editing mode for convenient debugging.

6. Project Zone: An official community selected project library where you can download and run projects shared by other users, and also share interesting projects with the community.

7. File Operations: Engineering file import, export, version management functions, etc.

8. Help: If you need to find official documents, product documents, and access the technical community, you can enter through the help list.

9. Settings: You can configure the interface theme, language, and other systems according to your needs.

UI Editor

If your device comes with a display, you can design a personalized UI for the device through the UI editor.

1. Layout Tools: Align or center text, images, etc.
2. Screen Display Area: You can drag the UI to layout the details of the UI on the screen 1:1.
3. Interface Style: Adjust visual parameters such as UI font, rounded corners, and shadows.

Functional Extension Module

The functional extension area can provide more diverse functional development for the device to meet various development needs of users. It mainly includes the following modules:

• SoC: Chip type
• Software: Communication protocol and file management modules. After selecting a module, you can use the corresponding Blockly for programming.
• Hardware: After selecting the corresponding module, you can directly use the built-in hardware functions of the device, such as IMU gyroscope, RGB indicator light, Speaker, etc.
• Module: To use these functions, you need to connect stackable expansion modules, such as 2Relay, 4Encoder, GPS, etc., to enhance hardware functions, such as adding relay control, motor drive, communication capabilities, etc.
• Unit: External sensor expansion unit driver library, such as Unit EnV, Unt CO2, etc., used to expand hardware functions and collect data such as temperature and CO2 concentration.
• Custom: Custom hardware driver API import interface.
• Project Files: A manager for image, audio, and font resources dependent on the project, which can store some small-capacity images and audio.

Blockly List

The Blockly list is the core functional area of UiFlow2 and the main area for graphical programming. This area integrates functions such as device basic configuration, UI programming, logical functions, and Module extension and Unit sensor control. Programming is done by dragging and splicing Blockly blocks.

• System: Configure basic system functions, such as program delay, connecting to WLAN network, controlling the battery, etc.
• UI: The UI function allows you to freely change fonts, screen colors, graphics, etc., through program code.
• Math: Trigonometric functions and logical judgment math toolbox.
• Hardware: You can control the built-in hardware of the device, such as precisely controlling Button, IMU, Touch, etc., and performing logical programming.
• Advanced: Advanced function expansion area, such as mouse functions, AI functions, etc.

Workspace

The workspace is a venue for realizing business logic construction with drag-and-drop building blocks, which can real-time generate editable MicroPython source code.

Run & Debug

1. WebTerminal: A browser-based serial debugging tool. After the device is connected to USB and the program is running, you can observe the running status of the program and error prompts. You can also perform simple operations on the files in the device in the debugging tool.

2. WebBurner: A wireless firmware burning tool.

3. Device File Manager: A device storage space file manager. If you need to import files such as pictures or audio into the device, you can import them through the storage space file manager.

4. Select Device: M5Stack device model switching. Clicking on the device model switching allows you to observe the status of the devices bound to the account. If the device is turned on and connected to WLAN, you can program in wireless mode, which is convenient and fast.

5. Run: Run the program.

6. Download: Click Download to directly download the edited program to the device and configure it to run automatically on startup.