Flowchart-based visual low-code software development method and system

Abstract

This invention relates to a flowchart-based visual low-code software development method and system, which solves the problem of how to achieve fully visual, low-barrier, and highly scalable software development, belonging to the field of computer software development technology. The invention includes: providing a flowchart editor in Qt Creator to receive user-constructed logic flowcharts and save them as descriptive files; at runtime, loading the descriptive file, parsing the type name and configuration data of each functional node in the JSON of the descriptive file; dynamically loading the corresponding DLL according to the type name of the functional node, and instantiating functional node objects that implement a unified node interface by calling the factory function exported in the DLL and passing the configuration data as parameters to the factory function; establishing directed graph connections between nodes according to the connection relationships in the file to form an executable flowchart; and sequentially calling the execution methods of each node starting from the starting node to run the application logic.

Description

Technical Field

[0001] This application relates to a flowchart-based visual low-code software development method and system, belonging to the field of computer software development technology. Background Technology

[0002] With the deepening of digital transformation in various industries, the demand for software development has exploded, and the traditional text-based software development model is facing severe challenges in terms of efficiency, cost and flexibility.

[0003] Currently, there are two main types of mainstream software development methods: one is traditional text-based programming, such as using high-level languages ​​like C++ and Java. Developers need deep professional knowledge and long-term learning accumulation, resulting in long development cycles, high labor costs, and difficulty for non-technical personnel like project managers and product managers to directly participate in the implementation of business logic, leading to huge communication costs and frequent implementation deviations. The other type is the low-code / no-code development platforms that have emerged in recent years, such as Node-RED and LabVIEW, which are visual programming environments based on data flow or flowcharts. Node-RED is an open-source visual programming tool based on Node.js, primarily targeting the Internet of Things (IoT) field, where application logic is built by dragging and dropping nodes and connecting message flows. LabVIEW, on the other hand, is geared towards test and measurement and industrial control, providing a graphical programming approach; its core is a data flow-driven node execution model.

[0004] However, existing low-code / no-code platforms still have the following prominent issues:

[0005] (i) High barriers to entry and high costs: Although some low-code platforms provide visual interfaces, they still require users to understand specific domain concepts (such as Node-RED's message passing mechanism) or write a certain amount of script code (such as expressions and function nodes), failing to completely eliminate the need for text-based programming. Non-professional developers (such as test engineers and product managers) still find it difficult to independently complete the development of applications containing complex branching, looping, or state machine logic.

[0006] (ii) High Coupling Between Logic and View: In existing low-code tools, UI design is often not thoroughly separated from business logic. For example, Node-RED mainly handles backend data flow, and interaction with frontend UI controls requires additional Web components or message bridges; although LabVIEW's front panel (UI) and block diagram (logic) are in the same environment, in large applications, the response logic of controls is still scattered across multiple sub-VIs, making maintenance and reuse difficult. When it is necessary to dynamically change the appearance of controls based on business status (such as indicator light color, button enable), a large amount of binding code or event callbacks often need to be written, resulting in a still high coupling between UI and logic.

[0007] (iii) Low level of visualization: Although existing tools provide flowchart editing capabilities, the core execution logic, such as concurrent processing, asynchronous waiting, and state transitions, is still partially hidden inside nodes or relies on text configuration. Developers find it difficult to intuitively examine the complete behavior of the entire program when multiple branches are executed in parallel, resulting in high debugging and understanding costs.

[0008] (iv) Insufficient scalability and customization capabilities: Most low-code platforms adopt a closed architecture or a restrictive plug-in model. When it is necessary to connect to specific hardware drivers (such as high-precision voltage acquisition cards), implement proprietary algorithms, or utilize mature third-party libraries in the C++ ecosystem, they often cannot support these or the cost of expansion is extremely high. Even with LabVIEW, writing custom composite nodes (sub-VIs) still requires the use of a graphical language, and it is impossible to directly reuse massive amounts of C / C++ code assets; Node-RED's custom composite nodes are developed using JavaScript, and their performance and real-time capabilities are difficult to meet the stringent requirements of the industrial control field.

[0009] It is evident that existing low-code / no-code platforms still have significant shortcomings in terms of programming barriers, decoupling of UI and logic, visualization of execution flow, and scalability and customization capabilities. There is an urgent need for a fully visual, low-barrier, and highly scalable visual software development solution. Summary of the Invention

[0010] To address the challenge of achieving fully visual, low-barrier, and highly scalable software development, this application provides a flowchart-based visual low-code software development method and system.

[0011] This application discloses a flowchart-based visual low-code software development method, comprising:

[0012] S1. In the Qt Creator integrated development environment, a graphical flowchart editor is provided to receive application logic flowcharts constructed by users through dragging, configuring and connecting predefined functional nodes, and to persist the application logic flowcharts as descriptive files;

[0013] S2. At runtime, load the descriptive file and parse the type name and configuration data of each functional node in the JSON descriptive file;

[0014] S3. Based on the type name of the functional node, dynamically load the corresponding functional node dynamic link library, and instantiate a functional node object that implements the unified node interface by calling the factory function exported in the functional node dynamic link library and passing the configuration data as a parameter into the factory function.

[0015] S4. Based on the connection relationships between functional nodes recorded in the descriptive file, establish directed graph connections between each functional node object to form an executable flowchart structure;

[0016] S5. Starting from the initial functional node of the flowchart structure, the execution methods of each functional node object are called sequentially to complete the operation of the application logic.

[0017] Preferably, in the Qt Creator integrated development environment, the graphical flowchart editor receives user operations to drag and drop predefined functional nodes from the functional node library on the left to the canvas;

[0018] Receive user operations to connect the output port of one function node to the input port of another function node on the canvas;

[0019] The system receives user input parameters through the property configuration interface after double-clicking a function node, and persists the unique identifier of all function nodes on the canvas, the function node type name, the flag indicating whether it is a custom composite node, the initial configuration data of the function node, and the list of target function node identifiers connected to the output port of each function node as a JSON descriptive file.

[0020] Preferably, S2 includes:

[0021] At runtime, the corresponding descriptive file is located and read based on the passed flowchart name, the root object of the descriptive file is parsed, and the array of nodes contained therein is obtained;

[0022] Iterate through each functional node in the node array and extract the type name and configuration data of each functional node;

[0023] It also initializes an empty mapping table of node identifiers to node object pointers and an empty set of connected node IDs.

[0024] Preferably, S3 includes:

[0025] For each functional node in the descriptive file, determine whether it is a custom composite node. If not, obtain the file path of the dynamic link library based on the type name of the functional node, load the dynamic link library using Qt's QLibrary class, parse the factory function from the dynamic link library, call the factory function, and pass the configuration data of the corresponding functional node as a parameter to the factory function. The factory function creates a functional node object that implements the INode interface on the heap based on the configuration data, returns a pointer to the functional node object, and stores the pointer to the functional node object along with the unique identifier of the functional node in the mapping table of node identifiers to node object pointers.

[0026] If so, recursively execute steps S2 and S3 to load the subprocess, encapsulate the subprocess into a CustomNode object, and store the pointer of the CustomNode object along with the unique identifier of the functional node into the mapping table of node identifiers to node object pointers.

[0027] As a preferred option, a sub-flowchart is encapsulated within the custom composite node. This sub-flowchart is composed of one or more basic functional nodes connected according to business logic.

[0028] When the execution method of the custom composite node is called, all functional nodes in its encapsulated sub-flowchart are executed sequentially until the sub-flowchart is completed.

[0029] As a preferred embodiment, the specific process of establishing connections between various functional node objects in S4 includes:

[0030] The process iterates through all functional nodes described in the descriptive file again. For each functional node, it reads the output port connection information stored in the descriptive file. This information records the identifiers of which target functional nodes each output port of the functional node is connected to. Based on these target functional node identifiers, it searches for the corresponding target node object pointer in the mapping table from node identifiers to node object pointers. For each output port, it adds the found target functional node object pointer to the target functional node list corresponding to that output port of the current functional node, thereby establishing a directed graph connection relationship between all functional node objects that is completely consistent with the original flowchart design.

[0031] As a preferred embodiment, S5 includes:

[0032] First, identify the starting functional node from all instantiated functional node objects. The starting functional node is the functional node that is not pointed to by the output port of any other functional node. For each identified starting functional node, create an independent execution work unit and allocate an independent thread to the execution work unit.

[0033] Within each work unit, a context variable container is maintained to pass and share data during process execution;

[0034] Starting from the initial functional node, perform the following operations in a loop: call the execution method of the current functional node, which internally completes the functional node's own business functions and can modify the data in the context variable container. Then, based on the functional node's internal logic and output port connection relationship, return the next functional node that should be executed. Use the returned functional node as the new current functional node and repeat the above operations until a functional node returns an empty value, indicating that the branch process has ended.

[0035] As a preferred embodiment, the method of this application also includes the step of binding UI controls to flowcharts:

[0036] Provide a template base class that inherits from the basic Qt controls. This template base class defines an interface for setting properties to receive the flowchart name, including a binding interface triggered when the control is created and a binding interface triggered when the control is clicked.

[0037] In the interface designer, custom controls are derived from the template base class and an associated flowchart name is assigned to them, which is saved as a property of the control.

[0038] When the custom control is created or clicked, the control automatically calls the runtime process execution entry point and passes the flowchart name and the current control's own pointer as parameters to the entry point.

[0039] The process execution entry point stores the received control pointer into a preset key name in the context variable container, and then executes the flowchart corresponding to the flowchart name, that is, executes S2 to S5 in sequence;

[0040] During the execution of the functional nodes in the flowchart, the node obtains the control pointer by reading the preset key name in the context variable container, and calls the public method of the control, thereby dynamically changing the display state or behavior of the control, realizing the driving of the UI control by the flowchart logic.

[0041] This application also provides a flowchart-based visual low-code software development system, including:

[0042] The Qt Creator integration plugin provides a graphical flowchart editor within the Qt Creator integrated development environment. It receives application logic flowcharts built by users through dragging, configuring, and connecting predefined functional nodes, and persists the application logic flowcharts as descriptive files.

[0043] The function node library contains multiple independently compiled dynamic link libraries. Each dynamic link library corresponds to a function node, and each dynamic link library exports a factory function for creating node instances and implements a unified node interface.

[0044] The main runtime library is used to load the descriptive file and parse the type name and configuration data of each functional node; it is also used to dynamically load the corresponding dynamic link library from the functional node library according to the type name of the functional node, and instantiate a functional node object that implements the unified node interface by calling the factory function exported from the dynamic link library and passing the configuration data as a parameter; it is also used to establish directed graph connections between the functional node objects according to the connection relationship between the functional nodes recorded in the descriptive file, forming an executable flowchart structure; and it is also used to call the execution method of each functional node object sequentially from the starting functional node of the flowchart structure to complete the execution of the application logic.

[0045] A custom control library contains one or more custom user interface controls derived from a template base class. The custom controls have an attribute that binds to the flowchart name. When a specific event of a control occurs, the custom control automatically calls the entry point of the main runtime library and passes its own pointer as a context variable to the main runtime library to trigger the execution of the flowchart corresponding to the descriptive file.

[0046] The beneficial effects of this application are that it minimizes the development threshold: completely eliminating the text-based code writing process. Non-programmers such as project managers and test engineers only need to understand the business logic to independently complete application development by dragging and dropping and configuring nodes, greatly shortening the cycle from requirements to delivery.

[0047] 100% Visual Program Logic: The entire program's execution path, conditional branches, loops, and waiting logic are presented intuitively in the form of flowcharts. This not only facilitates design and debugging for developers but also makes code review, knowledge transfer, and later maintenance simpler and more efficient than ever before.

[0048] High performance and high reliability: The system is built on the C++ and Qt framework, resulting in high execution efficiency. Multithreading (QThread) enables concurrent execution of processes, ensuring smooth UI responsiveness. Dynamic loading and isolated execution of nodes (each node has an independent DLL) improves system stability and fault tolerance; the failure of a single node will not cause the entire program to crash.

[0049] Excellent scalability and customization capabilities: By defining a standard INode interface and a plug-in architecture of "one node, one DLL", developers can easily use C++ to develop new and powerful custom nodes (such as connecting to specific hardware drivers and implementing proprietary algorithms) and seamlessly integrate them into this platform to meet various professional and complex application scenarios.

[0050] Perfect decoupling and linkage between UI and logic: Through the design of WidgetBase, the performance and behavior of UI controls are entirely driven by the backend flowchart. Developers can focus on UI layout and style design, while letting the flowchart handle the interaction logic, achieving a perfect separation between view and controller. Attached Figure Description

[0051] Figure 1 Screenshot of the graphical user interface for editing flowcharts in the Qt Creator integrated development environment;

[0052] Figure 2 This is a screenshot of a graphical user interface for configuring parameters for the "variable" node in the flowchart. Detailed Implementation

[0053] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those of ordinary skill in the art without creative effort are within the scope of protection of this application.

[0054] It should be noted that, unless otherwise specified, the embodiments and features described in this application can be combined with each other.

[0055] The present application will be further described below with reference to the accompanying drawings and specific embodiments, but this is not intended to limit the scope of the application.

[0056] This embodiment describes how to build a simple voltage monitoring and alarm application without writing any C++ code using the flowchart-based visual low-code software development system and method provided in this application. The environment required for this embodiment includes: a workstation with the Qt Creator integrated development environment installed, and a complete software development system that integrates the Qt Creator plugin, main runtime library, function node library, and custom control library provided in this embodiment.

[0057] This implementation method is based on a flowchart-based visual low-code software development system, including:

[0058] The Qt Creator integration plugin provides a graphical flowchart editor within the Qt Creator integrated development environment. It receives application logic flowcharts built by users through dragging, configuring, and connecting predefined functional nodes, and persists these flowcharts as descriptive files, specifically JSON (JavaScript Object Notation) format files.

[0059] The function node library contains multiple independently compiled dynamic link libraries. Each dynamic link library corresponds to a function node, and each dynamic link library exports a factory function for creating node instances and implements a unified node interface.

[0060] Specifically, the functional node library consists of a series of dynamic link library (DLL) files that implement specific atomic functions. Each functional node (such as "voltage acquisition", "condition judgment", "delay", "indicator", etc., see the node panel in flow.png) corresponds to an independent DLL and interacts with the main runtime library by implementing a unified interface INode (defined in inode.h). This design allows functional nodes to be plugged in and out on demand, developed and deployed independently, greatly enhancing the system's scalability.

[0061] The main runtime library is used to load the descriptive file and parse the type name and configuration data of each functional node; it is also used to dynamically load the corresponding dynamic link library from the functional node library according to the type name of the functional node, and instantiate a functional node object that implements the unified node interface by calling the factory function exported from the dynamic link library and passing the configuration data as a parameter; it is also used to establish directed graph connections between the functional node objects according to the connection relationship between the functional nodes recorded in the descriptive file, forming an executable flowchart structure; and it is also used to call the execution method of each functional node object sequentially from the starting functional node of the flowchart structure to complete the execution of the application logic.

[0062] The main runtime library is the core engine of this application, and it is mainly implemented by the process management module, execution work unit, unified node interface, sub-process encapsulation module, etc.

[0063] The `Flow` class in the process management module is the entry point for the entire runtime library. It is responsible for loading the corresponding JSON description file based on the flowchart name, traversing and instantiating all nodes, establishing connections between nodes, and ultimately initiating the execution of the process. It also provides the ability to recursively create custom composite nodes (sub-processes). Here, a "sub-process" refers to a flowchart that has already been defined and saved as a separate JSON file. A custom composite node essentially embeds this sub-process as a high-level node into the current process. The `FlowWorker` class in the execution unit encapsulates the execution thread of the process. Within a separate thread, it starts from the initial node, chaining calls to the `execute` function of each node to complete the entire process, and emits a completion signal upon completion.

[0064] The unified node interface defines a unified abstract interface INode for all nodes, which contains a pure virtual function for a node's execution method and a list of output ports pointing to subsequent nodes. Any functional node must implement this interface.

[0065] The CustomNode class in the subprocess encapsulation module supports composite nodes. It also implements the INode interface, but internally encapsulates a subprocess consisting of multiple basic nodes. When its execute method is called, all nodes in the subprocess are executed sequentially, thus supporting modularity and reusability of logic.

[0066] A custom control library contains one or more custom user interface controls derived from a template base class. The custom controls have an attribute that binds to the flowchart name. When a specific event of a control occurs, the custom control automatically calls the entry point of the main runtime library and passes its own pointer as a context variable to the main runtime library to trigger the execution of the flowchart corresponding to the descriptive file.

[0067] The custom control library is a set of Qt user interface (UI) controls that are seamlessly integrated with flowchart logic, specifically including:

[0068] The control template base class defines a template class WidgetBase <t>WidgetBase is the base class for all custom controls associated with workflows. It provides methods for setting click-triggered workflows, allowing controls to automatically load and execute a specified workflow upon creation. It also provides template instantiation, supporting inheritance from various Qt basic controls such as QWidget or QPushButton.

[0069] The indicator light control inherits from WidgetBase <qwidget>This implementation creates an indicator light control that changes color according to the workflow. It provides a `setColor` method, which can be called within workflow nodes to change its display color for status indication.

[0070] The button control inherits from WidgetBase <qpushbutton>This implementation creates a button control that interacts with a workflow. It provides interface methods for setting click-triggered workflows, allowing developers to bind a flowchart to the button's click event. When the user clicks the button, the workflow will be executed.

[0071] This embodiment provides a flowchart-based visual low-code software development method, including:

[0072] Step 1: In the Qt Creator integrated development environment, developers obtain a graphical flowchart editor by installing the plugin described in this application. This editor is based on Qt's graphical view framework. Developers drag and drop predefined functional nodes (such as "Voltage Acquisition", "Conditional Judgment", "Delay", "Indicator Light", etc.) from the left-hand node library onto the central canvas. They can also drag and drop to connect the output port of one node to the input port of another node, and double-click a node to bring up a property configuration dialog box to input the required parameters (such as judgment threshold, acquisition channel number). After editing, they connect them according to the business logic to form a directed graph (flowchart). For example, a voltage monitoring and alarm process can be constructed: [Start] -> [Voltage Acquisition Node] -> [Voltage Judgment Node] -> (If Exceeding Limit) -> [Indicator Light Node (Turns Red)]. The plugin serializes all node information (unique identifier, node type name, whether it is a custom composite node, initialization configuration data) and the connection relationships between nodes (a list of target node identifiers connected to each output port) into a JSON format descriptive file and saves it to the project directory. The JSON file can have the extension .flow or .json. Specifically:

[0073] In implementation, it is implemented as a Qt Creator plugin. This plugin loads automatically when Qt Creator starts and adds an entry point for the flowchart editor to the menu bar and toolbar of the main window. When the user clicks the entry point, the plugin creates a new editor tab containing a canvas based on the Qt GraphicsView framework and a draggable function node library panel on the left.

[0074] Node Drag and Drop: The function node library lists all available predefined function nodes, such as "Voltage Acquisition," "Conditional Judgment," "Delay," and "Indicator Light Control." Each node item corresponds to an icon and text. Users can click and drag a node item onto the canvas, and the plugin will then create a corresponding node graphic unit on the canvas. Each node graphic unit has a unique numerical identifier and displays the node's name, as well as several input and output ports (usually represented by small dots).

[0075] Node Configuration: When a user double-clicks a node graphic unit on the canvas, the plugin will display a property configuration dialog box. The dialog box content is dynamically generated based on the node type: for voltage acquisition nodes, input boxes for "Acquisition Channel Number" and "Sampling Rate" are provided; for "Conditional Judgment" nodes, an "Expression" edit box is provided (e.g., ${voltage} > 3.0); for "Delay" nodes, an input box for "Delay Time (milliseconds)" is provided. After the user fills in the parameters and confirms, the parameter values ​​are stored in the node's internal data.

[0076] Node Connections: Users drag a curve from the output port (small dot) of one node to the input port of another node using the mouse. The plugin dynamically draws the connection during the dragging process, and a permanent connection is formed upon releasing the mouse. Each node can have multiple output ports (e.g., a conditional node has "true" and "false" output ports), and each output port can connect to multiple subsequent nodes. The plugin records the source node identifier, source output port index, and target node identifier for each connection.

[0077] Persisting as a descriptive file: After the user completes the flowchart editing and clicks save, the plugin iterates through all node graphical units and all connections on the canvas, generating a JSON-formatted descriptive file. This JSON file must contain at least the following information:

[0078] The `nodes` array contains a node, where each element corresponds to a node and includes the node's unique identifier, node type name, a boolean flag indicating whether it is a custom composite node (default is false), and the node's initialization configuration data (stored in key-value pairs).

[0079] The output port list outputs contains a record of the connection information for one output port of a node, including the source node identifier, the output port index, and a list of target node identifiers (supporting one output port to connect to multiple subsequent nodes).

[0080] The JSON file is saved to a specified folder in the project directory, typically with the extension .flow or .json. The filename can be specified by the user.

[0081] At this point, the user's application logic has been completely transformed into a descriptive file that is independent of the code.

[0082] Step 2: During runtime, load the descriptive file and parse the type name and configuration data of each functional node in the JSON descriptive file;

[0083] Specifically, during application runtime, the `Flow::create` function is called to receive the flowchart name passed in from outside. The `Flow::create` function locates and reads the full path of the JSON file based on the flowchart name, reads the file content, and parses the JSON structure. The parsing process obtains the node array from the root object, then iterates through the array, extracting the "name" field as the node type name and the "data" field as configuration data for each node element. Simultaneously, an empty mapping table `QHash` is created, mapping node identifiers to node object pointers.<int, INode*> `nodes` (used for later lookup of node object pointers by node ID), and an empty QSet of connected node IDs. <int>`linkedIDs` (used to record the IDs of nodes pointed to by other nodes). These two data structures form the basis for subsequent steps.

[0084] Step 3: Based on the type name of the functional node, dynamically load the corresponding functional node dynamic link library, and instantiate a functional node object that implements the unified node interface by calling the factory function exported from the functional node dynamic link library and passing the configuration data as a parameter into the factory function.

[0085] Specifically, for each functional node in the descriptive file, it is determined whether it is a custom composite node. If not, the file path of the dynamic link library is obtained based on the type name of the functional node, and the dynamic link library is loaded using Qt's QLibrary class. A factory function is parsed from the dynamic link library. The factory function is called, and the configuration data of the corresponding functional node is passed to the factory function as a parameter. The factory function creates a functional node object that implements the INode interface on the heap based on the configuration data, returns a pointer to the functional node object, and stores the pointer to the functional node object along with the unique identifier of the functional node in the mapping table of node identifiers to node object pointers.

[0086] If so, steps 2 and 3 are executed recursively to load the subprocess, and the subprocess is encapsulated as a CustomNode object. The pointer of the CustomNode object, along with the unique identifier of the functional node, is stored in the mapping table from node identifier to node object pointer.

[0087] Furthermore, this implementation utilizes the Flow::create function to iterate through the node array and call the Flow::createNode function for each node.

[0088] For base nodes (custom is marked as false): The path to the dynamic link library is appended based on the node type name, for example, `. / nodes / voltage_acq.dll`. The DLL is loaded using Qt's `QLibrary` class, and a pointer to the exported factory function in the DLL is obtained using `resolve("create")`. This factory function is called, passing the configuration data parsed from the JSON as an argument. The factory function creates a concrete node object (such as `VoltageAcqNode`) that implements the `INode` interface on the heap and returns its pointer. Afterwards, the node's unique identifier (id) and the returned node object pointer are stored in the `nodes` mapping table.

[0089] For custom composite nodes (custom is marked as true): The Flow::create function is recursively called to load the JSON file of the sub-process corresponding to the node, obtain the list of starting nodes of the sub-process, then a CustomNode object is created, the list of starting nodes of the sub-process is encapsulated in the object, and the pointer of the CustomNode object is stored in the nodes mapping table. The recursion depth is determined by the nesting level of the sub-process, and the termination condition is encountering the base node.

[0090] Once instantiated, the nodes mapping table contains object pointers to all nodes in the flowchart.

[0091] The custom composite node in this implementation is shown in the `CustomNode` class. It is itself an `INode`, but it internally encapsulates a sub-flowchart (`_startNodes`). When the `execute` method of `CustomNode` is called, it executes all nodes of its internal sub-flowchart sequentially. This allows developers to encapsulate complex, reusable logic into a single high-level node, achieving layered logic and reusability.

[0092] Step 4: Based on the connection relationships between functional nodes recorded in the descriptive file, establish directed graph connections between each functional node object to form an executable flowchart structure. Specifically, iterate through all functional nodes described in the descriptive file again. For each functional node, read the output port connection information stored in the descriptive file. The output port connection information records the identifiers of which target functional nodes each output port of the functional node is connected to. Based on these target functional node identifiers, search for the corresponding target node object pointer in the mapping table from node identifier to node object pointer. For each output port, add the found target functional node object pointer to the target functional node list corresponding to the current functional node's output port in sequence, thereby establishing a directed graph connection relationship between all functional node objects that is completely consistent with the original flowchart design.

[0093] Furthermore, in this implementation, after instantiating all nodes, the `Flow::create` function iterates through the node array in the JSON file again. For each functional node, it reads the `outputs` information stored in the JSON, which records the identifiers of which target nodes each output port of the node is connected to. For example, a conditional node has two output ports: port 0 (true branch) connects to node 3, and port 1 (false branch) connects to node 4. Based on these target node identifiers, the system looks up the corresponding target node object pointer in the previously constructed `nodes` mapping table using `nodes.value(targetId)`. Then, for each output port of the current node, the found target node pointer is added sequentially to the target node list corresponding to that port (e.g., `node->outputs[portIndex].append(targetNodePtr)`). Finally, a directed graph connection relationship is established between all node objects, completely consistent with the original flowchart design, and the `outputs` member of each node reflects the pointer information of downstream nodes.

[0094] Step 5: Starting from the initial functional node of the flowchart structure, sequentially call the execution method of each functional node object to complete the execution of the application logic. Specifically, first, identify the initial functional node from all instantiated functional node objects. The initial functional node is the functional node that is not pointed to by the output port of any other functional node. For each identified initial functional node, create an independent execution work unit and allocate an independent thread to that execution work unit.

[0095] Within each work unit, a context variable container is maintained to pass and share data during process execution.

[0096] Starting from the initial functional node, perform the following operations in a loop: call the execution method of the current functional node, which internally completes the functional node's own business functions and can modify the data in the context variable container. Then, based on the functional node's internal logic and output port connection relationship, return the next functional node that should be executed. Use the returned functional node as the new current functional node and repeat the above operations until a functional node returns an empty value, indicating that the branch process has ended.

[0097] Furthermore, the execution engine first identifies the starting functional nodes. Starting nodes are those functional nodes not pointed to by the output ports of any other functional nodes. The system obtains a list of starting functional node IDs by comparing the difference between all functional node IDs in the nodes mapping table and the linkedIDs set (which records all IDs appearing as target nodes). For each starting functional node in the list, a FlowWorker object is created, and a new QThread thread is created. The FlowWorker is moved to this thread using moveToThread. Each FlowWorker object maintains a QVariantHash type context variable container vars, used to pass data during process execution. After the thread starts, the FlowWorker's doWork slot function is called. Starting from the starting functional node, it loops through the execute(vars) method of the current functional node, continuing to call it based on the return value (the pointer to the next node to be executed) until nullptr is returned. The specific business logic of the execute method (such as reading voltage, judging conditions, and setting control properties) is completed by the implementation class of each functional node. All branches of the thread execute in parallel without blocking each other, and the main UI thread remains responsive at all times. Once all branches have been executed, the entire process will end.

[0098] Step 6: Binding UI controls to the flowchart:

[0099] Provide a template base class that inherits from the basic Qt controls. This template base class defines an interface for setting properties to receive the flowchart name, including a binding interface triggered when the control is created and a binding interface triggered when the control is clicked.

[0100] In the interface designer, custom controls are derived from the template base class and an associated flowchart name is assigned to them, which is saved as a property of the control.

[0101] When the custom control is created or clicked, the control automatically calls the runtime process execution entry point and passes the flowchart name and the current control's own pointer as parameters to the entry point.

[0102] The process execution entry point stores the received control pointer into a preset key name in the context variable container, and then executes the flowchart corresponding to the flowchart name, that is, executes steps 2 to 5 in sequence;

[0103] During the execution of the functional nodes in the flowchart, the node obtains the control pointer by reading the preset key name in the context variable container, and calls the public method of the control, thereby dynamically changing the display state or behavior of the control, realizing the flowchart logic driving the UI control. Specifically:

[0104] All custom UI controls (such as PushButton) are implemented through the template base class WidgetBase. <t>Inherited.

[0105] The template base class WidgetBase provides the binding interface setCreated(QString flow) triggered when the control is created. For button controls, its derived classes also provide the binding interface setClicked(QString flow) triggered when the control is clicked. Developers only need to specify an associated flowchart name (flowName) for the control in Qt Designer, and the underlying code will call the flowchart creation function Flow::create(flowName) to preload the flowchart.

[0106] When a specific event of a control occurs (including when the control is created or a button is clicked), the system calls the flow running function Flow::run(startNodes, this) and passes the pointer (this) of the current control object as a context variable ("$widget") to the flow graph.

[0107] In this way, nodes in the flowchart can obtain the UI control object that triggered them through the ["$widget"] key in the context variable container vars, and perform arbitrary operations on it (for example, after the "Indicator" node obtains the Light control object, it can call its color setting function setColor(Qt::red) to change the color).

[0108] This step achieves a deep and seamless integration of UI and logic. Example: Application of an over-limit alarm indicator based on voltage acquisition.

[0109] This embodiment describes in detail how to use the flowchart-based visual low-code software development method provided in this application to build a simple voltage monitoring and alarm application without writing any C++ code.

[0110] 1. Preparation Phase

[0111] Developers first need to prepare the required functional node dynamic link libraries (DLLs). In this embodiment, it is assumed that the following three basic functional nodes already exist:

[0112] Voltage Acquisition Node: This node is responsible for reading analog voltage values ​​from the data acquisition card and storing the read voltage values ​​in the process context variable container with the key "voltage". For example, executing vars["voltage"] = 3.3.

[0113] Conditional judgment node: This node makes a judgment based on the conditional expression configured by the developer (e.g., ${voltage} > 3.0), and selectively activates its corresponding output port (usually "true" output port and "false" output port) according to the judgment result (true or false).

[0114] The "Set Control Properties" node receives a control object and a property value, and modifies the corresponding property of the control. In this embodiment, it is used to set the color of the indicator light control.

[0115] 2. Design the flowchart (corresponding to step 1)

[0116] Developers should create a new project in Qt Creator and open the flowchart editor provided in this application, then follow these sub-steps to design the application logic flowchart:

[0117] Step 2.1: Drag and drop nodes

[0118] From the function node library on the left, drag the "Voltage Acquisition" node, the "Conditional Judgment" node, and two "Set Control Properties" nodes (one for setting to red and the other for setting to green) onto the canvas. Each node will be displayed on the canvas as a graphic block with input / output ports.

[0119] Figure 1 The left side clearly displays the draggable node library (such as "Flow Control", "Indicator Lights", "Voltage Acquisition", etc.). The middle section is the flowchart editing canvas, showing an example logic flowchart connected by nodes such as "Detect Voltage", "Conditional Judgment", "Delay", and "Indicator Lights". The right and bottom sides are the attribute configuration area and the output / debugging information area.

[0120] Step 2.2: Connect the nodes

[0121] According to the business logic, use the mouse to drag and drop the wires:

[0122] Connect the output port of the "Voltage Acquisition" node to the input port of the "Condition Judgment" node.

[0123] Connect the "True" output port of the "Conditional Judgment" node to the input port of the first "Set Control Properties" node (used to set it to red).

[0124] Connect the "False" output port of the "Conditional Judgment" node to the input port of the second "Set Control Properties" node (to set it to green).

[0125] Step 2.3: Configure node parameters

[0126] Double-click the "Conditional Judgment" node, and enter the conditional expression in the pop-up property configuration dialog box: ${voltage}> 3.0.

[0127] Double-click the first "Set Control Properties" node (red), configure the target control as ${$widget} (this symbol represents the UI control object that triggers this process), with the property name "color" and the property value "red".

[0128] Double-click the second "Set Control Properties" node (green), configure the target control to be ${$widget}, with the property name "color" and the property value "green".

[0129] Figure 2 The document demonstrates how to configure initialization, assignment, and modification operations for variable nodes in a flowchart using a tabular approach. This embodies the core concept of this application: "configuration instead of programming."

[0130] Step 2.4: Save the flowchart

[0131] Save the above configuration as a flowchart file named voltage_alarm_flow. This flowchart will be persisted by the plugin as a JSON descriptive file, which records the unique identifier of each node, the node type name, a flag indicating whether it is a custom composite node (in this embodiment, each node is a basic node and is marked as false), the node's initialization configuration data (such as conditional expression strings and control property setting parameters), and a list of target node identifiers connected to the output port of each node.

[0132] 3. Design the user interface and bind the flowchart.

[0133] Developers perform the following operations in Qt Designer:

[0134] Drag an indicator light control (Light) from the custom control library onto the main window and name its object myLight.

[0135] Select the myLight control, find the "createdFlow" property in its property panel (the binding interface triggered when the control is created by the control template base class), and set the value of this property to the flowchart name voltage_alarm_flow saved in step 2.5.

[0136] Through the above binding, when the myLight control is created, the voltage_alarm_flow flowchart will be automatically triggered, and its own pointer will be passed to the flowchart as a context variable (with the key name $widget).

[0137] 4. Runtime loading and execution (corresponding to steps 2 to 5)

[0138] Compile and run the application. After the main window starts, the myLight indicator light control is created, its "Creation Complete" event is triggered, automatically calling the main runtime library's process execution entry point to begin executing the following process:

[0139] The main runtime library locates and reads the corresponding JSON descriptive file based on the flowchart name voltage_alarm_flow, and parses out the type name and configuration data of each node. It also initializes an empty mapping table of node identifiers to node object pointers and an empty set of connected node IDs.

[0140] Iterate through each node in the JSON, dynamically load the corresponding dynamic link library (such as voltage_acq.dll, if_condition.dll, set_property.dll) based on the node type name, call the factory function exported in each DLL, and pass the parsed configuration data as parameters to instantiate voltage acquisition node objects, condition judgment node objects, and two setting control property node objects respectively. Store the pointer of each node object along with its identifier in the mapping table.

[0141] The node information in the JSON is traversed again. Based on the stored output port connection relationships, the target node pointer is retrieved from the mapping table and added to the target node list of the corresponding output port of the source node. For example, the output port of the voltage acquisition node points to the condition judgment node; the "true" output port of the condition judgment node points to the red setting attribute node, and the "false" output port points to the green setting attribute node. At the same time, all the pointed-to node IDs (condition judgment node and two setting attribute nodes) are recorded in the set of connected node IDs.

[0142] Subtracting the set of connected node IDs from the set of all node IDs yields the starting node, which is the voltage acquisition node. An execution unit is created for the main runtime library, allocated a separate thread, and a context variable container `vars` is maintained. Since this execution is triggered by the `myLight` control, the `Flow::run` entry point has already stored the control pointer in `vars["$widget"]`.

[0143] The execution unit starts from the voltage acquisition node and calls the execution method of each node in a loop:

[0144] Call the execution method of the voltage acquisition node: This method reads the current voltage value (assuming it is 2.5V) from the data acquisition card, sets vars["voltage"] = 2.5, and then returns a pointer to the condition judgment node based on its output port.

[0145] Call the execution method of the condition judgment node: This method reads the voltage value (2.5V) from vars, determines that 2.5 > 3.0 is false, and therefore returns the pointer to the target node connected to its "false" output port - the green setting attribute node.

[0146] The execution method of the green setting attribute node is called: This method obtains the pointer of the indicator light control through vars["$widget"], calls the control's public method setColor, and sets the color to green. After execution, this node has no subsequent nodes and returns a null pointer.

[0147] The execution unit detected a null pointer return and terminated the branch process. The indicator light on the user interface turned green, indicating that the voltage was normal.

[0148] If the voltage value changes to 3.5V, the execution method of the condition judgment node will be true, returning to the red setting attribute node. After execution, the indicator light will turn red as an alarm. If periodic monitoring is required, a timer node can be added to the flowchart, and its output can be connected to the input of the voltage acquisition node to automatically repeat the above monitoring logic at regular intervals.

[0149] The cyclic execution of the above process can be driven by an additional "timer node". By connecting the output of this node to the input of the voltage acquisition node and configuring the timer node interval to 1000ms, polling detection can be achieved once per second.

[0150] The entire process of voltage acquisition, judgment, and control setting can also be encapsulated into a CustomNode (custom composite node) named "Voltage Monitor". Afterwards, in any other process, this "Voltage Monitor" node can be dragged and used directly, just like a regular node, simply by specifying a target Light control, greatly improving the reusability of the logic.

[0151] Through the above embodiments, developers can quickly build a complete application with voltage acquisition, conditional judgment, and dynamic UI control response capabilities without writing any C++ code, simply by dragging and dropping nodes, connecting lines, and configuring properties. The application logic is completely visual, easy to understand and maintain, and supports flexible expansion of hardware acquisition functions through a dynamic link library mechanism.

[0152] While this application has been described herein with reference to specific embodiments, it should be understood that these embodiments are merely examples of the principles and applications of this application. Therefore, it should be understood that many modifications can be made to the exemplary embodiments, and other arrangements can be designed without departing from the spirit and scope of this application as defined by the appended claims. It should be understood that different dependent claims and features described herein can be combined in ways different from those described in the original claims. It is also understood that features described in conjunction with individual embodiments can be used in other described embodiments.< / t> < / int> < / qpushbutton> < / qwidget> < / t>

Claims

1. A flowchart-based visual low-code software development method, characterized in that, include: S1. In the Qt Creator integrated development environment, a graphical flowchart editor is provided to receive application logic flowcharts constructed by users through dragging, configuring and connecting predefined functional nodes, and to persist the application logic flowcharts as descriptive files; S2. At runtime, load the descriptive file and parse the type name and configuration data of each functional node in the JSON descriptive file; S3. Based on the type name of the functional node, dynamically load the corresponding functional node dynamic link library, and instantiate a functional node object that implements the unified node interface by calling the factory function exported in the functional node dynamic link library and passing the configuration data as a parameter into the factory function. S4. Based on the connection relationships between functional nodes recorded in the descriptive file, establish directed graph connections between each functional node object to form an executable flowchart structure; S5. Starting from the initial functional node of the flowchart structure, the execution methods of each functional node object are called sequentially to complete the operation of the application logic.

2. The flowchart-based visual low-code software development method according to claim 1, characterized in that, In the Qt Creator integrated development environment, the graphical flowchart editor allows users to drag and drop predefined functional nodes from the functional node library on the left to the canvas. Receive user operations to connect the output port of one function node to the input port of another function node on the canvas; The system receives user input parameters through the property configuration interface after double-clicking a function node, and persists the unique identifier of all function nodes on the canvas, the function node type name, the flag indicating whether it is a custom composite node, the initial configuration data of the function node, and the list of target function node identifiers connected to the output port of each function node as a JSON descriptive file.

3. The flowchart-based visual low-code software development method according to claim 1, wherein S2 include: At runtime, the corresponding descriptive file is located and read based on the passed flowchart name, the root object of the descriptive file is parsed, and the array of nodes contained therein is obtained; Iterate through each functional node in the node array and extract the type name and configuration data of each functional node; It also initializes an empty mapping table of node identifiers to node object pointers and an empty set of connected node IDs.

4. The flowchart-based visual low-code software development method of claim 1, wherein S3 include: For each functional node in the descriptive file, determine whether it is a custom composite node. If not, obtain the file path of the dynamic link library based on the type name of the functional node, load the dynamic link library using Qt's QLibrary class, parse the factory function from the dynamic link library, call the factory function, and pass the configuration data of the corresponding functional node as a parameter to the factory function. The factory function creates a functional node object that implements the INode interface on the heap based on the configuration data, returns a pointer to the functional node object, and stores the pointer to the functional node object along with the unique identifier of the functional node in the mapping table of node identifiers to node object pointers. If so, recursively execute steps S2 and S3 to load the subprocess, encapsulate the subprocess into a CustomNode object, and store the pointer of the CustomNode object along with the unique identifier of the functional node into the mapping table of node identifiers to node object pointers.

5. The flowchart-based visual low-code software development method according to claim 4, characterized in that, The custom composite node encapsulates a sub-flowchart, which is composed of one or more basic functional nodes connected according to business logic. When the execution method of the custom composite node is called, all functional nodes in its encapsulated sub-flowchart are executed sequentially until the sub-flowchart is completed.

6. The flowchart-based visual low-code software development method according to claim 1, characterized in that, In S4, the specific process of establishing connections between various functional node objects includes: The process iterates through all functional nodes described in the descriptive file again. For each functional node, it reads the output port connection information stored in the descriptive file. This information records the identifiers of which target functional nodes each output port of the functional node is connected to. Based on these target functional node identifiers, it searches for the corresponding target node object pointer in the mapping table from node identifiers to node object pointers. For each output port, it adds the found target functional node object pointer to the target functional node list corresponding to that output port of the current functional node, thereby establishing a directed graph connection relationship between all functional node objects that is completely consistent with the original flowchart design.

7. The flowchart-based visual low-code software development method according to claim 1, characterized in that, S5 include: First, identify the starting functional node from all instantiated functional node objects. The starting functional node is the functional node that is not pointed to by the output port of any other functional node. For each identified starting functional node, create an independent execution work unit and allocate an independent thread to the execution work unit. Within each work unit, a context variable container is maintained to pass and share data during process execution; Starting from the initial functional node, perform the following operations in a loop: call the execution method of the current functional node, which internally completes the functional node's own business functions and can modify the data in the context variable container. Then, based on the functional node's internal logic and output port connection relationship, return the next functional node that should be executed. Use the returned functional node as the new current functional node and repeat the above operations until a functional node returns an empty value, indicating that the branch process has ended.

8. The flowchart-based visual low-code software development method according to claim 1, characterized in that, The method also includes the step of binding UI controls to flowcharts: Provide a template base class that inherits from the basic Qt controls. This template base class defines an interface for setting properties to receive the flowchart name, including a binding interface triggered when the control is created and a binding interface triggered when the control is clicked. In the interface designer, custom controls are derived from the template base class and an associated flowchart name is assigned to them, which is saved as a property of the control. When the custom control is created or clicked, the control automatically calls the runtime process execution entry point and passes the flowchart name and the current control's own pointer as parameters to the entry point. The process execution entry point stores the received control pointer into a preset key name in the context variable container, and then executes the flowchart corresponding to the flowchart name, that is, executes S2 to S5 in sequence; During the execution of the functional nodes in the flowchart, the node obtains the control pointer by reading the preset key name in the context variable container, and calls the public method of the control, thereby dynamically changing the display state or behavior of the control, realizing the driving of the UI control by the flowchart logic.

9. A flowchart-based visual low-code software development system, characterized in that, include: The Qt Creator integration plugin provides a graphical flowchart editor within the Qt Creator integrated development environment. It receives application logic flowcharts built by users through dragging, configuring, and connecting predefined functional nodes, and persists the application logic flowcharts as descriptive files. The function node library contains multiple independently compiled dynamic link libraries. Each dynamic link library corresponds to a function node, and each dynamic link library exports a factory function for creating node instances and implements a unified node interface. The main runtime library is used to load the descriptive file and parse the type name and configuration data of each functional node; it is also used to dynamically load the corresponding dynamic link library from the functional node library according to the type name of the functional node, and instantiate a functional node object that implements the unified node interface by calling the factory function exported from the dynamic link library and passing the configuration data as a parameter; it is also used to establish directed graph connections between the functional node objects according to the connection relationship between the functional nodes recorded in the descriptive file, forming an executable flowchart structure; and it is also used to call the execution method of each functional node object sequentially from the starting functional node of the flowchart structure to complete the execution of the application logic. A custom control library contains one or more custom user interface controls derived from a template base class. The custom controls have an attribute that binds to the flowchart name. When a specific event of a control occurs, the custom control automatically calls the entry point of the main runtime library and passes its own pointer as a context variable to the main runtime library to trigger the execution of the flowchart corresponding to the descriptive file.

10. A flowchart-based visual low-code software development system, comprising a storage device, a processor, and a computer program stored in the storage device and executable on the processor, characterized in that, The processor executes the computer program to implement the steps of the flowchart-based visual low-code software development method as described in any one of claims 1 to 8.

Images