SVG-based graphic component packaging and dynamic configuration method

Abstract

The invention relates to an SVG (scalable vector graphics)-based graphic component packaging and dynamic configuration method, which comprises the following steps of: classifying each graphic element of an SVG and setting an operation label which comprises a class name; configuring a dynamic effect of each graphic element of the SVG according to the class name, wherein the dynamic effect comprises configuration of a motion track type, a motion parameter and a data color change threshold value; motion track types comprise peripheral surrounding, overall rotation, smooth translation and twisting and breathing type flickering. According to the method, the dynamic effect configuration process of the SVG graph can be simplified, the workload of manual configuration of a user is reduced, and the learning cost is reduced; the real-time performance and expressive force of the dynamic effect of the complex path are realized, so that the SVG graph can reflect the real-time state of the industrial equipment more accurately; seamless joint and real-time synchronization with industrial equipment data are realized, and the accuracy and timeliness of the data are ensured.

Description

Technical Field

[0001] This application relates to the field of graphic component encapsulation and dynamic configuration. Specifically, it relates to a method for encapsulating and dynamically configuring graphic components based on SVG. Background Art

[0002] In the field of industrial Internet of Things, SVG (Scalable Vector Graphics) as an efficient and flexible graphic format is widely used in Web-based visual displays. With its good scalability, clear graphic quality, and powerful interaction capabilities, SVG has become an important tool for realizing industrial equipment data visualization and building digital twin models.

[0003] Currently, although SVG has been widely used in Web-based data visualization, there are still significant problems in dynamic effect configuration. Specifically, users need to manually configure a large number of parameters to achieve dynamic effects such as rotation, translation, and color change of graphics. This process is not only cumbersome and time-consuming but also error-prone. In addition, since the realization of dynamic effects of SVG graphics depends on complex parameter configuration, for non-professional users, the learning cost is relatively high and it is difficult to get started quickly. More critically, there are deficiencies in the existing technology in terms of real-time synchronization between dynamic effects and industrial equipment data; when the device status data changes, it is often necessary to manually or through complex logic to update the status of SVG graphics, which not only reduces the system response speed but also increases the maintenance cost. Summary of the Invention

[0004] To overcome at least one deficiency in the prior art, this application provides a method for encapsulating and dynamically configuring graphic components based on SVG.

[0005] In a first aspect, a method for encapsulating and dynamically configuring graphic components based on SVG is provided, including:

[0006] Classify each graphic element of SVG and set operation tags, where the operation tags include class names;

[0007] Configure the dynamic effects of each graphic element of SVG according to the class names, including configuring the type of motion trajectory, motion parameters, and data color change thresholds; the type of motion trajectory includes peripheral circumvolution, overall rotation, smooth translation and torsion, and breathing flash;

[0008] Parse the SVG file uploaded by the user to obtain the operation tags inside the SVG file, and obtain the class names in the operation tags; execute the dynamic effects of the graphic elements corresponding to the class names according to the class names in the operation tags.

[0009] In one embodiment, if the configured motion trajectory type is peripheral circumferential, the dynamic effect configuration process includes:

[0010] Obtain the graphic element whose class name represents peripheral circumferential, and determine the total path length of the graphic element;

[0011] Define the animation function animate and call it in a loop to achieve the loop playback of the path circumferential animation of the graphic element; the animation function animate realizes the gradual display of the path by initializing the dotted line offset, the length of each dotted line segment, and the drawing speed, and gradually reducing the value of the dotted line offset; the initial value of the dotted line offset is the total path length of the graphic element.

[0012] In one embodiment, if the configured motion trajectory type is overall rotation, the dynamic effect configuration process includes:

[0013] Obtain the graphic element whose class name represents overall rotation;

[0014] Realize the overall rotation of the graphic element through the origin property and rotate property of CSS's transform or the Matrix transformation of JavaScript.

[0015] In one embodiment, if the configured motion trajectory type is smooth translation and twisting, the dynamic effect configuration process includes:

[0016] Obtain the graphic element whose class name represents smooth translation and twisting, and determine the total path length of the graphic element;

[0017] Initialize the current position, moving direction, moving speed, twisting factor, and twisting speed of the graphic on the path;

[0018] Define the position update function to realize the movement and twisting of the image along the path; the implementation process of the position update function is as follows:

[0019] Update the current position of the graphic on the path according to the moving speed and moving direction;

[0020] Judge whether the current position reaches the end point of the path. If so, change the moving direction;

[0021] Set the coordinates of the current position as the center point coordinates of the graphic, so that the graphic can move along the path;

[0022] Update the twisting factor according to the moving direction and twisting speed, and the graphic rotates around the center point coordinates according to the twisting factor to achieve the visual effect of twisting.

[0023] In one embodiment, if the configured motion trajectory type is breathing flash, the dynamic effect configuration process includes:

[0024] Obtain the graphic element whose class name represents breathing - style blinking;

[0025] Based on the @keyframes animation in CSS and the change of the opacity property, implement the blinking effect of the graphic element; control the blinking frequency of the graphic element by adjusting the duration property.

[0026] In one embodiment, the method further includes:

[0027] Obtain the data in the database in real - time;

[0028] Modify the relevant attributes of the corresponding SVG graphic element according to the data to achieve synchronous changes in the dynamic effect.

[0029] In a second aspect, a computer - readable storage medium is provided. The computer - readable storage medium stores a computer program, and when the computer program is executed by a processor, it realizes the above - mentioned method for encapsulating and dynamically configuring SVG - based graphic components.

[0030] In a third aspect, a computer program product is provided, including a computer program / instructions. When the computer program / instructions are executed by a processor, it realizes the above - mentioned method for encapsulating and dynamically configuring SVG - based graphic components.

[0031] Compared with the prior art, the present application has the following beneficial effects: By simplifying the configuration process, improving the configuration efficiency and flexibility of the dynamic effect, and realizing real - time synchronization with industrial equipment data, the present application provides a user - friendly, intuitive and easy - to - operate industrial data visualization solution for users. The present application can simplify the dynamic effect configuration process of SVG graphics, reduce the workload of manual configuration by users, and lower the learning cost; realize the real - time performance and expressiveness of the dynamic effect of complex paths, so that SVG graphics can more accurately reflect the real - time state of industrial equipment; realize seamless docking and real - time synchronization with industrial equipment data to ensure the accuracy and timeliness of data. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] The present application can be better understood by referring to the description given below in conjunction with the accompanying drawings. The drawings, together with the following detailed description, are included in this specification and form a part of this specification. In the drawings:

[0033] Figure 1 A flowchart showing the method for encapsulating and dynamically configuring SVG - based graphic components is shown;

[0034] Figure 2 A path schematic diagram of the graphic element is shown. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0035] In the following, exemplary embodiments of the present application will be described in conjunction with the accompanying drawings. For clarity and conciseness, not all features of the actual embodiments are described in the specification. However, it should be understood that many embodiment-specific decisions may be made during the development of any such actual embodiment to achieve the developer's specific goals, and these decisions may vary with different embodiments.

[0036] Here, it should also be noted that, in order to avoid obscuring the present application with unnecessary details, only the device structures closely related to the solution according to the present application are shown in the drawings, while other details less related to the present application are omitted.

[0037] It should be understood that the present application is not limited to the described embodiments due to the following description with reference to the drawings. In this document, where feasible, embodiments can be combined with each other, features can be replaced or borrowed between different embodiments, and one or more features can be omitted in one embodiment.

[0038] An embodiment of the present application provides a method for encapsulating and dynamically configuring SVG-based graphic components. Figure 1 The flowchart of the method for encapsulating and dynamically configuring SVG-based graphic components is shown. Refer to Figure 1 , the method includes:

[0039] Step S1, classify each graphic element of SVG and set operation tags, and the operation tags include the class name "class".

[0040] For example, "class = \"surround\"" represents a graphic element that can perform external surrounding, "class = \"rotation\"" represents a graphic element that can perform overall rotation, and "class = \"changeColor\"" represents a graphic element in the color-changing area. The operation tags exist in a standardized form in the SVG file, facilitating subsequent program recognition and processing.

[0041] The SVG file is in <svg>Label starts, containing multiple graphic elements, such as <path> 、 <circle>etc. Each graphic element can define its shape and style by setting attributes (such as d, fill, etc.). By adding a specific class name to the graphic element, it is convenient to select and operate on these elements later through JavaScript or CSS (Cascading Style Sheets).

[0042] Step S2, configure the dynamic effects of each graphic element in the SVG according to the class name, including configuring the type of motion trajectory, motion parameters, and data color change threshold; the types of motion trajectories include peripheral circumvolution, overall rotation, smooth translation and twisting, breathing flash, etc. Here, the motion parameters can be, for example, motion speed, motion direction, etc.

[0043] Step S3, parse the SVG file uploaded by the user to obtain the operation tags inside the SVG file, and obtain the class name in the operation tags; execute the dynamic effects of the graphic elements corresponding to the class name according to the class name in the operation tags.

[0044] Here, the user uploads the SVG file to the server, and the server uses an XML parser to parse the SVG file to obtain the operation tags inside the SVG file, and obtain the class name in the operation tags; execute the dynamic effects of the graphic elements corresponding to the class name according to the class name in the operation tags.

[0045] Through the intelligent parsing and animation generation steps, the user does not need to pay attention to the complexity of the path or the implementation details. Just simply specify the expected effect in the configuration interface to achieve precise control and smooth playback of the dynamic effects of complex paths in the SVG graphics.

[0046] Specifically, if the configured type of motion trajectory is peripheral circumvolution, the dynamic effect configuration process includes:

[0047] First, use the document.querySelector method to obtain the graphic element whose class name represents peripheral circumvolution, and use the getTotalLength method to determine the total length of the path of the graphic element. Among them, the path of the graphic element refers to the path that surrounds the graphic element for one week.

[0048] Here, in previous graphic designs, the total path length might be directly estimated, and using this method can ensure that parameters such as the moving distance and speed of the animation closely match the actual path length. When dealing with animations of complex mechanical structures, the speed and duration of the animation can also be precisely planned according to the total path lengths of different components, making the animation more natural and smooth. Meanwhile, combined with the real-time obtained total path length, dynamic planning and adaptive adjustment can be carried out. In responsive design, when the size or proportion of the SVG graphic changes, the total path length is recalculated through the getTotalLength method, and then the animation parameters are adjusted to ensure that the animation effect is natural and smooth on screens of different sizes.

[0049] Then, define the animation function animate and call it in a loop to achieve the loop playback of the path-wrapping animation of the graphic element; Figure 2 The path schematic diagram of the graphic element is shown. The animation function animate gradually shows the path by initializing the dashed line offset dashOffset, the length of each dashed line segment dashArray, and the drawing speed speed, and gradually reducing the value of the dashed line offset; the initial value of the dashed line offset is the total path length of the graphic element. When the dashed line offset dashOffset is reduced to 0 or below, reset it to the total path length to achieve the loop playback of the animation.

[0050] Here, the traditional dynamic effects of SVG graphics are often limited to relatively common ways such as overall translation, scaling, or rotation. By using the dashed line offset to simulate dynamic effects, partition effect display can be achieved, precisely controlling specific parts in the graphic, bringing a brand-new visual presentation method to SVG graphics. At the same time, this method has good scalability and customizability. By adjusting attributes such as the style, length, and interval of the dashed line, as well as changing the change speed and method of the dashed line offset, various different dynamic effects can be achieved.

[0051] Specifically, if the configured motion trajectory type is overall rotation, the dynamic effect configuration process includes:

[0052] First, obtain the graphic element whose class name represents overall rotation;

[0053] Achieve the overall rotation of the graphic element through the origin property and rotate property of CSS transform or the Matrix transformation of JavaScript.

[0054] Specifically, if the configured motion trajectory type is smooth translation and twisting, the dynamic effect configuration process includes:

[0055] Obtain the graphic element whose class name represents smooth translation and twisting, and determine the total path length of the graphic element;

[0056] Initialize the current position, moving direction, moving speed, twisting factor, and twisting speed of the graphic on the path; here, the initialized moving speed can be 0.5, and this value is used in conjunction with the direction variable to update the position of the graphic on the path. The larger the value, the faster the moving speed. Initialize the twisting factor to 0. This variable is used to control the twisting degree of the circle and will be continuously updated according to the set rules as the graphic moves. Set the twisting speed to 0.1, which is used to determine the speed of twisting change and is used in conjunction with the direction variable and others to update the value of the twisting factor.

[0057] Define the position update function updatePosition to implement the movement and twisting of the image along the path; the implementation process of the position update function is as follows:

[0058] Update the current position of the graphic on the path according to the moving speed and moving direction, that is, the updated current position is equal to the original position plus the value of the moving direction multiplied by the moving speed. In this way, the graphic will move along the path at the set speed and direction.

[0059] Judge whether the current position has reached the end of the path. If so, change the moving direction, that is, if the current position is greater than or equal to the total length of the path, or less than or equal to 0, it means that the graphic has reached the end of the path. By changing the moving direction, the graphic can move back and forth on the path, that is, change the direction and go back after reaching the end.

[0060] Set the coordinates of the current position as the center point coordinates of the graphic so that the graphic can move along the path;

[0061] Update the twisting factor according to the moving direction and twisting speed. The graphic rotates around the center point coordinates according to the twisting factor to achieve the visual effect of twisting. That is, the twisting factor is equal to the original twisting factor value plus the value of the moving direction multiplied by the twisting speed. The twisting factor will change continuously under the influence of the moving direction of the graphic and the twisting speed. Each time it is updated, it will add the value calculated according to the moving direction and twisting speed to the original value. Then, make the graphic rotate around its own center point to produce the visual effect of twisting. By setting the transform attribute to rotate(${twistFactor}), that is, circle.setAttribute('transform',rotate(${twistFactor})), the graphic rotates around its own center to produce the visual effect of twisting.

[0062] Specifically, if the configured motion trajectory type is breathing and flashing, the dynamic effect configuration process includes:

[0063] Obtain the graphic element whose class name represents breathing and flashing;

[0064] Based on the @keyframes animation in CSS and the change of the opacity property, the blinking effect of graphic elements is achieved; the blinking frequency of graphic elements is controlled by adjusting the duration property.

[0065] Furthermore, the method for encapsulating and dynamically configuring SVG-based graphic components further includes:

[0066] Obtaining data in the database in real time; modifying relevant properties of the corresponding SVG graphic elements according to the data to achieve synchronous changes in dynamic effects.

[0067] In this embodiment, it aims to support the real-time update of industrial equipment data and the precise synchronization of dynamic effects. To achieve this goal, the system designs a highly flexible data binding mechanism and is widely compatible with a variety of mainstream database systems.

[0068] If the obtained data is related to the graphic elements with the class name of the color-changing area, it is judged according to the threshold set by the user through the configuration interface or the data color-changing threshold configured in step 2. Once the data value reaches or exceeds the set threshold, the system will immediately trigger the color change logic and change its display color by modifying the fill or stroke property of the SVG element, providing intuitive data visualization feedback for the user. This process not only realizes the visualization of data but also significantly enhances the interactivity between the user and the page content.

[0069] The system integrates compatibility with a variety of mainstream database systems, including but not limited to relational databases such as MySQL and PostgreSQL, and NoSQL databases such as MongoDB. This extensive compatibility ensures that the system can flexibly adapt to the data storage requirements in different application scenarios. Users can easily specify the binding relationship between SVG graphic elements and specific tables and fields in the database through a simple and intuitive configuration interface. The system supports complex data query statements (such as SQL queries), allowing users to customize data extraction logic according to actual needs to ensure the accuracy of the extracted data.

[0070] The system monitors the changes of the bound data source in real time. Once a data update is detected (such as the change of device sensor values), it will immediately trigger the data processing process. This process does not require polling, significantly reducing the consumption of system resources and improving the efficiency of data processing. After the data change is captured, the system intelligently judges and applies the corresponding visual feedback according to the preset data threshold and dynamic effect mapping rules. For example, when the device temperature exceeds the preset safety threshold, the corresponding part in the SVG graphic will change color, increase the rotation speed or trigger a blinking effect to intuitively display the abnormal state.

[0071] This application realizes the efficient, flexible and cross-platform dynamic effect display of SVG graphics. Through componentization and tagging, dynamic effect configuration, intelligent parsing and animation generation, as well as database and dynamic data binding, it can precisely control the dynamics of SVG graphics, smoothly display on various devices, improve the development and interaction experience, achieve real-time synchronization with industrial device data, and provide users with an efficient, intuitive and easy-to-use industrial data visualization solution.

[0072] Precise positioning and operation can be achieved through SVG componentization and tagging, which is convenient for subsequent program processing, improves the accuracy and flexibility of local control, promotes code reuse and maintenance at the same time, and makes the code structure clear.

[0073] Using the path length to achieve the peripheral surrounding effect can ensure the precise matching of animation parameters and path length, making the animation natural and smooth. The animation can be planned according to the part path, can also be dynamically adjusted to adapt to screen changes, and diverse effects can be achieved by adjusting the dotted line attributes, with strong scalability.

[0074] In order to present vivid composite motion, a twisting effect is creatively added on the basis of translation, and the movement and twisting of the graph are precisely controlled based on the path, which is applicable to the graph movement under complex paths.

[0075] The embodiment of this application provides a computer-readable storage medium. The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, it is used to implement the above-mentioned method for encapsulating and dynamically configuring SVG-based graphic components.

[0076] The embodiment of this application provides a computer program product, including a computer program / instructions. When the computer program / instructions are executed by a processor, it is used to implement the above-mentioned method for encapsulating and dynamically configuring SVG-based graphic components.

[0077] Compared with the prior art, this application also has the following beneficial effects:

[0078] 1. Improve user experience: By simplifying the dynamic effect configuration process of SVG graphics, users can quickly achieve dynamic effects such as peripheral surrounding, rotation, translation, and color change of graphics without having to deeply understand complex parameter settings, greatly reducing the learning cost and usage threshold, and improving the user experience.

[0079] 2. Enhance the real-time performance and expressiveness of dynamic effects: Combine industrial device styles to achieve dynamic effects of complex paths, and combine real-time synchronization of industrial device data to ensure that the graphics can accurately reflect the real-time state changes of the devices. This instant feedback mechanism not only improves the response speed of the system, but also enhances the expressiveness of dynamic effects, making data visualization more vivid and intuitive.

[0080] 3. Improve work efficiency and maintenance convenience: Through automated parameter configuration and dynamic effect generation, the need for manual intervention is reduced, the error rate is lowered, thus improving work efficiency. At the same time, the unified configuration interface and standards promote data exchange and sharing between different systems, making system maintenance and upgrade more convenient.

[0081] 4. Enhance the scalability and interoperability of the system: The scalability of the system is considered. By constructing SVG graphics and dynamic effects in a modular and componentized manner, the system can easily adapt to different application scenarios and changing requirements.

[0082] 5. Promote the popularization and application of industrial data visualization: The technical threshold of industrial data visualization is lowered, enabling more enterprises and individuals to easily achieve data visualization, thus promoting the popularization and application of industrial data visualization, which helps to enhance the digital transformation of enterprises.

[0083] As described above, these are only various implementation manners of the present application. However, the protection scope of the present application is not limited thereto. Any person skilled in the art within the technical scope disclosed by the present application can easily think of changes or substitutions, which should all be covered within the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.< / circle> < / path> < / svg>

Claims

1. A method for encapsulating and dynamically configuring graphic components based on SVG, characterized in that: include: Classify each graphic element of SVG and set an operation tag, wherein the operation tag includes a class name; According to the class name, the dynamic effects of each graphic element of the SVG are configured, including configuring the motion track type, motion parameters and data color change threshold; the motion track types include peripheral surround, overall rotation, smooth translation and twisting, and breathing flashing; The SVG file uploaded by the user is parsed to obtain the operation tag inside the SVG file, and the class name in the operation tag is obtained; and the dynamic effect of the graphic element corresponding to the class name is executed according to the class name in the operation tag.

2. The method according to claim 1, characterized in that If the configured motion track type is peripheral surround, the dynamic effect configuration process includes: Obtaining a class name representing a peripherally surrounding graphic element, and determining a total path length of the graphic element; An animation function animate is defined and called repeatedly to realize the loop playback of the path surround animation of the graphic element; the animation function animate gradually displays the path by initializing the dotted line offset, the length of each dotted line segment and the drawing speed, and gradually reducing the value of the dotted line offset; the initial value of the dotted line offset is the total length of the path of the graphic element.

3. The method according to claim 1, characterized in that If the configured motion track type is overall rotation, the dynamic effect configuration process includes: Get the class name of the graphic element representing the overall rotation; The overall rotation of the graphic element can be achieved through the origin property and rotate property of CSS transform or the Matrix transformation of JavaScript.

4. The method according to claim 1, characterized in that If the configured motion track type is smooth translation and twisting, the dynamic effect configuration process includes: Obtaining a graphic element whose class name represents smooth translation and twisting, and determining a total path length of the graphic element; Initialize the current position, moving direction, moving speed, twist factor, and twist speed of the graphic on the path; Define a position update function to achieve image movement and twisting along the path; the position update function implementation process is as follows: Update the current position of the graphic on the path according to the moving speed and moving direction; Determine whether the current position reaches the end of the path. If so, change the moving direction; Set the coordinates of the current position to the coordinates of the center point of the graphic so that the graphic can move along the path; The twist factor is updated according to the moving direction and the twist speed, and the graphic is rotated around the center point coordinates according to the twist factor to achieve a twisting visual effect.

5. The method according to claim 1, characterized in that If the configured motion track type is breathing flashing, the dynamic effect configuration process includes: Get the class name of the breathing flashing graphic element; Based on CSS @keyframes animation and changes in the opacity attribute, the flickering effect of graphic elements is achieved; the flickering frequency of graphic elements is controlled by adjusting the duration attribute.

6. The method according to claim 1, characterized in that The method further comprises: Get data from the database in real time; The relevant attributes of the corresponding SVG graphic elements are modified according to the data to achieve synchronous changes in dynamic effects.

7. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method for encapsulating and dynamically configuring graphic components based on SVG as described in any one of claims 1 to 6 is implemented.

8. A computer program product, characterized in that It includes computer programs / instructions, which, when executed by a processor, implement the method for encapsulating and dynamically configuring graphic components based on SVG as described in any one of claims 1 to 6.

Images