CN111913708B - Interface display method and device, storage medium and electronic equipment - Google Patents
Interface display method and device, storage medium and electronic equipment Download PDFInfo
- Publication number
- CN111913708B CN111913708B CN202010790226.1A CN202010790226A CN111913708B CN 111913708 B CN111913708 B CN 111913708B CN 202010790226 A CN202010790226 A CN 202010790226A CN 111913708 B CN111913708 B CN 111913708B
- Authority
- CN
- China
- Prior art keywords
- interface
- display
- graphical interface
- interaction
- target display
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 97
- 230000003993 interaction Effects 0.000 claims description 89
- 238000009877 rendering Methods 0.000 claims description 38
- 230000002452 interceptive effect Effects 0.000 claims description 36
- 238000006243 chemical reaction Methods 0.000 claims description 27
- 238000012545 processing Methods 0.000 claims description 12
- 238000005516 engineering process Methods 0.000 claims description 11
- 238000004590 computer program Methods 0.000 claims description 6
- 230000006870 function Effects 0.000 abstract description 29
- 238000011161 development Methods 0.000 abstract description 14
- 230000002829 reductive effect Effects 0.000 abstract description 4
- 230000008569 process Effects 0.000 description 47
- 238000010586 diagram Methods 0.000 description 15
- 238000004891 communication Methods 0.000 description 7
- 230000008859 change Effects 0.000 description 4
- 230000008520 organization Effects 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- 230000002159 abnormal effect Effects 0.000 description 1
- 230000000712 assembly Effects 0.000 description 1
- 238000000429 assembly Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 229910052804 chromium Inorganic materials 0.000 description 1
- 239000011651 chromium Substances 0.000 description 1
- 230000000670 limiting effect Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000036961 partial effect Effects 0.000 description 1
- 230000002441 reversible effect Effects 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- 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/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application provides an interface display method, an interface display device, a storage medium and electronic equipment. Through the interface display method, the electronic equipment renders the webpage file to obtain the graphical interface data corresponding to the webpage file, and the target display assembly is determined from the target display interface to display the graphical interface data through the identification of the graphical interface data. Therefore, based on the existing webpage file, the electronic equipment displays the graphical interface data of the webpage file through the corresponding target display component, so that the functions of the webpage platform can be transferred to the non-webpage platform in a cross-platform manner, the development efficiency can be improved, and the development cost can be reduced.
Description
Technical Field
The present invention relates to the field of computers, and in particular, to an interface display method, an interface display device, a storage medium, and an electronic device.
Background
Currently, to meet the usage habits of different users, the same application service often needs to support multiple platforms. Such as a web platform, a PC platform, a mobile terminal platform, etc. This makes it necessary to develop each platform together when providing new service functions, resulting in excessive development costs.
Disclosure of Invention
To overcome at least one of the disadvantages in the prior art, an object of an embodiment of the present application is to provide an interface display method, which is applied to an electronic device, where the electronic device provides a target display interface and a plurality of display components for providing information presentation on the target display interface, and each of the display components has a unique identifier, and the method includes:
obtaining graphic interface data corresponding to a webpage file according to the webpage file rendering, wherein the graphic interface data is used for displaying a graphic interface with first position information;
determining a target display component from a plurality of display components according to the identification corresponding to the graphical interface data; the identification of the target display component is matched with the identification corresponding to the graphical interface data; the target display component is used for performing display operation according to the second position information;
and displaying the graphical interface in the target display component according to the graphical interface data.
Optionally, the electronic device is configured with a positional conversion relationship between the first positional information and the second positional information, and the method further includes:
responding to the interactive operation of the user in the interface provided by the target display component, and obtaining a first interactive position of the interactive operation under the second position information;
Determining a second interaction position corresponding to the first interaction position in the graphical interface displayed by the first position information based on the position conversion relation;
and executing the interaction operation corresponding to the second interaction position in the webpage file.
Optionally, the method further comprises:
obtaining new graphical interface data corresponding to the webpage file according to the execution result of the interactive operation;
and displaying a new graphical interface in the target display component according to the new graphical interface data.
Optionally, the plurality of display components includes a lower layer component covered by the target display component, the interface provided by the target display component includes a transparent area, and before the first position information is used for displaying the second interaction position corresponding to the first interaction position in the graphical interface based on the position conversion relation, the method further includes:
judging whether the first interaction position is positioned in the transparent area or not;
and if the first interaction position is not located in the transparent area, determining a second interaction position corresponding to the first interaction position in the graphical interface displayed by the first position information based on the position conversion relation.
Optionally, the method further comprises:
and if the first interaction position is positioned in the transparent area, the first interaction position is intersected with the lower layer assembly for processing.
A second object of the embodiments of the present application is to provide an interface display device, which is applied to an electronic device, where the electronic device provides a target display interface and a plurality of display components for providing information presentation on the target display interface, each of the display components has a unique identifier, and the interface display device includes:
the interface data module is used for rendering according to the webpage file to obtain graphical interface data corresponding to the webpage file, wherein the graphical interface data is used for displaying a graphical interface with first position information;
the component determining module is used for determining a target display component from a plurality of display components according to the identification corresponding to the graphical interface data; the identification of the target display component is matched with the identification corresponding to the graphical interface data; the target display component is used for performing display operation according to the second position information;
and the interface display module is used for displaying the graphical interface in the target display component according to the graphical interface data.
Optionally, the electronic device is configured with a positional conversion relationship between the first positional information and the second positional information, and the interface display apparatus further includes:
the position acquisition module is used for responding to the interactive operation of the user in the interface provided by the target display component and acquiring a first interactive position of the interactive operation under the second position information;
the position conversion module is used for determining a second interaction position corresponding to the first interaction position in the graphical interface displayed by the first position information based on the position conversion relation;
and the interaction executing module is used for executing the interaction operation corresponding to the second interaction position in the webpage file.
Optionally, the interface data module is further configured to obtain new graphical interface data corresponding to the web page file according to an execution result of the interactive operation;
the interface display module is further configured to display a new graphical interface in the target display component according to the new graphical interface data.
It is a third object of embodiments of the present application to provide an electronic device, where the electronic device includes a memory and a processor, where the memory stores computer executable instructions that, when executed by the processor, implement an interface display method.
It is a fourth object of embodiments of the present application to provide a storage medium storing a computer program which, when executed by a processor, implements an interface display method.
Compared with the prior art, the application has the following beneficial effects:
the embodiment of the application provides an interface display method and device, a storage medium and electronic equipment. According to the interface display method, the electronic equipment performs rendering based on the webpage file to obtain graphical interface data corresponding to the webpage file, and the target display assembly is determined from a plurality of display assemblies of the target display interface to display the graphical interface data through identification of the graphical interface data. Because the graphical interfaces of different web page files provide different service functions for users, the graphical interfaces of the web page files can be presented to corresponding display components in the target interface by obtaining the identification of the data of the graphical interfaces corresponding to the web page interfaces. And when the service function is newly added, only a corresponding display component is required to be allocated for the newly added service, so that the service function of the webpage platform is easily embedded into different positions of the application software, and the function synchronization of each platform is realized.
Drawings
In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings that are needed in the embodiments will be briefly described below, it being understood that the following drawings only illustrate some embodiments of the present application and therefore should not be considered limiting the scope, and that other related drawings may be obtained according to these drawings without inventive effort for a person skilled in the art.
Fig. 1 is a schematic structural diagram of an electronic device according to an embodiment of the present application;
FIG. 2 is a flowchart illustrating steps of an interface display method according to an embodiment of the present disclosure;
fig. 3 is a schematic view of a browser display interface according to an embodiment of the present application;
fig. 4 is a schematic diagram of a first direct broadcast interface provided in an embodiment of the present application;
fig. 5 is a schematic diagram of a second live interface provided in an embodiment of the present application;
FIG. 6 is a schematic diagram of an interaction flow provided in an embodiment of the present application;
FIG. 7 is a schematic view of component coverage provided in an embodiment of the present application;
FIG. 8 is a schematic diagram of a transparent region processing flow according to an embodiment of the present disclosure;
FIG. 9 is a schematic view of a transparent region according to an embodiment of the present disclosure;
FIG. 10 is a schematic diagram of a display device update process according to an embodiment of the present disclosure;
Fig. 11 is a schematic diagram of a live software module provided in an embodiment of the present application;
fig. 12 is a schematic structural diagram of an interface display device according to an embodiment of the present application.
Icon: 100-an electronic device; 110-an interface display device; 120-memory; 130-a processor; 500—browser interface; 501-a web page content display area; 502-second detail location, 600-first direct play interface; 602-a first detail location; 700-a second live interface; 701-subscribing to a plate; 702-video slabs; 703-message boards; 801-a first display component; 802-a second display component; 901-a third display component; 902-a fourth display component; 903—mouse icon; 200-auxiliary processes; 201-a second communication module; 202-a layer change module; 203-a service processing module; 204-an interaction processing module; 300-a main process; 301-a first communication module; 302-issuing a module; 303-create module; 304-off-screen rendering module; 305, a service calling module; 306—applet management module; 1101-interface data module; 1102-a component determination module; 1103-interface display module; 1104-a location acquisition module; 1105-a position conversion module; 1106-interactive execution module.
Detailed Description
For the purposes of making the objects, technical solutions and advantages of the embodiments of the present application more clear, the technical solutions of the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is apparent that the described embodiments are some embodiments of the present application, but not all embodiments. The components of the embodiments of the present application, which are generally described and illustrated in the figures herein, may be arranged and designed in a wide variety of different configurations.
Thus, the following detailed description of the embodiments of the present application, as provided in the accompanying drawings, is not intended to limit the scope of the application, as claimed, but is merely representative of selected embodiments of the application. All other embodiments, which can be made by one of ordinary skill in the art based on the embodiments herein without making any inventive effort, are intended to be within the scope of the present application.
It should be noted that: like reference numerals and letters denote like items in the following figures, and thus once an item is defined in one figure, no further definition or explanation thereof is necessary in the following figures.
In the description of the present application, it should be noted that the terms "first," "second," "third," and the like are used merely to distinguish between descriptions and are not to be construed as indicating or implying relative importance.
As described in the background, to meet the usage habits of different users, the same application service often needs to support multiple platforms. Such as a web platform, a PC platform, a mobile terminal platform, etc. This makes it necessary to develop each platform together when providing new service functions, resulting in excessive development costs.
Taking a live broadcast scenario as an example, a live broadcast platform generally provides three portals, namely a web page platform, a PC platform and a mobile terminal platform. When the live broadcasting platform needs to provide the gift sending function, the interactive function related to the gift sending is realized based on respective technical stacks of the webpage platform PC platform and the mobile terminal platform.
For example, in a PC platform, a developer is required to determine a display area in live software of the PC platform to display a gift selectable by a user, and select the gift based on the displayed gift, and send the gift-related operation procedure and the functions of attached identity verification, special effect of the gift, and the like. Accordingly, the developer of the web page platform and the developer of the mobile terminal need to implement a set of interface and/or interaction functions related to gift sending based on each development platform again.
Therefore, the functions of different platforms are difficult to realize multiplexing at present, so that the development efficiency is low and the development cost is high.
In view of this, considering that the off-screen rendering technique renders through the CPU or GPU in the memory space, the result of the rendering thereof does not need to be directly presented in the current display screen. Therefore, in the embodiment of the application, the off-screen rendering technology renders the interface of the application program of one platform in the memory during operation, so as to obtain the corresponding graphical interface data, and the graphical interface data is displayed in the display component of the other platform. Therefore, the function of multiplexing other platform application programs can be realized, so that the development efficiency is improved, and the development cost is reduced.
Off-screen rendering techniques include multiple implementations of CEF (Chromium Embedded Framework, chrome embedded framework), FBO (Frame buffer Object ), and the like. Taking CEF off-screen rendering technology as an example, the technical idea of the interface display method is introduced. It is apparent that for the implementation in the examples below in this application, a person skilled in the art may implement other off-screen rendering techniques, which do not need to make an inventive contribution based on the technical solutions disclosed in this application.
The electronic equipment can render the webpage file through a CEF off-screen rendering technology to obtain graphical interface data corresponding to the webpage file; and providing the target display component for displaying the graphical interface data in the graphical interfaces of other platforms. Thus, the functionality of the web page platform is multiplexed to other platforms.
In a possible implementation manner, the present application further discloses an electronic device for executing the following exemplary method flow, and referring specifically to fig. 1, a schematic structural diagram of an electronic device 100 for executing the interface display method provided in the implementation of the present application is provided. The electronic device 100 includes an interface display 110, a memory 120, and a processor 130. The processor may be a CPU or GPU for rendering interfaces in memory when other platform applications are running.
The memory 120, processor 130, and other elements are communicatively coupled, either directly or indirectly, to one another to enable transmission or interaction of data. For example, the components may be electrically connected to each other via one or more communication buses or signal lines. The interface display 110 includes at least one software function module that may be stored in the memory 120 in the form of software or Firmware (Firmware) or cured in an Operating System (OS) of the electronic device 100. The processor 130 is configured to execute executable modules stored in the memory 120, such as software functional modules and computer programs included in the interface display device 110.
The Memory 120 may be, but is not limited to, a random access Memory (Random Access Memory, RAM), a Read Only Memory (ROM), a programmable Read Only Memory (Programmable Read-Only Memory, PROM), an erasable Read Only Memory (Erasable Programmable Read-Only Memory, EPROM), an electrically erasable Read Only Memory (Electric Erasable Programmable Read-Only Memory, EEPROM), etc. The memory 120 is configured to store a program, and the processor 130 executes the program after receiving an execution instruction.
The electronic device 100 may be, but is not limited to, a personal computer, a PC computer, a server, etc.
For some application scenarios, the electronic device 100 may not include the display screen, but is used for processing the output data, for example, related data obtained through off-screen rendering technology, and further sending the related data to other devices with display screens through a wired or wireless network, so as to display the related data.
The electronic device 100 provides a target display interface and a plurality of display components for providing information presentation on the target display interface, wherein each display component has a unique identification.
The following examples of the present application may be applied in various application scenarios, taking a live broadcast scenario as an example, typically, a live broadcast platform provides three portals, which are a web page platform, a PC platform, and a mobile terminal platform, respectively. I.e. the user can watch live broadcast through web pages, computers and mobile devices. The target display interface can be a software interface displayed when live software in a computer runs.
Referring to fig. 2, a flowchart of steps of the interface display method according to an embodiment of the present application will be described in detail below.
Step S100, according to the webpage file rendering, graphic interface data corresponding to the webpage file are obtained, and the graphic interface data are used for displaying a graphic interface with the first position information.
Alternatively, taking the CEF off-screen rendering technique for off-screen rendering of a web page file as an example, the web page file may include HTML code, javaScript code, and CSS code. Based on the codes in the webpage file, the graphic interface data of the webpage file is obtained after rendering by using a CEF off-screen rendering technology, and the graphic interface data can be stored in a memory or a video memory of a GPU.
Step S110, determining a target display component from a plurality of display components according to the identification corresponding to the graphical interface data; the identification of the target display component is matched with the identification corresponding to the graphical interface data; the target display component is used for performing display operation with the second position information.
Since the target display interface can comprise a plurality of display components for information presentation, each display component can be used for displaying graphical interface data. Thus, it is desirable to determine a target display component from a plurality of display components for displaying the graphical interface data.
In one possible implementation manner, the electronic device 100 may maintain a matching relationship between the identifier corresponding to the graphical interface data and the identifier of the display component, so as to achieve the purpose of displaying the corresponding graphical interface at a suitable position based on the display position corresponding to each display component. The matching relationship can be preset based on the requirement of the user, and can also be set according to the requirement of the software framework. Thus, the electronic device 100 matches the identifier of the graphical interface data with the identifier of the display component, so as to obtain the display component meeting the requirement, namely, the target display component meeting the matching relationship.
Step S120, according to the graphic interface data, displaying the graphic interface in the target display component.
Referring to fig. 3 and 4, the multiplexing of the web platform functions will be schematically described below by taking the example of displaying the data in the graphical interface of the web browser in another frame type graphical interface. For the browser interface 500 presented in the web browser, the electronic device 100 obtains a score web page for displaying score results between the anchor, and displays the score web page in the browser interface 500. The web page interface of the score web page may be referred to as the web page content display area 501 in the browser interface 500.
In this embodiment of the present application, the electronic device 100 renders the score webpage through an off-screen rendering technology, obtains the graphical interface data of the score webpage, and displays the information represented by the graphical interface data in another program interface in a frame form.
For the graphical interface of another frame type, since there may be a difference in demand for the display position of the same graphical interface in different frame types, it is necessary to display the graphical interface data of the score web page at the desired position by using the position information of the display component of the new graphical interface.
For another frame-type graphical interface, please refer to the first on-demand interface 600 of the on-demand software illustrated in fig. 4 and the browser interface 500 illustrated in fig. 3. In a web browser, the web page interface of the score web page occupies substantially the web page content display area 501 in the entire browser interface 500. In the first direct broadcast interface 600 of the direct broadcast software, the web page interface corresponding to the score web page needs to be displayed in the display interface provided by the display component at the right lower corner of the whole first direct broadcast interface 600.
Therefore, the graphic interface data of the score page is required to be displayed on the display device in the lower right corner of the first direct broadcast interface 600 by using the position information of the display device in the first direct broadcast interface 600. Namely, the electronic device 100 matches the identifiers corresponding to the graphical interface data with the identifiers of the plurality of display components, determines the target display component, and displays the graphical interfaces of other platforms based on the position information of the target display component.
It should be noted that, the electronic device 100 renders the score webpage through an off-screen rendering technology, and does not directly output and display the webpage interface of the score webpage through any display device, but obtains the graphical interface data of the score webpage to display through another graphical interface in a frame form.
Through the interface display method, the electronic device 100 renders the webpage file to obtain the graphical interface data corresponding to the webpage file, and determines from the target display interface through the identification of the graphical interface data that the target display assembly displays the graphical interface data. Therefore, based on the existing web page file, the electronic device 100 displays the graphical interface data of the web page file through the corresponding target display component, so that the functions of the web page platform can be transferred to other platforms in a cross-platform manner, and further development efficiency can be improved, and development cost can be reduced.
In one possible implementation manner, when the web page platform needs the new service function, the web page platform can multiplex the new service function to realize the function synchronization of each platform only by distributing corresponding display components for the new service.
With respect to the identification of the graphical interface data, in one possible implementation, since the web page file corresponds to the graphical interface data, the identification of the graphical interface data may be carried in the web page file.
As another possible implementation, the electronic device 100 may obtain the identification of the graphical interface data from the server through other network channels.
Because of various organization modes of the target interface, the identification of the graphical interface data in the interface display method of the application is described below by taking the organization mode of the container and the component as an example. It is apparent that for implementations in the examples described below, other graphical interface data identifications are conceivable to those skilled in the art, which do not necessarily creatively contribute to the technical solutions disclosed in the present application.
The target display interface includes a plurality of tiles, each of which is differentiated by the container. Wherein each container includes at least one display assembly therein. For the interface organization style of "container+component", the identification of "container identification+component identification" as graphical interface data may be performed.
The interface organization style of the "container+component" described above may be applied in many scenarios, for example live scenarios. Referring to fig. 5, a second live interface 700, shown during the running of the live software, includes a subscription tile 701, a video tile 702, and a message tile 703. Wherein the display components in the subscription tile 701 are used to display the anchor identity (e.g., anchor avatar, anchor name, etc.) of the anchor the viewer is interested in. Video tile 702 is used to display live video that is currently being live. Each display component in the message board 703 is used to display relevant notification messages for the live platform.
Since the target display component only displays the graphical interface data of the graphical interface, that is, only one picture is displayed by the target display component, the graphical interface displayed by the target display component does not have the interaction function as the web page file. Accordingly, in order to enable the graphical interface displayed by the target display component to respond to the interactive function as a web page file, the electronic device 100 is configured with a positional conversion relationship between the first positional information and the second positional information.
In a possible implementation, after step S120 shown in fig. 2, the position between the first position information and the second position information is converted by steps S130 to S160 shown in fig. 6, which is described in detail below in connection with the step flowchart shown in fig. 6.
Step S130, responding to the interactive operation of the user in the interface provided by the target display component, and obtaining a first interactive position of the interactive operation under the second position information.
Step S150, determining a second interaction position corresponding to the first interaction position in the graphical interface displayed by the first position information based on the position conversion relation.
Step S160, executing the interaction operation corresponding to the second interaction position in the webpage file.
Regarding the relationship between the first interaction location and the second interaction location, an exemplary description is provided below in connection with fig. 3 and 4 again. The first detail location 602 is clicked on by the user in the display interface provided by the display assembly in the lower right hand corner of fig. 4. The electronic device 100 determines that the first detail position 602 actually corresponds to the second detail position 502 in the web content display area 501 shown in fig. 3 based on the positional conversion relationship between the first positional information and the second positional information. Based on the position conversion relation between the first position information and the second position information, determining the interactive operation position in the web page interface corresponding to the web page file according to the interactive operation position of the user in the interface provided by the target display component.
It should be appreciated that the web page file provides complete business interaction functionality, and therefore, a second interaction location of the user in the browser interface 500 provided by the browser needs to be determined according to a first interaction location of the user in the display component, and then the user interaction operation is responded through the web page file. I.e., what actually responds to the user interaction is the web page file itself, not the target display component.
The target display interface is provided with a plurality of display components, wherein the display components comprise an underlying layer covered by the target display components, and a transparent area exists in the interface provided by the target display components.
It should be appreciated that the display components provided in embodiments of the present application are compared to display controls in MFCs (Microsoft Foundation Classes, microsoft base class libraries) or Qt widgets. Each display component is directly drawn in the target display interface, i.e., each display component is not created in the form of a handle, so that the interface displayed by each display component is a logical graphical interface.
Because each display component is directly drawn in the target display interface, the display components are overlaid with each other.
The above-described display unit and the case of overlapping the display units with each other will be exemplarily described with reference to fig. 7. The target display interface in fig. 7 has a first display component 801 and a second display component 802 drawn therein. Since the second display element 802 is drawn on top of the first display element 801, a partial area of the second display element 802 is covered by the first display element 801.
Because the target display component covers other display components, the target display component also comprises a transparent area. In one possible implementation, in order to reduce the influence of the target display component on the underlying components covered by the target display component, the electronic device 100 further needs to determine whether the user has performed an operation in the transparent area before performing step S150 in fig. 6. Referring to step S140 in fig. 8:
Step S140, determining whether the first interaction location is located in the transparent area.
If the first interaction location is not located in the transparent area, the electronic device 100 determines, based on the location conversion relationship, a second interaction location corresponding to the first interaction location in the graphical interface displayed with the first location information.
If the first interaction location is located in the transparent area, the electronic device 100 executes step S170 in fig. 8:
step S170, the first interaction location is handed over to the lower layer assembly for processing.
That is, when the user operates the transparent region in the graphical interface displayed by the target display component, the electronic device 100 ignores the interactive operation of the user in the graphical interface displayed by the target display component, so as to achieve the purpose of reducing the influence of the target display component on the underlying component covered by the target display component.
Transparent target display components there are many application scenarios, and in connection with fig. 9, a third target display component for displaying text data is taken as an example, and an exemplary description is given of an interaction operation in a transparent area in a graphical interface displayed by the target display component. A third display component 901 is drawn in the target display interface shown in fig. 9. The areas other than the "text information" displayed by the third display unit 901 are transparent areas. The transparent area of the third target display assembly is covered with a fourth display assembly 902 that is circular. When the user performs an interactive operation through the mouse icon 903 in a transparent area in the graphical interface displayed by the third target display component, the interactive operation bound by the fourth display component 902 is performed. When the user operates the transparent region in the graphical interface displayed by the target display component, the electronic device 100 ignores the user's interaction in the graphical interface displayed by the target display component.
Further, when the user performs an operation in the graphical interface corresponding to the web page file, some web page files will display different graphical interfaces according to the operation of the user, so in a possible implementation manner, after step S160 shown in fig. 8, the electronic device 100 further needs to synchronize the web page interface updated by the web page file in the target display component through the step shown in fig. 10. The synchronization of the display content between the target display component and the graphical interface of the web page file is described in detail below in conjunction with the step flow diagram shown in fig. 10.
Step S180, new graphic interface data corresponding to the webpage file is obtained according to the execution result of the interactive operation.
Step S190, displaying a new graphical interface in the target display component according to the new graphical interface data.
Based on the above steps, the synchronization of the display contents between the target display component and the graphical interface of the web page file is exemplarily described below with reference to fig. 3 and 4 again. The first detail location 602 is clicked on by the user in the display interface provided by the display assembly in the lower right hand corner of fig. 4. Since it is the web page file itself, and not the target display component, that is actually responsive to user interaction, the first detail location 602 is translated to the second detail location 502 of the web page content display region 501.
At this time, the electronic book device responds to the clicking operation of the second detail position 502 through the web page file, and displays a new web page interface. The new web interface displays score results between more anchor. To synchronize content in a new web page interface to a display interface provided by a lower right corner display component of a second display interface. The electronic device 100 obtains new graphical interface data of the new web page interface, and displays the new graphical interface data in a display interface provided by a display component in the lower right corner shown in fig. 4. At this time, the display interface provided by the display assembly in the lower right corner of fig. 4 also displays score results between more anchor.
In addition, it should be noted that the electronic device 100 may perform off-screen rendering on a plurality of web pages by using the CEF off-screen rendering technology to obtain a plurality of graphic display interface data. The electronic device 100 displays the graphical display interface data to the corresponding display component according to the identification of each graphical display interface data.
In addition, it is considered that the embodiments of the present application realize the function synchronization of each platform by embedding the service function of the web page platform into other platforms. The business functions of the web platform may affect the normal operation of the application software. Therefore, the electronic device 100 may implement the technical solution of the present application through parallel multiple processes, for example, by running the first process and the second process, so that any process is abnormal and normal running of another process is not affected. It should be understood that the first process performs interactive transfer of data with the second process communication module of the second process through the first process communication module.
The first process obtains graphic interface data corresponding to the webpage file according to the webpage file rendering, wherein the graphic interface data is used for displaying a graphic interface with first position information.
The second process determines a target display component from the plurality of display components according to the identification corresponding to the graphical interface data; the identification of the target display component is matched with the identification corresponding to the graphical interface data; the target display component is used for performing display operation according to the second position information; and displaying the graphical interface in the target display component according to the graphical interface data.
Alternatively, the electronic device 100 is configured with a positional conversion relationship between the first positional information and the second positional information.
And the second process responds to the interactive operation of the user in the interface provided by the target display component, and a first interactive position of the interactive operation under the second position information is obtained.
The first process determines a second interaction position corresponding to the first interaction position in the graphical interface displayed by the first position information based on the position conversion relation, and executes interaction operation corresponding to the second interaction position in the webpage file.
Optionally, the first process obtains new graphical interface data corresponding to the webpage file according to the execution result of the interactive operation.
The second process displays a new graphical interface in the target display component based on the new graphical interface data.
Optionally, the plurality of display components includes an underlying component that is overlaid by the target display component, and the interface provided by the target display component includes a transparent region.
The first process determines, based on the position conversion relationship, that before a second interaction position corresponding to the first interaction position in the graphical interface is displayed with the first position information:
the second process judges whether the first interaction position is positioned in the transparent area; if the first interaction position is not located in the transparent area, the first process determines a second interaction position corresponding to the first interaction position in the graphical interface displayed by the first position information based on the position conversion relation.
If the first interaction location is located in the transparent region, the second process hands the first interaction location to the underlying component for processing.
Optionally, the step of the first process for obtaining the graphical interface data corresponding to the web page file according to the web page file rendering includes:
the first process renders the webpage file through a CEF off-screen rendering technology, and graphic interface data corresponding to the webpage file is obtained.
Referring to fig. 11, the following describes the present application in detail with reference to PC-side live broadcast software. The live software includes a main process 300 and an auxiliary process 200. The main process 300 is mainly responsible for software interface management and data display, including live video data and graphic interface data of a web page file. The auxiliary process 200 is mainly responsible for rendering of the web page file and responding to the user's interaction. The main process 300 performs data interaction with the second communication module 201 of the auxiliary process 200 through the first communication module 301.
The host process 300 also includes a business call module 305, an off-screen rendering module 304, and an applet management module 306. The service calling module 305 is mainly used for supporting requirements such as gift sending, network request and the like in the live broadcast process.
The off-screen rendering module 304 is primarily used to create and manage display components for applets through the applet management module 306. It will be appreciated that the applet, as one of the web page files, has many advantages. For example, the method has the characteristics of convenience, quickness, safety, stability, convenience in development and the like.
It should be appreciated that the host process 300 organizes the software interface by way of a "container + component". The software interface mainly comprises 3 plates, namely a public screen plate, a video plate and other expansion plates (for example, a platform message plate), wherein each plate corresponds to a container. Specifically, the public screen layout block corresponds to a public screen container, the video layout block corresponds to a video container, and other expansion layout blocks correspond to expansion containers. Each container includes display components in a hierarchical relationship.
For example, a display component with a level of "0" is included in the male layout piece for displaying the base map. A display assembly of hierarchy "100" may be used to display a bullet screen. And the display component with the hierarchy of 200 is used for displaying special effects. Wherein, the display assembly with large hierarchy covers the display assembly with small hierarchy.
The auxiliary process 200 includes a layer change module 202, a business process module 203, and an interaction process module 204. After the auxiliary process 200 obtains the web page file, the graphic interface data of the web page file is obtained through the layer change module 202; executing the service provided in the file by the service processing module 203; the interaction location of the user in the web interface provided by the web page file is determined by the interaction processing module 204.
After the electronic device acquires the applet through the issuing module 302 in the main process 300, the applet is sent to the auxiliary process 200 through the creating module 303 and the off-screen rendering module 304; the "container identifier+component identifier" carried in the applet is obtained by the creation module 303 and sent to the applet management module 306, so as to create a corresponding display component, and the "container identifier+component identifier" is used as an identifier of the applet graphical interface data, so as to maintain the correspondence between the display component and the "container identifier+component identifier".
The electronic device 100 renders the applet based on the CEF off-screen rendering technique through the layer change module 202 in the auxiliary process 200, obtains the graphical interface data, and sends the graphical interface data to the off-screen rendering module 304.
The electronic device 100 determines, through the off-screen rendering module 304 in the main process 300, a corresponding display component in a corresponding container according to the "container identifier+component identifier" of the graphical interface data of the applet, and displays the graphical interface data.
Further, when the user performs an interactive operation in the display component displaying the applet, the electronic device 100 obtains, through the main process 300, the first interactive position in the display component displaying the applet interface, and sends the first interactive position to the auxiliary process 200 via the off-screen rendering module.
The electronic device 100 determines a second interaction position of the applet display interface according to the first interaction position through an interaction processing module in the auxiliary process 200; and performs a corresponding service interaction operation based on the second interaction location through the service processing module 203.
Referring to fig. 12, based on the same inventive concept, the present embodiment further provides an interface display device 110, where the interface display device 110 includes at least one functional module that can be stored in the memory 120 in the form of software. The interface display device 110 is applied to the electronic device 100, and the electronic device 100 provides a target display interface and a plurality of display components for providing information presentation on the target display interface, wherein each display component has a unique identifier. Functionally divided, the interface display device 110 may include:
The interface data module 1101 is configured to obtain, according to the web page file rendering, graphical interface data corresponding to the web page file, where the graphical interface data is configured to display a graphical interface with the first location information.
In the embodiment of the present application, the interface data module 1101 is configured to perform step S100 in fig. 2, and the detailed description of the interface data module 1101 may refer to the detailed description of step S100.
The component determining module 1102 is configured to determine a target display component from the multiple display components according to the identifier corresponding to the graphical interface data; the identification of the target display component is matched with the identification corresponding to the graphical interface data; the target display component is used for performing display operation with the second position information.
In the embodiment of the present application, the component determining module 1102 is configured to perform step S200 in fig. 2, and the detailed description of the component determining module 1102 may refer to the detailed description of step S200.
The interface display module 1103 is configured to display a graphical interface in the target display component according to the graphical interface data.
In the embodiment of the present application, the interface display module 1103 is configured to perform step S300 in fig. 2, and the detailed description of the interface display module 1103 may refer to the detailed description of step S300.
Alternatively, the electronic device 100 is configured with a positional conversion relationship between the first positional information and the second positional information. Referring again to fig. 9, the interface display device 110 further includes:
a position obtaining module 1104, configured to respond to an interaction operation of a user in an interface provided by the target display component, and obtain a first interaction position of the interaction operation under the second position information;
a position conversion module 1105, configured to determine, based on a position conversion relationship, a second interaction position corresponding to the first interaction position in the graphical interface displayed with the first position information;
the interaction executing module 1106 is configured to execute an interaction operation corresponding to the second interaction location in the web page file.
Optionally, the interface data module is further configured to obtain new graphical interface data corresponding to the web page file according to an execution result of the interactive operation;
the interface display module is further configured to display a new graphical interface in the target display component according to the new graphical interface data.
The embodiment of the application further provides a storage medium, where a computer program is stored, and when the computer program is executed by the processor 130, the interface display method is implemented.
In summary, the embodiments of the present application provide an interface display method, an apparatus, a storage medium, and an electronic device. Through the interface display method, the electronic equipment renders the webpage file to obtain the graphical interface data corresponding to the webpage file, and the target display assembly is determined from the target display interface to display the graphical interface data through the identification of the graphical interface data. Therefore, based on the existing webpage file, the electronic equipment displays the graphical interface data of the webpage file through the corresponding target display component, so that the functions of the webpage platform can be transferred to other platforms in a cross-platform manner, the development efficiency can be improved, and the development cost is reduced.
In the embodiments provided in the present application, it should be understood that the disclosed apparatus and method may be implemented in other manners as well. The apparatus embodiments described above are merely illustrative, for example, flow diagrams and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
In addition, the functional modules in the embodiments of the present application may be integrated together to form a single part, or each module may exist alone, or two or more modules may be integrated to form a single part.
The functions, if implemented in the form of software functional modules and sold or used as a stand-alone product, may be stored in a computer-readable storage medium. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art or in a part of the technical solution, in the form of a software product stored in a storage medium, including several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a random access Memory (RAM, random Access Memory), a magnetic disk, or an optical disk, or other various media capable of storing program codes.
It is noted that relational terms such as first and second, and the like are used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Moreover, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.
The foregoing is merely various embodiments of the present application, but the scope of the present application is not limited thereto, and any person skilled in the art can easily think about changes or substitutions within the technical scope of the present application, and the changes and substitutions are intended to be covered in the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.
Claims (10)
1. An interface display method is applied to an electronic device, the electronic device provides a target display interface and a plurality of display components for providing information presentation on the target display interface, each display component has a unique identifier, and the target display interface is a non-web platform, the method comprises:
after rendering is carried out according to codes in a webpage file by an off-screen rendering technology, graphic interface data of the webpage file are obtained, and the graphic interface data are used for displaying a graphic interface by first position information;
determining a target display component from a plurality of display components according to the identification corresponding to the graphical interface data; the identification of the target display component is matched with the identification corresponding to the graphical interface data; the target display component is used for performing display operation according to the second position information;
And displaying the graphical interface in the target display component according to the graphical interface data.
2. The interface display method according to claim 1, wherein the electronic device is configured with a positional conversion relationship between the first positional information and the second positional information, the method further comprising:
responding to the interactive operation of the user in the interface provided by the target display component, and obtaining a first interactive position of the interactive operation under the second position information;
determining a second interaction position corresponding to the first interaction position in the graphical interface displayed by the first position information based on the position conversion relation;
and executing the interaction operation corresponding to the second interaction position in the webpage file.
3. The interface display method according to claim 2, characterized in that the method further comprises:
obtaining new graphical interface data corresponding to the webpage file according to the execution result of the interactive operation;
and displaying a new graphical interface in the target display component according to the new graphical interface data.
4. The interface display method according to claim 2, wherein the plurality of display components includes a lower layer component covered by the target display component, the interface provided by the target display component includes a transparent region, and the method further includes, before the second interaction location corresponding to the first interaction location is determined in the graphical interface displayed with the first location information based on the location conversion relation:
Judging whether the first interaction position is positioned in the transparent area or not;
and if the first interaction position is not located in the transparent area, determining a second interaction position corresponding to the first interaction position in the graphical interface displayed by the first position information based on the position conversion relation.
5. The interface display method according to claim 4, characterized in that the method further comprises:
and if the first interaction position is positioned in the transparent area, the first interaction position is intersected with the lower layer assembly for processing.
6. An interface display device, which is applied to an electronic device, wherein the electronic device provides a target display interface and a plurality of display components for providing information presentation on the target display interface, each display component has a unique identifier, the target display interface is a non-web platform, and the interface display device comprises:
the interface data module is used for rendering according to codes in the webpage file through an off-screen rendering technology to obtain graphical interface data of the webpage file, wherein the graphical interface data is used for displaying a graphical interface through first position information;
the component determining module is used for determining a target display component from a plurality of display components according to the identification corresponding to the graphical interface data; the identification of the target display component is matched with the identification corresponding to the graphical interface data; the target display component is used for performing display operation according to the second position information;
And the interface display module is used for displaying the graphical interface in the target display component according to the graphical interface data.
7. The interface display apparatus according to claim 6, wherein the electronic device is configured with a positional conversion relationship between the first positional information and the second positional information, the interface display apparatus further comprising:
the position acquisition module is used for responding to the interactive operation of the user in the interface provided by the target display component and acquiring a first interactive position of the interactive operation under the second position information;
the position conversion module is used for determining a second interaction position corresponding to the first interaction position in the graphical interface displayed by the first position information based on the position conversion relation;
and the interaction executing module is used for executing the interaction operation corresponding to the second interaction position in the webpage file.
8. The interface display device according to claim 7, wherein the interface data module is further configured to obtain new graphical interface data corresponding to the web page file according to an execution result of the interactive operation;
the interface display module is further configured to display a new graphical interface in the target display component according to the new graphical interface data.
9. An electronic device comprising a memory and a processor, the memory storing computer-executable instructions that, when executed by the processor, implement the interface display method of any one of claims 1-5.
10. A storage medium storing a computer program which, when executed by a processor, implements the interface display method of any one of claims 1-5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010790226.1A CN111913708B (en) | 2020-08-07 | 2020-08-07 | Interface display method and device, storage medium and electronic equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010790226.1A CN111913708B (en) | 2020-08-07 | 2020-08-07 | Interface display method and device, storage medium and electronic equipment |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111913708A CN111913708A (en) | 2020-11-10 |
| CN111913708B true CN111913708B (en) | 2024-02-27 |
Family
ID=73283289
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010790226.1A Active CN111913708B (en) | 2020-08-07 | 2020-08-07 | Interface display method and device, storage medium and electronic equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111913708B (en) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106792188A (en) * | 2016-12-06 | 2017-05-31 | 腾讯数码（天津）有限公司 | A kind of data processing method of live page, device and system |
| WO2018121556A1 (en) * | 2016-12-27 | 2018-07-05 | 北京奇虎科技有限公司 | Live broadcast data processing method, apparatus, program and medium |
| CN108810599A (en) * | 2017-04-27 | 2018-11-13 | 腾讯科技（上海）有限公司 | Net cast method, apparatus and computer equipment |
| CN111131875A (en) * | 2019-12-06 | 2020-05-08 | 北京达佳互联信息技术有限公司 | Information display method, device and system, electronic equipment and storage medium |
| CN111240669A (en) * | 2018-11-28 | 2020-06-05 | 阿里巴巴集团控股有限公司 | Interface generation method and device, electronic equipment and computer storage medium |
| CN111263176A (en) * | 2020-01-17 | 2020-06-09 | 北京字节跳动网络技术有限公司 | Loading method, device, terminal, server and storage medium for live broadcast room page |
| CN111327917A (en) * | 2020-03-09 | 2020-06-23 | 北京达佳互联信息技术有限公司 | Live content preview method, device, equipment and storage medium |
| US20200242186A1 (en) * | 2017-10-13 | 2020-07-30 | Huawei Technologies Co., Ltd. | Method and Terminal Device for Extracting Web Page Content |
-
2020
- 2020-08-07 CN CN202010790226.1A patent/CN111913708B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106792188A (en) * | 2016-12-06 | 2017-05-31 | 腾讯数码（天津）有限公司 | A kind of data processing method of live page, device and system |
| WO2018121556A1 (en) * | 2016-12-27 | 2018-07-05 | 北京奇虎科技有限公司 | Live broadcast data processing method, apparatus, program and medium |
| CN108810599A (en) * | 2017-04-27 | 2018-11-13 | 腾讯科技（上海）有限公司 | Net cast method, apparatus and computer equipment |
| US20200242186A1 (en) * | 2017-10-13 | 2020-07-30 | Huawei Technologies Co., Ltd. | Method and Terminal Device for Extracting Web Page Content |
| CN111240669A (en) * | 2018-11-28 | 2020-06-05 | 阿里巴巴集团控股有限公司 | Interface generation method and device, electronic equipment and computer storage medium |
| CN111131875A (en) * | 2019-12-06 | 2020-05-08 | 北京达佳互联信息技术有限公司 | Information display method, device and system, electronic equipment and storage medium |
| CN111263176A (en) * | 2020-01-17 | 2020-06-09 | 北京字节跳动网络技术有限公司 | Loading method, device, terminal, server and storage medium for live broadcast room page |
| CN111327917A (en) * | 2020-03-09 | 2020-06-23 | 北京达佳互联信息技术有限公司 | Live content preview method, device, equipment and storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111913708A (en) | 2020-11-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102077233B (en) | Extended user profile | |
| CN109656445B (en) | Content processing method, device, terminal and storage medium | |
| CN101283572A (en) | Application program update deployment to a mobile device | |
| JP2017091243A (en) | Display control method, terminal, information processing device and program | |
| JP6615997B2 (en) | Synchronization of server-side keyboard layout and client-side keyboard layout in virtual sessions | |
| CN105630267A (en) | View interface resource management method and apparatus | |
| US20210216177A1 (en) | Navigation bar controlling method and terminal | |
| CN102405461A (en) | Server device, server-client system, server program, and recording medium with same recorded thereon | |
| CN112925520A (en) | Method and device for building visual page and computer equipment | |
| CN102395101B (en) | The visual representation of contact location | |
| CN103648043B (en) | Search control method and control device to intelligent television | |
| CN105160028A (en) | Webpage browsing realizing method and browser realizing system | |
| CN113590072A (en) | Split screen display method and device | |
| US20200201673A1 (en) | View switching | |
| CN111324398B (en) | Method, device, terminal and storage medium for processing latest content | |
| CN111913708B (en) | Interface display method and device, storage medium and electronic equipment | |
| CN112818259A (en) | Content recommendation method, electronic device and computer-readable storage medium | |
| CN104063113A (en) | Set display and interaction method for location-related information in digital map | |
| CN109976605B (en) | Class board content display method, device and storage medium | |
| CN110456999B (en) | Program creation method, program creation device, electronic equipment and computer readable storage medium | |
| CN110806830A (en) | User interaction method and electronic equipment | |
| CN108415746B (en) | Application interface display method and device, storage medium and electronic equipment | |
| CN109521924B (en) | Method and device for assisting user in selecting target application | |
| JP2019061363A (en) | Access authentication system | |
| JP5659474B2 (en) | Information processing terminal and program |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |