IDE Layout Introduction

UiFlow1 Web IDE is a graphical programming tool featuring no installation required, visual programming, and modular programming. The interface is generally divided into 6 sections: Menu Bar, UI Editor, Resource Expansion Module, Blockly List, Workspace, and Run & Debug Area. Users can carry out product development, project management, and various personalized experiences on UiFlow1. This article introduces the layout of UiFlow1 Web IDE to help users better understand and use UiFlow1.

1. Menu Bar
2. UI Editor
3. Resource Expansion Module
4. Blockly List
5. Workspace
6. Run & Debug Area

Menu Bar

The Menu Bar is located at the top of the UiFlow1 Web IDE interface, mainly including the following modules:

1. Access to the technical community, selection of UiFlow versions, UiFlow1 upgrade logs, and settings menu.
2. UiFlow1 usage guidance, suitable for beginners to get started quickly.
3. Search for official documents and product documents, linking to the M5Stack official documentation center, where you can consult UiFlow1 development documents, hardware product manuals, etc.
4. Product usage samples, with a rich built-in project case library, supporting one-click import of projects into the workspace.
5. Link to the EzData manager page.

6. Save the current project as a local file (.m5f format) with a new name and new path.
7. Save modifications, saving code and design changes in the workspace.
8. Open a locally stored .m5f project file.
9. Create a new .m5f project file.
10. Project management, view the latest 100 project files and their creation times, and also perform download/delete operations.

11. Undo the previous operation (such as deleting a Block, modifying code, moving UI components).
12. Redo the undone operation, activated when there are recoverable operations.
13. Device file management, managing the file system of connected devices.
14. Display the shortcut key list.
15. Log in to the M5Stack account.
16. Switch between graphical Blockly/Python code.
17. Rename the current project file.

UI Editor

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

Drag components to the simulated display to configure basic attributes such as font size, component size, color, style, etc.

Resource Expansion Module

The Resource Expansion Module supports accessing expansion units such as sensors and controllers, which can be controlled and have information collected through interfaces on the M5 host. This area provides more diverse functional development for devices to meet users' various development needs.

Click + to add more expansion units:

Successfully added expansion units will be displayed in this area:

Blockly List

The Blockly List is the core functional area of UiFlow1 and the main area for graphical programming. This area integrates basic hardware functions, UI programming, logical functions, as well as Module extensions and Unit sensor control, etc., allowing programming by dragging and splicing Blockly blocks.

If functional units are added in the Resource Expansion Module, the corresponding expansion Blocks will be loaded into the Blockly List.

• Event: Event functions
• UI: Freely change fonts, screen colors, graphics, etc., through program code
• Hardware: Some external devices built into the M5 host, such as speakers, RGB lights, etc.
• Unit: Driver libraries for external sensor expansion units, such as Unit ENV, used to expand hardware functions and collect data such as temperature, humidity, and air pressure
• Module: Contains Blocks related to different functional bases of M5
• Advanced: Peripheral interfaces extended from the ESP32 of the M5 core, including general IO ports, serial ports, I2C, etc.
• Remote: Remote control, enabling remote control of M5 devices through mobile terminals
• System: Configure basic system functions, such as program delay, connecting to WLAN networks, controlling batteries, etc.
• Custom: Import interface for custom hardware driver APIs

Workspace

The Workspace is where business logic is built by dragging blocks, and it can generate editable Python code in real time.

Run & Debug

1. Download: Directly download the edited program to the device and configure it to run automatically at boot.
2. Run: Run the program.
3. Terminal (Beta): A browser-based serial debugging tool. After connecting the device via USB and running the program, you can observe the program's running status and error messages. The debugging tool also allows simple operations on files in the device.
4. Settings: After entering the settings menu, you can view/enter the device's API key, set the system language, select the device type, etc., as shown in the figure below.