CN111913708A - 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
- CN111913708A CN111913708A CN202010790226.1A CN202010790226A CN111913708A CN 111913708 A CN111913708 A CN 111913708A CN 202010790226 A CN202010790226 A CN 202010790226A CN 111913708 A CN111913708 A CN 111913708A
- Authority
- CN
- China
- Prior art keywords
- display
- interface
- graphical interface
- target display
- interaction
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 94
- 230000003993 interaction Effects 0.000 claims description 79
- 230000002452 interceptive effect Effects 0.000 claims description 47
- 238000009877 rendering Methods 0.000 claims description 34
- 238000006243 chemical reaction Methods 0.000 claims description 22
- 238000012545 processing Methods 0.000 claims description 13
- 238000004590 computer program Methods 0.000 claims description 6
- 230000000712 assembly Effects 0.000 claims description 4
- 238000000429 assembly Methods 0.000 claims description 4
- 230000006870 function Effects 0.000 abstract description 30
- 238000011161 development Methods 0.000 abstract description 14
- 230000002829 reductive effect Effects 0.000 abstract description 4
- 230000008569 process Effects 0.000 description 46
- 238000005516 engineering process Methods 0.000 description 11
- 238000010586 diagram Methods 0.000 description 10
- 238000004891 communication Methods 0.000 description 7
- 238000007726 management method Methods 0.000 description 5
- 230000008520 organization Effects 0.000 description 4
- 238000013519 translation Methods 0.000 description 4
- 230000009471 action Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 3
- 238000012546 transfer Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 230000002159 abnormal effect Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007812 deficiency Effects 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
- 239000010454 slate Substances 0.000 description 1
- 230000001360 synchronised effect Effects 0.000 description 1
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/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. According to the interface display method, the electronic equipment renders the webpage file to obtain the graphical interface data corresponding to the webpage file, and determines the target display component 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, and the functions of the webpage platform can be transferred to the non-webpage platform in a cross-platform mode, so that the development efficiency can be improved, and the development cost can be reduced.
Description
Technical Field
The present application relates to the field of computers, and in particular, to an interface display method, an interface display apparatus, a storage medium, and an electronic device.
Background
At present, in order to meet the use habits of different users, the same application service often needs to support a plurality of platforms. Such as a web platform, PC platform, mobile terminal platform, etc. This makes it necessary to develop the new service function on each platform, which results in excessive development cost.
Disclosure of Invention
In order to overcome at least one of the deficiencies in the prior art, an object of the embodiments of the present application is to provide an interface display method 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 display component has a unique identifier, the method includes:
obtaining graphical interface data corresponding to the webpage file according to webpage file rendering, wherein the graphical interface data are used for displaying a graphical interface according to first position information;
determining a target display assembly from the plurality of display assemblies 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 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 location translation relationship between the first location information and the second location information, and the method further includes:
responding to the interactive operation of a user in an 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 interactive operation corresponding to the second interactive position in the webpage file.
Optionally, the method further comprises:
acquiring 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 display components include a lower layer component covered by the target display component, an interface provided by the target display component includes a transparent area, and before determining, based on the position conversion relationship, that the second interaction position corresponding to the first interaction position in the graphical interface is displayed with the first position information, the method further includes:
judging whether the first interaction position is located in the transparent area;
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 located in the transparent area, handing the first interaction position to the lower-layer assembly for processing.
Another objective of the embodiments of the present application is to provide an interface display apparatus, 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 display on the target display interface, and each display component has a unique identifier, and the interface display apparatus includes:
the interface data module is used for obtaining graphical interface data corresponding to the webpage file according to webpage file rendering, and the graphical interface data is used for displaying a graphical interface according to first position information;
the component determining module is used for determining a target display component from the 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 second position information;
and the interface display module is used for displaying the graphical interface in the target display assembly according to the graphical interface data.
Optionally, the electronic device is configured with a location conversion relationship between the first location information and the second location information, and the interface display apparatus further includes:
the position acquisition module is used for responding to the interactive operation of a user in an 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 execution 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 the execution result of the interactive operation;
the interface display module is further configured to display a new graphical interface in the target display assembly according to the new graphical interface data.
It is a further object of the embodiments of the present application to provide an electronic device, which includes a memory and a processor, where the memory stores computer-executable instructions, and the computer-executable instructions, when executed by the processor, implement an interface display method.
It is a fourth object of the 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 method 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 the graphical interface data corresponding to the webpage file, and determines the target display component from the plurality of display components of the target display interface to display the graphical interface data through the identification of the graphical interface data. Because the graphical interfaces of different web page files provide different service functions for the user, the graphical interface of each web page file can be presented to the corresponding display component in the target interface by obtaining the identification of the graphical interface data corresponding to the web page boundary. Moreover, when the service function is newly added, only the corresponding display component needs to be allocated to the newly added service, so that the service function of the web 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 required to be used in the embodiments will be briefly described below, it should be understood that the following drawings only illustrate some embodiments of the present application and therefore should not be considered as limiting the scope, and for those skilled in the art, other related drawings can be obtained from the drawings without inventive effort.
Fig. 1 is a schematic structural diagram of an electronic device according to an embodiment of the present disclosure;
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 display interface of a browser provided in an embodiment of the present application;
fig. 4 is a schematic diagram of a first direct-playing interface provided in the embodiment of the present application;
fig. 5 is a schematic view of a second live interface provided in the embodiment of the present application;
FIG. 6 is a schematic view of an interaction operation flow provided by an embodiment of the present application;
FIG. 7 is a schematic diagram of component coverage provided by an embodiment of the present application;
fig. 8 is a schematic view illustrating a processing flow of a transparent area according to an embodiment of the present disclosure;
FIG. 9 is a schematic view of a transparent region provided in an embodiment of the present application;
FIG. 10 is a schematic diagram illustrating a display module update process according to an embodiment of the present application;
fig. 11 is a schematic view of a live broadcast 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-a memory; 130-a processor; 500-browser interface; 501-webpage content display area; 502-second detail location, 600-first live interface; 602-first detail location; 700-a second live interface; 701-subscribe panel; 702-video plate; 703-message board; 801-a first display assembly; 802-a second display component; 901-a third display assembly; 902-a fourth display assembly; 903-mouse icon; 200-an auxiliary process; 201-a second communication module; 202-layer change module; 203-service processing module; 204-an interaction processing module; 300-main process; 301-a first communication module; 302-issuing module; 303-a creation module; 304-an off-screen rendering module; 305-a service invocation module; 306-applet management module; 1101-an interface data module; 1102-a component determination module; 1103-an interface display module; 1104-a location acquisition module; 1105-a location translation module; 1106-interactive executive module.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in 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 obvious that the described embodiments are some embodiments of the present application, but not all embodiments. The components of the embodiments of the present application, generally described and illustrated in the figures herein, can be arranged and designed in a wide variety of different configurations.
Thus, the following detailed description of the embodiments of the present application, presented in the accompanying drawings, is not intended to limit the scope of the claimed application, but is merely representative of selected embodiments of the application. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures.
In the description of the present application, it is noted that the terms "first", "second", "third", and the like are used merely for distinguishing between descriptions and are not intended to indicate or imply relative importance.
As introduced in the background, the same application service often needs to support multiple platforms in order to meet the usage habits of different users. Such as a web platform, PC platform, mobile terminal platform, etc. This makes it necessary to develop the new service function on each platform, which results in excessive development cost.
Taking a live broadcast scene as an example, a live broadcast platform generally provides three entries, namely a web page platform, a PC platform and a mobile terminal platform. When the live broadcast platform needs to provide a gift delivery function, the interactive function related to the gift delivery is realized based on respective technical stacks of the webpage platform PC platform and the mobile terminal platform.
For example, in the PC platform, a developer needs to determine a display area in live broadcast software of the PC platform to display a gift selectable by a user, and implement functions of selecting a gift, sending a gift-related operation flow, and accompanying authentication, gift special effects, and the like based on the displayed gift. Accordingly, developers of the web page platform and developers of the mobile terminal need to implement a set of interfaces and/or interactive functions related to gift delivery based on the development platforms again.
Therefore, at present, the functions between different platforms are difficult to realize multiplexing, so that the development efficiency is low and the development cost is overhigh.
In view of this, considering that the off-screen rendering technology is rendered in the memory space by the CPU or the GPU, the rendered result does not need to be directly presented in the current display screen. Therefore, in the embodiment of the application, the interface of one platform during the operation of the application program is rendered in the memory through the off-screen rendering technology, so that the corresponding graphical interface data is obtained, 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, the development efficiency is improved, and the development cost is reduced.
The off-screen rendering technology includes various implementation manners such as CEF (chrome Embedded Frame) and FBO (Frame buffer Object). The technical idea of the interface display method of the present application is described below by taking the CEF off-screen rendering technology as an example. It is obvious that for the implementation in the following examples of the present 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 the present 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 displaying the graphical interface data by a target display component in graphical interfaces of other platforms. In this way, the functionality of the web platform is reused to other platforms.
In a possible implementation manner, the present application further discloses an electronic device for executing the following exemplary method flow, and specifically, referring to fig. 1, a schematic structural diagram of an electronic device 100 for executing the interface display method provided for the implementation of the present application is shown. The electronic device 100 includes an interface display 110, a memory 120, and a processor 130. The processor may be a CPU or a GPU, and is used to render interfaces of other platform applications in the memory when running.
The memory 120, the processor 130, and other elements are communicatively coupled directly or indirectly to each other to enable data transfer or interaction. For example, the components may be electrically connected to each other via one or more communication buses or signal lines. The interface display device 110 includes at least one software function module which can be stored in the memory 120 in the form of software or Firmware (Firmware) or is solidified in an Operating System (OS) of the electronic device 100. The processor 130 is used for executing 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 (RAM), a Read Only Memory (ROM), a Programmable Read-Only Memory (PROM), an Erasable Read-Only Memory (EPROM), an electrically Erasable Read-Only Memory (EEPROM), and the like. The memory 120 is used for storing a program, and the processor 130 executes the program after receiving the execution instruction.
The electronic device 100 may be, but is not limited to, a personal computer, a PC computer, a server, and the like.
For some application scenarios, the electronic device 100 may not include the display screen, and only process the output data, such as related data obtained by an off-screen rendering technique, and further send the related data to other devices having the display screen through a wired or wireless network to display the related data.
The electronic device 100 provides a target display interface and a plurality of display components for providing information display on the target display interface, wherein each display component has a unique identifier.
The following examples of the present application can be applied to various application scenarios, and taking a live broadcast scenario as an example, a live broadcast platform will generally provide three portals, which are a web page platform, a PC platform, and a mobile terminal platform. That is, 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 broadcast software runs in a computer.
Referring to fig. 2, a flowchart of steps of the interface display method according to the embodiment of the present application is provided, and the method including the steps will be described in detail below.
And step S100, obtaining graphical interface data corresponding to the webpage file according to webpage file rendering, wherein the graphical interface data are used for displaying a graphical interface according to the first position information.
Optionally, taking the CEF off-screen rendering technology 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, after rendering is carried out through a CEF off-screen rendering technology, the graphical interface data of the webpage file is obtained and can be stored in a memory or a video memory of a GPU.
Step S110, determining a target display assembly from a plurality of display assemblies 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.
Because the target display interface can comprise a plurality of display components for information display, each display component can be used for displaying graphical interface data. Accordingly, a target display component needs to be determined from the plurality of display components for displaying the graphical interface data.
In a 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, and further, based on the display position corresponding to each display component, achieve a purpose of displaying the corresponding graphical interface at a suitable position. The matching relationship can be preset based on the requirements of the user, and can also be set according to the requirements of the software framework. Thus, the electronic device 100 matches the identifier of the graphical interface data with the identifier of the display component to obtain a display component meeting the requirement, i.e., a target display component meeting the matching relationship.
And step S120, displaying a graphical interface in the target display assembly according to the graphical interface data.
Referring to fig. 3 and 4, the multiplexing of the above-mentioned web platform functions is schematically illustrated below by taking an example of displaying data in a graphical interface of a web browser in a graphical interface of another frame format. For the browser interface 500 presented in the web browser, the electronic device 100 obtains a score webpage for displaying the score result between the anchor and displays the score webpage in the browser interface 500. The web page interface of the score web page can be seen in the web page content display area 501 in the browser interface 500.
In this embodiment of the application, the electronic device 100 renders the score webpage through an off-screen rendering technology, obtains graphical interface data of the score webpage, and displays information represented by the graphical interface data in another program interface in a frame format.
For another frame-type graphical interface, because there may be a demand difference between different frame types and the display position of the same graphical interface, it is necessary to display the graphical interface data of the score webpage at the desired display position by using the position information of the display component of the new graphical interface.
For another frame-type graphical interface, please refer to a first direct-playing interface 600 of direct-playing software illustrated in fig. 4 and a browser interface 500 illustrated in fig. 3. In the web browser, the web interface of the score web page substantially occupies the web content display area 501 in the entire browser interface 500. In the first live interface 600 of the live broadcast software, the web interface corresponding to the score web page needs to be displayed in the display interface provided by the display component at the lower right corner of the whole first live broadcast interface 600.
Therefore, it is necessary to display the graphical interface data of the score webpage on the display component at the lower right corner of the first direct-view interface 600 by using the position information of the display component in the first direct-view interface 600. That is, the electronic device 100 matches the identifiers of the multiple display components through the identifiers corresponding to the graphical interface data, and displays the graphical interfaces of other platforms based on the position information of the target display component after the target display component is determined.
It should be noted that, the electronic device 100 renders the score webpage through an off-screen rendering technology, and instead of directly outputting and displaying the webpage interface of the score webpage through any display device, obtains the graphical interface data of the score webpage and displays the graphical interface data through another graphical interface in a frame format.
By 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 the target display component from the target display interface to display the graphical interface data through the identifier of 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, and can transfer the functions of the web page platform to other platforms across platforms, so that the development efficiency can be improved, and the development cost can be reduced.
In a possible implementation manner, when the web platform needs a new service function, the new service function needed by the web platform can be multiplexed by only allocating a corresponding display component to the new service, so as to implement function synchronization of each platform.
Regarding the identifier of the graphical interface data, in one possible implementation, since the web page file corresponds to the graphical interface data, the identifier of the graphical interface data may be carried in the web page file.
As another possible implementation manner, the electronic device 100 may obtain the identification of the graphical interface data from the server through another network channel.
Because the style of the target interface has a plurality of organization modes, the organization mode of the container and the component is taken as an example below to introduce the identifier of the graphical interface data in the interface display method of the application. It is obvious that for the implementation in the following examples of the present application, a person skilled in the art may think of other graphical interface data identifications, which do not need to make an inventive contribution based on the solution disclosed in the present application.
The target display interface comprises a plurality of plates, and the plates are distinguished through a container. Wherein each container includes at least one display assembly therein. For the interface organization style of "container + component", the identifier as graphical interface data can be identified by "container identifier + component identifier".
The interface organization style of the container + component can be applied to many scenes, for example, a live scene. Referring to fig. 5, a second live interface 700 displayed when a live program runs includes a subscription board 701, a video board 702, and a message board 703. Wherein each display component in the subscription plate 701 is used for displaying a anchor identification (e.g., an anchor avatar and an anchor name, etc.) of an anchor of interest to the viewer. Video slate 702 is used to display live video that is currently being live. The display components in message board 703 are used to display notification messages related to the live platform.
Since the target display component only displays the graphical interface data of the graphical interface, that is, the target display component only displays one picture, the graphical interface displayed by the target display component does not have the same interaction function as a webpage file. Therefore, in order to enable the graphical interface displayed by the target display component to respond to the interactive function like a web file, the electronic device 100 is configured with a position conversion relationship between the first position information and the second position information.
In one possible implementation, after step S120 shown in fig. 2, the position between the first position information and the second position information is converted through steps S130-S160 shown in fig. 6, which is described in detail below with reference to 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 location corresponding to the first interaction location in the graphical interface displayed with the first location information based on the location conversion relationship.
Step S160, performing an interactive operation corresponding to the second interactive position in the web page file.
With regard to the relationship between the first interaction position and the second interaction position, an exemplary description is given below with reference again to fig. 3 and 4. When the user clicks on the first detail location 602 in the display interface provided by the display component in the lower right hand corner of figure 4. The electronic device 100 determines that the first detailed location 602 actually corresponds to the second detailed location 502 in the web content display area 501 shown in fig. 3 based on the location conversion relationship between the first location information and the second location information. And determining the interactive operation position in the webpage interface corresponding to the webpage file according to the interactive operation position of the user in the interface provided by the target display component based on the position conversion relation between the first position information and the second position information.
It should be understood that the web page file is provided with complete service interaction functions, and therefore, it is necessary to determine a second interaction position of the user in the browser interface 500 provided by the browser according to the first interaction position of the user in the interaction operation in the display component, and then respond to the interaction operation of the user through the web page file. I.e., it is the web page file itself, rather than the target display component, that is truly responsive to user interaction.
The target display interface is provided with a plurality of display components, wherein the display components comprise lower-layer components covered by the target display components, and a transparent area exists in the interface provided by the target display components.
It should be understood that the display components provided in the embodiments of the present application are compared to display controls in MFC (Microsoft Foundation Classes library) or Qt widget. And each display component directly draws in the target display interface, namely, each display component is not created in the form of a handle, so that the displayed interface of each display component is a logical graphical interface.
Because each display component is directly drawn in the target display interface, the display components can be mutually covered.
The following describes an exemplary case where the display module and the display module are overlaid with each other 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 component 802 is drawn over the first display component 801, a partial area of the second display component 802 is covered by the first display component 801.
The target display assembly covers other display assemblies and also comprises a transparent area. In a possible implementation manner, 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 performs an operation in the transparent area before executing step S150 in fig. 6. Specifically, referring to step S140 in fig. 8:
step S140, determine whether the first interaction location is located in the transparent area.
If the first interaction position is not located in the transparent area, the electronic device 100 determines, based on the position conversion relationship, a second interaction position corresponding to the first interaction position in the graphical interface displayed with the first position 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 to the lower layer component for processing.
That is, when the user operates the transparent area 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.
There are many application scenarios of the transparent target display component, and the following describes an exemplary interaction operation in a transparent area in a graphical interface displayed by the target display component, taking a third target display component for displaying text data as an example, in conjunction with fig. 9. A third display component 901 is drawn in the target display interface shown in fig. 9. The regions other than the "text information" displayed by the third display module 901 are transparent regions. The transparent area of the third target display element is covered with a circular fourth display element 902. And when the user carries out interactive operation through the mouse icon 903 in the transparent area of the graphical interface displayed by the third target display component, executing the interactive operation bound by the fourth display component 902. When the user operates the transparent area in the graphical interface displayed by the target display component, the electronic device 100 ignores the user's interactive operation in the graphical interface displayed by the target display component.
Further, when the user operates the graphical interface corresponding to the web page file, some web page files may display different graphical interfaces according to the user operation, and therefore, in a possible implementation manner, after step S160 shown in fig. 8, the electronic device 100 further needs to synchronize the updated web page interface of the web page file in the target display component through the step shown in fig. 10. With respect to the synchronization of the display content between the target display component and the graphical interface of the web page file, the following steps are described in detail in conjunction with the flowchart of FIG. 10.
And step S180, acquiring new graphical interface data corresponding to the webpage file according to the execution result of the interactive operation.
And 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 following describes exemplary synchronization of the display contents between the target display component and the graphical interface of the web page file, with reference to fig. 3 and 4 again. When the user clicks on the first detail location 602 in the display interface provided by the display component in the lower right hand corner of figure 4. Since it is the web page file itself that is really responsive to the user interaction, and not the target display element, the first detail location 602 is converted to the second detail location 502 of the web page content display area 501.
At this time, the electronic book device responds to the click operation of the second detail position 502 through the web page file, and displays a new web page interface. The new webpage interface displays score results among more anchor. The content in the new webpage interface is synchronized into the display interface provided by the lower right corner display component of the second display interface. The electronic device 100 obtains new graphical interface data of the new web interface, and displays the new graphical interface data in the display interface provided by the display component in the lower right corner shown in fig. 4. At this point, the display interface provided by the display component in the lower right corner of FIG. 4 also displays the score results between more anchor.
It should be noted that the electronic device 100 may perform off-screen rendering on a plurality of web page files by using a CEF off-screen rendering technique to obtain a plurality of graphic display interface data. The electronic device 100 displays the graphic display interface data to the corresponding display component according to the identifier of each graphic display interface data.
In addition, the embodiment of the application realizes the function synchronization of each platform by embedding the service function of the webpage 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 can implement the technical solution of the present application by running multiple processes in parallel, for example, by running the first process and the second process, so that any one of the processes is abnormal, and the normal running of the other 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.
And the first process obtains the graphical interface data corresponding to the webpage file according to the webpage file rendering, and the graphical interface data is used for displaying the graphical interface by using the first position information.
The second process determines a target display component from the plurality of 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 according to the second position information; and displaying the graphical interface in the target display assembly according to the graphical interface data.
Optionally, the electronic device 100 is configured with a location translation relationship between the first location information and the second location information.
And the second process responds to the interactive operation of the user in the interface provided by the target display component, and obtains the first interactive position of the interactive operation under the second position information.
And 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 the interaction operation corresponding to the second interaction position in the webpage file.
Optionally, the first process obtains new graphical interface data corresponding to the web page 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 lower layer component covered by the target display component is included in the plurality of display components, and the interface provided by the target display component includes a transparent area.
The first process determines that a second interaction position corresponding to the first interaction position in the graphical interface displayed by the first position information is before:
the second process judges whether the first interaction position is located in the transparent area; and 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.
And if the first interaction position is located in the transparent area, the second process hands the first interaction position to the lower-layer component for processing.
Optionally, the step of obtaining, by the first process, the graphical interface data corresponding to the web page file according to the rendering of the web page file includes:
and the first process renders the webpage file through a CEF off-screen rendering technology to obtain the graphical interface data corresponding to the webpage file.
Referring to fig. 11, the present application will be described in detail with reference to the PC 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 graphical interface data of web files. The auxiliary process 200 is primarily responsible for rendering web page files and for responding to user interactions. The primary process 300 performs data interaction with the second communication module 201 of the secondary process 200 through the first communication module 301.
The host process 300 also includes a service invocation module 305, an off-screen rendering module 304, and an applet management module 306. The service invoking module 305 is mainly used for supporting requirements such as gift sending and network requests in the live broadcasting process.
The off-screen rendering module 304 is primarily used to create and manage display components for the applet through the applet management module 306. It should be appreciated that an applet, as one type of web page file, has many advantages. For example, the method has the characteristics of convenience, rapidness, safety, stability, convenience in development and the like.
It should be understood that the host process 300 organizes the software interface by way of "container + component". The software interface mainly comprises 3 plates which are respectively a public screen plate, a video plate and other extension plates (such as a platform message plate), and 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 the other extension layout blocks correspond to extension containers. Each container includes display components in a hierarchical relationship.
For example, a display component having a level "0" is included in the public block for displaying the base map. A display component, level "100", may be used to display the bullet screen. And the display component is in a hierarchy of 200 and is used for displaying special effects. Wherein, the display component with large hierarchy covers the display component with small hierarchy.
The auxiliary process 200 includes an image layer changing module 202, a service processing module 203 and an interaction processing module 204. After acquiring the web page file, the auxiliary process 200 acquires graphical interface data of the web page file through the layer change module 202; executing the service provided in the file through the service processing module 203; the interaction position of the user in the web interface provided by the web document is determined by the interaction processing module 204.
After acquiring the applet through the issuing module 302 in the main process 300, the electronic device sends the applet to the auxiliary process 200 through the creating module 303 and the off-screen rendering module 304; the container identifier and the component identifier carried in the applet are obtained by the creation module 303 and are sent to the applet management module 306 to create a corresponding display component, and the container identifier and the component identifier are used as the identifier of the applet graphical interface data to maintain the corresponding relationship between the display component and the container identifier and the component identifier.
The electronic device 100 renders the applet through the layer change module 202 in the auxiliary process 200 based on the CEF off-screen rendering technology, obtains the graphical interface data, and sends the graphical interface data to the off-screen rendering module 304.
The electronic device 100 determines the corresponding display component in the corresponding container according to the "container identifier + component identifier" of the graphical interface data of the applet through the off-screen rendering module 304 in the main process 300, 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 the first interactive position in the display component displaying the applet interface through the main process 300, 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 apparatus 110, where the interface display apparatus 110 includes at least one functional module that can be stored in the memory 120 in a software form. 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 display on the target display interface, and 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 graphical interface data corresponding to the web page file according to the rendering of the web page file, where the graphical interface data is used to display a graphical interface according to the first position information.
In the embodiment of the present application, the interface data module 1101 is configured to perform step S100 in fig. 2, and for a detailed description of the interface data module 1101, reference may be made to the detailed description of step S100.
A component determining module 1102, 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 according to 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 reference may be made to the detailed description of step S200 for a detailed description of the component determining module 1102.
And an interface display module 1103, configured to display a graphical interface in the target display component according to the graphical interface data.
In this embodiment of the application, the interface display module 1103 is configured to perform step S300 in fig. 2, and reference may be made to the detailed description of step S300 for a detailed description of the interface display module 1103.
Optionally, the electronic device 100 is configured with a location translation relationship between the first location information and the second location information. Referring to fig. 9 again, the interface display device 110 further includes:
the position acquisition module 1104 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;
a location conversion module 1105, configured to determine, based on the location conversion relationship, a second interaction location corresponding to the first interaction location in a graphical interface displayed with the first location information;
and an interaction execution module 1106, 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 the execution result of the interactive operation;
the interface display module is further configured to display a new graphical interface in the target display assembly according to the new graphical interface data.
The embodiment of the present 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 interface display apparatus, a storage medium, and an electronic device. According to the interface display method, the electronic equipment renders the webpage file to obtain the graphical interface data corresponding to the webpage file, and determines the target display component 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, and the functions of the webpage platform can be transferred to other platforms in a cross-platform mode, so that the development efficiency can be improved, and the development cost can be reduced.
In the embodiments provided in the present application, it should be understood that the disclosed apparatus and method may be implemented in other ways. The apparatus embodiments described above are merely illustrative, and for example, the flowchart 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, functional modules in the embodiments of the present application may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent 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 or portions thereof that substantially contribute to the prior art may be embodied in the form of a software product stored in a storage medium and including instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to 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), a magnetic disk or an optical disk, and other various media capable of storing program codes.
It is noted that, herein, relational terms such as first and second, and the like may be 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. Also, 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 an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.
The above description is only for 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 conceive of changes or substitutions within the technical scope of the present application, and all such changes or substitutions are included 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 electronic equipment, the electronic equipment provides a target display interface and a plurality of display components for providing information display on the target display interface, each display component has a unique identifier, and the method comprises the following steps:
obtaining graphical interface data corresponding to the webpage file according to webpage file rendering, wherein the graphical interface data are used for displaying a graphical interface according to first position information;
determining a target display assembly from the plurality of display assemblies 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 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 location conversion relationship between the first location information and the second location information, the method further comprising:
responding to the interactive operation of a user in an 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 interactive operation corresponding to the second interactive position in the webpage file.
3. The interface display method of claim 2, further comprising:
acquiring 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 include a lower layer component covered by the target display component, the interface provided by the target display component includes a transparent area, and the method further includes, before the step of determining, based on the position conversion relationship, a second interaction position corresponding to the first interaction position in the graphical interface displayed with the first position information, the method further includes:
judging whether the first interaction position is located in the transparent area;
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 of claim 4, further comprising:
and if the first interaction position is located in the transparent area, handing the first interaction position to the lower-layer assembly for processing.
6. An interface display device, applied to an electronic device, the electronic device providing a target display interface and a plurality of display components providing information display on the target display interface, each display component having a unique identifier, the interface display device comprising:
the interface data module is used for obtaining graphical interface data corresponding to the webpage file according to webpage file rendering, and the graphical interface data is used for displaying a graphical interface according to first position information;
the component determining module is used for determining a target display component from the 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 second position information;
and the interface display module is used for displaying the graphical interface in the target display assembly according to the graphical interface data.
7. The interface display device according to claim 6, wherein the electronic apparatus is configured with a position conversion relationship between the first position information and the second position information, the interface display device further comprising:
the position acquisition module is used for responding to the interactive operation of a user in an 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 execution 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 the execution result of the interactive operation;
the interface display module is further configured to display a new graphical interface in the target display assembly according to the new graphical interface data.
9. An electronic device, comprising a memory and a processor, wherein the memory stores 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, characterized in that the storage medium stores a computer program which, when executed by a processor, implements the interface display method of any one of claims 1 to 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 true CN111913708A (en) | 2020-11-10 |
| CN111913708B 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 |
|---|---|
| CN111913708B (en) | 2024-02-27 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102077233B (en) | Extended user profile | |
| CN108351738B (en) | Display control method, terminal, information processing apparatus, and storage medium | |
| CN110109670B (en) | Method and device for processing view list data, electronic equipment and storage medium | |
| CN104951364A (en) | Android platform based language switching method and system | |
| CN109656445B (en) | Content processing method, device, terminal and storage medium | |
| CN111767554A (en) | Screen sharing method and device, storage medium and electronic equipment | |
| CN105824517A (en) | Implementation method and apparatus of desktop | |
| CN111124564A (en) | Method and device for displaying user interface | |
| CN112231617A (en) | Service call checking method and device, storage medium and electronic equipment | |
| US11221722B2 (en) | Information providing apparatus, information providing method, non-transitory recording medium recorded with information providing program, and non-transitory recording medium recorded with user terminal control program | |
| CN107562324B (en) | Data display control method and terminal | |
| CN111324398A (en) | Recent content processing method, device, terminal and storage medium | |
| CN110456999B (en) | Program creation method, program creation device, electronic equipment and computer readable storage medium | |
| CN114756228A (en) | Page processing method, device, equipment and storage medium | |
| CN112492399B (en) | Information display method and device and electronic equipment | |
| CN109976605B (en) | Class board content display method, device and storage medium | |
| CN113784194A (en) | Embedding method and device of video player | |
| CN111913708A (en) | Interface display method and device, storage medium and electronic equipment | |
| KR20140090394A (en) | Method and system for providing embedded service of application program on web page | |
| CN107027056B (en) | Desktop configuration method, server and client | |
| CN113988009A (en) | Information delivery area generation method, information delivery method, electronic device and storage medium | |
| CN109521924B (en) | Method and device for assisting user in selecting target application | |
| CN112052063A (en) | Watermark filling method, system, terminal and storage medium for application program | |
| JP2016126787A (en) | Display method for message with graphic and character | |
| JP2019061363A (en) | Access authentication system |
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 |