Page content display method

Abstract

The invention discloses a page content display method, and relates to the technical field of display devices and a first display device, the screen resolution of the first display device is a first screen resolution, the method comprises the following steps: receiving first page data sent by a second display device, the first page data is generated according to configuration data of the first page content and a second screen resolution of the second display device, the first page data is used for being rendered by the second display device and displaying a first interface, and the first interface comprises the first page content; scaling the first page data according to the first screen resolution to obtain second page data; according to the second page data, a second interface is rendered and displayed, and the second interface comprises the first page content. According to the method and the device, synchronous display of page contents among multiple devices can be realized, and display pictures of the multiple devices have relatively high resolution.

Description

Technical Field

[0001] The present application relates to the technical field of display devices, and in particular to a method for displaying page content. Background Art

[0002] At present, display devices (such as smart TVs, smart screens, LED displays, etc.) are widely used in exhibitions, press conferences and other display scenarios due to their high resolution, wide color gamut and other characteristics.

[0003] In real-world presentations, it's often necessary to synchronize content across multiple devices. For example, at a product launch, users can watch demonstration content on a small-screen display device and switch between presentations directly on the small-screen device. Simultaneously, the small-screen display device transmits its presentation content to the large-screen display device, enabling synchronized content display across multiple devices and providing a clearer viewing experience.

[0004] However, in the related art, synchronous content display is achieved between small-screen display devices and large-screen display devices through screen projection. This method is limited by hardware encoding and decoding capabilities and bandwidth limitations. The screen projection protocol only supports data transmission with smaller resolutions (such as 2K), but cannot support data transmission with larger resolutions (such as 4K), resulting in poor display clarity and poor display effects. Summary of the Invention

[0005] The present application provides a method and a display device for displaying page content, which can achieve synchronous display of page content among multiple devices, and the display screens of multiple devices all have high resolution.

[0006] In a first aspect, some embodiments of the present application provide a method for displaying page content, which is applied to a first display device, and the screen resolution of the first display device is a first screen resolution. The method includes: receiving first page data sent by a second display device, wherein the first page data is generated based on the configuration data of the first page content and the second screen resolution of the second display device, and the first page data is used for the second display device to render and display a first interface, and the first interface includes the first page content; according to the first screen resolution, the first page data is scaled to obtain second page data; according to the second page data, a second interface is rendered and displayed, and the second interface includes the first page content.

[0007] In a second aspect, some embodiments of the present application also provide a method for displaying page content, which is applied to a second display device, and the screen resolution of the second display device is a second screen resolution. The method includes: obtaining configuration data of the first page content; generating first page data based on the second screen resolution and the configuration data of the first page content; rendering and displaying a first interface based on the first page data, wherein the first interface includes the first page content; sending the first page data to the first display device so that the first display device scales the first page data according to the first screen resolution to obtain second page data, and rendering and displaying a second interface based on the second page data, wherein the second interface includes the first page content.

[0008] In a third aspect, some embodiments of the present application provide a computer-readable storage medium storing a computer program. When the computer program is executed by a processor, the processor executes the method for displaying page content described in the first aspect, or the method for displaying page content described in the second aspect.

[0009] In a fourth aspect, some embodiments of the present application provide a computer program product, which includes: a computer program code, which, when the computer program code runs on a display device, enables the display device to execute the method for displaying page content described in the first aspect, or enables the display device to execute the method for displaying page content described in the second aspect.

[0010] It can be seen from the above technical solution that when the page content is displayed synchronously between multiple devices, the first display device renders and displays the page content according to the page data sent by the second display device and the first screen resolution of the first display device. In addition, after the second display device generates corresponding page data based on the configuration data of the page content and the second screen resolution of the second display device, it renders and displays the page content based on the page data. In this way, the synchronous display of page content between multiple devices can be achieved. Furthermore, in an embodiment of the present application, the first display device only receives the page data of the page content to be displayed transmitted by the second display device. The first display device can render and display the page content in real time based on its own screen resolution and page data, so that the display screen of the first display device has a higher resolution. In addition, when the page content to be displayed has not changed, there is no need to transmit other data between multiple devices, avoiding the real-time transmission of projection data frames between multiple devices. In this way, it will not be restricted by the projection protocol and bandwidth, ensuring that the display screens of multiple devices have a higher resolution, achieving the effect of synchronously displaying 4K pictures on multiple devices, and improving the page display effect. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0012] Figure 1 A schematic diagram of an application scenario of a method for displaying page content provided in an embodiment of the present application;

[0013] Figure 2 A hardware configuration block diagram of a display device provided in an embodiment of the present application;

[0014] Figure 3 A schematic diagram of a software system architecture of a display device provided in an embodiment of the present application;

[0015] Figure 4 A schematic diagram of an honor display page provided in an embodiment of the present application;

[0016] Figure 5 A schematic diagram of a display page for Honor 1 provided in an embodiment of the present application;

[0017] Figure 6 A schematic diagram of an interaction layer provided in an embodiment of the present application;

[0018] Figure 7 A schematic diagram of a focused shadow area of ​​an interactive layer provided in an embodiment of the present application;

[0019] Figure 8 One of the flow charts of the method for displaying page content provided in an embodiment of the present application;

[0020] Figure 9 The second flowchart of the method for displaying page content provided in the embodiment of the present application;

[0021] Figure 10 The third flowchart of the method for displaying page content provided in the embodiment of the present application;

[0022] Figure 11 Flowchart 4 of the method for displaying page content provided in an embodiment of the present application;

[0023] Figure 12 Flowchart 5 of the method for displaying page content provided in an embodiment of the present application;

[0024] Figure 13 Flowchart 6 of the method for displaying page content provided in an embodiment of the present application;

[0025] Figure 14 Flowchart 7 of the method for displaying page content provided in an embodiment of the present application;

[0026] Figure 15 FIG8 is a flowchart of a method for displaying page content provided in an embodiment of the present application. DETAILED DESCRIPTION

[0027] The following embodiments are described in detail, with examples illustrated in the accompanying drawings. When the following description refers to the drawings, identical numbers in different figures represent identical or similar elements unless otherwise indicated. The embodiments described in the following embodiments are not intended to represent all possible implementations consistent with the present application. They are merely examples of systems and methods consistent with certain aspects of the present application, as detailed in the claims.

[0028] It should be noted that the brief descriptions of terms in this application are only for the purpose of facilitating the understanding of the embodiments described below, and are not intended to limit the embodiments of this application. Unless otherwise specified, these terms should be understood according to their ordinary and usual meanings.

[0029] In the specification and claims of this application and the accompanying drawings, the terms "first," "second," "third," etc. are used to distinguish similar or similar objects or entities, and are not necessarily intended to limit a particular order or sequence, unless otherwise noted. It should be understood that the terms used in this manner are interchangeable under appropriate circumstances.

[0030] The terms "comprise," "include," and "have," and any variations thereof, are intended to cover but not exclude inclusion; for example, a product or device comprising a list of components is not necessarily limited to all the components expressly listed but may include other components not expressly listed or inherent to such product or device.

[0031] The term "module" refers to any known or later developed hardware, software, firmware, artificial intelligence, fuzzy logic, or combination of hardware and / or software code that is capable of performing the functionality associated with that element.

[0032] In order to better understand the embodiments of the present application, the terms or concepts that may be involved in the embodiments of the present application are explained below.

[0033] 1. Screen resolution

[0034] Screen resolution (or simply resolution) refers to the total number of pixels displayed on the screen, usually expressed as horizontal pixels × vertical pixels. Common resolutions include 2K (2560×1440) and 4K (3840×2160).

[0035] 2. Screen pixel density

[0036] Screen pixel density (dots per inch, DPI) refers to the number of pixels per inch on a display device.

[0037] The clarity of a display device is determined by both its screen resolution and pixel density. It's understandable that, at the same resolution, the higher the pixel density, the smaller the individual pixels (the smaller the screen size), resulting in a more refined display. The lower the pixel density, the larger the individual pixels (the larger the screen size), resulting in a less refined display. Furthermore, at the same screen size, the higher the resolution, the higher the pixel density, and the higher the clarity. The lower the resolution, the lower the pixel density, and the lower the clarity.

[0038] 3. SurfaceView and interactive view layer

[0039] In the Android system, SurfaceView is a view component used to efficiently handle scenarios that require frequent updates or high-performance drawing, such as video playback and game rendering.

[0040] The on screen display (OSD or interactive layer) is the user interface elements superimposed on the video frame (i.e., SurfaceView), such as buttons, menus, subtitles, etc. The interactive layer can respond to input events such as touch and remote control buttons.

[0041] When playing video data, the display device draws the video frame to SurfaceView (i.e. as the underlying screen), and at the same time creates an interactive layer through the view system to synthesize the complete display content.

[0042] The above section describes the terms or concepts involved in the embodiments of the present application. The following describes the technical solutions of the embodiments of the present application.

[0043] This interface display method is applicable to scenarios where content is displayed synchronously between two display devices. Both display devices can be devices with image display and data processing capabilities. For example, display devices include, but are not limited to, smart TVs, mobile terminals, computers, monitors, advertising screens, wearable devices, virtual reality devices, augmented reality devices, and the like.

[0044] For example, Figure 1 Schematic diagram of an application scenario of a method for displaying page content provided in an embodiment of the present application. Figure 1As shown, two display devices are respectively smart TV 1 (such as a 32-inch TV) and smart TV 2 (such as a 100-inch TV) as an example. When displaying a product, the demonstration content is played on smart TV 1, and based on the communication connection between smart TV 1 and smart TV 2, smart TV 1 projects the demonstration content it displays on smart TV 2 (that is, smart TV 1 sends projection data to smart TV 2), so as to achieve synchronous content display on smart TV 1 and smart TV 2.

[0045] Furthermore, during the display process, the user can operate on Smart TV 1 to switch the content to be displayed. Then, Smart TV 1 sends the screen projection data corresponding to the switched content to Smart TV 2, so that Smart TV 2 displays the switched content, thereby making the content displayed by Smart TV 1 and Smart TV 2 consistent, thereby providing a clearer display effect.

[0046] In other words, screen projection is often used to synchronize content between multiple devices. However, this method is limited by hardware encoding and decoding capabilities and bandwidth constraints. The screen projection protocol only supports data transmission at lower resolutions (such as 2K resolution) and cannot support data transmission at higher resolutions (such as 4K resolution). This results in poor display clarity and poor display quality.

[0047] In view of this, an embodiment of the present application provides a method for displaying page content. In a scenario where multiple display devices synchronously display page content, one of the display devices can serve as a source device (i.e., the Source end), and the other display devices can serve as target devices (i.e., the Target end). The source device can generate page data corresponding to the page content based on the configuration data of the page content and the device information of the source device (such as the screen resolution of the source device), and display the page content based on the page data. The source device can also transmit the generated page data to the target device, and the target device displays the page content based on the received page data and the device information of the target device (such as the screen resolution of the target device). In this way, when the page content is synchronously displayed between multiple devices, the source device generates corresponding page data based on the configuration data of the page content and the screen resolution of the source device, and renders and displays the page content based on the page data. In addition, the source device can send the generated static page data to the target device, and the target device renders and displays the page content based on the static page data and the screen resolution of the target device. In this way, the synchronous display of page content between multiple devices can be achieved.

[0048] The structure of the display device provided in the embodiment of the present application is described below.

[0049] For example, Figure 2This is a hardware configuration block diagram of a display device provided in an embodiment of the present application. The display device may be, for example, a smart TV, a smart screen, a smoke machine screen, an LED display, etc. Figure 2 As shown, the display device 100 may include at least one of a tuner and demodulator 110, a communicator (also referred to as a communication device) 120, a detector 130, an external device interface 140, a controller 150, a display 160, an audio output interface 170, a memory, a power supply, and a user interface 180.

[0050] In some embodiments, the controller 150 may include at least one of a central processing unit (CPU), a video processor, an audio processor, a graphics processor, and a power processor, and first to nth interfaces for input / output. The controller 150 controls the operation of the display device and responds to user operations through various software control programs stored in a memory. The controller 150 controls the overall operation of the display device 100.

[0051] In some embodiments, the display 160 includes a display component for displaying images and a driver component for driving image display. The display 160 is configured to receive image signals output from the controller 150 for display. For example, the display 160 can be used to display video content, image content, menu control interface components, and user control UI interfaces.

[0052] Exemplarily, the display 160 may be a liquid crystal display, an OLED display, a projection display, or a projection device and a projection screen.

[0053] In some embodiments, the communicator 120 is a component for communicating with external devices or servers using various communication protocols. The display device 100 may be provided with multiple communicators 120 depending on the supported communication methods. For example, if the display device 100 supports wireless network communication, the display device 100 may be provided with a communicator 120 that includes WiFi functionality. If the display device 100 supports Bluetooth communication, the display device 100 may also be provided with a communicator 120 that includes Bluetooth functionality.

[0054] The communicator 120 can establish a communication connection between the display device 100 and an external device or server via a wireless or wired connection. A wired connection can connect the display device 100 to an external device via a data cable, an interface, or other components. A wireless connection can connect the display device 100 to an external device via a wireless signal or wireless network. The display device 100 can establish a connection with an external device directly or indirectly through a gateway, router, or connection device.

[0055] In some embodiments, detector 130 is used to collect signals from the external environment or external interactions. For example, detector 130 may include a light receiver, such as a sensor for collecting ambient light intensity; or an image collector, such as a camera, for collecting external environmental scenes, user attributes, or user interaction gestures; or a sound collector, such as a microphone, for receiving external sounds.

[0056] In some embodiments, the external device interface 140 may include, but is not limited to, any one or more of the following: a high-definition multimedia interface (HDMI), an analog or digital high-definition component input interface (component), a composite video input interface (CVBS), a USB input interface (USB), an RGB port, etc. It may also be a composite input / output interface formed by multiple of the above interfaces.

[0057] In some embodiments, the controller 150 and the tuner 110 may be located in different separate devices, that is, the tuner 110 may also be located in an external device of the main device where the controller 150 is located, such as an external set-top box.

[0058] In some embodiments, the display device 100 may further include a sound output device, which includes an audio output interface 170 and a speaker.

[0059] In some embodiments, the user may input a user command through a graphical user interface (GUI) displayed on the display 160 , and the user interface receives the user input command through the graphical user interface (GUI).

[0060] In some embodiments, the user interface 180 may be used to receive instructions input from a user, and may also be used to receive control signals from a control device (eg, an infrared remote controller, etc.).

[0061] In some embodiments, when implementing the method for displaying page content provided by the embodiments of the present application, the operations performed by the display device 100 can be implemented by the controller 150.

[0062] Figure 3 A schematic diagram of the software system architecture of a display device provided in an embodiment of the present application.

[0063] For example, Figure 3 As shown, the software system at least includes: an application layer (also referred to as the application layer), an application framework layer (also referred to as the framework layer), a system runtime layer and a kernel layer (kernel).

[0064] The application layer is used to deploy TV-related functions. The application program layer provides services and interfaces for applications, enabling the display device 100 to run applications and interact with users based on these applications. In some embodiments, the application program layer runs at least one application. These applications can be native operating system applications, such as user interface applications, TV settings applications, and TV services, or applications developed by third-party developers. In specific implementations, the application packages in the application program layer are not limited to the examples above.

[0065] For example, Figure 3 As shown, the application layer may include a display application (which may be referred to as a display application). The display application is used to display page content. For example, the display application is a "Wall of Honor" application. When implementing the method for displaying page content provided in the embodiment of the present application, the operations performed by the display device 100 may be implemented by the display application.

[0066] The framework layer provides applications with an application programming interface (API) and programming framework. The application framework layer includes predefined functions. The application framework layer acts as a processing center, determining the actions taken by applications in the application layer. Through the API, applications can access system resources and services during execution.

[0067] like Figure 3 As shown, the framework layer may include a view system, SurfaceView, content providers, managers, etc. Among them, the view system can design and implement the interface and interaction of the application, and the view system includes lists, grids, text boxes, buttons, etc.

[0068] SurfaceView (also called video layer) is a view component used to efficiently handle scenes that require frequent updates or high-performance drawing, such as video playback and game rendering.

[0069] The manager includes at least one of the following modules: an activity manager, which interacts with all running activities in the system; a location manager, which provides system services or applications with access to the system's location services; a package manager, which retrieves various information related to application packages currently installed on the device; a notification manager, which controls the display and clearing of notification messages; and a window manager, which manages icons, windows, toolbars, wallpapers, and desktop widgets on the user interface.

[0070] In some embodiments, the activity manager is used to manage the lifecycle of each application and common navigation back functions, such as controlling application exit, opening, and back. The window manager is used to manage all window programs, such as obtaining the display screen size, determining whether there is a status bar, locking the screen, taking screenshots, and controlling changes in display windows, such as shrinking, shaking, or distorting the display window.

[0071] like Figure 3 As shown, in some embodiments, the system runtime layer (i.e., the system library layer) can provide support for the framework layer. When the framework layer is used, the operating system will run the instruction library contained in the system runtime layer, such as the C / C++ instruction library, to implement the functions to be implemented by the framework layer.

[0072] like Figure 3 As shown, in some embodiments, the kernel layer is a functional layer between the hardware and software of the display device 100. The kernel layer can implement functions such as hardware abstraction, multi-tasking, and memory management. Figure 3 As shown, the kernel layer can be configured with hardware drivers, and the drivers included in the kernel layer can be at least one of the following drivers: audio driver, display driver, Bluetooth driver, camera driver, WIFI driver, USB driver, HDMI driver, sensor driver (such as fingerprint sensor, temperature sensor, pressure sensor, etc.), and power driver, etc.

[0073] It should be noted that the above example is only a simple division of the operating system functions and does not limit the specific operating system form of the display device 100 in the embodiment of the present application. Depending on factors such as the function of the display device and the type of operating system, the number of levels and specific level types contained in the operating system may be expressed in other forms.

[0074] The following examples of this application will be Figure 2 and Figure 3Taking the display device of the shown structure as an example, the method for displaying page content provided in the embodiment of the present application is specifically explained in combination with the accompanying drawings and application scenarios.

[0075] The embodiment of the present application is applied to the synchronous display of page content between multiple devices. The following is a schematic description of the page content.

[0076] The page content (abbreviated as page, i.e., user interface) may include a page background image and interactive elements (i.e., items) located on the page background image. For example, the page content may include one interactive element or multiple interactive elements. An interactive element may be an element in the user interface that can trigger an action.

[0077] For example, Figure 4 As shown, the page background image is the honor display page, which includes 10 interactive elements, such as interactive element 1 corresponding to Honor 1, interactive element 2 corresponding to Honor 2, interactive element 3 corresponding to Honor 3, interactive element 4 corresponding to Honor 4, interactive element 5 corresponding to Honor 5, interactive element 6 corresponding to Honor 6, interactive element 7 corresponding to Honor 7, interactive element 8 corresponding to Honor 8, interactive element 9 corresponding to Honor 9, and interactive element 10 corresponding to Honor 10.

[0078] Of course, in some examples, the page content may not include interactive elements. Figure 5 As shown, the page background image is the display page of Honor 1, which does not include any interactive elements.

[0079] When displaying page content, the display device renders the page content through SurfaceView and adds an interaction layer and binds corresponding interaction events to each interactive element on the upper layer of the SurfaceView view. In this way, when the display device displays page content, if an interaction event is triggered for an interactive element in the page content, the display device renders and displays the jump page corresponding to the interactive element, that is, the display device switches the currently displayed page to the jump page corresponding to the interactive element.

[0080] It should be noted that for each interactive element, one or more interactive events can be bound, such as the Hovered event, Focused event, Clicked event, etc.

[0081] For example, Figure 6As shown, the interaction layer may include view area 1 (i.e., the first view area or the third view area hereinafter) and view area 2 (i.e., the second view area or the fourth view area hereinafter). Among them, view area 1 (also referred to as the content view area) matches the interactive element in the SurfaceView view and is used to receive interaction events for the interactive element. Optionally, view area 1 is a transparent area to avoid blocking the page content. View area 2 surrounds view area 1, and view area 2 is used for visual enhancement. Optionally, view area 2 is a non-transparent area, such as a shadow area, a highlight area, etc.

[0082] It is understandable that when the page content is displayed, the view area 2 in the interactive layer is hidden. When an interactive event (such as a Hovered event or a Focused event) occurs for an interactive element, the view area 2 is displayed to prompt that the operation focus is on the interactive element.

[0083] For example, take the interactive element 1 corresponding to the honor 1 in the honor display page as an example. Figure 4 As shown, when the honor display page is displayed, the view area 2 in the interactive layer of the interactive element 1 is hidden. When the operation focus is on the interactive element 1 (ie, the Hovered event or the Focused event for the interactive element 1 is triggered), the Figure 7 The shaded area shown is the view area 2 in the interactive layer displaying the interactive element 1, to indicate that the operation focus is on the interactive element 1. When a click operation is received on the interactive element 1 (a Clicked event for the interactive element 1 is triggered), in response to the click operation on the interactive element 1, the smart TV displays Figure 5 The display page of Honor 1 is shown.

[0084] The above is a schematic description of the page content. The following is a schematic description of the method for displaying the page content provided by this application.

[0085] An embodiment of the present application provides a method for displaying page content. In a scenario where multiple display devices synchronously display page content, one of the display devices can serve as a source device (i.e., the Source end), and the other display devices can serve as target devices (i.e., the Target end). The source device can generate page data corresponding to the page content based on the configuration data of the page content and the device information of the source device (such as the screen resolution of the source device), and display the page content based on the page data. The source device can also transmit the generated page data to the target device, and the target device displays the page content based on the received page data and the device information of the target device (such as the screen resolution of the target device). In this way, when the page content is synchronously displayed between multiple devices, the source device generates corresponding page data based on the configuration data of the page content and the screen resolution of the source device, and renders and displays the page content based on the page data. In addition, the source device can send the generated static page data to the target device, and the target device renders and displays the page content based on the static page data and the screen resolution of the target device. In this way, the synchronous display of page content between multiple devices can be achieved.

[0086] Furthermore, in the embodiments of the present application, the source device only transmits the page data of the page content to be displayed to the target device. The target device can render and display the page content in real time based on its own screen resolution and page data, so that the display screen of the target device has a higher resolution. In addition, when the page content to be displayed has not changed, no other data needs to be transmitted between multiple devices, avoiding the real-time transmission of screen projection data frames between multiple devices. This will not be limited by the screen projection protocol and bandwidth, ensuring that the display screens of multiple devices have a higher resolution, achieving the effect of multiple devices simultaneously displaying 4K images, and improving the page display effect.

[0087] The following describes in detail the method for displaying page content provided in the embodiment of the present application, taking the source device (i.e., the second display device) as the execution entity.

[0088] Figure 8 A flow chart of a method for displaying page content provided in an embodiment of the present application. Figure 8 As shown, the method may include the following steps:

[0089] S101: Obtain configuration data of the first page content.

[0090] Specifically, the first application on the second display device obtains the configuration data of the first page content (i.e., page configuration information 1 of page 1 below). The second display device is the source device. The first application (also referred to as the source application, i.e., application 1 below) is a display application used to display the page content. For example, the first application is a "Wall of Honor" application.

[0091] The first page content is the page content to be rendered and displayed. For example, the first page content is the application interface of the first application (such as the home page). Taking the first application as the "Honor Wall" application as an example, the first page content is Figure 4 The configuration data of the first page content is the configuration data (ie, configuration file) of the honor display page.

[0092] As described above regarding page content, the page content includes a page background image and interactive elements located on the page background image. In this regard, the configuration data of the first page content may include configuration data of the first background image and configuration data of each interactive element.

[0093] The configuration data of the first background image includes background image information and image size information. The background image information is used to identify the first background image. Exemplarily, the background image information can be an image name of the first background image, such as a base background image (i.e., base_bg). After obtaining the configuration data of the first background image, the first background image can be obtained based on the background image information.

[0094] The image size information includes image width information (also referred to as a base width, ie, base_width) and image height information (also referred to as a base height, ie, base_height) of the first background image.

[0095] The configuration data of the interactive element includes element information of the interactive element, element position information of the interactive element, and jump page information corresponding to the interactive element.

[0096] The element information is used to identify the interactive element. The element image of the interactive element can be obtained through the element information of the interactive element. For example, the element information can be the name of the element image of the interactive element. For example, if the interactive element is a control, the element image of the interactive element can be, for example, the control icon.

[0097] The element position information of the interactive element is used to indicate the position of the interactive element in the first background image, that is, the position of the element image of the interactive element in the first background image. Exemplarily, the element position information may include position information (i.e., coordinate information) of the four corner points of the element image of the interactive element, such as the coordinate information of the upper left corner, the coordinate information of the upper right corner, the coordinate information of the lower left corner, and the coordinate information of the lower right corner.

[0098] The jump page information is used to indicate the page content to be jumped to after the interactive element is triggered. Exemplarily, the jump page information can be the address information of the configuration data of the jump page content corresponding to the interactive element.

[0099] For example, Figure 4Taking the interactive element 1 corresponding to Honor 1 in the honor display page shown as an example, the configuration data of the interactive element 1 includes the element image of the interactive element 1 (such as the display picture of Honor 1), the element position information of the interactive element 1 (such as the coordinate information of the four corner points of the display picture of Honor 1), and the jump page information corresponding to the interactive element 1 is the address information of the configuration data of the display page of Honor 1.

[0100] It is understood that by triggering the interactive element, the display device can display the corresponding jump page. In other words, the interactive element serves as the entrance to the corresponding jump page. Therefore, the element image of the interactive element can also be called the entry image (i.e., source_img), the element position information can also be called the entry image position (i.e., source_pos), and the jump page information can also be called the entry jump target page (i.e., source_target).

[0101] It should be noted that the image resolution of the background image corresponding to the page content (such as the first background image) and the element image of the interactive element in the page content are both greater than or equal to the preset resolution, which can be, for example, 4K resolution.

[0102] In some examples, the configuration data of the page content can be represented by JSON data. For example, taking the first page content including a first background image and an interactive element as an example, the JSON data corresponding to the first page content is shown in Table 1 below.

[0103] Table 1 is the JSON data corresponding to the first page content

[0104] Level 1 Level 2 meaning base_bg \ First background image (i.e., reference background image) base_width \ Image width information (i.e. base width) base_height \ Image height information (i.e. reference height) \ source_img Element image (i.e. entry image) \ source_pos Element location information (i.e. entry image location) \ source_target Jump page information (i.e. the entry jump target page)

[0105] S102: Generate first page data according to the second screen resolution and configuration data of the first page content.

[0106] Specifically, the first application generates the first page data according to the second screen resolution and the configuration data of the first page content.

[0107] The second screen resolution (hereinafter referred to as screen resolution 2) is the screen resolution of the second display device. The second screen resolution is greater than or equal to the preset resolution. The preset resolution may be, for example, 4K resolution. In other words, the source device has a higher resolution.

[0108] For example, the second screen resolution can be expressed as horizontal pixel count × vertical pixel count. In this regard, the second screen resolution includes a second screen width (i.e., S_ScreenW) and a second screen height (i.e., S_ScreenH). For example, if the second screen resolution is 4K, the second screen width is 3840 pixels and the second screen height is 2160 pixels.

[0109] During specific implementation, the first application may read the second screen resolution from the entire device configuration file of the second display device.

[0110] The page data is used for rendering the page content by the display device. Exemplarily, the page data can be bitmap data. It is understood that the first page data is static page data generated based on the second screen resolution and the configuration data of the first page content, and is used for rendering the first page content by the second display device.

[0111] In some examples, the configuration data for the first page content includes configuration data for a first background image and configuration data for each interactive element. The configuration data for the first background image includes background image information and image size information. The image size information includes image width information and image height information for the first background image. The configuration data for the interactive elements includes element information and element position information for the interactive elements. In this regard, the process of generating the first page data based on the second screen resolution and the configuration data for the first page content includes the following steps:

[0112] S1021. Obtain a first background image according to background image information.

[0113] Specifically, background image information (such as the image name of the first background image) is read from the configuration data of the first page content, and the first background image is acquired according to the image name of the first background image.

[0114] S1022: Create a page background image 1 according to the second screen resolution and the first background image.

[0115] Specifically, the first application creates a canvas of the same size according to the second screen width (ie, S_ScreenW) and the second screen height (ie, S_ScreenH); the first application fills the first background image onto the canvas with the second screen width and the second screen height, thereby generating page background image 1.

[0116] S1023. Determine a displacement weight parameter 1 according to the second screen resolution and image size information.

[0117] Among them, the displacement weighting parameter 1 may include a width weighting parameter 1 and a height weighting parameter 1. The width weighting parameter 1 is determined based on the second screen width and the image width information of the first background image. Specifically, the ratio of the second screen width to the image width information of the first background image is used as the width weighting parameter 1 (i.e., Rat_W). The height weighting parameter 1 is determined based on the second screen height and the image height information of the first background image. Specifically, the ratio of the second screen height to the image height information of the first background image is used as the height weighting parameter 1 (i.e., Rat_H).

[0118] S1024. For each interactive element in the first page content, adjust the element position information of the interactive element according to the displacement weight parameter 1 to obtain first position information corresponding to the interactive element.

[0119] Among them, the first position information (i.e., display position information 1) is used to indicate the position of the interactive element in the page background image 1. The first position information includes a horizontal display position 1 and a vertical display position 1. Exemplarily, taking the position information (x, y) of a corner point of the element image of the interactive element as an example, the horizontal display position 1 (i.e., x*Rat_W) is determined according to the width ratio parameter 1 and the horizontal position 1 (i.e., the coordinate value x of the horizontal coordinate). The vertical display position 1 (i.e., y*Rat_H) is determined according to the height ratio parameter 1 and the vertical position 1 (i.e., the coordinate value y of the vertical coordinate), and the first position information (x*Rat_W, y*Rat_H) is obtained.

[0120] In some examples, after determining the first position information corresponding to each interactive element in the first page content, the first position information corresponding to each interactive element is stored.

[0121] S1025 . Draw various interactive elements in the page background image 1 according to the displayed first position information, and obtain first page data corresponding to the first page content.

[0122] Specifically, for each interactive element, the element image of the interactive element is obtained based on the element information of the interactive element. According to the first position information of the interactive element, the element image of the interactive element is drawn on the page background image 1, that is, the interactive element is drawn on the canvas. After all interactive elements are drawn, the canvas is converted into bitmap data to obtain the first page data (i.e., bitmap data 1 of static page 1).

[0123] S103: Render and display a first interface according to the first page data, where the first interface includes the first page content.

[0124] Taking the first page data as bitmap data 1 of static page 1 as an example, the bitmap data 1 is drawn to SurfaceView, that is, the second display device displays the first interface, and the first interface includes the first page content.

[0125] S104. Send the first page data to the first display device, so that the first display device scales the first page data according to the first screen resolution to obtain second page data, and renders and displays a second interface based on the second page data, where the second interface includes the first page content.

[0126] In an embodiment of the present application, after generating the first page data, the second display device sends the first page data to the first display device, so that the first display device scales the first page data according to the first screen resolution to obtain the second page data, and renders and displays the second interface based on the second page data, where the second interface includes the first page content. In this way, the first display device does not need to generate the page data again based on the original configuration data, which can improve the data processing effect and avoid display delays.

[0127] In some examples, when rendering and displaying the first interface based on the first page data, page presentation information is sent to the first display device to notify the first display device to render and display the first page content. This ensures that the first and second display devices display the page content synchronously, avoiding delays on the first display device.

[0128] In some examples, after generating the first page data according to the second screen resolution and the configuration data of the first page content, the method further includes: sending first position information corresponding to each interactive element in the first page content to the first display device.

[0129] In some examples, before sending the first page data and the first position information corresponding to each interactive element to the first display device, the method may further include: sending a connection request to the first display device to establish a communication connection with the first display device.

[0130] Exemplarily, after the first application in the second display device (source end) is started, the second display device scans the first display device in the same network. After scanning the first display device, the first application sends a connection request to the second application in the first display device (target end), and the second application establishes a communication connection with the first application, that is, the second display device establishes a communication connection with the first display device. It should be noted that S103, S104 and the transmission process of the first position information corresponding to the interactive element can be executed in sequence, such as executing S103 first, then executing S104, and then executing the process of transmitting the first position information corresponding to the interactive element; S103, S104 and the transmission process of the first position information corresponding to the interactive element can also be executed simultaneously and sequentially. In the embodiment of the present application, the execution order of S103, S104 and the transmission process of the first position information corresponding to the interactive element is not limited.

[0131] In some embodiments, after rendering and displaying the first interface according to the first page data, the second display device adds a second interaction layer for each interactive element according to the first position information of each interactive element, and adds an interaction event to the second interaction layer.

[0132] For example, Figure 9 As shown, the process of adding the second interactive layer to each interactive element by the second display device according to the first position information of each interactive element includes the following steps:

[0133] S201: Determine a second display resolution according to a second screen density of a second display device, where the second display resolution is a reference resolution when the second display device renders an interactive layer.

[0134] The second screen density (ie, screen pixel density 2 hereinafter) refers to the number of pixels per inch on the second display device.

[0135] For example, if the second screen density is less than or equal to the preset screen density, the first preset display resolution is determined as the second display resolution; the preset screen density may be, for example, 320 PPI; and the first preset display resolution is 2K. If the second screen density is greater than the preset screen density, the second preset display resolution is determined as the second display resolution; and the second preset display resolution is 4K.

[0136] S202: Determine fourth position information based on the second screen resolution and the first position information;

[0137] In this embodiment of the present application, for each interactive element, a second interactive layer is added above the interactive element in the first interface. The fourth position information is used to indicate the position of the second interactive layer in the first interface. Exemplarily, the fourth position information may include interactive layer coordinates corresponding to each corner point of the second interactive layer. The interactive layer coordinates may include horizontal and vertical coordinates of the interactive layer.

[0138] Exemplarily, if the second display resolution matches the second screen resolution, the first position information is determined as the fourth position information. If the second display resolution does not match the second screen resolution, a second offset parameter is determined based on the second display resolution and the second screen resolution, and the first position information is adjusted based on the second offset parameter to obtain the fourth position information.

[0139] The second display resolution includes a second display width and a second display height. When determining the second offset parameter, the ratio of the second display width to the second screen width can be used as the second offset parameter. Of course, the ratio of the second display height to the second screen height can also be used as the second offset parameter.

[0140] Taking the second screen resolution as 4K as an example, if the second display resolution is 2K, the second display resolution does not match the second screen resolution, and the ratio of the second display width to the second screen width is determined as the second offset parameter (i.e., POS_R). If the second display resolution is 4K, the second display resolution matches the second screen resolution, and the ratio of the second display width to the second screen width is determined as the second offset parameter (i.e., POS_R). In this case, the second offset parameter is 1.

[0141] Exemplarily, the second interaction layer includes a third view area and a fourth view area. The third view area (also referred to as the content view area) matches the interactive element in the SurfaceView view and is used to receive interaction events for the interactive element. The fourth view area surrounds the third view area, and the fourth view area is used for visual enhancement. In this regard, the fourth position information is determined based on the second screen resolution and the first position information, including: determining the fourth position information based on the second screen resolution, the first position information and the size information (such as width information) of the fourth view area.

[0142] Taking the coordinates of the upper left corner of the second interactive layer as an example, after determining the second offset parameter, according to the second offset parameter, the horizontal display position 1 (ie, x*Rat_W) and the size information of the fourth view area (ie, d item ), determine the horizontal coordinates of the interaction layer, such as the horizontal coordinates of the interaction layer are POS_R*x*Rat_W-d itemAccording to the second offset parameter, the vertical display position 1 (ie y*Rat_H) and the size information of the fourth view area (ie d item ), determine the longitudinal coordinate of the interaction layer, such as the longitudinal coordinate of the interaction layer is POS_R*y*Rat_H-d item .

[0143] Taking the interactive layer coordinates corresponding to the lower left corner of the second interactive layer as an example, after determining the second offset parameter, according to the second offset parameter, the horizontal display position 1 (ie, x*Rat_W) and the size information of the fourth view area (ie, d item ), determine the horizontal coordinates of the interaction layer, such as the horizontal coordinates of the interaction layer are POS_R*x*Rat_W-d item According to the second offset parameter, the vertical display position 1 (ie y*Rat_H) and the size information of the fourth view area (ie d item ), determine the longitudinal coordinate of the interaction layer, such as the longitudinal coordinate of the interaction layer is POS_R*y*Rat_H+d item .

[0144] Taking the coordinates of the upper right corner of the second interactive layer as an example, after determining the second offset parameter, according to the second offset parameter, the horizontal display position 1 (ie, x*Rat_W) and the size information of the fourth view area (ie, d item ), determine the horizontal coordinates of the interaction layer, such as the horizontal coordinates of the interaction layer are POS_R*x*Rat_W+d item According to the second offset parameter, the vertical display position 1 (ie y*Rat_H) and the size information of the fourth view area (ie d item ), determine the longitudinal coordinate of the interaction layer, such as the longitudinal coordinate of the interaction layer is POS_R*y*Rat_H-d item .

[0145] Taking the interactive layer coordinates corresponding to the lower right corner of the second interactive layer as an example, after determining the second offset parameter, according to the second offset parameter, the horizontal display position 1 (ie, x*Rat_W) and the size information of the fourth view area (ie, d item ), determine the horizontal coordinates of the interaction layer, such as the horizontal coordinates of the interaction layer are POS_R*x*Rat_W+d item According to the second offset parameter, the vertical display position 1 (ie y*Rat_H) and the size information of the fourth view area (ie d item ), determine the longitudinal coordinate of the interaction layer, such as the longitudinal coordinate of the interaction layer is POS_R*y*Rat_H+d item .

[0146] S203: Add a second interaction layer to the interactive element based on the fourth position information.

[0147] In some examples, the first application obtains the number of interactive elements in page background image 1. If the number of interactive elements is 0, the upper layer of SurfaceView is removed, that is, the interactive layer is removed. If the number of interactive elements is greater than 0, a second interactive layer is added for each interactive element (that is, the above S201 to S203 are executed). It can be understood that the second interactive layer is located above the layer where page background image 1 is located.

[0148] Optionally, the third view area is transparent to avoid obstructing the page content. The fourth view area is a non-transparent area, such as a shadow area or a highlight area. When adding a second interactive layer to the interactive element based on the fourth position information, the third view area is displayed in the area where the interactive element is located based on the fourth position information, and the fourth view area is hidden.

[0149] In some examples, after a corresponding second interaction layer is superimposed on each interactive element in the first interface, an interaction event may be added to each interaction layer, that is, an interaction event may be added to each interactive element in the first interface.

[0150] Exemplarily, for each interactive element in the first interface, a second interactive event and a third interactive event are added for each interactive element. The second interactive event is used to monitor whether the operation focus is on the interactive element. The second interactive event can be a Hovered event or a Focused event. The third interactive event is used to monitor whether the interactive element is triggered. The third interactive event can be a Click event (i.e., a Clicked event).

[0151] Specifically, when adding the second interaction event for each interactive element in the first interface, the interaction mode of the second display device can be determined; according to the interaction mode, the second interaction event is determined, and the second interaction event is bound to the second interaction layer.

[0152] For example, if the second display device uses touch interaction (i.e., touch mode), the Focused event and Click event are bound to the second interaction layer. If the second display device uses remote control interaction (i.e., RC mode), the Hovered event and Clicked event are bound to the second interaction layer.

[0153] Among them, the interaction mode of the second display device can be determined according to the product type information of the second display device. For example, after the second display device is started, the whole machine configuration file of the second display device is loaded into the memory. After the first application is started, the whole machine configuration file of the second display device can be obtained from the memory. The whole machine configuration file includes product type information. For example, the product type information is ro.build.characteristics, indicating that the second display device is a range hood screen device, and its interaction mode is a touch interaction mode. For example, the product type information is ro.his.product_type, indicating that the second display device is a smart screen device, and its interaction mode is a touch interaction mode.

[0154] In some examples, after adding an interaction event to each interactive element in the first interface, if an interaction event for the interactive element is detected, the corresponding instruction is executed in response to the interaction event, and event information is sent to the first display device. The event information includes the event type, event status, and index information of the interactive element corresponding to the interaction event. The event type is the type of the detected interaction event. The event status is the status value of the detected interaction event, such as true or false.

[0155] In an embodiment of the present application, the second display device can add an interactive layer and an interactive event to each interactive element in the display screen, and the first display device can also add an interactive layer and an interactive event to each interactive element in the display screen. In this way, the second display device can directly respond to the user's operation and dynamically update the display page. In addition, the second display device can convert the operation time in response to the user's operation and notify the first display device, so that the first display device also synchronously updates the display page to achieve synchronous screen display between multiple devices.

[0156] In some examples, after adding an interaction event for each interactive element in the first interface, if a second interaction event for the interactive element is monitored, the fourth view area is displayed.

[0157] For example, taking the case where the second interaction event is a Focused event, in response to the Focused event for an interactive element, the fourth view area of ​​the second interaction layer corresponding to the interactive element is displayed, that is, the focus shadow area around the interactive element is displayed. Taking the case where the second interaction event is a Hovered event, in response to the Hovered event for an interactive element, the fourth view area of ​​the second interaction layer corresponding to the interactive element is displayed, that is, the focus shadow area around the interactive element is displayed.

[0158] After monitoring a second interaction event for an interactive element, the state value of the second interaction event is set to a first preset value, and first event information is sent to a first display device, so that the first display device displays a second view area of ​​the second interaction layer of the interactive element in response to the first event information. The first event information includes an event type of the second interaction event, an event state corresponding to the second interaction event, and index information of the interactive element.

[0159] For example, taking the second interaction event as the Focused event as an example, in response to the Focused event for the interactive element, the status value of the Focused event is set to true, and the first event information is sent to the first display device. The first event information includes the event type of the second interaction event (such as Focused), the event status of the second interaction event (such as true) and the index information of the interactive element (i.e., index).

[0160] Taking the second interactive event as a Hovered event as an example, in response to the Hovered event for the interactive element, the status value of the Hovered event is set to true, and the first event information is sent to the first display device. The first event information includes the event type of the second interactive event (such as Hovered), the event status of the second interactive event (such as true) and the index information of the interactive element (i.e., index).

[0161] In some examples, after adding an interaction event for each interactive element in the first interface, if a third interaction event for the interactive element is monitored, the third page data associated with the interactive element is used, and the third page data is the page data corresponding to the second page content, and the second page content is the jump page corresponding to the interactive element; based on the third page data, the fourth interface is displayed, and the fourth interface includes the second page content.

[0162] Specifically, if a third interaction event for an interactive element is monitored, the jump page information corresponding to the interactive element is obtained from the configuration data of the interactive element based on the index information of the interactive element, and the third page data is obtained based on the jump page information corresponding to the interactive element. Based on the third page data, the fourth interface is displayed, and the fourth interface includes the second page content.

[0163] It can be understood that after generating the third page data, the second display device sends the third page data to the first display device.

[0164] Among them, the specific implementation method of generating the third page data can refer to the specific implementation method of generating the first page data above, the specific implementation method of displaying the fourth interface can refer to the specific implementation method of displaying the first interface above, and the specific implementation method of adding interaction layers and interaction events to each interactive element in the fourth interface can refer to the specific implementation method of adding interaction layers and interaction events to each interactive element in the first interface above, which will not be repeated here.

[0165] In some examples, after monitoring a third interaction event for an interactive element, the event state of the third interaction event is set to the first state (i.e., true), and second event information is sent to the first display device, so that the first display device displays a third interface based on the third page data in response to the second event information, and the third interface includes the second page content. The second event information includes the event type of the third interaction event, the event state corresponding to the third interaction event, and the index information of the interactive element.

[0166] For example, taking the third interactive event as a Clicked event, in response to the Clicked event for the interactive element, the status value of the Clicked event is set to true, and second event information is sent to the first display device. The second event information includes the event type of the third interactive event (such as Clicked), the event status of the third interactive event (such as true) and the index information of the interactive element (i.e., index).

[0167] In some examples, after monitoring a third interaction event for an interactive element, if synchronization of the third page data corresponding to the second page content has not yet been completed, the priority of the third page data is adjusted to the highest priority. In this way, the second display device can prioritize synchronizing the third page data to the first display device. Then, when the second display device renders and displays the second page content, in response to the second event information, the first display device can also render and display the second page content based on the third page data, thereby ensuring that the first and second display devices switch pages synchronously.

[0168] The following describes in detail the method for displaying page content provided in the embodiment of the present application, taking the target device (i.e., the first display device) as the execution entity.

[0169] Figure 10 A flow chart of a method for displaying page content provided in an embodiment of the present application. Figure 10 As shown, the method may include the following steps:

[0170] S301. Receive first page data sent by a second display device, wherein the first page data is generated based on configuration data of the first page content and a second screen resolution of the second display device, and the first page data is used for the second display device to render and display a first interface, wherein the first interface includes the first page content.

[0171] Specifically, the second application on the first display device receives the first page data sent by the first application on the second display device. The first display device is the target device. The second application (also referred to as the target application, i.e., Application 2 below) is a display application that displays the page content. For example, the second application is a "Wall of Fame" application.

[0172] Of course, before receiving the first page data sent by the second display device, in response to the connection request sent by the second display device, the second application establishes a communication connection with the first application of the second display device, that is, the first display device establishes a communication connection with the second display device.

[0173] In some examples, after receiving the first page data, the second application stores the first page data.

[0174] S302: Scaling the first page data according to the first screen resolution to obtain second page data.

[0175] Specifically, the second application scales the first page data according to the first screen resolution to obtain the second page data.

[0176] The first screen resolution (hereinafter referred to as screen resolution 1) is the screen resolution of the first display device. The first screen resolution is greater than or equal to the preset resolution. The preset resolution may be, for example, 4K resolution. In other words, both the source device and the target device have a relatively high resolution.

[0177] For example, the first screen resolution can be expressed as horizontal pixel count × vertical pixel count. In this regard, the first screen resolution includes a first screen width (i.e., T_ScreenW) and a first screen height (i.e., T_ScreenH). For example, if the first screen resolution is 4K, the first screen width is 3840 pixels and the first screen height is 2160 pixels.

[0178] The page data is used for rendering the page content by the display device. Exemplarily, the page data can be bitmap data. The second page data is used for rendering the first page content by the first display device, that is, rendering and displaying the first interface.

[0179] For example, after receiving the page display information sent by the second display device, the first display device obtains the first page data and scales the first page data according to the first screen resolution to obtain the second page data. Specifically, the first page data is scaled according to the first screen width (i.e., T_ScreenW) and the first screen height (i.e., T_ScreenH) to obtain the second page data. In this way, the first and second display devices can display the page content synchronously, avoiding any delay on the first display device.

[0180] In actual applications, when obtaining the first screen resolution, the first display device can be read from the device configuration file of the first display device. Specifically, after the first display device is started, the first display device loads its device configuration file into the memory. When receiving the page display information sent by the second display device, the first display device reads the device configuration file of the first display device from the memory and obtains the first screen resolution from the device configuration file of the first display device.

[0181] S303: Render and display a second interface according to the second page data, where the second interface includes the first page content.

[0182] Taking the second page data as bitmap data 2 of static page 1 as an example, the bitmap data 2 is drawn to SurfaceView, that is, the first display device displays the second interface, and the second interface includes the first page content.

[0183] In an embodiment of the present application, when displaying page content synchronously between multiple devices, the first display device renders and displays the page content based on the page data sent by the second display device and the first screen resolution of the first display device. In addition, after the second display device generates corresponding page data based on the configuration data of the page content and the second screen resolution of the second display device, it renders and displays the page content based on the page data. In this way, the synchronous display of page content between multiple devices can be achieved. Furthermore, in an embodiment of the present application, the first display device only receives the page data of the page content to be displayed transmitted by the second display device. The first display device can render and display the page content in real time based on its own screen resolution and page data, so that the display screen of the first display device has a higher resolution. In addition, when the page content to be displayed has not changed, there is no need to transmit other data between multiple devices, avoiding the real-time transmission of projection data frames between multiple devices. In this way, it will not be limited by the projection protocol and bandwidth, ensuring that the display screens of multiple devices have a higher resolution, achieving the effect of synchronously displaying 4K pictures on multiple devices, and improving the page display effect.

[0184] After generating the first page data, the second display device sends the first page data to the first display device, so that the first display device scales the first page data according to the first screen resolution to obtain the second page data, and renders and displays the second interface based on the second page data, where the second interface includes the first page content. In this way, the first display device does not need to generate page data again based on the original configuration data, which can improve data processing effects and avoid display delays.

[0185] In some embodiments, after rendering and displaying the second interface according to the second page data, the first display device adds an interaction layer and binds a corresponding interaction event to each interactive element according to the first position information of each interactive element. In the embodiment of the present application, the second display device can add an interaction layer and an interaction event to each interactive element in the display screen, and the first display device can also add an interaction layer and an interaction event to each interactive element in the display screen. In this way, the second display device can directly respond to the user's operation and dynamically update the display page. In addition, the second display device can convert the operation time in response to the user's operation and notify the first display device, so that the first display device also synchronously updates the display page, realizing synchronous screen display between multiple devices.

[0186] For example, Figure 11 As shown, the process of adding an interaction layer to each interactive element and binding a corresponding interaction event to each interactive element according to the first position information of each interactive element by the first display device includes the following steps:

[0187] S401: Receive first position information corresponding to an interactive element sent by a second display device, where the first position information is used to indicate a position of the interactive element in a first interface.

[0188] S402. Adjust the first position information according to a display ratio parameter to obtain second position information, where the second position information is used to indicate a position of the interactive element in the second interface. The display ratio parameter is determined according to the first screen resolution and the second screen resolution.

[0189] For example, the ratio of the first screen width to the second screen width can be used as the display ratio parameter (ie, D_Rate=T_ScreenW / S_ScreenW). The ratio of the first screen height to the second screen height can also be used as the display ratio parameter (ie, D_Rate=T_ScreenH / S_ScreenH).

[0190] S403: Based on the second position information, add a first interaction layer to the interactive element, and add a first interaction event to the first interaction layer.

[0191] For example, Figure 12As shown, the process of adding a first interaction layer to the interactive element based on the second position information and adding a first interaction event to the first interaction layer includes the following steps:

[0192] S501: Determine a first display resolution according to a first screen density of a first display device, where the first display resolution is a reference resolution when the first display device renders an interactive layer.

[0193] The first screen density (ie, screen pixel density 1 hereinafter) refers to the number of pixels per inch on the first display device.

[0194] For example, if the first screen density is less than or equal to the preset screen density, the first preset display resolution is determined as the first display resolution; the preset screen density may be, for example, 320 PPI; and the first preset display resolution is 2K. If the first screen density is greater than the preset screen density, the second preset display resolution is determined as the first display resolution; and the second preset display resolution is 4K.

[0195] S502: Determine third position information according to the first screen resolution and the second position information.

[0196] In this embodiment of the present application, for each interactive element, a first interactive layer is added above the interactive element in the second interface. The third position information is used to indicate the position of the first interactive layer in the second interface. Exemplarily, the third position information may include interactive layer coordinates corresponding to each corner point of the first interactive layer. The interactive layer coordinates may include horizontal and vertical coordinates of the interactive layer.

[0197] Exemplarily, if the first display resolution matches the first screen resolution, the second position information is determined as the third position information. If the first display resolution does not match the first screen resolution, a first offset parameter is determined based on the first display resolution and the first screen resolution, and the second position information is adjusted based on the first offset parameter to obtain the third position information.

[0198] The first display resolution includes a first display width and a first display height. When determining the first offset parameter, the ratio of the first display width to the first screen width can be used as the first offset parameter. Of course, the ratio of the first display height to the first screen height can also be used as the first offset parameter.

[0199] Taking the first screen resolution as 4K as an example, if the first display resolution is 2K, the first display resolution does not match the first screen resolution, and the ratio of the first display width to the first screen width is determined as the first offset parameter (i.e., POS_T). If the first display resolution is 4K, the first display resolution matches the first screen resolution, and the ratio of the first display width to the first screen width is determined as the first offset parameter (i.e., POS_T). In this case, the first offset parameter is 1.

[0200] Exemplarily, the first interaction layer includes a first view area and a second view area. The second view area (also referred to as the content view area) matches the interactive element in the SurfaceView view and is used to receive interaction events for the interactive element. The second view area surrounds the first view area, and the second view area is used for visual enhancement. In this regard, determining the third position information based on the first screen resolution and the second position information includes: determining the third position information based on the first screen resolution, the second position information, and the size information of the second view area (such as width information).

[0201] Taking the interactive layer coordinates corresponding to the upper left corner of the second interactive layer as an example, after determining the display ratio parameter and the first offset parameter, according to the display ratio parameter, the first offset parameter, the horizontal display position 1 (i.e. x*Rat_W) and the size information of the second view area (i.e. d item ), determine the horizontal coordinates of the interaction layer, such as the horizontal coordinates of the interaction layer are D_Rate*POS_T*x*Rat_W-d item According to the display ratio parameter, the first offset parameter, the vertical display position 1 (ie x*Rat_H) and the size information of the fourth view area (ie d item ), determine the longitudinal coordinate of the interaction layer, such as the longitudinal coordinate of the interaction layer is D_Rate*POS_T*x*Rat_H-d item .

[0202] Taking the interactive layer coordinates corresponding to the lower left corner of the second interactive layer as an example, after determining the display ratio parameter and the first offset parameter, according to the display ratio parameter, the first offset parameter, the horizontal display position 1 (i.e. x*Rat_W) and the size information of the second view area (i.e. d item ), determine the horizontal coordinates of the interaction layer, such as the horizontal coordinates of the interaction layer are D_Rate*POS_T*x*Rat_W-d item According to the display ratio parameter, the first offset parameter, the vertical display position 1 (ie x*Rat_H) and the size information of the fourth view area (ie d item ), determine the longitudinal coordinate of the interaction layer, such as the longitudinal coordinate of the interaction layer is D_Rate*POS_T*x*Rat_H+d item .

[0203] Taking the interactive layer coordinates corresponding to the upper right corner of the second interactive layer as an example, after determining the display ratio parameter and the first offset parameter, according to the display ratio parameter, the first offset parameter, the horizontal display position 1 (i.e. x*Rat_W) and the size information of the second view area (i.e. d item ), determine the horizontal coordinates of the interaction layer, such as the horizontal coordinates of the interaction layer are D_Rate*POS_T*x*Rat_W+d item According to the display ratio parameter, the first offset parameter, the vertical display position 1 (ie x*Rat_H) and the size information of the fourth view area (ie d item ), determine the longitudinal coordinate of the interaction layer, such as the longitudinal coordinate of the interaction layer is D_Rate*POS_T*x*Rat_H-d item .

[0204] Taking the interactive layer coordinates corresponding to the lower right corner of the second interactive layer as an example, after determining the display ratio parameter and the first offset parameter, according to the display ratio parameter, the first offset parameter, the horizontal display position 1 (i.e. x*Rat_W) and the size information of the second view area (i.e. d item ), determine the horizontal coordinates of the interaction layer, such as the horizontal coordinates of the interaction layer are D_Rate*POS_T*x*Rat_W+d item According to the display ratio parameter, the first offset parameter, the vertical display position 1 (ie x*Rat_H) and the size information of the fourth view area (ie d item ), determine the longitudinal coordinate of the interaction layer, such as the longitudinal coordinate of the interaction layer is D_Rate*POS_T*x*Rat_H+d item .

[0205] S503: Add a first interaction layer to the interactive element based on the third position information.

[0206] In some examples, the second application obtains the number of interactive elements displayed in the second interface. If the number of interactive elements is 0, the upper layer of SurfaceView is removed, that is, the interactive layer is removed. If the number of interactive elements is greater than 0, a first interactive layer is added for each interactive element (that is, the above S501 to S503 are executed). It can be understood that the first interactive layer is located on the upper layer of SurfaceView.

[0207] Optionally, the first view area is transparent to avoid obstructing page content. The second view area is non-transparent, such as a shadow or highlight area. When adding a first interactive layer to an interactive element based on the third location information, the first view area is displayed in the area where the interactive element is located, and the second view area is hidden. Technical Effect.

[0208] In some examples, after the corresponding first interaction layer is superimposed on each interactive element in the second interface, an interaction event can be added to each interaction layer, that is, an interaction event is added to each interactive element in the second interface.

[0209] Exemplarily, for each interactive element in the second interface, a first interactive event is added for each interactive element. The first interactive event is used to monitor event information. The first interactive event may be a Selected event.

[0210] In some examples, first event information sent by a second display device is received, the first event information is used to indicate the occurrence of a trigger event for a second interaction event, the second interaction event is bound to a second interaction layer, the second interaction layer is the interaction layer corresponding to the interactive element in the first interface, and the second interaction event is used to monitor whether the operation focus is on the interactive element; in response to the first event information, the second view area is displayed.

[0211] In some examples, second event information sent by a second display device is received, the second event information is used to indicate the occurrence of a trigger event for a third interaction event, the third interaction event is bound to the second interaction layer, and the third interaction event is used to monitor whether the interactive element is triggered; in response to the second event information, a third interface is displayed, and the third interface includes second page content, and the second page content is the page content of the jump page corresponding to the interactive element.

[0212] Specifically, in response to the second event information, the third interface is displayed, including: in response to the second event information, obtaining third page data associated with the interactive element, the third page data is obtained from the second display device, and the third page data is generated based on the configuration data of the second page content and the second screen resolution of the second display device; according to the first screen resolution, the third page data is scaled to obtain fourth page data; according to the fourth page data, the third interface is rendered and displayed.

[0213] In an embodiment of the present application, the second display device can add an interactive layer and an interactive event to each interactive element in the display screen, and the first display device can also add an interactive layer and an interactive event to each interactive element in the display screen. In this way, the second display device can directly respond to the user's operation and dynamically update the display page. In addition, the second display device can convert the operation time in response to the user's operation and notify the first display device, so that the first display device also synchronously updates the display page to achieve synchronous screen display between multiple devices.

[0214] The following takes the second display device being the smart TV 1 and the first display device being the smart TV 2 as an example to schematically illustrate the process of synchronously displaying page content on multiple devices.

[0215] like Figure 13 As shown, the method for displaying the page content may include the following steps:

[0216] S601 : In response to operation 1 , smart TV 1 starts application 1 .

[0217] Operation 1 is an operation of starting application 1.

[0218] For example, after the application 1 is started, the application 1 may display a guide page including device options, such as a "source device" option and a "target device" option. In response to a click operation on the "source device" option, the smart TV 1 is used as the source device.

[0219] S602 : In response to operation 2 , smart TV 2 starts application 2 .

[0220] Operation 2 is an operation of starting application 2.

[0221] S603 : Application 1 establishes a communication connection with application 2 in smart TV 2 .

[0222] S604 , the application 1 obtains the whole-device configuration file 1 of the smart TV 1 from the system 1 of the smart TV 1 , where the whole-device configuration file 1 includes the screen resolution 2 , the screen pixel density 2 , and the product type information 1 .

[0223] The screen resolution 2 is the screen resolution of the smart TV 1 , and the screen pixel density 2 is the screen pixel density of the smart TV 1 .

[0224] S605 , application 1 obtains page configuration information 1 of page 1 .

[0225] Among them, page 1 is the first page content mentioned above. Page configuration information 1 includes the configuration data of background image 1 (i.e., the first background image mentioned above) and the configuration data of each interactive element. The configuration data of background image 1 includes background image information and image size information. The image size information includes image width information and image height information of background image 1. The configuration data of interactive elements includes element information of interactive elements and element position information of interactive elements.

[0226] S606 : Application 1 generates page data 1 of page 1 according to screen resolution 2 and page configuration information 1 .

[0227] The page data 1 is the first page data mentioned above.

[0228] Specifically, application 1 obtains background image 1 based on background image information; creates page background image 1 based on screen resolution 2 and background image 1; determines displacement ratio parameter 1 based on screen resolution 2 and image size information; for each interactive element in page 1, adjusts the element position information of the interactive element according to the displacement ratio parameter 1 to obtain display position information 1 corresponding to the interactive element (i.e., the first position information mentioned above); draws each interactive element in the page background image 1 according to the display display position information 1 to obtain page data 1 corresponding to page 1.

[0229] Among them, the specific implementation method of S606 can refer to the specific implementation methods of S1021 to S1025 above, which will not be repeated here.

[0230] S607 , application 1 sends page data 1 , screen resolution 2 , and display position information 1 of each interactive element in page 1 to application 2 .

[0231] S608 , application 1 draws page data 1 (ie, bitmap data 1 ) to SurfaceView.

[0232] S609 , application 1 sends notification information 1 to system 1 , where notification information 1 is used to notify system 1 to render and display page 1 .

[0233] S610. In response to notification information 1, system 1 displays page 1, which includes multiple interactive elements.

[0234] S611 , application 1 adds an interaction layer 2 (ie, the second interaction layer mentioned above) to each interactive element in page 1 according to screen pixel density 2 and display position information 1 of each interactive element in page 1 .

[0235] S612 : Application 1 determines interaction mode 1 of smart TV 1 according to product type information 1 , and adds an interaction event to each interactive element in page 1 according to interaction mode 1 .

[0236] The interaction event includes a second interaction event and a third interaction event. The second interaction event is a Hovered event or a Focused event. The third interaction event is a Clicked event (i.e., a Clicked event).

[0237] The specific implementation of S611 and S612 can refer to the specific implementation of S201 to S203 above, which will not be repeated here.

[0238] S613 , application 1 sends page display information 1 to application 2 , where page display information 1 is used to notify application 1 to display page 1 .

[0239] S614 , in response to the page display information 1 , the application 2 obtains the whole-device configuration file 2 of the smart TV 2 from the system 2 of the smart TV 2 , where the whole-device configuration file 2 includes the screen resolution 1 and the screen pixel density 1 .

[0240] Among them, screen resolution 2 is the screen resolution of smart TV 1. Screen pixel density 1 is the screen pixel density of smart TV 2.

[0241] S615 , application 2 scales page data 1 according to screen resolution 1 to obtain page data 2 .

[0242] The page data 2 is the second page data mentioned above.

[0243] S616 , application 2 draws page data 2 (ie, bitmap data 2) to SurfaceView.

[0244] S617 , application 2 sends notification information 2 to system 2 , where notification information 2 is used to notify system 2 to render and display page 1 .

[0245] S618. In response to notification information 2, system 2 displays page 1, which includes multiple interactive elements.

[0246] S619 . Application 2 determines a display ratio parameter according to screen resolution 1 and screen resolution 2.

[0247] S620 , application 2 adds an interactive layer 1 (ie, the first interactive layer mentioned above) to each interactive element in page 1 according to the display ratio parameter, screen pixel density 1 and display position information 1 of each interactive element in page 1 .

[0248] S621. Application 2 adds a preset interaction event (ie, the first interaction event mentioned above) to each interactive element in page 1.

[0249] The specific implementation of S620 and S621 can refer to the specific implementation of S501 to S503 above, which will not be repeated here.

[0250] Below, taking the first display device as smart TV 2, the second display device as smart TV 1, the first interaction event as Selected event, the second interaction event as Focused event, and the third interaction event as Clicked event as an example, the process of synchronously displaying page content on multiple devices is schematically explained.

[0251] like Figure 14 As shown, the method for displaying the page content may include the following steps:

[0252] S701 . In response to operation 3 on interactive element 1 , application 1 sets the event state of the Focused event corresponding to interactive element 1 to true.

[0253] Among them, operation 3 is an operation of moving the operation focus to interactive element 1.

[0254] S702 : Application 1 sends notification information 3 to system 1 . Notification information 3 is used to notify that the event state of the Focused event corresponding to interactive element 1 has changed.

[0255] S703 . In response to the notification information 3 , the system 1 displays the focus shadow area of ​​the interactive layer 2 of the interactive element 1 , that is, the system 1 updates the view.

[0256] S704: Application 1 sends event information 1 (i.e., the first event information mentioned above) to application 2. Event information 1 includes the event type (e.g., Focused event), event state (e.g., true), and index information 1 of interactive element 1. Event information 1 is used to indicate that application 1 has received operation 3.

[0257] S705 : In response to event information 1 , application 2 determines interactive element 1 according to index information 1 .

[0258] S706. Application 2 sets the event type of the Selected event corresponding to interactive element 1 to the Focused event and sets the event state of the Selected event to true according to the event type (eg, Focused event) and event state (eg, true).

[0259] S707 : Application 2 sends notification information 4 to system 2 . Notification information 4 is used to notify that the event state of the Selected event corresponding to interactive element 1 has changed.

[0260] S708 . In response to notification information 4 , system 2 displays the focus shadow area of ​​interactive layer 1 of interactive element 1 , that is, system 2 updates the view.

[0261] Specifically, the system 2 displays the focus shadow area of ​​the interactive layer 1 of the interactive element 1 according to the event type (such as the Focused event) and the event state (such as true).

[0262] like Figure 15 As shown, the method for displaying the page content may include the following steps:

[0263] S801. In response to operation 4 on interactive element 1, application 1 sets the event state of the Clicked event corresponding to interactive element 1 to true.

[0264] Among them, operation 4 is a click operation on interactive element 1.

[0265] S802 , application 1 obtains page data 3 of page 2 according to the jump page information corresponding to interactive element 1 .

[0266] The page data 3 is the third page data mentioned above.

[0267] S803 , application 1 draws page data 3 to SurfaceView.

[0268] S804 , application 1 sends notification information 5 to system 1 , where notification information 5 is used to notify system 1 to render and display page 2 .

[0269] S805 . In response to notification information 5 , system 2 displays page 2 .

[0270] S806 : Application 1 sends event information 2 (ie, the second event information mentioned above) to application 2 . Event information 2 includes event type (eg, Clicked event), event state (eg, true), and index information 1 of interactive element 1 .

[0271] S807 . In response to event information 2 , application 2 determines interactive element 1 according to index information 1 .

[0272] S808. Application 2 sets the event type of the Selected event corresponding to interactive element 1 to Clicked event and sets the event state of the Selected event to true according to the event type (eg, Clicked event) and event state (eg, true).

[0273] S809 , application 2 scales page data 3 according to screen resolution 1 to obtain page data 4 .

[0274] The page data 4 is the fourth page data mentioned above.

[0275] S810. Application 2 draws page data 4 to SurfaceView.

[0276] S811 , application 2 sends notification information 6 to system 2 , where notification information 6 is used to notify system 2 to render and display page 2 .

[0277] S812. In response to notification information 6, system 2 displays page 2.

[0278] Specifically, system 2 displays page 2 according to the event type (such as Clicked event) and event status (such as true).

[0279] The present disclosure provides a computer-readable storage medium storing a computer program. When executed by a processor, the computer program implements the various processes of the above-described method for displaying page content, and can achieve the same technical effect. To avoid repetition, the details are not described here. The computer-readable storage medium can be a read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0280] The present disclosure provides a computer program product, which includes a computer program. When the computer program is run on a computer, the computer implements the above-mentioned method for displaying page content.

[0281] For ease of explanation, the above description has been made in conjunction with specific embodiments. However, the above discussion of some embodiments is not intended to be exhaustive or to limit the embodiments to the specific forms disclosed above. Based on the above teachings, various modifications and variations can be obtained. The selection and description of the above embodiments are intended to better explain the principles and practical applications, so that those skilled in the art can better use the embodiments and various different variations of the embodiments suitable for specific use considerations.

[0282] In this application, "at least one" means one or more, and "plurality" means two or more. "At least one of the following" or similar expressions refers to any combination of these items, including any combination of single or plural items. For example, at least one of a, b, or c can mean: a, b, c, ab, ac, bc, or abc, where a, b, and c can be single or plural.

[0283] It should be understood that in the various embodiments of the present application, the size of the serial numbers of the above-mentioned processes does not mean the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present application.

[0284] Those skilled in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0285] Those skilled in the art will clearly understand that, for the convenience and brevity of description, the specific working processes of the systems, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0286] In the several embodiments provided in this application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative; for example, the division of units is merely a logical function division, and there may be other division methods in actual implementation; for example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0287] Units described as separate components may or may not be physically separate, and components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to achieve the purpose of this embodiment according to actual needs.

[0288] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0289] The above are only specific embodiments of the present application, but the scope of protection of this application is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

Claims

1. A method for displaying page content, characterized in that: Applied to a first display device, where the screen resolution of the first display device is a first screen resolution, the method includes: Receiving first page data sent by a second display device, wherein the first page data is generated according to configuration data of the first page content and a second screen resolution of the second display device, and the first page data is used for the second display device to render and display a first interface, wherein the first interface includes the first page content; scaling the first page data according to the first screen resolution to obtain second page data; Render and display a second interface according to the second page data, where the second interface includes the first page content.

2. The method according to claim 1, characterized in that The first page content includes a first background image and an interactive element located on the first background image; the method further includes: receiving first position information corresponding to the interactive element sent by the second display device, where the first position information is used to indicate a position of the interactive element in the first interface; Adjusting the first position information according to a display ratio parameter to obtain second position information, where the second position information is used to indicate a position of the interactive element in the second interface, the display ratio parameter being determined according to the first screen resolution and the second screen resolution; Based on the second position information, a first interaction layer is added to the interactive element, and a first interaction event is added to the first interaction layer.

3. The method according to claim 2, characterized in that The first interactive layer is located above the layer where the first page content is located. The first interactive layer includes a first view area and a second view area. The first view area matches the interactive element, and the second view area surrounds the first view area. The first view area is a transparent view area, and the second view area is a non-transparent view area. Adding a first interaction layer to the interactive element based on the second position information includes: Based on the second position information, the first view area is displayed in the area where the interactive element is located, and the second view area is hidden.

4. The method according to claim 3, characterized in that The method further comprises: receiving first event information sent by the second display device, where the first event information indicates a triggering event for a second interaction event, the second interaction event being bound to a second interaction layer, the second interaction layer being the interaction layer corresponding to the interactive element in the first interface, and the second interaction event being used to monitor whether an operation focus is on the interactive element; In response to the first event information, the second view area is displayed.

5. The method according to claim 4, characterized in that The method further comprises: receiving second event information sent by the second display device, where the second event information is used to indicate the occurrence of a triggering event for a third interaction event, the third interaction event being bound to the second interaction layer, and the third interaction event being used to monitor whether the interactive element is triggered; In response to the second event information, a third interface is displayed, where the third interface includes second page content, which is the page content of the jump page corresponding to the interactive element.

6. The method according to claim 5, characterized in that The displaying of the third interface in response to the second event information includes: In response to the second event information, obtaining third page data associated with the interactive element, wherein the third page data is obtained from the second display device and is generated according to configuration data of the second page content and a second screen resolution of the second display device; scaling the third page data according to the first screen resolution to obtain fourth page data; Render and display the third interface according to the fourth page data.

7. The method according to claim 2, characterized in that Adding a first interaction layer to the interactive element based on the second position information includes: Determining a first display resolution according to a first screen density of the first display device, where the first display resolution is a base resolution when the first display device renders the interaction layer; determining third position information according to the first display resolution and the second position information; Based on the third position information, the first interaction layer is added to the interactive element.

8. The method according to claim 7, characterized in that The determining, according to the first display resolution and the second position information, third position information includes: If the first display resolution matches the first screen resolution, determining the second position information as the third position information; If the first display resolution does not match the first screen resolution, a first offset parameter is determined according to the first display resolution and the first screen resolution, and the second position information is adjusted according to the first offset parameter to obtain the third position information.

9. The method according to any one of claims 1 to 8, characterized in that The rendering and displaying of the second interface according to the second page data includes: Receiving page display information sent by the second display device, wherein the page display information is sent when the second display device renders and displays the first interface; In response to the page display information, a second interface is rendered and displayed according to the second page data.

10. A method for displaying page content, characterized in that: Applied to a second display device, where the screen resolution of the second display device is a second screen resolution, the method includes: Get the configuration data of the first page content; generating first page data according to the second screen resolution and the configuration data of the first page content; Rendering and displaying a first interface according to the first page data, where the first interface includes the first page content; The first page data is sent to a first display device so that the first display device scales the first page data according to a first screen resolution of the first display device to obtain second page data, and renders and displays a second interface based on the second page data, wherein the second interface includes the first page content.

Images