Rendering method and system of phase sequence diagram
By adopting a hybrid rendering mechanism and hierarchical rendering technology in phase timing diagram rendering, combined with the advantages of Canvas and SVG, the problems of inefficient rendering efficiency and poor interactivity are solved, and high-quality graphics output and smooth interactive experience are achieved.
Patent Information
- Application Number
- CN202411952415.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-27
- Publication Date
- 2025-04-15
AI Technical Summary
The existing phase timing diagram rendering methods have problems such as low rendering efficiency, poor interactivity and low image quality.
Using a hybrid rendering mechanism, static elements are drawn through Canvas and dynamic elements are drawn through SVG, and the phase timing chart is divided into multiple levels for layered rendering, static elements are cached, and SVG element events are monitored through webSocket to achieve interactive functions.
It improves rendering speed and image quality, enhances interactive experience, supports real-time scrolling and optimizes traffic signal solutions, and improves road traffic efficiency.
Smart Images
Figure CN119832108A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of traffic management, and in particular to a rendering method and system for a phase timing diagram. Background Art
[0002] Phase timing diagram is a kind of graph used to show the time sequence and phase relationship. It is widely used in engineering, scientific research and data analysis, especially in the field of traffic management technology. It is not only an intuitive graphical representation method for showing the state changes of traffic lights in different time periods, but also an important tool for traffic engineers and planners to optimize intersection signal control strategies.
[0003] At present, the front-end rendering method of phase timing diagram relies on a single rendering technology, and there are problems such as low efficiency, poor interactivity and low rendering quality. Specifically, the low rendering efficiency is reflected in the fact that when Canvas renders complex graphics, it needs to frequently redraw the entire canvas, resulting in slow rendering speed. The low image quality is reflected in the fact that the image generated by Canvas is a bitmap, and when the display area changes, the image is easily distorted. The poor interactivity is reflected in the fact that Canvas does not support direct event monitoring of graphics, and requires additional logic to implement interactive functions, which increases the difficulty of development. Summary of the invention
[0004] The technical problem to be solved by the present invention is how to provide high-quality graphics output and smooth interactive experience while ensuring rendering speed.
[0005] In a first aspect of the present invention, in order to solve the above technical problem, the present invention provides a method for rendering a phase timing diagram, the method comprising: S1. Data preprocessing: preprocess the data of the phase timing diagram and initialize the phase timing diagram parameters; S2, hybrid rendering mechanism: use Canvas to draw the static elements of the phase timing diagram; use SVG to draw the dynamic elements in the phase timing diagram; S3. Optimizing rendering performance: dividing the phase timing diagram into multiple levels for layered rendering, and caching the static elements; S4, interactive processing: monitoring the events of the dynamic elements of SVG through webSocket to realize the interactive function of the phase timing diagram.
[0006] Furthermore, the preprocessing of the data of the phase timing diagram includes parsing the data, calculating the phase relationship and the time sequence.
[0007] Furthermore, the phase timing diagram parameters include phase timing diagram basic data configuration, current system time, phase stage time chain, phase intersection data, phase end time, phase time chain and phase state chain data.
[0008] Furthermore, the static elements of the phase timing diagram drawn using Canvas include: Draw a Canvas canvas according to the phase timing diagram parameters; Draw an X-axis reference line corresponding to the number of phases, a text mark of the current phase number, and the required configuration status on the Canvas canvas.
[0009] Furthermore, the use of SVG to draw dynamic elements in the phase timing diagram includes: According to the phase timing diagram parameters, determining the phase area to which the current phase timing diagram belongs; Draw a phase timing diagram, draw an SVG splicing timing diagram through each phase time chain and the phase state chain data, and place it in the center of the X-axis reference line; Calculate the current system time and the width of the displayable area, hide the phase timing diagram outside the displayable area, and run the position of the phase timing diagram from right to left according to the current system time; Bind the drag event to the time column. During the dragging process, calculate the distance between the left and right sides of the phase timing diagram according to the offset, and update the phase timing diagram status that should be displayed in the left and right areas.
[0010] Furthermore, the hybrid rendering mechanism further includes: Draw the phase timing diagram on the Canvas canvas using SVG to satisfy the conversion formula:
[0011]
[0012] In the formula, is the total length of the phase timing diagram on the x-axis, is the duration of the first phase, For the The duration of the phase, It is a scale, which means the pixel length represented by 1 second on a web page; is the position distance of the current phase from left to right on the phase timing diagram, is the cut-off time of the previous phase operation, is the start time of the current phase, is the time of the current phase operation, The time corresponding to the default phase position.
[0013] Further, the phase time zone to which the current phase belongs is marked by the phase phase time in the initialization phase timing diagram parameter, and the current phase running time is recorded as seconds, including phases, then the running time of the first phase in each corresponding phase is , No. The phase running time is , satisfying the formula: .
[0014] A first aspect of the present invention provides a phase timing diagram rendering system, which is applied with the phase timing diagram rendering method.
[0015] Furthermore, the system comprises: Simulate the manual command unit, which is used for users to issue different state commands through buttons, and display the corresponding changes on the phase timing diagram in real time through the transition time; The signal scheme configuration unit is used for users to switch between different intersections to view or edit the signal scheme configuration optimized by the phase timing diagram.
[0016] Furthermore, the system also includes: A traffic data management unit, used for managing and storing data of the signal scheme configuration unit; The communication interface unit provides a communication interface with the traffic signal control system to receive real-time traffic data.
[0017] Compared with the prior art, the embodiments of the present invention have the following beneficial effects: The present invention realizes efficient and high-quality rendering through a hybrid rendering mechanism, that is, combining the advantages of Canvas and SVG; divides the phase timing diagram into multiple levels for layered rendering, and caches the static elements, thereby reducing the scope of each redrawing and improving the rendering speed; in addition, uses SVG to draw dynamic elements, thereby ensuring that the image will not be distorted when the display area changes; by monitoring the events of SVG elements, the interactive function of the phase timing diagram is realized, thereby improving the user experience; supports real-time scrolling, and can clearly view the phase conditions that have been executed before and will be executed later, which is helpful to optimize the traffic signal plan and improve the road traffic efficiency. BRIEF DESCRIPTION OF THE DRAWINGS
[0018] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work.
[0019] Figure 1 A flowchart of the disclosed embodiment of the present invention; Figure 2 A schematic diagram of the Canvas canvas, svg display effect diagram and X-axis horizontal line required for rendering phase data disclosed in an embodiment of the present invention; Figure 3 A schematic diagram showing the phase color, text state and length calculation disclosed in an embodiment of the present invention; Figure 4 A complete display effect diagram of the phase timing diagram disclosed in an embodiment of the present invention; Figure 5 It is a diagram showing the effect of the phase timing diagram and the corresponding signal scheme configuration disclosed in the embodiment of the present invention. DETAILED DESCRIPTION
[0020] In order to enable those skilled in the art to better understand the scheme of the present invention, the technical scheme in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.
[0021] See also Figure 1 The present invention aims to provide a rendering method of a phase timing diagram, so as to provide high-quality graphics output and smooth interactive experience while ensuring the rendering speed.
[0022] The rendering method of the phase timing diagram provided by the present invention mainly comprises the following steps: Step 1: Data preprocessing Preprocess the phase timing diagram data, initialize the phase timing diagram parameters, and connect the real-time data Websocket.
[0023] In an embodiment of the present invention, the data of the phase timing diagram is preprocessed, including parsing the data, calculating the phase relationship and time sequence, and the like.
[0024] The phase timing diagram parameters include the phase timing diagram basic data configuration, current system time, phase stage time chain, phase intersection data, phase end time, phase time chain and phase state chain data.
[0025] The data returned in the Websocket is consistent with the initialization data.
[0026] Step 2: Hybrid rendering mechanism Use Canvas to draw the static elements of the phase timing diagram; use SVG to draw the dynamic elements in the phase timing diagram.
[0027] Further explained: Background rendering: Use Canvas to draw the background of the phase timing diagram, including static elements such as the time axis and grid lines. Figure 2 The Canvas required for rendering the phase timing diagram is shown. Specifically, according to the initialized phase timing diagram parameters, a Canvas with attributes such as width, height, and background color is first drawn; then the X-axis horizontal lines of each phase are drawn on the canvas.
[0028] Dynamic element rendering: Use SVG to draw dynamic elements in the phase timing diagram, such as phase lines, data points, etc.
[0029] Since the image generated by Canvas is a bitmap, it is easy to be distorted when the display area changes. SVG can retain the vector information of the graphic, so it can ensure that the image will not be distorted when the display area changes.
[0030] In a further embodiment of the present invention, the static elements of the phase timing diagram are drawn using Canvas, including: Draw the Canvas canvas according to the phase timing diagram parameters.
[0031] Draw the X-axis reference line corresponding to the number of phases on the Canvas, and text to mark the current phase number and required configuration status.
[0032] In a further embodiment of the present invention, using SVG to draw dynamic elements in a phase timing diagram includes: According to the phase timing diagram parameters, determine the phase area to which the current phase timing diagram belongs.
[0033] Draw the phase timing diagram, draw the SVG splicing timing diagram through each phase time chain and phase state chain data, and place it in the center of the X-axis baseline.
[0034] The current system time and the width of the displayable area are calculated, and the phase timing diagram outside the displayable area is hidden. The position of the phase timing diagram is run from right to left according to the current system time.
[0035] Bind the drag event to the time column. During the dragging process, calculate the distance between the left and right sides of the phase timing diagram according to the offset, and update the phase timing diagram status that should be displayed in the left and right areas.
[0036] The definition of the time column is: a line graph perpendicular to the X-axis through the current system time, representing the current phase operation status. The default position is 20S before the end of the phase.
[0037] In a further embodiment of the present invention, a phase timing diagram is drawn on a Canvas canvas by using SVG to satisfy the conversion formula:
[0038]
[0039] In the formula, is the total length of the phase timing diagram on the x-axis, is the duration of the first phase, For the The duration of the phase, It is a scale, which means the pixel length represented by 1 second on a web page; is the position distance of the current phase from left to right on the phase timing diagram, is the cut-off time of the previous phase operation, is the start time of the current phase, is the time of the current phase operation, The time corresponding to the default phase position.
[0040] In a further embodiment of the present invention, the phase time zone to which the current phase belongs is marked by initializing the phase phase time in the phase timing diagram parameters, and the current phase running time is recorded as seconds, including phases, then the running time of the first phase in each corresponding phase is , No. The phase running time is , satisfying the formula:
[0041] Step 3. Optimize rendering performance Divide phase timing diagrams into multiple levels for layered rendering and cache static elements.
[0042] Compared with the existing single Canvas, when rendering complex graphics, the entire canvas needs to be frequently redrawn, resulting in a slow rendering speed. The present invention reduces the scope of each redraw and improves the rendering speed by rendering in layers and caching static elements.
[0043] Step 4: Interaction processing The events of SVG dynamic elements are monitored through webSocket to realize the interactive functions of the phase timing diagram, such as panning, clicking, dragging, etc.
[0044] Since Canvas does not support direct event monitoring of graphics, additional logic is required to implement interactive functions, which increases the difficulty of development. The present invention monitors events of SVG elements through webSocket to implement the interactive function of the phase timing diagram.
[0045] Example The following is a detailed list of the process of drawing a phase operation timing, including the following steps: step1. According to the parameter stageAeq of the phase timing diagram, draw the phase number, required transition state and X-axis horizontal line for the current phase timing diagram.
[0046] Step 2. Start drawing the phase. First, find the current system time and calculate the running time of the current phase. Then calculate the phase length according to the phase time chain and draw the SVG block. Add the corresponding background color and phase attribute text to the SVG block according to the phase state chain.
[0047] Step 3. Add position attributes to the entire SVG block, place it on the drawn canvas graphics according to the running time, and modify the current position through the constantly changing system time to achieve the dynamic effect of the phase timing diagram.
[0048] Step 4. Add drag time to the time column. During the dragging process, calculate the distance from the left and right sides to the edge, and reset the position of the current phase timing diagram.
[0049] After the above steps, the final phase timing effect diagram is as follows: Figure 4 shown.
[0050] The present invention also provides a phase timing diagram rendering system, see Figure 5 , the above-mentioned phase timing diagram rendering method is applied. The system mainly includes a simulated manual instruction unit, a signal scheme configuration unit, a traffic data management unit and a communication interface unit.
[0051] Specific: The simulated manual command unit is used for users to issue different status commands through buttons, and the corresponding changes are displayed in real time on the phase timing diagram through the transition time.
[0052] The signal scheme configuration unit is used by users to switch between different intersections to view or edit the signal scheme configuration optimized by the phase sequence diagram. When the user edits the signal scheme configuration, by selecting the scheme and then clicking the "Center Control" button to issue the scheme, the phase sequence diagram can be redrawn.
[0053] The traffic data management unit is used to manage and store the data of the signal scheme configuration unit.
[0054] The communication interface unit can provide a communication interface with the traffic signal control system to receive real-time traffic data.
[0055] Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that various changes, modifications, substitutions and variations may be made to the embodiments without departing from the principles and spirit of the present invention, and that the scope of the present invention is defined by the appended claims and their equivalents.
Claims
1. A method for rendering a phase timing diagram, characterized in that: The method comprises: S1. Data preprocessing: preprocess the data of the phase timing diagram and initialize the phase timing diagram parameters; S2, hybrid rendering mechanism: use Canvas to draw the static elements of the phase timing diagram; use SVG to draw the dynamic elements in the phase timing diagram; S3. Optimizing rendering performance: dividing the phase timing diagram into multiple levels for layered rendering, and caching the static elements; S4, interactive processing: monitoring the events of the dynamic elements of SVG through webSocket to realize the interactive function of the phase timing diagram.
2. The method for rendering a phase timing diagram according to claim 1, characterized in that: The preprocessing of the data of the phase timing diagram includes parsing the data, calculating the phase relationship and the time sequence.
3. The method for rendering a phase timing diagram according to claim 1, characterized in that: The phase timing diagram parameters include phase timing diagram basic data configuration, current system time, phase stage time chain, phase intersection data, phase end time, phase time chain and phase state chain data.
4. The method for rendering a phase timing diagram according to claim 3, characterized in that: The static elements of the phase timing diagram drawn using Canvas include: Draw a Canvas canvas according to the phase timing diagram parameters; Draw an X-axis reference line corresponding to the number of phases, a text mark of the current phase number, and the required configuration status on the Canvas canvas.
5. The method for rendering a phase timing diagram according to claim 4, characterized in that: The method of using SVG to draw dynamic elements in the phase timing diagram includes: According to the phase timing diagram parameters, determining the phase area to which the current phase timing diagram belongs; Draw a phase timing diagram, draw an SVG splicing timing diagram through each phase time chain and the phase state chain data, and place it in the center of the X-axis reference line; Calculate the current system time and the width of the displayable area, hide the phase timing diagram outside the displayable area, and run the position of the phase timing diagram from right to left according to the current system time; Bind the drag event to the time column. During the dragging process, calculate the distance between the left and right sides of the phase timing diagram according to the offset, and update the phase timing diagram status that should be displayed in the left and right areas.
6. The method for rendering a phase timing diagram according to claim 1, characterized in that: The hybrid rendering mechanism further includes: Draw the phase timing diagram on the Canvas canvas using SVG to satisfy the conversion formula: In the formula, is the total length of the phase timing diagram on the x-axis, is the duration of the first phase, For the The duration of the phase, It is a scale, which means the pixel length represented by 1 second on a web page; is the position distance of the current phase from left to right on the phase timing diagram, is the cut-off time of the previous phase operation, is the start time of the current phase, is the time of the current phase operation, The time corresponding to the default phase position.
7. The method for rendering a phase timing diagram according to claim 6, characterized in that: The phase time zone to which the current phase belongs is marked by the phase phase time in the initialization phase timing diagram parameters, and the current phase running time is recorded as seconds, including phases, then the running time of the first phase in each corresponding phase is , No. The phase running time is , satisfying the formula: 。 8. A rendering system for a phase timing diagram, characterized in that: A method for rendering a phase timing diagram according to any one of claims 1 to 7 is applied.
9. The phase timing diagram rendering system according to claim 8, characterized in that: The system comprises: Simulate the manual command unit, which is used for users to issue different state commands through buttons, and display the corresponding changes on the phase timing diagram in real time through the transition time; The signal scheme configuration unit is used for users to switch between different intersections to view or edit the signal scheme configuration optimized by the phase timing diagram.
10. The phase timing diagram rendering system according to claim 8, characterized in that: The system further comprises: A traffic data management unit, used for managing and storing data of the signal scheme configuration unit; The communication interface unit provides a communication interface with the traffic signal control system to receive real-time traffic data.