WO2020107850A1 - 大屏场景的编辑方法、装置及计算机可读存储介质 - Google Patents

大屏场景的编辑方法、装置及计算机可读存储介质 Download PDF

Info

Publication number
WO2020107850A1
WO2020107850A1 PCT/CN2019/090208 CN2019090208W WO2020107850A1 WO 2020107850 A1 WO2020107850 A1 WO 2020107850A1 CN 2019090208 W CN2019090208 W CN 2019090208W WO 2020107850 A1 WO2020107850 A1 WO 2020107850A1
Authority
WO
WIPO (PCT)
Prior art keywords
component
canvas
height
width
operation panel
Prior art date
Application number
PCT/CN2019/090208
Other languages
English (en)
French (fr)
Inventor
黄超
张健
包胜
李光典
苏文银
陈成阳
杨佩佩
李荣斌
Original Assignee
厦门亿力吉奥信息科技有限公司
国网信息通信产业集团有限公司
国家电网有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 厦门亿力吉奥信息科技有限公司, 国网信息通信产业集团有限公司, 国家电网有限公司 filed Critical 厦门亿力吉奥信息科技有限公司
Publication of WO2020107850A1 publication Critical patent/WO2020107850A1/zh

Links

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

Definitions

  • the embodiments of the present invention relate to the technical field of display editing, and in particular to a method, device and computer-readable storage medium for editing a large-screen scene.
  • the resolution of the large screen usually displayed is very large, but when editing, it is edited on the conventional PC side, and the resolution of the PC side is small, so it is difficult to edit the display and operation for the resolution of the large screen when editing.
  • the existing products are all report types of presentations, only concerned with the data and not related to the relationship between the data and the way of presentation.
  • the display and editing of large-screen scenes have the following shortcomings: 1.
  • the development period of large-screen scenes is long; 2. It is difficult to reflect the data relationship; 3. It is difficult to adapt the large-screen; 4.
  • the data display is boring; 5. Pure data display does not reflect the relationship between the scene and the data.
  • the technical problem to be solved by the embodiments of the present invention is to provide a method and device for editing a large screen scene and a computer-readable storage medium, which can reduce the difficulty of adapting a large screen and shorten the development cycle of a large screen scene, and can be very good Embody the data relationship.
  • the technical scheme adopted by the embodiment of the present invention is: a method for editing a large-screen scene, including:
  • the canvas operation panel includes at least the canvas
  • the embodiment of the present invention also relates to an apparatus for editing a large-screen scene, including:
  • the first adjusting unit is used to adjust the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing terminal, and the canvas operation panel includes at least the canvas;
  • Select unit used to add a new component in the canvas by selecting a component template object, and add the new component to the component list;
  • the second adjustment unit is used to adjust the hierarchical order of the components in the component list based on the adjustment instruction so that the components in the component list are presented on the canvas in their respective hierarchical order;
  • the editing unit is used to edit and display the component properties of the components in the canvas.
  • the embodiment of the present invention also relates to a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, the steps of the aforementioned method for editing a large-screen scene.
  • the beneficial effects of the embodiments of the present invention are: by adapting the size of the canvas operation panel to solve the problem of difficulty in adapting to the large screen; by creating component template objects, and by selecting and editing the component template objects, the large screen scene can be quickly configured To solve the problem of long development period for large-screen scenes; by configuring the interactive attributes between components, components and components can mutually subscribe to component events and reflect data relationships, thereby solving the problem of difficulty in reflecting data relationships.
  • the embodiments of the present invention can reduce the difficulty of adapting a large screen, shorten the development period of a large screen scene, and can well reflect the data relationship.
  • FIG. 1 is a flowchart of a method for editing a large-screen scene according to an embodiment of the present invention
  • FIG. 3 is a flowchart of the method of step S1 according to Embodiment 1 of the present invention.
  • FIG. 4 is a schematic diagram 1 of an interface of a canvas operation panel according to an embodiment of the invention.
  • FIG. 5 is a second schematic diagram of the interface of the canvas operation panel according to an embodiment of the invention.
  • FIG. 6 is a schematic diagram 3 of an interface of a canvas operation panel according to an embodiment of the invention.
  • FIG. 7 is a structural diagram of a device for editing a large-screen scene according to an embodiment of the present invention.
  • the embodiment of the present invention is to realize that the components edited on the editing side are clearly displayed on the large screen side.
  • the most critical concept of the embodiment of the present invention is to adjust the size of the canvas operation panel to fit the large screen resolution; dynamically configure component attributes; and configure interaction attributes between components.
  • a method for editing a large-screen scene including:
  • Step 1001 Adjust the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing terminal.
  • the canvas operation panel includes at least the canvas;
  • the canvas operation panel includes an outer layer and an inner layer of the canvas operation panel.
  • the canvas operation panel also includes other functional areas: such as page management area, layer area and functional area.
  • the canvas can be viewed as the area enclosed by the inner layer.
  • the content of the components displayed on the canvas switches, the content of the functional area is switchable.
  • the functional area shown in FIG. Background color and picture; the functional area shown in Figure 5 is the attribute information of the component, such as name and size.
  • Step 1002 Create a component template object
  • the templates of all possible components are created. It can be understood that each component uses a corresponding template to distinguish its representative meaning in the canvas. For example, in the map component, a high-rise building uses a cuboid Cube representation, river curve representation, etc.
  • Step 1003 add a new component by selecting a component template object in the canvas, and add the new component to the component list;
  • This step may be specifically as follows: adding a new component by selecting a component template object in the canvas, adding the new component to the end of the component list, and assigning the hierarchical attribute value of the new component to the current length value of the component list .
  • the component list is used to record the components that need to be displayed on the canvas, as shown in FIG. 4 under the “layer” area is the component list.
  • the component list is arranged vertically, the tail of the component list is the top of the component list, the component newly added to the component list is located at the top of the component list, and the component located above the component list is the latest added The component added before the component.
  • any information that can be presented in the canvas on the editing side is added to the canvas through components, such as text information, symbol information, and digital information.
  • Specific text information such as "distribution station area" as shown in Figure 6 (the selected component is a distribution station); symbol information such as the use of two semicircles to represent the distribution station area; digital information such as "66991", etc. .
  • Any information that needs to be represented on the canvas can create a component template object, which is represented by the component.
  • the buildings in the map can be represented by cube or cuboid components, and the road can be represented by straight lines or curves.
  • pie charts, line charts, bar charts, etc. can be selected to represent components.
  • the shape of the component can be any reasonable shape, and this article does not enumerate one by one.
  • Step 1004 Based on the adjustment instruction, adjust the hierarchical order of the components in the component list, so that the components in the component list are presented on the canvas in their respective hierarchical order;
  • the hierarchical order of the components in the component list is adjusted, and the hierarchical attribute values of the components are reassigned according to the adjusted hierarchical order of the components in the component list.
  • the adjustment of the hierarchical order of the components in the component list changes at least the occlusion display relationship among some components in the component list in the canvas. It can be understood that in the embodiment of the present application, the hierarchical order between the components determines the occlusion relationship between the components on the canvas. Generally, components with large hierarchical attribute values occlude components with low hierarchical attribute values. For example, before the adjustment, the hierarchical order of component A in the component list is 99, and the hierarchical order of component B in the component list is 100.
  • component B must at least The component A is partially blocked and displayed. If the positions of component B and component A in the component list are exchanged based on the adjustment instruction, such as adjusting component B from the position of 100 to the position of 99, at this time, the hierarchical attribute value of component B becomes 99, and that of component A The level attribute value becomes 100. For the adjusted situation, component A at least partially blocks component B in the canvas and is displayed.
  • the occlusion display can be as shown in Figure 6.
  • the components of the "distribution station area" are located in the upper part of the component list to block the components (high-rise buildings and roads) displayed in the lower left corner of the canvas, that is, the "distribution station area" component Floating display.
  • the adjustment instruction is generated based on the needs of the editing terminal.
  • an adjustment instruction is generated.
  • the adjustment instruction may be manually performed based on manual editing, or may be automatically performed, for example, to detect an input adjustment instruction. Based on the adjustment instruction, the hierarchy order between the components in the component list is adjusted.
  • Step 1005 Edit the component properties of the components in the canvas to display.
  • component attributes can be divided into large categories and small categories. From the perspective of major categories, as shown in Figure 5, component attributes include three major categories: style, data, and interaction. From the perspective of sub-category, such as the style, it includes the component name, size, and animation effects. Among them, the general category-style is at least used to describe the appearance, size, color, shape, etc. of component attributes. Large category-data is used to describe whether the data represented by this component is obtained locally from the editing terminal, or needs to be obtained interactively with other terminals such as a server.
  • Major category-interaction is used to describe which components the component has an association relationship with, and based on the association relationship, certain data display can be realized. The details are as follows:
  • the interaction attribute of the component having the interaction attribute with the component in other components is modified.
  • the purpose of making the at least two components have relevance can be achieved by setting the interaction attribute, and the at least two components with relevance can at least achieve the purpose of operating the other component by operating one of the components.
  • there is a "emergency state" component (equivalent to a button) in the lower right corner of the canvas.
  • Re-reading and displaying the recovered data, recovered data, and cumulative power outage values is equivalent to refreshing and displaying the data in the "distribution station" area of the canvas. This is equivalent to modifying and displaying the attribute values of components such as unrecovered data, recovered data, and cumulative power failure.
  • the size of the operation panel is adjusted according to the resolution of the large screen and the resolution of the editing terminal, so that the size of the canvas operation panel can be adapted to the resolution of the large screen, and the components edited on the editing side are clear on the large screen side display.
  • the beneficial effects of the embodiments of the present invention are: the adjustment of the canvas operation panel according to the resolution can avoid the difficulty of adapting the large screen caused by the adjustment directly on the large screen, and shorten the scene of the large screen Development cycle.
  • interaction attributes can be configured between components, and data relationships can be well reflected.
  • the adjusting the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing terminal is specifically:
  • the ratio of the width of the inner layer of the canvas operation panel to the width of the large screen is calculated to obtain the first ratio
  • the width and height of the canvas are adjusted according to the smaller ratio of the first ratio and the second ratio, considering that in practical applications, there are width-based or height-based displays in the width and height displays The requirements for display are in line with actual usage.
  • the width and height of the canvas can be adjusted according to the resolution of the large screen and the editing end to adapt to the size of the canvas operation panel to solve the problem of difficulty in adapting to the large screen.
  • the creating component template object is specifically:
  • Configure basic information of the component includes type, number, name, and level attribute value;
  • a component can be quickly added through the component template object to solve the problem of a long development period for a large-screen scene.
  • modifying the interaction attribute of the component having the interaction attribute with the component in other components includes:
  • the value of the interaction attribute is modified accordingly.
  • the components include text type components, material type components, chart type components, map components, functional components, and third-party extension components.
  • An embodiment of the present invention also provides a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, the following steps are realized:
  • Step 1001 Adjust the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing terminal.
  • the canvas operation panel includes at least the canvas;
  • Step 1002 Create a component template object
  • Step 1003 add a new component by selecting a component template object in the canvas, and add the new component to the component list;
  • Step 1004 Based on the adjustment instruction, adjust the hierarchical order of the components in the component list, so that the components in the component list are presented on the canvas in their respective hierarchical order;
  • Step 1005 Edit the component properties of the components in the canvas to display.
  • the storage medium in the embodiments of the present application may be implemented by any type of volatile or non-volatile storage devices, or a combination thereof.
  • the non-volatile memory can be read-only memory (ROM, Read Only Memory), programmable read-only memory (PROM, Programmable Read-Only Memory), erasable programmable read-only memory (EPROM, Erasable Programmable Read- Only Memory), Electrically Erasable Programmable Read Only Memory (EEPROM, Electrically Erasable Programmable Read-Only Memory), Magnetic Random Access Memory (FRAM, Ferromagnetic Random Access Memory), Flash Memory (Flash) Memory, Magnetic Surface Memory , Compact disc, or read-only compact disc (CD-ROM, Compact, Read-Only Memory); the magnetic surface memory can be a disk storage or a tape storage.
  • the volatile memory may be a random access memory (RAM, Random Access Memory), which is used as an external cache.
  • RAM random access memory
  • SRAM static random access memory
  • SSRAM synchronous static random access memory
  • DRAM dynamic random access Memory
  • SDRAM Synchronous Dynamic Random Access Memory
  • DDRSDRAM double data rate synchronous dynamic random access memory
  • ESDRAM enhanced Type synchronous dynamic random access memory
  • SLDRAM SyncLink Dynamic Random Access Memory
  • direct memory bus random access memory DRRAM, Direct Rambus Random Access Random Access Memory
  • DRRAM Direct Rambus Random Access Random Access Memory
  • the storage media described in the embodiments of the present invention are intended to include but are not limited to these and any other suitable types of memories.
  • the adjusting the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing terminal is specifically:
  • the ratio of the width of the inner layer of the canvas operation panel to the width of the large screen is calculated to obtain the first ratio
  • the creating component template object is specifically:
  • Configure basic information of the component includes type, number, name, and level attribute value;
  • modifying the interaction attribute of the component having the interaction attribute with the component in other components includes:
  • the value of the interaction attribute is modified accordingly.
  • the components include text type components, material type components, chart type components, map components, functional components, and third-party extension components.
  • An embodiment of the present application further provides an apparatus for editing a large-screen scene.
  • the apparatus includes: a first adjusting unit 701, a creating unit 702, a selecting unit 703, a second adjusting unit 704, and an editing unit 705; among them,
  • the first adjusting unit 701 is configured to adjust the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing terminal, where the canvas operation panel includes at least the canvas;
  • the creating unit 702 is used to create a component template object
  • the selection unit 703 is used to add a new component by selecting a component template object in the canvas and add the newly added component to the component list;
  • the second adjustment unit 704 is used to adjust the hierarchical order of the components in the component list based on the adjustment instruction so that the components in the component list are presented on the canvas in their respective hierarchical order;
  • the editing unit 705 is used to edit and display the component attributes of the components in the canvas.
  • the first adjustment unit 701 is used to:
  • the ratio of the width of the inner layer of the canvas operation panel to the width of the large screen is calculated to obtain the first ratio
  • the creating unit 702 is used to:
  • Configure basic information of the component includes type, number, name, and level attribute value;
  • the device also includes a modification unit for:
  • the edited attribute of the component is a preset interaction attribute, modify the interaction attribute value of the other component that has the interaction attribute with the component.
  • the second adjustment unit 704 is also used to:
  • Adjusting the hierarchical order of components in the component list can at least change the occlusion display relationship between the components in the component list on the canvas.
  • the first adjusting unit 701, the creating unit 702, the selecting unit 703, the second adjusting unit 704, and the editing unit 705 can all be composed of a central processing unit (CPU, Central Processing Unit) and digital signals in actual applications.
  • CPU Central Processing Unit
  • DSP Digital Processor
  • MCU micro control unit
  • FPGA Field-Programmable Gate Array
  • the editing device of the large-screen scene of the embodiment of the present application because the principle of the device to solve the problem is similar to the editing method, therefore, the implementation process and implementation principle of the editing device can refer to the implementation process and implementation principle of the editing method The description will not be repeated here.
  • Embodiment 1 of the embodiment of the present invention is: a method for editing a large-screen scene, as shown in FIG. 2, including the following steps:
  • S1 Adjust the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing terminal.
  • the dom element of the canvas operation panel is divided into the outer layer of the canvas operation panel, the inner layer of the canvas operation panel, and the canvas canvas.
  • S2 Create a component template object; large screen editors can edit and add basic component information and component attribute information through the component template editing panel in the component management module.
  • the basic information of the component includes the type, number, name and level attribute value; configure the display cover image of the component; configure the attribute list of the component, each component object has a component attribute object, attribute object It is a deeply nested json object and is encoded in hexadecimal format in the form of a string.
  • bigblob blob is a binary large object
  • the form of deeply nested objects makes the expansion of component properties very strong.
  • the hexadecimal encoding method makes blob (binary large object) type data not need to be parsed for binary streams, and there is no need to pay attention to whether the data is special. Symbols, bigblob type preservation allows attribute objects to be complex structured json objects.
  • step S3 add a new component by selecting a component template object in the canvas, add the new component to the end of the component list, and assign the hierarchical attribute value of the new component to the current length value of the component list.
  • step S2 there are more component objects in the new panel of the component in the editor.
  • Large-screen editors can add new components to the canvas through the new component panel, and perform basic component information and component properties of the component template object.
  • the newly added component is added to the end of the component list, and the component's hierarchical attribute value z-index is assigned to the current length value of the component list.
  • S4 Adjust the hierarchical order of the components in the component list, and re-assign the hierarchical attribute values of the components according to the adjusted hierarchical order of the components in the component list.
  • Large-screen editors can adjust the component hierarchy by dragging the component order or clicking the up and down buttons through the layer management panel. The program will reassign the component's hierarchy attribute value according to the adjusted component's position in the component list.
  • S5 Edit the component properties of the components in the canvas; the large-screen editor can edit the component properties in the property operation panel by selecting the components in the canvas.
  • step S6 Determine whether the edited attribute is a preset interactive attribute, and whether the component with the interactive attribute is turned on, and if so, step S7 is executed.
  • S7 Modify the values of other components in the interaction attribute; specifically, search for the component containing the interaction attribute, and modify the value of the interaction attribute in the searched component accordingly.
  • This embodiment is developed based on Vue, and has the feature of two-way data binding, and the display effect can be changed in real time through in-depth monitoring of the component attribute object. For example, monitor the Cascading Style Sheet (CSS) attribute to change the component CSS attribute in real time, and monitor the data interaction attribute to obtain data in real time.
  • CSS Cascading Style Sheet
  • the component-to-component interaction adopts the observer pattern and the design idea of two-way data binding to realize coding.
  • the interactive attribute can set an alias (id-value), and the set alias needs to be unique in the current project.
  • API application programming interface
  • url uniform resource locator
  • id-value $ ⁇ id-value ⁇ format.
  • the global state management monitors that the value of the interaction attribute changes, it searches for all components with $ ⁇ id-value ⁇ expressions, and triggers a data refresh callback event, that is, data synchronization of all interaction attribute values.
  • step S1 includes the following steps:
  • S101 Adaptively adjust the width and height of the outer layer of the canvas operation panel; specifically, adapt the width and height by flex layout (flexible layout), that is, the style attribute of the parent element of the outer layer of the canvas operation panel is display:flex, and the canvas operation panel The style attribute of the outer layer is flex:1.
  • flex layout flexible layout
  • the width indicates the number of pixels in the horizontal direction
  • the height indicates the number of pixels in the vertical direction. Therefore, the width and height are equivalent to the resolution.
  • S102 Calculate the width and height of the outer layer of the canvas operation panel according to the resolution of the editing terminal, and assign the width and height of the inner layer of the canvas operation panel to the calculated width and height respectively; that is, by monitoring the browser window size event , Calculate the width and height of the outer layer of the canvas operation panel, and assign the calculated value to the inner layer of the canvas operation panel.
  • 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 properties of the dom element object of the canvas operation panel in the browser window size event.
  • S103 Assign the width and height of the canvas to the width and height of the large screen, respectively; the width and height of the canvas canvas is the resolution of the real large screen.
  • step S104 Determine whether the width and height of the large screen are greater than the width and height of the inner layer of the canvas operation panel, that is, whether the width of the large screen is greater than the width of the inner layer of the canvas operation panel and the height of the large screen is greater than the height of the inner layer of the canvas operation panel If it is, it means that placing the canvas on the inner layer of the operation panel will exceed the inner layer range, and the canvas needs to be reduced, that is, step S105 is executed. If not, the width and height of the large screen are less than or equal to the inner layer of the canvas operation panel Width and height, the canvas is not zoomed.
  • S105 Calculate the ratio of the width of the inner layer of the canvas operation panel to the width of the large screen to obtain the first ratio
  • S106 Calculate the ratio of the height of the inner layer of the canvas operation panel to the height of the large screen to obtain the second ratio
  • the value assigned to the inner layer of the canvas operation panel is 3920*1920
  • the width and height are also 1920*1080
  • the canvas size before scaling is 3920*1920
  • the calculated first ratio is 1920/3920
  • the second ratio is 1080/1920
  • the first ratio 1920/3920 is smaller than the second ratio 1080/1920
  • the canvas is reduced according to the first ratio 1920/3920.
  • the transform: scale of css3 is used for scaling.
  • a slider with a scalable canvas size can be integrated under the canvas (as shown in Figure 4), when the slider is dragged to the last side , The canvas will be scaled to the original size of 3920*1920, and dragged to the specific position by the scroll bar to adjust the details.
  • the components include text type components, material type components, chart type components, map components, functional components, and third-party extension components.
  • the map component encapsulates a third-party geographic information database (GIS library), the map component can edit the basic style of the map through the map component management tool, and add components in the component management module.
  • the map component control panel can add subcomponents.
  • Each map component needs to implement an application programming interface (API interface) that interacts with subcomponents.
  • API interface application programming interface
  • the sub-components set interactive properties in the property editing panel, add interaction events with the map component, and set interaction parameters, monitor the sub-component interaction properties, and call the corresponding map component interactive events and incoming in the monitoring function The parameters complete the interaction.
  • the data can be comprehensively displayed in the form of GIS, three-dimensional animation, charts, pictures, text, etc., and the relationship between the data and the business logic on the basis of the scene is reflected in the visual animation effect, and the data is intuitively counted , Relationship, interaction and other information into visual information products.
  • Embodiment 1 is a specific application scenario of Embodiment 1.
  • an editor is integrated in the editing terminal.
  • the editor is composed of four parts, which are the new component and save preview scene operation panel, page management and layer operation panel, component editing operation panel, canvas operation panel. .
  • the editing of the large screen is usually performed on the PC side with a relatively normal resolution, but the resolution of the large screen is much larger than the resolution of the PC side, so the canvas panel adopts an adaptive layout in design + Dynamic zooming.
  • the menu bar, layer panel, and operation panel adopt the fixed+flex partial method, and transform zoom is used for canvas layout, so as to not only handle the detailed layout according to the large screen resolution, but also reduce the canvas to see the overall layout.
  • the editor completes the editing of large-screen scenes by adding various components to the canvas.
  • Components are managed in layers, and the order of layers can be changed through the layer management operation panel. Select the components in the canvas to copy, delete, drag and other basic operations.
  • the corresponding component editing operation panel will appear, and the component information can be changed in real time by setting the attributes.
  • GIS components can add GIS subcomponents in the component editing operation panel.
  • the component coding part can be completed by dynamically configuring the component attributes through the component management module and implementing the standardized interface of the component during development.
  • the interaction between components and components adopts the observer pattern and the design idea of two-way data binding to realize coding.
  • Components and components can subscribe to component events with each other.
  • the interactive events must implement related interfaces for component interaction and expose interaction parameters to the global state management object for monitoring. When the interaction parameters change, the monitoring event triggers the interaction event.
  • This embodiment can provide a rich component library, a variety of business template libraries, and a material library; it adopts a drag-and-drop free layout, without coding, full graphical editing, and quickly creates a professional visual display function.
  • This embodiment is a computer-readable storage medium corresponding to the above-mentioned embodiment, on which a computer program is stored, and when the program is executed by a processor, the following steps are realized:
  • Step 1001 Adjust the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing terminal.
  • the canvas operation panel includes at least the canvas;
  • Step 1002 Create a component template object
  • Step 1003 add a new component by selecting a component template object in the canvas, and add the new component to the component list;
  • Step 1004 Based on the adjustment instruction, adjust the hierarchical order of the components in the component list, so that the components in the component list are presented on the canvas in their respective hierarchical order;
  • Step 1005 Edit the component properties of the components in the canvas to display.
  • the interaction attribute of the component having the interaction attribute with the component in other components is modified.
  • the adjusting the size of the canvas operation panel according to the resolution of the large screen and the resolution of the editing terminal is specifically:
  • the ratio of the width of the inner layer of the canvas operation panel to the width of the large screen is calculated to obtain the first ratio
  • the creating component template object is specifically:
  • Configure basic information of the component includes type, number, name, and level attribute value;
  • modifying the interaction attribute of the component having the interaction attribute with the component in other components includes:
  • the value of the interaction attribute is modified accordingly.
  • the components include text type components, material type components, chart type components, map components, functional components, and third-party extension components.
  • a method, device and computer-readable storage medium for editing a large screen scene solve the problem of difficulty in adapting a large screen by adapting the size of the canvas operation panel; by creating a component template Objects, and by selecting and editing component template objects, you can quickly configure large-screen scenes and solve the problem of long development cycles for large-screen scenes; by configuring the interaction properties between components, components and components can subscribe to each other's component events , Embody the data relationship, thereby solving the problem of embodying the data relationship; through different types of components to vividly simulate business scenarios, dynamically display data interaction, and intuitively show the relationship between the scene and the data.
  • the invention can reduce the difficulty of adapting a large screen, shorten the development period of a large screen scene, can well reflect the data relationship, and can intuitively and vividly display the data and the relationship between the scene and the data.
  • the embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a hardware embodiment, a software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer usable storage media (including but not limited to disk storage and optical storage, etc.) containing computer usable program code.
  • a computer usable storage media including but not limited to disk storage and optical storage, etc.
  • each flow and/or block in the flowchart and/or block diagram and a combination of the flow and/or block in the flowchart and/or block diagram may be implemented by computer program instructions.
  • These computer program instructions can be provided to the processor of a general-purpose computer, special-purpose computer, embedded processing machine, or other programmable data processing device to produce a machine that enables the generation of instructions executed by the processor of the computer or other programmable data processing device
  • These computer program instructions may also be stored in a computer-readable memory that can guide a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture including an instruction device, the instructions
  • the device implements the functions specified in one block or multiple blocks of the flowchart one flow or multiple flows and/or block diagrams.
  • These computer program instructions can also be loaded onto a computer or other programmable data processing device, so that a series of operating steps are performed on the computer or other programmable device to produce computer-implemented processing, which is executed on the computer or other programmable device
  • the instructions provide steps for implementing the functions specified in one block or multiple blocks of the flowchart one flow or multiple flows and/or block diagrams.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Processing Or Creating Images (AREA)

Abstract

本发明实施例公开了一种大屏场景的编辑方法、装置及计算机可读存储介质，方法包括：根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板至少包括画布；创建组件模板对象；在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表中；基于调整指令，对所述组件列表中的组件的层级顺序进行调整以使所述组件列表中的组件以各自的层级顺序在画布中进行呈现；对画布中组件的组件属性进行编辑以显示。

Description

大屏场景的编辑方法、装置及计算机可读存储介质
相关申请的交叉引用
本申请基于申请号为201811456810.2、申请日为2018年11月30日的中国专利申请提出，并要求该中国专利申请的优先权，该中国专利申请的内容在此以引入方式并入本申请。
技术领域
本发明实施例涉及显示编辑技术领域，尤其涉及一种大屏场景的编辑方法、装置及计算机可读存储介质。
背景技术
通常展示的大屏的分辨率很大，但编辑的时候在常规PC端编辑，而PC端分辨率小，所以编辑的时候针对大屏的分辨率编辑展示和操作都很困难。
并且，现有的产品都是一些报表类型的展示，只关心数据而不关系数据之间的关系及展现方式。
因此，现有技术中，大屏场景的展示和编辑存在以下几个缺点：1、大屏场景开发周期长；2、体现数据关系难；3、大屏适配难；4、数据展现枯燥；5、纯数据展现体现不出场景与数据之间的关系。
发明内容
本发明实施例所要解决的技术问题是：提供一种大屏场景的编辑方法、装置及计算机可读存储介质，可降低大屏的适配难度，缩短大屏场景的开发周期，并可很好地体现数据关系。
本发明实施例采用的技术方案为：一种大屏场景的编辑方法，包括：
根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板至少包括画布；
创建组件模板对象；
在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表中；
基于调整指令，对所述组件列表中的组件的层级顺序进行调整以使所述组件列表中的组件以各自的层级顺序在画布中进行呈现；
对画布中组件的组件属性进行编辑以显示。
本发明实施例还涉及一种大屏场景的编辑装置，包括：
第一调整单元，用于根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板至少包括画布；
创建单元，用于创建组件模板对象；
选取单元，用于在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表中；
第二调整单元，用于基于调整指令，对所述组件列表中的组件的层级顺序进行调整以使所述组件列表中的组件以各自的层级顺序在画布中进行呈现；
编辑单元，用于对画布中组件的组件属性进行编辑以显示。
本发明实施例还涉及一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时前述的大屏场景的编辑方法的步骤。
本发明实施例的有益效果在于：通过适应调整画布操作面板的大小，解决大屏适配难的问题；通过创建组件模板对象，并通过对组件模板对象进行选取、编辑，可快速配置大屏场景，解决大屏场景开发周期长的问题；通过配置组件之间的交互属性，使得组件与组件之间可以相互订阅组件事件，体现数据关系，从而解决体现数据关系难的问题。本发明实施例可降低大屏的适配难度，缩短大屏场景的开发周期，并可很好地体现数据关系。
附图说明
图1为本发明实施例的一种大屏场景的编辑方法的流程图；
图2为本发明实施例一的方法流程图；
图3为本发明实施例一的步骤S1的方法流程图。
图4为本发明实施例的画布操作面板的界面示意图一；
图5为本发明实施例的画布操作面板的界面示意图二；
图6为本发明实施例的画布操作面板的界面示意图三；
图7为本发明实施例的大屏场景的编辑装置的组成结构图。
具体实施方式
为详细说明本发明实施例的技术内容、所实现目的及效果，以下结合实施方式并配合附图详予说明。
相关技术中：针对在组件需要在编辑端编辑、在大屏幕显示端需要进行显示的应用场景，考虑到编辑端如个人电脑(PC)的分辨率和要显示组件的大屏幕端的分辨率通常为不同，本发明实施例在于实现将在编辑端编辑的组件在大屏幕端进行清晰的显示。
本发明实施例最关键的构思在于：调整画布操作面板的大小以适配大屏分辨率；动态配置组件属性；组件与组件之间配置交互属性。
请参阅图1，一种大屏场景的编辑方法，包括：
步骤1001：根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板至少包括画布；
本步骤中，如图4所示，所述画布操作面板包括画布操作面板外层和内层。画布操作面板还包括其它功能区：如页面管理区、图层区和功能区。画布可视为被内层包裹的区域。
本领域技术人员应该理解，随着画布中显示的组件内容的切换，功能区的内容为可切换的，例如在图4所示的功能区为项目设置区，至少用于设置编辑端的分辨率、背景色及图片；如图5所示的功能区为组件的属性信息、如名称、尺寸等。
步骤1002：创建组件模板对象；
本步骤中，对所有可能使用的组件其模板进行创建，可以理解，每个组件使用一个对应的模板，用以在画布中区别其代表的含义是，例如在地 图组件中，高楼大厦用长方体或正方体表示、河流用曲线表示等等。
步骤1003：在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表中；
本步骤可以具体为：在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表的尾部，并将新增的组件的层级属性值赋值为所述组件列表当前的长度值。其中，组件列表用于记录需要在画布中显示的组件，如图4所示“图层”区下即为组件列表。本申请实施例中，组件列表为纵向排列，组件列表的尾部即为组件列表的最上方，最新加入至组件列表的组件位于组件列表的最上方，位于组件列表的次上方的组件为在最新加入组件之前加入的组件。可以理解，排在组件列表上方的组件加入组件列表的时间晚于排在组件列表下方的组件。假定，组件列表中已加入有99个组件，当前通过组件模板对象新增的组件为表示为如图6所示的“配电台区”的文字，将其加入至组件列表中之后组件列表的长度为99+1＝100，则其层级属性值为100。
本领域技术人员可以理解，能够呈现在编辑端画布中的任何信息均通过组件的形式来加入到画布中，如文字信息、符号信息、数字信息等。具体的如图6所示的文字信息如“配电台区”(选中的组件为配电台)；符号信息如使用两个半圆的合成来表示配电台区；数字信息如“66991”等。任何需要在画布中表示出的信息均可创建一组件模板对象，通过组件来表示该信息。如地图中的楼房可以用正方体或长方体的组件来表示，道路可以用直线或曲线来表示。如图5所示，可挑选饼状图、折线图、柱状图等来表示组件。表示组件的形状可以为任何合理的形状，本文中不做一一枚举。
步骤1004：基于调整指令，对所述组件列表中的组件的层级顺序进行调整，以使所述组件列表中的组件以各自的层级顺序在画布中进行呈现；
本步骤中，基于调整指令，对所述组件列表中的组件的层级顺序进行调整，根据调整后的组件在组件列表中的层级顺序，对组件的层级属性值进行重新赋值。其中，组件在组件列表中层级顺序的调整至少改变了组件列表中的部分组件间在画布中的遮挡显示关系。可以理解，本申请实施例 中，组件之间的层级顺序决定着在画布上组件之间的遮挡关系。通常层级属性值大的组件遮挡层级属性值小的组件。举个例子，调整前，组件A在组件列表中的层级顺序为99，组件B在组件列表中的层级顺序为100，如果组件A和B在画布中需要有遮挡显示的关系，则组件B至少部分遮挡组件A而显示。如果基于调整指令，将组件B和组件A在组件列表中的位置进行交换，如将组件B从100的位置调整至99的位置，此时，组件B的层级属性值变为99，组件A的层级属性值变为100，针对调整后的情况，在画布中组件A至少部分遮挡组件B而显示。遮挡显示可以如图6所示，“配电台区”的组件在组件列表中其位于上方可遮挡显示在画布中左下角的组件(高楼大厦和道路)，也即“配电台区”组件悬浮显示。
可以理解，调整指令基于编辑端的需求而生成。在编辑端有调整组件之间的层级顺序的需求的情况下，生成调整指令。该调整指令可基于编辑端的人工手动进行、也可以自动进行例如检测输入的调整指令。基于该调整指令，对组件列表中的组件之间的层级顺序进行调整。
步骤1005：对画布中组件的组件属性进行编辑以显示。
本步骤中，对画布中组件的组件属性进行编辑，以在显示组件时显示所述组件的组件属性。组件属性可划分为大类和小类。从大类上来看，如图5，组件属性包括样式、数据和交互等三个大类。从小类上看，如样式上来看包括组件名称、尺寸、呈现的动画效果等。其中，大类-样式至少用于描述组件属性的外观、大小、色彩，形状等。大类-数据用于描述该组件代表的数据是从编辑端本地获取、还是需要与其它端如服务器进行交互获取。大类-交互用于描述该组件与哪些组件存在关联关系，基于该关联关系可实现一定的数据展示。具体如下所述：
若组件编辑的属性为预设的交互属性，则修改其他组件中与所述组件具有所述交互属性的组件的交互属性。此处，可通过交互属性的设置达到使至少两个组件具有的关联性的目的，有关联性的至少两个组件至少可通过对其中一个组件的操作达到操作另一组件的目的。举个例子，图6中，画布的右下角存在有“应急状态”组件(相当于一按钮)，当编辑端的用户 对其进行点击操作时，在画布左下角的“配电台”区的未恢复数据、已恢复数据和累计停电等数值的重新读取并展示，相当于在画布中“配电台”区的数据进行刷新展示。相当于将未恢复数据、已恢复数据和累计停电等组件的属性值进行修改后显示。
上述方案中，根据大屏幕的分辨率以及编辑端的分辨率，对操作面板大小进行调节，使得画布操作面板的大小能够适配大屏分辨率，在编辑端编辑的组件在大屏幕端进行清晰的显示。
从上述描述可知，本发明实施例的有益效果在于：根据分辨率进行画布操作面板的调节，可避免直接在大屏幕上进行调节而导致的大屏的适配难度的问题，缩短大屏场景的开发周期。并且，组件间可配置交互属性，并可很好地体现数据关系。
在一个实施例中，所述根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小具体为：
自适应调整画布操作面板外层的宽度和高度；
根据编辑端的分辨率，计算所述画布操作面板外层的宽度和高度，并将画布操作面板内层的宽度和高度分别赋值为计算得到的宽度和高度；
将画布的宽度和高度分别赋值为大屏幕的宽度和高度；
若大屏幕的宽度大于画布操作面板内层的宽度且大屏幕的高度大于画布操作面板内层的高度，则计算画布操作面板内层的宽度与大屏幕的宽度的比例，得到第一比例；
计算画布操作面板内层的高度与大屏幕的高度的比例，得到第二比例；
获取第一比例和第二比例中数值较小的比例，并根据所述比例对所述画布的宽度和高度进行缩小。
前述方案中，依据第一比例和第二比例中数值较小的比例对画布的宽度和高度进行调整，考虑到了在实际应用中在宽、高显示中存在有以宽度为主或以高度为主进行显示的需求，符合了实际使用情况。
由上述描述可知，根据大屏幕和编辑端的分辨率，对画布的宽度和高 度进行调整，适应调整画布操作面板的大小，解决大屏适配难的问题。
在一个实施例中，所述创建组件模板对象具体为：
配置组件的基本信息，所述基本信息包括类型、编号、名称以及层级属性值；
配置组件的展示封面图片；
配置组件的属性列表。
由上述描述可知，通过创建组件模板对象，后续可通过组件模板对象快速新增组件，解决大屏场景开发周期长的问题。
在一个实施例中，若组件编辑的属性为预设的交互属性，则修改其他组件中与所述组件具有所述交互属性的组件的交互属性包括：
配置组件之间的交互属性，并为所述交互属性分配唯一的标识符；
配置具有交互属性的组件的启闭状态；
若所述组件处于开启状态，且监听到所述交互属性的值发生改变，则将所述交互属性的值进行相应修改。
由上述描述可知，通过配置组件之间的交互属性，体现组件之间的数据关系。
在一个实施例中，所述组件包括文字类型组件、素材类型组件、图表类型组件、地图组件、功能组件和第三方拓展组件。
由上述描述可知，可通过不同类型的组件生动地模拟业务场景，动态地展示数据交互，直观地展现场景及数据之间的关系。
本发明实施例还提出一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现以下步骤：
步骤1001：根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板至少包括画布；
步骤1002：创建组件模板对象；
步骤1003：在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表中；
步骤1004：基于调整指令，对所述组件列表中的组件的层级顺序进行 调整，以使所述组件列表中的组件以各自的层级顺序在画布中进行呈现；
步骤1005：对画布中组件的组件属性进行编辑以显示。
需要说明的是，本申请实施例的存储介质可以由任何类型的易失性或非易失性存储设备、或者它们的组合来实现。其中，非易失性存储器可以是只读存储器(ROM，Read Only Memory)、可编程只读存储器(PROM，Programmable Read-Only Memory)、可擦除可编程只读存储器(EPROM，Erasable Programmable Read-Only Memory)、电可擦除可编程只读存储器(EEPROM，Electrically Erasable Programmable Read-Only Memory)、磁性随机存取存储器(FRAM，Ferromagnetic Random Access Memory)、快闪存储器(Flash Memory)、磁表面存储器、光盘、或只读光盘(CD-ROM，Compact Disc Read-Only Memory)；磁表面存储器可以是磁盘存储器或磁带存储器。易失性存储器可以是随机存取存储器(RAM，Random Access Memory)，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的RAM可用，例如静态随机存取存储器(SRAM，Static Random Access Memory)、同步静态随机存取存储器(SSRAM，Synchronous Static Random Access Memory)、动态随机存取存储器(DRAM，Dynamic Random Access Memory)、同步动态随机存取存储器(SDRAM，Synchronous Dynamic Random Access Memory)、双倍数据速率同步动态随机存取存储器(DDRSDRAM，Double Data Rate Synchronous Dynamic Random Access Memory)、增强型同步动态随机存取存储器(ESDRAM，Enhanced Synchronous Dynamic Random Access Memory)、同步连接动态随机存取存储器(SLDRAM，SyncLink Dynamic Random Access Memory)、直接内存总线随机存取存储器(DRRAM，Direct Rambus Random Access Memory)。本发明实施例描述的存储介质旨在包括但不限于这些和任意其它适合类型的存储器。
在一个实施例中，所述根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小具体为：
自适应调整画布操作面板外层的宽度和高度；
根据编辑端的分辨率，计算所述画布操作面板外层的宽度和高度，并将画布操作面板内层的宽度和高度分别赋值为计算得到的宽度和高度；
将画布的宽度和高度分别赋值为大屏幕的宽度和高度；
若大屏幕的宽度大于画布操作面板内层的宽度且大屏幕的高度大于画布操作面板内层的高度，则计算画布操作面板内层的宽度与大屏幕的宽度的比例，得到第一比例；
计算画布操作面板内层的高度与大屏幕的高度的比例，得到第二比例；
获取第一比例和第二比例中数值较小的比例，并根据所述比例对所述画布的宽度和高度进行缩小。
在一个实施例中，所述创建组件模板对象具体为：
配置组件的基本信息，所述基本信息包括类型、编号、名称以及层级属性值；
配置组件的展示封面图片；
配置组件的属性列表。
在一个实施例中，若组件编辑的属性为预设的交互属性，则修改其他组件中与所述组件具有所述交互属性的组件的交互属性包括：
配置组件之间的交互属性，并为所述交互属性分配唯一的标识符；
配置具有交互属性的组件的启闭状态；
若所述组件处于开启状态，且监听到所述交互属性的值发生改变，则将所述交互属性的值进行相应修改。
在一个实施例中，所述组件包括文字类型组件、素材类型组件、图表类型组件、地图组件、功能组件和第三方拓展组件。
本申请实施例还提供一种大屏场景的编辑装置，如图7所示，所述装置包括：第一调整单元701、创建单元702、选取单元703、第二调整单元704和编辑单元705；其中，
第一调整单元701，用于根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板至少包括画布；
创建单元702，用于创建组件模板对象；
选取单元703，用于在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表中；
第二调整单元704，用于基于调整指令，对所述组件列表中的组件的层级顺序进行调整以使所述组件列表中的组件以各自的层级顺序在画布中进行呈现；
编辑单元705，用于对画布中组件的组件属性进行编辑以显示。
其中，所述第一调整单元701，用于：
自适应调整画布操作面板外层的宽度和高度；
根据编辑端的分辨率，计算所述画布操作面板外层的宽度和高度，并将画布操作面板内层的宽度和高度分别赋值为计算得到的宽度和高度；
将画布的宽度和高度分别赋值为大屏幕的宽度和高度；
若大屏幕的宽度大于画布操作面板内层的宽度且大屏幕的高度大于画布操作面板内层的高度，则计算画布操作面板内层的宽度与大屏幕的宽度的比例，得到第一比例；
计算画布操作面板内层的高度与大屏幕的高度的比例，得到第二比例；
获取第一比例和第二比例中数值较小的比例，并根据所述比例对所述画布的宽度和高度进行缩小。
其中，所述创建单元702，用于：
配置组件的基本信息，所述基本信息包括类型、编号、名称以及层级属性值；
配置组件的展示封面图片；
配置组件的属性列表。
所述装置还包括：修改单元，用于：
若组件编辑的属性为预设的交互属性，则修改其他组件中与所述组件具有所述交互属性的组件的交互属性值。
所述第二调整单元704，还用于：
对组件列表中组件的层级顺序的调整至少能够改变组件列表中的部分 组件间在画布中的遮挡显示关系。
本发明实施例中，所述第一调整单元701、创建单元702、选取单元703、第二调整单元704和编辑单元705在实际应用中均可由中央处理器(CPU，Central Processing Unit)、数字信号处理器(DSP，Digital Signal Processor)、微控制单元(MCU，Microcontroller Unit)或可编程门阵列(FPGA，Field－Programmable Gate Array)实现。
需要说明的是，本申请实施例的大屏场景的编辑装置，由于该装置解决问题的原理与编辑方法相似，因此，编辑装置的实施过程及实施原理均可以参见编辑方法的实施过程及实施原理描述，重复之处不再赘述。
实施例一
请参照图2-3，本发明实施例的实施例一为：一种大屏场景的编辑方法，如图2所示，包括如下步骤：
S1：根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小；其中，画布操作面板dom元素分为画布操作面板外层、画布操作面板内层以及画布canvas。
S2：创建组件模板对象；大屏编辑人员可在组件管理模块中通过组件模板编辑面板进行组件基本信息、组件属性信息的编辑并新增。
具体地，配置组件的基本信息，所述基本信息包括类型、编号、名称以及层级属性值；配置组件的展示封面图片；配置组件的属性列表，每个组件对象都有一个组件属性对象，属性对象是一个深度嵌套的json对象，并以字符串的形式进行16进制的编码，在数据库中以bigblob(blob为二进制大型对象，是一个可以存储大量数据的容器，它能容纳不同大小的数据)形式保存。
深度嵌套对象的形式使得组件属性的拓展性很强，16进制编码的方式使blob(binary large object，二进制大对象)类型数据不需要进行二进制流的解析，也不需要关注数据是否存在特殊符号，bigblob类型的保存使得属性对象可以是复杂结构的json对象。
S3：在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表的尾部，并将新增的组件的层级属性值赋值为所述组件列表当前的长度值。通过步骤S2的配置，编辑器中的组件新增面板就多了组件对象，大屏编辑人员可通过组件新增面板在画布中新增组件，对组件模板对象的组件基本信息和组件属性进行16进制的解码，新增的组件会加入到组件列表尾部，并将组件的层级属性值z-index赋值为组件列表当前的长度值。
S4：对所述组件列表中的组件的层级顺序进行调整，并根据调整后的组件在组件列表中的层级顺序，对组件的层级属性值进行重新赋值。大屏编辑人员可通过层管理面板拖动组件顺序或点击上移下移按钮对组件层级进行调整，程序会按照调整后的组件在组件列表中的位置，对组件的层级属性值进行重新赋值。
S5：对画布中组件的组件属性进行编辑；大屏编辑人员可通过选中画布中的组件在属性操作面板对组件属性进行编辑。
S6：判断编辑的属性是否为预设的交互属性，且具有交互属性的组件是否处于开启状态，若是，则执行步骤S7。
S7：修改所述交互属性中其他组件的值；具体地，搜索包含所述交互属性的组件，并将搜索到的组件中所述交互属性的值进行相应修改。
本实施例是基于vue开发的，拥有数据双向绑定的特性，通过对组件属性对象深度监听就能实时改变展现效果。例如监听层叠样式表(css)属性实时改变组件css属性，监听数据交互属性实时获取数据。
本实施例中，组件与组件的交互采用观察者模式以及数据双向绑定的设计思想实现编码。首先通过组件管理模块对交互属性进行配置。交互属性可设置别名(id-value)，设置的别名需在当前项目唯一。在组件编辑操作面板可配置交互属性是否开启，若开启则会将交互属性加入到全局状态管理交互属性队列对象中进行属性监听。在其他组件编辑数据应用程序编程接口(API)属性或者统一资源定位符(url)属性时，当属性字符串带有‘${’字符串时会弹出交互属性列表供选择，选择完之后url属性变成如下格式：127.0.0.1/xx/xx？id-value＝${id-value}的格式。当全局状态管理监听到交互属 性值改变时，则搜索所有带有${id-value}表达式的组件，并触发数据刷新回调事件，即将所有的交互属性的值进行数据同步。
在一个实施例中，对于步骤S1，如图3所示，包括如下步骤：
S101：自适应调整画布操作面板外层的宽度和高度；具体地，通过flex布局(弹性布局)方式自适应宽高，即画布操作面板外层的父元素样式属性为display:flex，画布操作面板外层的样式属性为flex:1。
其中，本实施例中宽度表示水平方向的像素数量，高度表示竖直方向上的像素数量，因此，宽高即相当于分辨率。
S102：根据编辑端的分辨率，计算所述画布操作面板外层的宽度和高度，并将画布操作面板内层的宽度和高度分别赋值为计算得到的宽度和高度；即通过监听浏览器窗口大小事件，计算画布操作面板外层的宽高，并将计算的值赋给画布操作面板内层。在实际应用场景中，可在浏览器窗口大小事件中通过获取画布操作面板dom元素对象的clientHeight和clientWidth属性的值，来获取到画布操作面板外层的宽度和高度。
S103：将画布的宽度和高度分别赋值为大屏幕的宽度和高度；画布canvas的宽高即为真实的大屏幕的分辨率。
S104：判断大屏幕的宽度和高度是否分别大于画布操作面板内层的宽度和高度，即是否大屏幕的宽度大于画布操作面板内层的宽度且大屏幕的高度大于画布操作面板内层的高度，若是，则表示将画布放在操作面板内层会超出内层范围，则需对画布进行缩小操作，即执行步骤S105，若否，即大屏幕的宽高分别小于或等于画布操作面板内层的宽高，则不对画布进行缩放操作。
S105：计算画布操作面板内层的宽度与大屏幕的宽度的比例，得到第一比例；
S106：计算画布操作面板内层的高度与大屏幕的高度的比例，得到第二比例；
S107：获取第一比例和第二比例中数值较小的比例，并根据所述比例对所述画布的宽度和高度进行缩小。
例如，假设大屏幕的分辨率为3920*1920，大屏编辑人员所用的编辑端的分辨率为1920*1080(如图5所示功能区中的分辨率)，赋值后的画布操作面板内层的宽高也为1920*1080，缩放前的画布大小为3920*1920；由于画布操作面板内层的宽高均小于大屏幕的宽高，则计算得到第一比例为1920/3920，第二比例为1080/1920；由于第一比例1920/3920小于第二比例1080/1920，因此，将画布按照第一比例1920/3920进行缩小。优选地，实际场景中，采用css3的transform:scale进行缩放。
在一个实施例中，由于整体缩小不利于对细节部分进行处理，因此在画布下方可集成一个可缩放画布大小的滑块(如图4所示)，当将滑块拖动到最后边的时候，将会把画布canvas缩放到原尺寸3920*1920，通过滚动条拖拉到具体位置以调整细节。
在一个实施例中，本实施例中，组件包括文字类型组件、素材类型组件、图表类型组件、地图组件、功能组件和第三方拓展组件。
其中，地图组件封装了第三方地理信息数据库(GIS库)，地图组件通过地图组件管理工具可以对地图基础样式进行编辑，在组件管理模块进行组件新增。地图组件控制面板可以进行子组件的添加。每个地图组件需要实现与子组件交互的应用程序编程接口(API接口)。子组件通过在属性编辑面板设置交互属性，并添加与地图组件的交互事件，同时设置交互参数，通过对子组件交互属性实现监听，并在监听函数里面调用对应的地图组件的交互事件及传入参数完成交互。
因此，本实施例中，数据可以GIS，三维动画，图表，图片，文字等形式综合展现，且在场景的基础上数据之间的关系及业务逻辑以可视化的动画效果体现，直观的把数据统计、关系、交互等信息转化成可视化信息的产品。
本实施例中，为了解决大屏场景开发周期长的问题，结合现有的业务设计多套可用的大屏业务场景模板，如果模板无法满足业务要求也可以通过可视化方式在线编辑，用庞大的组件库快速拖拉编辑组件属性快速布局，快速配置业务场景。
为了解决体现数据关系难的问题，扩展大量第三方图表组件，组件之间可以相互配置交互动态体现数据关系。
为了解决大屏适配难的问题，结合flex，transform，rem(用于实现自适应布局)等多种技术响应式适配大屏。
为了直观生动地展现数据及场景与数据之间关系，结合GIS，三维动画，图表生动地模拟业务场景，动态地展示数据交互。
实施例二
本实施例是实施例一的一具体应用场景。
本实施例中，编辑端中集成有编辑器，编辑器一共由四个部分组成，分别为新增组件和保存预览场景操作面板、页面管理和图层操作面板、组件编辑操作面板、画布操作面板。
由于大屏分辨率很大，编辑大屏的时候通常都在分辨率比较正常的PC端上进行，但大屏分辨率又比PC端分辨率大很多，所以画布面板在设计上采用自适应布局+动态缩放的方式。具体地，菜单栏、图层面板、操作面板采用fixed+flex局部方式，采用transform缩放进行画布布局，以达到既能按照大屏分辨率处理细节布局，又可以缩小画布看整体布局。
编辑器通过在画布新增各种组件完成大屏场景的编辑。组件以图层的方式进行管理，通过图层管理操作面板可以改变图层顺序。选中画布中的组件可以对组件进行复制，删除，拖动等基本操作，选中的同时会出现对应组件编辑操作面板，通过对属性的设置实时改变组件信息。其中GIS组件可在组件编辑操作面板添加GIS子组件。
通过组件管理模块动态配置组件属性，开发中实现组件的规范接口即可完成组件编码部分。组件与组件的交互采用观察者模式以及数据双向绑定的设计思想实现编码。组件与组件之间可以相互订阅组件事件，其中交互的事件必须实现组件交互的相关接口，并暴露交互参数到全局状态管理对象中进行监听，当交互参数发生变化时，监听事件触发交互事件。
本实施例可提供丰富的组件库、多种业务模板库、素材库；采用拖拽式自由布局，无需编码，全图形化编辑，快速打造专业可视化展示功能。
实施例三
本实施例是对应上述实施例的一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现以下步骤：
步骤1001：根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板至少包括画布；
步骤1002：创建组件模板对象；
步骤1003：在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表中；
步骤1004：基于调整指令，对所述组件列表中的组件的层级顺序进行调整，以使所述组件列表中的组件以各自的层级顺序在画布中进行呈现；
步骤1005：对画布中组件的组件属性进行编辑以显示。
在一个实施例中，若组件编辑的属性为预设的交互属性，则修改其他组件中与所述组件具有所述交互属性的组件的交互属性。
在一个实施例中，所述根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小具体为：
自适应调整画布操作面板外层的宽度和高度；
根据编辑端的分辨率，计算所述画布操作面板外层的宽度和高度，并将画布操作面板内层的宽度和高度分别赋值为计算得到的宽度和高度；
将画布的宽度和高度分别赋值为大屏幕的宽度和高度；
若大屏幕的宽度大于画布操作面板内层的宽度且大屏幕的高度大于画布操作面板内层的高度，则计算画布操作面板内层的宽度与大屏幕的宽度的比例，得到第一比例；
计算画布操作面板内层的高度与大屏幕的高度的比例，得到第二比例；
获取第一比例和第二比例中数值较小的比例，并根据所述比例对所述画布的宽度和高度进行缩小。
在一个实施例中，所述创建组件模板对象具体为：
配置组件的基本信息，所述基本信息包括类型、编号、名称以及层级属性值；
配置组件的展示封面图片；
配置组件的属性列表。
在一个实施例中，若组件编辑的属性为预设的交互属性，则修改其他组件中与所述组件具有所述交互属性的组件的交互属性包括：
配置组件之间的交互属性，并为所述交互属性分配唯一的标识符；
配置具有交互属性的组件的启闭状态；
若所述组件处于开启状态，且监听到所述交互属性的值发生改变，则将所述交互属性的值进行相应修改。
在一个实施例中，所述组件包括文字类型组件、素材类型组件、图表类型组件、地图组件、功能组件和第三方拓展组件。
综上所述，本发明实施例提供的一种大屏场景的编辑方法、装置及计算机可读存储介质，通过适应调整画布操作面板的大小，解决大屏适配难的问题；通过创建组件模板对象，并通过对组件模板对象进行选取、编辑，可快速配置大屏场景，解决大屏场景开发周期长的问题；通过配置组件之间的交互属性，使得组件与组件之间可以相互订阅组件事件，体现数据关系，从而解决体现数据关系难的问题；通过不同类型的组件生动地模拟业务场景，动态地展示数据交互，直观地展现场景及数据之间的关系。本发明可降低大屏的适配难度，缩短大屏场景的开发周期，可很好地体现数据关系，并可直观生动地展现数据以及场景与数据之间的关系。
以上所述仅为本发明的实施例，并非因此限制本发明实施例的专利范围，凡是利用本发明实施例说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明实施例的专利保护范围内。
本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用硬件实施例、软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘 存储器和光学存储器等)上实施的计算机程序产品的形式。
本发明是参照根据本发明实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
以上所述，仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。

Claims (11)

  1. 一种大屏场景的编辑方法，包括：
    根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板至少包括画布；
    创建组件模板对象；
    在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表中；
    基于调整指令，对所述组件列表中的组件的层级顺序进行调整以使所述组件列表中的组件以各自的层级顺序在画布中进行呈现；
    对画布中组件的组件属性进行编辑以显示。
  2. 根据权利要求1所述的大屏场景的编辑方法，其中，所述根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小包括：
    自适应调整画布操作面板外层的宽度和高度；
    根据编辑端的分辨率，计算所述画布操作面板外层的宽度和高度，并将画布操作面板内层的宽度和高度分别赋值为计算得到的宽度和高度；
    将画布的宽度和高度分别赋值为大屏幕的宽度和高度；
    若大屏幕的宽度大于画布操作面板内层的宽度且大屏幕的高度大于画布操作面板内层的高度，则计算画布操作面板内层的宽度与大屏幕的宽度的比例，得到第一比例；
    计算画布操作面板内层的高度与大屏幕的高度的比例，得到第二比例；
    获取第一比例和第二比例中数值较小的比例，并根据所述比例对所述画布的宽度和高度进行缩小。
  3. 根据权利要求1所述的大屏场景的编辑方法，其中，所述创建组件模板对象包括：
    配置组件的基本信息，所述基本信息包括类型、编号、名称以及层级属性值；
    配置组件的展示封面图片；
    配置组件的属性列表。
  4. 根据权利要求1所述的大屏场景的编辑方法，其中，所述方法还包括：
    若组件编辑的属性为预设的交互属性，则修改其他组件中与所述组件具有所述交互属性的组件的交互属性值。
  5. 根据权利要求1-4任一项所述的大屏场景的编辑方法，其中，组件列表中组件的层级顺序的调整至少能够改变组件列表中的部分组件间在画布中的遮挡显示关系。
  6. 一种大屏场景的编辑装置，包括：
    第一调整单元，用于根据大屏幕的分辨率以及编辑端的分辨率，调整画布操作面板的大小，所述画布操作面板至少包括画布；
    创建单元，用于创建组件模板对象；
    选取单元，用于在画布中通过选取组件模板对象新增组件，将新增的组件加入到组件列表中；
    第二调整单元，用于基于调整指令，对所述组件列表中的组件的层级顺序进行调整以使所述组件列表中的组件以各自的层级顺序在画布中进行呈现；
    编辑单元，用于对画布中组件的组件属性进行编辑以显示。
  7. 根据权利要求6所述的装置，其中，所述第一调整单元，用于：
    自适应调整画布操作面板外层的宽度和高度；
    根据编辑端的分辨率，计算所述画布操作面板外层的宽度和高度，并将画布操作面板内层的宽度和高度分别赋值为计算得到的宽度和高度；
    将画布的宽度和高度分别赋值为大屏幕的宽度和高度；
    若大屏幕的宽度大于画布操作面板内层的宽度且大屏幕的高度大于画布操作面板内层的高度，则计算画布操作面板内层的宽度与大屏幕的宽度的比例，得到第一比例；
    计算画布操作面板内层的高度与大屏幕的高度的比例，得到第二比例；
    获取第一比例和第二比例中数值较小的比例，并根据所述比例对所述 画布的宽度和高度进行缩小。
  8. 根据权利要求6所述的装置，其中，所述创建单元，用于：
    配置组件的基本信息，所述基本信息包括类型、编号、名称以及层级属性值；
    配置组件的展示封面图片；
    配置组件的属性列表。
  9. 根据权利要求6所述的装置，其中，所述装置还包括：修改单元，用于：
    若组件编辑的属性为预设的交互属性，则修改其他组件中与所述组件具有所述交互属性的组件的交互属性值。
  10. 根据权利要求6至9任一项所述的装置，其中，所述第二调整单元，用于：
    对组件列表中组件的层级顺序的调整至少能够改变组件列表中的部分组件间在画布中的遮挡显示关系。
  11. 一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现权利要求1至5任一所述方法的步骤。
PCT/CN2019/090208 2018-11-30 2019-06-05 大屏场景的编辑方法、装置及计算机可读存储介质 WO2020107850A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201811456810.2 2018-11-30
CN201811456810.2A CN109656654B (zh) 2018-11-30 2018-11-30 大屏场景的编辑方法及计算机可读存储介质

Publications (1)

Publication Number Publication Date
WO2020107850A1 true WO2020107850A1 (zh) 2020-06-04

Family

ID=66112578

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2019/090208 WO2020107850A1 (zh) 2018-11-30 2019-06-05 大屏场景的编辑方法、装置及计算机可读存储介质

Country Status (2)

Country Link
CN (1) CN109656654B (zh)
WO (1) WO2020107850A1 (zh)

Families Citing this family (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109656654B (zh) * 2018-11-30 2020-06-09 厦门亿力吉奥信息科技有限公司 大屏场景的编辑方法及计算机可读存储介质
CN110990093A (zh) * 2019-11-20 2020-04-10 武汉联图时空信息科技有限公司 一种基于组件技术的柔性界面布局可视化方法及介质
CN113190299B (zh) * 2020-01-14 2022-08-09 成都鼎桥通信技术有限公司 基于vue在地图上展示自定义图层的方法和设备
CN113132556B (zh) * 2020-01-16 2023-04-11 西安诺瓦星云科技股份有限公司 视频处理方法、装置及系统和视频处理设备
CN112328249A (zh) * 2020-11-11 2021-02-05 中投国信(北京)科技发展有限公司 一种基于业务模型的可视化快速构建系统
CN112732253A (zh) * 2020-12-28 2021-04-30 中科院计算技术研究所大数据研究院 一种自适应终端的可视化大屏动态容器组件
CN112565847B (zh) * 2021-02-22 2021-07-13 成都云帆数联科技有限公司 大屏显示控制方法及装置
CN113064587B (zh) * 2021-03-16 2024-03-26 北京达佳互联信息技术有限公司 组件操控方法、装置、电子设备及存储介质

Citations (6)

* Cited by examiner, † Cited by third party
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
CN104010204A (zh) * 2013-02-27 2014-08-27 中国移动通信集团公司 图像信息处理方法及装置
CN105760178A (zh) * 2016-03-17 2016-07-13 网易（杭州）网络有限公司 对界面控件进行适配的方法及装置
CN107577515A (zh) * 2017-10-10 2018-01-12 北京小度信息科技有限公司 可视化组件的扩展方法、装置、电子设备及存储介质
US20180088783A1 (en) * 2016-09-28 2018-03-29 Rockwell Automation Technologies, Inc. System and method for previewing a dashboard display on various form factors
CN109656654A (zh) * 2018-11-30 2019-04-19 厦门亿力吉奥信息科技有限公司 大屏场景的编辑方法及计算机可读存储介质

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102034255B (zh) * 2010-10-21 2012-12-26 同辉佳视(北京)信息技术有限公司 点对点超大屏幕编辑和点对点天时间编辑的方法和装置
US10009658B2 (en) * 2013-03-11 2018-06-26 Sony Corporation Multiview TV template creation and display layout modification
US20150253974A1 (en) * 2014-03-07 2015-09-10 Sony Corporation Control of large screen display using wireless portable computer interfacing with display controller
CN104851075A (zh) * 2015-05-05 2015-08-19 天脉聚源（北京）教育科技有限公司 一种便于展示的笔记文件的实现方法及装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
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
CN104010204A (zh) * 2013-02-27 2014-08-27 中国移动通信集团公司 图像信息处理方法及装置
CN105760178A (zh) * 2016-03-17 2016-07-13 网易（杭州）网络有限公司 对界面控件进行适配的方法及装置
US20180088783A1 (en) * 2016-09-28 2018-03-29 Rockwell Automation Technologies, Inc. System and method for previewing a dashboard display on various form factors
CN107577515A (zh) * 2017-10-10 2018-01-12 北京小度信息科技有限公司 可视化组件的扩展方法、装置、电子设备及存储介质
CN109656654A (zh) * 2018-11-30 2019-04-19 厦门亿力吉奥信息科技有限公司 大屏场景的编辑方法及计算机可读存储介质

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
ANONYMOUS: "Elementary Learning on Cocos Creator (II) Description of UI System: Components of UI (Canvas, Widget, Button)", 19 September 2018 (2018-09-19), pages 1 - 15, XP055711024, Retrieved from the Internet <URL:https://www.jianshu.com/p/5361d3984dce?> *

Also Published As

Publication number Publication date
CN109656654B (zh) 2020-06-09
CN109656654A (zh) 2019-04-19

Similar Documents

Publication Publication Date Title
WO2020107850A1 (zh) 大屏场景的编辑方法、装置及计算机可读存储介质
CN107844297B (zh) 一种数据可视化实现系统及方法
US8533595B2 (en) Hierarchical display and navigation of document revision histories
US8533593B2 (en) Hierarchical display and navigation of document revision histories
US8874525B2 (en) Hierarchical display and navigation of document revision histories
US8701002B2 (en) Hierarchical display and navigation of document revision histories
US8533594B2 (en) Hierarchical display and navigation of document revision histories
US8161452B2 (en) Software cinema
CN110489116A (zh) 一种页面的渲染方法、装置及计算机存储介质
US20070256054A1 (en) Using 3-dimensional rendering effects to facilitate visualization of complex source code structures
US11899919B2 (en) Media presentation effects
EP1936623A2 (en) System, method and medium organizing templates for generating moving images
US20130097552A1 (en) Constructing an animation timeline via direct manipulation
AU2019469487B2 (en) Method and apparatus for operating intelligent interaction tablet, terminal device, and storage medium
RU2541876C2 (ru) Оптимизация производительности платформы визуализации данных
US9159168B2 (en) Methods and systems for generating a dynamic multimodal and multidimensional presentation
CA2963849A1 (en) Systems and methods for creating and displaying multi-slide presentations
US20200142572A1 (en) Generating interactive, digital data narrative animations by dynamically analyzing underlying linked datasets
US10248292B2 (en) Electronic picture book which sequentially changes in response to scroll operation
JP5063810B2 (ja) アニメーション編集装置、アニメーション再生装置及びアニメーション編集方法
CN112527172A (zh) 界面显示方法及装置、计算机可读存储介质、电子设备
Morris et al. CyAnimator: simple animations of Cytoscape networks
US20170060389A1 (en) Providing a set of diagram views of a diagram model to a user
CN109815288A (zh) 一种数据可视化方法及系统
KR20110044419A (ko) 상호 작용이 가능한 콘텐츠 저작 수단을 제공하는 방법

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 19889772

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 19889772

Country of ref document: EP

Kind code of ref document: A1