Instant self-adaptive configuration system and application equipment

Abstract

The invention belongs to the technical field of configuration, and particularly discloses an instant self-adaptive configuration system and application equipment, and the system comprises a display module, a configuration module, a data interface module and an editing module. The display module is used for realizing real-time rendering of page data and realizing self-adaption of a page under different screen resolutions by utilizing an improved grid layout method; the configuration module is used for managing page and component configuration; the data interface module realizes dynamic binding of the component and an external data source; the editing module provides a system editing mode switching function, responds to user operation in real time in the editing mode, and keeps dynamic updating and rendering of page data. The problem that an existing configuration technology cannot adapt to screens with different resolutions is solved, and the problem that data and pictures cannot be dynamically rendered in real time in the editing process is solved.

Description

Technical Field

[0001] The present invention relates to the field of configuration technology, and particularly to an instant adaptive configuration system and an application device. Background Art

[0002] Configuration technology is a key technology for realizing data visualization in the industrial field, providing users with an intuitive and convenient visualization design environment. Through configuration technology, users can easily build visualization pages, quickly integrate and display complex information from various data sources. Especially in complex scenarios of integrated source-grid-load-storage, it can intuitively reflect device status and production data, helping users to monitor and manage industrial production and improve operation efficiency.

[0003] Currently, configuration technology is widely used in the industrial field to realize the visualization display and monitoring of data. However, the existing configuration technology usually has the following problems:

[0004] (1) The editing and preview processes are cumbersome and lack instantaneity: Traditional configuration systems usually use a configuration editor for development, and the editor and the display page are independent of each other. During the development process, after the user drags and drops components onto the editor's page, they must switch to the display page through the editor's preview function to view the real-time data effect after configuration. The system cannot directly obtain and display real-time data in the editing state. If format confusion or layout problems occur after the system obtains data, they can only be discovered after entering the display page. This design increases the operation steps, resulting in a decrease in development efficiency and making it difficult to achieve instant editing and instant viewing.

[0005] (2) The page layout lacks adaptability: Traditional configuration systems usually adopt a fixed page width-to-height ratio. When displayed on screens with different resolutions, content stretching, deformation, or overflow easily occurs, destroying the overall display effect. Due to the lack of a flexible adaptive layout mechanism, the page cannot dynamically adjust according to the screen size of the device, resulting in a poor experience for users on different devices.

[0006] (3) It cannot support cross-platform requirements: Traditional configuration systems usually lack cross-platform support and cannot be used commonly on different platforms (such as Android and iOS). The development team needs to develop and maintain the system separately for each platform, resulting in a significant increase in development costs. In addition, compatibility issues between different platforms may also affect the stability and functional consistency of the system, further increasing the complexity of development and maintenance. Summary of the Invention

[0007] The purpose of the present invention is to solve the problems in the background art, such as cumbersome editing and preview processes, inability to support cross-platform requirements, lack of adaptability of the page, and insufficient instantaneity. For this reason, an instant adaptive configuration system and an application device are provided.

[0008] To achieve the above object, the technical solution adopted by the present invention is as follows:

[0009] An instant adaptive configuration system, comprising a display module, a configuration module, a data interface module and an editing module;

[0010] The display module uses HTML5, CSS3, and JavaScript to build a Web page for adaptive display, and adopts a grid layout method to make the page and components instantaneously adapt to different resolution screens;

[0011] The configuration module includes page configuration and component configuration. Among them, the page configuration manages the page style and layout of the configuration, and the component configuration manages the style of the component itself and the specific configurations of various components;

[0012] The data interface module is used for data acquisition, conversion and management, realizes the dynamic binding between the components in the configuration and external data sources, and ensures the instant update of the data displayed by the components;

[0013] The editing module is used to switch the editing state of the system. In the editing state, by selecting components in the configuration component library, the components are instantaneously added to the configuration display page, and the components will automatically apply appropriate sizes and positions.

[0014] The following is a further limited technical solution of the system in the present invention. The display module is used to integrate and display each component, ensure that the component display will not stretch and deform on screens with different resolutions and sizes, and perform real-time adaptation as the window size is adjusted, and is realized by the grid layout method.

[0015] The following is a further limited technical solution of the system in the present invention. The grid layout method includes: dividing the display area into grid cells with fixed sizes, and dynamically calculating the scaling ratio according to the current window size to ensure the consistency of each component in different interface layouts; the scaling ratio is obtained by comparing the aspect ratio of the screen with the original aspect ratio formulated in the page design stage; when the aspect ratio of the screen is less than the aspect ratio of the design draft, the scaling ratio is the ratio of the screen width to the design draft width; otherwise, the scaling ratio is the ratio of the screen height to the design draft height, and the calculated scaling ratio is instantaneously applied to the global style.

[0016] The following is a further limited technical solution of the system in the present invention. The configuration module includes page configuration and component configuration; the page configuration is used to adjust the overall style of the page in real time, including the large screen title, title background, title color, title size and page background; the component configuration is used to adjust the style of each component in real time, including the component title text, component title background, component title color, component border, component background and specific configurations provided according to different component types.

[0017] The following are the further defined technical solutions of the system in the present invention. The editing module is used to switch the editing mode. When switched to the editing mode, users are allowed to freely add, delete, drag, scale components, modify component configurations and page configurations. All modified configurations during editing will be instantly synchronized to the server; the real-time acquisition and rendering of data on the page are maintained in the editing mode.

[0018] The following are the further defined technical solutions of the system in the present invention. The editing module includes a drag event listener and a scale event listener. In the editing mode, whenever the user performs a drag or scale operation on a component, the listener captures the corresponding behavior and applies the grid layout method. At the same time, the initial size and position of the component and the moving distance of the mouse are recorded. On this basis, the system performs out-of-bounds detection and collision detection: if the component goes out of the layout range, the system adjusts its position and size; if the component collides with other components, the position is adjusted according to the collision direction to ensure that there is no overlap between components; if the component neither goes out of bounds nor collides, the position and size of the component are updated instantly according to the mouse moving distance.

[0019] The following are the further defined technical solutions of the system in the present invention. The data interface module includes three parts: data acquisition, data conversion, and default data configuration; the data acquisition part supports three communication methods: MQTT, HTTP, and WebSocket, flexibly configures interface parameters and call frequencies to achieve efficient data interaction; the data conversion part allows users to perform secondary processing on the returned JSON data through custom scripts to ensure that the data transmitted to the components meets the display requirements; the default data configuration part ensures normal display when the interface is not bound, improving the flexibility of the module.

[0020] An application device of an instant adaptive configuration system includes a memory and a processor. The memory stores a computer program that is loaded and executed by the processor to implement the above-mentioned instant adaptive configuration system.

[0021] Compared with the prior art, the present invention has the following technical effects:

[0022] The present invention effectively solves the problems in the prior art of cumbersome editing and preview processes, lack of cross-platform support, insufficient page adaptability, and lack of instantaneity: by integrating the editing and display functions, adopting an improved grid layout method to achieve page adaptability, providing highly customizable component management and a flexible data interface mechanism, the present invention significantly improves the development efficiency and user experience of the visualization page while ensuring a what-you-see-is-what-you-get editing experience.

[0023] In addition, the present invention is applicable to the display requirements of complex industrial scenarios (such as virtual power plants, integrated scenarios of power sources, grids, loads, and energy storage, etc.): Through the highly customizable components and flexible data binding mechanism, the system can maintain consistent visual effects and instant data display on different resolutions and different devices, achieving true multi-platform support, effectively reducing development costs, and enhancing the user experience.

[0024] The following further describes the present invention in conjunction with the accompanying drawings and embodiments. Description of the Drawings

[0025] In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the accompanying drawings required for use in the embodiments or the prior art. Obviously, the accompanying drawings in the following description are only some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other accompanying drawings can also be obtained based on these drawings.

[0026] Figure 1 It is a comparison diagram of the system processes of a traditional configuration system and the instant adaptive configuration system of the present invention;

[0027] Figure 2 It is the system architecture diagram of the present invention;

[0028] Figure 3 It is a schematic diagram of the process of dynamically rendering the page layout and data in the embodiments of the present invention;

[0029] Figure 4 It is a schematic diagram of the process of dragging and scaling components in the edit mode in the embodiments of the present invention;

[0030] Figure 5 It is a schematic diagram of the working principle of the listener when dragging and scaling components in the embodiments of the present invention;

[0031] Figure 6 It is the internal structure diagram of a computer device in the embodiments of the present invention. Detailed Embodiments

[0032] To make the above objects, features, and advantages of the present invention more obvious and understandable, the following will provide a detailed description of the specific embodiments of the present invention in conjunction with the accompanying drawings. Many specific details are set forth in the following description to facilitate a full understanding of the present invention. However, the present invention can be implemented in many other ways different from those described herein. Those skilled in the art can make similar improvements without departing from the connotation of the present invention. Therefore, the present invention is not limited by the specific embodiments disclosed below.

[0033] As Figure 1-6 shown, this embodiment provides an instant adaptive configuration system, which can be applied to, for example, Figure 2In the shown system architecture, the system architecture is divided into four layers from top to bottom: the interface layer, the logic layer, the data layer, and the platform layer. Each layer works together through clearly defined interfaces and modules.

[0034] The interface layer includes two parts: system components and interface visual design. System components are used to present key information related to business and data aggregation. Its types cover line charts, bar charts, pie charts, tables, operation buttons, flowcharts, and user-defined components, meeting diverse display requirements. Interface visual design focuses on overall aesthetics and usability. By adjusting fonts, colors, backgrounds, title styles, and border styles, it provides users with a unified, coordinated, and intuitive visual experience, enhancing the readability and coordination of the interface.

[0035] The logic layer includes a configuration display module, a configuration configuration module, an editing module, and a data interface module. The configuration display module is responsible for the adaptive display of components in the interface layer. By using an improved grid layout method, it ensures that components can maintain the correct display ratio under different resolutions and windows. The configuration configuration module is responsible for the appearance customization and configuration management of pages and components. The editing module can control behaviors such as adding, deleting, dragging, scaling, and configuration modification of components after the editing mode is enabled. The data interface module is responsible for data processing and conversion, providing real-time data support for interface layer components.

[0036] The data layer includes a business background and industrial equipment. Through a unified data interface and communication protocol, it realizes the efficient access and transmission of data. When the access device or the background outputs data through the interface, the system can receive and process the data in real time, enabling the data to be quickly transmitted to the interface layer for display.

[0037] In the platform layer, the operating system, network communication module, and Web framework provide a basic environment for the operation and interaction of the upper layer.

[0038] Through the organic cooperation of the above four-layer architecture, the present invention can ensure dynamic editing, adaptive display, and efficient data interaction of the configuration page under different terminals and application scenarios.

[0039] This embodiment provides an instant adaptive configuration system, including a display module, a configuration module, an editing module, and a data interface module.

[0040] The display module is used to integrate and display each component, ensuring that the component display will not be stretched or deformed on screens with different resolutions and sizes, and can be adapted in real time as the window size is adjusted. The adaptive mechanism of this module is mainly implemented by using an improved grid layout method.

[0041] Traditional grid layout methods are mainly used to implement component positioning and dragging functions. Its core principle is to divide the display area into multiple grid cells of fixed size. Each component is assigned to a specific grid position according to its layout requirements and occupies a corresponding number of grid cells. In this way, the position and size of the component can be precisely aligned with the grid cells, enabling dynamic adjustment and adaptive layout of the page. The grid layout has the following functions:

[0042] (1) Grid division: Divide the display area of the page into a grid of several rows and columns, and each grid cell has a fixed width and height.

[0043] (2) Component positioning: The position of each component in the grid is determined by its abscissa (x) and ordinate (y), indicating that the component starts from the x-th column and the y-th row; the width (w) and height (h) of the component represent the number of grid cells it occupies horizontally and vertically. Each component has a unique identifier (i) to distinguish different components.

[0044] (3) Dragging and scaling: By binding a drag event listener and a component size adjustment listener, implement dragging and scaling of the component in the grid; during the dragging process, the position and size of the component are adjusted according to the grid cells to ensure that the component is always aligned with the grid.

[0045] Although the traditional grid layout module can divide the page into grids and ensure that the position and size of the components conform to the grid rules, in the case where the screen resolution is inconsistent with the design draft (the original width and height determined during the page design stage), it cannot automatically adjust the display ratio of the components. For example, components that are normally displayed on a wide-screen device will be squeezed and deformed on a narrow-screen device. To solve this problem, the display module of this embodiment adopts an improved grid layout method, introduces a scaling ratio (scale), calculates the ratio difference with the design draft in real time according to the width and height of the current window, determines the scaling ratio, and dynamically scales the entire page to ensure the display effect of the components on different screens.

[0046] The real-time adaptive steps of the improved grid layout method are as follows:

[0047] First, calculate the scaling ratio (scale). When the aspect ratio of the screen (screen width / screen height) is less than the aspect ratio of the design draft (design draft width / design draft height), the scaling ratio is the ratio of the screen width to the design draft width (screen width / design draft width); otherwise, the scaling ratio is the ratio of the screen height to the design draft height (screen height / design draft height). After the calculation is completed, apply the scaling ratio to the global style in real time.

[0048] Next, obtain the layout information of each component, including the horizontal coordinate (x), vertical coordinate (y), width (w), and height (h) of the component. Each time the layout is rendered, the system converts these position information into actual pixel values and dynamically adjusts them according to the scaling ratio. By this method, it is ensured that the components can maintain a consistent display effect under different screen sizes and resolutions. Regardless of how the screen size changes, problems such as stretching deformation or content overflow can be avoided.

[0049] The configuration module includes page configuration and component configuration. Page configuration is used to instantaneously manage the overall style of the configuration, supporting adjustments to the title background, title color, title size, and page background; component configuration is used to instantaneously manage component types, the styles of the components themselves, and custom configurations. Among them, component types include line charts, bar charts, pie charts, tables, operation buttons, flowcharts, operation buttons, real-time monitoring dashboards, and custom components. All components support drag-and-drop interactions. Users can freely drag components within the configuration display module and instantaneously adjust the display effects of the components through custom configurations and personalized settings, including customizing the borders, fonts, and colors of the components.

[0050] The editing module is used to switch the editing state of the configuration and provide an interactive interface for component selection and addition. In traditional configuration systems, the editor and the display page are independent of each other. After users drag components to the page in the editor, they need to switch to the display page to view the real-time data effect after configuration. If there are format errors or layout problems in the system after obtaining the data, they can only be discovered by entering the display page.

[0051] The present invention solves the above problems through the editing module. When users enter the editing mode, they can directly add, delete, drag, scale components, and modify component configurations and page configurations freely on the current page. These operations are presented in real time on the current interface, and the actual display effect of the data can be viewed without switching to the preview or display mode, as Figure 1 shown. When users complete the modification and save it, all modified configurations are instantaneously synchronized to the server, and a what-you-see-is-what-you-get editing experience can be achieved without complex system updates.

[0052] The editing module adopts the browser storage (localStorage) mechanism in the editing mode to enhance the user experience and ensure data integrity. The specific implementation is as follows: When the user enters the editing mode, the system first checks whether there is any page configuration data that was not saved during the previous editing process in the browser storage. If it exists, the system will prompt the user to continue the unfinished editing work from the previous time, ensuring that the user will not lose the editing progress due to accidental exit or network problems. In the editing mode, the page is rendered and updated in real time. The user can view and operate the configured data in real time, and the data is kept refreshed in real time. Different from the normal mode, the page and component configurations in the editing mode are not directly stored in the background database, but temporarily stored in the browser storage. When the user operates on the page or component, the system preferentially reads and writes data from the browser storage to achieve instant response and avoid unnecessary network requests. When the user finishes editing and selects to save, the system submits the configuration content in the browser storage to the server to update the background database, and the modified content will be instantly synchronized to all devices without complex system updates.

[0053] The improved grid layout method is also used by the editing module when dragging and scaling components. When the drag event listener or scale event listener of the component detects a drag event or a scale event, it records the initial state of the component and the mouse movement distance. On this basis, the system performs out-of-bounds detection and collision detection: If the component goes out of the layout range, the system adjusts its position and size; if the component collides with other components, the position is adjusted according to the collision direction to ensure that the components do not overlap; if the component neither goes out of bounds nor collides, the position and size of the component are instantly updated according to the mouse movement distance.

[0054] The editing module adopts an anti-overlap mechanism when adding components. Specifically, when the user selects a component and performs an add operation, the system first initializes the default width and height for the component as the basic layout configuration. Subsequently, the system uses a traversal strategy that first goes horizontally and then vertically to find a suitable space position on the page. It starts from the upper left corner of the page and searches horizontally. If there is enough space in the current row, the system directly adds the component to that position; if the space in the current row is insufficient, the system automatically switches to the next row and continues the search. If the system still cannot find enough available space after traversing the entire page, the system will prompt the user that the page space is full and no more components can be added.

[0055] The data interface module consists of three parts: data acquisition, data conversion, and default data configuration. The data acquisition part supports three communication methods, namely MQTT, HTTP, and WebSocket, to meet the data exchange requirements in different application scenarios. MQTT can achieve real-time acquisition and push of sensor data; the HTTP protocol can perform timed requests, data pulling, and device instruction issuing; WebSocket can achieve two-way real-time communication between the server and the front end.

[0056] The data conversion part allows users to customize scripts to immediately convert and modify the JSON data returned by the interface, thus meeting the system's requirements for data format and content. By exposing the original JSON data to users, users can write custom scripts to parse, clean, and structure the data to ensure that the data finally transmitted to the component conforms to the expected format.

[0057] The default data configuration part allows users to customize the default JSON data used when the component has not been bound to a real interface. When the interface is not bound, the system will use the default data for content display; once the interface is successfully bound, the system will automatically replace the default data with real-time interface data to ensure that the displayed content is always synchronized with the actual business scenario.

[0058] The system is built on a Web platform and has good cross-platform characteristics. It can run seamlessly in mainstream browsers on different operating systems (such as Windows, macOS, and Linux), ensuring that the same set of code achieves consistent functions and performance.

[0059] This embodiment also provides an application device for an instant adaptive configuration system, including: a memory, at least one processor; wherein, a computer program is stored on the memory; at least one processor executes the instant adaptive configuration system as described above by executing the computer program stored in the memory.

[0060] In one embodiment, as Figure 3 shown, an instant adaptive configuration system is provided. This embodiment is mainly applied to the scenario where users view the configuration page. By dynamically rendering the page layout and data, it ensures that the page can immediately adapt to different device screens and resolutions. The specific steps are as follows:

[0061] Step S202, run the configuration system, and calculate the aspect ratio of the current running device screen and the aspect ratio of the design draft.

[0062] Specifically, in the system, the width (innerWidth) and height (innerHeight) of the device screen are obtained by accessing the window object. The width and height of the design draft are input by the user in the page configuration window and automatically saved to the business background after input. Each time the system runs, the saved width and height of the design draft will be applied; if the width and height are not filled in, the system defaults the width of the design draft to 1920 and the height of the design draft to 1080. Subsequently, the width-to-height ratio of the screen is calculated by dividing the screen width by the screen height, and the width-to-height ratio of the design draft is calculated by dividing the width of the design draft by the height of the design draft.

[0063] Step S203, calculate the scaling ratio of the current page and apply it globally.

[0064] Specifically, if the width-to-height ratio of the device screen is less than the width-to-height ratio of the design draft, the scaling ratio (scale) will be calculated based on the ratio of the screen width to the width of the design draft. In this case, the width of the page will be adapted to the device screen first, and the vertical ratio of the page content will remain unchanged. Otherwise, if the width-to-height ratio of the device screen is greater than or equal to the width-to-height ratio of the design draft, the scaling ratio will be calculated based on the ratio of the screen height to the height of the design draft. In this case, the height of the page will be adapted to the device screen first, and the horizontal ratio of the page content will not be distorted. The calculated scaling ratio will be applied globally through the transform:scale property of CSS.

[0065] Specifically, CSS styles will be added to the root element (such as html or body), and the overall display effect of the page will be adjusted through transform:scale, so that the page content is adaptively scaled according to the resolution of the device screen and the ratio of the design draft. To ensure that the scaling starts from the upper left corner of the page, the system combines the use of the transform-origin:0 0 property to avoid layout disorders caused by scaling.

[0066] Step S204, divide the page into a grid layout according to the preset number of divided rows and columns in the system.

[0067] Specifically, the system first dynamically obtains the width and height of the current page and the preset number of row and column divisions in the system. The width and height of the page are determined according to the resolution of the device screen. For example, the total width of the page is 1920px and the total height is 1080px, and the preset division is 100 columns and 60 rows. The system calculates the size of each grid unit based on these parameters, and obtains that the width of each column is 1920px / 100 = 12px, and the height of each row is 1080px / 60 = 18px. The sizes of these grid units will be used as the basic units for component layout, used to determine the horizontal and vertical coordinates of the components and calculate the number of rows and columns they occupy in the page.

[0068] Step S205: Obtain the position and size information of each component on the page and convert it into actual pixel values.

[0069] Specifically, the layout information of each component is stored in the Figure 2 business background as shown. Before page rendering, the system will obtain the corresponding component information according to the currently displayed page. The component information includes the following: x represents the abscissa of the component in the grid, indicating the number of grid cells from the left side of the container; y represents the ordinate of the component in the grid, indicating the number of grid cells from the top of the container; w represents the width of the component, indicating the number of grid columns occupied by the component; h represents the height of the component, indicating the number of grid rows occupied by the component. In addition, each component also has a unique identifier i to distinguish different components.

[0070] Specifically, during each layout rendering, the system needs to convert the position information (x, y, w, h) of each component into actual pixel values and dynamically adjust them according to the scaling ratio to ensure the display effect of the components on different device screens and resolutions. First, obtain the width and height of each grid of the page grid according to Step S204. Next, adjust the position and size of the components according to the scaling ratio calculated in Step S202. The specific calculation is as follows. Specifically, the actual abscissa of the component is x * 12px * scale, representing the starting position of the component, that is, the distance from the left side of the container; the actual ordinate is y * 18px * scale, representing the distance of the component from the top of the container; the actual width is w * 12px * scale, representing the width of the component; the actual height is h * 18px * scale, representing the height of the component. After calculating the abscissa, ordinate and size of each component, the system will render the page based on these values.

[0071] Step S206: Obtain the component configuration and data through the unique identifier (i) of the component and perform rendering.

[0072] Specifically, the system requests the corresponding component configuration and data source information from the Figure 2 business background as shown through the unique identifier (i) of the component. After obtaining the relevant configuration and data source, the system processes the appearance and the displayed data of the component according to the component type and its configuration. Component types include line charts, bar charts, pie charts, tables, operation buttons, flowcharts, real-time monitoring dashboards, and custom components; component configurations cover title styles, borders, backgrounds, font colors, and other visualization parameters. Component data is parsed and converted through the data interface module to ensure that the data format and content transmitted to the component comply with the specifications. After processing, the system renders the component into the page for display according to the component coordinates and sizes calculated in Step S205.

[0073] Step S207, monitor the change of page size, dynamically calculate the scaling ratio, adjust the position and size of components, and render immediately.

[0074] Specifically, the system continuously monitors the change event (resize event) of the browser window size. When the page size changes, the system recalculates the scaling ratio according to the calculation logic of steps S202 and S203 and applies it to the global style. Subsequently, based on the newly calculated scaling ratio and the component layout obtained in steps S204 and S205, the position and size of the components are adjusted immediately, and the page is re-rendered.

[0075] In this embodiment, by dynamically calculating the scaling ratio, accurately obtaining the component layout information, and real-time adjusting the page layout and component configuration, a method for implementing an instant adaptive configuration system is provided.

[0076] In another embodiment, as Figure 4 shown, an instant adaptive configuration system is provided. This embodiment is mainly applied to the scenario when the user enables the editing mode, allowing the user to dynamically drag and scale components through the editing mode, and during the dragging and scaling process, the data is updated in real time. The specific steps are as follows:

[0077] Step S302, to implement the dragging and scaling functions of components, the system needs to detect the user's operations, including the dragging behavior and scaling behavior of components.

[0078] Specifically, the detection of the dragging behavior and scaling behavior mainly includes two types of event listeners: the drag event listener and the scale event listener. The working principle of the listener is as Figure 5 shown.

[0079] Drag event listener: This listener is used to capture the user's dragging operation on the component, mainly by monitoring three events of the mouse: onStart (dragging starts), onDrag (dragging in progress), and onStop (dragging ends). These events help the system detect the user's dragging behavior and record the starting position of the drag and the moving distance.

[0080] Scale event listener: This listener is used to capture the user's operation of adjusting the size of the component, mainly by monitoring three events: onResizeStart (size adjustment starts), onResize (size adjustment in progress), and onResizeStop (size adjustment ends). These events help the system detect the user's scaling behavior and record the starting point of the scale and the change amount.

[0081] Step S303, during the process of the user dragging or scaling, it is necessary to record the initial state of the component and the distance the mouse moves to achieve accurate update of the component position and size.

[0082] Specifically, when the user starts dragging or resizing a component, the system first records the initial state of the component, including the initial abscissa (initialX) and ordinate (initialY), to determine the starting position of the component in the container. At the same time, the system also records the initial width (initialW) and height (initialH) of the component to determine the size information of the component in the container.

[0083] Specifically, during the user's dragging operation, the system calculates the displacement distance of the mouse in real time. Specifically, when the user starts dragging, the system records the initial position of the mouse (startX, startY); during the dragging process, it continuously tracks the current position of the mouse (currentX, currentY). By calculating the difference between the current position and the initial position, the horizontal dragging distance (deltaX) and vertical dragging distance (deltaY) can be obtained. The specific calculation formulas are as follows:

[0084] deltaX: The horizontal distance dragged by the user, and the calculation formula is deltaX = currentX - startX, which represents the number of pixels the mouse moves in the horizontal direction.

[0085] deltaY: The vertical distance dragged by the user, and the calculation formula is deltaY = currentY - startY, which represents the number of pixels the mouse moves in the vertical direction.

[0086] Through the above calculations, the system can accurately obtain the actual moving distance of the mouse during the dragging process.

[0087] Step S304, after the component dragging or resizing operation is completed, the system needs to perform boundary control on the position and size of the component to ensure that the component does not exceed the range of the layout area.

[0088] Specifically, first, the system checks whether the right side of the component is out of bounds. If the right side position of the component exceeds the total number of columns in the layout, that is, x + w > the number of layout columns, then the system adjusts the abscissa (x) of the component to the number of layout columns minus the width (w) of the component, that is, x = the number of layout columns - w, to ensure that the right boundary of the component aligns with the layout area. Secondly, the system checks whether the left side of the component is out of bounds. If the left side position of the component is less than 0, that is, x < 0, then the system sets the abscissa (x) of the component to 0 and adjusts the width (w) of the component to the total number of columns in the layout, that is, w = the number of layout columns, to ensure that the component fully adapts to the width of the layout area and does not exceed the left boundary.

[0089] Step S305, after the component dragging or resizing operation is completed, the system needs to perform collision detection to ensure that there is no overlap between components.

[0090] Specifically, first, the system checks whether there is any overlap between the boundaries of any two components in the horizontal or vertical direction. If there is no overlap between the two components in either direction, it is determined that there is no collision between the two components, and the system does not need to perform further processing. Secondly, only when the two components overlap both horizontally and vertically does the system consider that a collision has occurred. When a collision is detected, the system will automatically adjust the position of the component being dragged or scaled.

[0091] Specifically, if the component being dragged or scaled collides with the component above it, the system adjusts its vertical coordinate (y) to the next row below the last row occupied by the upper component and fixes it below the upper component.

[0092] Specifically, if the component being dragged or scaled collides with the component on the left, the system adjusts its horizontal coordinate (x) to the next column to the right of the last column occupied by the left component and fixes it to the right of the left component.

[0093] Specifically, if the component being dragged or scaled collides with the component below it, the system adjusts its vertical coordinate (y) to the row above the first row occupied by the lower component and fixes it above the lower component.

[0094] Specifically, if the component being dragged or scaled collides with the component on the right, the system adjusts its horizontal coordinate (x) to the column to the left of the first column occupied by the right component and fixes it to the left of the right component.

[0095] Step S306, after completing the dragging or scaling operation of the component and passing the boundary detection and collision detection, the system needs to update the actual position and size of the component according to the user's operation, and finally record the adjusted data in the browser cache.

[0096] Specifically, if it is detected that this is a dragging operation, then:

[0097] The horizontal coordinate after dragging newX = initialX + (deltaX / (100px * scale))

[0098] The vertical coordinate after dragging newY = initialY + (deltaY / (100px * scale))

[0099] Specifically, if it is detected that this is a scaling operation, then:

[0100] The width after scaling newW = initialW + (deltaX / (100px * scale))

[0101] The height after scaling newH = initialH + (deltaY / (100px * scale))

[0102] During the editing process from step S302 to step S306, the component continuously communicates with the data interface module, and the acquisition and presentation of data will not be interrupted due to editing operations. While the component is being dragged, scaled, or its position and size are adjusted, it can still receive and display the latest data in real time, ensuring the visibility of data during the editing process for the user.

[0103] In this embodiment, by introducing an editing mode, an instant adaptive configuration system is provided, which is used to implement dynamic dragging and scaling operations of components, accurately update the position and size of components, and can also effectively save and synchronize the editing content of users, improving the flexibility of configuration page editing and the user experience.

[0104] In one embodiment, a computer device is provided. The computer device can be a terminal, and its internal structural diagram can be as Figure 6 shown. The computer device includes a processor, a memory, a communication interface, a display screen, and an input device connected through a system bus. Among them, the processor of the computer device is used to provide computing and control capabilities. The memory of the computer device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The communication interface of the computer device is used to communicate with an external terminal in a wired or wireless manner. The wireless manner can be achieved through WIFI, a mobile cellular network, NFC (Near Field Communication), or other technologies. When the computer program is executed by the processor, it is used to implement a configuration image processing method. The display screen of the computer device can be a liquid crystal display screen or an electronic ink display screen. The input device of the computer device can be a touch layer covered on the display screen, or a button, a trackball, or a touchpad provided on the housing of the computer device, or an external keyboard, a touchpad, or a mouse, etc. Those skilled in the art can understand Figure 6 the structure shown in the figure is only a block diagram of some structures related to the solution of the present invention, and does not constitute a limitation on the computer device to which the solution of the present invention is applied. A specific computer device may include more or fewer components than those shown in the figure, or combine some components, or have a different component layout.

[0105] The above description is only a preferred embodiment of the present invention and does not impose any form of limitation on the present invention. Any person skilled in the art can make many possible changes and modifications to the technical solution of the present invention by using the methods and technical contents disclosed above without departing from the scope of the technical solution of the present invention, or modify it into an equivalent embodiment with equivalent changes. Therefore, all equivalent changes made according to the shape, structure, and principle of the present invention without departing from the content of the technical solution of the present invention should be covered within the protection scope of the present invention.

Claims

1. A real-time adaptive configuration system, characterized in that: Includes display module, configuration module, data interface module and editing module; The display module uses HTML5, CSS3, and JavaScript to build adaptive display web pages, and adopts a grid layout method to make the pages and components instantly adaptive to screens of different resolutions; The configuration module includes page configuration and component configuration, wherein the page configuration manages the page style and page layout of the configuration, and the component configuration manages the style of the component itself and the unique configuration of each component; The data interface module is used for data acquisition, conversion and management, realizes dynamic binding between components in the configuration and external data sources, and ensures instant update of component display data; The editing module is used to switch the editing state of the system. In the editing state, by selecting a component in the configuration component library, the component is instantly added to the configuration display page, and the component will automatically apply the appropriate size and position.

2. A real-time adaptive configuration system as claimed in claim 1, characterized in that: The display module is used to integrate and display various components, ensuring that the components are displayed without stretching or deformation on screens with different resolutions and sizes, and adapting in real time as the window size is adjusted, and is achieved through a grid layout method.

3. A real-time adaptive configuration system as claimed in claim 2, characterized in that: The grid layout method includes: dividing the display area into grid units of fixed size, and dynamically calculating the scaling ratio according to the current window size to ensure the consistency of the layout of each component in different interfaces; the scaling ratio is obtained by comparing the aspect ratio of the screen with the original aspect ratio formulated in the page design stage; when the aspect ratio of the screen is smaller than the aspect ratio of the design draft, the scaling ratio is the ratio of the screen width to the width of the design draft; otherwise, the scaling ratio is the ratio of the screen height to the height of the design draft, and the calculated scaling ratio is immediately applied to the global style.

4. The instant adaptive configuration system according to claim 1, characterized in that: The configuration module includes page configuration and component configuration; the page configuration is used to adjust the overall style of the page in real time, including the large screen title, title background, title color, title size and page background; the component configuration is used to adjust the style of each component in real time, including component title text, component title background, component title color, component border, component background and unique configurations provided according to different component types.

5. The instant adaptive configuration system according to claim 1, characterized in that: The editing module is used to switch the editing mode. When switched to the editing mode, the user is allowed to freely add or delete components, drag components, scale components, and modify component configurations and page configurations. When the edit is saved, all modified configurations will be synchronized to the server in real time; in the editing mode, the real-time acquisition and rendering of data on the page are maintained.

6. A real-time adaptive configuration system as claimed in claim 5, characterized in that: The editing module includes a drag event listener and a zoom event listener. In the editing mode, whenever the user drags or zooms a component, the listener captures the corresponding behavior and applies the grid layout method, while recording the initial size and position of the component and the distance the mouse moves. On this basis, the system performs out-of-bounds detection and collision detection: if the component goes out of the layout range, the system adjusts its position and size; if the component collides with other components, the position is adjusted according to the collision direction to ensure that there is no overlap between the components; if the component neither crosses the boundary nor collides, the position and size of the component are updated in real time according to the mouse movement distance.

7. The instant adaptive configuration system according to claim 1, characterized in that: The data interface module includes three parts: data acquisition, data conversion and default data configuration; the data acquisition part supports three communication methods: MQTT, HTTP and WebSocket, and flexibly configures interface parameters and calling frequency to achieve efficient data interaction; the data conversion part allows users to perform secondary processing on the returned JSON data through custom scripts to ensure that the data transmitted to the component meets the display requirements; the default data configuration part ensures normal display when the interface is not bound, thereby improving the flexibility of the module.

8. An application device of a real-time adaptive configuration system, characterized in that: The invention comprises a memory and a processor, wherein the memory stores a computer program which is loaded and executed by the processor to implement the instant adaptive configuration system according to any one of claims 1 to 7.

Images