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.
The menu bar is located at the top of the UiFlow2 Web IDE interface and mainly includes the following modules:
Login: Saved project files can achieve cloud engineering synchronization.
Project Management: Perform reference or modification operations on cloud-synchronized engineering files.
Save Project: Manually store engineering files locally and in the cloud.
Project Naming: Modify the name of the current engineering file.
Code Preview: Click here to switch between the graphical programming mode and the code editing mode for convenient debugging.
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.
File Operations: Engineering file import, export, version management functions, etc.
Help: If you need to find official documents, product documents, and access the technical community, you can enter through the help list.
Settings: You can configure the interface theme, language, and other systems according to your needs.
If your device comes with a display, you can design a personalized UI for the device through the UI editor.
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:
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.
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.
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.
WebBurner: A wireless firmware burning tool.
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.
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.
Run: Run the program.
Download: Click Download to directly download the edited program to the device and configure it to run automatically on startup.