CN112363725A - System for configuring television main scene and visually rendering based on WEB side - Google Patents
System for configuring television main scene and visually rendering based on WEB side Download PDFInfo
- Publication number
- CN112363725A CN112363725A CN202011305147.3A CN202011305147A CN112363725A CN 112363725 A CN112363725 A CN 112363725A CN 202011305147 A CN202011305147 A CN 202011305147A CN 112363725 A CN112363725 A CN 112363725A
- Authority
- CN
- China
- Prior art keywords
- data
- television
- configuration
- main scene
- cloud
- 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.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The invention discloses a system for configuring a television main scene and visually rendering based on a WEB side, which comprises a television main scene application, a cloud configuration platform and a cloud server side; and in the starting process of the television, acquiring usable configuration data corresponding to the configuration time which is the latest time from the cloud server, comparing the difference between the current data and the cloud data by the service layer through a Diff algorithm, updating the virtual DOM and converting the virtual DOM to the real DOM after the difference is obtained, and redrawing the UI at the moment so as to achieve real-time rendering of data change. The method synchronizes the background configuration and the front-end presentation effect in real time, creates visual and unified experience, solves the pain point of inconsistency of the data configured by the traditional platform and the expected effect, establishes a more normative and more complete content management architecture, and greatly improves the content management efficiency.
Description
Technical Field
The invention relates to the technical field of webpage programming, in particular to a system for configuring a television main scene and visually rendering based on a WEB side.
Background
With the development of information technology, the development of smart televisions is rapidly advanced. The main scene is taken as a flow inlet of the television, and nowadays, more and more attention is paid to various manufacturers, and how to more efficiently configure the main scene content data is a problem to be considered and solved by all television manufacturers.
However, the traditional television main scene is developed based on a native terminal, and the content configuration system is based on the traditional data configuration system, so that the method has the advantages of long history, long-term experience and high technical maturity. Firstly, the content data is too lengthy, the operator can hardly read the document, the learning cost is high, the operation is complicated, and the steps are numerous. Second, there is a high probability of data errors, and multiple configurations of data may not be the desired effect.
Disclosure of Invention
The invention aims to provide a system for configuring a television main scene and visually rendering based on a WEB terminal to solve the problems. The system solves a series of pain problems caused by the traditional content configuration platform, and improves the user experience and the operation efficiency in the aspects of intuition, attractiveness, high efficiency, conciseness and the like.
The invention realizes the purpose through the following technical scheme:
the system for configuring the television main scene and visually rendering based on the WEB side comprises a television main scene application, a cloud configuration platform and a cloud server side, wherein:
the television main scene application comprises the following steps: the television main scene is developed based on H5 technology, and is provided with a powerful data processing module which can process various data and show corresponding UI effects; applying an analysis rule with a built-in required style, leaving positions for internal data and data of a third party, freely filling until relevant data are taken, managing all data in real time, and automatically displaying according to data change;
a cloud configuration platform: the cloud configuration platform comprises two core parts:
the data configuration area is accessed by a user through a browser of a computer, and corresponding data contents are configured through a data configuration control provided by the system;
the data visualization area is used for the television main scene application based on the H5 technology, the application can be embedded into the area through a browser Iframe, and the data is linked with the data visualization area and subjected to real-time rendering after the data configuration area is configured with data through a set data interaction mode; after the user configures the data on the platform, the data is transmitted and stored to the cloud server side, then the cloud server issues the data, and next time, the main scene of the television can see the configured data content.
Cloud server side: the system is responsible for receiving data configured by a user and storing the data into a database, and is responsible for issuing the main scene data of the television, and if the issuing work is normally finished, the received television must be in a networking state, and if the television is not networked, the data in the main scene can still be displayed.
The system supports network connection, and the cloud server is connected with a television homepage and a cloud configuration platform.
Further, the television end supports H5 application, and the browser end supports H5, css3 and es 5;
the data of the cloud configuration platform and the main scene of the television end are in a set JSON format;
the data visualization area enables the application to be embedded in the cloud configuration platform through the iframe technology.
The application also provides a method for configuring the television main scene and visually rendering based on the WEB side, which comprises the following steps:
step 1: visualizing configuration data
After the user inputs data or selects corresponding materials, the data visual area can change correspondingly, and the matched data is obtained;
step 2: converting the parameters into a configuration file after the parameters are successfully verified;
firstly, checking user input, wherein the checking mode is that parameters configured by a user are compared with parameters which are pre-defined and have specific parameter values and are arranged in a data visual area, and after the checking is successful, the data input by the user is automatically converted into data in a JSON format according to a parameter conversion engine;
step 3: releasing configuration data;
the converted configuration file completes the data release through a network interface;
step 4: the cloud server stores data;
the cloud server is a data hub and provides required data for a main scene of the television;
step 5: the television acquires data and renders the data;
and the television main scene application analyzes the data through a series of built-in analysis rules to complete the rendering of the UI.
The method comprises the following steps that in the starting process of the television, usable configuration data corresponding to the configuration time which is the latest time from the cloud server are obtained, the difference between the current data and the cloud data is compared by the business layer through a Diff algorithm, when the difference is obtained, the virtual DOM is updated and converted towards the real DOM, and at the moment, the UI is redrawn so as to achieve real-time rendering of data change.
The invention has the beneficial effects that:
the system for configuring the television main scene and visually rendering based on the WEB side synchronizes the background configuration and the front-end presentation effect in real time, and creates visual and unified experience. Meanwhile, pain points (such as potential problems of picture stretching, sharp color and the like) with inconsistent data and expected effects of the traditional platform are solved, a more normative and more complete content management framework is established, and the content management efficiency is greatly improved.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the embodiments or the drawings needed to be practical in the prior art description, and obviously, the drawings in the following description are only some embodiments of the present invention, and other drawings can be obtained by those skilled in the art without creative efforts.
Fig. 1 is a technical architecture diagram of the main scene of the system television of the present invention.
FIG. 2 is a basic architecture and operational flow diagram of the system according to the present invention.
Fig. 3 is a flowchart illustrating operation of the cloud configuration platform of the system according to the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the technical solutions of the present invention will be described in detail below. It is to be understood that the described embodiments are merely exemplary of the invention, and not restrictive of the full scope of the invention. All other embodiments, which can be derived by a person skilled in the art from the examples given herein without any inventive step, are within the scope of the present invention.
In any embodiment, as shown in fig. 2, a system for configuring a television main scene and performing visual rendering based on a WEB side of the present invention includes the following components, a television main scene application. Cloud configuration platform, cloud server end, wherein:
the television main scene application comprises the following steps: the page content of the main scene of the television developed by the traditional native is fixed, flexible control display cannot be achieved, and the main scene can be changed occasionally, and only the data of characters and pictures are changed. The main scene of the television is developed based on H5 technology, and has a powerful data processing module which can process various data and show corresponding UI effects. And applying an analysis rule with a built-in required style, leaving positions for internal data and data of a third party, freely filling the data until relevant data are taken, managing all data in real time, and automatically displaying the data according to data change.
A cloud configuration platform: the part is a core part of the invention and is a key point for distinguishing a traditional system from a novel system, and the cloud configuration platform mainly comprises two core parts: 1. and the data configuration area is accessed by a user through a browser of a computer, and corresponding data contents are configured through a data configuration control provided by the system. 2. The data visualization area is embedded in the area through the browser Iframe because the application of the television main scene is based on the H5 technology, and the data is linked with the data visualization area and subjected to real-time rendering after the data configuration area is configured with data through a set data interaction mode, so that the content management efficiency is greatly improved, the real what you see is what you get is realized, and the effect is realized because the television main scene is used and a visual area is not independently developed, so that the high consistency of the display effect on the television main scene is ensured. After the user configures the data on the platform, the data is transmitted and stored to the cloud server side, then the cloud server issues the data, and next time, the main scene of the television can see the configured data content.
Cloud server side: the system is responsible for receiving data configured by a user and storing the data into a database, and is responsible for issuing the main scene data of the television, and if the issuing work is normally finished, the received television must be in a networking state, and if the television is not networked, some data built in the main scene can still be displayed.
In a specific embodiment, as shown in fig. 1 to 3, the present application provides a method for configuring a television main scene based on a WEB end and performing visual rendering, including the following steps:
step 1: visualizing configuration data
After the user inputs data or selects corresponding materials, the data visual area can change correspondingly, and the matched data is obtained;
step 2: converting the parameters into a configuration file after the parameters are successfully verified;
firstly, checking user input, wherein the checking mode is that parameters configured by a user are compared with parameters which are pre-defined and have specific parameter values and are arranged in a data visual area, and after the checking is successful, the data input by the user is automatically converted into data in a JSON format according to a parameter conversion engine;
step 3: releasing configuration data;
the converted configuration file completes the data release through a network interface;
step 4: the cloud server stores data;
the cloud server is a data hub and provides required data for a main scene of the television;
step 5: the television acquires data and renders the data;
and the television main scene application analyzes the data through a series of built-in analysis rules to complete the rendering of the UI.
And in the starting process of the television, acquiring usable configuration data corresponding to the configuration time which is the latest time from the cloud server, comparing the difference between the current data and the cloud data by the service layer through a Diff algorithm, updating the virtual DOM and converting the virtual DOM to the real DOM after the difference is obtained, and redrawing the UI at the moment so as to achieve real-time rendering of data change.
Fig. 1 is a technical architecture diagram of a main scene of a system television according to the present invention, which is implemented by the following steps:
step 1: layering mode: the main scene of the television is divided into a UI layer, a data layer and a service layer. Each level plays its own role, and maintainability, expandability, transportability and reusability of the application are improved.
Step 2: and (3) data comparison: in the starting process of the television, the usable configuration data corresponding to the configuration time which is the latest time from the cloud server can be obtained, the difference between the current data and the cloud data is compared by the business layer through a Diff algorithm, and when the difference is obtained, the virtual DOM is updated.
Step 3: re-rendering the UI: and after the virtual DOM is updated, the virtual DOM is immediately converted to the real DOM, and the UI is redrawn at the moment, so that the aim of real-time rendering of data change is fulfilled.
FIG. 2 is a schematic diagram of the basic architecture and operation of the system of the present invention, which includes the following steps:
step 1: data center and management: the whole data hub of the system is responsible for the maintenance function of data and provides network interface service for the cloud configuration platform and the television main scene application.
Step 2: the television main scene application comprises the following steps: the system is responsible for rendering data and displaying effects through a UI layer.
Step 3: a cloud configuration platform: various materials are utilized to combine the data required by the user, and the operations of increasing, deleting, modifying, checking and the like can be carried out on the data.
Fig. 3 is a flowchart illustrating an operation of the cloud configuration platform of the system according to the present invention, which includes the following steps:
step 1: user visual configuration: an operator configures a main scene content interface of the television through the cloud management platform, and after a user inputs data or selects corresponding materials, the data visible area can be correspondingly changed, so that the matched data can be obtained.
Step 2: parameter checking: the content input by the user needs to be correspondingly checked, the system cannot identify certain content and can only input the content by a set rule, and the checking mode is to compare the parameters configured by the user with the parameters which are pre-defined and have specific parameter values and are arranged in the data visible area and check whether the parameter values filled by the user are correct or not. And when the parameter verification fails, the configuration platform automatically prompts a user to input correct data and gives a data format.
Step 3: data conversion to configuration files: automatically converting data input by a user into data in a JSON format according to a parameter conversion engine, wherein the parameter conversion is transparent to the user and cannot be perceived by the user; and after the parameter conversion fails, the next step of data release cannot be carried out, and the information of the parameter conversion failure is written into the log.
Step 4: releasing configuration data: and storing the configuration data in the JSON format, and then auditing and releasing the data, so that the configuration of the data is completed.
Through the data, the background configuration and the television main scene presenting effect can be synchronized in real time basically through a system for configuring the television main scene and visually rendering, so that the television main scene data can be efficiently and simply configured.
The above description is only for the specific embodiments of the present invention, but the scope of the present invention is not limited thereto, and any person skilled in the art can easily conceive of the changes or substitutions within the technical scope of the present invention, and all the changes or substitutions should be covered within the scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the appended claims. It should be noted that the various technical features described in the above embodiments can be combined in any suitable manner without contradiction, and the invention is not described in any way for the possible combinations in order to avoid unnecessary repetition. In addition, any combination of the various embodiments of the present invention is also possible, and the same should be considered as the disclosure of the present invention as long as it does not depart from the spirit of the present invention.
Claims (5)
1. System based on WEB end configuration TV main scene and visual rendering, its characterized in that, including TV main scene application, high in the clouds configuration platform and high in the clouds server end, wherein:
the television main scene application comprises the following steps: the television main scene is developed based on H5 technology, and is provided with a powerful data processing module which can process various data and show corresponding UI effects; applying an analysis rule with a built-in required style, leaving positions for internal data and data of a third party, freely filling until relevant data are taken, managing all data in real time, and automatically displaying according to data change;
a cloud configuration platform: the cloud configuration platform comprises two core parts:
the data configuration area is accessed by a user through a browser of a computer, and corresponding data contents are configured through a data configuration control provided by the system;
the data visualization area is used for the television main scene application based on the H5 technology, the application can be embedded into the area through a browser Iframe, and the data is linked with the data visualization area and subjected to real-time rendering after the data configuration area is configured with data through a set data interaction mode; after the user configures the data on the platform, the data is transmitted and stored to the cloud server side, then the cloud server issues the data, and next time, the main scene of the television can see the configured data content.
Cloud server side: the system is responsible for receiving data configured by a user and storing the data into a database, and is responsible for issuing the main scene data of the television, and if the issuing work is normally finished, the received television must be in a networking state, and if the television is not networked, the data in the main scene can still be displayed.
2. The system for configuring and visually rendering a television main scene based on a WEB side according to claim 1, wherein the system supports network connection, connection between a cloud server side and a television main page and connection between a cloud configuration platform.
3. The system for configuring television main scene and visually rendering based on WEB side according to claim 1, wherein the television side supports H5 application, the browser side supports H5, css3 and es 5;
the data of the cloud configuration platform and the main scene of the television end are in a set JSON format;
the data visualization area enables the application to be embedded in the cloud configuration platform through the iframe technology.
4. A method for configuring a television main scene and visually rendering based on a WEB side is characterized by comprising the following steps:
step 1: visualizing configuration data
After the user inputs data or selects corresponding materials, the data visual area can change correspondingly, and the matched data is obtained;
step 2: converting the parameters into a configuration file after the parameters are successfully verified;
firstly, checking user input, wherein the checking mode is that parameters configured by a user are compared with parameters which are pre-defined and have specific parameter values and are arranged in a data visual area, and after the checking is successful, the data input by the user is automatically converted into data in a JSON format according to a parameter conversion engine;
step 3: releasing configuration data;
the converted configuration file completes the data release through a network interface;
step 4: the cloud server stores data;
the cloud server is a data hub and provides required data for a main scene of the television;
step 5: the television acquires data and renders the data;
and the television main scene application analyzes the data through a series of built-in analysis rules to complete the rendering of the UI.
5. The system for configuring and visually rendering a television main scene based on a WEB side according to claim 4, wherein in a television startup process, the available configuration data corresponding to a configuration time closest to a current time is acquired from the cloud server, the difference between the current data and the cloud data is compared by the service layer through a Diff algorithm thereof, and when the difference is obtained, the virtual DOM is updated and converted to the real DOM, and the UI is redrawn at this time so as to achieve real-time rendering of data change.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011305147.3A CN112363725A (en) | 2020-11-19 | 2020-11-19 | System for configuring television main scene and visually rendering based on WEB side |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011305147.3A CN112363725A (en) | 2020-11-19 | 2020-11-19 | System for configuring television main scene and visually rendering based on WEB side |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112363725A true CN112363725A (en) | 2021-02-12 |
Family
ID=74532800
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011305147.3A Pending CN112363725A (en) | 2020-11-19 | 2020-11-19 | System for configuring television main scene and visually rendering based on WEB side |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112363725A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114021225A (en) * | 2021-10-20 | 2022-02-08 | 中邮通建设咨询有限公司 | Method, device, equipment and medium for simulating wind environment of base station by Web end |
| CN114389823A (en) * | 2022-03-24 | 2022-04-22 | 北京智象信息技术有限公司 | Smart television client file distribution method and system |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020107583A1 (en) * | 2001-02-02 | 2002-08-08 | Webster Rodney Gordon | Controller, controlled device, control method, and control system |
| CN103412748A (en) * | 2013-07-25 | 2013-11-27 | 深圳Tcl新技术有限公司 | Display control method, device and system for user interface of embedded platform |
| CN107396168A (en) * | 2017-08-24 | 2017-11-24 | 四川长虹电器股份有限公司 | A kind of configurable launcher television direct broadcast system |
| CN111949256A (en) * | 2020-08-12 | 2020-11-17 | 广州华多网络科技有限公司 | Webpage real-time preview editing method, device, equipment and storage medium |
-
2020
- 2020-11-19 CN CN202011305147.3A patent/CN112363725A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20020107583A1 (en) * | 2001-02-02 | 2002-08-08 | Webster Rodney Gordon | Controller, controlled device, control method, and control system |
| CN103412748A (en) * | 2013-07-25 | 2013-11-27 | 深圳Tcl新技术有限公司 | Display control method, device and system for user interface of embedded platform |
| CN107396168A (en) * | 2017-08-24 | 2017-11-24 | 四川长虹电器股份有限公司 | A kind of configurable launcher television direct broadcast system |
| CN111949256A (en) * | 2020-08-12 | 2020-11-17 | 广州华多网络科技有限公司 | Webpage real-time preview editing method, device, equipment and storage medium |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114021225A (en) * | 2021-10-20 | 2022-02-08 | 中邮通建设咨询有限公司 | Method, device, equipment and medium for simulating wind environment of base station by Web end |
| CN114389823A (en) * | 2022-03-24 | 2022-04-22 | 北京智象信息技术有限公司 | Smart television client file distribution method and system |
| CN114389823B (en) * | 2022-03-24 | 2022-11-22 | 北京智象信息技术有限公司 | Smart television client file distribution method and system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107818143B (en) | Page configuration and generation method and device | |
| CN107861655B (en) | Control matching method and device, computer equipment and storage medium | |
| CN110795148B (en) | Method and device for generating layout file and electronic equipment | |
| CN111611518B (en) | Automatic visual display page publishing method and system based on Html5 | |
| US20130019156A1 (en) | Method for Associating Third Party Content with Online Document Signing | |
| CN112100550A (en) | Page construction method and device | |
| CN112363725A (en) | System for configuring television main scene and visually rendering based on WEB side | |
| US20210042381A1 (en) | Interactive and selective coloring of digital vector glyphs | |
| CN111459501A (en) | SVG-based Web configuration picture storage and display system, method and medium | |
| CN104219295A (en) | Server-side configuration based information display method and system for mobile equipment | |
| CN113177171A (en) | Chart display method and device, terminal device and storage medium | |
| CN114706584A (en) | Data visualization display manufacturing system | |
| CN112214202A (en) | Mobile phone program development platform without writing codes | |
| CN113220381A (en) | Click data display method and device | |
| CN106888258A (en) | A kind of server info input method and system | |
| CN110866014A (en) | Standard index data access and display method | |
| CN115170695A (en) | Method and device for generating chart picture, electronic equipment and storage medium | |
| CN111913711A (en) | Video rendering method and device | |
| CN113849257A (en) | Page processing method, device, medium and electronic equipment | |
| CN108763296B (en) | Database structure generation method and device for online checking and editing | |
| CN110825390A (en) | Visualization large screen project rapid deployment | |
| CN113704593B (en) | Operation data processing method and related device | |
| CN113722341B (en) | Operation data processing method and related device | |
| CN113806596B (en) | Operation data management method and related device | |
| CN112307378B (en) | Network view display method |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210212 |
|
| RJ01 | Rejection of invention patent application after publication |