CN111324845A - Method and system for constructing dial plate object - Google Patents
Method and system for constructing dial plate object Download PDFInfo
- Publication number
- CN111324845A CN111324845A CN202010124678.6A CN202010124678A CN111324845A CN 111324845 A CN111324845 A CN 111324845A CN 202010124678 A CN202010124678 A CN 202010124678A CN 111324845 A CN111324845 A CN 111324845A
- Authority
- CN
- China
- Prior art keywords
- pointer
- value
- attribute
- preset
- dial plate
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/986—Document structures and storage, e.g. HTML extensions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a method and a system for constructing a dial plate object, wherein the method comprises the following steps: updating the value of a preset pointer control according to a preset association principle, wherein the preset pointer control at least comprises the following steps: the dial plate element, the dial plate element attribute, the pointer element attribute and the pointer element CSS attribute; updating each pointer control value of the current pointer according to the preset event attribute of the dial plate element, and determining the logic change among the pointers; and constructing a target dial plate object according to the logic change among the pointers and the pointer control. The invention updates the control values according to the attributes of the preset events by adding new control elements and corresponding attributes, determines the logical change relationship among the pointers, and then constructs the target dial plate object to realize the extensible complex control support.
Description
Technical Field
The invention relates to the technical field of computer information processing, in particular to a method and a system for constructing a dial plate object.
Background
Currently, Hypertext markup Language (HTML) pages are mainly used for document contents of mixed text and pictures, and related specifications of Cascading Style Sheets (CSSs) for layout and rendering of web pages, wherein the HTML pages are mainly based on rectangular regions, such as attributes (width and height) for controlling the width and height thereof, and attributes for controlling the layout of HTML elements. With the development of HTML5 and CSS3 technologies, many applications (apps) running on PCs and smartphones begin to use a Web technology to present content to a user and serve as interfaces for human-computer interaction, but when a Web front-end technology is used for developing client applications, a plurality of tab elements are needed based on a rectangular block CSS style sheet, and each tab element corresponds to a plurality of CSS attributes, which increases overhead of system memory, even causes a pause and jitter on a screen, and cannot simply and effectively provide effective support for various complex controls, and the execution efficiency is low and the memory usage is large.
Disclosure of Invention
In view of this, embodiments of the present invention provide a method and a system for constructing a dial plate object, so as to solve the technical problems that the prior art cannot provide effective support for various complex controls, and is low in execution efficiency and large in memory occupation.
In order to achieve the purpose, the invention provides the following technical scheme:
in a first aspect, an embodiment of the present invention provides a method for constructing a dial plate object, including the following steps: updating the value of a preset pointer control according to a preset association principle, wherein the preset pointer control at least comprises: the dial plate element, the dial plate element attribute, the pointer element attribute and the pointer element CSS attribute; updating each pointer control value of the current pointer according to the preset event attribute of the dial plate element, and determining the logic change between each pointer; and constructing a target dial plate object according to the logic change among the pointers and the pointer control.
In an embodiment, when the initial value of the pointer element CSS attribute is not set, a pointer element attribute value is defined as a corresponding pointer element CSS attribute value; and updating the pointer control value according to the pointer control value and the pointer element CSS attribute value.
In one embodiment, a response change of a pointer control value is monitored, and response request data is obtained when the pointer control value changes; obtaining a response result according to the pointer control value corresponding to the response request data, each pointer control value of the current pointer and a response function corresponding to the preset event attribute of the dial plate element; and updating the control value of each pointer according to the response result, and determining the logic change between the pointers.
In one embodiment, according to the logical change between each pointer and the pointer control, the pointer control value is identified and analyzed to obtain a corresponding analysis control value; acquiring member variables of preset rendering nodes; according to a preset function, configuring each analysis control value into each member variable to obtain a current member variable; and according to the current member variables and the preset corresponding functions, the pointer control is laid out and rendered to obtain a target dial plate object.
In one embodiment, the attribute name and the tag name are saved to a corresponding file; generating a corresponding hash value according to the label name and the attribute name of the pointer control; acquiring member functions of each preset class according to the hash value; and analyzing the pointer control values according to the member functions corresponding to the pointer controls to obtain corresponding analysis control values.
In one embodiment, the method comprises the steps of obtaining logical coordinates of dial plate elements, converting the logical coordinates of the dial plate elements into equipment coordinates according to attribute values of the dial plate elements, preset scaling ratios and the logical coordinates of the dial plate elements, and determining canvas size and coordinates of a rotation center point; determining the rotation direction of the pointer according to a preset rotation direction judgment rule; determining a pointer angle and a pointer endpoint coordinate according to the pointer rotation direction and the CSS attribute values of all pointer elements; and drawing a pointer according to a preset drawing function, the coordinates of the central point of the dial plate element, the pointer angle and the coordinates of the pointer endpoint, and performing layout and rendering on a pointer control to obtain the target dial plate object.
In one embodiment, an initial rotation angle value and a termination rotation angle value in the pointer element CSS attribute are obtained; when the rotation stopping angle value is larger than the initial rotation angle value, determining the clockwise direction as the pointer rotation direction; and when the terminal rotation angle value is smaller than the initial rotation angle value, determining the anticlockwise direction as the pointer rotation direction.
In one embodiment, a range value corresponding to each rotation angle of the pointer is determined according to a minimum range attribute value and a maximum range attribute value in the pointer element CSS attribute values and a difference value between the initial rotation angle value and the terminal rotation angle value; determining a current value of the pointer according to the acquired actual value of the pointer in the CSS attribute of the pointer element and a preset method; determining the angle of the current pointer according to the current pointer value, the minimum range attribute value, the pointer rotation direction and the range value corresponding to each rotation angle; obtaining the offset of the pointer eye relative to the rotation central point according to the obtained coordinate of the pointer eye and the coordinate of the rotation central point, and determining the coordinate of the pointer tail; and acquiring the minimum value of the width value and the height value of the pointer range area in the pointer element attribute, zooming the pointer tail coordinate of the pointer according to the minimum value and a preset zooming proportion, and determining the pointer endpoint coordinate.
In one embodiment, if the actual value of the pointer is less than the minimum range attribute value, determining the minimum range attribute value as the current value of the pointer; and if the actual value of the pointer is larger than the maximum range attribute value, determining the maximum range attribute value as the current value of the pointer.
In a second aspect, an embodiment of the present invention provides a system for constructing a dial plate object, including an updating module, configured to update a preset pointer control value according to a preset association principle, where the preset pointer control at least includes: the dial plate element, the dial plate element attribute, the pointer element attribute and the pointer element CSS attribute; the logic change determining module is used for updating each pointer control value of the current pointer according to the preset event attribute of the dial plate element and determining the logic change between the pointers; and the target dial plate object constructing module is used for constructing a target dial plate object according to the logic change among the pointers and the pointer control.
In a third aspect, the present invention provides a computer-readable storage medium storing computer instructions, which when executed by a processor implement the method for constructing a dial plate object according to the first aspect of the present invention. To cause at least one processor to perform the method for adaptive control of a plurality of devices of the first aspect of an embodiment of the present invention.
In a fourth aspect, the present invention provides a memory and a processor, where the memory and the processor are communicatively connected to each other, the memory stores computer instructions, and the processor executes the computer instructions, thereby executing the method for constructing a dial plate object according to the first aspect of the present invention.
The technical scheme of the invention has the following advantages:
1. the method and the system for constructing the dial plate object provided by the invention have the advantages that the new control elements and the corresponding attributes are added, the control values are updated according to the preset event attributes, the logical change relation between the pointers is determined, then the target dial plate object is constructed, the extensible complex control support is realized, the extensible complex control support can be directly embedded into an HTML page and is completely compatible with other HTML elements and CSS attributes, and the method and the system for constructing the dial plate object have the advantages of simple interface, good performance, convenience in extension, good safety and the like.
2. According to the method and the system for constructing the dial plate object, the layout and the rendering of each element are realized through the identification and the analysis of each pointer control, the definition and the application of the pointer control are simplified, the memory occupation of a page is reduced, the interaction performance and the user experience are improved, and the pointer graph is prevented from being formed by using a large number of div elements, so that the memory occupation of the page is reduced, meanwhile, the calculation of a large number of re-layouts when the pointer value changes is avoided, and the performance of the system is improved; the internal processing of the pointer is realized by the user agent, so that better performance and interactive experience can be obtained; by introducing the new CSS attribute, an HTML document author can define the rendering attribute of the pointer control, on one hand, the CSS can be reused, on the other hand, more flexibility is brought to a front-end developer, the workload of the front-end developer for developing scripts is simplified, and the learning difficulty of the front-end developer is reduced.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are some embodiments of the present invention, and other drawings can be obtained by those skilled in the art without creative efforts.
Fig. 1 is a flowchart of a specific example of a method for constructing a dial plate object according to an embodiment of the present invention;
fig. 2 is a flowchart of updating a value of a preset pointer control in a method for constructing a dial plate object according to an embodiment of the present invention;
fig. 3 is a flowchart of determining a logical change between pointers in the method for constructing a dial plate object according to the embodiment of the present invention;
fig. 4 is a flowchart of constructing a target dial object according to the method for constructing a dial object provided in the embodiment of the present invention;
fig. 5 is a flowchart illustrating the identification and analysis of the pointer control value in the method for constructing a dial plate object according to the embodiment of the present invention;
fig. 6 is a flowchart of the method for constructing a dial plate object according to the embodiment of the present invention for laying out and rendering pointer controls;
fig. 7 is a flowchart of determining a pointer rotation direction of a method for constructing a dial plate object according to an embodiment of the present invention;
fig. 8 is a schematic diagram of a system for constructing a dial object according to an embodiment of the present invention;
fig. 9 is a composition diagram of a specific example of an electronic device according to an embodiment of the present invention.
Detailed Description
The technical solutions of the present invention will be described clearly and completely with reference to the accompanying drawings, and it should be understood that the described embodiments are some, but not all embodiments of the present invention. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
In the description of the present invention, it should be noted that the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer", etc., indicate orientations or positional relationships based on the orientations or positional relationships shown in the drawings, and are only for convenience of description and simplicity of description, but do not indicate or imply that the device or element being referred to must have a particular orientation, be constructed and operated in a particular orientation, and thus, should not be construed as limiting the present invention. Furthermore, the terms "first," "second," and "third" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance.
In the description of the present invention, it should be noted that, unless otherwise explicitly specified or limited, the terms "mounted," "connected," and "connected" are to be construed broadly, e.g., as meaning either a fixed connection, a removable connection, or an integral connection; can be mechanically or electrically connected; the two elements may be directly connected or indirectly connected through an intermediate medium, or may be communicated with each other inside the two elements, or may be wirelessly connected or wired connected. The specific meanings of the above terms in the present invention can be understood in specific cases to those skilled in the art.
In addition, the technical features involved in the different embodiments of the present invention described below may be combined with each other as long as they do not conflict with each other.
Example 1
The embodiment of the invention provides a method for constructing a dial plate object, which is applied to various complex dial plates and scenes realized by pointer controls, and as shown in figure 1, the method comprises the following steps:
step S1: updating the value of a preset pointer control according to a preset association principle, wherein the preset pointer control at least comprises the following steps: a dial element, a dial element attribute, a pointer element attribute, and a pointer element CSS attribute.
In the embodiment of the invention, two new elements, namely a dial element pointer and a pointer element high, are defined, wherein the dial element defines that a dial can contain one or more pointers, and the pointer element defines the basic form and the relative behavior of a pointer. The meter element supports the following attributes: a width and a height attribute representing an intrinsic size of the pointer element for defining a rendering canvas size used by the pointer element, and the user agent uses 200 and 150 as default values, respectively, when the HTML document does not define the two attributes. When the attribute value of the enhanced element in the enhanced element is changed, the enhanced element can be directly rendered without re-layout. The hihand element supports the following attribute, min attribute: the minimum value of the measuring range corresponding to the pointer is defined; max attribute: the maximum value of the measuring range corresponding to the pointer is defined; the value attribute: used for defining the current value corresponding to the pointer; width and height attributes: these two attributes represent the intrinsic dimensions of the hihand element, which define the rendering canvas size used by the hihand element, and can also be understood as the width and height of the pointer's swept area over the entire span.
In practical applications, it is very common that a dial plate of various meters contains a plurality of pointers, and then a plurality of hihand elements need to be wrapped together by using a high wrapper, as follows:
from the above description, we can see that the above HTML segment defines a dial, which contains two pointers, respectively: speedometer named speed, the minimum value of the range of the speedometer is 0, the maximum value is 160, the current value is 100, the length of the pointer is 260, and the width is 260; there is also a thermometer named temp, the minimum value of the meter range is-25, the maximum value is 70, the current value is 15, the pointer sweep length is 200, the area of width is 200; when the above pointer control is integrated into a form (form), the user agent can directly integrate the user's current selectable item and automatically submit to the backend server when the point submit button is submitted, without additional Javascript scripting.
In the embodiment of the invention, because the use occasions of the instrument panels are different, certain differences exist among the instrument panels. As a standard control, the universal function of more than 80% is satisfied, and a certain play space is allowed for the end user, so that the following attributes are realized for a hihand element through comparison and abstraction, and certain flexibility is provided for the end user. -hi-hand-type: the attribute defines the type of the pointer; -hi-min: the attribute defines the minimum value of the measuring range corresponding to the pointer, is associated with the min attribute in the high element, and aims to set the attribute so as to be suitable for displaying data of different measuring ranges in the same instrument; -hi-max: the attribute defines the maximum value of the measuring range corresponding to the pointer, and is associated with the max attribute in the hihang element; -hi-value: the attribute defines the current value of the pointer, which is associated with the value attribute in the hihand element; -hi-hand-starting-angle: the attribute defines the deflection angle of the pointer at the minimum measurement range; -hi-hand-end-angle: the attribute defines the deflection angle of the pointer at the maximum measurement range; -hi-hand-center-y: this attribute defines the relative y coordinate value of the pointer's center of rotation; -hi-hand-center-x: this attribute defines the relative x-coordinate value of the pointer's center of rotation; -hi-hand-center: the attribute is shorthand for-hi-hand-center-x and-hi-hand-center-y; -hi-needle-anchor-x: the attribute defines the x-coordinate of the eye of the needle relative to the lower left corner of the pointer pattern, and by taking into account the shaped pointer, the position of the eye of the needle is obtained so as to coincide with the center of rotation, the default value being 0; -hi-needle-anchor-y: the attribute defines the y coordinate of the eye of the needle relative to the lower left corner of the pointer graphic; -hi-needle-anchor: the attributes are shorthand for-hi-needle-anchor-x and-hi-needle-anchor-y.
It should be noted that, in the embodiment of the present invention, all the elements, the element attributes, and the CSS attributes are set according to actual system requirements, and in an actual application, other attributes or values may also be included, which is not limited to this.
Step S2: and updating the pointer control values of the current pointer according to the preset event attributes of the dial plate elements, and determining the logic change among the pointers.
In the embodiment of the invention, a plurality of pointers exist in the same dial plate, and the pointers have a logical relationship with each other, so that a plurality of event attributes are defined for the change of the pointer control value, an entry for realizing the logic between the pointers is provided for an end user, and the pointer control values of the current pointer are updated through the preset event attributes to determine the logic change between the pointers.
Step S3: and constructing a target dial plate object according to the logic change among the pointers and the pointer control.
In the embodiment of the invention, each element is realized according to the logic change among the pointers and the pointer control, and the target dial plate object is constructed. In practical applications, the target dial plate object of the member may be changed according to actual needs, and the embodiment of the present invention is not limited thereto.
The method for constructing the dial plate object provided by the invention updates the control values according to the preset event attributes by adding new control elements and corresponding attributes, determines the logical change relationship between the pointers, then constructs the target dial plate object, realizes extensible complex control support, can be directly embedded into an HTML page, is completely compatible with other HTML elements and CSS attributes, and has the advantages of simple interface, good performance, convenience in extension, good safety and the like.
In a specific embodiment, as shown in fig. 2, the process of executing step S1 may specifically include the following steps:
step S11: when the initial value of the pointer element CSS attribute is not set, the pointer element attribute value is defined as the corresponding pointer element CSS attribute value.
In the embodiment of the present invention, according to the CSS attribute priority principle, some attributes in the CSS attribute and hihand are associated, and a-hi-value is taken as an example to specifically describe: when the-hi-value attribute in the CSS is not set and only the value attribute in the HTML is set, changing the value and simultaneously changing the value of the-hi-value, and changing the pointer; when the hi-value attribute in the CSS is not set and only the value attribute in the HTML is set, the value is changed while the value-hi-value is added and changed by the correlation function, but the value is changed thereafter, the value cannot be changed, and the pointer cannot be changed.
Step S12: and updating the pointer control value according to the pointer control value and the pointer element CSS attribute value.
In the embodiment of the invention, the pointer control value is updated according to the pointer control value and the CSS attribute value of the pointer element, when the-hi-value attribute in the CSS and the value in the HTML are simultaneously set, the-hi-value is changed, the pointer is changed, but the value cannot be changed, and the pointer cannot be changed. The user should set and change the attribute values in the CSS when using the control, and the attribute values in the HTML are used only as initial values. In the embodiment of the present invention, only the-hi-value is taken as an example for description, and the priority of other related CSS attributes matches the attribute, and in practical applications, a priority principle may be set according to actual needs, and the present invention is not limited to this.
In practical applications, CSS attributes are added to the set pointers as follows:
in a specific embodiment, as shown in fig. 3, the process of executing step S2 may specifically include the following steps:
step S21: and monitoring the response change of the pointer control value, and acquiring response request data when the pointer control value changes.
In the embodiment of the invention, the response change of the pointer control value is monitored through the onchange event attribute, when the pointer control value (value or hi-value) changes, the event is triggered by the user agent, the script can monitor the event, and some dynamic adjustment work is completed, such as a water meter, and when the single digit pointer changes, other pointers also change. It should be noted that the onchange event attribute of the monitoring pointer control value is merely an example for illustration, and monitoring may also be performed through other event attributes, which is not limited in the present invention.
Step S22: and obtaining a response result according to the pointer control value corresponding to the response request data, each pointer control value of the current pointer and a response function corresponding to the preset event attribute of the dial plate element.
In the embodiment of the invention, a response result is obtained according to a pointer control value corresponding to response request data, each pointer control value of a current pointer and a response function corresponding to a preset event attribute of a dial element, wherein the preset event attribute oneimitstart is triggered when the pointer starts to rotate, in some switching values, a logic relation is only related to a boundary value, in animation change, unnecessary logic judgment is reduced, and the oneimitend event attribute is triggered when the pointer stops rotating, so that the response result is obtained, and the operation performance is improved. It should be noted that, the preset event attribute triggered when the pointer starts to rotate and stops rotating is only illustrated by way of example, and other event attributes may be selected in practical applications, which is not limited to the present invention.
Step S23: and updating the control values of the pointers according to the response result, and determining the logic change among the pointers.
In the embodiment of the present invention, according to the response result, the pointer control values are updated, the logical change between pointers is determined, for example, the change of one pointer causes the change of another pointer:
in a specific embodiment, as shown in fig. 4, the process of executing step S3 may specifically include the following steps:
step S31: and identifying and analyzing the pointer control value according to the logic change among the pointers and the pointer control to obtain a corresponding analysis control value.
In the embodiment of the invention, according to the logic change among the pointers and the pointer control, the identification of the pointer and the enhanced elements and the analysis of the corresponding attributes are carried out, and the corresponding analysis control value is obtained.
Step S32: and acquiring member variables of preset rendering nodes.
Step S33: and configuring each analysis control value into each member variable according to a preset function to obtain the current member variable.
In the embodiment of the present invention, after the member variables of the preset rendering node are obtained, the analysis control values are configured to the member variables according to the preset function, so as to obtain the current member variables.
Step S34: and according to the current member variables and the preset corresponding functions, the pointer control is laid out and rendered to obtain a target dial plate object.
According to the embodiment of the invention, the pointer control is laid out and rendered according to each current member variable and a preset corresponding function, wherein according to different attribute value types and definite meanings, the construction of a target dial plate object is completed in the preset corresponding function according to the current member variable.
In a specific embodiment, as shown in fig. 5, the process of executing step S31 may specifically include the following steps:
step S311: and adding the attribute name and the label name to the corresponding file.
In the embodiment of the invention, the newly added himeter and hihand and the attribute names corresponding to the two elements are added into an attribute name file HTMLAttributeNames.in and a tag name file HTMLTagNames.in.
Step S312: and generating a corresponding hash value according to the pointer label name and the attribute name.
In the embodiment of the invention, in the compiling process, corresponding hash values are automatically formed for each element and corresponding attributes according to the attribute names and the label names, and unique fixed IDs are given.
Step S313: and acquiring member functions of each preset class according to the hash value.
In the embodiment of the invention, two new classes are respectively created for the himeter and the hihand to complete data transmission in the form, and the member functions of the preset classes are obtained according to the hash values.
Step S314: and analyzing the pointer control values according to the member functions corresponding to the pointer controls to obtain corresponding analysis control values.
According to the embodiment of the invention, according to the difference of the attribute value types and the clear meaning, the analysis codes of the attributes are respectively compiled in the file according to the IDs corresponding to the attributes, and finally the analysis codes are converted into the defined types to obtain the corresponding analysis control values.
In a specific embodiment, as shown in fig. 6, the process of executing step S34 may specifically include the following steps:
step S341: and acquiring the logical coordinates of the dial plate elements, converting the logical coordinates of the dial plate elements into equipment coordinates according to the attribute values of the dial plate elements, the preset scaling and the logical coordinates of the dial plate elements, and determining the size of the canvas and the coordinates of the rotation center point.
In the embodiment of the invention, in order to enable the dial plate object to be suitable for more systems, the default scaling of the user agent is firstly obtained, the logical coordinate of the pointer element is converted into the equipment coordinate, the size and the position of the canvas are finally determined through the width and the right attributes of the pointer, the scaling and the equipment coordinate, and the center point coordinate of the canvas is determined. It should be noted that the default scaling is set according to the system requirement, and the invention is not limited thereto.
Step S342: and determining the rotation direction of the pointer according to a preset rotation direction judgment rule.
In the embodiment of the present invention, in the construction of the rotating pointer control, the rotating direction of the pointer needs to be determined according to a preset rotating direction determination rule, where the preset rotating direction determination rule is preset and may be changed as needed in practical application, and the present invention is not limited thereto.
Step S343: and determining the pointer angle and the pointer endpoint coordinate according to the pointer rotation direction and the CSS attribute value of each pointer element.
In the embodiment of the invention, the pointer angle and the pointer endpoint coordinate are determined according to the pointer rotation direction and the CSS attribute value of each pointer element, so that a foundation is laid for drawing a target pointer element object more accurately in the follow-up process, and the adaptability of the target object is improved.
Step S344: and drawing a pointer according to a preset drawing function, the coordinates of the central point of the dial plate element, the pointer angle and the coordinates of the pointer endpoint, and laying out and rendering the pointer control to obtain a target dial plate object.
In a specific embodiment, as shown in fig. 7, the process of executing step S342 may specifically include the following steps:
step S3421: and acquiring an initial rotation angle value and a termination rotation angle value in the pointer element CSS attribute.
In the embodiment of the invention, in a coordinate system of a canvas, when a vertical direction is taken as an angle 0, a clockwise direction is taken as a positive direction, and a counterclockwise direction is taken as a negative direction, and values of CSS attributes-hi-hand-starting-angle, -hi-hand-end-angle follow a principle: the value of which is the absolute angle to the angle 0. This means that if the pointer makes two turns to reach the end angle, the absolute value of the difference between the end angle and the initial angle must be greater than 720 degrees.
Step S3422: and when the ending rotation angle value is larger than the initial rotation angle value, determining the clockwise direction as the pointer rotation direction.
Step S3423: and when the terminal rotation angle value is smaller than the initial rotation angle value, determining the anticlockwise direction as the pointer rotation direction.
In a specific embodiment, the process of executing step S343 may specifically include the following steps:
step S3431: and determining the range value corresponding to each rotation angle of the pointer according to the minimum range attribute value and the maximum range attribute value in the pointer element CSS attribute values and the difference value between the initial rotation angle value and the final rotation angle value.
In the embodiment of the invention, the range value corresponding to each rotation angle of the pointer is determined according to the minimum range attribute value and the maximum range attribute value in the pointer element CSS attribute values and the difference value between the initial rotation angle value and the final rotation angle value, and the drawing of each rotation angle of the rotating pointer can be completed after the range value corresponding to each rotation angle is determined.
Step S3432: and determining the current value of the pointer according to the acquired actual value of the pointer in the CSS attribute of the pointer element and a preset method.
In the embodiment of the invention, the current value of the pointer is determined according to the acquired actual value of the pointer in the CSS attribute of the pointer element and a preset method, and the current pointer is drawn.
Step S3433: and determining the angle of the current pointer according to the current value of the pointer, the minimum range attribute value, the rotating direction of the pointer and the range value corresponding to each rotating angle.
In the embodiment of the invention, the angle corresponding to the pointer is finally calculated according to the current value (not always equal to-hi-value), -hi-min, the rotating direction and the range value corresponding to each degree.
Step S3434: and obtaining the offset of the pointer eye relative to the rotation central point according to the obtained coordinate of the pointer eye and the coordinate of the rotation central point, and determining the coordinate of the pointer tail.
In the embodiment of the invention, the coordinate of the pointer tail in the horizontal position is determined according to the attribute-hi-needle-anchor-x, -hi-needle-anchor-x and the rotation center coordinate.
Step S3435: and acquiring the minimum value of the width value and the height value of the pointer range area in the pointer element attribute, zooming the pointer tail coordinate of the pointer according to the minimum value and a preset zooming ratio, and determining the pointer endpoint coordinate.
In the embodiment of the invention, according to width and right, the middle and small values are taken, the proper proportion is reduced, and the coordinates of the end point of the pointer are determined when the pointer is at the horizontal position. And calling a GUI related drawing function interface, drawing a horizontal pointer, and rotating to the angle corresponding to the current value.
In a specific embodiment, the process of executing step S3432 may specifically include the following steps:
step S34321: and if the actual value of the pointer is smaller than the minimum range attribute value, determining the minimum range attribute value as the current value of the pointer.
In the embodiment of the invention, whether the current value-hi-value is in the range is judged, and when the-hi-value is less than-hi-min, the current value is set to be equal to the-hi-min.
Step S34322: and if the actual value of the pointer is larger than the maximum range attribute value, determining the maximum range attribute value as the current value of the pointer.
In practical application, in HTML and CSS syntax analysis, compared with the traditional implementation scheme, the implementation steps of the embodiment of the invention have no difference in performance because the implementation steps are based on the analysis of character strings and the implementation of a Hash algorithm; in the rendering step, because the number of rendered elements is small, the calling of a JavaScript function is reduced, and the difference in efficiency exists, the following two comparison tests are performed for the rendering step:
1. starting timing from a-hi-value attribute change trigger event, comparing the rendering completion time:
the test method comprises the following steps: drawing a simple pointer (straight line) by using two div labels, rotating 180 times from 0 degree to 180 degrees, and recording total consumption from the time when-hi-value in CSS changes to the time when drawing is finished in a browser code; using the pointer and the high elements, rotate a pointer 180 times from 0 degree to 180 degrees. And directly calling a drawing function of the browser to draw in the browser, and recording the total consumed time from the change of the hi-value in the CSS to the drawing completion.
And (3) testing results: using the div tag: the time consumption is 440 milliseconds; himeter and hihand self-plot: the time taken was 390 milliseconds.
And (4) test conclusion: with the method described in the embodiments of the present invention, the time consumption is 90% of the conventional scheme; the drawing only draws a straight line to represent a pointer, if the rotating picture is more complex, the traditional method uses more div, and the traditional method needs to be rearranged and rendered every time, the difference between the drawing and the method described in the patent is enlarged. The requirements on the skill level of the front-end engineer will be higher when describing complex pointers in the conventional way.
2. Comparing pure drawing time in the rendering process:
the test method comprises the following steps: considering the complex pointer configuration, the conventional way rotates a pointer 180 times from 0 degree to 180 degrees. Recording the total rendering time in the rotation process; using the pointer and the raised elements described in the embodiments of the present invention, a pointer is rotated 180 times from 0 degree to 180 degrees. Recording the total time of hihand rendering in the browser code; using the pointer and the raised elements described in this patent, a pointer is rotated 180 times from 0 degrees to 180 degrees. In a browser, in the hihand rendering process, calling an SVG related function to draw a graph, and finally recording the total time consumed by the hihand rendering.
And (3) testing results: in the traditional method, the drawing time is 26930 microseconds; high self-drawing: drawing time is 19000 microseconds; drawing time of the hihand + SVG is 117000 microseconds.
And (4) test conclusion: the hihand self-drawing is fastest, and the time consumption is approximately 75% of that of the traditional rendering mode; in the comparison between the hihand self-drawing and the calling of the SVG library, the time required for using the SVG library is 6 times that of the self-drawing.
According to the method for constructing the dial plate object, the layout and rendering of each element are realized by identifying and analyzing each pointer control, the definition and application of the pointer control are simplified, the memory occupation of a page is reduced, the interaction performance and the user experience are improved, and the pointer graph is prevented from being formed by using a large number of div elements, so that the memory occupation of the page is reduced, meanwhile, the calculation of a large number of re-layouts when the pointer value changes is avoided, and the performance of a system is improved; the internal processing of the pointer is realized by the user agent, so that better performance and interactive experience can be obtained; by introducing the new CSS attribute, an HTML document author can define the rendering attribute of the pointer control, on one hand, the CSS can be reused, on the other hand, more flexibility is brought to a front-end developer, the workload of the front-end developer for developing scripts is simplified, and the learning difficulty of the front-end developer is reduced.
Example 2
An embodiment of the present invention provides a system for constructing a dial plate object, as shown in fig. 8, including:
an updating module 1, configured to update a preset pointer control value according to a preset association principle, where the preset pointer control at least includes: the dial plate element, the dial plate element attribute, the pointer element attribute and the pointer element CSS attribute; this module executes the method described in step S1 in embodiment 1, and is not described herein again.
The logic change determining module 2 is used for updating each pointer control value of the current pointer according to the preset event attribute of the dial plate element and determining the logic change among the pointers; this module executes the method described in step S2 in embodiment 1, and is not described herein again.
The target dial plate object constructing module 3 is used for constructing a target dial plate object according to the logic change among the pointers and the pointer control; this module executes the method described in step S3 in embodiment 1, and is not described herein again.
According to the system for constructing the dial plate object, the new control elements and the corresponding attributes are added, the control values are updated according to the attributes of the preset events, the logical change relation among the pointers is determined, then the target dial plate object is constructed, and extensible complex control support is realized; by identifying and analyzing each pointer control, the layout and rendering of each element are realized, the definition and application of the pointer control are simplified, the memory occupation of a page is reduced, the interaction performance and the user experience are improved, and the pointer graph is prevented from being formed by using a large number of div elements, so that the memory occupation of the page is reduced, meanwhile, the calculation of a large number of re-layouts when the pointer value changes is avoided, and the performance of the system is improved; the internal processing of the pointer is realized by the user agent, so that better performance and interactive experience can be obtained; by introducing the new CSS attribute, an HTML document author can define the rendering attribute of the pointer control, on one hand, the CSS can be reused, on the other hand, more flexibility is brought to a front-end developer, the workload of the front-end developer for developing scripts is simplified, and the learning difficulty of the front-end developer is reduced.
Example 3
An embodiment of the present invention provides an electronic device, as shown in fig. 9, including: at least one processor 401, such as a CPU (Central Processing Unit), at least one communication interface 403, memory 404, and at least one communication bus 402. Wherein a communication bus 402 is used to enable connective communication between these components. The communication interface 403 may include a Display (Display) and a Keyboard (Keyboard), and the optional communication interface 403 may also include a standard wired interface and a standard wireless interface. The Memory 404 may be a RAM (random Access Memory) or a non-volatile Memory (non-volatile Memory), such as at least one disk Memory. The memory 404 may optionally be at least one memory device located remotely from the processor 401. Wherein the processor 401 may execute the method of constructing a dial object of embodiment 1. A set of program codes is stored in the memory 404, and the processor 401 calls the program codes stored in the memory 404 for executing the method of constructing a dial object of embodiment 1.
The communication bus 402 may be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus. The communication bus 402 may be divided into an address bus, a data bus, a control bus, and the like. For ease of illustration, only one line is shown in FIG. 9, but this does not represent only one bus or one type of bus.
The memory 404 may include a volatile memory (RAM), such as a random-access memory (RAM); the memory may also include a non-volatile memory (english: non-volatile memory), such as a flash memory (english: flash memory), a hard disk (english: hard disk drive, abbreviation: HDD), or a solid-state drive (english: SSD); the memory 404 may also comprise a combination of memories of the kind described above.
The processor 401 may be a Central Processing Unit (CPU), a Network Processor (NP), or a combination of a CPU and an NP.
The processor 401 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 aforementioned PLD may be a Complex Programmable Logic Device (CPLD), a field-programmable gate array (FPGA), a General Array Logic (GAL), or any combination thereof.
Optionally, the memory 404 is also used to store program instructions. The processor 401 may call program instructions to implement the method of constructing a dial plate object as in embodiment 1 performed herein.
The embodiment of the invention also provides an electronic readable storage medium, wherein electronic executable instructions are stored on the electronic readable storage medium, and the electronic executable instructions can execute the method for constructing the dial plate object in the embodiment 1. The storage medium may be a magnetic Disk, an optical Disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a Flash Memory (Flash Memory), a Hard Disk (Hard Disk Drive, abbreviated as HDD), a Solid-State Drive (SSD), or the like; the storage medium may also comprise a combination of memories of the kind described above.
It should be understood that the above examples are only for clarity of illustration and are not intended to limit the embodiments. Other variations and modifications will be apparent to persons skilled in the art in light of the above description. And are neither required nor exhaustive of all embodiments. And obvious variations or modifications of the invention may be made without departing from the spirit or scope of the invention.
Claims (12)
1. A method of constructing a dial object, comprising,
updating the value of a preset pointer control according to a preset association principle, wherein the preset pointer control at least comprises: the dial plate element, the dial plate element attribute, the pointer element attribute and the pointer element CSS attribute;
updating each pointer control value of the current pointer according to the preset event attribute of the dial plate element, and determining the logic change between each pointer;
and constructing a target dial plate object according to the logic change among the pointers and the pointer control.
2. The method for constructing a dial object according to claim 1, wherein the step of updating the preset pointer control value according to a preset association principle comprises:
when the initial value of the pointer element CSS attribute is not set, defining the pointer element attribute value as a corresponding pointer element CSS attribute value;
and updating the pointer control value according to the pointer control value and the pointer element CSS attribute value.
3. The method for constructing a dial plate object according to claim 1, wherein the step of updating the pointer control values of the current pointers according to the preset event attributes of the dial plate elements and determining the logical change between the pointers comprises:
monitoring the response change of the pointer control value, and acquiring response request data when the pointer control value changes;
obtaining a response result according to the pointer control value corresponding to the response request data, each pointer control value of the current pointer and a response function corresponding to the preset event attribute of the dial plate element;
and updating the control value of each pointer according to the response result, and determining the logic change between the pointers.
4. The method for constructing a dial object according to claim 1, wherein the step of constructing a target dial object based on the logical changes between the pointers and the pointer controls comprises:
according to the logic change among the pointers and the pointer control, identifying and analyzing the pointer control value to obtain a corresponding analysis control value;
acquiring member variables of preset rendering nodes;
according to a preset function, configuring each analysis control value into each member variable to obtain a current member variable;
and according to the current member variables and the preset corresponding functions, the pointer control is laid out and rendered to obtain a target dial plate object.
5. The method for constructing a dial plate object according to claim 4, wherein the step of identifying and analyzing the pointer control value according to the logical change between the pointers and the pointer control to obtain the corresponding analysis control value comprises:
storing the attribute name and the label name to a corresponding file;
generating a corresponding hash value according to the pointer label name and the attribute name;
acquiring member functions of each preset class according to the hash value;
and analyzing the pointer control values according to the member functions corresponding to the pointer controls to obtain corresponding analysis control values.
6. The method for constructing a dial plate object according to claim 4, wherein the step of laying out and rendering the pointer control according to each of the current member variables and the preset corresponding function to obtain the target dial plate object includes:
acquiring a logical coordinate of a dial element, converting the logical coordinate of the dial element into an equipment coordinate according to the attribute value of the dial element, a preset scaling and the logical coordinate of the dial element, and determining the size of a canvas and the coordinate of a rotation center point;
determining the rotation direction of the pointer according to a preset rotation direction judgment rule;
determining a pointer angle and a pointer endpoint coordinate according to the pointer rotation direction and the CSS attribute values of all pointer elements;
and drawing a pointer according to a preset drawing function, the coordinates of the central point of the dial plate element, the pointer angle and the coordinates of the pointer endpoint, and performing layout and rendering on a pointer control to obtain the target dial plate object.
7. The method for constructing a dial object according to claim 6, wherein the step of determining the direction of rotation of the hands according to a preset rotation direction decision rule comprises:
acquiring an initial rotation angle value and a final rotation angle value in the pointer element CSS attribute;
when the rotation stopping angle value is larger than the initial rotation angle value, determining the clockwise direction as the pointer rotation direction;
and when the terminal rotation angle value is smaller than the initial rotation angle value, determining the anticlockwise direction as the pointer rotation direction.
8. The method for constructing a dial plate object according to claim 7, wherein the step of determining the pointer angle and the pointer end point coordinates based on the CSS attribute values of the pointer elements in the pointer rotation direction includes:
determining a range value corresponding to each rotation angle of the pointer according to a minimum range attribute value and a maximum range attribute value in the pointer element CSS attribute values and a difference value between the initial rotation angle value and the final rotation angle value;
determining a current value of the pointer according to the acquired actual value of the pointer in the CSS attribute of the pointer element and a preset method;
determining the angle of the current pointer according to the current pointer value, the minimum range attribute value, the pointer rotation direction and the range value corresponding to each rotation angle;
obtaining the offset of the pointer eye relative to the rotation central point according to the obtained coordinate of the pointer eye and the coordinate of the rotation central point, and determining the coordinate of the pointer tail;
and acquiring the minimum value of the width value and the height value of the pointer range area in the pointer element attribute, zooming the pointer tail coordinate of the pointer according to the minimum value and a preset zooming proportion, and determining the pointer endpoint coordinate.
9. The method for constructing a dial plate object according to claim 8, wherein the step of determining the current value of the pointer according to the acquired actual value of the pointer in the CSS attribute of the pointer element and a preset method comprises:
if the actual value of the pointer is smaller than the minimum range attribute value, determining the minimum range attribute value as the current value of the pointer;
and if the actual value of the pointer is larger than the maximum range attribute value, determining the maximum range attribute value as the current value of the pointer.
10. A system for constructing a dial object, comprising,
an updating module, configured to update a preset pointer control value according to a preset association principle, where the preset pointer control at least includes: the dial plate element, the dial plate element attribute, the pointer element attribute and the pointer element CSS attribute;
the logic change determining module is used for updating each pointer control value of the current pointer according to the preset event attribute of the dial plate element and determining the logic change between the pointers;
and the target dial plate object constructing module is used for constructing a target dial plate object according to the logic change among the pointers and the pointer control.
11. A computer-readable storage medium, characterized in that it stores computer instructions which, when executed by a processor, implement the method of building a dial object according to any one of claims 1-9.
12. An electronic device, comprising:
a memory and a processor, communicatively connected to each other, the memory having stored therein computer instructions, the processor executing the computer instructions to perform the method of constructing a dial object according to any one of claims 1 to 9.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010124678.6A CN111324845B (en) | 2020-02-27 | 2020-02-27 | Method and system for constructing dial object |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010124678.6A CN111324845B (en) | 2020-02-27 | 2020-02-27 | Method and system for constructing dial object |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111324845A true CN111324845A (en) | 2020-06-23 |
| CN111324845B CN111324845B (en) | 2023-06-02 |
Family
ID=71165274
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010124678.6A Active CN111324845B (en) | 2020-02-27 | 2020-02-27 | Method and system for constructing dial object |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111324845B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111813479A (en) * | 2020-07-06 | 2020-10-23 | 北京飞漫软件技术有限公司 | Method and system for constructing roller object |
| CN111898051A (en) * | 2020-07-23 | 2020-11-06 | 平安证券股份有限公司 | CSS style simplifying method and device, electronic equipment and storage medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120278701A1 (en) * | 2011-04-28 | 2012-11-01 | International Business Machines Corporation | Automatically Generating And Porting A Cascading Style Sheets ('CSS') Style Sheet |
| CN103345565A (en) * | 2013-07-31 | 2013-10-09 | 德讯科技股份有限公司 | Instrument panel construction method for data display based on Flash technology |
| CN105373520A (en) * | 2015-10-13 | 2016-03-02 | 金蝶软件（中国）有限公司 | Method and device for setting control style attributes |
| US20190286462A1 (en) * | 2013-03-15 | 2019-09-19 | David Bodnick | Systems, methods, and media for presenting interactive checklists |
| CN110688115A (en) * | 2019-09-24 | 2020-01-14 | 珠海格力电器股份有限公司 | Method and device for generating interface |
-
2020
- 2020-02-27 CN CN202010124678.6A patent/CN111324845B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20120278701A1 (en) * | 2011-04-28 | 2012-11-01 | International Business Machines Corporation | Automatically Generating And Porting A Cascading Style Sheets ('CSS') Style Sheet |
| US20190286462A1 (en) * | 2013-03-15 | 2019-09-19 | David Bodnick | Systems, methods, and media for presenting interactive checklists |
| CN103345565A (en) * | 2013-07-31 | 2013-10-09 | 德讯科技股份有限公司 | Instrument panel construction method for data display based on Flash technology |
| CN105373520A (en) * | 2015-10-13 | 2016-03-02 | 金蝶软件（中国）有限公司 | Method and device for setting control style attributes |
| CN110688115A (en) * | 2019-09-24 | 2020-01-14 | 珠海格力电器股份有限公司 | Method and device for generating interface |
Non-Patent Citations (2)
| Title |
|---|
| BASSEL F. SAAB: ""Toward a Standardized XMAN Presentation Layer with Consideration of User Interface Description Languages"" * |
| 芮烨;: "大数据网页组件服务框架设计及实践" * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111813479A (en) * | 2020-07-06 | 2020-10-23 | 北京飞漫软件技术有限公司 | Method and system for constructing roller object |
| CN111898051A (en) * | 2020-07-23 | 2020-11-06 | 平安证券股份有限公司 | CSS style simplifying method and device, electronic equipment and storage medium |
| CN111898051B (en) * | 2020-07-23 | 2023-08-15 | 平安证券股份有限公司 | CSS style simplifying method and device, electronic equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111324845B (en) | 2023-06-02 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8365086B2 (en) | System and method for building graphical instrument panels | |
| CN110221899B (en) | User interface adjusting method, device and system | |
| CN108664461B (en) | Automatic filling method and device for webpage form | |
| CN103823676A (en) | Display control method, display control device and client side | |
| CN103309802A (en) | Method and device for testing system stability in mobile terminal | |
| US11151314B2 (en) | Extensible grid layout | |
| CN111324845B (en) | Method and system for constructing dial object | |
| CN111291533B (en) | Sentence segment to be displayed display method and device, computer equipment and storage medium | |
| CN113741898B (en) | Form generation method, device and equipment | |
| CN109086342B (en) | Method, medium and terminal for mass production and operation and maintenance of website templates | |
| CN109634579A (en) | Code generating method, device, computer installation and storage medium | |
| US7073138B2 (en) | Method and apparatus for cursor positioning in bi-directional text | |
| TWI610220B (en) | Apparatus and method for automatically controlling display screen density | |
| CN115309470A (en) | Method, device and equipment for loading widgets and storage medium | |
| CN112711731A (en) | Data point burying method, device, equipment and storage medium | |
| CN111813479A (en) | Method and system for constructing roller object | |
| CN111176647B (en) | Method and system for constructing dial object | |
| CN114518815B (en) | Method, device, equipment, medium and program product for displaying building drawing | |
| US20210397775A1 (en) | Electronic apparatus, information processing method, and recording medium | |
| CN111880889B (en) | Interface display method and device, electronic equipment and storage medium | |
| CN112905931B (en) | Page information display method and device, electronic equipment and storage medium | |
| US11210106B2 (en) | Simulated visual hierarchy while facilitating cross-extension communication | |
| JP6113983B2 (en) | Screen control display system and screen control display program | |
| CN107862729B (en) | Hierarchical animation generation method, terminal and readable storage medium | |
| CN111221893A (en) | Webpage data analysis method and system based on image recognition |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |