Online design method and system of LED display scheme and program product

Abstract

The invention provides an online design method and system for an LED display scheme and a program product, and the method is executed at a Web end, and comprises the steps: editing LED lamp board graphic data generated in a canvas in a drawing mode pre-packaged as SVG in a target page; generating LED module graphic data corresponding to the LED lamp board graphic data in a filling mode editing canvas pre-packaged as SVG in the target page to obtain an LED display scheme; hierarchical isolation is formed between the drawing mode editing canvas and the filling mode editing canvas through nesting, and the canvas sizes and coordinate positions of the drawing mode editing canvas and the filling mode editing canvas are synchronously changed. According to the application, on the basis of improving the development efficiency of the LED display scheme design, an LED display exclusive operation function can be provided, so that the rendering efficiency and reliability of the LED display scheme can be improved, the sharing cooperation convenience is improved, the user experience is improved, and performance optimization is facilitated.

Description

Technical Field

[0001] The present application relates to the technical field of Web front-end development, and in particular to an online design method, system and program product for LED display solutions. Background Art

[0002] Light-emitting diodes, or LEDs for short, are a common light-emitting device that is widely used in the field of lighting. LED display solutions refer to graphic design and management solutions for LED signboards on display screens based on LED development control software and other methods. With the development of informatization and intelligence, the LED industry has put forward higher requirements for design tools. In actual projects, designers not only need to quickly complete the graphic design of signboards, but also need to take into account budget assessment, LED modules, wiring, power consumption statistics and other tasks, and traditional tools are difficult to meet these refined and efficient design requirements. Among them, LED modules refer to products that are packaged after a certain number of light-emitting diodes are arranged in a regular pattern. They are usually used in LED signboards, and multiple modules can be combined into an overall circuit through connecting wires.

[0003] Currently, one of the existing design tools is the Web-based drawing tool, such as ProcessOn, Excalidraw, etc. Although these tools support online drawing, they lack the operation functions that are exclusive to the LED industry, such as module filling, wiring, and statistical functions, which will affect the rendering efficiency and reliability of LED display solutions. The second existing design tool is client software, such as AutoCAD and Adobe Illustrator. These tools are rich in functions, but as client software, they have the following problems:

[0004] (1) Slow startup and loading: requires downloading and installation, which consumes a lot of resources;

[0005] (2) Real-time collaboration is difficult: multiple users cannot operate simultaneously, resulting in low collaboration efficiency;

[0006] (3) Lack of industry-specific functions: The module, wiring, and power supply settings of LED light signs still require manual calculation.

[0007] Based on this, there is an urgent need for a LED industry-specific design tool based on Web technology, which can not only improve the design efficiency of LED display solutions, but also support real-time collaboration and improve rendering efficiency. Summary of the invention

[0008] In view of this, the embodiments of the present application provide an online design method, system and program product for an LED display solution to eliminate or improve one or more defects existing in the prior art.

[0009] One aspect of the present application provides an online design method for an LED display solution, the method being executed on a Web end, the method comprising:

[0010] Based on the currently received LED light board drawing operation data, corresponding LED light board graphic data is generated in a drawing mode editing canvas pre-packaged as SVG in the target page;

[0011] According to the currently received LED module operation data, LED module graphic data corresponding to the LED light board graphic data is generated in the fill mode editing canvas pre-packaged as SVG in the target page to obtain an LED display solution including the LED light board graphic data and the LED module graphic data; wherein the LED module graphic data includes: at least one graphic data of LED module, wiring and battery, the drawing mode editing canvas and the fill mode editing canvas are nested to form a hierarchical isolation, and the canvas size and coordinate position of the drawing mode editing canvas and the fill mode editing canvas are changed synchronously.

[0012] In some embodiments of the present application, before generating corresponding LED light sign graphic data in a drawing mode editing canvas pre-packaged as SVG in a target page based on the currently received LED light sign drawing operation data, the method further includes:

[0013] In a target page built based on the Vue framework, an SVG tag is created and named as a drawing mode editing canvas, and the positioning attribute in the cascading style sheet of the drawing mode editing canvas is set to relative positioning; wherein the LED light board graphic data generated in the drawing mode editing canvas is set under the graphic element grouping tag of the SVG tag;

[0014] Receiving each graphic data for representing the LED module, and defining each graphic data for representing the LED module as a reusable template based on a preset reusable graphic template tag, so as to insert each graphic data for representing the LED module into the fill mode editing canvas based on the preset reusable tag;

[0015] Constructing a sub-SVG tag in the SVG tag and naming it as fill mode editing canvas, and setting the positioning attribute in the cascading style sheet of the fill mode editing canvas so that the fill mode editing canvas completely overlaps with the drawing mode editing canvas and is suspended above the drawing mode editing canvas; wherein the LED module graphic data generated in the fill mode editing canvas is set under the graphic element grouping tag of the sub-SVG tag;

[0016] When the drawing mode editing canvas is activated, the filling mode editing canvas is in a freeze mode that does not respond to mouse events; when the filling mode editing canvas is activated, the drawing mode editing canvas is in a selected mode that only responds to selection events.

[0017] In some embodiments of the present application, the online design method of the LED display solution further includes:

[0018] Cache the LED light board graphic data and canvas information corresponding to the drawing mode editing canvas;

[0019] and, caching the LED module graphic data and canvas information corresponding to the fill mode editing canvas;

[0020] The subordinate relationship between the LED light board graphic data and the LED module graphic data is cached.

[0021] In some embodiments of the present application, the online design method of the LED display solution further includes:

[0022] Monitor in real time whether the graphic data in the canvas currently in the operated state sends a displacement. If so, based on the subordinate relationship between the LED light board graphic data and the LED module graphic data, the coordinate position of the graphic data in the canvas currently not in the operated state is synchronously updated according to the displacement amount of the graphic data in the canvas currently in the operated state, wherein the canvas includes the drawing mode editing canvas or the fill mode editing canvas.

[0023] In some embodiments of the present application, after caching the subordinate relationship between the LED light board graphic data and the LED module graphic data, the method further includes:

[0024] According to the canvas information corresponding to the LED light board graphic data and the drawing mode editing canvas, the canvas information corresponding to the LED module graphic data and the fill mode editing canvas, and the subordinate relationship between the LED light board graphic data and the LED module graphic data, statistical data corresponding to each of the LED light boards are generated, wherein the statistical data include: the quantity and / or price corresponding to each LED module and power supply.

[0025] In some embodiments of the present application, the online design method of the LED display solution further includes:

[0026] Convert the statistical data corresponding to each of the LED light signs into structured data respectively;

[0027] The structured data is exported, and / or the structured data is displayed under the corresponding LED light board graphic data in the drawing mode editing canvas.

[0028] In some embodiments of the present application, the online design method of the LED display solution further includes:

[0029] Send the canvas information corresponding to the LED light board graphic data and the drawing mode editing canvas, the canvas information corresponding to the LED module graphic data and the filling mode editing canvas, and the subordinate relationship between the LED light board graphic data and the LED module graphic data to the server for storage as LED display scheme history data;

[0030] Correspondingly, before generating corresponding LED light board graphic data in the drawing mode editing canvas pre-packaged as SVG in the target page based on the currently received LED light board drawing operation data, it also includes:

[0031] Receive and locally load the LED display scheme historical data sent by the server.

[0032] The second aspect of the present application provides an online design system for LED display solutions, the system running on a Web terminal, the system comprising:

[0033] A graphics editor, for generating corresponding LED light board graphics data in a drawing mode editing canvas pre-packaged as SVG in a target page based on the currently received LED light board drawing operation data;

[0034] A module editor is used to generate LED module graphic data corresponding to the LED light board graphic data in a fill mode editing canvas pre-packaged as SVG in the target page according to the currently received LED module operation data, so as to obtain an LED display solution including the LED light board graphic data and the LED module graphic data; wherein the LED module graphic data includes: at least one graphic data of LED module, wiring and battery, the drawing mode editing canvas and the fill mode editing canvas are nested to form a hierarchical isolation, and the canvas size and coordinate position of the drawing mode editing canvas and the fill mode editing canvas are changed synchronously.

[0035] In some embodiments of the present application, the online design system for the LED display solution further includes: a state manager communicatively connected to the graphic editor and the module editor, respectively, and a statistics manager communicatively connected to the state manager;

[0036] The state manager is used to cache the canvas information corresponding to the LED light board graphic data and the drawing mode editing canvas; and cache the canvas information corresponding to the LED module graphic data and the fill mode editing canvas; cache the subordinate relationship between the LED light board graphic data and the LED module graphic data; monitor in real time whether the graphic data in the canvas currently in the operated state sends a displacement, and if so, according to the subordinate relationship between the LED light board graphic data and the LED module graphic data, according to the displacement amount of the graphic data in the canvas currently in the operated state, the coordinate position of the graphic data in the canvas currently not in the operated state is synchronously updated, wherein the canvas includes the drawing mode editing canvas or the fill mode editing canvas;

[0037] The statistical manager is used to generate statistical data corresponding to each of the LED light boards according to the canvas information corresponding to the LED light board graphic data and the drawing mode editing canvas, the canvas information corresponding to the LED module graphic data and the filling mode editing canvas, and the subordinate relationship between the LED light board graphic data and the LED module graphic data, wherein the statistical data includes: the quantity and / or price corresponding to each LED module and power supply; convert the statistical data corresponding to each of the LED light boards into structured data; export the structured data, and / or display the structured data under the corresponding LED light board graphic data in the drawing mode editing canvas;

[0038] The state manager is also communicatively connected to the server, and correspondingly, the state manager is also used to send the canvas information corresponding to the LED light board graphic data and the drawing mode editing canvas, the canvas information corresponding to the LED module graphic data and the fill mode editing canvas, and the subordinate relationship between the LED light board graphic data and the LED module graphic data to the server for storage as LED display scheme historical data.

[0039] The third aspect of the present application provides a computer program product, including a computer program, which implements the online design method of the LED display solution when executed by a processor.

[0040] The fourth aspect of the present application provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the online design method of the LED display solution.

[0041] The online design method of the LED display solution provided in the present application is executed on the Web side, and based on the currently received LED light board drawing operation data, the corresponding LED light board graphic data is generated in the drawing mode editing canvas pre-packaged as SVG in the target page; according to the currently received LED module operation data, the LED module graphic data corresponding to the LED light board graphic data is generated in the fill mode editing canvas pre-packaged as SVG in the target page, so as to obtain an LED display solution including the LED light board graphic data and the LED module graphic data; wherein the LED module graphic data includes: at least one graphic data of the LED module, wiring and battery, the drawing mode editing canvas and the fill mode editing canvas are nested to form a hierarchical isolation, and the canvas size and coordinate position of the drawing mode editing canvas and the fill mode editing canvas are changed synchronously, which can provide LED display-exclusive operation functions on the basis of improving the development efficiency of the LED display solution design, thereby improving the rendering efficiency and reliability of the LED display solution, and improving the convenience of sharing and collaboration, thereby improving the user experience and facilitating performance optimization.

[0042] Additional advantages, purposes, and features of the present application will be partially described in the following description, and will become partially apparent to those skilled in the art after studying the following, or may be learned from the practice of the present application. The purposes and other advantages of the present application can be achieved and obtained by the structures specifically pointed out in the specification and the drawings.

[0043] Those skilled in the art will understand that the purposes and advantages that can be achieved by the present application are not limited to the above specific description, and the above and other purposes that can be achieved by the present application will be more clearly understood based on the following detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] The drawings described herein are used to provide a further understanding of the present application, constitute a part of the present application, and do not constitute a limitation of the present application. The components in the drawings are not drawn to scale, but are only for the purpose of illustrating the principles of the present application. In order to facilitate the illustration and description of some parts of the present application, the corresponding parts in the drawings may be enlarged, that is, they may become larger relative to other components in the exemplary device actually manufactured according to the present application. In the drawings:

[0045] Figure 1 This is a schematic diagram of a first flow chart of an online design method for an LED display solution in an embodiment of the present application.

[0046] Figure 2 This is a second flow chart of the online design method of the LED display solution in one embodiment of the present application.

[0047] Figure 3 This is a third flow chart of the online design method of the LED display solution in one embodiment of the present application.

[0048] Figure 4 This is a fourth flow chart of the online design method of the LED display solution in one embodiment of the present application.

[0049] Figure 5 A fifth flow chart of an online design method for an LED display solution in an embodiment of the present application.

[0050] Figure 6 This is a first structural schematic diagram of an online design system for an LED display solution in an embodiment of the present application.

[0051] Figure 7 This is a second structural schematic diagram of an online design system for an LED display solution in one embodiment of the present application.

[0052] Figure 8 The present invention is a schematic diagram of the execution logic of the online design method of the LED display solution implemented by the online design system of the LED display solution in the application example of the present application.

[0053] Fig. 9 This is a schematic diagram showing an example of the hierarchical editing effect of the LED light sign graphic data in the graphic editor and the LED module graphic data in the module editor in the application example of the present application. DETAILED DESCRIPTION

[0054] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the implementation modes and the accompanying drawings. Here, the illustrative implementation modes and descriptions of the present application are used to explain the present application, but are not intended to limit the present application.

[0055] It should also be noted here that in order to avoid obscuring the present application due to unnecessary details, only the structures and / or processing steps closely related to the scheme according to the present application are shown in the accompanying drawings, while other details that are not very relevant to the present application are omitted.

[0056] It should be emphasized that the term “include / comprises” when used herein refers to the presence of features, elements, steps or components, but does not exclude the presence or addition of one or more other features, elements, steps or components.

[0057] It should also be noted that, unless otherwise specified, the term “connection” herein may refer not only to a direct connection but also to an indirect connection involving an intermediate.

[0058] Hereinafter, embodiments of the present application will be described with reference to the accompanying drawings. In the accompanying drawings, the same reference numerals represent the same or similar components, or the same or similar steps.

[0059] In order to solve the problems of slow startup and loading, difficulty in real-time collaboration, and lack of industry-specific functions in the existing LED display solution design methods, the embodiments of the present application respectively provide an online design method for an LED display solution, an online design system for an LED display solution for executing the online design method for the LED display solution, a computer program product, and a computer-readable storage medium, which not only support real-time collaboration, but also improve design efficiency.

[0060] The details are described in detail through the following examples.

[0061] Based on this, the embodiment of the present application provides an online design method for an LED display solution that can be implemented by an online design system for an LED display solution, see Figure 1 The online design method of the LED display solution specifically includes the following contents:

[0062] Step 100: Based on the currently received LED light board drawing operation data, corresponding LED light board graphic data is generated in a drawing mode editing canvas pre-packaged as SVG in a target page.

[0063] In one or more embodiments of the present application, SVG (Scalable Vector Graphics) refers to scalable vector graphics, which is used to embed vector graphics in HTML documents, including lines, rectangles, circles, polygons, texts, paths, etc.

[0064] In step 100, the LED light board drawing operation data includes: at least one of the following operations: drawing of basic SVG elements, attribute modification, selection interaction, SVG format export, and canvas restoration through JSON data; the LED light board graphic data includes: graphic data of the LED light board and / or basic graphics.

[0065] Among them, basic SVG elements refer to the basic graphic types or functional tags provided in SVG, which are used to define graphic content, style or interaction, such as <rect>:rectangle, <circle>: Round, <line>:straight line, <path>: Path (can describe any complex graph), <text>:text, <g>: Used to group multiple elements for batch operations (such as moving, scaling, etc.). Basic graphics refer to functional modules used in graphics editors, which are based on the encapsulation of basic SVG elements to achieve specific purposes or behaviors. For example, a basic SVG-based <text>and <line>Components are used to mark the width and height information of the LED light board.

[0066] It is understandable that the drawing mode editing canvas is an SVG tag for providing the functions required for drawing light signs. The functions required for drawing light signs may include drawing basic SVG elements, modifying attributes, selecting interactions, exporting in SVG format, and restoring the canvas through JSON data.

[0067] The drawing mode editing canvas in the above step 100 can be executed by a graphic editing unit (ie, a graphic editor) in an online design system of an LED display solution, and the graphic editor (shpeEditor) provides a drawing mode.

[0068] Step 200: Based on the currently received LED module operation data, generate LED module graphic data corresponding to the LED light board graphic data in the fill mode editing canvas pre-packaged as SVG in the target page to obtain an LED display solution including the LED light board graphic data and the LED module graphic data; wherein the LED module graphic data includes: at least one graphic data of LED module, wiring and battery, the drawing mode editing canvas and the fill mode editing canvas are nested to form a hierarchical isolation, and the canvas size and coordinate position of the drawing mode editing canvas and the fill mode editing canvas are changed synchronously.

[0069] In step 200, the LED module operation data includes at least one operation of connecting or disconnecting an LED module, adding an LED module, wiring an added LED module, adding a power supply to an LED module, and restoring canvas content according to the LED display scheme history data sent by the server;

[0070] The LED module graphic data includes: at least one graphic data of LED module, wiring and power supply added to the selected LED light board graphic data.

[0071] In one or more embodiments of the present application, the fill mode editing canvas is a child SVG tag of the drawing mode editing canvas, and the fill mode editing canvas completely overlaps with the drawing mode editing canvas and is suspended above the drawing mode editing canvas. The fill mode editing canvas is used to provide LED-specific functions, which may include connecting or disconnecting LED modules, adding LED modules, wiring of added LED modules, adding power to LED modules, and restoring canvas content according to LED display solution history data sent by the server.

[0072] The filling mode editing canvas in the above step 200 can be executed by a module editing unit (ie, a module editor) in an online design system for LED display solutions, and the module editor (ledEditor) provides a filling mode.

[0073] It is understandable that the LED display scheme includes the LED light board graphic data and the LED module graphic data. In an example, the LED light board graphic data and the LED module graphic data are both ason data. Therefore, the LED display scheme and subsequent LED display scheme historical data are also json data. It is understandable that json refers to JavaScript object notation, a lightweight data format for data exchange. JavaScript is a web front-end language and a programming language that runs in a browser.

[0074] From the above description, it can be seen that the online design method of the LED display solution provided in the embodiment of the present application can provide LED display-specific operation functions on the basis of improving the development efficiency of the LED display solution design, thereby improving the rendering efficiency and reliability of the LED display solution, and improving the convenience of sharing and collaboration, thereby improving the user experience and facilitating performance optimization.

[0075] In order to further improve the application effectiveness and reliability of the drawing mode editing canvas and the filling mode editing canvas, in an online design method for an LED display solution provided in an embodiment of the present application, see Figure 2 , before step 100 in the online design method of the LED display solution, the following drawing mode editing canvas and filling mode editing canvas construction contents are specifically included:

[0076] Step 010: In the target page built based on the Vue framework, create an SVG tag and name it as the drawing mode editing canvas, and set the positioning attribute in the cascading style sheet of the drawing mode editing canvas to relative positioning; wherein, the LED light board graphic data generated in the drawing mode editing canvas is set under the graphic element grouping tag of the SVG tag.

[0077] It should be noted that the Vue framework refers to the Vue.js framework, which is a front-end framework for building user interfaces. The drawing mode editing canvas can be abbreviated as svg1. The Cascading Style Sheet CSS is an attribute of SVG that can control the element style settings in the entire current target page. The positioning attribute position is a positioning attribute of CSS, which is used to define the position of an element on the page. The relative positioning relative (also known as position: relative) is used to indicate that the element remains in the document flow (that is, it occupies the original position). Correspondingly, the absolute positioning absolute (also known as position: absolute) is used to indicate that the element will be out of the document flow and no longer occupy the original position. The graphic element grouping tag refers to the g tag of SVG (also written as <g>Label), used to group multiple graphic elements.

[0078] Specifically, step 010 can use the Vue framework to build a page and create an SVG tag in the page, which can be named svg1, and set its CSS attribute position to relative, so that child elements can be suspended on svg1 through the CSS attribute position:absolute. svg1 is used as a canvas to initialize the graphic editor (named shpeEditor). The graphic editor is based on the SVG technology stack encapsulation and provides the functions required for drawing light signs, such as drawing basic SVG elements, modifying attributes, selecting interactions, exporting SVG formats, and restoring canvases through JSON data. All drawn light signs and basic graphics are set in svg1. <g>Under the label.

[0079] Step 020: Receive each graphic data for representing the LED module, and define each graphic data for representing the LED module as a reusable template based on a preset reusable graphic template tag, so as to insert each graphic data for representing the LED module into the fill mode editing canvas based on the preset reusable tag.

[0080] It should be noted that the reusable graphic template tag (i.e. <symbol>Tag) refers to the SVG <symbol>Element, used to define a reusable graphic template. The reusable tag (i.e. <use>Tag) is SVG <use>Elements for reuse <symbol>Defined template.

[0081] Specifically, in step 020, the graphic used to represent the LED module is <symbol>Tags are defined as reusable templates and are passed <use>Tags are inserted into the canvas as needed, and their positions, sizes, and other properties can be set, thus avoiding repeated definitions of the same graphics and greatly improving rendering efficiency and development convenience.

[0082] Step 030: Construct a sub-SVG tag within the SVG tag and name it fill mode editing canvas, and set the positioning attributes in the cascading style sheet of the fill mode editing canvas so that the fill mode editing canvas completely overlaps with the drawing mode editing canvas and floats above the drawing mode editing canvas; wherein the LED module graphic data generated in the fill mode editing canvas is set under the graphic element grouping tag of the sub-SVG tag.

[0083] The positioning attribute in the cascading style sheet of the fill mode editing canvas, which is used to make the fill mode editing canvas completely overlap with the drawing mode editing canvas and float above the drawing mode editing canvas, can be set to absolute positioning. In one example, the positioning attribute in the cascading style sheet of the fill mode editing canvas can be set to "position:absolute; top:0; right:0; bottom:0; left:0".

[0084] Specifically, in step 030, a new child SVG tag can be created inside svg1, named svg2, and its CSS attributes can be set to "position:absolute; top:0; right:0; bottom:0; left:0" to completely overlap svg1 and float on the upper layer of svg1. svg2 is used to initialize the LED module editor (named ledEditor). The LED module editor can be simply referred to as the module editor, which is also based on the SVG technology stack package. Since svg2 is a child element of svg1, when the canvas size of svg1 is adjusted, the size of svg2 will also change synchronously, thereby ensuring that the graphic coordinates and sizes of the graphic editor and the module editor are consistent. All LED modules and power graphics are mounted on svg2. <g>The module editor provides exclusive functions for LEDs, such as connecting or disconnecting LED modules, adding LED modules and power supplies, and restoring canvas content based on JSON data.

[0085] When the drawing mode editing canvas is activated, the filling mode editing canvas is in a freeze mode that does not respond to mouse events; when the filling mode editing canvas is activated, the drawing mode editing canvas is in a selected mode that only responds to selection events.

[0086] Specifically, the online design method of LED display solution supports two modes: drawing mode and filling mode, as follows:

[0087] (1) Drawing mode: Activate the graphics editor and freeze the module editor. The module editor does not respond to mouse events and focuses on drawing basic graphics.

[0088] (2) Fill mode: Activate the module editor. The graphic editor only responds to the selection event. For example, after selecting the light board A graphic, the module editor is used to add and edit LED modules for the selected light board A. At this time, all LED modules added by the module editor belong to light board A.

[0089] In order to realize the online status management of the LED display scheme and further improve the sharing and collaboration convenience of the online design of the LED display scheme, in an online design method of the LED display scheme provided in an embodiment of the present application, the step 020 and the step 200 may include the following steps 310 to 330, wherein, see Figure 3 Taking steps 310 to 330 after step 200 as an example, steps 310 to 330 in the online design method of the LED display solution specifically include the following contents:

[0090] Step 310: Cache the LED light board graphic data and canvas information corresponding to the drawing mode editing canvas.

[0091] And, step 320: caching the LED module graphic data and the canvas information corresponding to the fill mode editing canvas.

[0092] Step 330: Cache the subordinate relationship between the LED light board graphic data and the LED module graphic data.

[0093] It can be understood that the LED light board graphic data and the canvas information corresponding to the drawing mode editing canvas can also be written as the graphics and canvas information of the drawing mode, and the graphics and canvas information in the graphic editor are converted into JSON format data and can be represented by shape-json; the LED module graphic data and the canvas information corresponding to the fill mode editing canvas can also be written as information such as the LED module and wiring of the fill mode, and the graphics and canvas information in the LED module editor are converted into JSON format data and can be represented by led-json; the subordinate relationship between the LED light board graphic data and the LED module graphic data can also be written as the subordinate relationship between graphics, and the subordinate relationship between graphics can be converted into JSON format data and can be represented by relationship-json.

[0094] The functional module for executing steps 310 to 330 in the online design system of the LED display solution may be a state manager, which may be abbreviated as stateStore. StateStore refers to a state storage class for collecting and managing graphic information.

[0095] Specifically, the stateStore class is written in JavaScript as a state management tool. When initializing or operating graphics, the stateStore collects the number, type, and ID information of graphics by calling the relevant methods provided by the graphics editor and module editor, and provides data for statistics. It also manages the subordinate relationship between the two editor graphics.

[0096] In order to further improve the reliability of collaborative operation between graphics in the online design process of the LED display solution, in an online design method of an LED display solution provided in an embodiment of the present application, see Figure 3 , the step 330 in the online design method of the LED display solution further specifically includes the following contents:

[0097] Step 340: Monitor in real time whether the graphic data in the canvas currently in the operated state sends a displacement. If so, based on the subordinate relationship between the LED light board graphic data and the LED module graphic data, the coordinate position of the graphic data in the canvas that is not currently in the operated state is synchronously updated according to the displacement of the graphic data in the canvas currently in the operated state, wherein the canvas includes the drawing mode editing canvas or the fill mode editing canvas.

[0098] The functional module for executing step 340 in the online design system of the LED display solution may also be the state manager.

[0099] That is to say, the state manager also handles the collaborative operations between graphics, for example: monitoring the movement of light sign A, calculating the displacement, and synchronously updating the position of its LED module according to the subordinate relationship.

[0100] In order to further improve the reliability of collaborative operation between graphics in the online design process of the LED display solution, in an online design method of an LED display solution provided in an embodiment of the present application, see Figure 4 , the step 340 in the online design method of the LED display solution further specifically includes the following contents:

[0101] Step 410: Generate statistical data corresponding to each of the LED light boards based on the canvas information corresponding to the LED light board graphic data and the drawing mode editing canvas, the canvas information corresponding to the LED module graphic data and the fill mode editing canvas, and the subordinate relationship between the LED light board graphic data and the LED module graphic data, wherein the statistical data include: the quantity and / or price corresponding to each LED module and power supply.

[0102] The functional module for executing step 410 in the online design system of the LED display solution may be a statistics manager, which may be abbreviated as statistic. Statistic is a statistics manager class for counting and formatting data.

[0103] In order to further improve the comprehensiveness and application reliability of the LED display-specific operation functions, in an online design method for an LED display solution provided in an embodiment of the present application, see Figure 4 , the step 410 in the online design method of the LED display solution further specifically includes the following contents:

[0104] Step 420: Convert the statistical data corresponding to each of the LED light signs into structured data.

[0105] Specifically, in step 420, JavaScript can be used to write a statistic class as a statistical tool. According to the data provided by the state manager, the number of LED modules and power supplies of each light board is counted and formatted into structured data.

[0106] Step 430: exporting the structured data, and / or displaying the structured data under the corresponding LED light board graphic data in the drawing mode editing canvas.

[0107] Specifically, step 430 can utilize the text drawing function provided by shpeEditor to display the statistical results under the corresponding graph, or export them as an Excel file.

[0108] The functional module for executing steps 420 and 430 in the online design system of the LED display solution may also be a statistical manager.

[0109] In order to further improve the editing convenience and reliability during the online design process of the LED display solution, in an online design method for an LED display solution provided in an embodiment of the present application, see Figure 5 , the step 430 in the online design method of the LED display solution further specifically includes the following contents:

[0110] Step 510: Send the canvas information corresponding to the LED light board graphic data and the drawing mode editing canvas, the canvas information corresponding to the LED module graphic data and the fill mode editing canvas, and the subordinate relationship between the LED light board graphic data and the LED module graphic data to the server for storage as LED display solution historical data.

[0111] Specifically, the graphics and canvas information of shpeEditor are saved as JSON (named shape-json); the graphics and canvas information of ledEditor are saved as JSON (named led-json); the graphics affiliation of stateStore is saved as JSON (named relationship-json); and finally these three types of JSON data are stored on the server through the backend interface. The next time you open it or others access it, you can request these three parts of data through the interface and load them into shpeEditor, ledEditor and stateStore in turn, so that the page and graphics logical relationship can be completely restored and editing can continue based on this.

[0112] For the corresponding Figure 5 , after step 030 and before step 100 in the online design method of the LED display solution, the following contents are specifically included:

[0113] Step 040: Receive and locally load the LED display solution historical data sent by the server.

[0114] That is to say, the online design method of the LED display solution provided in the embodiment of the present application designs a multi-layer separated dual editor mode through Web architecture and SVG technology to meet the design requirements of the LED industry and realize efficient graphic data storage and statistical functions. The core improvements are as follows:

[0115] 1.Dual editor layered design:

[0116] (1) Drawing mode (Shape Editor): used to draw light sign shapes and basic graphics.

[0117] (2) Fill Mode (LED Editor): Used to provide LED-specific operations, adding LED modules, wiring, and power supplies to the selected light board graphics;

[0118] (3) Hierarchical management: The two editors are built based on SVG and achieve hierarchical isolation through nesting while keeping the size and coordinates synchronized.

[0119] 2. Status and data management:

[0120] (1) State Manager (StateStore): collects and manages graphics information and dependencies;

[0121] (2) Statistic Manager: Combines data such as LED module price and power supply power to dynamically generate statistical results and visualize them.

[0122] 3. Hierarchical data storage and recovery:

[0123] (1) Data is stored in JSON format and divided into three categories:

[0124] shape-json: graphics and canvas information for drawing mode;

[0125] led-json: fill mode LED module and wiring information;

[0126] relationship-json: the dependencies between graphs;

[0127] (3) Load JSON data through the interface to achieve cross-user and cross-device sharing and collaboration.

[0128] To sum up, the online design method of the LED display solution provided in the embodiment of the present application is a web-based solution; it is based on SVG technology and is nested in two layers of initialization editors, layered rendering, and layered operations; it is divided into drawing mode and filling mode, the drawing mode draws light signs and graphics, and the filling mode performs LED-exclusive operations; the state manager json format is used to collect graphic information data, subordinate relationships, and coordinate the position of graphics; the statistical manager is used to format data and provide statistical functions; when saving, the data is divided into three types of json for storage.

[0129] From the software level, the present application also provides an online design system for LED display solutions for executing all or part of the online design method for LED display solutions, see Figure 6 The online design system of the LED display solution specifically includes the following contents:

[0130] The graphic editor 10 is used to generate corresponding LED light board graphic data in a drawing mode editing canvas pre-packaged as SVG in a target page based on the currently received LED light board drawing operation data.

[0131] The module editor 20 is used to generate LED module graphic data corresponding to the LED light board graphic data in the fill mode editing canvas pre-packaged as SVG in the target page according to the currently received LED module operation data, so as to obtain an LED display solution including the LED light board graphic data and the LED module graphic data; wherein the LED module graphic data includes: at least one graphic data of LED module, wiring and battery, the drawing mode editing canvas and the fill mode editing canvas are nested to form a hierarchical isolation, and the canvas size and coordinate position of the drawing mode editing canvas and the fill mode editing canvas are changed synchronously.

[0132] The embodiment of the online design system of the LED display solution provided in the present application can be specifically used to execute the processing flow of the embodiment of the online design method of the LED display solution in the above-mentioned embodiment. Its functions are not repeated here, and reference can be made to the detailed description of the embodiment of the online design method of the above-mentioned LED display solution.

[0133] The part of the online design system of the LED display solution that performs online design of the LED display solution can be completed in the browser Web terminal of the client device. The Web terminal refers to an application or service that is accessed and used through a Web browser. Unlike traditional desktop applications, Web-side applications do not need to be installed on the user's computer, but can be used through a browser. They are cross-platform and can run on different operating systems. Specifically, the selection can be made based on the processing power of the Web terminal, as well as the limitations of the user's usage scenarios. This application does not limit this. All operations are completed in the Web terminal, and the Web-side application is used for specific processing of the online design of the LED display solution.

[0134] The client device may have a communication module (i.e., a communication unit) that can communicate with a remote server to achieve data transmission with the server. The server may include a server on the task scheduling center side, and other implementation scenarios may also include a server on an intermediate platform, such as a server on a third-party server platform that has a communication link with the task scheduling center server. The server may include a single computer device, or a server cluster consisting of multiple servers, or a server structure of a distributed device.

[0135] The server and the client device may communicate with each other using any suitable network protocol, including network protocols that have not yet been developed on the date of filing this application. The network protocols may include, for example, TCP / IP, UDP / IP, HTTP, HTTPS, etc. Of course, the network protocols may also include, for example, RPC (Remote Procedure Call Protocol) and REST (Representational State Transfer) protocols used on top of the above protocols.

[0136] From the above description, it can be seen that the online design system of the LED display solution provided in the embodiment of the present application can provide LED display-specific operation functions on the basis of improving the development efficiency of the LED display solution design, thereby improving the rendering efficiency and reliability of the LED display solution, and improving the convenience of sharing and collaboration, thereby improving the user experience and facilitating performance optimization.

[0137] In order to further improve the application effectiveness and reliability of the online design system for LED display solutions, see Figure 7 The online design system of the LED display solution also specifically includes the following contents:

[0138] A state manager 30 connected to the graphic editor 10 and the module editor 20 respectively, and a statistics manager 40 connected to the state manager 30;

[0139] The state manager 30 is used to cache the canvas information corresponding to the LED light board graphic data and the drawing mode editing canvas; and cache the canvas information corresponding to the LED module graphic data and the filling mode editing canvas; cache the subordinate relationship between the LED light board graphic data and the LED module graphic data; monitor in real time whether the graphic data in the canvas currently in the operated state sends a displacement, and if so, according to the subordinate relationship between the LED light board graphic data and the LED module graphic data, according to the displacement amount of the graphic data in the canvas currently in the operated state, the coordinate position of the graphic data in the canvas currently not in the operated state is synchronously updated, wherein the canvas includes the drawing mode editing canvas or the filling mode editing canvas;

[0140] The statistical manager 40 is used to generate statistical data corresponding to each of the LED light boards according to the canvas information corresponding to the LED light board graphic data and the drawing mode editing canvas, the canvas information corresponding to the LED module graphic data and the filling mode editing canvas, and the subordinate relationship between the LED light board graphic data and the LED module graphic data, wherein the statistical data includes: the quantity and / or price corresponding to each LED module and power supply; convert the statistical data corresponding to each of the LED light boards into structured data; export the structured data, and / or display the structured data under the corresponding LED light board graphic data in the drawing mode editing canvas;

[0141] The state manager is also communicatively connected to the server 50. Correspondingly, the state manager is also used to send the canvas information corresponding to the LED light board graphic data and the drawing mode editing canvas, the canvas information corresponding to the LED module graphic data and the fill mode editing canvas, and the subordinate relationship between the LED light board graphic data and the LED module graphic data to the server for storage as LED display scheme historical data.

[0142] In order to further illustrate the above technical solution, the present application also provides a specific application example of an online design method for an LED display solution using an online design system for an LED display solution, see Figure 8 The online design method of the LED display solution specifically includes the following contents:

[0143] 1. Use the Vue framework to build a page, and create an SVG tag in the page, named svg1, and set its CSS attribute position to relative, so that child elements can be suspended on svg1 through the CSS attribute position:absolute. svg1 is used as a canvas to initialize the graphic editor (named shpeEditor). shpeEditor is based on the SVG technology stack encapsulation and provides the functions required for drawing light signs, such as drawing basic SVG elements, modifying attributes, selecting interactions, exporting SVG format, and restoring canvas through JSON data. All drawn light signs and basic graphics are mounted on svg1. <g>Under the label.

[0144] 2. Graphics used to represent LED modules <symbol>Tags are defined as reusable templates and are passed <use>Tags are inserted into the canvas as needed, and their positions, sizes, and other properties can be set, thus avoiding repeated definitions of the same graphics, greatly improving rendering efficiency and development convenience.

[0145] 3. Create a sub-SVG tag inside svg1 and name it svg2. Set its CSS properties to "position:absolute; top:0; right:0; bottom:0; left:0" to make it completely overlap with svg1 and float on the upper layer of svg1. svg2 is used to initialize the LED module editor (named ledEditor), which is also encapsulated based on the SVG technology stack. Since svg2 is a child element of svg1, when the canvas size of svg1 is adjusted, the size of svg2 will also change synchronously, thus ensuring that the graphic coordinates and sizes of shpeEditor and ledEditor are consistent. All LED modules and power supply graphics are mounted on svg2. <g>Under the tag, the graphics managed by shpeEditor are isolated. ledEditor provides exclusive functions for LEDs, such as connecting or disconnecting LED modules, adding LED modules and power supplies, and restoring canvas content based on JSON data.

[0146] In one example, the hierarchical editing of the LED light board graphic data in the graphic editor and the LED module graphic data in the module editor is as follows: Fig. 9 As shown. Among them, "<svg id="svg1"> " refers to the outer container of the SVG canvas, which is used to initialize the graphics editor and serves as the main canvas of the graphics editor; <g> …< / g> It is a grouping tag, which represents the container of all LED light signs and basic graphics in the graphic editor;<svg id="svg2"> " refers to another SVG sub-canvas, nested in svg1, used to initialize the module editor and serve as the main canvas of the module editor; <g> …< / g> Is a grouping label, indicating the container of all LED modules and power graphics in the module editor; "" refers to each <svg>The closing tag of the SVG container.

[0147] 4. The system supports two modes: drawing mode and filling mode.

[0148] Drawing mode: activate shpeEditor and freeze ledEditor. The ledEditor does not respond to mouse events and focuses on drawing basic graphics.

[0149] Fill mode: Activate ledEditor, which only responds to selection events. For example, after selecting light board A, ledEditor is used to add and edit LED modules for the selected light board A. At this time, all LED modules added by ledEditor belong to light board A.

[0150] 5. State management, use JavaScript to write the stateStore class as a state management tool. When initializing or operating graphics, stateStore collects the number, type, and ID information of graphics by calling the relevant methods provided by shpeEditor and ledEditor, and provides data for statistics. At the same time, it also manages the subordinate relationship between the two editor graphics, as shown in Table 1.

[0151] Table 1

[0152]

[0153] In addition, stateStore also handles collaborative operations between graphics, such as monitoring the movement of light sign A, calculating the displacement, and synchronously updating the position of its LED module based on the subordinate relationship.

[0154] 6. Statistics management: Use JavaScript to write the statistic class as a statistical tool. According to the data provided by the state manager, count the number of LED modules and power supplies of each light board, calculate the price, etc., and format it into structured data, as shown in Table 2.

[0155] Table 2

[0156]

[0157] Then use the text drawing function provided by shpeEditor to display the statistical results under the corresponding graph, or export them as Excel files.

[0158] 7. Data preservation and recovery, store the graphics information in the state manager hierarchically, specifically:

[0159] The graphics and canvas information of shpeEditor are saved as JSON (named shape-json);

[0160] The graphics and canvas information of ledEditor are saved as JSON (named led-json);

[0161] The stateStore graph dependency is saved as JSON (named relationship-json);

[0162] Finally, these three types of JSON data are stored on the server through the backend interface. The next time you open it or others access it, you can request these three parts of data through the interface and load them into shpeEditor, ledEditor and stateStore in turn, so that the page and graphic logical relationship can be completely restored and editing can continue based on this.

[0163] Compared with the above-mentioned application examples of the present application, if a single editor is used to manage the light board drawing and LED module filling operations at the same time, and all graphic operations are integrated into one level, functional separation cannot be achieved, the operation complexity is high, and performance optimization is limited, especially when there are many graphic elements on the page, the rendering efficiency may drop significantly. If a multi-layer editor is nested on the basis of SVG, and the drawing operation and LED module operation are further subdivided, such as an independent editing layer for each light board, or a separate operation layer is added for power supply, wiring, etc., the complexity will be greatly increased, which may lead to a significant increase in performance overhead, especially after multi-layer nesting, the difficulty of synchronization logic and rendering management will increase; if SVG is replaced with HTML5Canvas, the light board and LED module are drawn directly on the canvas, and the interaction logic is implemented through JavaScript, but because Canvas does not have the DOM structure of SVG, it will lead to a lack of direct graphic element operation capabilities, complex event binding, and high development and maintenance costs.

[0164] Therefore, the online design method and system of the LED display solution provided by the above application example of this application can meet the operation needs of the LED industry and improve work efficiency, realize shared collaboration, and improve rendering efficiency, with the following beneficial effects:

[0165] 1. The web-based architecture facilitates sharing and collaboration.

[0166] 2. Initialize the editor in two layers, render in layers, and operate in layers:

[0167] (1) The user experience is improved. Different interactive plug-ins and interactive logic can be added to each layer. The drawing mode focuses on interactive operations of drawing, and the fill mode focuses on LED-related exclusive operations.

[0168] (2) It is user-friendly and intuitive. The operation is divided into drawing mode and filling mode. In actual operation, the light board is made first, and then the wiring and assembly of the LED module are carried out.

[0169] (3) It is beneficial to performance optimization. When editing graphics with shpeEditor, most of the time, you do not need to care about the LED module. You can hide the content of ledEditor to improve the rendering speed. At the same time, when there are too many elements on the page, you can load the content of shpeEditor first, and then load the content of ledEditor to prevent too many page rendering blocks at once.

[0170] 3. Improve development efficiency, two layers of SVG are nested, and the size and coordinates are synchronized, saving the code of synchronizing the position and size of graphics in two layers of editors.

[0171] 4. Industry-specific functions, providing LED module filling, wiring and statistics functions.

[0172] The embodiment of the present application also provides an electronic device, which may include a processor, a memory, a receiver and a transmitter, wherein the processor is used to execute the above-mentioned Web-side application, and the Web-side application is used for specific processing of online design of LED display solutions. The processor and the memory may be connected via a bus or other means, with the bus connection being taken as an example. The receiver may be connected to the processor and the memory via a wired or wireless manner.

[0173] The processor may be a central processing unit (CPU). The processor may also be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, or a combination of the above chips.

[0174] As a non-transient computer-readable storage medium, the memory can be used to store non-transient software programs, non-transient computer executable programs and modules, such as program instructions / modules corresponding to the online design method of the LED display solution in the embodiment of the present application. The processor executes various functional applications and data processing of the processor by running the non-transient software programs, instructions and modules stored in the memory, that is, the online design method of the LED display solution in the above method embodiment is realized.

[0175] The memory may include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function; the data storage area may store data created by the processor, etc. In addition, the memory may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other non-volatile solid-state storage device. In some embodiments, the memory may optionally include a memory remotely arranged relative to the processor, and these remote memories may be connected to the processor via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.

[0176] The one or more modules are stored in the memory, and when executed by the processor, the online design method of the LED display solution in the embodiment is executed.

[0177] In some embodiments of the present application, the user equipment may include a processor, a memory, and a transceiver unit, which may include a receiver and a transmitter. The processor, memory, receiver, and transmitter may be connected through a bus system. The memory is used to store computer instructions, and the processor is used to execute the computer instructions stored in the memory to control the transceiver unit to send and receive signals.

[0178] As an implementation method, the functions of the receiver and the transmitter in the present application can be considered to be implemented through a transceiver circuit or a dedicated chip for transceiver, and the processor can be considered to be implemented through a dedicated processing chip, a processing circuit or a general chip.

[0179] As another implementation method, it is possible to use a general-purpose computer to implement the server provided in the embodiment of the present application, that is, to store the program code for implementing the functions of the processor, receiver, and transmitter in a memory, and the general-purpose processor implements the functions of the processor, receiver, and transmitter by executing the code in the memory.

[0180] The embodiment of the present application also provides a computer-readable storage medium, on which a computer program is stored, and when the computer program is executed by a processor, the steps of the online design method of the aforementioned LED display scheme are implemented. The computer-readable storage medium can be a tangible storage medium, such as a random access memory (RAM), a memory, a read-only memory (ROM), an electrically programmable ROM, an electrically erasable programmable ROM, a register, a floppy disk, a hard disk, a removable storage disk, a CD-ROM, or any other form of storage medium known in the technical field.

[0181] The embodiment of the present application also provides a computer program product, including a computer program, which, when executed by a processor, implements the steps of the online design method of the aforementioned LED display solution.

[0182] It should be understood by those skilled in the art that the exemplary components, systems and methods described in conjunction with the embodiments disclosed herein can be implemented in hardware, software or a combination of the two. Whether it is specifically performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application. When implemented in hardware, it can be, for example, an electronic circuit, an application specific integrated circuit (ASIC), appropriate firmware, a plug-in, a function card, etc. When implemented in software, the elements of this application are programs or code segments used to perform the required tasks. The program or code segment can be stored in a machine-readable medium, or transmitted on a transmission medium or a communication link via a data signal carried in a carrier.

[0183] It should be clear that the present application is not limited to the specific configuration and processing described above and shown in the figures. For the sake of simplicity, a detailed description of the known method is omitted here. In the above embodiments, several specific steps are described and shown as examples. However, the method process of the present application is not limited to the specific steps described and shown, and those skilled in the art can make various changes, modifications and additions, or change the order between the steps after understanding the spirit of the present application.

[0184] In the present application, features described and / or illustrated for one embodiment may be used in the same manner or in a similar manner in one or more other embodiments, and / or combined with features of other embodiments or replace features of other embodiments.

[0185] The above description is only the preferred embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the embodiments of the present application may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the protection scope of the present application.< / svg> < / g> < / use> < / symbol> < / g> < / g> < / use> < / symbol> < / symbol> < / use> < / use> < / symbol> < / symbol> < / g> < / g> < / line> < / text> < / g> < / text> < / path> < / line> < / circle> < / rect>

Claims

1. An online design method for LED display scheme, characterized in that: The method is executed on a Web side, and includes: Based on the currently received LED light board drawing operation data, corresponding LED light board graphic data is generated in a drawing mode editing canvas pre-packaged as SVG in the target page; According to the currently received LED module operation data, LED module graphic data corresponding to the LED light board graphic data is generated in the fill mode editing canvas pre-packaged as SVG in the target page to obtain an LED display solution including the LED light board graphic data and the LED module graphic data; wherein the LED module graphic data includes: at least one graphic data of LED module, wiring and battery, the drawing mode editing canvas and the fill mode editing canvas are nested to form a hierarchical isolation, and the canvas size and coordinate position of the drawing mode editing canvas and the fill mode editing canvas are changed synchronously.

2. The online design method for LED display scheme according to claim 1, characterized in that: Before generating corresponding LED light board graphic data in the drawing mode editing canvas pre-packaged as SVG in the target page based on the currently received LED light board drawing operation data, the method further includes: In a target page built based on the Vue framework, an SVG tag is created and named as a drawing mode editing canvas, and the positioning attribute in the cascading style sheet of the drawing mode editing canvas is set to relative positioning; wherein the LED light board graphic data generated in the drawing mode editing canvas is set under the graphic element grouping tag of the SVG tag; Receiving each graphic data for representing the LED module, and defining each graphic data for representing the LED module as a reusable template based on a preset reusable graphic template tag, so as to insert each graphic data for representing the LED module into the fill mode editing canvas based on the preset reusable tag; Constructing a sub-SVG tag in the SVG tag and naming it as fill mode editing canvas, and setting the positioning attribute in the cascading style sheet of the fill mode editing canvas so that the fill mode editing canvas completely overlaps with the drawing mode editing canvas and is suspended above the drawing mode editing canvas; wherein the LED module graphic data generated in the fill mode editing canvas is set under the graphic element grouping tag of the sub-SVG tag; When the drawing mode editing canvas is activated, the filling mode editing canvas is in a freeze mode that does not respond to mouse events; when the filling mode editing canvas is activated, the drawing mode editing canvas is in a selected mode that only responds to selection events.

3. The online design method of LED display scheme according to claim 1 or 2, characterized in that: Also includes: Cache the LED light board graphic data and canvas information corresponding to the drawing mode editing canvas; and, caching the LED module graphic data and canvas information corresponding to the fill mode editing canvas; The subordinate relationship between the LED light board graphic data and the LED module graphic data is cached.

4. The online design method for LED display scheme according to claim 3, characterized in that: Also includes: Monitor in real time whether the graphic data in the canvas currently in the operated state sends a displacement. If so, based on the subordinate relationship between the LED light board graphic data and the LED module graphic data, the coordinate position of the graphic data in the canvas currently not in the operated state is synchronously updated according to the displacement amount of the graphic data in the canvas currently in the operated state, wherein the canvas includes the drawing mode editing canvas or the fill mode editing canvas.

5. The online design method for LED display scheme according to claim 3, characterized in that: After caching the subordinate relationship between the LED light board graphic data and the LED module graphic data, the method further includes: According to the canvas information corresponding to the LED light board graphic data and the drawing mode editing canvas, the canvas information corresponding to the LED module graphic data and the fill mode editing canvas, and the subordinate relationship between the LED light board graphic data and the LED module graphic data, statistical data corresponding to each of the LED light boards are generated, wherein the statistical data include: the quantity and / or price corresponding to each LED module and power supply.

6. The online design method for LED display scheme according to claim 5, characterized in that: Also includes: Convert the statistical data corresponding to each of the LED light signs into structured data respectively; The structured data is exported, and / or the structured data is displayed under the corresponding LED light board graphic data in the drawing mode editing canvas.

7. The online design method for LED display scheme according to claim 3, characterized in that: Also includes: Send the canvas information corresponding to the LED light board graphic data and the drawing mode editing canvas, the canvas information corresponding to the LED module graphic data and the filling mode editing canvas, and the subordinate relationship between the LED light board graphic data and the LED module graphic data to the server for storage as LED display scheme history data; Correspondingly, before generating corresponding LED light board graphic data in the drawing mode editing canvas pre-packaged as SVG in the target page based on the currently received LED light board drawing operation data, it also includes: Receive and locally load the LED display scheme historical data sent by the server.

8. An online design system for LED display solutions, characterized in that: The system runs on the Web side and includes: A graphics editor, for generating corresponding LED light board graphics data in a drawing mode editing canvas pre-packaged as SVG in a target page based on the currently received LED light board drawing operation data; A module editor is used to generate LED module graphic data corresponding to the LED light board graphic data in a fill mode editing canvas pre-packaged as SVG in the target page according to the currently received LED module operation data, so as to obtain an LED display solution including the LED light board graphic data and the LED module graphic data; wherein the LED module graphic data includes: at least one graphic data of LED module, wiring and battery, the drawing mode editing canvas and the fill mode editing canvas are nested to form a hierarchical isolation, and the canvas size and coordinate position of the drawing mode editing canvas and the fill mode editing canvas are changed synchronously.

9. The online design system for LED display solutions according to claim 8, characterized in that: Also includes: a state manager connected to the graphic editor and the module editor respectively, and a statistics manager connected to the state manager; The state manager is used to cache the LED light board graphic data and the canvas information corresponding to the drawing mode editing canvas; and, caching the LED module graphic data and canvas information corresponding to the fill mode editing canvas; Cache the subordinate relationship between the LED light board graphic data and the LED module graphic data; Monitor in real time whether the graphic data in the canvas currently in the operated state sends displacement, and if so, according to the subordinate relationship between the LED light board graphic data and the LED module graphic data, synchronously update the coordinate position of the graphic data in the canvas currently not in the operated state according to the displacement amount of the graphic data in the canvas currently in the operated state, wherein the canvas includes the drawing mode editing canvas or the filling mode editing canvas; The statistical manager is used to generate statistical data corresponding to each of the LED light boards according to the canvas information corresponding to the LED light board graphic data and the drawing mode editing canvas, the canvas information corresponding to the LED module graphic data and the filling mode editing canvas, and the subordinate relationship between the LED light board graphic data and the LED module graphic data, wherein the statistical data includes: the quantity and / or price corresponding to each LED module and power supply; convert the statistical data corresponding to each of the LED light boards into structured data; export the structured data, and / or display the structured data under the corresponding LED light board graphic data in the drawing mode editing canvas; The state manager is also communicatively connected to the server, and correspondingly, the state manager is also used to send the canvas information corresponding to the LED light board graphic data and the drawing mode editing canvas, the canvas information corresponding to the LED module graphic data and the fill mode editing canvas, and the subordinate relationship between the LED light board graphic data and the LED module graphic data to the server for storage as LED display scheme historical data.

10. A computer program product, comprising a computer program, characterized in that When the computer program is executed by a processor, the online design method of the LED display solution as claimed in any one of claims 1 to 7 is implemented.

Images