A method for constructing interactive data large-screen visualization system based on blueprint

Abstract

The present invention discloses a method for constructing a data large screen visualization system interaction based on a blueprint, and belongs to the field of data visualization technology. A method for constructing a data large screen visualization system interaction based on a blueprint, comprising the following steps: S1, creating a blueprint editor module based on a data large screen visualization system; S2, creating a blueprint editor import node module; S3, creating a blueprint editor logic node module; S4, creating a blueprint editor visual editor; S5, creating a blueprint editor toolbar; S6, creating a blueprint editor configuration panel module; S7, creating a blueprint editor preview module; S8, creating a blueprint editor debugging module, which can realize a more general and flexible large screen interaction control in the large screen visualization process.

Description

Technical Field

[0001] The present invention relates to the technical field of data visualization, and more specifically, to a method for constructing an interactive data large-screen visualization system based on a blueprint. Background Art

[0002] There are many data large screen visualization systems on the market. The visualization system generally aims to configure the data large screen, enrich the content of the large screen and publish it to meet the user's needs for data visualization. For the interactive needs in the data large screen visualization system, the interactive event module is generally defined for the component, and different components can be linked together through interactive events.

[0003] However, in scenarios where large-screen data visualization and interaction are required, there are the following disadvantages:

[0004] 1. Based on the implementation method of component interaction event association, the interaction within the definition range of the interaction event is easier to implement, but some other user-defined scene interaction requirements are difficult to implement and the scalability is poor;

[0005] 2. Based on the implementation method of component interaction event association, it is difficult to achieve finer-grained interaction control based on components, such as relying on the processing results of other component interaction events and timing control;

[0006] 3. Under the implementation method based on component interaction event association, due to the lack of unified event interaction presentation, it is difficult for users to have an overall grasp of the current large-screen data visualization interaction, and they can only configure interaction events based on local components.

[0007] Combining the above three aspects, the traditional way of defining interactive events of data large-screen visualization system components is slightly insufficient in actual application. Summary of the invention

[0008] 1. Technical problems to be solved

[0009] In view of the problems existing in the prior art, the purpose of the present invention is to provide a method for constructing a data large-screen visualization system interaction based on a blueprint, which can realize more universal and flexible large-screen interaction control in the large-screen visualization process.

[0010] 2. Technical solution

[0011] To solve the above problems, the present invention adopts the following technical solutions.

[0012] A method for constructing an interactive data large-screen visualization system based on a blueprint comprises the following steps:

[0013] S1. Create a blueprint editor module based on the data large screen visualization system;

[0014] S2. Create a blueprint editor import node module, and import the visualization components in the data large screen visualization system into the blueprint editor import node module as the basic elements for interaction with the data large screen visualization system;

[0015] S3. Create a blueprint editor logic node module, which includes a global module, a process control module, a data processing module and an input device;

[0016] S4. Create a blueprint editor visual editor. In the visual editor, drag the nodes in the S2 import node module and the S3 logic node module into the visual editor, and associate and configure them according to the user's component interaction requirements;

[0017] S5. Create a blueprint editor toolbar to help users better configure node interaction logic in the visual editor;

[0018] S6. Create a blueprint editor configuration panel module. The configuration panel is used to complete the logic control process in the user configuration node blueprint interaction process. The user can judge and return the processing result of the logic node through the Javascript code;

[0019] S7. Create a blueprint editor preview module, and the user will preview the configured data visualization screen interaction to view the interaction process of the data visualization screen;

[0020] S8. Create a blueprint editor debugging module. After the user completes the data visualization screen interaction, the actual effect displayed is inconsistent with the expected effect. Through the blueprint editor debugging module, the interaction process and logic control of the data visualization screen can be viewed in detail to troubleshoot problems related to the interaction configuration.

[0021] Furthermore, each imported component node in the imported node module and each logical node in the logical node module include definitions of events and actions. An event is a trigger point exposed by the component at a certain process node, and an action is an action that the component is expected to perform. Different components correspond to different events and actions.

[0022] Furthermore, the global module includes a global node; the global node represents a globally unique processing node, indicating the definition of an event that will only be triggered once and the action for the entire data visualization screen; the process control module includes branch judgment, multi-way judgment and timer; branch judgment is used to determine whether a certain input item meets the conditions; multi-way judgment is used to determine the value of the input item to execute the corresponding result; the timer is used in scenarios where the user wants to perform a certain operation at a specified point, or to trigger a certain operation at a fixed time; the data processing module includes serial data processing, parallel data processing and sequence execution; serial data processing means that the input item needs to be processed by several processing methods in sequence before the processing results are provided to subsequent processes for use; parallel data processing means that different input items correspond to different subsequent processing processes, and do not affect each other; sequence execution means that for a certain input item, it is determined in turn whether a certain processing method is satisfied. If a certain processing is satisfied, the judgment is stopped and the subsequent processing process is executed; the input device includes a keyboard; the keyboard represents the subsequent processing process corresponding to the user's operation of a specified keyboard key.

[0023] Furthermore, the specific steps for configuring the blueprint editor visual editor association in S4 are as follows:

[0024] A1: Import the components that need to interact into the import node module;

[0025] A2: Drag the components in the imported node into the visual editor;

[0026] A3: Drag the required logic nodes into the visual editor;

[0027] A4: Customize the connections between component nodes and logic nodes according to requirements;

[0028] A5: In the configuration panel, write the processing of the logic node according to the requirements and update the corresponding actions.

[0029] Furthermore, the Blueprint Editor toolbar in S5 contains the following:

[0030] B1: Adapt the canvas, adjust the zoom ratio of the visual editor, and display all current component nodes and logic nodes within the visible range of the current canvas;

[0031] B2: Enable / disable, update a component node or logic node to the enabled / disabled state;

[0032] B3: Clear the blueprint and canvas, clear all component nodes, logic nodes and connections in the current canvas, and restore all components imported into the node;

[0033] B4: Delete unavailable nodes, delete the component nodes that have been deleted or disabled in the current canvas;

[0034] B5: Search nodes, quickly query a node in the current canvas;

[0035] B6: Switch to box selection mode / switch to single selection mode, change the current editor's selection mode to batch box selection mode / single selection mode;

[0036] B7: Adjust the canvas zoom ratio. Dynamically adjust the canvas zoom ratio to make it easier for users to complete the interactive configuration process.

[0037] Furthermore, the blueprint editor configuration panel module in S6 contains the following:

[0038] C1: Display the event description of the upstream component. Select an upstream component and the corresponding event to view the event description, data definition, and data instance of the upstream component.

[0039] C2: Displays the event description of downstream components. Select a downstream component and the corresponding event to view the event description, data definition, and data instance of the downstream component.

[0040] C3: Configure the specific execution logic content of the logic node. The return value of the upstream component will be used as the input item of the downstream component. It can be configured at multiple levels.

[0041] Furthermore, the working process of the blueprint editor debugging module in S8 includes the following steps:

[0042] D1: In the blueprint editor, select the connection that needs to be debugged and choose to record the connection log;

[0043] D2: Preview the large screen in debug mode and turn on the logging switch;

[0044] D3: Click the corresponding interactive component in the data visualization screen;

[0045] D4: In the execution log of the debugging module, you will see the execution information of the event, including the occurrence time and event execution flow chart. Click a certain process to view the start node, target node, event, method, occurrence time and data return information of the current execution.

[0046] D5: By troubleshooting possible problem points in step D4 and viewing the corresponding execution information, you can quickly locate and fix the interactive configuration problems of the data visualization screen.

[0047] 3. Beneficial effects

[0048] Compared with the prior art, the advantages of the present invention are:

[0049] (i) This solution can achieve more universal and flexible control of large-screen interaction during large-screen visualization.

[0050] (II) This solution defines the interactive logic of the data visualization screen in modules and adds the concepts of events and actions. Each component can define its own events and actions. Combined with the use of logic nodes, a more standardized interactive configuration process of the data visualization screen can be completed.

[0051] (III) Based on standardized design and splitting, this solution can achieve better scalability of data visualization large screen interactive configuration. Component nodes and logic nodes are connected and configured through the custom logic flow of the configuration panel, and any data visualization large screen interactive configuration can be realized according to the user-defined interactive scenario.

[0052] (IV) This solution implements the configuration of data visualization screen interaction through the blueprint online editor. Through the visual editor, all the interaction logic of the current data visualization screen can be overviewed through one interface, and the interaction effect can be easily previewed.

[0053] (V) This solution introduces a blueprint editor debugging module to facilitate users to configure logical interaction problems that may arise when configuring complex data visualization screens. Users can easily and quickly locate the root cause of interaction configuration problems and solve interaction configuration problems through a visual debugging interface. BRIEF DESCRIPTION OF THE DRAWINGS

[0054] Figure 1 is a flow chart of the present invention;

[0055] Figure 2 An example diagram of the interactive configuration of the blueprint editor of the present invention. DETAILED DESCRIPTION

[0056] Example:

[0057] See also Figure 1-2 A method for constructing an interactive data large-screen visualization system based on a blueprint, comprising the following steps:

[0058] S1. Create a blueprint editor module based on the data large screen visualization system;

[0059] S2. Create a blueprint editor import node module, and import the visualization components (such as visualization component A and visualization component B) in the data large screen visualization system into the blueprint editor import node module as the basic elements for interaction with the data large screen visualization system;

[0060] S3. Create a blueprint editor logic node module (e.g., blueprint logic node A and blueprint logic node B), where the logic node module includes a global module, a process control module, a data processing module, and an input device;

[0061] S4. Create a blueprint editor visual editor. In the visual editor, drag the nodes in the S2 import node module and the S3 logic node module into the visual editor, and associate and configure them according to the user's component interaction requirements;

[0062] S5. Create a blueprint editor toolbar to help users better configure node interaction logic in the visual editor;

[0063] S6. Create a blueprint editor configuration panel module. The configuration panel is used to complete the logic control process in the user configuration node blueprint interaction process. The user can judge and return the processing result of the logic node through the Javascript code;

[0064] S7. Create a blueprint editor preview module, and the user will preview the configured data visualization screen interaction to view the interaction process of the data visualization screen;

[0065] S8. Create a blueprint editor debugging module. After the user completes the data visualization screen interaction, the actual effect displayed is inconsistent with the expected effect. Through the blueprint editor debugging module, the interaction process and logic control of the data visualization screen can be viewed in detail to troubleshoot problems related to the interaction configuration.

[0066] Each imported component node in the imported node module and each logical node in the logical node module can include the definition of events and actions. The event is the trigger point exposed by the component at a certain process node, and the action is the action that the component is expected to perform. Different components correspond to different events and actions.

[0067] The global module includes global nodes; the global node represents the globally unique processing node, indicating the definition of an event that will only be triggered once and the action for the entire data visualization screen; including events: "Page initialization completed" and "Data loading completed", including actions "Set callback id" and "Set page temporary variables".

[0068] The process control module includes branch judgment, multi-way judgment and timer.

[0069] Branch judgment is used to determine whether a certain input item meets the conditions; it includes events: "judgment", actions "satisfied" and "not satisfied".

[0070] Multi-way judgment is used to judge the value of input items to execute corresponding results, that is, a certain input item will produce different results according to different processing flows, and different results will be associated with different subsequent process processing; including events: "judgment", including actions "case-0" and "meet default conditions", where actions can be defined by the control panel according to actual scenarios.

[0071] The timer is used in scenarios where the user wants to perform an operation at a specified point, or trigger an operation at a fixed time. It includes events: "Start timing" and "Stop timing", and actions "When the timing point is reached".

[0072] The data processing module includes serial data processing, parallel data processing and sequence execution.

[0073] Serial data processing means that the input items need to be processed by several processing methods in sequence before the processing results are provided to the subsequent processes for use; it includes the event "processing method", which can be customized according to the usage scenario.

[0074] Parallel data processing means that different input items correspond to different subsequent processing flows, which do not affect each other; it includes event "processing methods", which can be customized according to the usage scenario.

[0075] Sequence execution means judging whether a certain processing method is satisfied for a certain input item in turn. If a certain processing method is satisfied, the judgment is stopped and the subsequent processing flow is executed. It includes the event "execution" and the action "then-0", which can be customized according to the usage scenario.

[0076] The input device includes a keyboard; the keyboard represents the subsequent processing flow corresponding to the user's operation of the specified keyboard keys, including the events "when any key is pressed", "when a character key is pressed", "when a key is released", "up", and "down". The input device has no action definition, and when the event is executed, the subsequent processing flow is directly triggered without logical judgment.

[0077] The specific steps for configuring the blueprint editor visual editor association in S4 are as follows:

[0078] A1: Import the components that need to interact into the import node module;

[0079] A2: Drag the components in the imported node into the visual editor;

[0080] A3: Drag the required logic nodes into the visual editor;

[0081] A4: Customize the connections between component nodes and logic nodes according to requirements;

[0082] A5: In the configuration panel, write the processing of the logic node according to the requirements and update the corresponding actions.

[0083] The Blueprint Editor toolbar in S5 contains the following:

[0084] B1: Adapt the canvas, adjust the zoom ratio of the visual editor, and display all current component nodes and logic nodes within the visible range of the current canvas;

[0085] B2: Enable / disable, update a component node or logic node to the enabled / disabled state;

[0086] B3: Clear the blueprint and canvas, clear all component nodes, logic nodes and connections in the current canvas, and restore all components imported into the node;

[0087] B4: Delete unavailable nodes, delete the component nodes that have been deleted or disabled in the current canvas;

[0088] B5: Search nodes, quickly query a node in the current canvas;

[0089] B6: Switch to box selection mode / switch to single selection mode, change the current editor's selection mode to batch box selection mode / single selection mode;

[0090] B7: Adjust the canvas zoom ratio. Dynamically adjust the canvas zoom ratio to make it easier for users to complete the interactive configuration process.

[0091] The Blueprint Editor Configuration Panel module in S6 contains the following:

[0092] C1: Display the event description of the upstream component. Select an upstream component and the corresponding event to view the event description, data definition, and data instance of the upstream component.

[0093] C2: Displays the event description of downstream components. Select a downstream component and the corresponding event to view the event description, data definition, and data instance of the downstream component.

[0094] C3: Configure the specific execution logic content of the logic node. The return value of the upstream component will be used as the input item of the downstream component. It can be configured at multiple levels.

[0095] The working process of the Blueprint Editor Debug Module in S8 includes the following steps:

[0096] D1: In the blueprint editor, select the connection that needs to be debugged and choose to record the connection log;

[0097] D2: Preview the large screen in debug mode and turn on the logging switch;

[0098] D3: Click the corresponding interactive component in the data visualization screen;

[0099] D4: In the execution log of the debugging module, you will see the execution information of the event, including the occurrence time and event execution flow chart. Click a certain process to view the start node, target node, event, method, occurrence time and data return information of the current execution.

[0100] D5: By troubleshooting possible problem points in step D4 and viewing the corresponding execution information, you can quickly locate and fix the interactive configuration problems of the data visualization screen.

[0101] The code for serial data processing is as follows:

[0102]

[0103]

[0104]

[0105] .

Claims

1. A method for constructing an interactive data large-screen visualization system based on a blueprint, characterized in that: The following steps are involved: S1. Create a blueprint editor module based on the data large screen visualization system; S2. Create a blueprint editor import node module, and import the visualization components in the data large screen visualization system into the blueprint editor import node module as the basic elements for interaction with the data large screen visualization system; S3. Create a blueprint editor logic node module, which includes a global module, a process control module, a data processing module and an input device; S4. Create a blueprint editor visual editor. In the visual editor, drag the nodes in the S2 import node module and the S3 logic node module into the visual editor, and associate and configure them according to the user's component interaction requirements; S5. Create a blueprint editor toolbar to help users better configure node interaction logic in the visual editor; S6. Create a blueprint editor configuration panel module. The configuration panel is used to complete the logic control process in the user configuration node blueprint interaction process. The user can judge and return the processing result of the logic node through the Javascript code; S7. Create a blueprint editor preview module, and the user will preview the configured data visualization screen interaction to view the interaction process of the data visualization screen; S8. Create a blueprint editor debugging module. After the user completes the data visualization screen interaction, the actual effect displayed is inconsistent with the expected effect. Through the blueprint editor debugging module, the interaction process and logic control of the data visualization screen can be viewed in detail to troubleshoot problems related to the interaction configuration. The global module includes global nodes; global nodes represent globally unique processing nodes, indicating the definition of events that will only be triggered once and the actions for the entire data visualization screen; The process control module includes branch judgment, multi-way judgment and timer; Branch judgment is used to determine whether a certain input item meets the conditions; Multi-way judgment is used to judge the value of input items to execute corresponding results; Timers are used when users want to perform an operation at a specified point or trigger an operation at a specified time. The data processing module includes serial data processing, parallel data processing and sequence execution; Serial data processing means that the input items need to be processed by several processing methods in sequence before the processing results are provided to the subsequent processes; Parallel data processing means that different input items correspond to different subsequent processing flows, which do not affect each other; Sequential execution means that for a certain input item, it is judged in turn whether it meets a certain processing method. If it meets a certain processing method, the judgment is stopped and the subsequent processing flow is executed; The input device includes a keyboard; the keyboard represents the subsequent processing flow corresponding to the user operating the specified keyboard keys.

2. The method for constructing a data large-screen visualization system interaction based on a blueprint according to claim 1, characterized in that: Each imported component node in the imported node module and each logical node in the logical node module include the definition of events and actions. The event is the trigger point exposed by the component at a certain process node, and the action is the action that the component is expected to perform. Different components correspond to different events and actions.

3. The method for constructing a data large-screen visualization system interaction based on a blueprint according to claim 1, characterized in that: The specific steps for configuring the blueprint editor visual editor association in S4 are as follows: A1: Import the components that need to interact into the import node module; A2: Drag the components in the imported node into the visual editor; A3: Drag the required logic nodes into the visual editor; A4: Customize the connections between component nodes and logic nodes according to requirements; A5: In the configuration panel, write the processing of the logic node according to the requirements and update the corresponding actions.

4. The method for constructing a data large-screen visualization system interaction based on a blueprint according to claim 1, characterized in that: The Blueprint Editor toolbar in S5 contains the following: B1: Adapt the canvas, adjust the zoom ratio of the visual editor, and display all current component nodes and logic nodes within the visible range of the current canvas; B2: Enable / disable, update a component node or logic node to the enabled / disabled state; B3: Clear the blueprint and canvas, clear all component nodes, logic nodes and connections in the current canvas, and restore all components imported into the node; B4: Delete unavailable nodes, delete the component nodes that have been deleted or disabled in the current canvas; B5: Search nodes, quickly query a node in the current canvas; B6: Switch to box selection mode / switch to single selection mode, change the current editor's selection mode to batch box selection mode / single selection mode; B7: Adjust the canvas zoom ratio. Dynamically adjust the canvas zoom ratio to make it easier for users to complete the interactive configuration process.

5. The method for constructing a data large-screen visualization system interaction based on a blueprint according to claim 1, characterized in that: The Blueprint Editor Configuration Panel module in S6 contains the following: C1: Display the event description of the upstream component. Select an upstream component and the corresponding event to view the event description, data definition, and data instance of the upstream component. C2: Displays the event description of downstream components. Select a downstream component and the corresponding event to view the event description, data definition, and data instance of the downstream component. C3: Configure the specific execution logic content of the logic node. The return value of the upstream component will be used as the input item of the downstream component. It can be configured at multiple levels.

6. The method for constructing a data large-screen visualization system interaction based on a blueprint according to claim 1, characterized in that: The working process of the Blueprint Editor Debug Module in S8 includes the following steps: D1: In the blueprint editor, select the connection that needs to be debugged and choose to record the connection log; D2: Preview the large screen in debug mode and turn on the logging switch; D3: Click the corresponding interactive component in the data visualization screen; D4: In the execution log of the debugging module, you will see the execution information of the event, including the occurrence time and event execution flow chart. Click a certain process to view the start node, target node, event, method, occurrence time and data return information of the current execution; D5: By troubleshooting possible problem points in step D4 and viewing the corresponding execution information, you can quickly locate and fix the interactive configuration problems of the data visualization screen.

Images