Rendering method, apparatus, storage medium and program product

Abstract

The present disclosure relates to a rendering method, device, storage medium and program product, and relates to the technical field of computers. The rendering method comprises: creating a plurality of sub-canvas in a visualization interface, each of the plurality of sub-canvas comprising at least one component; in response to a first interaction operation on a first sub-canvas in the plurality of sub-canvas, rendering the visualization interface to enable the components in the first sub-canvas to have a first function and the components in a second sub-canvas to have a second function, the second sub-canvas being other than the first sub-canvas in the plurality of sub-canvas, the first function being different from the second function. The technical solution of the present disclosure can improve the flexibility of rendering the visualization interface.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more particularly to a rendering method, apparatus, storage medium, and program product. Background Technology

[0002] With the rapid development of smart buildings and building automation systems, front-end visual editors have become core tools for constructing complex equipment control scenarios. In building control scenarios, maintenance personnel need to perform detailed logic arrangement and status monitoring of hundreds or even thousands of devices, such as air conditioning units, fresh air systems, lighting circuits, and sensors. To achieve this goal, mainstream editors adopt a "drag-and-drop" interaction mode. For example, users can drag and drop various functional modules such as switch controls, trend charts, and alarm pop-ups from the component library onto the canvas for arrangement and combination.

[0003] In related technologies, each component in the visual interface has the same and complete dynamic interaction capabilities. Summary of the Invention

[0004] One technical problem this disclosure aims to solve is to provide a rendering method, apparatus, storage medium, and program product that can improve the flexibility of visual interface rendering.

[0005] According to one aspect of this disclosure, a rendering method is proposed, comprising: creating multiple sub-canvases in a visualization interface, each sub-canvas including at least one component; and rendering the visualization interface in response to a first interactive operation on a first sub-canvas among the multiple sub-canvases, such that the component in the first sub-canvas has a first function, and the component in a second sub-canvas has a second function, wherein the second sub-canvas is any of the other sub-canvases besides the first sub-canvas, and the first function and the second function are different.

[0006] In some embodiments, the first function is an interactive function, and the second function is a de-interactive function.

[0007] In some embodiments, rendering a visualization interface in response to a first interaction operation on a first sub-canvas among a plurality of sub-canvases includes: adjusting the interaction state of a component in the first sub-canvas to a first state in response to the first interaction operation on the first sub-canvas, adjusting the interaction state of a component in a second sub-canvas to a second state; and rendering the visualization interface according to the first state of the component in the first sub-canvas and the second state of the component in the second sub-canvas.

[0008] In some embodiments, adjusting the interaction state of a component within a second sub-canvas to a second state includes: for a third sub-canvas where the interaction state of the component within the second sub-canvas was in a first state before adjustment, removing the event listener of the component within the third sub-canvas, the event listener being used to receive control commands; unloading the interaction function wrapping layer bound to the component within the third sub-canvas, the interaction function wrapping layer being used to implement interaction functions according to control commands; and adjusting the component within the third sub-canvas from the first state to the second state.

[0009] In some embodiments, adjusting the interaction state of a component within a first sub-canvas to a first state includes: instantiating a component within a first sub-canvas; attaching an interaction function wrapping layer to the component within the first sub-canvas, the interaction function wrapping layer being used to implement interaction functions according to control instructions; binding a business event corresponding to the component within the first sub-canvas to the interaction function wrapping layer; and adjusting the interaction state of the component within the first sub-canvas to the first state.

[0010] In some embodiments, creating multiple sub-canvases in a visualization interface includes: in response to a second interactive operation on a target component within the visualization interface, moving the target component to a corresponding target sub-canvas, wherein the target sub-canvas is one of multiple sub-canvases.

[0011] In some embodiments, moving a target component to a corresponding target sub-canvas in response to a second interactive operation on a target component within a visualization interface includes: in response to a second interactive operation on a target component, and the second interactive operation instructing the target component to be moved to a fourth sub-canvas, identifying the number of components in the fourth sub-canvas; determining a target sub-canvas based on the number of components in the fourth sub-canvas; and moving the target component to the target sub-canvas.

[0012] In some embodiments, determining the target sub-canvas based on the number of components in the fourth sub-canvas includes: determining the fourth sub-canvas as the target sub-canvas in response to the number of components in the fourth sub-canvas being less than or equal to a quantity threshold; and creating a fifth sub-canvas in response to the number of components in the fourth sub-canvas being greater than the quantity threshold, and determining the fifth sub-canvas as the target sub-canvas.

[0013] In some embodiments, information about components within the same sub-canvas is stored in the same array.

[0014] In some embodiments, the relevant information includes geometric attribute information and state information of the component, with the state information indicating the interactive state of the component.

[0015] In some embodiments, components within the same sub-canvas correspond to the same business function.

[0016] In some embodiments, the business functions include cooling control functions, fresh air control functions, lighting control functions, and sensor functions.

[0017] In some embodiments, the interactive function includes the function of receiving control instructions, which are used to adjust at least one of the component's position, shape, and corresponding business data.

[0018] According to a second aspect of this disclosure, a rendering apparatus is also proposed, comprising: a creation module configured to create a plurality of sub-canvases in a visualization interface, each of the plurality of sub-canvases including at least one component; and a rendering module configured to render the visualization interface in response to a first interactive operation on a first sub-canvas among the plurality of sub-canvases, such that the component in the first sub-canvas has a first function, and the component in a second sub-canvas has a second function, wherein the second sub-canvases are the other sub-canvases among the plurality of sub-canvases besides the first sub-canvas, and the first function and the second function are different.

[0019] According to a third aspect of this disclosure, a rendering apparatus is also provided, comprising: a processor; and a memory coupled to the processor for storing instructions that, when executed by the processor, cause the processor to perform the rendering method as described above.

[0020] According to a fourth aspect of this disclosure, a computer-readable storage medium is also provided, on which computer instructions are stored, wherein the computer instructions, when executed by a processor, implement the rendering method described above.

[0021] According to the fifth aspect of this disclosure, a computer program product is also proposed, comprising: computer instructions that, when executed by a processor, implement the rendering method described above.

[0022] In this embodiment, multiple sub-canvases are created in the visualization interface, and different functions are configured for the components within different sub-canvases based on whether the sub-canvas receives interactive operations. In this way, components for implementing different functions can be obtained with a single rendering of the visualization interface, enabling the components of the visualization interface to adaptively perform different functional operations, thereby enriching the rendering effect of the visualization interface and improving the flexibility of interface rendering. Attached Figure Description

[0023] The accompanying drawings, which form part of this specification, illustrate embodiments of this disclosure and, together with the specification, serve to explain the principles of this disclosure.

[0024] This disclosure will become clearer with reference to the accompanying drawings and the following detailed description, wherein:

[0025] Figure 1 This is a flowchart illustrating some embodiments of the rendering method disclosed herein;

[0026] Figure 2 Block diagrams of some embodiments of the rendering system of this disclosure;

[0027] Figure 3 The following are schematic flowcharts illustrating other embodiments of the rendering method disclosed herein;

[0028] Figure 4 This is a flowchart illustrating some further embodiments of the rendering method disclosed herein;

[0029] Figure 5 Block diagrams of some embodiments of the rendering apparatus of this disclosure;

[0030] Figure 6 Block diagrams showing some embodiments of the electronic devices disclosed herein. Detailed Implementation

[0031] Various exemplary embodiments of the present disclosure will now be described in detail with reference to the accompanying drawings. It should be noted that, unless otherwise specifically stated, the relative arrangement, numerical expressions, and values ​​of the components and steps set forth in these embodiments do not limit the scope of the present disclosure.

[0032] At the same time, it should be understood that, for ease of description, the dimensions of the various parts shown in the accompanying drawings are not drawn according to actual scale.

[0033] The following description of at least one exemplary embodiment is merely illustrative and is in no way intended to limit this disclosure or its application or use.

[0034] Techniques, methods, and equipment known to those skilled in the art may not be discussed in detail, but where appropriate, such techniques, methods, and equipment should be considered part of the specification.

[0035] In all examples shown and discussed herein, any specific values ​​should be interpreted as merely exemplary and not as limitations. Therefore, other examples of exemplary embodiments may have different values.

[0036] It should be noted that similar labels and letters in the following figures indicate similar items; therefore, once an item is defined in one figure, it does not need to be discussed further in subsequent figures.

[0037] To make the objectives, technical solutions, and advantages of this disclosure clearer, the following detailed description is provided in conjunction with specific embodiments and the accompanying drawings.

[0038] As mentioned earlier, each component in the visual interface possesses the same and complete dynamic interaction capabilities. That is, regardless of where the component is located in the interface, it uniformly carries interactive logic such as dragging, scaling, and clicking for editing. For example, in order to support the free movement, scaling, rotation, and real-time data binding of components, the industry typically uses mature third-party interaction libraries such as vue-draggable-resizable to wrap each operable component in the canvas with a complex virtual DOM (Document Object Model) structure (i.e., an interaction container), and attach a large number of event listeners, computed properties, and reflow and repaint logic.

[0039] However, when a user interacts with a component in a certain area, all components in other areas maintain the same full interactive responsiveness, making it impossible to configure differentiated interactive functions for different areas according to actual needs.

[0040] Furthermore, as business complexity increases, the number of devices requiring control in the visual interface may reach dozens or even hundreds. In this case, the browser needs to maintain a massive DOM tree structure and handle high-frequency reflow and repaint events simultaneously. This not only leads to a sharp increase in memory usage but also causes noticeable stuttering, frame drops, or even crashes during page scrolling and component adjustments. This creates a contradiction between "all components simultaneously possessing high-energy-consuming interactive capabilities" and "the physical limits of browser rendering performance," hindering the efficient construction of large-scale building control scenarios.

[0041] To address at least one of the aforementioned problems, this disclosure provides a rendering technology solution. This solution involves creating multiple sub-canvases within a visual interface and configuring different functions for components within different sub-canvases based on whether those sub-canvases receive interactive operations. In this way, components for implementing different functions can be obtained through a single rendering of the visual interface, enabling the components to adaptively perform different functional operations. This enriches the rendering effects of the visual interface and improves the flexibility of interface rendering.

[0042] The solution disclosed herein will now be described in conjunction with specific embodiments.

[0043] like Figure 1 As shown, Figure 1 This is a flowchart illustrating some embodiments of the rendering method disclosed herein, including steps S11-S12. This method is applicable to control scenarios in a building automation front-end visual editor.

[0044] In step S11, multiple sub-canvases are created in the visualization interface, and each sub-canvas includes at least one component.

[0045] For example, components can be elements used to characterize air conditioning equipment, fresh air equipment, heating and ventilation equipment, sensor equipment, lighting equipment, etc.

[0046] In step S12, in response to a first interactive operation on the first sub-canvas among the multiple sub-canvases, the visual interface is rendered so that the components in the first sub-canvas have a first function and the components in the second sub-canvas have a second function. The second sub-canvas is any of the other sub-canvases besides the first sub-canvas, and the first function and the second function are different.

[0047] For example, the first interactive action could be a click or selection. The first function could be an interactive function such as dragging or zooming.

[0048] In the above embodiments, multiple sub-canvases are created in the visualization interface, and different functions are configured for the components in different sub-canvases based on whether the sub-canvas receives interactive operations. In this way, components for implementing different functions can be obtained by rendering the visualization interface in a single operation, enabling the components of the visualization interface to adaptively perform different functional operations, thereby enriching the rendering effect of the visualization interface and improving the flexibility of interface rendering.

[0049] In some embodiments, the first function is an interactive function, and the second function is a non-interactive function. For example, the interactive function may be a zoom function, a drag-and-drop function, etc. The non-interactive function may be a static display function.

[0050] In the above embodiments, interactive functionality is configured for components in the first sub-canvas that receive interactive operations, and de-interactive functionality is configured for components in the second sub-canvas. This ensures that only components in the sub-canvas selected by the interactive operation have full interactive response capabilities, while components in other sub-canvases are stripped of interactive logic and displayed statically. This reduces unnecessary event listening and rendering calculations, lowers system resource consumption, and avoids browser reflow and repaint overload, thus resolving page stuttering and frame drops caused by multiple component stacking, and improving the overall rendering performance and operational smoothness of the interface.

[0051] In some embodiments, the interactive function includes the function of receiving control instructions, which are used to adjust at least one of the component's position, shape, and corresponding business data.

[0052] For example, interactive components can respond to user dragging actions, changing their position on the canvas. They can also respond to zooming actions, changing their size, and responding to clicks, displaying corresponding device parameter panels. Non-interactive components remain fixed in their current display position, used only for display and not responding to any user input. By configuring various types of interactive functions for components within the user-selected sub-canvas, the same component can support multiple operational needs such as position adjustment, shape transformation, and business data configuration, enriching component operability and improving the flexibility and efficiency of interface editing.

[0053] In some embodiments, in response to a first interaction operation on a first sub-canvas, the interaction state of a component in the first sub-canvas is adjusted to a first state, and the interaction state of a component in the second sub-canvas is adjusted to a second state; the visual interface is rendered according to the first state of the component in the first sub-canvas and the second state of the component in the second sub-canvas.

[0054] For example, the first interaction is when the user clicks on the first sub-canvas. In response to this click, the system switches all components within the first sub-canvas to the active state and switches all components within the other sub-canvases to the static state. Then, the front-end rendering engine renders according to the current interaction state of each component, so that the active components have full interactive capabilities, while the static components only retain static display functionality.

[0055] In this embodiment, on the one hand, by responding to interactive operations on the first sub-canvas, different interactive states are configured for components in different sub-canvases of the visualization interface. This allows the rendering process to obtain components with corresponding functions simply by performing the corresponding rendering processing based on the interactive state of the sub-canvas. Furthermore, by configuring a unified interactive state for all components in each sub-canvas, it is not necessary to configure the interactive state for each component individually, reducing the development or maintenance cost of the interface. It also avoids unnecessary interface redrawing or rearrangement caused by unified interface processing, thus improving the efficiency and flexibility of interface rendering. On the other hand, by setting the interactive state of all components in the first sub-canvas to an interactive first state, while setting the components in other sub-canvases to a non-interactive second state, only the components in the first sub-canvas have interactive functionality. This reduces unnecessary event listening and rendering calculations, improving the rendering performance and operational smoothness of the interface.

[0056] In some embodiments, for a third sub-canvas where the interactive state of the component within the second sub-canvas is in the first state before adjustment, the event listener of the component within the third sub-canvas is removed. The event listener is used to receive control commands. The interactive function wrapping layer bound to the component within the third sub-canvas is unloaded. The interactive function wrapping layer is used to implement interactive functions according to control commands. The component within the third sub-canvas is adjusted from the first state to the second state.

[0057] For example, the event listeners of the components within the third child canvas can be removed first. Then, the interactive functionality wrapper layer of the components within the third child canvas is unloaded. Furthermore, the state information of the components within the third child canvas is updated, the virtual DOM is notified to perform a Diff comparison, and the result is submitted to the browser's repaint queue. In this embodiment, by adjusting the components within the third child canvas from the first state to the second state, the components that originally had interactive functionality are switched to static display. This reduces the number of components that need to maintain both interactive listening and rendering calculations simultaneously, lowers system resource consumption, and improves interface rendering efficiency.

[0058] In some embodiments, a component within a first sub-canvas is instantiated; an interactive function wrapping layer is attached to the component within the first sub-canvas, the interactive function wrapping layer being used to implement interactive functions according to control instructions; a business event corresponding to the component within the first sub-canvas is bound to the interactive function wrapping layer; and the interactive state of the component within the first sub-canvas is adjusted to a first state.

[0059] For example, taking HVAC equipment as an example, business events specific to HVAC equipment can be bound to the interactive function wrapping layer, such as @click="handleChillerCapacityChange" (that is, update the unit capacity parameters when the component is clicked).

[0060] In this embodiment, by instantiating the components within the first sub-canvas and attaching an interactive function wrapping layer, the components that originally did not have interactive functions are switched to a first state with interactive functions, and corresponding business events are bound to support the specific functional operations of the components, thereby improving the interactive response of the visual interface.

[0061] In some embodiments, the adjustment operations on components within the first sub-canvas and the adjustment operations on components within the second sub-canvas described above can be managed by an asynchronous queue. Utilizing the batch update feature of the virtual DOM, the system merges all DOM deletion and insertion operations into a single batch submission. The browser completes layout calculations and rendering within the same frame; visually, the user only sees drag handles appearing on the components in the focus area, while the background area remains static and flicker-free.

[0062] The aforementioned synchronization algorithm for interactive states enables smooth transitions between different interactive states. Users do not perceive any noticeable loading delays or visual gaps when switching between different sub-canvases. This seamless switching mechanism retains the interactive functions required by users while maximizing system performance, thereby improving the construction efficiency of building automation scenarios and the operational experience for maintenance personnel.

[0063] In some embodiments, information about components within the same sub-canvas is stored in the same array.

[0064] For example, all components within sub-canvas A are stored in array A, and all components within sub-canvas B are stored in array B. Each array independently maintains the relevant information for the components within its corresponding sub-canvas. When it is necessary to traverse or render components within a specific sub-canvas, only the array corresponding to that sub-canvas needs to be accessed; there is no need to traverse other arrays.

[0065] In this embodiment, component data contained in different sub-canvases is stored and managed separately. Specifically, the array that originally stored components uniformly is split into multiple smaller arrays based on the sub-canvas to which the component belongs. When the information of a component in an array changes, that component needs to be re-rendered. This triggers a Diff comparison of the virtual DOM, which involves traversing the array to find the changed component and re-rendering it separately. With this fragmented storage, only the sub-canvas array containing the current component needs to be traversed, instead of traversing the entire dataset. This reduces the traversal range and the number of data comparisons, lowers the computational overhead during rendering, and improves front-end rendering performance.

[0066] For example, relevant information includes the component's geometric properties and state information, with the state information indicating the component's interactive state. State information can be represented by the key field `renderMode` for each component, which is an enumeration type. When `renderMode` is 'active', it indicates that the component has interactive functionality; when `renderMode` is 'static', it indicates that the component has no interactive functionality and can only be displayed statically.

[0067] For example, each sub-canvas maintains a list of components, which includes the geometric properties (such as position coordinates, width, height, etc.) and the key field renderMode for each component in the sub-canvas.

[0068] In this embodiment, by storing the geometric attribute information and state information of the components in the sub-canvas, the interactive state of the components can be directly determined based on the state information during the rendering process, and the position arrangement and size rendering of the components can be realized based on the geometric attribute information, thereby reducing the number of data queries and data acquisition overhead during the rendering process and improving the rendering efficiency of the visualization interface.

[0069] The following examples illustrate the method for creating a sub-canvas in step S11.

[0070] In some embodiments, in response to a second interactive operation on a target component within a visualization interface, the target component is moved to a corresponding target sub-canvas, where the target sub-canvas is one of a plurality of sub-canvases.

[0071] For example, the second interactive action could be a drag-and-drop operation. The user drags the target component within the visualization interface, with the selected sub-canvas as the endpoint, to move the target component into the selected sub-canvas.

[0072] In this embodiment, by responding to a second interactive operation on the target component, the target component is moved to the sub-canvas selected by the user, enabling the user to flexibly divide different components into different sub-canvases according to actual needs. This achieves layout adjustment of components between different canvases and improves the flexibility and operability of the visual interface arrangement.

[0073] In some embodiments, components within the same sub-canvas correspond to the same business function.

[0074] For example, components that can achieve the same or similar business functions can be grouped into the same sub-canvas based on the business functions corresponding to each component in the actual business scenario.

[0075] In this embodiment, by configuring components within the same sub-canvas to correspond to the same business function, the components within the same canvas are interconnected in terms of business function. This allows the user's operations on the sub-canvas to simultaneously affect multiple components corresponding to the same business function, improving operational efficiency and reducing operational complexity.

[0076] In some embodiments, the business functions include cooling control functions, fresh air control functions, lighting control functions, and sensor functions.

[0077] For example, components including air conditioning units, fresh air systems, lighting circuits, and sensors can be divided into different sub-canvases to facilitate unified management of components with the same business functions.

[0078] In this embodiment, users can divide components used for various services such as cooling control, fresh air control, lighting control, or sensor monitoring into the same sub-canvas, so that the components within the same sub-canvas are related to each other in terms of business functions, making it easier for users to manage and find components in a unified manner and improving the convenience of interface management.

[0079] In some embodiments, in response to a second interaction operation on a target component, and the second interaction operation instructs the target component to be moved to a fourth sub-canvas, the number of components in the fourth sub-canvas is identified; a target sub-canvas is determined based on the number of components in the fourth sub-canvas; and the target component is moved to the target sub-canvas.

[0080] For example, if a target component needs to be added or removed, the system checks the component list of the current canvas indicated by the second interaction operation to determine if the number of components exceeds a threshold (e.g., 1000). Based on whether the number of components exceeds the threshold, the system determines the target sub-canvas to which the target component should ultimately be moved.

[0081] In this way, by identifying the number of components in the fourth sub-canvas, the target sub-canvas can be dynamically determined based on the current number of components in the sub-canvas, so that the number of components in each sub-canvas is kept within a reasonable range, avoiding the reduction in rendering performance due to an excessive number of components in a single sub-canvas, and improving the smoothness of interface rendering.

[0082] For example, if the number of components in the fourth sub-canvas is less than or equal to a quantity threshold, the fourth sub-canvas is identified as the target sub-canvas; if the number of components in the fourth sub-canvas is greater than the quantity threshold, a fifth sub-canvas is created and identified as the target sub-canvas.

[0083] For example, if the number of components exceeds a certain threshold, the automatic splitting logic is triggered, a new sub-canvas is created, and the target component is moved to the newly created sub-canvas.

[0084] In this embodiment, the overloaded canvas can be automatically split when the number of components exceeds the threshold, so that the component size of each sub-canvas is always kept within a reasonable range. Users do not need to manually create sub-canvases or migrate components, which reduces the complexity of user operations and improves the efficiency of component orchestration.

[0085] In the above embodiments, the logic of a single large canvas is broken down into multiple independent sub-canvases. This not only avoids the risk of overloading a single rendering domain from the root, but also supports the orderly arrangement of hundreds or thousands of devices, enabling the editor to maintain high performance and stability when handling complex building control scenarios, thus improving the scalability of the system.

[0086] The rendering system implementing the above rendering scheme is illustrated below through some examples. The core of the rendering system in this embodiment lies in constructing a dual-state architecture that separates the logical canvas from the physical rendering. It solves the rendering stuttering problem caused by large-scale component stacking by driving DOM node replacement and dynamically binding and unbinding event listeners through data state.

[0087] Figure 2 Block diagrams of some embodiments of the rendering system disclosed herein.

[0088] like Figure 2 As shown, the rendering system includes a data layer 21, a control layer 22, and a view layer 23. The data layer 21 includes information related to the sub-canvases of sub-canvas A, sub-canvas B, and sub-canvas C.

[0089] The control layer 22 includes a rendering manager 221, which includes a canvas switching function module 222 and an adaptive threshold monitoring module 223. The control layer 22 can read data (e.g., information related to sub-canvases) from the data layer 21.

[0090] The view layer 23 includes a browser canvas 231, which contains multiple components located in multiple sub-canvases. The components in the browser canvas 231 are rendered on demand through the rendering manager 221.

[0091] The rendering system first defines a global state management object, CanvasStore, which contains multiple logical sub-canvas objects. Each sub-canvas object maintains a list of components, and each component in the list contains geometric attribute information and the key field renderMode.

[0092] Taking a large commercial complex HVAC scenario as an example, the rendering system generates the following data structure during initialization: Sub-canvas A (e.g., the core area of ​​the chiller station) contains approximately 20 screw chillers and cooling towers, with the initial renderMode set to 'static'; Sub-canvas B (fresh air unit area) contains approximately 80 combined fresh air units, with the initial renderMode set to 'static'.

[0093] Then, the visual interface is statically rendered, and the front-end rendering engine iterates through the CanvasStore. For all components with renderMode set to 'static', a common rendering function is called to generate the base rendering. DOM nodes are bound only to static CSS (Cascading Style Sheets) style classes (e.g., .static-node), without instantiating any drag-and-drop libraries (e.g., vue-draggable-resizable) or binding mouse event listeners. In this case, regardless of the number of components, the browser only needs to handle lightweight layout calculations, ensuring extremely fast first-screen loading speeds.

[0094] The following is through Figure 3 The embodiments described herein exemplify the on-demand activation scheme performed by the canvas switching function module 222 in the rendering manager 221.

[0095] Figure 3 This is a flowchart illustrating some other embodiments of the rendering method disclosed herein.

[0096] In step S31, it is detected that the user has selected a sub-canvas. For example, if the user clicks to select sub-canvas A in the visualization interface, the onSliceSelect('slice_A') event is triggered, and the rendering manager 221 performs the following steps.

[0097] In step S32, the status of all canvases is determined. For sub-canvases that are not selected by the user, step S33 is executed. For sub-canvases that are selected by the user, step S34 is executed.

[0098] Reference Figure 2 When the user selects sub-canvas A, the state information of component 1 and component 2 in sub-canvas A is 'active' (i.e., the interaction state is the first state), and the state information of component 3 and component 4 in sub-canvas B and the state information of component 5 and component 6 in sub-canvas C are all 'static' (i.e., the interaction state is the second state).

[0099] In step S33, for components in sub-canvases not selected by the user, a de-interactivity process is executed. If there is a sub-canvas in the 'active' state (i.e., the first state) among the unselected sub-canvases (e.g., sub-canvas B), the system iterates through the component list of sub-canvas B. First, the event listeners of the components in sub-canvas B are removed, for example, by using the unmount hook provided by the framework or by directly manipulating the DOM to remove event listeners such as mousedown (mouse down), mousemove (mouse move), and mouseup (mouse up) attached to the components. Then, the interactive function wrapper layer of the components in sub-canvas B is unloaded, for example, the component calls the unmount() method to unmount complex interactive functions. <vdr-wrapper>Replace nodes with simple ones The node. Furthermore, it updates the state information of components within child canvas B, for example, updating the component's key field `renderMode` to 'static', and notifying the virtual DOM to perform a Diff comparison and submit it to the browser's repaint queue.

[0100] In step S34, a re-interactivity process is executed for the components in the sub-canvas selected by the user. For example, for the sub-canvas A selected by the user, firstly, the components within sub-canvas A are instantiated, and each component in the component list of sub-canvas A is traversed and its relevant information is obtained. Then, drag-and-drop events are attached to the components within sub-canvas A. For example, a new drag-and-drop event is inserted around each component.<VdrComponent:data="componentData" / > The component framework then instantiates the drag-and-drop logic, reads the initial coordinates (x, y) from the data model, and sets the DOM position. It also binds business events to the components within child canvas A. For example, in addition to binding basic drag-and-drop events, it binds business events specific to the device corresponding to that component. For instance, for HVAC equipment, it can bind the corresponding business event `@click="handleChillerCapacityChange"` (updates the unit capacity parameter when the component is clicked). Finally, it updates the state information of the components within child canvas A, such as updating the `renderMode` field of all components in child canvas A to 'active'.

[0101] In step S35, the components in the multiple sub-canvases executed according to steps S33 and S34 are merged to complete the rendering of the visualization page.

[0102] In step S36, the component smoothly switches between different interactive states.

[0103] The adjustment operations in steps S33 and S34 can be managed by an asynchronous queue. Leveraging the batch update feature of the virtual DOM, the system merges all DOM deletion and insertion operations into a single batch submission. The browser completes layout calculations and rendering within the same frame; visually, the user only sees drag handles appearing on components in the focus area, while the background area remains static and flicker-free. This seamless switching mechanism retains the necessary user interaction functions while maximizing system performance, thereby improving the efficiency of building automation scenario construction and the operational experience for maintenance personnel.

[0104] The following is through Figure 4 The embodiments described herein illustrate the technical solution implemented by the adaptive threshold monitoring module 223 in the rendering manager 221.

[0105] Figure 4 This is a flowchart illustrating some further embodiments of the rendering method disclosed herein.

[0106] In step S41, the user performs a second interactive operation (e.g., drag operation) on the target component within the visualization interface to move the target component to the sub-canvas selected by the second interactive operation.

[0107] In step S42, the number of components in the sub-canvas selected by the second interactive operation is read. For example, the system can have a built-in background daemon process ThresholdMonitor to monitor the number of components in each sub-canvas in real time through MutationObserver or a timer.

[0108] In step S43, it is determined whether the number of components within the sub-canvas selected by the user exceeds a quantity threshold. For example, if a target component needs to be added or deleted, the component list of the current canvas indicated by the second interaction operation is checked to determine whether the number of components exceeds the quantity threshold (e.g., 1000).

[0109] If the number of components is not greater than the quantity threshold, move the target component to the sub-canvas indicated by the second interaction operation. If the number of components is greater than the quantity threshold, proceed to step S44.

[0110] In step S44, the automatic splitting logic is triggered, a new sub-canvas is created, and the target component is moved to the newly created sub-canvas. For example, the autoSplit(slice_Id, component_id) algorithm (automatic splitting algorithm) is called to create a new sub-canvas object and migrate the target component to the new sub-canvas.

[0111] Through the above mechanism, while ensuring the integrity of the editing function, it is possible to solve the serious lag problem caused by the full loading of interactive components in the visual editor in complex scenarios involving thousands of HVAC devices, reduce the front-end memory usage, and achieve a smooth and stable editing experience in large-scale building control scenarios.

[0112] The rendering apparatus of this disclosure will now be further described in conjunction with specific embodiments.

[0113] like Figure 5 As shown, Figure 5 This is a block diagram of some embodiments of the rendering apparatus disclosed herein, which includes a creation module 51 and a rendering module 52.

[0114] The creation module 51 is configured to create multiple sub-canvases in a visual interface, each of which includes at least one component.

[0115] The rendering module 52 is configured to render a visual interface in response to a first interactive operation on the first sub-canvas among a plurality of sub-canvases, so that the components in the first sub-canvas have a first function and the components in the second sub-canvas have a second function. The second sub-canvas is any of the other sub-canvases besides the first sub-canvas, and the first function and the second function are different.

[0116] In this embodiment, by creating multiple sub-canvases in the visualization interface and configuring different functions for components in different sub-canvases based on whether the sub-canvases receive interactive operations, components for implementing different functions can be obtained from the same visualization interface with a single rendering. This enables the components of the visualization interface to adaptively perform different functional operations, enriches the rendering effect of the visualization interface, and improves the flexibility of interface rendering.

[0117] In some embodiments, the first function is an interactive function, and the second function is a de-interactive function.

[0118] In some embodiments, the rendering module 52 responds to a first interaction operation on the first sub-canvas by adjusting the interaction state of the components in the first sub-canvas to a first state and adjusting the interaction state of the components in the second sub-canvas to a second state; and renders the visualization interface according to the first state of the components in the first sub-canvas and the second state of the components in the second sub-canvas.

[0119] In some embodiments, for a third sub-canvas where the interactive state of the components within the second sub-canvas is in the first state before adjustment, the rendering module 52 removes the event listener of the components within the third sub-canvas, the event listener being used to receive control commands; unloads the interactive function wrapping layer bound to the components within the third sub-canvas, the interactive function wrapping layer being used to implement interactive functions according to control commands; and adjusts the components within the third sub-canvas from the first state to the second state.

[0120] In some embodiments, the rendering module 52 instantiates a component within the first sub-canvas; attaches an interactive function wrapping layer to the component within the first sub-canvas, the interactive function wrapping layer being used to implement interactive functions according to control instructions; binds a business event corresponding to the component within the first sub-canvas to the interactive function wrapping layer; and adjusts the interactive state of the component within the first sub-canvas to a first state.

[0121] In some embodiments, the creation module 51 responds to a second interactive operation on a target component within the visualization interface by moving the target component to a corresponding target sub-canvas, wherein the target sub-canvas is one of a plurality of sub-canvases.

[0122] In some embodiments, the creation module 51 responds to a second interaction operation for a target component, and the second interaction operation instructs the target component to be moved to a fourth sub-canvas, identifies the number of components in the fourth sub-canvas, determines the target sub-canvas based on the number of components in the fourth sub-canvas, and moves the target component to the target sub-canvas.

[0123] In some embodiments, the creation module 51 determines the fourth sub-canvas as the target sub-canvas in response to the number of components in the fourth sub-canvas being less than or equal to a quantity threshold; and creates a fifth sub-canvas in response to the number of components in the fourth sub-canvas being greater than the quantity threshold, and determines the fifth sub-canvas as the target sub-canvas.

[0124] In some embodiments, information about components within the same sub-canvas is stored in the same array.

[0125] In some embodiments, the relevant information includes geometric attribute information and state information of the component, with the state information indicating the interactive state of the component.

[0126] In some embodiments, components within the same sub-canvas correspond to the same business function.

[0127] In some embodiments, the business functions include cooling control functions, fresh air control functions, lighting control functions, and sensor functions.

[0128] In some embodiments, the interactive function includes the function of receiving control instructions, which are used to adjust at least one of the component's position, shape, and corresponding business data.

[0129] It should be noted that the above modules are logical modules divided according to their specific functions, and are not intended to limit the specific implementation method. For example, they can be implemented in software, hardware, or a combination of both. In actual implementation, the above modules can be implemented as independent physical entities, or they can be implemented by a single entity (e.g., a processor (CPU or DSP, etc.), integrated circuit, etc.). Furthermore, the modules shown in the accompanying drawings with dashed lines indicate that these modules may not actually exist, and the operations / functions they perform can be implemented by the processing circuitry itself.

[0130] In some embodiments of this disclosure, the rendering apparatus may also be presented electronically. For example... Figure 6 As shown, Figure 6 Block diagrams showing some embodiments of the electronic devices disclosed herein.

[0131] The electronic device 6 includes a memory 61 and a processor 62. The memory 61 is coupled to the processor 62 and is used to store instructions. When the instructions are executed by the processor 62, the processor 62 performs the rendering method described above.

[0132] Memory 61 is used to store one or more computer-readable instructions. Memory 61 may include any combination of various forms of computer-readable storage media, such as volatile memory and / or non-volatile memory, including but not limited to random access memory (RAM), dynamic random access memory (DRAM), static random access memory (SRAM), read-only memory (ROM), and flash memory. Memory 61 may, for example, store operating systems, applications, bootloaders, databases, and other programs, as well as various applications and various data.

[0133] The processor 62 is configured to execute computer-readable instructions to implement the rendering method of any of the foregoing embodiments. Specific implementations of each step of the method can be found in the above embodiments; repeated details will not be elaborated upon here.

[0134] Processor 62 can be configured to perform the steps described above. Processor 62 can be various processing devices, such as a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. The central processing unit (CPU) can be an x86 or ARM architecture, etc.

[0135] The processor 62 and the memory 61 can communicate with each other directly or indirectly. For example, the processor 62 and the memory 61 can communicate via a network. The network can include wireless networks, wired networks, and / or any combination of wireless and wired networks. The processor 62 and the memory 61 can also communicate with each other via a system bus, which is not limited in this disclosure.

[0136] It should be noted that Figure 6 The components of the electronic device 6 shown are merely exemplary and not limiting; the electronic device 6 may have other components as needed for the actual application. The processor 62 can control other components in the electronic device 6 to perform the desired functions.

[0137] In some embodiments, the processor 62 is coupled to the memory 61 via a BUS bus 63. The electronic device 6 can also be connected to an external storage device 65 via a storage interface 64 to access external data, and can also be connected to a network or another computer system (not shown) via a network interface 66. Further details are omitted here.

[0138] In the above embodiments, storing data instructions in the memory and then processing the instructions by the processor can enrich the rendering effect of the visual interface and improve the flexibility of interface rendering.

[0139] In other embodiments, a computer-readable storage medium is protected that stores computer program instructions that, when executed by a processor, implement the steps of the methods described above. Those skilled in the art will understand that embodiments of this disclosure can be provided as methods, apparatus, or computer program products. Therefore, this disclosure can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, this disclosure can take the form of a computer program product embodied on one or more computer-usable non-transitory storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0140] In some embodiments, a computer program product is protected, comprising a computer program or instructions that, when executed by a processor, implement the methods described above. The computer program product includes a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowchart. In such embodiments, the computer program can be downloaded and installed from a network via a communication device, or installed from a storage device, or installed from ROM. When the computer program is executed by a CPU, it performs the functions defined in the methods of embodiments of this disclosure.

[0141] In some embodiments, a computer program is protected, the computer program comprising: instructions that, when executed by a processor, cause the processor to perform the methods of any of the foregoing embodiments. For example, the instructions may be embodied in computer program code.

[0142] This disclosure is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of this disclosure. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create a machine for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0143] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0144] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0145] This concludes the detailed description of the present disclosure. To avoid obscuring the concept of the disclosure, some details known in the art have not been described. Those skilled in the art will fully understand how to implement the technical solutions disclosed herein based on the above description.

[0146] The methods and apparatus of this disclosure may be implemented in many ways. For example, they may be implemented by software, hardware, firmware, or any combination of software, hardware, and firmware. The above-described order of steps for the methods is for illustrative purposes only, and the steps of the methods of this disclosure are not limited to the order specifically described above unless otherwise specifically stated. Furthermore, in some embodiments, this disclosure may also be implemented as a program recorded on a recording medium, the program including machine-readable instructions for implementing the methods according to this disclosure. Thus, this disclosure also covers recording media storing programs for performing the methods according to this disclosure.

[0147] While specific embodiments of this disclosure have been described in detail by way of example, those skilled in the art should understand that the examples are for illustrative purposes only and not intended to limit the scope of this disclosure. Those skilled in the art should understand that modifications can be made to the above embodiments without departing from the scope and spirit of this disclosure. The scope of this disclosure is defined by the appended claims.

Claims

1. A rendering method, comprising: Multiple sub-canvases are created in a visual interface, and each sub-canvas includes at least one component. In response to a first interactive operation on the first sub-canvas among the plurality of sub-canvases, the visualization interface is rendered, so that the components in the first sub-canvas have a first function, and the components in the second sub-canvas have a second function. The second sub-canvas is any of the other sub-canvases among the plurality of sub-canvases besides the first sub-canvas, and the first function is different from the second function.

2. The rendering method according to claim 1, wherein, The first function is an interactive function, and the second function is a non-interactive function.

3. The rendering method according to claim 2, wherein, The step of rendering the visualization interface in response to a first interactive operation on a first sub-canvas among the plurality of sub-canvases includes: In response to a first interaction operation on the first sub-canvas, the interaction state of the component in the first sub-canvas is adjusted to a first state, and the interaction state of the component in the second sub-canvas is adjusted to a second state. The visualization interface is rendered based on the first state of the components in the first sub-canvas and the second state of the components in the second sub-canvas.

4. The rendering method according to claim 3, wherein, Adjusting the interaction state of the components within the second sub-canvas to the second state includes: For a third sub-canvas where the interaction state of the components within the second sub-canvas was the first state before adjustment, remove the event listeners of the components within the third sub-canvas. The event listeners are used to receive control commands. Unload the interactive function wrapping layer bound to the component in the third sub-canvas. The interactive function wrapping layer is used to implement interactive functions according to the control instructions. Adjust the components within the third sub-canvas from the first state to the second state.

5. The rendering method according to claim 3, wherein, Adjusting the interaction state of the components within the first sub-canvas to the first state includes: Instantiate the components within the first child canvas; An interactive function wrapping layer is attached to the components within the first sub-canvas. The interactive function wrapping layer is used to implement interactive functions according to control commands. Bind business events corresponding to components within the first sub-canvas to the interactive function wrapping layer; Adjust the interaction state of the components within the first sub-canvas to the first state.

6. The rendering method according to claim 1, wherein, The creation of multiple sub-canvases in the visualization interface includes: In response to a second interactive operation on a target component within the visualization interface, the target component is moved to a corresponding target sub-canvas, wherein the target sub-canvas is one of the plurality of sub-canvases.

7. The rendering method according to claim 6, wherein, The step of moving the target component to the corresponding target sub-canvas in response to a second interactive operation on the target component within the visualization interface includes: In response to a second interaction operation on the target component, and the second interaction operation instructs the target component to be moved to a fourth sub-canvas, the number of components within the fourth sub-canvas is identified; The target sub-canvas is determined based on the number of components within the fourth sub-canvas; Move the target component to the target sub-canvas.

8. The rendering method according to claim 7, wherein, Determining the target sub-canvas based on the number of components within the fourth sub-canvas includes: In response to the number of components in the fourth sub-canvas being less than or equal to a number threshold, the fourth sub-canvas is determined as the target sub-canvas; In response to the number of components in the fourth sub-canvas exceeding the number threshold, a fifth sub-canvas is created, and the fifth sub-canvas is identified as the target sub-canvas.

9. The rendering method according to any one of claims 1-8, wherein, Information about components within the same sub-canvas is stored in the same array.

10. The rendering method according to claim 9, wherein, The relevant information includes the geometric attribute information and state information of the component, and the state information indicates the interaction state of the component.

11. The rendering method according to any one of claims 1-8, wherein, Components within the same sub-canvas correspond to the same business function.

12. The rendering method according to claim 11, wherein, The business functions include cooling control, fresh air control, lighting control, and sensor functions.

13. The rendering method according to any one of claims 2-5, wherein, The interactive function includes the ability to receive control commands, which are used to adjust at least one of the component's position, shape, and corresponding business data.

14. A rendering apparatus, comprising: The creation module is configured to create multiple sub-canvases in a visual interface, each of the multiple sub-canvases including at least one component; The rendering module is configured to render the visualization interface in response to a first interactive operation on a first sub-canvas among the plurality of sub-canvases, such that components in the first sub-canvas have a first function, and components in the second sub-canvas have a second function, wherein the second sub-canvas is any of the other sub-canvases among the plurality of sub-canvases besides the first sub-canvas, and the first function is different from the second function.

15. A rendering apparatus, comprising: processor; as well as A memory coupled to the processor is used to store instructions that, when executed by the processor, cause the processor to perform the rendering method as described in any one of claims 1 to 13.

16. A computer-readable storage medium having stored thereon computer instructions, wherein, When executed by a processor, the computer instructions implement the rendering method according to any one of claims 1 to 13.

17. A computer program product comprising computer instructions that, when executed by a processor, implement the rendering method according to any one of claims 1 to 13.

Images