Induction screen graph editing system and method based on Web technology

Abstract

The invention discloses a guide screen graph editing system and method based on a Web technology. The guide screen graph editing system comprises a front-end component framework, a front-end component framework and a rear-end component framework, wherein the front-end component framework comprises a main control component, a canvas component, a toolbar component and an attribute panel component; the graphic engine is integrated in the canvas component and is used for managing canvas rendering, a graphic object life cycle and an interaction event; the graphic editing module is used for drawing characters, geometric figures, local pictures and preset traffic symbols through a toolbar, generating a graphic object carrying a unique ID and storing the graphic object to the graphic object management array; the dynamic data binding module is used for dynamically binding the graphic elements with the real-time traffic data source; and the real-time rendering engine is used for responding to graphic attribute change or data binding operation and updating the canvas in real time through a graphic object event driving mechanism. According to the method, dynamic data direct binding is realized, graphic interaction and real-time editing functions are perfected, refined style control is provided, multi-resolution self-adaption is optimized, and the content editing efficiency and specialty of the induction screen are remarkably improved.

Description

Technical Field

[0001] This invention relates to the field of intelligent transportation information display technology, and in particular to a web-based guidance screen graphic editing system and method. Background Technology

[0002] Current content editing technology for guidance screens suffers from limitations on several levels, including technical architecture, user experience, and data integration. From a technical architecture perspective, traditional solutions often rely on uploading static images or offline creation using professional design software. This approach cannot meet the demands of real-time data-driven dynamic display, resulting in inefficient content updates and difficulty adapting to changing data environments such as traffic conditions. Furthermore, existing technologies lack in-depth optimization for the specific application scenarios of guidance screens, particularly in handling adaptive rendering for unconventional resolutions like ultrawide screens and real-time editing of complex graphic attributes, where performance is subpar.

[0003] Regarding the interactive experience, while some developers utilize general-purpose Canvas libraries (such as Fabric.js) to provide basic graphical manipulation functions, these editors have not yet been deeply optimized for the specific needs of interactive screens. For example, positioning errors frequently occur when performing interactive operations such as dragging, copying, and deleting, especially when dealing with complex resolution adaptation scenarios. Furthermore, the font and graphic style controls provided by these editors are rather crude, failing to meet the refined requirements of professional interactive screen design, and lacking support for secondary editing of graphic attributes.

[0004] At the data integration level, most existing solutions rely on hard coding or simple text replacement, which makes it difficult to support the intelligent binding and dynamic updating of structured data (such as real-time traffic conditions, OD information, and violation data). For example, real-time traffic data needs to be correlated with the dynamic content of the guidance screen in real time, but existing editing tools struggle to automate this dynamic modification, requiring users to make frequent manual adjustments, which is inefficient and prone to errors. In summary, current technical solutions have significant shortcomings in terms of technical architecture, user experience, and data integration, necessitating more advanced and professional guidance screen graphic editing tools to address these issues. Summary of the Invention

[0005] The purpose of this invention is to overcome the shortcomings of the existing technology. To achieve the above objective, a web-based guided screen graphic editing system and method are adopted to solve the problems mentioned in the background technology.

[0006] A web-based guided screen graphic editing system includes a front-end component architecture and a back-end processing module; The front-end component architecture includes a main control component, a canvas component, a toolbar component, and a property panel component; The main control component is responsible for overall status management, data flow, and coordination of various sub-components; The canvas component is responsible for Canvas rendering, graphics object management, and interactive event handling. The toolbar component provides functions for drawing graphics, uploading images, inserting traffic symbols, undoing, copying, and deleting. The attribute panel component is used to support graphic style adjustment, data binding, and traffic segment selection; The backend processing module includes a graphics engine, a graphics editing module, a dynamic data binding module, and a real-time rendering engine; The graphics engine is integrated into the canvas component and is used to manage canvas rendering, the lifecycle of graphics objects, and interactive events. The graphic editing module is used to support drawing text, geometric shapes, local images and preset traffic symbols through the toolbar, generating graphic objects with unique IDs and storing them in the graphic object management array; The dynamic data binding module is used to dynamically bind graphic elements to real-time traffic data sources through the attribute panel component. The traffic data sources include road network data, OD data, and parking lot data. The real-time rendering engine is used to respond to changes in graphics attributes or data binding operations, and updates the canvas in real time through an event-driven mechanism.

[0007] As a further aspect of the present invention: all operations of the toolbar component are synchronized by triggering the graphical object management array through events.

[0008] As a further aspect of the present invention: the business data types in the dynamic data binding module are selected through configurable options in the attribute panel, including road segments, OD pairs, and parking lot identifiers; The binding operation triggers a map service linkage and prompts the selected road network segment.

[0009] As a further aspect of the present invention: the preset traffic symbol library includes traffic indicator icons for going straight, turning left, and making a U-turn, and supports clicking to insert into a canvas and editing the style.

[0010] As a further aspect of the present invention, it also includes: The multi-screen splicing adaptation module is used to automatically generate split-screen lines and adjust the canvas size according to the hardware parameters of the induction screen. The canvas scaling controller is used to dynamically adjust the canvas display ratio using an independent scaling component.

[0011] As a further aspect of the present invention, it also includes a structured data export module, which is used to traverse the graphic object management array to extract the geometric attributes, style attributes and bound business data of the graphics, and generate a standardized JSON structure for persistent storage or distribution to the guidance screen terminal.

[0012] As a further aspect of the present invention: the main control component manages the array, the elements business data set, and the currently selected object through state elevation management graphical objects; The property panel component is divided into a style editing page and a data editing page. Style changes are applied to the object in real time through the handleChangeShapeStyle method.

[0013] As a further aspect of the present invention: the graphics drag, zoom, and rotate operations are handled by the built-in event processing encapsulated in the graphics engine, and the business data in elements is updated in real time.

[0014] As a further aspect of the present invention: after a local image is uploaded, a URL is returned via an interface, which is automatically converted into an image object, inserted into the canvas, and added to the graphics object management array.

[0015] The second aspect of the technical solution: A method for a web-based guided screen graphic editing system as described in any of the above claims, comprising the following steps: Step S1: Initialize the front-end component architecture and load the main control component, canvas component, toolbar component, and property panel component; Step S2: Respond to drawing commands on the canvas through the graphics engine, generate a graphics object with a unique ID, and store it in the graphics object management array; Step S3: Respond to the property panel operation, dynamically bind graphic elements to the traffic business data source, and render them to the canvas in real time; Step S4: Insert a preset traffic symbol or upload a local image using the toolbar components to generate an editable object; Step S5: Automatically adapt the canvas size and split-screen lines according to the hardware parameters of the induction screen; Step S6: Export the geometric attributes, style attributes, and bound business data of all graphics in the graphics object management array, and generate standardized JSON output.

[0016] Compared with the prior art, the present invention has the following technical advantages: The above technical solution integrates the main control component, canvas component, toolbar, and attribute panel through a front-end component architecture, and utilizes a graphics object engine to achieve canvas rendering and interaction. It supports the drawing and editing of text, geometric shapes, local images, and preset traffic symbols, generating graphic objects with unique IDs and storing them in a graphics object management array. The attribute panel dynamically binds graphic elements to real-time traffic data (road network, OD, parking data) and updates the canvas in real-time based on an event-driven mechanism. Highly efficient editing and real-time rendering: The front-end component architecture and graphics object architecture enable WYSIWYG graphic operations, with instant rendering of attribute / data changes, significantly improving the efficiency of traffic guidance screen content editing; Intelligent data-driven: Dynamically binding traffic business data supports road segment selection and map linkage, allowing the guidance screen content to be intelligently updated according to real-time traffic conditions; Functional scalability and ease of use: Multiple types of graphics and an expandable traffic symbol library meet complex guidance needs, lowering the professional design threshold, allowing ordinary users to complete professional-level content creation; Technical universality: Component-based design ensures the system can adapt to different hardware environments (such as multi-screen splicing), and standardized JSON output facilitates integration with downstream systems. Attached Figure Description

[0017] The specific embodiments of the present invention will now be described in detail with reference to the accompanying drawings: Figure 1 This is a schematic diagram of the system architecture of an embodiment disclosed in this application; Figure 2 This is a demonstration image of the graphical editor for the guidance screen according to an embodiment of this application; Figure 3 The embodiments disclosed in this application are based on Figure 2 The text and effect images of the graphic editor used to display the comparative information are shown below. Figure 4 The embodiments disclosed in this application are based on Figure 2 The text in the comparative display of the graphic editor for the guided screen is shown in two different images. Figure 5 The embodiments disclosed in this application are based on Figure 2 The comparison showcases the traffic condition effects using text and graphics from the traffic guidance screen graphic editor. Figure 1 ; Figure 6 The embodiments disclosed in this application are based on Figure 2 The comparison showcases the traffic condition effects using text and graphics from the traffic guidance screen graphic editor. Figure 2 ; Figure 7 The embodiments disclosed in this application are based on Figure 3 A schematic diagram of the graphical editor component for the induction screen, for example; Figure 8 This is a timing diagram of the guided screen graphic editing method according to an embodiment of this application; Figure 9 This is a flowchart of the induction screen graphic editing method according to an embodiment of this application. Detailed Implementation

[0018] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0019] Please refer to Figure 1 In this embodiment of the invention, a web-based guided screen graphic editing system includes a React front-end component architecture and a back-end processing module; The React front-end component architecture includes a main control component, a canvas component, a toolbar component, and a property panel component; The main control component is responsible for overall status management, data flow, and coordination of various sub-components; The canvas component is responsible for Canvas rendering, graphics object management, and interactive event handling. The toolbar component provides functions for drawing graphics, uploading images, inserting traffic symbols, undoing, copying, and deleting. The attribute panel component is used to support graphic style adjustment, data binding, and traffic segment selection; Specifically, such as Figure 1 As shown, the diagram is a schematic of the system architecture; like Figure 2 As shown, the illustration is a display effect of the induction screen graphic editor; The main control component, SketchEditor, is responsible for overall state management, data flow, and coordination among sub-components.

[0020] The Sketch component, powered by Fabric.js, is responsible for Canvas rendering, graphical object management, and interactive event handling.

[0021] ToolBox component: Provides entry points for operations such as drawing graphics, uploading images, inserting traffic symbols, undoing, copying, and deleting.

[0022] In this embodiment, all operations of the toolbar component are synchronized by triggering the graphical object management array through events.

[0023] The AttributeBox component is divided into style editing and data editing, and supports graphic style adjustment, data binding, traffic segment selection, etc.

[0024] ScaleTool: Supports canvas scaling, enhancing the editing experience.

[0025] The backend processing module includes a graphics engine, a graphics editing module, a dynamic data binding module, and a real-time rendering engine; The graphics engine is integrated into the canvas component and is used to manage canvas rendering, the lifecycle of graphics objects, and interactive events. The graphics engine can be implemented based on graphics libraries such as Fabric.js and integrated into the canvas component to uniformly manage canvas rendering, the lifecycle of graphics objects, and the encapsulation of interactive events.

[0026] In one specific implementation, the front-end architecture is developed using a component-based framework such as React. Canvas rendering and graphics object management preferably use the Fabric.js library as the underlying support. Graphics objects generated by the graphics editing module can be instantiated as Fabric.js objects at the underlying level and are uniformly managed in a graphics object management array named customShapes.

[0027] The graphic editing module is used to support drawing text, geometric shapes, local images and preset traffic symbols through the toolbar, generating graphic objects with unique IDs and storing them in the graphic object management array; In this embodiment, the graphics drawing and management are as follows: Users select the graphic type (such as rectangle, circle, text, image, preset image, etc.) through the toolbar component in the upper right corner, and the Sketch canvas component enters the corresponding drawing mode according to the type.

[0028] Once the drawing is complete, a graphic object is generated, assigned a unique ID, added to the graphic object management array, and synchronized to the elements data structure.

[0029] It supports operations such as selecting, dragging, scaling, rotating, copying, and deleting graphics. All operations are event-driven, updating the canvas and data in real time.

[0030] The dynamic data binding module is used to dynamically bind graphic elements to real-time traffic data sources through the attribute panel component. The traffic data sources include road network data, OD data, and parking lot data. In this embodiment, the business data types in the dynamic data binding module can be selected through the configurable options in the attribute panel, including road segments, OD pairs, and parking lot identifiers. The binding operation triggers a map service linkage and prompts the selected road network segment.

[0031] Specifically, the data editing supports type selection, binding of business data such as road segments / OD / parking lots, and some fields are linked with map data.

[0032] In this embodiment, the preset traffic symbol library includes traffic indicator icons for going straight, turning left, and making a U-turn, and supports clicking to insert a canvas and editing the style.

[0033] The real-time rendering engine is used to respond to changes in graphics attributes or data binding operations, and updates the canvas in real time through an event-driven mechanism.

[0034] like Figure 3 As shown in the figure, the diagram is as follows: Figure 2 The text and effect images of the graphic editor used to display the comparative information are shown below. like Figure 4 As shown in the figure, the diagram is as follows: Figure 2 The text in the comparative display of the graphic editor for the guided screen is shown in two different images. This embodiment also includes: The multi-screen splicing adaptation module is used to automatically generate split-screen lines and adjust the canvas size according to the hardware parameters of the induction screen. The canvas scaling controller is used to dynamically adjust the canvas display ratio using an independent scaling component.

[0035] In this embodiment, a structured data export module is also included, which is used to traverse the graphic object management array to extract the geometric attributes, style attributes and bound business data of the graphics, and generate a standardized JSON structure for persistent storage or distribution to the guidance screen terminal.

[0036] In this embodiment, the main control component manages the array, the elements business data set, and the currently selected object through state elevation management graphical objects; The main data structure is as follows: customShapes: Stores all custom graphic objects and their properties.

[0037] elements: Store business data bound to the graph (such as element_id, element_type, element_content, etc.).

[0038] selectedShape: The currently selected graphic object, which facilitates attribute editing and manipulation.

[0039] The property panel component is divided into a style editing page and a data editing page. Style changes are applied to the object in real time through the handleChangeShapeStyle method.

[0040] Specifically, style and attribute editing When a graphic is selected, the AttributeBox property panel component automatically displays the style and data properties of the current graphic.

[0041] Style editing supports changes to color, line width, font, size, and transparency. All changes are applied to the object and rendered in real time via the handleChangeShapeStyle method.

[0042] In this embodiment, the graphics drag, zoom, and rotate operations are handled by the built-in event processing encapsulated by the graphics engine, which updates the business data in elements in real time.

[0043] In this embodiment, after a local image is uploaded, a URL is returned via an interface, which is automatically converted into an image object, inserted into the canvas, and added to the graphics object management array.

[0044] like Figure 5 As shown in the figure, the diagram is as follows: Figure 2 The comparison showcases the traffic condition effects using text and graphics from the traffic guidance screen graphic editor. Figure 1 ; like Figure 6 As shown in the figure, the diagram is as follows: Figure 2 The comparison showcases the traffic condition effects using text and graphics from the traffic guidance screen graphic editor. Figure 2 ; like Figure 7 As shown in the figure, the diagram is as follows: Figure 3 A schematic diagram of the graphical editor component for the induction screen, for example; Specifically, the steps for inserting images and traffic symbols are as follows: It supports uploading local images. After uploading, the URL is returned via the interface, and the image is automatically inserted into the canvas.

[0045] Traffic symbols (such as going straight, turning left, U-turn, etc.) are inserted into the canvas and can be edited by clicking on preset image resources.

[0046] The steps for canvas scaling and multi-screen adaptation are as follows: It supports adjusting the canvas scaling ratio, enhancing the editing experience on large screens.

[0047] It supports automatic drawing of canvas size and split lines for multi-screen splicing guidance screens, adapting to different guidance screen hardware.

[0048] The data export and persistence steps are as follows: The getData method iterates through all customShapes, extracts the geometry, style, and business data of the graphics, and generates a persistent JSON structure for easy rendering or distribution to the induction screen terminal.

[0049] The second aspect of the technical solution: A method for a web-based guided screen graphic editing system as described in any of the above claims, comprising the following steps: like Figure 8 As shown, the diagram illustrates the timing of the guided screen graphic editing method; like Figure 9 As shown, the diagram is a flowchart of the method for editing graphics on a guided screen.

[0050] Step S1: Initialize the React front-end component architecture, and load the main control component, canvas component, toolbar component, and property panel component; Specifically, as shown in the figure, the initialization steps are as follows: Load the main control component and initialize data structures such as customShapes and elements.

[0051] Create a canvas instance and set the default canvas size, background color, and event listeners.

[0052] Initialize sub-components such as toolbar, property box, and zoom tool.

[0053] Step S2: Respond to drawing commands on the canvas through the graphics engine, generate a graphics object with a unique ID, and store it in the graphics object management array; Specifically, the steps for drawing and inserting graphics are as follows: When a user clicks on the toolbar to select a graphic type, the canvas instance enters the corresponding drawing mode.

[0054] Users draw graphics on the canvas using the mouse, generating objects.

[0055] Generate a unique ID and construct a graph data structure.

[0056] Bind events such as selection, dragging, and scaling of graphics to support subsequent editing.

[0057] Step S3: Respond to the property panel operation, dynamically bind graphic elements to the traffic business data source, and render them to the canvas in real time; Specifically, the steps for editing attributes and data are as follows: When a user selects a shape, the properties box component automatically displays the properties of the current shape.

[0058] Users can adjust colors, line widths, fonts, etc. on the style page, and the changes will be applied to the objects in real time.

[0059] Users select a business type (such as road segment, OD, parking lot) on the data page and complete the business data binding by linking with the basic road network and parking lot data on the map.

[0060] Step S4: Insert a preset traffic symbol or upload a local image using the toolbar components to generate an editable object; Specifically, the steps for inserting images and traffic symbols are as follows: When a user clicks the image button on the toolbar, a file selection box pops up, and the uploaded image is automatically inserted into the canvas.

[0061] Users can click the traffic symbol button, select a preset traffic icon, insert it into the canvas, and edit it.

[0062] Step S5: Automatically adapt the canvas size and split-screen lines according to the hardware parameters of the induction screen; Specifically, the steps for canvas scaling and multi-screen adaptation are as follows: Users can adjust the scaling ratio through the scaling component, which is applied to the canvas container in real time to achieve scaling.

[0063] It supports setting multi-screen splicing parameters, automatically drawing split-screen lines, and adapting to different screen hardware.

[0064] Step S6: Export the geometric attributes, style attributes, and bound business data of all graphics in the graphics object management array, and generate standardized JSON output.

[0065] Specifically, the steps for data export and persistence are as follows: After the user completes the editing, a standardized JSON structure can be generated, which can be saved locally, distributed remotely, or stored on the backend.

[0066] The following describes the working principle and process of the embodiments disclosed in this invention:

[0067] Although embodiments of the invention have been shown and described, it will be understood by those skilled in the art that various changes, modifications, substitutions and alterations can be made to these embodiments without departing from the principles and spirit of the invention. The scope of the invention is defined by the appended claims and their equivalents, all of which should be included within the scope of protection of the invention.

Claims

1. A web-based guided screen graphic editing system, characterized in that, This includes the front-end component architecture and the back-end processing module; The front-end component architecture includes a main control component, a canvas component, a toolbar component, and a property panel component; The main control component is responsible for overall status management, data flow, and coordination of various sub-components; The canvas component is responsible for Canvas rendering, graphics object management, and interactive event handling. The toolbar component provides functions for drawing graphics, uploading images, inserting traffic symbols, undoing, copying, and deleting. The attribute panel component is used to support graphic style adjustment, data binding, and traffic segment selection; The backend processing module includes a graphics engine, a graphics editing module, a dynamic data binding module, and a real-time rendering engine; The graphics engine is integrated into the canvas component and is used to manage canvas rendering, the lifecycle of graphics objects, and interactive events. The graphic editing module is used to support drawing text, geometric shapes, local images and preset traffic symbols through the toolbar, generating graphic objects with unique IDs and storing them in the graphic object management array; The dynamic data binding module is used to dynamically bind graphic elements to real-time traffic data sources through the attribute panel component. The traffic data sources include road network data, OD data, and parking lot data. The real-time rendering engine is used to respond to changes in graphics attributes or data binding operations, and updates the canvas in real time through an event-driven mechanism.

2. The Web-based guided screen graphic editing system according to claim 1, characterized in that, All operations of the toolbar component are synchronized by triggering events to update the graphical object management array.

3. The Web-based guided screen graphic editing system according to claim 1, characterized in that, The business data types in the dynamic data binding module can be selected through configurable options in the attribute panel, including road segments, OD pairs, and parking lot identifiers. The binding operation triggers a map service linkage and prompts the selected road network segment.

4. The Web-based guided screen graphic editing system according to claim 1, characterized in that, The preset traffic symbol library includes traffic indicator icons for going straight, turning left, and making a U-turn, and supports clicking to insert into a canvas and editing the style.

5. The Web-based guided screen graphic editing system according to claim 1, characterized in that, Also includes: The multi-screen splicing adaptation module is used to automatically generate split-screen lines and adjust the canvas size according to the hardware parameters of the induction screen. The canvas scaling controller is used to dynamically adjust the canvas display ratio using an independent scaling component.

6. The Web-based guided screen graphic editing system according to claim 1, characterized in that, It also includes a structured data export module, which is used to traverse the graphic object management array to extract the geometric attributes, style attributes and bound business data of the graphics, and generate a standardized JSON structure for persistent storage or distribution to the guidance screen terminal.

7. The Web-based guided screen graphic editing system according to claim 1, characterized in that, The main control component manages the array, the elements business data set, and the currently selected object through state elevation management graphical objects; The property panel component is divided into a style editing page and a data editing page. Style changes are applied to the object in real time through the handleChangeShapeStyle method.

8. The Web-based guided screen graphic editing system according to claim 1, characterized in that, The graphics drag, zoom, and rotate operations are handled by the built-in event processing encapsulated in the graphics engine, which updates the business data in elements in real time.

9. The Web-based guided screen graphic editing system according to claim 1, characterized in that, After a local image is uploaded, the URL returned via the API is automatically converted into an image object, inserted into the canvas, and added to the graphics object management array.

10. A method for using a web-based guided screen graphic editing system as described in any one of claims 1 to 9, characterized in that, Includes the following steps: Step S1: Initialize the front-end component architecture and load the main control component, canvas component, toolbar component, and property panel component; Step S2: Respond to drawing commands on the canvas through the graphics engine, generate a graphics object with a unique ID, and store it in the graphics object management array; Step S3: Respond to the property panel operation, dynamically bind graphic elements to the traffic business data source, and render them to the canvas in real time; Step S4: Insert a preset traffic symbol or upload a local image using the toolbar components to generate an editable object; Step S5: Automatically adapt the canvas size and split-screen lines according to the hardware parameters of the induction screen; Step S6: Export the geometric attributes, style attributes, and bound business data of all graphics in the graphics object management array, and generate standardized JSON output.

Images