Design of a low-code development platform for electronic devices using a graphical user interface.

Abstract

1. Name of the product in this design: Graphical User Interface for Low-Code Development Platform of Electronic Devices. 2. Intended use of this design: for use in an electronic device. 3. The key design features of this product are its graphical user interface content. 4. The image or photograph that best illustrates the design's key features: the front view. 5. Purpose of the graphical user interface: The graphical user interface of this design is intended to help low-code developers build page workflows. Click the "Approver" button in the left-hand node panel of the main view and drag it to the target position in the middle of the interface. After releasing the mouse, the interface changes as shown in Figure 1. When the mouse hovers over the "Initiate" node in the interface change state diagram 1, snap points appear around the node. Clicking the snap point below the node will automatically create a connecting line following the mouse, as shown in the interface change state diagram 2. Drag the connecting line in the interface change state diagram 2 to the vicinity of the "Approver" node, and the connecting line will automatically connect to the snap point above the "Approver", as shown in the interface change state diagram 3. Clicking the edit icon on the approver node in interface change state diagram 3 will display interface change state diagram 4. After naming the approver and completing the approver settings in the interface change state diagram 4, clicking the save button will display the interface change state diagram 5. Click the "Conditional Branch" button in the left node panel of the interface change state diagram 5, and drag it to the target position in the middle of the interface. After releasing the mouse, the interface change state diagram 6 will be displayed. When the mouse hovers over the "Approver 1" node in the interface change state diagram 6, snap points appear around the node. Clicking the snap point below the node will automatically create a connecting line. Drag the connecting line to the vicinity of "Add Conditions", and the connecting line below the approver will automatically connect to the snap point above the "Add Conditions" node, as shown in the interface change state diagram 7. Hovering the mouse over the "Condition 1" card in the interface change state diagram 7 will display the interface change state diagram 8. Clicking the edit icon on the "Condition 1" card in the interface change state diagram 8 will display the interface change state diagram 9. Complete the node settings for "Condition 1" in the pop-up window on the right side of the interface change state diagram 9, and click the save button to display the interface change state diagram 10. After connecting the adsorption points below "Condition 1" and "Other Cases" in the interface change state diagram 10 with the adsorption points near the "End" node, the interface change state diagram 11 is displayed. Hovering the mouse over the line connecting the "Approver 1" node and the "Add Condition" node in the interface change state diagram 11 will display the interface change state diagram 12. Clicking the cross on the line connecting "Approver 1" and "Add Condition" in the interface change state diagram 12 will delete the line, as shown in the interface change state diagram 13. Click the copy icon on the "Approver 1" node in the interface change state diagram 13, and a new "Approver 1" node will appear on the interface, as shown in the interface change state diagram 14. Hovering the mouse over the newly copied "Approver 1" node on the right side of the interface change state diagram 14 will display the edit button, as shown in the interface change state diagram 15. Clicking the edit icon on the new approver node in the interface change state diagram 15 will display the interface change state diagram 16. After naming the new approver and completing the settings for the new approver in the interface change state diagram 16, click the save button to complete the editing, as shown in the interface change state diagram 17. Hovering the mouse over the "Approver 2" node in the interface change state diagram 17 will reveal a snap point. Connecting the snap point to the right of "Approver 2" and the snap point above "Add Condition" will complete all the connections, as shown in the interface change state diagram 18.

Images