Real-time interaction-based digital screen visual component rapid configuration and rendering technology

Abstract

The invention discloses a digital screen visual component rapid configuration and rendering technology based on real-time interaction, and the method comprises the steps: receiving an instruction of a user for creating an EPG, loading and arranging a canvas, and supporting the adding of a component on the canvas; receiving an instruction of dragging the component to the canvas by a user, initializing and analyzing configuration data of the component, and rendering the component; receiving a navigation configuration instruction to add or delete the navigation bar, and displaying the navigation bar in real time; receiving a column configuration instruction to add or delete a column, and displaying the column in real time; receiving a component configuration instruction to add, move up, move down or delete the components, and displaying the components in real time; clicking the component or the container, carrying out content configuration, and displaying the arrangement effect in real time; re-rendering the component according to the instruction or the modified content; and according to the preview instruction, the same interaction effect as the set top box is previewed in real time in the browser. The method is used for solving the problem that a code arrangement mode in the related technology cannot realize real-time arrangement of a visual component, position modification and content editing of the component are realized, the effect of immediately rendering the component after the content is arranged is achieved, the operating EPG arrangement speed is higher, and the use experience is better.

Description

Technical Field

[0001] The present disclosure relates to the fields of communication and computer technologies, and particularly to a technology for rapid configuration and rendering of visual components of digital screens. Background Art

[0002] With the rapid development of the television industry, the number of digital screen users has been steadily increasing year by year, and EPG (Electronic Program Guide) has been widely used. In the rapidly changing information age, the demand of audiences for new things is constantly increasing. Therefore, the styles and content of EPG are required to be updated iteratively frequently to meet the needs and experiences of users.

[0003] However, in actual scenarios, EPG often has three major problems. First, every time the EPG style is updated, developers need to perform secondary development on the original basis, and then testers need to perform adaptation tests on dozens or even hundreds of set-top boxes, consuming a large amount of manpower and time, and bugs are likely to appear after the update. Second, every time the EPG content arrangement is updated, visual content arrangement is not supported. Operators of operators or radio and television need to arrange picture posters and programs by referring to the styles on the TV, preview them on the set-top box and then distribute them, consuming a large amount of operation time and having a slow update speed, reducing the timeliness of the content and greatly reducing the operation effect. Finally, because the EPG developers are not necessarily the same each time and there is no development specification, it is easier to have problems in the live network and the problems are difficult to locate and modify. Moreover, any addition or deletion of columns, the content display of new columns, and even the hiding of floors, etc. all require developers to modify the template again.

[0004] Therefore, a technology for rapid configuration and rendering of visual components of digital screens based on real-time interaction is needed to achieve what you see is what you get, allowing operators to see the desktop styles they have arranged and adjust them arbitrarily, achieving the purposes of less development, less operation, and high efficiency. Summary of the Invention

[0005] The present disclosure provides a technology for rapid configuration and rendering of visual components of digital screens based on real-time interaction to solve the problem that EPG must be developed and a large number of adaptations are required every time it is updated, and to reduce the operation difficulty and operation time of each content update by visual arrangement, and to be able to see the effect in time after modifying the content, thereby largely avoiding problems caused by improper arrangement or development of live network EPG, and finally achieving the effect of saving manpower and time costs.

[0006] According to an example of the present disclosure, a technology for quickly configuring and rendering digital screen visualization components based on real-time interaction is provided. This method does not require defining recommended positions in the template. Instead, only by adding corresponding components during the layout, and the components provide recommended positions (containers). After selecting the component or container and configuring the relevant content data, the configured content will be immediately displayed in the editing area, and the content displayed in the editing area is the same as that displayed in the EPG, achieving what you see is what you get. The method includes: Receiving an instruction from the user to create an EPG, loading the layout canvas, and supporting adding components on the canvas; receiving an instruction from the user to drag a component to the canvas, initializing and parsing the configuration data of the component, and rendering the component; receiving a navigation configuration instruction to add or delete a navigation bar and displaying it in real time; receiving a column configuration instruction to add or delete a column and displaying it in real time; receiving a component configuration instruction to add, move up, move down, or delete a component and displaying it in real time; clicking on a component or container to perform content configuration; re-rendering the component according to the instruction or the modified content; and according to a preview instruction, previewing the same interaction effect as that of the set-top box in the browser in real time.

[0007] In one implementation, receiving an instruction from the user to create an EPG, loading the layout canvas, and supporting adding components on the canvas specifically includes: creating a theme for the EPG, creating a name for the EPG, and selecting a desired EPG template to load the layout canvas.

[0008] In one implementation, receiving an instruction from the user to drag a component to the canvas, initializing and parsing the configuration data of the component, and rendering the component specifically includes: receiving an instruction from the user to drag a component to the canvas, parsing the configuration data of the component, and the configuration data includes five categories, namely: (1) Component basic information category (including attributes: component type, cover image, internal name. Purpose: When arranging the EPG, relevant component information is presented in the component list area according to the component type.); (2) Component layout category (including attributes: layout css, layout js. Purpose: Files used for component rendering during EPG layout.); (3) Component data category (including attributes: floor configuration, picture container configuration, guide frame container configuration, carousel container configuration, advertisement container configuration. Purpose: When arranging, when selecting a component or a component content container, detailed data configuration of different types of containers can be performed in the content configuration area.); (4) Component preview category (including attributes: preview css, preview js. Purpose: Files used for component rendering during EPG preview.); (5) Component rendering configuration category (including attributes: rendering css, rendering js. Purpose: Files used for component rendering when converting to the set-top box display.). In one implementation, receiving a navigation configuration instruction to add or delete a navigation bar and displaying it in real time specifically includes: receiving an instruction to add or delete input by the user, processing the instruction to add or delete, and adding or deleting a navigation bar.

[0009] In one embodiment, the column configuration instruction is received to add or delete a column and display it in real time, which specifically includes: receiving the add or delete instruction input by the user, processing the add or delete instruction, and adding or deleting a column.

[0010] In one embodiment, the component configuration instruction is received to add, move up, move down, or delete a component and display it in real time, which specifically includes: rendering the newly added component after adding the component; the component is displayed above after moving up the component; the component is displayed below after moving down the component; the component is not displayed after deleting the component.

[0011] In one embodiment, when a component or container is clicked, content configuration is performed, which specifically includes: for the component, including going online and offline, name, title, margin, etc.; for the container, including container type, picture, name, highlights, etc.

[0012] In one embodiment, according to the preview instruction, the same interactive effect as that of the set-top box is previewed in the browser in real time, which specifically includes: rendering the entire EPG. Description of the Drawings

[0013] The attached drawings here are part of the specification and are used as an example to illustrate a digital screen visualization component rapid configuration and rendering technology based on real-time interaction of the present disclosure, and are not used to limit this method.

[0014] Figure 1 It is the flowchart of this method; Figure 2 It is the layout framework diagram of this method; Figure 3 It is the visualization layout EPG rendering flowchart of this method. Embodiment

[0015] In order to enable ordinary personnel in the field to better understand the technical solutions of the present disclosure, the embodiments of the present disclosure will be clearly and completely described below with reference to the attached drawings.

[0016] The present disclosure provides a digital screen visualization component rapid configuration and rendering technology based on real-time interaction to solve the problem that each EPG update must be developed and a large amount of adaptation is required, and reduce the operation difficulty and operation time of each content update by the operation through visual layout, thereby largely avoiding problems caused by improper layout or development of the in-network EPG, and finally achieving the effect of saving labor and time costs.

[0017] The execution subject of the real-time layout method of the EPG visualization component provided by the embodiment of the present disclosure is a personal computer (PC), or the execution subject of this method can also be the application program itself installed on the device, that is, the component layout browser installed on the computer.

[0018] For ease of description, in the following, taking the execution entity of this method as a component orchestration browser as an example, a real-time orchestration method for EPG visualization in the present disclosure will be introduced. That is, the component orchestration browser is only a representative of the execution entity of this method, and is not a limitation on the execution entity of this method.

[0019] Figure 1 This is the flowchart of this method, including the following steps: In step S1, receive the instruction for the user to create an EPG, load the orchestration canvas, and support adding components on the canvas. The specific data structure is as follows: Interface EPG{ name: string, templateType:string, subjectId:string } Among them, EPG represents the EPG or canvas created this time, name represents the unique name of the EPG, templateType represents the template adopted by the EPG, and subjectId represents the unique identifier of the EPG theme.

[0020] Here it should be noted that the EPG name (name) needs to be input when creating the canvas, while the template (templateType) and theme (subjectId) have been entered into the orchestration system before the user creates the EPG, which is convenient for the user to perform subsequent operations.

[0021] Then, after the user clicks to add a new EPG, they enter the EPG orchestration page, as Figure 2 shown in the orchestration framework diagram of this method. The middle orchestration canvas area is the newly created canvas, the left is the component list area, and the right is the component content configuration area.

[0022] After the canvas creation in step S1 is completed, step S2 for dragging and selecting components can be performed.

[0023] In step S2, receive the instruction for the user to drag a component to the canvas, initialize and parse the configuration data of the component, and render the component. The specific data structure is as follows: Interface Component{ configJson:string, configType:string, localCode:string, page:string, sourceId:string } Among them, Component represents the component selected by dragging, configJson represents the configuration content within the component (including the position information of the component), configType represents the component type, localCode represents the position code of the component, page represents the page name, and sourceId represents the id of the EPG.

[0024] Here it should be noted that, as Figure 2 shown, the user needs to drag the components in the left list area into the canvas area for component arrangement, and render the components to be presented on the canvas, so as to facilitate the user to view the basic size and style of the components. Before performing this step, the developed components have been entered into this arrangement system and presented in the component list for the user to directly select components during arrangement.

[0025] This step is mainly used to locate the position coordinates of the component on the EPG page.

[0026] The user drags the component to the canvas area; Determine the specific EPG and page name where the component is placed through the page name (page) and the id of the EPG (sourceId); Determine the specific position of the component on the page through the component position code (localCode); Determine how many styles the component supports through the component type (configType); Determine information such as the top, bottom, left, and right margins of the component through configJson.

[0027] After the component dragging and rendering in step S2 are completed, step S3 component configuration can be performed.

[0028] In step S3, receive navigation configuration instructions to add or delete the navigation bar and display it in real time; receive column configuration instructions to add or delete columns and display it in real time; receive component configuration instructions to add, move up, move down, or delete components and display it in real time; click on the component or container to perform content configuration.

[0029] It is possible to receive navigation configuration instructions to add or delete the navigation bar and display it in real time. The specific data structure is as follows: Addition: Interface AddCategoryCommand{ code:string } Deletion: Interface DeleteCategoryCommand{ code:string } It can receive column configuration instructions to add or delete columns and display them in real time. The specific data structure is as follows: Addition: Interface AddColumnCommand{ code:string } Deletion: Interface DeleteColumnCommand{ code:string } It can receive component configuration instructions to add, move up, move down, or delete components and display them in real time. The specific data structure is as follows: Addition: Interface AddCommand{ code:string } Move up: Interface UpMoveCommand{ code:string } Move down: Interface DownMoveCommand{ code:string } Deletion: Interface DeleteCommand{ code:string } It is possible to click on a component or container to perform content configuration. When clicking on a component, the entire component is configured. The specific data structure is as follows: Interface ComponentConfig{ online:string, showTitle:boolean, theTitle:string, titlePicture:string, marginTop:string, marginLeft:string, marginBottom:string, marginRight:string} Among them, ComponentConfig represents the content that the component supports user orchestration and configuration, online represents the online status of the component, showTitle represents the component display title, theTitle represents the title of the component, titlePicture represents the title picture, marginTop represents the upper outer margin of the component, marginLeft represents the left outer margin of the component, marginBottom represents the lower outer margin of the component, and marginRight represents the right outer margin of the component.

[0030] This step is mainly for users to orchestrate and configure the content of the component. As Figure 2 shown, the user configures the selected component in the content configuration area.

[0031] The user can select the online / offline status of the component. When the online status (online) is true, the component is in the online state; conversely, when it is false, the component is in the offline state. The user can select whether to display the component title. When the show title (showTitle) is true, the component displays the title; conversely, when it is false, the component hides the title. When the title is displayed, it supports entering the title text name (theTitle) or the title picture (titlePicture). Finally, the user can select to adjust the position coordinates of the component on the canvas by arbitrarily adjusting the upper outer margin (marginTop), lower outer margin (marginBottom), left outer margin (marginLeft), and right outer margin (marginRight) of the component.

[0032] After the basic configuration of the component is completed, you can click on a single container to complete the configuration of a single container. Each component is composed of N containers. The content configuration is completed only when both the component and container configurations are completed. After the configuration is completed, the component can display pictures, titles, and badges, and clicking on them can jump to the page.

[0033] First, the container type supports user configuration. The specific data structure is as follows: Interface ContainerType{ epgInfoPicture: string, epgInfoPictureCarousel: string, guide: string, ad: string } Among them, ContaineType represents the container type, indicating different display effects supported by the container. epgInfoPicture represents the picture displayed inside the container, epgInfoPictureCarousel represents the carousel picture displayed inside the container, guide represents the guide box displayed inside the container, and ad represents the advertisement displayed inside the container.

[0034] In addition, each container also supports individual custom configuration content. The specific data structure is as follows: Interface ContainerConfig{ multiPicture:string, showTitle:boolean, theTitle:string, showMarkers:string, cornerMarkers:string, openAction:string } Among them, ContainConfig represents the container configuration, multiPicture represents the picture filled in the container, showTitle represents whether to display the container title, theTitle represents the container title, showMarkers represents whether to display the corner mark, cornerMarkers represents the corner mark picture of the container, and openAction represents the open action configured for the container.

[0035] This step is mainly for configuring the container content.

[0036] Users can fill the container picture (multiPicture); They can input the container title (theTitle); They can choose whether to display the container title (showTitle). When showTitle is true, the title is displayed; when showtitle is false, the title is not displayed; They can choose to input the corner mark picture (cornerMarkers), such as 4K, VIP, free corner mark; And they can choose whether to display the corner mark (showMarkers). When showMarkers is true, the corner mark is displayed; when it is false, the container corner mark is hidden; They can also choose the open action (openAction) to configure the address to which the component jumps after being clicked. After the configuration is completed, clicking on the component will jump to the corresponding page.

[0037] After any instruction in step S3 is completed, the component in step S4 can be rendered.

[0038] In step S4, the component is re-rendered according to the instruction or the modified content. As Figure 3 shown in the rendering flowchart of this method, the component rendering is divided into 4 processes: First, the system reads the configuration file of the component. The configuration file contains the component type, location code, EPGid, and page name; Then parse the data configuration file; Next, generate the theme; Finally, render the component.

[0039] It should be noted here that the component is rendered once after any step in step S3 is completed. That is, in step S3, if the user adds or deletes in the navigation bar, the canvas will be re-rendered once; if the user adds or deletes in the column, the canvas will be re-rendered once; if the user adds, moves up, moves down, or deletes a component, the canvas will be re-rendered once; if the user clicks on a component or container to configure the content, the canvas will be re-rendered once. The information such as the title, picture, corner mark, and margin position is re-rendered and presented on the canvas for the user to view the content layout effect in real time.

[0040] After the component rendering in step S4 is completed, step S5 of previewing the canvas can be carried out.

[0041] In step S5, according to the preview instruction, the same interactive effect as that of the set-top box is previewed in the browser in real time. After clicking the preview for review, the preview page is displayed. On this page, the focus can be moved up, down, left, or right and clicked, which is convenient for the user to view the focus and the style of the configured content, achieving the same preview effect as that of the set-top box, reducing the review difficulty for the user. After the preview passes, the EPG can be issued to update the content.

[0042] It should be understood that the method of the present disclosure is not limited to the described embodiments, and the description and the embodiments are only for exemplary introduction. Any technical solution that is the same as or similar to this method is included in the protection scope of this method.

Claims

1. A rapid configuration and rendering technology for digital screen visualization components based on real-time interaction, characterized in that, including: Receiving an instruction from a user to create an EPG, loading an orchestration canvas, and supporting the addition of components on the canvas; Receiving an instruction from a user to drag a component onto the canvas, initializing and parsing the configuration data of the component, and rendering the component; receiving a navigation configuration instruction to add or delete items in the navigation bar and displaying them in real time; receiving a column configuration instruction to add or delete columns and displaying them in real time; receiving a component configuration instruction to add, move up, move down, or delete a component and displaying it in real time; clicking on a component or container to perform content configuration and presenting the orchestration effect in real time; re-rendering the component according to an instruction or the modified content; and according to a preview instruction, previewing in a browser the same interaction effect as that of a set-top box in real time.

2. The real-time orchestration method of the EPG visualization component according to claim 1, wherein Receiving an instruction from a user to create an EPG, loading an orchestration canvas, and supporting the addition of components on the canvas, specifically including: creating a theme for the EPG; creating a name for the EPG; and selecting a desired EPG template to load the orchestration canvas.

3. The real-time orchestration method of the EPG visualization component according to claim 2, characterized in that Receiving an instruction from a user to drag a component onto the canvas, initializing and parsing the configuration data of the component, and rendering the component, specifically including: receiving an instruction from a user to drag a component onto the canvas and parsing the configuration data of the component. The configuration data includes 5 categories, namely: (i) Component basic information category (including attributes: component type, cover image, internal name. Purpose: When orchestrating the EPG, relevant component information is presented in the component list area according to the component type.); (ii) Component orchestration category (including attributes: orchestration css, orchestration js. Purpose: Files used for component rendering during EPG orchestration.); (iii) Component data category (including attributes: floor configuration, picture container configuration, guide frame container configuration, carousel container configuration, advertisement container configuration. Purpose: When orchestrating, when a component or a component content container is selected, detailed data configuration of different types of containers can be performed in the content configuration area.); (iv) Component preview category (including attributes: preview css, preview js. Purpose: Files used for component rendering during EPG preview.); (v) Component rendering configuration category (including attributes: rendering css, rendering js. Purpose: Files used for component rendering when converting to the set-top box display.).

4. The real-time orchestration method of the EPG visualization component according to claim 3, characterized in that Receive navigation configuration instructions to add or delete navigation bars and display them in real time; receive column configuration instructions to add or delete columns and display them in real time; receive component configuration instructions to add, move up, move down, or delete components and display them in real time; click on a component or container to perform content configuration and display the layout effect in real time, specifically including: (1) Receive navigation configuration instructions to add a navigation bar and add a navigation bar in the EPG; (2) Receive navigation configuration instructions to delete a navigation bar and delete the navigation bar from the EPG; (3) Receive column configuration instructions to add a column and add a column in the navigation bar; (4) Receive column configuration instructions to delete a column and delete the column from the navigation bar; (5) Receive component configuration instructions to add a component and add a component in the EPG; (6) Receive component configuration instructions to move a component up and swap the position of the component with the previous component; (7) Receive component configuration instructions to move a component down and swap the position of the component with the next component; (8) Receive component configuration instructions to delete a component and delete the component from the EPG; (9) Click on a component to perform content configuration, display the content supported by the component for configuration, process component layout instructions, including the online / offline status of the component, whether the title of the component is displayed, the top, bottom, left, and right margins of the component, and complete component configuration; (10) Click on a container to perform content configuration, display the content supported by the container for configuration, process container layout instructions, including the container type in the component, whether the title is displayed, whether the corner mark is displayed, and the open action, and complete container configuration.

5. The real-time orchestration method of the EPG visualization component according to claim 4, characterized in that, Re-render the component according to the instructions or the modified content, specifically including: Receive any instruction from S3, read the component file, re-render the component, and display the real-time layout of the visual component.

6. The real-time orchestration method of the EPG visualization component according to claim 5, characterized in that, Preview according to the arranged content, and the preview effect is the same as that displayed on the set-top box.

Images