CN109656654B - Editing method of large-screen scene and computer-readable storage medium - Google Patents
Editing method of large-screen scene and computer-readable storage medium Download PDFInfo
- Publication number
- CN109656654B CN109656654B CN201811456810.2A CN201811456810A CN109656654B CN 109656654 B CN109656654 B CN 109656654B CN 201811456810 A CN201811456810 A CN 201811456810A CN 109656654 B CN109656654 B CN 109656654B
- Authority
- CN
- China
- Prior art keywords
- component
- canvas
- operation panel
- attribute
- height
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 18
- 230000002452 interceptive effect Effects 0.000 claims abstract description 53
- 230000003993 interaction Effects 0.000 claims description 44
- 238000004590 computer program Methods 0.000 claims description 4
- 238000011161 development Methods 0.000 abstract description 11
- 230000006978 adaptation Effects 0.000 abstract description 9
- 238000012544 monitoring process Methods 0.000 description 6
- 230000000007 visual effect Effects 0.000 description 4
- 230000002457 bidirectional effect Effects 0.000 description 3
- 238000013461 design Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 230000003044 adaptive effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000014509 gene expression Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Abstract
The invention discloses a method for editing a large-screen scene and a computer readable storage medium, wherein the method comprises the following steps: adjusting the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing end; creating a component template object; adding a newly added component in the canvas by selecting a component template object, adding the newly added component to the tail part of the component list, and assigning the hierarchy attribute value of the newly added component to be the current length value of the component list; adjusting the hierarchical sequence of the components in the component list, and reassigning the hierarchical attribute values of the components according to the hierarchical sequence of the adjusted components in the component list; editing the component attributes of the components in the canvas; and if the edited attribute is the preset interactive attribute, correspondingly modifying the values of the interactive attributes in other components. The invention can reduce the adaptation difficulty of the large screen, shorten the development period of the large screen scene and well embody the data relation.
Description
Technical Field
The invention relates to the technical field of display editing, in particular to an editing method of a large-screen scene and a computer-readable storage medium.
Background
The resolution of the large screen is usually displayed in a large scale, but the large screen is edited at a conventional PC end during editing, and the resolution of the PC end is small, so that the large screen is difficult to edit the display and operate during editing.
Moreover, the existing products are all the displays of some report forms, and only concern data but not relationship and display modes among data.
Therefore, in the prior art, the display and editing of large-screen scenes have the following disadvantages: 1. the development period of the large-screen scene is long; 2. the data relation is difficult to embody; 3. the large screen is difficult to adapt; 4. the data showed boring; 5. the pure data display does not show the relationship between the scene and the data.
Disclosure of Invention
The technical problem to be solved by the invention is as follows: the editing method of the large-screen scene and the computer readable storage medium can reduce the adaptation difficulty of the large screen, shorten the development period of the large-screen scene and well embody the data relation.
In order to solve the technical problems, the invention adopts the technical scheme that: an editing method of a large-screen scene comprises the following steps:
adjusting the size of a canvas operation panel according to the resolution of a large screen and the resolution of an editing end, wherein the canvas operation panel comprises an outer layer of the canvas operation panel, an inner layer of the canvas operation panel and canvas;
creating a component template object;
adding a newly added component in a canvas by selecting a component template object, adding the newly added component to the tail part of a component list, and assigning the hierarchy attribute value of the newly added component to be the current length value of the component list;
adjusting the hierarchical sequence of the components in the component list, and reassigning the hierarchical attribute values of the components according to the hierarchical sequence of the adjusted components in the component list;
editing the component attributes of the components in the canvas;
and if the edited attribute is the preset interactive attribute, correspondingly modifying the values of the interactive attributes in other components.
The invention also relates to a computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the steps of:
adjusting the size of a canvas operation panel according to the resolution of a large screen and the resolution of an editing end, wherein the canvas operation panel comprises an outer layer of the canvas operation panel, an inner layer of the canvas operation panel and canvas;
creating a component template object;
adding a newly added component in a canvas by selecting a component template object, adding the newly added component to the tail part of a component list, and assigning the hierarchy attribute value of the newly added component to be the current length value of the component list;
adjusting the hierarchical sequence of the components in the component list, and reassigning the hierarchical attribute values of the components according to the hierarchical sequence of the adjusted components in the component list;
editing the component attributes of the components in the canvas;
and if the edited attribute is the preset interactive attribute, correspondingly modifying the values of the interactive attributes in other components.
The invention has the beneficial effects that: the problem of difficult adaptation of a large screen is solved by adaptively adjusting the size of the canvas operation panel; by creating the component template object and selecting and editing the component template object, a large-screen scene can be rapidly configured, and the problem of long development period of the large-screen scene is solved; by configuring the interactive attributes among the components, the components can subscribe component events to each other to reflect the data relationship, so that the problem of difficulty in reflecting the data relationship is solved. The invention can reduce the adaptation difficulty of the large screen, shorten the development period of the large screen scene and well embody the data relation.
Drawings
FIG. 1 is a flow chart of a method for editing a large screen scene according to the present invention;
FIG. 2 is a flowchart of a method according to a first embodiment of the present invention;
fig. 3 is a flowchart of the method of step S1 according to the first embodiment of the present invention.
Detailed Description
In order to explain technical contents, objects and effects of the present invention in detail, the following detailed description is given with reference to the accompanying drawings in conjunction with the embodiments.
The most key concept of the invention is as follows: resizing the canvas operations panel to fit the large screen resolution; dynamically configuring component attributes; and configuring interaction attributes among the components.
Referring to fig. 1, a method for editing a large screen scene includes:
adjusting the size of a canvas operation panel according to the resolution of a large screen and the resolution of an editing end, wherein the canvas operation panel comprises an outer layer of the canvas operation panel, an inner layer of the canvas operation panel and canvas;
creating a component template object;
adding a newly added component in a canvas by selecting a component template object, adding the newly added component to the tail part of a component list, and assigning the hierarchy attribute value of the newly added component to be the current length value of the component list;
adjusting the hierarchical sequence of the components in the component list, and reassigning the hierarchical attribute values of the components according to the hierarchical sequence of the adjusted components in the component list;
editing the component attributes of the components in the canvas;
and if the edited attribute is the preset interactive attribute, correspondingly modifying the values of the interactive attributes in other components.
From the above description, the beneficial effects of the present invention are: the adaptation difficulty of the large screen can be reduced, the development period of the large screen scene can be shortened, and the data relation can be well embodied.
Further, the adjusting the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing end specifically includes:
the width and the height of the outer layer of the canvas operation panel are adjusted in a self-adaptive manner;
calculating the width and height of the outer layer of the canvas operation panel according to the resolution of the editing end, and respectively assigning the width and height of the inner layer of the canvas operation panel as the calculated width and height;
assigning the width and the height of the canvas to the width and the height of a large screen respectively;
if the width of the large screen is larger than the width of the inner layer of the canvas operation panel and the height of the large screen is larger than the height of the inner layer of the canvas operation panel, calculating the ratio of the width of the inner layer of the canvas operation panel to the width of the large screen to obtain a first ratio;
calculating the ratio of the height of the inner layer of the canvas operation panel to the height of the large screen to obtain a second ratio;
and obtaining the proportion with smaller value in the first proportion and the second proportion, and reducing the width and the height of the canvas according to the proportion.
As can be seen from the above description, the problem of difficult adaptation of a large screen is solved by adapting the size of the canvas operation panel.
Further, the creating a component template object specifically includes:
configuring basic information of a component, wherein the basic information comprises a type, a number, a name and a hierarchy attribute value;
configuring a display cover picture of the component;
configuring a list of properties for the component.
According to the above description, by creating the component template object, the component can be quickly added through the component template object subsequently, and the problem of long development period of the large-screen scene is solved.
Further, if the edited attribute is a preset interaction attribute, correspondingly modifying the values of the interaction attributes in other components specifically includes:
configuring interaction attributes among the components, and allocating unique identifiers for the interaction attributes;
configuring the on-off state of the interactive attribute;
if the interactive attribute is in an open state and the change of the value of the interactive attribute of one component is monitored, searching the component containing the interactive attribute, and correspondingly modifying the value of the interactive attribute in the searched component.
As can be seen from the above description, the data relationship between the components is embodied by configuring the interaction attributes between the components.
Further, the components comprise a character type component, a material type component, a chart type component, a map component, a function component and a third party expansion component.
As can be seen from the above description, the business scene can be vividly simulated by different types of components, the data interaction can be dynamically shown, and the relationship between the scene and the data can be visually shown.
The invention also proposes a computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the steps of:
adjusting the size of a canvas operation panel according to the resolution of a large screen and the resolution of an editing end, wherein the canvas operation panel comprises an outer layer of the canvas operation panel, an inner layer of the canvas operation panel and canvas;
creating a component template object;
adding a newly added component in a canvas by selecting a component template object, adding the newly added component to the tail part of a component list, and assigning the hierarchy attribute value of the newly added component to be the current length value of the component list;
adjusting the hierarchical sequence of the components in the component list, and reassigning the hierarchical attribute values of the components according to the hierarchical sequence of the adjusted components in the component list;
editing the component attributes of the components in the canvas;
and if the edited attribute is the preset interactive attribute, correspondingly modifying the values of the interactive attributes in other components.
Further, the adjusting the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing end specifically includes:
the width and the height of the outer layer of the canvas operation panel are adjusted in a self-adaptive manner;
calculating the width and height of the outer layer of the canvas operation panel according to the resolution of the editing end, and respectively assigning the width and height of the inner layer of the canvas operation panel as the calculated width and height;
assigning the width and the height of the canvas to the width and the height of a large screen respectively;
if the width of the large screen is larger than the width of the inner layer of the canvas operation panel and the height of the large screen is larger than the height of the inner layer of the canvas operation panel, calculating the ratio of the width of the inner layer of the canvas operation panel to the width of the large screen to obtain a first ratio;
calculating the ratio of the height of the inner layer of the canvas operation panel to the height of the large screen to obtain a second ratio;
and obtaining the proportion with smaller value in the first proportion and the second proportion, and reducing the width and the height of the canvas according to the proportion.
Further, the creating a component template object specifically includes:
configuring basic information of a component, wherein the basic information comprises a type, a number, a name and a hierarchy attribute value;
configuring a display cover picture of the component;
configuring a list of properties for the component.
Further, if the edited attribute is a preset interaction attribute, correspondingly modifying the values of the interaction attributes in other components specifically includes:
configuring interaction attributes among the components, and allocating unique identifiers for the interaction attributes;
configuring the on-off state of the interactive attribute;
if the interactive attribute is in an open state and the change of the value of the interactive attribute of one component is monitored, searching the component containing the interactive attribute, and correspondingly modifying the value of the interactive attribute in the searched component.
Further, the components comprise a character type component, a material type component, a chart type component, a map component, a function component and a third party expansion component.
Example one
Referring to fig. 2-3, a first embodiment of the present invention is: a method for editing a large screen scene, as shown in fig. 2, includes the following steps:
s1: adjusting the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing end; the elements of the canvas operation panel dom are divided into an outer layer of the canvas operation panel, an inner layer of the canvas operation panel and a canvas.
S2: creating a component template object; and large-screen editors can edit and add basic component information and attribute component information in the component management module through the component template editing panel.
Specifically, basic information of a component is configured, wherein the basic information comprises a type, a number, a name and a hierarchy attribute value; configuring a display cover picture of the component; configuring a property list of components, wherein each component object has a component property object, the property object is a json object which is deeply nested and is coded in a character string manner in a 16-system mode, and the property object is stored in a database in a bigblob (the blob is a large binary object and is a container which can store a large amount of data and can contain data with different sizes).
The form of the deep nested object enables the expansibility of component attributes to be strong, a 16-system coding mode enables blob (binary large object) type data not to be analyzed in a binary stream mode, whether special symbols exist in the data or not is not needed to be concerned, and the attribute objects can be json objects with complex structures due to the storage of the bigblob types.
S3: and adding a newly added component into the canvas by selecting a component template object, adding the newly added component into the tail part of the component list, and assigning the hierarchy attribute value of the newly added component as the current length value of the component list. Through the configuration of the step S2, the component adding panel in the editor has more component objects, the large-screen editor can add components in the canvas through the component adding panel, the 16-system decoding is carried out on the component basic information and the component attributes of the component template object, the added components are added to the tail of the component list, and the hierarchy attribute value z-index of the components is assigned to be the current length value of the component list.
S4: and adjusting the hierarchical sequence of the components in the component list, and reassigning the hierarchical attribute values of the components according to the hierarchical sequence of the adjusted components in the component list. The large-screen editor can drag the component sequence through the layer management panel or click the up-down moving button to adjust the component level, and the program can reassign the level attribute value of the component according to the position of the adjusted component in the component list.
S5: editing the component attributes of the components in the canvas; the large screen editor can edit the component properties on the property operating panel by selecting the components in the canvas.
S6: and judging whether the edited attribute is a preset interactive attribute and whether the interactive attribute is in an open state, if so, executing the step S7.
S7: correspondingly modifying the values of the interaction attributes in the other components; specifically, searching the components containing the interaction attribute, and correspondingly modifying the value of the interaction attribute in the searched components.
The embodiment is developed based on vue, has the characteristic of data bidirectional binding, and can change the presentation effect in real time by deep monitoring on the component property object. For example, the css attribute is monitored to change the css attribute in real time, and the data interaction attribute is monitored to acquire data in real time.
In this embodiment, the interaction between the components is implemented by using an observer pattern and a design concept of data bidirectional binding. The interaction attributes are first configured by the component management module. The interaction attribute may set an alias (id-value), which needs to be unique in the current item. And whether the interaction attribute is started or not can be configured on the component editing operation panel, and if the interaction attribute is started, the interaction attribute is added into the global state management interaction attribute queue object for attribute monitoring. When other components edit the data api attribute or the url attribute, an interaction attribute list is popped up for selection when the attribute string is provided with the '$ {' string, and after the selection is finished, the url attribute becomes the following format: 127.0.0.1/xx/xx? id-value $ { id-value } format. When the global state management monitors that the value of the interaction attribute changes, all components with $ { id-value } expressions are searched, and a data refresh callback event is triggered, namely, all values of the interaction attribute are subjected to data synchronization.
Further, as shown in fig. 3, the step S1 includes the following steps:
s101: the width and the height of the outer layer of the canvas operation panel are adjusted in a self-adaptive manner; specifically, the width and the height are adaptive through a flex layout (elastic layout) mode, namely, the style attribute of a parent element on the outer layer of the canvas operation panel is display: flex, and the style attribute on the outer layer of the canvas operation panel is flex: 1.
Here, the width in this embodiment represents the number of pixels in the horizontal direction, and the height represents the number of pixels in the vertical direction, and therefore, the width is equivalent to the resolution.
S102: calculating the width and height of the outer layer of the canvas operation panel according to the resolution of the editing end, and respectively assigning the width and height of the inner layer of the canvas operation panel as the calculated width and height; namely, the width and the height of the outer layer of the canvas operation panel are calculated by monitoring the browser window size event, and the calculated values are assigned to the inner layer of the canvas operation panel. In an actual application scenario, the width and height of the outer layer of the canvas operation panel can be obtained by obtaining the values of the clientHeight and clientWidth attributes of the dom element object of the canvas operation panel in the event of the size of the browser window.
S103: assigning the width and the height of the canvas to the width and the height of a large screen respectively; the width and height of the canvas are the resolution of the real large screen.
S104: judging whether the width and the height of the large screen are respectively larger than the width and the height of the inner layer of the canvas operation panel, namely whether the width of the large screen is larger than the width of the inner layer of the canvas operation panel and the height of the large screen is larger than the height of the inner layer of the canvas operation panel, if so, the canvas needs to be reduced when the inner layer of the operation panel exceeds the range of the inner layer, namely, the step S105 is executed, and if not, the width and the height of the large screen are respectively smaller than or equal to the width and the height of the inner layer of the canvas operation panel, the canvas is not subjected to scaling operation.
S105: calculating the ratio of the width of the inner layer of the canvas operation panel to the width of the large screen to obtain a first ratio;
s106: calculating the ratio of the height of the inner layer of the canvas operation panel to the height of the large screen to obtain a second ratio;
s107: and obtaining the proportion with smaller value in the first proportion and the second proportion, and reducing the width and the height of the canvas according to the proportion.
For example, suppose that the resolution of the large screen is 3920 × 1920, the resolution of the editing end used by the large-screen editing personnel is 1920 × 1080, the width and height of the inner layer of the canvas operation panel after being assigned is 1920 × 1080, and the size of the canvas before being zoomed is 3920 × 1920; the width and height of the inner layer of the canvas operation panel are all smaller than the width and height of the large screen, so that the first proportion is 1920/3920 and the second proportion is 1080/1920 through calculation; since the first scale 1920/3920 is less than the second scale 1080/1920, the canvas is scaled down by the first scale 1920/3920. Preferably, in the actual scene, the transform: scale of cs 3 is used for scaling.
Further, since the overall scaling does not facilitate the processing of the detail portion, a slider that scales the size of the canvas may be integrated under the canvas, and when the slider is dragged to the last side, the canvas is scaled to the original size 3920 × 1920 and dragged to a specific position by the scroll bar to adjust the detail.
Further, in this embodiment, the components include a text type component, a material type component, a chart type component, a map component, a function component, and a third-party extension component.
The map component encapsulates a third-party GIS library, can edit the basic map style through a map component management tool, and is newly added in the component management module. The map component control panel may perform the addition of sub-components. Each map component needs to implement an API interface that interacts with the sub-components. The sub-components set interactive attributes on the attribute editing panel, add interactive events with the map components, set interactive parameters, monitor the interactive attributes of the sub-components, and call the interactive events and the incoming parameters of the corresponding map components in the monitoring function to complete interaction.
Therefore, in this embodiment, data can be comprehensively displayed in the form of GIS, three-dimensional animations, charts, pictures, characters, and the like, and relationships and business logic between data are represented by visual animation effects on the basis of a scene, so that information such as data statistics, relationships, interactions, and the like is intuitively converted into a product of visual information.
In the embodiment, in order to solve the problem of long development cycle of a large-screen scene, a plurality of sets of available large-screen service scene templates are designed in combination with the existing service, and if the templates cannot meet service requirements, online editing can be performed in a visual mode, a huge component library is used for rapidly dragging and editing component attributes to perform rapid layout, and a service scene is rapidly configured.
In order to solve the problem of difficult data relationship representation, a large number of third-party diagram components are expanded, and the components can be mutually configured and interacted to dynamically represent the data relationship.
In order to solve the problem of difficult large screen adaptation, a large screen is adapted in a response mode by combining multiple technologies such as flex, transform and rem (for realizing self-adaptive layout).
In order to visually and vividly show data and the relation between scenes and the data, the GIS, three-dimensional animation and diagrams are combined to vividly simulate business scenes and dynamically show data interaction.
Example two
The present embodiment is a specific application scenario of the first embodiment.
In this embodiment, an editor is integrated in the editing end, and the editor is composed of four parts in total, namely, an operation panel for adding new components and saving preview scenes, a page management and layer operation panel, a component editing operation panel, and a canvas operation panel.
Because the large screen resolution is very large, the large screen is usually edited on a PC end with a relatively normal resolution, but the large screen resolution is much larger than the resolution of the PC end, so the canvas panel adopts a mode of self-adaptive layout and dynamic scaling in design. Specifically, the menu bar, the layer panel and the operation panel adopt a fixed + flex local mode and transform scaling to perform canvas layout, so that the detailed layout can be processed according to large screen resolution, and the canvas layout can be reduced to see the whole layout.
The editor finishes the editing of the large screen scene by adding various components in the canvas. The components are managed in a layer mode, and the layer sequence can be changed through a layer management operation panel. The selected components in the canvas can be subjected to basic operations such as copying, deleting, dragging and the like, the corresponding component editing operation panel can appear during selection, and the component information can be changed in real time through setting the attributes. Wherein the GIS component can add GIS subcomponents on the component editing operation panel.
The component property is dynamically configured through the component management module, and the component coding part can be completed by realizing a standard interface of the component in development. The interaction between the components adopts the observer mode and the design idea of data bidirectional binding to realize coding. The components can subscribe component events with each other, wherein the interactive events need to realize related interfaces of component interaction and expose interaction parameters to the global state management object for monitoring, and when the interaction parameters change, the monitoring events trigger the interaction events.
The embodiment can provide rich component libraries, various service template libraries and material libraries; the dragging type free layout is adopted, coding is not needed, full-graphical editing is achieved, and the professional visual display function is rapidly created.
EXAMPLE III
The present embodiment is a computer-readable storage medium corresponding to the above-mentioned embodiments, on which a computer program is stored, which when executed by a processor, performs the steps of:
adjusting the size of a canvas operation panel according to the resolution of a large screen and the resolution of an editing end, wherein the canvas operation panel comprises an outer layer of the canvas operation panel, an inner layer of the canvas operation panel and canvas;
creating a component template object;
adding a newly added component in a canvas by selecting a component template object, adding the newly added component to the tail part of a component list, and assigning the hierarchy attribute value of the newly added component to be the current length value of the component list;
adjusting the hierarchical sequence of the components in the component list, and reassigning the hierarchical attribute values of the components according to the hierarchical sequence of the adjusted components in the component list;
editing the component attributes of the components in the canvas;
and if the edited attribute is the preset interactive attribute, correspondingly modifying the values of the interactive attributes in other components.
Further, the adjusting the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing end specifically includes:
the width and the height of the outer layer of the canvas operation panel are adjusted in a self-adaptive manner;
calculating the width and height of the outer layer of the canvas operation panel according to the resolution of the editing end, and respectively assigning the width and height of the inner layer of the canvas operation panel as the calculated width and height;
assigning the width and the height of the canvas to the width and the height of a large screen respectively;
if the width of the large screen is larger than the width of the inner layer of the canvas operation panel and the height of the large screen is larger than the height of the inner layer of the canvas operation panel, calculating the ratio of the width of the inner layer of the canvas operation panel to the width of the large screen to obtain a first ratio;
calculating the ratio of the height of the inner layer of the canvas operation panel to the height of the large screen to obtain a second ratio;
and obtaining the proportion with smaller value in the first proportion and the second proportion, and reducing the width and the height of the canvas according to the proportion.
Further, the creating a component template object specifically includes:
configuring basic information of a component, wherein the basic information comprises a type, a number, a name and a hierarchy attribute value;
configuring a display cover picture of the component;
configuring a list of properties for the component.
Further, if the edited attribute is a preset interaction attribute, correspondingly modifying the values of the interaction attributes in other components specifically includes:
configuring interaction attributes among the components, and allocating unique identifiers for the interaction attributes;
configuring the on-off state of the interactive attribute;
if the interactive attribute is in an open state and the change of the value of the interactive attribute of one component is monitored, searching the component containing the interactive attribute, and correspondingly modifying the value of the interactive attribute in the searched component.
Further, the components comprise a character type component, a material type component, a chart type component, a map component, a function component and a third party expansion component.
In summary, the editing method for large-screen scenes and the computer-readable storage medium provided by the invention solve the problem of difficult adaptation of large screens by adaptively adjusting the size of the canvas operation panel; by creating the component template object and selecting and editing the component template object, a large-screen scene can be rapidly configured, and the problem of long development period of the large-screen scene is solved; by configuring the interactive attributes among the components, the components can subscribe component events to each other to embody the data relationship, so that the problem of difficult data relationship embodying is solved; the method includes the steps that different types of components simulate business scenes vividly, data interaction is displayed dynamically, and the relationship between the scenes and the data is displayed visually. The invention can reduce the adaptation difficulty of the large screen, shorten the development period of the large screen scene, well embody the data relation and visually and vividly show the data and the relation between the scene and the data.
The above description is only an embodiment of the present invention, and not intended to limit the scope of the present invention, and all equivalent changes made by using the contents of the present specification and the drawings, or applied directly or indirectly to the related technical fields, are included in the scope of the present invention.
Claims (8)
1. An editing method for large-screen scenes is characterized by comprising the following steps:
adjusting the size of a canvas operation panel according to the resolution of a large screen and the resolution of an editing end, wherein the canvas operation panel comprises an outer layer of the canvas operation panel, an inner layer of the canvas operation panel and canvas;
creating a component template object;
adding a newly added component in a canvas by selecting a component template object, adding the newly added component to the tail part of a component list, and assigning the hierarchy attribute value of the newly added component to be the current length value of the component list;
adjusting the hierarchical sequence of the components in the component list, and reassigning the hierarchical attribute values of the components according to the hierarchical sequence of the adjusted components in the component list;
editing the component attributes of the components in the canvas;
if the edited attribute is a preset interactive attribute, correspondingly modifying the values of the interactive attributes in other components;
the adjusting of the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing end is specifically as follows:
the width and the height of the outer layer of the canvas operation panel are adjusted in a self-adaptive manner;
calculating the width and height of the outer layer of the canvas operation panel according to the resolution of the editing end, and respectively assigning the width and height of the inner layer of the canvas operation panel as the calculated width and height;
assigning the width and the height of the canvas to the width and the height of a large screen respectively;
if the width of the large screen is larger than the width of the inner layer of the canvas operation panel and the height of the large screen is larger than the height of the inner layer of the canvas operation panel, calculating the ratio of the width of the inner layer of the canvas operation panel to the width of the large screen to obtain a first ratio;
calculating the ratio of the height of the inner layer of the canvas operation panel to the height of the large screen to obtain a second ratio;
and obtaining the proportion with smaller value in the first proportion and the second proportion, and reducing the width and the height of the canvas according to the proportion.
2. The editing method for large-screen scenes according to claim 1, wherein the creating component template objects are specifically:
configuring basic information of a component, wherein the basic information comprises a type, a number, a name and a hierarchy attribute value;
configuring a display cover picture of the component;
configuring a list of properties for the component.
3. The editing method for large-screen scenes according to claim 1, wherein if the edited attribute is a preset interactive attribute, correspondingly modifying the value of the interactive attribute in other components specifically comprises:
configuring interaction attributes among the components, and allocating unique identifiers for the interaction attributes;
configuring the on-off state of the interactive attribute;
if the interactive attribute is in an open state and the change of the value of the interactive attribute of one component is monitored, searching the component containing the interactive attribute, and correspondingly modifying the value of the interactive attribute in the searched component.
4. The editing method of the large-screen scene, according to any one of claims 1 to 3, wherein the components comprise a text type component, a material type component, a chart type component, a map component, a function component and a third party expansion component.
5. A computer-readable storage medium, on which a computer program is stored, which program, when executed by a processor, carries out the steps of:
adjusting the size of a canvas operation panel according to the resolution of a large screen and the resolution of an editing end, wherein the canvas operation panel comprises an outer layer of the canvas operation panel, an inner layer of the canvas operation panel and canvas;
creating a component template object;
adding a newly added component in a canvas by selecting a component template object, adding the newly added component to the tail part of a component list, and assigning the hierarchy attribute value of the newly added component to be the current length value of the component list;
adjusting the hierarchical sequence of the components in the component list, and reassigning the hierarchical attribute values of the components according to the hierarchical sequence of the adjusted components in the component list;
editing the component attributes of the components in the canvas;
if the edited attribute is a preset interactive attribute, correspondingly modifying the values of the interactive attributes in other components;
the adjusting of the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing end is specifically as follows:
the width and the height of the outer layer of the canvas operation panel are adjusted in a self-adaptive manner;
calculating the width and height of the outer layer of the canvas operation panel according to the resolution of the editing end, and respectively assigning the width and height of the inner layer of the canvas operation panel as the calculated width and height;
assigning the width and the height of the canvas to the width and the height of a large screen respectively;
if the width of the large screen is larger than the width of the inner layer of the canvas operation panel and the height of the large screen is larger than the height of the inner layer of the canvas operation panel, calculating the ratio of the width of the inner layer of the canvas operation panel to the width of the large screen to obtain a first ratio;
calculating the ratio of the height of the inner layer of the canvas operation panel to the height of the large screen to obtain a second ratio;
and obtaining the proportion with smaller value in the first proportion and the second proportion, and reducing the width and the height of the canvas according to the proportion.
6. The computer-readable storage medium of claim 5, wherein the creating a component template object is specifically:
configuring basic information of a component, wherein the basic information comprises a type, a number, a name and a hierarchy attribute value;
configuring a display cover picture of the component;
configuring a list of properties for the component.
7. The computer-readable storage medium according to claim 5, wherein if the edited attribute is a preset interaction attribute, the correspondingly modifying the value of the interaction attribute in the other component specifically is:
configuring interaction attributes among the components, and allocating unique identifiers for the interaction attributes;
configuring the on-off state of the interactive attribute;
if the interactive attribute is in an open state and the change of the value of the interactive attribute of one component is monitored, searching the component containing the interactive attribute, and correspondingly modifying the value of the interactive attribute in the searched component.
8. The computer-readable storage medium of any of claims 5-7, wherein the components include a text type component, a material type component, a chart type component, a map component, a functionality component, and a third party extension component.
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811456810.2A CN109656654B (en) | 2018-11-30 | 2018-11-30 | Editing method of large-screen scene and computer-readable storage medium |
| PCT/CN2019/090208 WO2020107850A1 (en) | 2018-11-30 | 2019-06-05 | Large-screen scene editing method, apparatus and computer-readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811456810.2A CN109656654B (en) | 2018-11-30 | 2018-11-30 | Editing method of large-screen scene and computer-readable storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109656654A CN109656654A (en) | 2019-04-19 |
| CN109656654B true CN109656654B (en) | 2020-06-09 |
Family
ID=66112578
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811456810.2A Active CN109656654B (en) | 2018-11-30 | 2018-11-30 | Editing method of large-screen scene and computer-readable storage medium |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN109656654B (en) |
| WO (1) | WO2020107850A1 (en) |
Families Citing this family (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109656654B (en) * | 2018-11-30 | 2020-06-09 | 厦门亿力吉奥信息科技有限公司 | Editing method of large-screen scene and computer-readable storage medium |
| CN110990093A (en) * | 2019-11-20 | 2020-04-10 | 武汉联图时空信息科技有限公司 | Flexible interface layout visualization method and medium based on component technology |
| CN113190299B (en) * | 2020-01-14 | 2022-08-09 | 成都鼎桥通信技术有限公司 | Method and equipment for displaying custom layer on map based on VUE |
| CN113132556B (en) * | 2020-01-16 | 2023-04-11 | 西安诺瓦星云科技股份有限公司 | Video processing method, device and system and video processing equipment |
| CN112328249A (en) * | 2020-11-11 | 2021-02-05 | 中投国信(北京)科技发展有限公司 | Visual rapid construction system based on business model |
| CN112732253A (en) * | 2020-12-28 | 2021-04-30 | 中科院计算技术研究所大数据研究院 | Visual large-screen dynamic container assembly of self-adaptive terminal |
| CN112565847B (en) * | 2021-02-22 | 2021-07-13 | 成都云帆数联科技有限公司 | Large-screen display control method and device |
| CN113064587B (en) * | 2021-03-16 | 2024-03-26 | 北京达佳互联信息技术有限公司 | Component control method and device, electronic equipment and storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102034255A (en) * | 2010-10-21 | 2011-04-27 | 同辉佳视(北京)信息技术有限公司 | Method and device for point-to-point large screen edit and point-to-point day time edit |
| CN104851075A (en) * | 2015-05-05 | 2015-08-19 | 天脉聚源（北京）教育科技有限公司 | Convenient-to-display type implementation method and device for note files |
| US10009658B2 (en) * | 2013-03-11 | 2018-06-26 | Sony Corporation | Multiview TV template creation and display layout modification |
Family Cites Families (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7764291B1 (en) * | 2006-08-30 | 2010-07-27 | Adobe Systems Incorporated | Identification of common visible regions in purposing media for targeted use |
| CN104010204B (en) * | 2013-02-27 | 2018-05-08 | 中国移动通信集团公司 | Image information processing method and device |
| US9348495B2 (en) * | 2014-03-07 | 2016-05-24 | Sony Corporation | Control of large screen display using wireless portable computer and facilitating selection of audio on a headphone |
| CN105760178B (en) * | 2016-03-17 | 2019-03-26 | 网易（杭州）网络有限公司 | The method and device that interface control is adapted to |
| US11144183B2 (en) * | 2016-09-28 | 2021-10-12 | Rockwell Automation Technologies, Inc. | System and method for previewing a dashboard display on various form factors |
| CN107577515A (en) * | 2017-10-10 | 2018-01-12 | 北京小度信息科技有限公司 | Extended method, device, electronic equipment and the storage medium of visualization component |
| CN109656654B (en) * | 2018-11-30 | 2020-06-09 | 厦门亿力吉奥信息科技有限公司 | Editing method of large-screen scene and computer-readable storage medium |
-
2018
- 2018-11-30 CN CN201811456810.2A patent/CN109656654B/en active Active
-
2019
- 2019-06-05 WO PCT/CN2019/090208 patent/WO2020107850A1/en active Application Filing
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102034255A (en) * | 2010-10-21 | 2011-04-27 | 同辉佳视(北京)信息技术有限公司 | Method and device for point-to-point large screen edit and point-to-point day time edit |
| US10009658B2 (en) * | 2013-03-11 | 2018-06-26 | Sony Corporation | Multiview TV template creation and display layout modification |
| CN104851075A (en) * | 2015-05-05 | 2015-08-19 | 天脉聚源（北京）教育科技有限公司 | Convenient-to-display type implementation method and device for note files |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109656654A (en) | 2019-04-19 |
| WO2020107850A1 (en) | 2020-06-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109656654B (en) | Editing method of large-screen scene and computer-readable storage medium | |
| CN107844297B (en) | Data visualization implementation system and method | |
| US5675753A (en) | Method and system for presenting an electronic user-interface specification | |
| US10067635B2 (en) | Three dimensional conditional formatting | |
| KR101130494B1 (en) | Blended object attribute keyframing model | |
| US5999195A (en) | Automatic generation of transitions between motion cycles in an animation | |
| CN101207717B (en) | System and method of organizing a template for generating moving image | |
| US20080250314A1 (en) | Visual command history | |
| CN103092612B (en) | Realize method and the electronic installation of Android operation system 3D desktop pinup picture | |
| CN108279964B (en) | Method and device for realizing covering layer rendering, intelligent equipment and storage medium | |
| JP5645618B2 (en) | Information processing apparatus, information processing method, and program | |
| CN110489116A (en) | A kind of rendering method of the page, device and computer storage medium | |
| US20130093782A1 (en) | Color Selection and Chart Styles | |
| CN105824517A (en) | Implementation method and apparatus of desktop | |
| US7743387B2 (en) | Inheritance context for graphics primitives | |
| US10289388B2 (en) | Process visualization toolkit | |
| CN112527172A (en) | Interface display method and device, computer readable storage medium and electronic equipment | |
| US20170038931A1 (en) | Electronic picture book which sequentially changes in response to scroll operation | |
| JP2008176424A (en) | Parts catalog preparation system, parts catalog preparation method, program for making computer execute and computer-readable recording medium | |
| CN115691772A (en) | Operation visualization system and corresponding computer device and storage medium | |
| JP3919163B2 (en) | Video object editing apparatus and video object editing program | |
| CN111782309B (en) | Method and device for displaying information and computer readable storage medium | |
| CN110825390A (en) | Visualization large screen project rapid deployment | |
| Byelas et al. | Visualization of areas of interest in component-based system architectures | |
| KR20120108550A (en) | Method and apparatus for providing richmedia contents authoring |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |