A device point position map implementation method, device and equipment based on a Web front end

Abstract

This disclosure relates to the field of Web front-end development technology, and proposes a method, apparatus, and device for implementing device point-and-view diagrams based on Web front-ends. The method includes: generating a corresponding first canvas instance for each independent interactive visual element in the device point-and-view diagram; determining the canvas positioning coordinates and display level of each first canvas instance relative to a main container; combining each first canvas instance within the main container based on the canvas positioning coordinates and display level to form a complete view of the device point-and-view diagram; and using an event delegation mechanism to dispatch user interaction events occurring in the main container to a second canvas instance within the main container that matches the user interaction event, and triggering the element-level response logic of the second canvas instance for the user interaction event. The technical solutions provided by one or more embodiments of this disclosure can realize element-level interactive control and independent image rendering in device point-and-view diagrams.

Description

Technical Field

[0001] This disclosure relates to the field of Web front-end development technology, specifically to a method, apparatus, and device for implementing device point maps based on Web front-ends. Background Technology

[0002] Web front-end development is the field of development that uses browser technology to build user interfaces, primarily responsible for presenting page content and responding to user actions. A device location map is a graphical representation of devices in a physical space, mapping them onto an interface and labeling their status and location. It's commonly used in industrial monitoring and smart building applications. Device location maps implemented using web front-end technology offer both cross-platform ease of use and real-time visualization capabilities, significantly improving users' information retrieval efficiency and operational convenience.

[0003] Currently, the mainstream approach for building device location maps based on web front-end technologies is to draw all graphic elements on the same canvas. The main advantage of this approach is that all points, connections, and backgrounds are rendered in the same drawing context, which effectively ensures the hierarchical relationship and visual consistency of each element and avoids misalignment or occlusion issues.

[0004] However, drawing all elements on the same canvas can easily lead to high coupling between elements in the device location map. If an element needs its style modified, interactive animations added, or a response to user clicks required, it's difficult to directly and accurately locate and manipulate that element. This typically relies on an additional data model and necessitates redrawing the entire device location map. This results in a complex code structure for the device location map, significantly limiting the flexibility of feature expansion and later maintenance. Summary of the Invention

[0005] In view of this, this disclosure provides a method, apparatus and device for implementing device point map based on Web front-end, which solves the interaction and debugging problems caused by element coupling, and enables element-level interactive control and independent image rendering in device point map.

[0006] In a first aspect, this disclosure provides a method for implementing a device location map based on a web front-end. The method includes: generating a corresponding first canvas instance for each independent interactive visual element in the device location map; using a main container as a positioning reference, absolutely positioning each first canvas instance, and determining the canvas positioning coordinates and canvas display level of each first canvas instance relative to the main container; combining each first canvas instance within the main container according to the canvas positioning coordinates and the canvas display level to form a complete view of the device location map; and using an event delegation mechanism, dispatching user interaction events occurring in the main container to a second canvas instance within the main container that matches the user interaction event, and triggering the element-level response logic of the second canvas instance for the user interaction event.

[0007] In one optional implementation, generating a corresponding first canvas instance for each independent interactive visual element in the device location map includes: if a new first canvas instance is added, then reusing an idle canvas instance from a pre-maintained canvas object pool is prioritized; if the first canvas instance is no longer in use, then releasing the first canvas instance to the canvas object pool.

[0008] In one optional implementation, the step of using an event delegation mechanism to dispatch user interaction events occurring in the main container to a second canvas instance within the main container that matches the user interaction event includes: directly locating the second canvas instance within the main container based on the actual interactive element of the user interaction event; or, converting the viewport interaction coordinates of the user interaction event into container interaction coordinates in the main container coordinate system, and querying the second canvas instance within the main container that matches the container interaction coordinates through a quadtree spatial indexing mechanism.

[0009] In one optional implementation, triggering the element-level response logic of the second canvas instance in response to the user interaction event includes: obtaining the canvas offset of the second canvas instance relative to the main container; obtaining the current scaling ratio of the main container; converting the viewport interaction coordinates of the user interaction event into canvas interaction coordinates in the canvas coordinate system based on the canvas offset and the current scaling ratio; and executing the element-level response logic of the second canvas instance according to the canvas interaction coordinates.

[0010] In one optional implementation, the method further includes: obtaining a container transformation instruction from a user for the main container; calculating coordinate compensation for each of the first canvas instances within the main container based on the container transformation instruction; and updating the state information and position information of each of the first canvas instances within the main container based on the coordinate compensation.

[0011] In one optional implementation, the method further includes: obtaining a user's layer adjustment instruction for a target canvas instance in the first canvas instance; and modifying the canvas display layer of the target canvas instance relative to the main container according to the layer adjustment instruction, so that the stacking order of the target visual elements corresponding to the target canvas instance on the device bitmap changes.

[0012] Secondly, this disclosure provides a device for implementing a device location map based on a web front-end. The device includes: a canvas generation unit, used to generate a corresponding first canvas instance for each independent interactive visual element in the device location map; a canvas configuration unit, used to absolutely position each first canvas instance with a main container as a positioning reference, and determine the canvas positioning coordinates and canvas display level of each first canvas instance relative to the main container; a canvas combination unit, used to combine each first canvas instance into the main container according to the canvas positioning coordinates and the canvas display level to form a complete view of the device location map; and a canvas interaction unit, used to use an event delegation mechanism to dispatch user interaction events occurring in the main container to a second canvas instance in the main container that matches the user interaction event, and trigger the element-level response logic of the second canvas instance for the user interaction event.

[0013] Thirdly, this disclosure provides a computer device, including: a memory and a processor, which are communicatively connected to each other. The memory stores computer instructions, and the processor executes the computer instructions to perform the device bitmap implementation method based on the first aspect or any corresponding embodiment described above.

[0014] Fourthly, this disclosure provides a computer-readable storage medium storing computer instructions for causing a computer to execute the Web front-end-based device bitmap implementation method described in the first aspect or any corresponding embodiment thereof.

[0015] Fifthly, this disclosure provides a computer program product, including computer instructions for causing a computer to execute the Web-based front-end device bitmap implementation method described in the first aspect or any corresponding embodiment thereof.

[0016] This disclosure provides a technical solution through one or more embodiments, which instantiates each interactive atomic visual element (such as icon, text, and graphic) in a device location map into a canvas and performs layered management and composition. This achieves an efficient, flexible, and loosely coupled device location map, which is particularly suitable for application scenarios such as industrial monitoring, smart buildings, and network topology that require dynamic display of the status of a large number of devices and fine-grained operations. It not only breaks the state of mutual adhesion of graphic elements in the traditional canvas rendering architecture, making each device or graphic element in the device location map a truly independent entity object that can be individually programmed and controlled, thereby improving rendering performance, but also providing developers and end users with element-level fine-grained operation capabilities.

[0017] The technical solutions provided by one or more embodiments of this disclosure enable pixel-level precise clicking, dragging, and selection of any single device in the device location map. The interaction logic is clear and simple, laying the foundation for complex interaction scenarios (such as device grouping, right-click menus, and independent attribute editing).

[0018] The technical solutions provided by one or more embodiments of this disclosure allow web front-end developers to directly select, review, and modify any independent canvas node corresponding to any device, achieving WYSIWYG element-level debugging and greatly reducing the maintenance cost of device point maps.

[0019] The technical solution provided by one or more embodiments of this disclosure allows only the canvas (usually a small area) corresponding to a single device to be redrawn when the state of a single device is updated. This avoids the performance waste of redrawing the entire layer (containing multiple elements) in the "Canvas layered rendering architecture", and truly achieves zero overhead for local updates.

[0020] This disclosure provides a technical solution through one or more embodiments, where each element can independently execute animation, gradient, or filter effects without interfering with each other. The element hierarchy can be dynamically adjusted in real time, easily achieving requirements such as "alarm devices always being on top". Attached Figure Description

[0021] To more clearly illustrate the technical solutions in the specific embodiments of this disclosure, the accompanying drawings used in the description of the specific embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are some embodiments of this disclosure. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0022] Figure 1 A schematic diagram of a single Canvas aggregation rendering architecture is shown in the related technology; Figure 2 A schematic diagram of a layered rendering architecture for Canvas is shown in the relevant technology; Figure 3A schematic diagram of an atomic, independent Canvas architecture is shown in one embodiment of this disclosure; Figure 4 This illustration shows a step diagram of a method for implementing a device point map based on a web front-end in one embodiment of the present disclosure; Figure 5 This invention discloses a schematic diagram of the functional units of a device point map implementation device based on a web front-end in one embodiment of the present disclosure; Figure 6 A schematic diagram of the structure of a computer device according to one embodiment of the present disclosure is shown. Detailed Implementation

[0023] To make the objectives, technical solutions, and advantages of the embodiments of this disclosure clearer, the technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this disclosure, and not all embodiments. Based on the embodiments of this disclosure, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this disclosure.

[0024] For related technologies, please refer to Figure 1 Drawing all graphic elements of the device point map onto the same Canvas can be called a single-Canvas aggregation rendering architecture. The advantages of this architecture are its simplicity, high rendering efficiency, and relatively low resource consumption. However, its drawbacks are also significant: First, the elements are highly coupled, and any minor modification inevitably triggers a full redraw, causing performance overhead to increase sharply with graphic complexity. Second, it is difficult to achieve pixel-level precise interaction because all graphic elements share the same event handling and coordinate mapping mechanism, which can easily lead to positioning errors or chaotic responses. Third, debugging and maintenance are difficult; as the number of graphic elements increases, logic becomes mixed and states become scattered, significantly increasing the complexity of the positioning problem.

[0025] For related technologies, please refer to Figure 2 To reduce redrawing areas, some Canvas layered rendering architectures draw background elements, device elements, and user interface (UI) elements of the device bitmap on different Canvases based on the element type. However, the "layered rendering" in these related technologies only performs coarse-grained grouping by element type or update frequency, and does not change the underlying logic of "one layer carrying multiple graphic elements." Multiple graphic elements within the same Canvas layer remain coupled, failing to solve the problem of how to independently control and precisely respond to events for individual graphic elements.

[0026] In view of this, please refer to Figure 3 This disclosure provides one or more embodiments of a device point map implementation method based on a web front-end. It creates a corresponding independent canvas instance for each independent graphic element in the device point map, forming a "one element, one canvas" mapping relationship and constructing an atomic, independent Canvas architecture. This disclosure of one or more embodiments of a web front-end-based device point map implementation method solves the interaction and debugging problems caused by element coupling, enabling element-level interactive control and independent image rendering in the device point map.

[0027] Please see Figure 4 The present disclosure provides a method for implementing a device point map based on a web front-end, which may include the following steps.

[0028] S1: Generate the corresponding first canvas instance for each independent interactive visual element in the device location map.

[0029] In this implementation, each independent interactive visual element (such as a device icon, status label, control button, etc.) in the device point map is assigned an independent "first canvas instance." The first canvas instance can be a self-contained rendering unit with its own lifecycle and state. By encapsulating each visual element into an independent canvas instance, developers can precisely control the appearance, animation effects, data binding, and internal state of individual visual elements, avoiding the logical coupling and maintenance difficulties caused by drawing all elements on a single canvas. Each first canvas instance can be configured with attributes during creation, laying an atomic foundation for subsequent positioning, composition, and event handling.

[0030] Creating a separate canvas instance for each individual graphic element in the device location map improves its maintainability and scalability. When adding, modifying, or deleting a graphic element, only the corresponding canvas instance needs to be operated on, without affecting the normal operation of other graphic elements. Simultaneously, each canvas instance can be independently optimized for rendering, effectively reducing overall rendering overhead and providing performance guarantees for building large-scale, highly dynamic device location maps.

[0031] In some implementations, generating a corresponding first canvas instance for each independent interactive visual element in the device location map includes: if a new first canvas instance is added, then reusing an idle canvas instance from a pre-maintained canvas object pool is prioritized; if the first canvas instance is no longer in use, then releasing the first canvas instance to the canvas object pool.

[0032] Specifically, when a new canvas instance needs to be added (e.g., a new visual element needs to be rendered, or a new visual element enters the viewport of the device point map), a canvas instance that has been created but is in an idle state is retrieved first from the pre-maintained canvas object pool. The instance is generated by reuse rather than re-initialization. When a canvas instance is finished using (e.g., it is moved out of the viewport of the device point map or enters an invisible area), it is not destroyed immediately, but reset to a reusable state and released back into the canvas object pool for use when a new instance is added later. This mechanism transforms the creation and destruction of canvas instances into efficient operations of storing and returning them from the pool, which is especially suitable for scenarios where a large number of visual elements are added or deleted dynamically in the device point map.

[0033] By employing a canvas object pooling mechanism, the memory allocation overhead, garbage collection pressure, and constructor execution costs associated with frequent canvas instance creation and destruction are significantly reduced. This effectively mitigates the risk of page stuttering and improves overall rendering performance and interaction smoothness. Simultaneously, the canvas object pool centralizes and controls canvas instance reuse and recycling, preventing memory leaks. When the device location map requires dynamic refreshing, view scrolling, or real-time data updates, the canvas object pool can support rapid switching and high-frequency redrawing of large-scale graphic elements with stable resource usage, providing crucial performance assurance for building highly responsive, high-concurrency industrial-grade device location map interfaces.

[0034] Preferably, the canvas object pool uses an LRU (Least Recently Used) strategy to manage idle canvas instances. When the number of idle canvas instances reaches the capacity limit of the canvas object pool, the least recently used idle canvas instance can be discarded.

[0035] S2: Using the main container as a positioning reference, absolutely position each of the first canvas instances, and determine the canvas positioning coordinates and canvas display level of each of the first canvas instances relative to the main container.

[0036] In this implementation, after generating each independent canvas instance, it needs to be accurately placed in a predetermined position within the main container. This step uses the main container as the absolute positioning reference, calculating the precise coordinates (i.e., canvas positioning coordinates) of each first canvas instance relative to the top-left corner of the main container. The main container can assign a canvas display layer to each canvas instance through the z-index property of Cascading Style Sheets (CSS) or a similar layer management mechanism. The canvas positioning coordinates typically depend on the layout data of the device point map (such as JSON configuration, backend interface, or visual editor output), while the canvas display layer is dynamically set according to the device type and interaction state (such as pop-ups, highlights, dragging).

[0037] Absolute positioning and hierarchical management allow each canvas instance to independently control its precise position and occlusion relationships on the screen, perfectly simulating spatial arrangement on a two-dimensional plane. This mechanism supports dynamic layout updates. When the device bitmap size changes, the device position is adjusted, or a floating panel effect is required, only the canvas positioning coordinates and display hierarchy of a subset of canvas instances need to be recalculated, triggering updates for those instances without reconstructing the entire device bitmap data model. Furthermore, the clear hierarchical relationship provides a foundation for hit testing of subsequent event delegates, ensuring that upper-level elements can correctly intercept or pass user interactions.

[0038] S3: Based on the canvas positioning coordinates and the canvas display hierarchy, combine each of the first canvas instances into the main container to form a complete view of the device point map.

[0039] In this implementation, after determining the positioning coordinates and display hierarchy of each first canvas instance, these canvas instances can be orderly combined into the main container to form a complete and visual device point map. This combination process can be implemented through DOM (Document Object Model) operations or the node tree management of the graphics engine, ensuring that all canvas instances are added to the main container according to the correct coordinates and hierarchical relationships. Optionally, the relative positional dependencies between canvas instances, responsive layout adaptation, and batch processing optimization of initial rendering need to be considered during combination. Ultimately, the main container presents a complete, coordinated device point map with each element independently controllable, visually representing a complete interactive interface, while maintaining a modular organizational structure internally.

[0040] The combination process achieves seamless integration from discrete instances to a unified view, preserving the independent controllability of each canvas instance while presenting users with a coherent and intuitive device layout. Since the canvas positioning coordinates and display hierarchy are calculated before combination, the combination operation can be performed in batches, avoiding multiple reflows and redraws caused by inserting instances one by one, significantly improving the initial screen loading speed. Furthermore, this combination method supports incremental updates to the view; when the point map data changes, only the affected canvas instances need to be added, deleted, or repositioned, while the rest remain unchanged, greatly reducing the complexity of view maintenance.

[0041] S4: Using the event delegation mechanism, the user interaction event occurring in the main container is dispatched to the second canvas instance in the main container that matches the user interaction event, and the element-level response logic of the second canvas instance for the user interaction event is triggered.

[0042] In this implementation, to achieve efficient and scalable interactive responses, this step employs an event delegation mechanism to uniformly listen to all user interaction events (such as clicks, hovers, drags, etc.) on the main container. After the main container captures a user interaction event, it can quickly locate the actual canvas instance (i.e., the second canvas instance) corresponding to the user interaction event using the coordinate information of the event object (e.g., using a spatial indexing algorithm) and the element identifier (e.g., using an independent Canvas as a natural event target), without traversing all canvas instances. Subsequently, the user interaction event is dispatched to one or more second canvas instances, triggering the element-level response logic within the second canvas instance (e.g., highlighting, popping up a parameter panel, sending control commands, etc.). Throughout this process, the event capture behavior exists only at the main container level, avoiding the memory overhead and performance loss caused by attaching listeners to hundreds or thousands of independent canvas instances separately.

[0043] The event delegation mechanism centralizes the management of event listeners that were originally scattered across numerous canvas instances, significantly reducing memory usage and initialization time. This is particularly suitable for industrial-grade equipment location maps containing a large number of interactive elements. Through coordinate mapping algorithms, it can accurately identify complex interaction requirements such as prioritizing responses to upper-level elements and penetrating clicks, perfectly suited to scenarios with densely packed and hierarchically complex equipment locations in equipment location maps. Furthermore, element-level response logic is encapsulated within each canvas instance, maintaining the independence and integrity of the business logic.

[0044] In some implementations, the step of using an event delegation mechanism to dispatch user interaction events occurring in the main container to a second canvas instance within the main container that matches the user interaction event includes: directly locating the second canvas instance within the main container based on the actual interactive element of the user interaction event; or, converting the viewport interaction coordinates of the user interaction event into container interaction coordinates in the main container coordinate system, and querying the second canvas instance within the main container that matches the container interaction coordinates through a quadtree spatial indexing mechanism.

[0045] Specifically, when the interaction object of a user interaction event is itself an independently identifiable actual interactive element (e.g., a DOM node or a graphical object) within the bitmap viewport, the corresponding second canvas instance can be quickly located directly through the interaction object's `target` property, achieving accurate dispatch with low computational overhead. For scenarios where multiple visual elements within the bitmap viewport are difficult to distinguish, the viewport interaction coordinates of the user interaction event are first converted to container interaction coordinates in the main container coordinate system. Then, using a quadtree spatial indexing mechanism, the required second canvas instance can still be quickly retrieved from multi-level device elements, thus completing the accurate dispatch of the user interaction event.

[0046] The flexible application of two dispatch methods fully leverages the extremely low latency advantage of direct positioning in simple scenarios, while also addressing the performance bottleneck of complex hit detection in high-density, multi-level point maps through quadtree spatial indexing. In industrial point maps containing numerous device elements, quadtree indexing significantly reduces the time complexity of coordinate queries compared to traversing all elements.

[0047] In some implementations, triggering the element-level response logic of the second canvas instance in response to the user interaction event includes: obtaining the canvas offset of the second canvas instance relative to the main container; obtaining the current scaling ratio of the main container; converting the viewport interaction coordinates of the user interaction event into canvas interaction coordinates in the canvas coordinate system based on the canvas offset and the current scaling ratio; and executing the element-level response logic of the second canvas instance according to the canvas interaction coordinates.

[0048] Specifically, when triggering the element-level response logic of the second canvas instance, since the original event coordinates provided by the user interaction event are based on the viewport coordinate system of the device bitmap, while each second canvas instance maintains its own independent canvas coordinate system, and the canvas instance itself may undergo overall scaling, scrolling, or absolute positioning offset with the main container, multi-level coordinate transformation is required. First, the canvas offset of the second canvas instance relative to the main container (i.e., its absolute positioning position within the main container) is obtained; second, the current scaling ratio of the main container is obtained. Then, based on the canvas offset and the current scaling ratio, the original viewport interaction coordinates are successively subtracted from the scroll offset of the main container, the scaling ratio, and the instance's own positioning offset, which can ultimately be converted into precise canvas interaction coordinates in the local coordinate system of the canvas instance. Based on the canvas interaction coordinates, the second canvas instance can execute element-level response logic such as hit detection, graphic highlighting, and parameter editing within itself.

[0049] The aforementioned coordinate transformation mechanism ensures that regardless of how the main container is scaled or scrolled, and regardless of the absolute positioning of each canvas instance, user interactions can be accurately mapped to the correct local coordinates of the target canvas instance. This achieves precise hit and response in scenarios with high scaling ratios and multi-level offsets. This approach completely decouples container-level transformations from the drawing logic within the canvas instances. The main container can freely scale and translate globally without affecting the accuracy of interactions within each instance, and the canvas instances can also write response logic based on a unified local coordinate system without needing to concern themselves with external transformation states. This significantly improves code maintainability and provides a solid coordinate foundation for high-quality equipment location maps in fields such as industrial digital twins (one-to-one digital mapping and independent control of each physical entity such as machines, valves, and pipes), interactive circuit or network topology design tools (where each component or node is an independently draggable and editable entity), and large-scale online GIS map annotation systems (where each annotation point can be operated independently, and performance is not linearly affected by the total number of annotations).

[0050] In a practical application example, the original event coordinates provided for the user interaction event are (clientX, clientY). The canvas offset of the second canvas instance relative to the main container is (offsetLeft, offsetTop). The current scaling ratio of the main container is scale. By calculating "localX = (clientX - offsetLeft) / scale, localY = (clientY - offsetTop) / scale", the precise interaction coordinates in the drawing coordinate system inside the second canvas instance can be obtained.

[0051] In some implementations, the method further includes: obtaining a container transformation command from a user for the main container; calculating coordinate compensation for each of the first canvas instances within the main container based on the container transformation command; and updating the state and position information of each of the first canvas instances within the main container based on the coordinate compensation.

[0052] Specifically, when a user executes container transformation commands such as scaling, panning, rotating, or window resizing on the main container (e.g., panning the point map by dragging the mouse, zooming the view with the scroll wheel, or responding to device screen rotation), the command is first captured and its transformation parameters (such as scaling ratio change, translation vector offset, rotation transformation matrix, etc.) are parsed. Then, based on these transformation parameters, combined with the current positioning coordinates and display status of each first canvas instance, the required coordinate compensation values ​​for each canvas instance within the main container are calculated uniformly. Finally, based on the calculated coordinate compensation, the status information (such as whether it is within the visible area, whether the display precision needs to be changed) and position information (i.e., absolute positioning coordinates) of each first canvas instance within the main container can be updated in batches, ensuring that all canvas instances visually complete the transformation synchronously and maintaining the overall layout consistency of the device point map.

[0053] The synchronized transformation of the main container with the positions of all canvas instances within it ensures that all visual elements can smoothly and in real-time follow the transformation when the user performs global operations such as zooming and panning. This avoids visual misalignment or lag issues caused by independent management of canvas instances. By centrally calculating coordinate compensation and updating in batches, it can efficiently handle the synchronous transformation of a large number of instances, maintaining a smooth interactive experience even in dense point maps.

[0054] In some implementations, the method further includes: obtaining a user's layer adjustment instruction for a target canvas instance in the first canvas instance; and modifying the canvas display layer of the target canvas instance relative to the main container according to the layer adjustment instruction, so that the stacking order of the target visual elements corresponding to the target canvas instance on the device bitmap changes.

[0055] Specifically, when a user issues a layer adjustment command to a visual element in the device location map (e.g., by selecting "Place to Top," "Move Up," or "Move Down" via a right-click menu, or by directly dragging to adjust the occlusion relationship of the device icon), the command is first captured and the corresponding target canvas instance is identified. Then, based on the command type, the canvas display layer of the target canvas instance within the main container is calculated and modified (e.g., by changing the CSS z-index or the rendering order index in the graphics engine), updating the target canvas instance's layer hierarchy within the main container. This layer change immediately triggers a view reordering of the device location map, causing a corresponding change in the visual stacking order of the target visual elements corresponding to that target canvas instance in the device location map, thereby dynamically adjusting the occlusion relationship between elements.

[0056] This disclosure provides a method for implementing a device point map based on a web front-end, which may include the following process.

[0057] Process 1: Data-driven instantiation: Parse the device location map's location dataset, call the preset function for each location data (a complete visualization element that can contain all the information a device / location needs in the visualization scene, such as identification, location, style, status, interaction, metadata, and other attributes), and generate an independent Canvas bound to the unique ID of that location data.

[0058] Step 2, Unified Composition and Global Control: Based on the Canvas's configuration properties (such as canvas positioning coordinates and canvas display layer), add all independent Canvases to the main container; and bind event listeners to the main container to automatically trigger coordinate compensation for each independent Canvas when the main container is scaled / translated.

[0059] Step 3: Precise event handling: User interaction events are captured in the main container and can be dispatched to the specific Canvas where the event is expected to be interacted with, and precise operations can be performed.

[0060] Step 4: Dynamic Updates and Optimization: When the point data changes, the corresponding Canvas instance can be found directly by ID for redrawing; when the point data is moved out of the device point map viewport, the corresponding Canvas instance can be recycled to the canvas object pool.

[0061] This disclosure provides a technical solution through one or more embodiments, which instantiates each interactive atomic visual element (such as icon, text, and graphic) in a device location map into a canvas and performs layered management and composition. This achieves an efficient, flexible, and loosely coupled device location map, which is particularly suitable for application scenarios such as industrial monitoring, smart buildings, and network topology that require dynamic display of the status of a large number of devices and fine-grained operations. It not only breaks the state of mutual adhesion of graphic elements in the traditional canvas rendering architecture, making each device or graphic element in the device location map a truly independent entity object that can be individually programmed and controlled, thereby improving rendering performance, but also providing developers and end users with element-level fine-grained operation capabilities.

[0062] The technical solutions provided by one or more embodiments of this disclosure enable pixel-level precise clicking, dragging, and selection of any single device in the device location map. The interaction logic is clear and simple, laying the foundation for complex interaction scenarios (such as device grouping, right-click menus, and independent attribute editing).

[0063] The technical solutions provided by one or more embodiments of this disclosure allow web front-end developers to directly select, review, and modify any independent canvas node corresponding to any device, achieving WYSIWYG element-level debugging and greatly reducing the maintenance cost of device point maps.

[0064] The technical solution provided by one or more embodiments of this disclosure allows only the canvas (usually a small area) corresponding to a single device to be redrawn when the state of a single device is updated. This avoids the performance waste of redrawing the entire layer (containing multiple elements) in the "Canvas layered rendering architecture", and truly achieves zero overhead for local updates.

[0065] This disclosure provides a technical solution through one or more embodiments, where each element can independently execute animation, gradient, or filter effects without interfering with each other. The element hierarchy can be dynamically adjusted in real time, easily achieving requirements such as "alarm devices always being on top".

[0066] This disclosure also provides a device bitmap implementation apparatus based on a web front-end, which is used to implement the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "unit" can refer to a combination of software and / or hardware that performs a predetermined function. Although the apparatus described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0067] This embodiment provides a device for implementing device location maps based on a web front-end, such as... Figure 5 As shown, it includes: The canvas generation unit 100 is used to generate a corresponding first canvas instance for each independent interactive visual element in the device location map; The canvas configuration unit 200 is used to absolutely position each of the first canvas instances with the main container as the positioning reference, and to determine the canvas positioning coordinates and canvas display level of each of the first canvas instances relative to the main container. The canvas combination unit 300 is used to combine each of the first canvas instances into the main container according to the canvas positioning coordinates and the canvas display hierarchy to form a complete view of the device point map; The canvas interaction unit 400 is used to use an event delegation mechanism to dispatch user interaction events occurring in the main container to a second canvas instance within the main container that matches the user interaction event, and to trigger the element-level response logic of the second canvas instance for the user interaction event.

[0068] In some optional implementations, the canvas generation unit 100 is specifically used to: if a new first canvas instance is added, reuse an idle canvas instance from a pre-maintained canvas object pool first; if the first canvas instance is no longer in use, release the first canvas instance to the canvas object pool.

[0069] In some optional implementations, the canvas interaction unit 400 is specifically used to: directly locate the second canvas instance within the main container based on the actual interaction element of the user interaction event; or, convert the viewport interaction coordinates of the user interaction event into container interaction coordinates in the main container coordinate system, and query the second canvas instance within the main container that matches the container interaction coordinates through a quadtree spatial indexing mechanism.

[0070] In some optional implementations, the canvas interaction unit 400 is further configured to: obtain the canvas offset of the second canvas instance relative to the main container; obtain the current scaling ratio of the main container; convert the viewport interaction coordinates of the user interaction event into canvas interaction coordinates in the canvas coordinate system based on the canvas offset and the current scaling ratio; and execute the element-level response logic of the second canvas instance according to the canvas interaction coordinates.

[0071] In some optional implementations, the device point map implementation apparatus based on the web front-end further includes a container adjustment unit. This container adjustment unit is specifically used for: obtaining a container transformation command from the user for the main container; calculating coordinate compensation for each of the first canvas instances within the main container based on the container transformation command; and updating the state and position information of each of the first canvas instances within the main container based on the coordinate compensation.

[0072] In some optional implementations, the device point map implementation apparatus based on the web front-end further includes a canvas adjustment unit. This canvas adjustment unit is specifically used to: obtain a user's layer adjustment instruction for a target canvas instance within the first canvas instance; and, according to the layer adjustment instruction, modify the canvas display layer of the target canvas instance relative to the main container, so that the stacking order of the target visual elements corresponding to the target canvas instance on the device point map changes.

[0073] Further functional descriptions of the above-mentioned units are the same as those in the corresponding embodiments described above, and will not be repeated here.

[0074] In this embodiment, the code generation device for front-end development is presented in the form of a functional unit. Here, a unit refers to an ASIC (Application Specific Integrated Circuit) circuit, a processor and memory that execute one or more software or fixed programs, and / or other devices that can provide the above functions.

[0075] This disclosure also provides a computer device having the above-described features. Figure 5 The device shown is a web-based front-end-based device location map implementation device.

[0076] Please see Figure 6 , Figure 6 This is a schematic diagram of the structure of a computer device provided in an optional embodiment of this disclosure. For example... Figure 6 As shown, the computer device includes one or more processors 10, memory 20, and interfaces for connecting the components, including high-speed interfaces and low-speed interfaces. The components communicate with each other via different buses and can be mounted on a common motherboard or otherwise installed as needed. The processors can process instructions executed within the computer device, including instructions stored in or on memory to display graphical information of a GUI on external input / output devices (such as display devices coupled to the interfaces). In some alternative implementations, multiple processors and / or multiple buses can be used with multiple memories and multiple memory modules, if desired. Similarly, multiple computer devices can be connected, each providing some of the necessary operations (e.g., as a server array, a group of blade servers, or a multiprocessor system). Figure 6 Take a processor 10 as an example.

[0077] Processor 10 may be a central processing unit, a network processor, or a combination thereof. Processor 10 may further include a hardware chip. The hardware chip may be an application-specific integrated circuit (ASIC), a programmable logic device (PLD), or a combination thereof. The programmable logic device may be a complex programmable logic device (CAMP), a field-programmable gate array (FPGA), a general-purpose array logic (GDA), or any combination thereof.

[0078] The memory 20 stores instructions executable by at least one processor 10 to cause the at least one processor 10 to perform the method shown in the above embodiments.

[0079] The memory 20 may include a program storage area and a data storage area. The program storage area may store the operating system and applications required for at least one function; the data storage area may store data created based on the use of the computer device. Furthermore, the memory 20 may include high-speed random access memory and may also include non-transitory memory, such as at least one disk storage device, flash memory device, or other non-transitory solid-state storage device. In some alternative embodiments, the memory 20 may optionally include memory remotely located relative to the processor 10, and these remote memories may be connected to the computer device via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

[0080] The memory 20 may include volatile memory, such as random access memory; the memory may also include non-volatile memory, such as flash memory, hard disk or solid-state drive; the memory 20 may also include a combination of the above types of memory.

[0081] The computer device also includes an input device 30 and an output device 40. The processor 10, memory 20, input device 30, and output device 40 can be connected via a bus or other means. Figure 6 Taking the example of a connection between China and Israel via a bus.

[0082] Input device 30 can receive input numerical or character information, and generate key signal inputs related to user settings and function control of the computer device, such as a touchscreen, keypad, mouse, trackpad, touchpad, joystick, one or more mouse buttons, trackball, joystick, etc. Output device 40 may include display devices, auxiliary lighting devices (e.g., LEDs), and haptic feedback devices (e.g., vibration motors). The aforementioned display devices include, but are not limited to, liquid crystal displays, light-emitting diodes, displays, and plasma displays. In some alternative embodiments, the display device may be a touchscreen.

[0083] This disclosure also provides a computer-readable storage medium in which the methods described in this disclosure can be implemented in hardware or firmware, or implemented as recordable on a storage medium, or implemented as computer code originally stored on a remote storage medium or a non-transitory machine-readable storage medium and subsequently stored on a local storage medium after being downloaded over a network. Thus, the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium may be a magnetic disk, optical disk, read-only memory, random access memory, flash memory, hard disk, or solid-state drive, etc.; further, the storage medium may also include combinations of the above types of memory. It is understood that computers, processors, microprocessor controllers, or programmable hardware include storage components capable of storing or receiving software or computer code that, when accessed and executed by the computer, processor, or hardware, implements the methods shown in the above embodiments.

[0084] A portion of this disclosure can be applied to computer program products, such as computer program instructions, which, when executed by a computer, can invoke or provide methods and / or technical solutions according to this disclosure through the operation of the computer. Those skilled in the art will understand that the forms in which computer program instructions exist in a computer-readable medium include, but are not limited to, source files, executable files, and installation package files. Accordingly, the ways in which computer program instructions are executed by a computer include, but are not limited to: the computer directly executing the instructions; the computer compiling the instructions and then executing the corresponding compiled program; the computer reading and executing the instructions; or the computer reading and installing the instructions and then executing the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to a computer.

[0085] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the embodiments for apparatus, computer equipment, storage media, and program products are basically similar to the method embodiments, so the descriptions are relatively simple; relevant parts can be referred to the descriptions of the method embodiments.

[0086] The above description is merely an embodiment of this application and is not intended to limit the scope of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of the claims of this application.

[0087] Although embodiments of the present disclosure have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of the present disclosure, and such modifications and variations all fall within the scope defined by the appended claims.

Claims

1. A method for implementing device location maps based on a Web front-end, characterized in that, The method includes: For each independent, interactive visual element in the device location map, generate a corresponding first canvas instance; Using the main container as a positioning reference, each first canvas instance is absolutely positioned, and the canvas positioning coordinates and canvas display level of each first canvas instance relative to the main container are determined. Based on the canvas positioning coordinates and the canvas display hierarchy, each first canvas instance is combined within the main container to form a complete view of the device point map; Using an event delegation mechanism, user interaction events occurring in the main container are dispatched to a second canvas instance within the main container that matches the user interaction event, and the element-level response logic of the second canvas instance for the user interaction event is triggered.

2. The method according to claim 1, characterized in that, The process involves generating a corresponding first canvas instance for each independent, interactive visual element in the device location map, including: If a new first canvas instance is added, an idle canvas instance will be reused from the pre-maintained canvas object pool first. If the first canvas instance is no longer in use, it is released to the canvas object pool.

3. The method according to claim 1 or 2, characterized in that, The method of utilizing an event delegation mechanism to dispatch user interaction events occurring in the main container to a second canvas instance within the main container that matches the user interaction event includes: Based on the actual interactive elements of the user interaction event, directly locate the second canvas instance within the main container; Alternatively, the viewport interaction coordinates of the user interaction event can be converted into container interaction coordinates in the main container coordinate system, and the second canvas instance that matches the container interaction coordinates within the main container can be queried using a quadtree spatial indexing mechanism.

4. The method according to claim 3, characterized in that, The element-level response logic that triggers the second canvas instance in response to the user interaction event includes: Obtain the canvas offset of the second canvas instance relative to the main container; Get the current scaling ratio of the main container; Based on the canvas offset and the current scaling ratio, the viewport interaction coordinates of the user interaction event are converted into canvas interaction coordinates in the canvas coordinate system. Based on the canvas interaction coordinates, execute the element-level response logic of the second canvas instance.

5. The method according to claim 1, characterized in that, The method further includes: Obtain the user's container transformation command for the main container; According to the container transformation instruction, calculate the coordinate compensation of each first canvas instance within the main container; Based on the coordinate compensation, update the state and position information of each of the first canvas instances within the main container.

6. The method according to claim 1, characterized in that, The method further includes: Obtain the user's hierarchical adjustment command for the target canvas instance in the first canvas instance; According to the layer adjustment instruction, the canvas display layer of the target canvas instance relative to the main container is modified so that the stacking order of the target visual elements corresponding to the target canvas instance on the device bitmap is changed.

7. A device for implementing device location maps based on a Web front-end, characterized in that, The device includes: The canvas generation unit is used to generate a corresponding first canvas instance for each independent interactive visual element in the device location map; The canvas configuration unit is used to absolutely position each of the first canvas instances with the main container as the positioning reference, and to determine the canvas positioning coordinates and canvas display level of each of the first canvas instances relative to the main container. The canvas grouping unit is used to group each of the first canvas instances into the main container according to the canvas positioning coordinates and the canvas display hierarchy, so as to form a complete view of the device point map; The canvas interaction unit is used to use an event delegation mechanism to dispatch user interaction events occurring in the main container to a second canvas instance within the main container that matches the user interaction event, and to trigger the element-level response logic of the second canvas instance for the user interaction event.

8. A computer device, characterized in that, include: A memory and a processor are interconnected, the memory stores computer instructions, and the processor executes the computer instructions to perform the device point map implementation method based on any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing the computer to execute the device point map implementation method based on the Web front-end as described in any one of claims 1 to 6.

10. A computer program product, characterized in that, It includes computer instructions for causing a computer to execute the device point map implementation method based on a Web front-end as described in any one of claims 1 to 6.

Images