Interface display method and electronic equipment

Abstract

The invention discloses an interface display method and electronic equipment, relates to the technical field of terminals, and aims to realize spatial fusion of interface elements on a display interface and theme wallpaper through light and shadow interaction of the interface elements on the theme wallpaper and improve visual experience brought to a user by the display interface. In the application, when the electronic equipment needs to display the theme wallpaper and the interface elements, the projection of one or more interface elements on the theme wallpaper is determined according to the light source information, and the projection of the interface elements is displayed at the corresponding position of the theme wallpaper while the theme wallpaper and the interface elements are displayed. According to the scheme, the position relation between the light source information and the interface elements can be fully considered without adding extra hardware or carrying out excessive complex calculation and processing, and light and shadow effect simulation consistent with the real world is carried out on the theme wallpaper, so that a spatial relation is formed between the interface elements and the theme wallpaper visually; therefore, a three-dimensional visual effect is created visually.

Description

Technical Field

[0001] This application relates to the field of terminal technology, and in particular to interface display methods and electronic devices. Background Technology

[0002] Currently, electronic devices such as smartphones, tablets, smartwatches, smart bracelets, and personal computers (PCs) have become essential tools for people's work, study, and daily life. To enhance the user experience when using these devices, theme applications are offering increasingly rich and diverse thematic interfaces; for example, varied 3D themed wallpapers can provide users with a rich visual experience.

[0003] In traditional solutions, interface elements on the lock screen, desktop, and other interfaces are independent of the theme wallpaper. For example, the layer containing the interface elements is fixed and floats above the layer containing the theme wallpaper. When the user updates the theme wallpaper, it does not affect the display of the interface elements; conversely, when the user changes the display of the interface elements, it does not affect the display of the theme wallpaper.

[0004] Therefore, the interaction and integration of interface elements on lock screens, desktops, and other interfaces with theme wallpapers has become an important research direction for improving the visual experience of display interfaces. Summary of the Invention

[0005] This application provides an interface display method and an electronic device, which can realize the spatial integration of interface elements and theme wallpaper on the display interface through the light and shadow interaction of interface elements on theme wallpaper, thereby improving the visual experience brought to the user by the display interface.

[0006] To achieve the above objectives, this application adopts the following technical solution: Firstly, a method for displaying an interface is provided. This method includes: an electronic device acquiring a first theme wallpaper to be displayed and multiple first interface elements; the electronic device determining, based on light source information, the projection of at least one second interface element among the multiple first interface elements onto the first theme wallpaper, the light source information including the position of a light source; and the electronic device displaying the first interface, which includes the first theme wallpaper, the multiple first interface elements, and the projection corresponding to at least one second interface element. The second interface element is the interface element among the multiple first interface elements that has a projection. That is, all of the multiple first interface elements may have projections, or only some may have projections.

[0007] The solution provided in the first aspect allows electronic devices to determine the projection of one or more interface elements onto the theme wallpaper in display scenarios requiring the display of theme wallpapers and interface elements, such as always-on display (AOD) scenarios, desktop scenarios, and wallpaper setting scenarios. This is achieved by using light source information to determine the projection of one or more interface elements onto the theme wallpaper, and then simultaneously displaying the theme wallpaper and interface elements while simultaneously displaying the projection of the interface elements at the corresponding positions on the theme wallpaper. This solution requires no additional hardware and can be implemented using existing modules of the electronic device, thus incurring no additional cost. Furthermore, this solution fully considers the positional relationship between light source information and interface elements, simulating lighting and shadow effects on the theme wallpaper consistent with the real world. This creates a visual spatial relationship between the interface elements and the theme wallpaper, resulting in a three-dimensional visual effect, such as achieving a near-naked-eye 3D visual effect, improving the user's visual experience. Moreover, this solution does not require excessive complex calculations and processing, resulting in minimal power consumption and low latency, providing a smooth three-dimensional visual effect. It should be noted that the light source information mentioned here can refer to the position of the light source. The actual position of the sun or moon is related to the specific time. Therefore, the position of a light source can also be equated with time information.

[0008] As one possible implementation, the above method further includes: the electronic device determining the light source information based on the scene information of the electronic device, wherein the scene information includes any one or more of the following: time information, weather information, and location information. This allows the electronic device to accurately calculate the projection of at least one second interface element onto the first theme wallpaper based on any one or more of the specific time information, weather information, and location information, thereby presenting a lighting effect consistent with the real world.

[0009] As one possible implementation, the aforementioned electronic device determines the light source information based on scene information, including: the electronic device determines the light source position from the light source's movement trajectory based on the scene information; wherein the light source movement trajectory includes the sun's movement trajectory determined based on the sun's movement trajectory relative to the earth's. This reduces the power consumption of lighting calculations and enhances the practicality of this solution. For example, compared to a solution that uses a 3D galaxy model to calculate the light source position, this solution allows for direct use of the calculated position after a single calculation, avoiding the large amount of computation involved in real-time calculation of the light source position based on the 3D galaxy model, thus reducing the power consumption associated with determining the light source position.

[0010] As one possible implementation, the projection corresponding to at least one second interface element includes multiple projection points. The electronic device determines the projection of at least one second interface element among the multiple first interface elements onto the first theme wallpaper based on the light source information. This includes: the electronic device determining the projection direction and projection length of each pixel based on the positional relationship between the light source position and the pixel points of at least one second interface element, where the projection length represents the distance between the pixel point of the interface element and the pixel point on the corresponding projection; and the electronic device determining the projection of at least one second interface element onto the first theme wallpaper based on the projection direction and projection length corresponding to each pixel point. This ensures the accuracy of projection-related calculations and guarantees the presentation of lighting and shadow effects consistent with the real world.

[0011] As one possible implementation, the aforementioned electronic device determines the projection of at least one second interface element onto the first theme wallpaper based on the projection direction and projection length corresponding to each pixel. This includes: the electronic device acquiring first depth information of multiple pixels in the wallpaper area where the at least one second interface element is located, and acquiring second depth information of multiple pixels in the at least one second interface element; and determining the projection point of the at least one second interface element onto the first theme wallpaper after offset calculation of the projection direction and projection length of each pixel based on the first and second depth information. Thus, by determining the offset distance of the projection point of each pixel on the interface element onto the first theme wallpaper, the final projection shape of each second interface element can be obtained. This projection shape can undergo different deformations depending on the shape and / or size of the second interface element and the depth information of the first theme wallpaper, thereby presenting a lighting effect consistent with the real world.

[0012] As an example, the first depth information includes one or more of the following information for each pixel of the wallpaper area: grayscale value, color code, depth value; and / or, the second depth information includes one or more of the following information for each pixel of at least one second interface element: grayscale value, color code, depth value.

[0013] As an example, an electronic device acquires second depth information of multiple pixels in at least one second interface element, including: if the pixel with the largest depth value on the wallpaper area is located in the center area of ​​the wallpaper area, determining that the depth value of each pixel of the second interface element at the corresponding position in the wallpaper area is less than a first value, where the first value is the minimum depth value of the wallpaper area; if the pixel with the largest depth value on the wallpaper area is located in the edge area of ​​the wallpaper area, determining that the depth value of each pixel of the second interface element at the corresponding position in the wallpaper area is greater than or equal to a second value and less than a third value, where the second value is the average depth value of the wallpaper area and the third value is the maximum depth value of the wallpaper area.

[0014] As an example, if it is determined that the depth value of each pixel of the second interface element at the corresponding position of the wallpaper area is less than the first value, the electronic device obtains the second depth information of each pixel in at least one second interface element, which further includes: obtaining a depth value less than the first value from a plurality of pre-set stepped depth values, and using it as the depth value of each pixel of the second interface element at the corresponding position of the wallpaper area.

[0015] As an example, if it is determined that the depth value of each pixel of the second interface element at the corresponding position of the wallpaper area is greater than or equal to the second value and less than the third value, the electronic device obtains the second depth information of each pixel in at least one second interface element, which further includes: the electronic device obtaining the minimum depth value of the wallpaper element on the wallpaper area; the electronic device determining that the depth value of each pixel of the second interface element at the corresponding position of the wallpaper area is less than the minimum depth value of the wallpaper element; the electronic device obtaining, from a plurality of pre-set stepped depth values, the value that is greater than or equal to the second value, less than the third value, and less than the minimum depth value of the wallpaper element, as the depth value of each pixel of the second interface element at the corresponding position of the wallpaper area.

[0016] As one possible implementation, the above method further includes: the electronic device determining a first display attribute of the corresponding projection point based on the projection length, the first display attribute including one or more of the following: brightness and transparency. In this way, it is possible to present light and shadow patterns consistent with those in the real world.

[0017] As an example, the longer the projection length, the lower the brightness and / or the higher the transparency of the corresponding projection point.

[0018] As an example, the longer the projection length, the lower the brightness and / or the higher the transparency of the projection point, which visually appears as a more blurred and lighter color of the projection point.

[0019] As one possible implementation, the aforementioned light source information also includes light source intensity, and the method further includes: determining a second display attribute of the projection point on the first theme wallpaper based on the light source intensity. The second display attribute includes one or more of the following: brightness and transparency. In this way, the projection point corresponding to the interface element can adapt and change with the magnitude of the light source intensity, presenting a light and shadow pattern consistent with the real world.

[0020] As an example, the stronger the light source, the lower the brightness and / or transparency of the corresponding projection point.

[0021] As one possible implementation, the method further includes: the electronic device determining the color tone of the first theme wallpaper based on the scene information of the electronic device. This allows the theme wallpaper to adapt and change according to the actual scene information, presenting light and shadow patterns consistent with the real world.

[0022] As an example, for daytime (e.g., from sunrise to sunset), the closer the time is to noon, the cooler the color tone; the closer it is to sunrise and sunset, the warmer the color tone. As another example, for nighttime (e.g., from sunset to sunrise the next day), a fixed color tone can be used, such as a cool color tone.

[0023] As one possible implementation, the electronic device displaying the first interface includes: displaying the first interface when the electronic device is in an unlocked state, wherein the first theme wallpaper is the desktop wallpaper of the electronic device, and the aforementioned multiple first interface elements are elements on any desktop tab of the electronic device; or, the electronic device displaying the first interface includes: displaying the first interface when the electronic device is in an AOD state; wherein the first theme wallpaper is the AOD wallpaper of the electronic device, and the multiple first interface elements are AOD elements of the electronic device; or, the first interface is a wallpaper settings interface for setting wallpapers, wherein the first theme wallpaper is the theme wallpaper selected on the wallpaper settings interface, and the multiple first interface elements are elements on the main desktop screen of the electronic device. This improves the applicability of this solution to different display scenarios, enabling the interaction of light and shadow on the theme wallpaper for interface elements in different display scenarios, achieving spatial integration of interface elements and theme wallpaper on the display interface, and improving the visual experience provided to the user.

[0024] As one possible implementation, the aforementioned plurality of first interface elements are elements on a first desktop page of an electronic device. The method further includes: the electronic device acquiring a second theme wallpaper and a plurality of third interface elements to be displayed corresponding to a second desktop page; the electronic device determining, based on light source information, the projection of at least one fourth interface element among the plurality of third interface elements onto the second theme wallpaper; and the electronic device displaying a second interface in response to switching from the first desktop page to the second desktop page. The second interface includes the second theme wallpaper, the plurality of third interface elements, and the projection corresponding to at least one fourth interface element. This ensures that the light and shadow interaction of interface elements on the theme wallpaper can be achieved on any desktop page, realizing spatial integration of interface elements and theme wallpaper on the displayed interface, and improving the visual experience provided to the user.

[0025] As one possible implementation, the method further includes: during the transition from a first desktop tab to a second desktop tab, the electronic device displays multiple consecutive frames of a third interface; these multiple frames of the third interface are used to present, during the transition from the first desktop tab to the second desktop tab, the change in the projection of at least one second interface element onto the first theme wallpaper as the light source position changes, and the change in the projection of at least one fourth interface element onto the second theme wallpaper as the transition occurs. This ensures the continuity of spatial interaction between interface elements and the theme wallpaper during the transition from one desktop tab to another, and ensures the continuity of the visually created three-dimensional effect.

[0026] As one possible implementation, before the electronic device displays the first interface, the method further includes: in response to unlocking the electronic device, displaying multiple consecutive frames of a fourth interface, wherein the multiple consecutive frames of the fourth interface are used to present: the positional change of the projection of at least one second interface element onto the first theme wallpaper during the process of the light source position moving from a first preset moment to the current moment. In this way, the continuity of spatial interaction between interface elements and the theme wallpaper during the transition from the AOD scene to the desktop scene can be ensured, and the continuity of the visually created three-dimensional effect can be ensured.

[0027] As an example, the first preset time is sunrise.

[0028] As one possible implementation, when the electronic device is in AOD (Away From Home) mode and displaying the first interface, the device displays the first theme wallpaper with a nighttime lighting effect, and projects AOD elements onto the first theme wallpaper with a nighttime projection effect. This would create lighting and shadow effects that are consistent with the real world over time.

[0029] As one possible implementation, before displaying the first interface, the method further includes: the electronic device determining the occlusion relationship between at least one fifth interface element among a plurality of first interface elements and wallpaper elements on the first theme wallpaper. This further enhances the spatial interaction between interface elements and the theme wallpaper, thereby creating a more three-dimensional visual effect and further improving the visual experience provided to the user by the displayed interface.

[0030] As one possible implementation, the aforementioned at least one second interface element includes the aforementioned at least one fifth interface element. In this way, the electronic device can not only display the projection of interface elements onto the theme wallpaper, but also demonstrate the occlusion relationship between the interface elements and the theme wallpaper, greatly enhancing the spatial interaction between the interface elements and the theme wallpaper, thereby further creating a three-dimensional visual effect and improving the visual experience provided to the user.

[0031] As one possible implementation, the aforementioned electronic device determines the occlusion relationship between at least one fifth interface element among a plurality of first interface elements and wallpaper elements on the first theme wallpaper. This includes: the electronic device acquiring third depth information of the wallpaper area where each pixel of the at least one fifth interface element is located, and acquiring fourth depth information of each pixel of the at least one fifth interface element; the electronic device determining the occlusion relationship between each pixel of the at least one fifth interface element and each pixel of the wallpaper elements on the wallpaper area based on the third and fourth depth information. Thus, by analyzing the depth information of the at least one fifth interface element displayed on the first interface and the wallpaper elements on the first theme wallpaper, it is convenient to assign an independent depth value to each pixel of the at least one fifth interface element, thereby forming a specific occlusion relationship with the wallpaper object of the first theme wallpaper.

[0032] As one possible implementation, the electronic device determines the occlusion relationship between each pixel of at least one fifth interface element and each pixel of wallpaper elements on the wallpaper area based on third and fourth depth information. This includes: at least one fifth interface element includes a first pixel; the electronic device determines, based on the third and fourth depth information, that the depth value of the first pixel is less than the depth value of a pixel of the wallpaper element at the corresponding position, thus determining that the first pixel occludes a pixel of the wallpaper element at the corresponding position; and / or, at least one fifth interface element includes a second pixel; the electronic device determines, based on the third and fourth depth information, that the depth value of the first pixel is greater than or equal to the depth value of a pixel of the wallpaper element at the corresponding position, thus determining that the first pixel is occluded by a pixel of the wallpaper element at the corresponding position. In this way, by analyzing the depth information of the at least one fifth interface element displayed on the first interface and the wallpaper elements on the first theme wallpaper, it is convenient to assign independent depth values ​​to each pixel of the at least one fifth interface element, so that it forms a specific occlusion relationship with the wallpaper object of the first theme wallpaper.

[0033] As one possible implementation, the electronic device acquires fourth depth information for each pixel in at least one fifth interface element, including: if the pixel with the largest depth value on the wallpaper area is located in the center region of the wallpaper area, the electronic device determines that the depth value of each pixel of the fifth interface element at the corresponding position in the wallpaper area is less than a first value, where the first value is the minimum depth value of the wallpaper area; if the pixel with the largest depth value on the wallpaper area is located in the edge region of the wallpaper area, the electronic device determines that the depth value of each pixel of the fifth interface element at the corresponding position in the wallpaper area is greater than or equal to a second value and less than a third value, where the second value is the average depth value of the wallpaper area and the third value is the maximum depth value of the wallpaper area. In this way, each pixel of at least one fifth interface element can be reasonably assigned an independent depth value, forming a specific occlusion relationship with the wallpaper object of the first theme wallpaper.

[0034] As one possible implementation, if it is determined that the depth value of each pixel of the fifth interface element at the corresponding position of the wallpaper area is less than the first value, the electronic device obtains the fourth depth information of each pixel in at least one fifth interface element, further comprising: obtaining a depth value less than the first value from a plurality of pre-set stepped depth values ​​as the depth value of each pixel of the fifth interface element at the corresponding position of the wallpaper area. In this way, independent depth values ​​can be quickly and accurately assigned to each pixel of at least one fifth interface element, reducing the computational load of depth assignment.

[0035] As one possible implementation, if it is determined that the depth value of each pixel of the fifth interface element at the corresponding position of the wallpaper area is greater than or equal to the second value and less than the third value, the electronic device acquires the fourth depth information of each pixel in at least one fifth interface element. This further includes: the electronic device acquiring the minimum depth value of the wallpaper element on the wallpaper area; the electronic device determining that the depth value of each pixel of the fifth interface element at the corresponding position of the wallpaper area is less than the minimum depth value of the wallpaper element; and the electronic device acquiring, from a set of pre-set stepped depth values, a value greater than or equal to the second value, less than the third value, and less than the minimum depth value of the wallpaper element, as the depth value of each pixel of the fifth interface element at the corresponding position of the wallpaper area. In this way, it is possible to assign independent depth values ​​to each pixel of at least one fifth interface element in a more reasonable, rapid, and accurate manner.

[0036] As an example, the interface elements described in this application, such as the first interface element, the second interface element, the third interface element, the fourth interface element, or the fifth element, are elements displayed on the display interface. For example, they can be any of the following: application components, folders, application icons, application cards; the types of multiple interface elements can be the same or different or partially the same; application components can be, for example, clock components, date components, weather components, music components, etc.

[0037] As an example, the theme wallpapers described in this application, such as the first theme wallpaper, the second theme wallpaper, etc., may include one or more of the following: images, animated image frames.

[0038] As one possible implementation, the aforementioned at least one second interface element corresponds to an initial projection at a preset position. The electronic device determines the projection of at least one second interface element among multiple first interface elements onto the first theme wallpaper based on light source information. This includes: the electronic device determining the offset of each projection point in the initial projection of at least one second interface element based on the light source information, wherein the light source information includes time information; and the electronic device obtaining the projection of at least one second interface element onto the first theme wallpaper based on the initial projection of at least one second interface element and the offset of each projection point in the initial projection. This approach ensures the accuracy of projection-related calculations, guaranteeing a lighting effect consistent with the real world, while also simplifying projection-related calculations and improving computational efficiency.

[0039] In a second aspect, an electronic device is provided, comprising: a display screen for displaying an interface; a memory for storing computer program instructions; and a processor for executing the computer program instructions to support the electronic device in implementing the methods as described in any possible implementation of the first aspect.

[0040] Thirdly, a computer-readable storage medium is provided that stores computer program instructions that, when executed by a processor, implement the method as described in any possible implementation of the first aspect.

[0041] Fourthly, a computer program product containing instructions is provided, which, when run on a computer, causes the computer to implement the method as described in any possible implementation of the first aspect.

[0042] Fifthly, a chip system is provided, comprising processing circuitry and a storage medium storing computer program instructions; when executed by the processor, the computer program instructions implement the method as described in any possible implementation of the first aspect. The chip system may be composed of chips or may include chips and other discrete devices. Attached Figure Description

[0043] Figure 1 A schematic diagram of the hardware structure of an electronic device provided in an embodiment of this application; Figure 2 Schematic diagrams of several interface display scenarios provided in the embodiments of this application; Figure 3 A flowchart of an interface display method provided in an embodiment of this application; Figure 4 This application provides schematic diagrams of desktop pagination in several desktop scenarios. Figure 5A schematic diagram of the movement trajectory and initial projection of a light source provided in an embodiment of this application; Figure 6A A schematic diagram illustrating a method for determining the projection of interface elements onto a theme wallpaper, provided in an embodiment of this application; Figure 6B This is a schematic diagram illustrating a method for determining a wallpaper area provided in an embodiment of this application; Figure 7 This is a schematic diagram of the difference in depth information provided in an embodiment of this application; Figure 8 This is a schematic diagram of an offset distance determination method provided in an embodiment of this application; Figure 9 This is a schematic diagram illustrating the relationship between the display attributes of a projection point and the projection length, provided in an embodiment of this application. Figure 10 This application provides a schematic diagram of the interface display effect in the embodiments of the present application. Figure 1 ; Figure 11 This application provides a schematic diagram of the interface display effect in the embodiments of the present application. Figure 2 ; Figure 12 A schematic diagram of the interface display process provided in the embodiments of this application. Figure 1 ; Figure 13 A schematic diagram of the interface display process provided in the embodiments of this application. Figure 2 ; Figure 14 A schematic diagram of the interface display process provided in the embodiments of this application. Figure 3 ; Figure 15 A schematic diagram of the interface display process provided in the embodiments of this application. Figure 4 ; Figure 16 A schematic diagram of the interface display process provided in the embodiments of this application. Figure 5 ; Figure 17 A schematic diagram illustrating the process of occlusion between interface elements and wallpaper elements provided in this application embodiment; Figure 18 A flowchart illustrating a method for determining the occlusion relationship between interface elements and wallpaper elements, provided in an embodiment of this application; Figure 19 A flowchart illustrating a method for determining depth information of interface elements provided in this application embodiment; Figure 20 This is a schematic diagram illustrating a method for determining overlapping pixels provided in an embodiment of this application; Figure 21 This is a schematic diagram illustrating the occlusion relationship between four interface elements and wallpaper elements provided in the embodiments of this application. Detailed Implementation

[0044] The technical solutions of the embodiments of this application will be described below with reference to the accompanying drawings. In the description of the embodiments of this application, unless otherwise stated, " / " means "or," for example, A / B can mean A or B; "and / or" in this text is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, A and B existing simultaneously, and B existing alone. Furthermore, in the description of the embodiments of this application, "multiple" refers to two or more than two.

[0045] In the following, the terms "first," "second," etc., are used only to distinguish different descriptive objects and do not limit the position, order, priority, quantity, or content of the described objects. For example, if the described object is a "theme wallpaper," then the ordinal number before "theme wallpaper" in "first theme wallpaper," "second theme wallpaper," etc., does not limit the position or order of the "theme wallpapers," and "first" and "second" do not limit whether the "theme wallpapers" they modify are the same. As another example, if the described object is a "interface element," then the ordinal number before "interface element" in "first interface element," "second interface element," etc., does not limit whether the types of "interface elements" are the same. The use of ordinal numbers and other prefixes used to distinguish descriptive objects in the embodiments of this application does not constitute a limitation on the described object. The description of the described object is given in the claims or the context of the embodiments, and should not constitute an unnecessary limitation due to the use of such prefixes.

[0046] This application provides a low-cost, low-latency, and low-power lightweight interface display method. In interface display scenarios requiring the display of theme wallpapers and interface elements, this method determines the projection of interface elements onto the theme wallpaper based on light source information. Then, while displaying the theme wallpaper and interface elements, it simultaneously displays the projection of the interface elements at the corresponding positions on the theme wallpaper. This solution establishes spatial linkage between interface elements and theme wallpapers without adding extra hardware or costs, thereby creating a three-dimensional visual effect, such as achieving a near-naked-eye 3D visual effect, enhancing the user's visual experience and enjoyment. Furthermore, this solution does not require excessive complex calculations and processing; therefore, the power consumption and latency resulting from related calculations and processing are very low, providing a smooth three-dimensional visual effect.

[0047] The interface display method provided in this application can be applied to electronic devices. As an example, electronic devices include, but are not limited to, smartphones (including but not limited to candybar phones, foldable phones, etc.), netbooks, tablets, smart drawing tablets, handwriting tablets, smartwatches, smart bracelets, phone watches, smart glasses, smart cameras, PDAs, in-vehicle computers, vehicle infotainment systems, personal computers (PCs), personal digital assistants (PDAs), portable multimedia players (PMPs), augmented reality (AR) / virtual reality (VR) devices, smart TVs, projection devices, or motion-sensing game consoles in human-computer interaction scenarios, etc., devices with display functions. Alternatively, the electronic device may also be other types or structures of electronic devices, which are not limited in this application.

[0048] As an example, please refer to Figure 1 , Figure 1 A schematic diagram of the hardware structure of an electronic device provided in an embodiment of this application is shown.

[0049] like Figure 1 As shown, the electronic device includes a processor 110, a memory (including an external memory interface 120 and an internal memory 121), a universal serial bus (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, a headphone jack 170D, a sensor module 180, buttons 190, a motor 191, indicator lights 192, a camera 193, a display screen 194, etc.

[0050] The processor 110 includes one or more processing units. For example, the processor 110 may include an application processor (AP), a microcontroller unit (MCU), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural network processing unit (NPU). Different processing units may be independent devices or integrated into one or more processors. For example, the application processor may include a graphics processor and a digital signal processor, and the microcontroller unit may include a graphics processor.

[0051] The controller can generate operation control signals based on the instruction opcode and timing signals to complete the control of instruction fetching and execution.

[0052] The processor 110 may also include a memory for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory. This memory can store instructions or data that the processor 110 has just used or that are used repeatedly. If the processor 110 needs to use the instruction or data again, it can retrieve it directly from the memory. This avoids repeated accesses, reduces the waiting time of the processor 110, and thus improves the efficiency of the system.

[0053] In some embodiments of this application, the processor 110 can determine the projection of at least one interface element (such as a second interface element) on the theme wallpaper (such as the first theme wallpaper) based on light source information, as well as the acquired theme wallpaper to be displayed (such as a first theme wallpaper) and multiple interface elements (such as multiple first interface elements).

[0054] In some embodiments of this application, the processor 110 is able to determine the depth information (such as first depth information) of the wallpaper area where at least one interface element (such as a fifth interface element) in the theme wallpaper to be displayed (such as a first theme wallpaper) is located, and to determine the depth information (such as second depth information) of at least one fifth interface element. Based on the first depth information and the second depth information, the processor 110 determines the occlusion relationship between each pixel of at least one fifth interface element and each pixel of wallpaper element on the wallpaper area.

[0055] The wireless communication function of the electronic device can be realized through antenna 1, antenna 2, mobile communication module 150, wireless communication module 160, modem processor and baseband processor.

[0056] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in the electronic device can be used to cover one or more communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example, antenna 1 can be reused as a diversity antenna for a wireless local area network. In some other embodiments, the antennas can be used in conjunction with a tuning switch.

[0057] The wireless communication module 160 can provide solutions for wireless communication applications in electronic devices, including wireless local area networks (WLANs) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared (IR), and intrabody communication (IBC). The wireless communication module 160 can be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via antenna 2, performs frequency modulation and filtering of the electromagnetic wave signals, and sends the processed signal to processor 110. The wireless communication module 160 can also receive signals to be transmitted from processor 110, perform frequency modulation and amplification, and convert them into electromagnetic waves for radiation via antenna 2.

[0058] In some embodiments of this application, antenna 1 of the electronic device is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, enabling the electronic device to communicate with networks and other devices via wireless communication technology. The wireless communication technology may include Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Time-Division Code Division Multiple Access (TD-SCDMA), Long Term Evolution (LTE), BT, GNSS, WLAN, NFC, FM, IR technology, and / or IBC technology. The GNSS may include Global Positioning System (GPS), Global Navigation Satellite System (GLONASS), BeiDou Navigation Satellite System (BDS), Quasi-Zenith Satellite System (QZSS), and / or Satellite Based Augmentation Systems (SBAS).

[0059] Display 194 includes a display panel. As an example, the display panel may be a low-temperature poly-silicon (LTPS) display, a low-temperature polycrystalline oxide (LTPO) display, a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode (AMOLED) display, a flexible light-emitting diode (FLED), a Miniled LED, a MicroLED, a Micro-OLED, a quantum dot light-emitting diode (QLED), etc.

[0060] In this embodiment of the application, the electronic device may include one or more displays 194.

[0061] Electronic devices implement display functions through GPUs, displays 194, application processors, microcontrollers, etc. A GPU is a microprocessor for image processing, connected to the display 194, application processor, and microcontroller. The GPU performs mathematical and geometric calculations for drawing, rendering, or compositing graphics. Processor 110 may include one or more GPUs, which execute program instructions to generate or modify display information.

[0062] In some embodiments of this application, the electronic device can display an interface through an AP, GPU, display screen 194, etc., including but not limited to: displaying an interface including interface elements, theme wallpaper, and projection of interface elements onto the theme wallpaper; displaying an interface including interface elements, theme wallpaper, and the occlusion relationship between interface elements and theme wallpaper; and displaying an interface including interface elements, theme wallpaper, projection of interface elements onto the theme wallpaper, and the occlusion relationship between interface elements and theme wallpaper.

[0063] Electronic devices can perform shooting functions through ISP, camera 193, video codec, GPU, display 194, and application processor. In this application, camera 193 may include a front-facing camera of the electronic device, which may be an optical zoom lens, etc., and this application is not limited thereto.

[0064] The sensor module 180 includes a touch sensor 180A and a pressure sensor 180B. In some embodiments, the sensor module 180 may also include, but is not limited to, one or more of the following: a temperature sensor, a gyroscope sensor, a barometric pressure sensor, a magnetic sensor, an accelerometer, a distance sensor, a proximity sensor, a fingerprint sensor, an ambient light sensor, a bone conduction sensor, etc.

[0065] Touch sensor 180A, also known as a "touch device," can be located on display screen 194. The touch sensor 180A and display screen 194 together form a touchscreen, also known as a "touchscreen." Touch sensor 180A detects touch operations applied to or near it. Touch sensor 180A can transmit the detected touch operation to processor 110 (e.g., application processor, microcontroller unit) to determine the type of touch event. Visual output related to the touch operation can be provided through display screen 194. In other embodiments, touch sensor 180A may also be located at a different location than display screen 194.

[0066] Pressure sensor 180B is used to sense pressure signals and convert them into electrical signals. In some embodiments, pressure sensor 180A can be disposed on display screen 194. There are many types of pressure sensors, such as resistive pressure sensors, inductive pressure sensors, and capacitive pressure sensors. A capacitive pressure sensor may include at least two electrodes; when a force is applied to the capacitive pressure sensor, the capacitance between the electrodes changes. The electronic device determines the pressure intensity based on the change in capacitance. When a touch operation is applied to display screen 194, the electronic device can detect the intensity of the touch operation through the pressure sensor. The electronic device can also calculate the touch position based on the detection signal from pressure sensor 180B. In some embodiments, touch operations applied to the same touch position but with different touch operation intensities can correspond to different operation commands. For example, when a touch operation with an intensity less than a first pressure threshold is applied to the SMS application icon, a command to view an SMS message is executed. When a touch operation with an intensity greater than or equal to the first pressure threshold is applied to the SMS application icon, a command to create a new SMS message is executed.

[0067] In this embodiment of the application, the sensor module 180, such as touch sensor 180A and / or pressure sensor 180B, can be used to detect one or more of the following user operations: user theme wallpaper setting operation, user unlocking operation on the AOD interface, user swiping left on the desktop home screen, user swiping right on the desktop home screen, user selecting another desktop wallpaper in wallpaper settings, user selecting another AOD wallpaper in wallpaper settings, etc.

[0068] The external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device. The external memory card communicates with the processor 110 through the external memory interface 120 to perform data storage functions.

[0069] Internal memory 121 may include one or more random access memory (RAM) and one or more non-volatile memory (NVM). The RAM can be directly read and written by the processor 110 and can be used to store executable programs (e.g., machine instructions) of the operating system or other running programs, as well as user and application data. The NVM can also store executable programs and user and application data, and can be pre-loaded into the RAM for direct read and write operations by the processor 110.

[0070] In this embodiment of the application, the external storage card and / or internal memory 121 can be used to store data related to the implementation of the present invention, such as, but not limited to, one or more of the following: interface element data, theme wallpaper data, display data stream, drawing rendering layers, etc.

[0071] Electronic devices can perform audio functions such as music playback and recording through audio modules 170, speakers 170A, receivers 170B, microphones 170C, and access points (APs).

[0072] about Figure 1 The descriptions of the charging management module 140, power management module 141, battery 142, motor 191, indicator light 192, etc. shown can be found in conventional technology and will not be elaborated here.

[0073] This application Figure 1 The illustrated structure does not constitute a specific limitation on the electronic device. In other embodiments of this application, the electronic device may include more or fewer components than illustrated, or combine some components, or split some components, or have different component arrangements. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

[0074] The solution provided in this application can be applied to, but is not limited to, always-on display (AOD) scenarios, desktop scenarios, wallpaper setting scenarios, and other interface display scenarios. The electronic device has a desktop application and a theme application installed. The desktop application provides a graphical interface, such as a desktop with one or more elements, for user operation. The theme application provides themed wallpapers, such as themed wallpapers for AOD scenarios, desktop scenarios, wallpaper setting scenarios, etc., providing users with a rich visual and engaging experience.

[0075] As an example, please refer to Figure 2 , Figure 2 The illustrations show several interface display scenarios provided in the embodiments of this application. Figure 2 (a) in the example shows an interface diagram including theme wallpaper and interface elements in an AOD scenario, with the electronic device in AOD state as an example. Figure 2 (b) in the example shows a schematic diagram of an interface including theme wallpaper and interface elements in a desktop scenario, with the electronic device in an unlocked state. Figure 2 (c) in the example shows an interface diagram of a wallpaper setting scenario, including the theme wallpaper and interface elements, using the example of an electronic device receiving the user's theme wallpaper setting operation.

[0076] like Figure 2 (a) Figure 2 (b) and Figure 2 As shown in (c), if the interface display includes theme wallpaper and interface elements based on the traditional solution, since the layer where the interface elements are located is floating above the layer where the theme wallpaper is located and the two are independent of each other, there is a lack of interactivity between the theme wallpaper and the interface elements. As a result, the theme wallpaper and the interface elements do not have a sense of spatial depth, and the visual experience and fun experience that can be brought to the user are limited.

[0077] The interface display method provided in this application embodiment is used for... Figure 2 In the AOD scene shown in (a), the electronic device can determine the projection of an AOD element (such as a clock component) onto the AOD wallpaper based on the light source information. When displaying an AOD interface that includes both the AOD element and the AOD wallpaper, the projection of the AOD element is displayed at the corresponding position on the AOD wallpaper. This establishes spatial linkage between the AOD element and the AOD wallpaper, thereby creating a three-dimensional visual effect, such as achieving a visual effect close to naked-eye 3D, providing users with a rich visual and fun experience in the AOD scene.

[0078] for Figure 2In the desktop scene shown in (b), the electronic device can determine the projection of desktop elements (such as application icons, application components (such as clock components), folders, application cards, etc.) onto the desktop wallpaper based on light source information. When displaying a desktop that includes both desktop elements and desktop wallpaper, the projection of the desktop elements is displayed at the corresponding position on the desktop wallpaper. This establishes spatial linkage between desktop elements and desktop wallpaper, thereby creating a three-dimensional visual effect, such as achieving a visual effect close to naked-eye 3D, providing users with a rich visual and fun experience in the desktop scene.

[0079] for Figure 2 In the wallpaper setting scenario shown in (c), the electronic device can determine the projection of desktop elements (such as application icons, application components (such as clock components), folders, application cards, etc.) onto the user-selected desktop wallpaper based on light source information, and display the projection of the desktop elements at the corresponding position on the user-selected desktop wallpaper when displaying the effect image. This establishes spatial linkage between the desktop elements and the desktop wallpaper in the effect image, allowing the user to intuitively feel the three-dimensional visual effect created by the desktop elements on the user-selected desktop wallpaper.

[0080] Figure 2 (c) uses user desktop wallpaper selection as an example. In some embodiments, the electronic device can determine the projection of AOD elements (such as clock components) onto the selected AOD wallpaper based on light source information when the user selects an AOD wallpaper, and display the projection of the AOD elements at the corresponding position on the selected AOD wallpaper when displaying the effect image. This establishes spatial linkage between the AOD elements and the AOD wallpaper in the effect image, allowing the user to intuitively perceive the three-dimensional visual effect created by the AOD elements on the selected AOD wallpaper.

[0081] The interface display method provided in the embodiments of this application will be described in detail below.

[0082] As an example, please refer to Figure 3 , Figure 3 A flowchart of an interface display method provided in an embodiment of this application is shown.

[0083] like Figure 3 As shown, the interface display process includes S301-S303: S301, The electronic device acquires the first theme wallpaper and multiple first interface elements to be displayed.

[0084] In some embodiments of this application, the first theme wallpaper may be a static image, such as an image provided by a theme application, an image stored in an electronic device, etc.; or, the first theme wallpaper may be an image frame (hereinafter referred to as "animated image frame") in an animated video, such as an animated image frame in an animated video provided by a theme application, an animated image frame in an animated video created by a user, etc., wherein different image frames in the animated video may correspond to different weather, time, location, etc.; or, the first theme wallpaper may also be other forms of images, which are not limited in the embodiments of this application.

[0085] In some embodiments of this application, the first interface element can be one or more of the following: application icon, application component (such as clock component, date component, etc.), folder, application card. For example, the application component can be a clock component, date component, weather component, music component, etc. Multiple second interface elements can be of the same or different types, or partially the same.

[0086] As an example, when an electronic device is in AOD (Away From Home) mode, the primary theme wallpaper is an AOD wallpaper, and the primary interface element is an AOD element. For example, the primary theme wallpaper is... Figure 2 The AOD wallpaper shown in (a) includes the following first interface elements: Figure 2 The clock component shown in (a) or the first interface element may also include one or more other elements such as a date component.

[0087] As an example, the electronic device is unlocked, the primary theme wallpaper is the desktop wallpaper, and the primary interface element is the desktop element. For example, the primary theme wallpaper is... Figure 2 The desktop wallpaper shown in (b) includes the following first interface elements: Figure 2 The clock component, application icon, application card, folder, or first interface element shown in (b) may also include one or more other elements such as a date component.

[0088] The desktop may include one or more desktop tabs. If the electronic device is unlocked, assuming the desktop includes multiple desktop tabs, the first theme wallpaper is the desktop wallpaper, and the first interface element may be an element on any desktop tab. In this example, the main wallpaper of multiple desktop tabs can be the same, such as the first theme wallpaper being a narrow wallpaper, with each desktop tab having the same theme wallpaper; or, the main wallpapers of multiple desktop tabs can be different, such as the first theme wallpaper being a wide wallpaper, with each desktop tab's theme wallpaper being a portion of that wide wallpaper. The theme wallpapers of multiple desktop tabs may or may not overlap, without limitation.

[0089] For example, please refer to Figure 4 , Figure 4The illustrations show desktop pagination diagrams for several desktop scenarios provided in embodiments of this application. Figure 4 (a) Figure 4 (b) and Figure 4 (c) in the example shows a diagram where the theme wallpapers of the left swipe screen (also known as the negative one screen), the main screen and the right swipe screen are the same narrow wallpaper. Figure 4 (d) Figure 4 (e) and Figure 4 (f) in the example uses multiple desktop tabs including the left swipe, the main screen, and the right swipe, illustrating how the theme wallpapers of the left swipe, the main screen, and the right swipe are each part of a wide-format wallpaper.

[0090] As an example, the electronic device receives a user's command to set a theme wallpaper. The first theme wallpaper is the user-selected desktop wallpaper, and the first interface element is a desktop element. Alternatively, the first theme wallpaper is the user-selected AOD wallpaper, and the first interface element is an AOD element. For example, the first theme wallpaper is... Figure 2 The desktop wallpaper shown in (c) of the image includes the following first interface elements: Figure 2 The clock component, application icon, application card, folder, or other elements in the effect diagram shown in (c) may also include one or more other elements such as a date component.

[0091] S302. The electronic device determines the projection of at least one second interface element among multiple first interface elements onto the first theme wallpaper based on the light source information, wherein the light source information includes the position of the light source.

[0092] In this embodiment, the second interface element is the interface element with projection among a plurality of first interface elements. That is, all of the plurality of first interface elements may have projection, or only some of them may have projection.

[0093] In this embodiment, all pixels on the second interface element may have projections, or only some may have projections; there is no limitation. Alternatively, based on the projection calculation method, some elements may have projection positions outside the screen display area, in which case there is no need to display the projection.

[0094] As an example, light source information includes, but is not limited to, sunlight light source information and / or moonlight light source information. It should be noted that sunlight light source information and / or moonlight light source information are actually related to a specific time, so in some embodiments, sunlight light source information and / or moonlight light source information can also be equated to time information.

[0095] As one possible implementation, electronic devices can acquire scene information and determine light source information based on it. Scene information includes one or more of the following: time information, weather information, and location information. It's understandable that at different times (seasons), in different weather conditions, or at different locations, sunlight / moonlight may be positioned differently relative to the electronic device, resulting in varying angles of illumination from sunlight / moonlight on the device's screen, and consequently, different projections of interface elements onto the theme wallpaper. To achieve lighting effects consistent with the real world, the electronic device analyzes scene information to accurately determine the light source information.

[0096] As an example, an electronic device includes a module for acquiring its own location, including but not limited to a positioning device. The electronic device can acquire location information through this module. Exemplarily, the location information includes, but is not limited to, one or more of latitude and longitude coordinates and / or time zone information.

[0097] As an example, an electronic device can obtain time and weather information from a network. Time information includes the exact time of day, and optionally, it may also include seasonal information and / or date. Weather information includes, but is not limited to, visibility, humidity, solar altitude angle, lunar altitude angle, cloud cover, and one or more of these parameters. Time information can also be obtained by the electronic device itself.

[0098] As one possible implementation, the electronic device determines the light source information based on scene information, including: the electronic device determines the position of the light source from the light source's movement trajectory based on the scene information. The light source's movement trajectory includes: the sun's movement trajectory determined based on the sun's movement trajectory relative to the earth, and / or, the moon's movement trajectory determined based on the sun's and moon's movement trajectories relative to the earth.

[0099] As an example, please refer to Figure 5 , Figure 5 Taking the sun as an example, a schematic diagram of the movement trajectory and initial projection of a light source provided in an embodiment of this application is shown. Figure 5 As shown, the sun's trajectory can characterize how the sun's position relative to electronic devices changes over time.

[0100] As an example, the trajectory of the sun or moon is determined by an electronic device based on geographical knowledge, by analyzing one or more scene information such as time information and the location information of the electronic device. The trajectory of the sun includes the trajectory of the sun corresponding to different scene information, and the trajectory of the moon includes the trajectory of the moon corresponding to different scene information.

[0101] For example, electronic devices can use geographical knowledge and a 3D model of a galaxy to calculate the spatial trajectory of a light source in real time. This trajectory can then be transformed to obtain the actual trajectory of the light source, such as the trajectory of the sun or the moon. The trajectory transformation involves migrating points on the spatial trajectory to the coordinate system of the electronic device's screen according to a pre-defined logic. For instance, there might be an angle between the light source's trajectory and the plane of the screen. Depending on the migration logic, the resulting trajectory may differ; for example, it might be circular or elliptical.

[0102] For example, such as Figure 5 As shown in (a), a spatial rectangular coordinate system can be established to determine the position of the electronic device's screen in that system. For example, if the screen of the electronic device is located on the yoz plane (e.g., ...), ... Figure 5 (as shown in (a)) or located on a plane parallel to the yoz plane. The electronic device migrates the points on the spatial movement trajectory of the light source to a spatial rectangular coordinate system according to a preset logic, thus obtaining the light source movement trajectory 510. For example, the electronic device migrates the points on the spatial movement trajectory of the light source to a spatial rectangular coordinate system based on the center point of the screen area. After the migration is completed, the spatial rectangular coordinate system includes the screen area on the yoz plane and the light source movement trajectory 510 which has an angle with the yoz plane. The electronic device can determine the projection of interface elements based on the screen area and the light source movement trajectory 510 in this rectangular coordinate system.

[0103] As an example, the sun's movement trajectory or the moon's movement trajectory is determined by developers based on geographical knowledge, through analysis of one or more factors such as different time information and different location information of electronic devices, and is pre-set in the electronic device. The sun's movement trajectory includes the sun's movement trajectory corresponding to different scene information, and the moon's movement trajectory includes the moon's movement trajectory corresponding to different scene information.

[0104] For example, developers can pre-calculate a set of spatial movement trajectories based on geographical knowledge and a 3D model of a galaxy, taking into account one or more factors such as different time information and the different locations of electronic devices. These trajectories can then be transformed to obtain a set of light source movement trajectories, such as a set including the sun's movement trajectory and / or the moon's movement trajectory. This set of light source movement trajectories includes multiple light source movement trajectories corresponding to different time and location information. Electronic devices can then determine the corresponding light source movement trajectory from this set based on scene information, and determine the light source's location based on the determined light source movement trajectory.

[0105] By pre-acquiring the light source's movement trajectory and pre-setting it in electronic devices, developers can reduce the power consumption associated with determining the light source's position while ensuring accuracy in the calculation. For example, compared to using a 3D galaxy model to calculate the light source's position, a single calculation can be used directly, avoiding the extensive computation required for real-time calculations based on the galaxy's 3D model and thus reducing the power consumption associated with determining the light source's position.

[0106] The methods described above for determining the trajectory of the sun or moon are merely examples. In practical applications, electronic devices may determine the trajectory of the sun or moon in one or more ways, including but not limited to real-time calculation, periodic calculation, timed calculation, and calculation triggered by specific conditions. This application does not limit these methods. For example, specific conditions may include, but are not limited to, significant changes in the location of the electronic device (such as exceeding a certain distance threshold) or significant changes in weather (such as a change from sunny to rainy, sunny to cloudy, rainy to sunny, or cloudy to sunny).

[0107] Optionally, the light source information may also include the light source intensity. For example, an electronic device can determine the light source intensity by simulating a scene without any obstructions (such as cloud cover) based on one or more scene information such as time information and weather information.

[0108] As one possible implementation, the electronic device determines the projection of at least one second interface element among multiple first interface elements onto a first theme wallpaper based on light source information. This includes: the electronic device determining the projection direction and projection length of each pixel based on the positional relationship between the light source position and the pixels of at least one second interface element, where the projection length represents the distance between the pixel of the interface element and the corresponding pixel on the projection; and the electronic device determining the projection of at least one second interface element onto the first theme wallpaper based on the projection direction and projection length corresponding to each pixel. The positional relationship between the light source position and the pixels of the second interface element includes: the distance between the light source position and the pixels on the second interface element, and the angle of the light source position relative to the pixels on the second interface element (such as the angle between the line connecting the light source position and the pixel and the plane of the screen).

[0109] As one possible implementation, at least one second interface element is given an initial projection at a preset position. The initial projection of pixels on the second interface element can be a projection of pixels at a specific time (e.g., 12:00 noon) pre-calculated by the electronic device. Figure 5 The projection directly below the clock component 0808 in (b) is the initial projection 520.

[0110] Optionally, the initial projection position is calculated based on the position information of the electronic device. Optionally, when the position of the electronic device changes significantly, the initial projection is recalculated.

[0111] Optionally, the initial projection includes multiple projection points. For example, each projection point corresponds one-to-one with a physical pixel on the screen where the initial projection is displayed.

[0112] In some embodiments, determining the projection of at least one second interface element among the plurality of first interface elements onto the first theme wallpaper based on light source information includes: determining the offset of each projection point in the initial projection of the at least one second interface element based on light source information (or based on time information); and obtaining the projection of the at least one second interface element onto the first theme wallpaper based on the initial projection of the at least one second interface element and the offset of each projection point in the initial projection. That is, when determining the projection of at least one second interface element, it is calculated based on each projection point on the initial projection of the at least one second interface element.

[0113] Optionally, when determining the offset of each projection point in the initial projection of the at least one second interface element, firstly, based on the current time, the position of the light source is determined in the light source movement trajectory, and then the coordinates of the light source position in the Cartesian coordinate system are determined. Then, the coordinate offset value between the current light source position and the initial light source position is determined. The initial light source position is the position where the light source was located when the initial projection was calculated. The coordinate offset value includes, for example, offset values ​​in the x, y, and z directions. Finally, the offset value of each projection point is calculated based on the coordinate offset value.

[0114] Optionally, when calculating the offset values ​​of each projection point based on the coordinate offset values, the offset values ​​in the x and y directions are mapped to the offset values ​​of the projection points on the plane of the screen according to a preset function. Then, the offset coefficients in the x and y directions are calculated based on the offset value in the z-axis direction. Based on the offset values ​​and offset coefficients, the position of the projection point after the initial projection point has been offset is obtained. Optionally, the offset coefficient functions in the x and y directions are different so that the offset values ​​in the x and y directions are not synchronized during magnification, thus enabling different tilting and stretching effects of the projection. It can be understood that the calculation of the coordinate offset values ​​of the light source and the calculation of the offset values ​​of the projection points can be performed in different coordinate systems. For example, the coordinate offset values ​​of the light source are calculated in a spatial coordinate system, while the offset values ​​of the projection points are calculated in a two-dimensional coordinate system on the plane of the screen. Then, the offset values ​​in the x and y directions in the spatial coordinate system are used to calculate the offset values ​​of the projection points in the x and y directions in the two-dimensional coordinate system, and the offset values ​​in the z-axis direction are used to calculate the offset coefficients.

[0115] Optionally, the offset direction of the initial projection point can be determined according to a preset rule so that the offset direction of light and shadow conforms to the offset in the physical world.

[0116] As an example, please refer to Figure 6A , Figure 6A This illustration shows a method for determining the projection of interface elements onto a theme wallpaper, according to an embodiment of this application. Figure 6A As shown, the sun icon next to the electronic device represents the sun, and the device's desktop includes a clock component. Based on scene information such as the current time or location, the electronic device determines the sun's position from the movement trajectory of light sources (such as a real-time calculated light source movement trajectory or a pre-set light source movement trajectory). Then, based on the sun's position relative to the clock component, such as distance and angle, the electronic device determines the projection points of each pixel on the clock component onto the theme wallpaper. For example, under the sun's illumination, pixel X on the clock component projects to point X1 on the theme wallpaper, and the distance L between pixel X and projection point X1 is the projection length.

[0117] As one possible implementation, the electronic device determines the projection direction and projection length of each pixel based on the positional relationship between the light source position and the pixel of at least one second interface element, including: the electronic device determining the wallpaper area where at least one second interface element is located; the electronic device acquiring first depth information of multiple pixels in the wallpaper area where at least one second interface element is located, and acquiring second depth information of multiple pixels in the at least one second interface element; the electronic device calculating the offset of the projection direction and projection length of each pixel based on the first depth information and the second depth information, and then determining the projection point of at least one second interface element on the first theme wallpaper.

[0118] As an example, an electronic device determines the wallpaper area where at least one second interface element is located, including: the electronic device acquiring a first display position of each pixel of the at least one second interface element and a second display position of each pixel of a first theme wallpaper; the electronic device determining the wallpaper area where the at least one second interface element is located based on the first and second display positions. For example, the electronic device directly acquires the display position of the at least one second interface element, i.e., the first display position, from a display data stream; and the electronic device directly acquires the display position of each pixel of the first theme wallpaper, i.e., the second display position, from a display data stream.

[0119] It should be noted that the pixels mentioned in the embodiments of this application all refer to image pixels. For example, the pixels of an interface element refer to the image pixels of the interface element, and the pixels of a theme wallpaper refer to the image pixels of the theme wallpaper.

[0120] For example, the first display position may be a set of positions, such as a first position set, which includes multiple positions, each representing the display position of a pixel of the second interface element. Similarly, the second display position may be a set of positions, such as a second position set, which includes multiple positions, each representing the display position of a pixel of the first theme wallpaper. Based on this, the electronic device can determine a minimum area region based on the first and second position sets, such that the entire first position set is located within this minimum area region, and that this minimum area region has a mapping relationship with the second position set. This minimum area region is the wallpaper area where the second interface element is located.

[0121] As an example, please refer to Figure 6B , Figure 6B Taking the clock component in the left image as the second interface element and the wide-format wallpaper in the right image as the first theme wallpaper as an example, this illustration shows a method for determining a wallpaper area provided by an embodiment of this application. Figure 6B As shown, the electronic device determines a minimum area region based on the position of each pixel of the clock component (i.e., the first display position), such as... Figure 6B The area shown by the dashed box in the middle left image corresponds to the display position of the clock component. Furthermore, the electronic device... Figure 6B The display position of the clock component shown in the dashed box in the middle left image, along with the positions of each pixel in the wide-format wallpaper (i.e., the second display position), determines the corresponding position in the first theme wallpaper, as follows: Figure 6B The area shown by the dashed box in the middle right image is the wallpaper area.

[0122] As an example, the electronic device obtains first depth information of the wallpaper area where at least one second interface element is located, including: the electronic device performs depth analysis on the wallpaper area where at least one second interface element is located to obtain first depth information; the electronic device obtains second depth information of multiple pixels in at least one second interface element, including: the electronic device performs depth analysis on at least one second interface element to obtain second depth information.

[0123] As an example, the electronic device obtains first depth information of the wallpaper area where at least one second interface element is located, including: the electronic device performs depth analysis on the wallpaper area where at least one second interface element is located to obtain first depth information; the electronic device obtains second depth information of multiple pixels in at least one second interface element, including: the electronic device obtains pre-set second depth information of at least one second interface element.

[0124] As another example, the electronic device obtains first depth information of the wallpaper area where at least one second interface element is located, including: the electronic device performs depth analysis on the wallpaper area where at least one second interface element is located to obtain first depth information; the electronic device obtains second depth information of multiple pixels in at least one second interface element, including: the electronic device determines the second depth information of at least one second interface element based on the first depth information.

[0125] For example, an electronic device determines the second depth information of at least one second interface element based on the first depth information, including: the electronic device acquiring the minimum depth information (denoted as "first value"), average depth information (denoted as "second value"), and maximum depth information (denoted as "third value") of the wallpaper area based on the first depth information; the electronic device determining whether the pixel with the maximum depth value is located in the edge area of ​​the wallpaper area; if the pixel with the maximum depth value in the wallpaper area is located in the center area of ​​the wallpaper area, the electronic device determining that the depth value of each pixel of the second interface element at the corresponding position in the wallpaper area is less than the first value; if the pixel with the maximum depth value in the wallpaper area is located in the edge area of ​​the wallpaper area, the electronic device determining that the depth value of each pixel of the second interface element at the corresponding position in the wallpaper area is greater than or equal to the second value and less than the third value. For example, the electronic device can acquire a depth value that satisfies the above conditions from a plurality of pre-set stepped depth values ​​as the depth value of each pixel of the second interface element at the corresponding position in the wallpaper area.

[0126] As an example, depth information (such as first depth information and / or second depth information) may include one or more of the following information about a pixel: grayscale value, color encoding, depth value, etc.

[0127] For example, taking the first depth information as an example, the electronic device can perform grayscale processing on the wallpaper area where the second interface element is located to obtain the grayscale value of each pixel in the wallpaper area, and use the grayscale value of each pixel as the depth information of the corresponding pixel to obtain the first depth information. For example, the grayscale value may range from 0 to 255 (or it can be normalized to 0 to 100). As another example, the electronic device can perform spectral mapping on the wallpaper area where the second interface element is located to obtain the color code of each pixel in the wallpaper area, and use the color code of each pixel as the first depth information of the corresponding pixel. As yet another example, the electronic device can perform depth analysis on the wallpaper area where the second interface element is located to obtain the depth value of each pixel in the wallpaper area, and use the depth value of each pixel as the first depth information of the corresponding pixel.

[0128] As an example, an electronic device can determine the projection direction and projection length of each pixel on the theme wallpaper based on the positional relationship of the light source relative to the position of each pixel on the second interface element. Then, it can use an offset function to calculate the offset of the projection direction and projection length of each pixel and correct the projection direction and projection length to determine the projection point of each pixel on the first theme wallpaper.

[0129] The offset distance is directly proportional to the offset coefficient; that is, the larger the offset coefficient, the larger the offset distance; the smaller the offset coefficient, the smaller the offset distance.

[0130] As an example, the offset coefficient (such as denoted as f(m)) is proportional to the difference between the second depth information and the first depth information. For example, as... Figure 7 As shown, D m -d m The larger the result, the larger the offset coefficient corresponding to clock component 710, and the larger the offset distance of the projection 720 of clock component 710; D m -d m The smaller the result, the smaller the offset coefficient corresponding to clock component 710, and the smaller the offset distance of the projection 730 of clock component 710. m d represents the depth information (i.e., the second depth information) of pixel x on the interface element. m This refers to the depth information (i.e., the first depth information) of the pixel at the position corresponding to pixel x in the wallpaper area.

[0131] As an example, when performing offset calculations, an electronic device can calculate an offset coefficient for a single pixel on an interface element.

[0132] For example, the electronic device calculates the offset coefficient corresponding to each pixel based on the depth information of each pixel on the interface element (i.e., the second depth information) and the depth information of the corresponding pixel in the wallpaper area (i.e., the first depth information); and after using the offset coefficient corresponding to each pixel to offset the projection direction and projection length of each pixel, it determines the offset distance corresponding to each pixel, and then determines the projection point of each pixel on the first theme wallpaper.

[0133] As an example, when performing offset calculations, an electronic device can calculate the horizontal offset distance in the horizontal direction and the vertical offset distance in the vertical direction for a single pixel on an interface element.

[0134] As an example, when performing offset calculations, the electronic device calculates the horizontal offset coefficient f in the horizontal direction (X direction) for each pixel on the interface element. X (m) and vertical offset coefficient f in the vertical direction (Y direction) Y(m). For example, the electronic device calculates the horizontal offset coefficient and vertical offset coefficient corresponding to each pixel based on the depth information of each pixel on the interface element (i.e., the second depth information) and the depth information of the corresponding pixel in the wallpaper area (i.e., the first depth information); and uses the horizontal offset coefficient corresponding to each pixel to offset the horizontal projection length of each pixel to determine the horizontal offset distance corresponding to each pixel, and uses the vertical offset coefficient corresponding to each pixel to offset the vertical projection length of each pixel to determine the vertical offset distance corresponding to each pixel; and determines the offset distance corresponding to each pixel based on the horizontal offset distance and vertical offset distance corresponding to each pixel, thereby determining the projection point of each pixel on the first theme wallpaper.

[0135] As an example, please refer to Figure 8 , Figure 8 A schematic diagram of an offset distance determination method provided in an embodiment of this application is shown. Figure 8 As shown, the desktop of the electronic device includes a clock component. After determining the projection position X1 of pixel X on the theme wallpaper based on the position of the light source relative to the pixel X of the clock component, the electronic device calculates the horizontal projection length L1 of pixel X of the clock component based on the horizontal offset coefficient, and calculates the vertical projection length L2 of pixel X of the clock component based on the vertical offset coefficient. Finally, the projection point of pixel X on the theme wallpaper is determined to be X. 11 .

[0136] For example, suppose Figure 8 The horizontal offset coefficient is 1.1, and the vertical offset coefficient is 0.85. Therefore, the final projection point X of pixel X on the theme wallpaper is determined. 11 The coordinates of the point X are at a distance of (1.1L1, 0.85L2) relative to pixel X. The projection point X can be calculated based on the coordinates of pixel X and this distance. 11 The coordinates.

[0137] In the embodiments of this application, the offset functions used in calculating the horizontal offset coefficient and the vertical offset coefficient may be the same or different, and no limitation is made.

[0138] As one possible implementation, the electronic device can calculate the offset of the projection direction and projection length of each pixel based on the first depth information and the second depth information when the time information meets a first specific time range; and / or, when the time information meets a second specific time range, it can choose not to calculate the offset of the projection direction and projection length of each pixel based on the first depth information and the second depth information. For example, the first specific time range includes, but is not limited to, the time from sunrise to sunset; the second specific time range includes, but is not limited to, the time from sunset to sunrise the next day.

[0139] By determining the offset distance of the projection point of each pixel on the interface element onto the first theme wallpaper, the final projection shape of each second interface element can be obtained. This projection shape can produce different deformations depending on the shape and / or size of the second interface element and the depth information of the first theme wallpaper, thus presenting a light and shadow effect consistent with the real world.

[0140] In some embodiments of this application, the electronic device can determine the projection of all first interface elements among a plurality of first interface elements onto a first theme wallpaper based on light source information. That is, the aforementioned at least one second interface element is all of the plurality of first interface elements.

[0141] For example, in an AOD (Away From Home) scenario, an electronic device can determine the projection of all AOD elements on the screen onto the AOD wallpaper based on light source information. Similarly, in a desktop scenario, an electronic device can determine the projection of all desktop elements on the screen onto the desktop wallpaper based on light source information. Furthermore, in a wallpaper setting scenario, an electronic device can determine the projection of all AOD elements in the mockup onto the AOD wallpaper, or the projection of all desktop elements in the mockup onto the desktop wallpaper, based on light source information.

[0142] In some embodiments of this application, the electronic device can determine the projection of a portion of the second interface elements among a plurality of first interface elements onto a first theme wallpaper based on light source information. That is, the aforementioned at least one second interface element is a portion of the plurality of first interface elements.

[0143] For example, in an AOD (Away From Home) scenario, an electronic device can determine the projection of a portion of the AOD elements on the screen onto the AOD wallpaper based on light source information. Similarly, in a desktop scenario, an electronic device can determine the projection of a portion of the desktop elements on the screen onto the desktop wallpaper based on light source information. Furthermore, in a wallpaper setting scenario, an electronic device can determine the projection of a portion of the AOD elements in the mockup onto the AOD wallpaper, or the projection of a portion of the desktop elements in the mockup onto the desktop wallpaper, based on light source information.

[0144] S303, The electronic device displays a first interface, which includes a first theme wallpaper, multiple first interface elements, and at least one projection corresponding to a second interface element.

[0145] In some embodiments of this application, the electronic device can perform interface rendering based on the projection of a first theme wallpaper, multiple first interface elements, and at least one second interface element, and then display the first interface on a display screen.

[0146] As an example, an electronic device renders a first theme wallpaper, multiple first interface elements, and the projection of at least one second interface element from among the multiple first interface elements on different layers. For instance, the electronic device renders the first theme wallpaper on the first layer, the multiple first interface elements on the second layer, and the projection of at least one second interface element on the third layer. In this case, the electronic device overlays and combines the first, second, and third layers together in a bottom-up order before displaying it.

[0147] As an example, an electronic device renders the first theme wallpaper on one layer, and the projections of multiple first interface elements and at least one second interface element on another layer. For instance, the electronic device renders the first theme wallpaper on the first layer, and the projections of multiple first interface elements and at least one second interface element on a fourth layer. In this case, the electronic device overlays the first and fourth layers together in a bottom-up order before displaying them.

[0148] In some embodiments of this application, when drawing and rendering the projection corresponding to a second interface element, the electronic device can use black or gray to draw and render the projection. This allows for the presentation of lighting and shadow effects consistent with the real world.

[0149] In some embodiments of this application, when an electronic device draws and renders the projection corresponding to a second interface element, it can determine a first display attribute of the corresponding projection point based on the projection length of each pixel of the second interface element. The first display attribute includes, but is not limited to, one or more of the following: brightness and transparency. As an example, the longer the projection length, the lower the brightness and / or the higher the transparency of the corresponding projection point.

[0150] For example, please refer to Figure 9 , Figure 9 This illustration shows a schematic diagram illustrating the relationship between the display attributes of a projection point and the projection length, according to an embodiment of this application. For example... Figure 9 As shown, the longer the projection length of the clock component 910, that is, the greater the distance between the pixel of the interface element and the corresponding projection point, the lower the brightness of the projection point and the higher the transparency, which visually appears as a more blurred and lighter color of the projection point. For example, as Figure 9 As shown, the projection length of pixel 920 on the clock component 910 is shorter than the projection length of pixel 930. Therefore, the brightness of the projection point 940 of pixel 920 is higher than the brightness of the projection point 950 of pixel 930, and the transparency of the projection point 940 of pixel 920 is lower than the transparency of the projection point 950 of pixel 930. In this way, the lighting and shadow patterns consistent with those in the real world can be presented.

[0151] In some embodiments of this application, when an electronic device renders the projection corresponding to a second interface element, it can determine a second display attribute of the projection point on the first theme wallpaper based on the light source intensity. The second display attribute includes, but is not limited to, one or more of the following: brightness and transparency. As an example, the stronger the light source intensity, the higher the brightness and / or the lower the transparency of the corresponding projection point.

[0152] In this way, the projection points corresponding to the interface elements can adapt and change according to the intensity of the light source, presenting the same light and shadow patterns as in the real world.

[0153] In some embodiments of this application, when the electronic device renders the projection corresponding to the second interface element, it can determine the color tone of the first theme wallpaper based on scene information. For example, for daytime (e.g., from sunrise to sunset), the closer the time is to noon, the cooler the color tone; the closer it is to sunrise and sunset, the warmer the color tone. Similarly, for nighttime (e.g., from sunset to sunrise the next day), a fixed color tone can be used, such as a cool color tone. This allows the theme wallpaper to adapt to the actual scene information, presenting a light and shadow pattern consistent with the real world.

[0154] In some embodiments of this application, the electronic device can perform the following when it is about to display a first theme wallpaper and multiple first interface elements: Figure 3 As shown in S301-S303.

[0155] In some embodiments of this application, the electronic device can perform operations in the background beforehand. Figure 3 As shown in S301-S302, when the first theme wallpaper and multiple first interface elements are about to be displayed, the execution result of S302 is used to execute... Figure 3 S303 is shown.

[0156] pass Figure 3 The interface display method shown allows an electronic device to determine the projection of one or more interface elements onto the theme wallpaper based on light source information in interface display scenarios where theme wallpapers and interface elements need to be displayed, such as in AOD scenarios, desktop scenarios, and wallpaper setting scenarios. This allows the electronic device to display the projection of the interface elements at the corresponding positions on the theme wallpaper while simultaneously displaying the theme wallpaper and interface elements.

[0157] As an example, taking a desktop scenario as an example, please refer to... Figure 10 and Figure 11 , Figure 10 Taking a tablet computer or PC as an example, this paper illustrates a schematic diagram of an interface display effect provided in an embodiment of the present application. Figure 11Taking a smartphone as an example, this paper illustrates another interface display effect provided by an embodiment of the present application. The interface display method provided by this embodiment of the present application, such as... Figure 10 As shown, when an electronic device displays desktop wallpaper and desktop elements (such as music application card 1010), it will display a projection 1020 corresponding to the desktop element (i.e., music application card 1010) on the desktop wallpaper. For example... Figure 11 As shown, when an electronic device displays desktop wallpaper and desktop elements (such as clock controls), it displays a projection of the desktop element (i.e., clock control) onto the desktop wallpaper (such as a person's body). Optionally, the electronic device can also display a projection of the wallpaper element onto the desktop wallpaper, wherein the projection of the desktop element (i.e., clock control) and the projection of the wallpaper element are in the same direction.

[0158] The interface display method provided in this application does not require additional hardware, such as a high-configuration three-dimensional (3D) engine for the high-load fusion of interface elements and theme wallpapers. It can be implemented based on existing modules of electronic devices, so it does not increase additional costs and has low power consumption.

[0159] In addition, such as Figure 10 or Figure 11 As shown, this solution can fully consider the positional relationship between light source information and interface elements, and simulate light and shadow effects on the theme wallpaper that are consistent with the real world. This allows the interface elements and the theme wallpaper to form a spatial relationship visually, thereby creating a three-dimensional visual effect. For example, it can achieve a visual effect close to naked-eye 3D, improving the visual experience and fun of the display interface for users.

[0160] For example, in an AOD (Away From Home) scenario, the solution provided in this application can reflect the light and shadow of AOD elements (such as clock components, date components, etc.) onto the AOD wallpaper, making the AOD elements appear to be suspended above the space where the AOD wallpaper is located. The light and shadow establish a connection between the AOD elements and the AOD wallpaper, achieving fusion. Furthermore, the offset of the projection can further deepen this fusion relationship, creating a three-dimensional visual effect between the AOD wallpaper and AOD elements. In particular, the more spatial the AOD wallpaper itself has, the better the fusion effect and the better the visual effect.

[0161] For example, in a desktop scenario, the solution provided in this application can reflect the light and shadow of desktop elements (such as application icons, application components, folders, application cards, etc.) onto the desktop wallpaper, making the desktop elements appear to be suspended above the space where the desktop wallpaper is located. The light and shadow establish a connection between the desktop elements and the desktop wallpaper, achieving fusion. Furthermore, the offset of the projection can further deepen this fusion relationship, creating a three-dimensional visual effect between the desktop wallpaper and desktop elements. In particular, the more spatial the desktop wallpaper itself has, the better the fusion effect and the better the visual effect.

[0162] For example, in a wallpaper setting scenario, the solution provided in this application can reflect the light and shadow of desktop elements (such as application icons, application components, folders, application cards, etc.) onto the user-selected desktop wallpaper in the effect diagram, making the desktop elements appear to be suspended above the space where the desktop wallpaper is located. The light and shadow establish a connection between the AOD elements and the AOD wallpaper, achieving fusion. Alternatively, the solution provided in this application can reflect the light and shadow of AOD elements (such as clock components, date components, etc.) onto the user-selected AOD wallpaper in the effect diagram, making the AOD elements appear to be suspended above the space where the AOD wallpaper is located. The light and shadow establish a connection between the AOD elements and the AOD wallpaper, achieving fusion. Furthermore, the offset of the projection can further deepen the fusion relationship, creating a three-dimensional visual effect between the theme wallpaper and interface elements. In particular, the more spatial the theme wallpaper itself has, the better the fusion effect and the better the visual effect.

[0163] Furthermore, this solution does not require excessive complex calculations and processing, resulting in minimal power consumption and low latency, thus providing a smooth stereoscopic visual effect.

[0164] Figure 3 The illustrated interface display method demonstrates the implementation process of one such method. In practical applications, the position of the light source changes over time. In some embodiments of this application, the electronic device can adjust the projection display of desktop elements based on changes in the position of the light source.

[0165] In some embodiments of this application, the electronic device can automatically trigger the determination of multiple light source positions, and obtain multiple consecutive frames of interface at once based on the multiple light source positions. Each frame of interface includes the projection of at least one second interface element from multiple first interface elements onto the first theme wallpaper. The projection positions of the second interface elements on each frame of interface are different. Then, the electronic device displays the corresponding interface when the corresponding time arrives, according to the time information corresponding to the multiple consecutive frames of interface. Alternatively, the electronic device can periodically execute according to a set first time interval. Figure 3 The interface shown illustrates the process; that is, the electronic device completes the execution... Figure 3 After steps S301-S303 are shown, the process is executed again after the first set time interval. Figure 3 As shown in S301-S303. Alternatively, the electronic device can complete the execution... Figure 3 Following steps S301-S303, multiple light source positions are determined according to a set first time interval. Multiple consecutive frames of the interface are acquired simultaneously based on these light source positions. Each frame includes a projection of at least one second interface element from among multiple first interface elements onto the first theme wallpaper. The projection positions of the second interface elements differ in each frame. Then, the electronic device displays the corresponding interface at the appropriate time based on the time information corresponding to the multiple consecutive frames. In this way, a light and shadow effect that reflects the real-world phenomenon of projection changing in real time with the light source position can be presented over time. For example, the set first time interval includes, but is not limited to, 30 minutes, 60 minutes, 90 minutes, 120 minutes, etc.

[0166] As an example, taking a desktop scenario as an example, please refer to... Figure 12 , Figure 12 Taking a tablet computer or PC as an example, a schematic diagram of an interface display process provided in an embodiment of this application is shown. Figure 12 As shown, over time, from 7:30 AM to 12:00 PM, 4:00 PM, and 5:00 PM, the electronic device displays the changing light and shadow effects of the desktop elements according to the sun's rising and setting pattern. Figure 12 The projection 1220 of card 1210 changes in real time with the position of the sun, and Figure 12 The projection 1240 of card 1230 changes in real time with the position of the sun.

[0167] Furthermore, in practical applications, the shape, size, and position of various desktop elements may change. In some embodiments of this application, the electronic device can adjust the display of the projection of interface elements based on changes in their shape, size, and position. That is, after executing... Figure 3 After steps S301-S303, if the shape, size, or position of an interface element changes, the process will be executed again. Figure 3 As shown in S301-S303. Alternatively, the electronic device can complete the execution... Figure 3Following steps S301-S303, multiple consecutive frames of the interface are acquired at once according to the changing trends of the shape, size, and position of the interface elements. Based on the time information corresponding to these frames, the corresponding interface is displayed at the appropriate time. This allows for a projection effect that mirrors real-time changes in the shape, size, and position of the interface elements, consistent with real-world phenomena. These changes may occur due to user interaction or be triggered automatically by a mechanism; this embodiment does not impose limitations on these changes.

[0168] As an example, taking a desktop scenario as an example, please refer to... Figure 13 , Figure 13 Taking a tablet computer or PC as an example, a schematic diagram of an interface display process provided in an embodiment of this application is shown. Figure 13 As shown, as the position of the music application card 1310 changes, the electronic device will not only display the desktop wallpaper and the music application card 1310 whose position changes, but also, along with the change in the position of the music application card 1310, present a light and shadow effect on the desktop wallpaper that is consistent with the real world, with the projection 1320 of the music application card changing in real time with the position of the music application card.

[0169] Furthermore, in practical applications, the position of the light source and the shape / size / position of interface elements may change. In some embodiments of this application, the electronic device can adjust the projection display of interface elements based on changes in the position of the light source and changes in the shape / size / position of the interface elements.

[0170] As an example, taking a desktop scenario as an example, please refer to... Figure 14 , Figure 14 Taking a smartphone as an example, another schematic diagram of the interface display process provided in an embodiment of this application is shown. Figure 14 As shown, when the electronic device displays a desktop wallpaper and a clock control with the time information 12:29, it will display a projection of the clock control with the time information 21:29 on the desktop wallpaper. As time progresses and the position of the light source changes, the clock control will change to a clock control with the time information 21:30. At this time, the electronic device will project a projection onto the desktop wallpaper (e.g., ...). Figure 14 The projection of a clock control showing the time 21:30 is displayed on the figure's body. It presents a light and shadow effect where the projection changes in real-time with the shape of the clock control, consistent with the real world, as time progresses. Optionally, when displaying the desktop wallpaper and the clock control with the time information 21:29, the electronic device can also display wallpaper elements (such as...) on the desktop wallpaper. Figure 14The projection corresponding to the character shown. As time progresses and the position of the light source changes, the projection corresponding to the wallpaper element (i.e., the character) will also change accordingly. The projection corresponding to the desktop element (i.e., the clock control) has the same direction as the projection corresponding to the wallpaper element (i.e., the character). It should be noted that the embodiments of this application do not limit the relative position of the light source (such as the sun or moon) and the screen elements; the specific relative position of the light and shadow to the screen can be determined based on the actual desktop elements and / or wallpaper elements.

[0171] In practical applications, the theme wallpaper and / or interface elements to be displayed may also change.

[0172] For example, in an AOD (Away From Home) scenario, the electronic device displays an AOD wallpaper, AOD elements, and projections of the AOD elements on the AOD wallpaper. In response to the user's unlock operation on the AOD interface, the electronic device unlocks, enters the desktop scene, and the wallpaper changes from the AOD wallpaper to the home screen wallpaper, while the elements change from AOD elements to home screen elements. Correspondingly, the electronic device displays projections of the home screen elements on the home screen wallpaper.

[0173] For example, in a desktop scenario, an electronic device displays the home screen wallpaper, home screen elements, and projections of the home screen elements on the home screen wallpaper. In response to a user swiping left on the home screen, the wallpaper changes to the left-swipe wallpaper, and the interface elements change from home screen elements to left-swipe elements. Accordingly, the electronic device displays the left-swipe elements on the left-swipe wallpaper. Alternatively, in response to a user swiping right on the home screen, the wallpaper changes to the right-swipe wallpaper, and the interface elements change from home screen elements to right-swipe elements. Accordingly, the electronic device displays the right-swipe elements on the right-swipe wallpaper.

[0174] For example, in a wallpaper setting scenario, the electronic device displays a first rendering, which includes the user-selected desktop wallpaper, the corresponding desktop tab, and the projection of the desktop elements on that tab. Then, in response to the user selecting another desktop wallpaper in the wallpaper settings, the rendering changes to a second rendering, which includes the other selected desktop wallpaper, the corresponding desktop tab, and the projection of the desktop elements on that tab. Alternatively, in a wallpaper setting scenario, the electronic device displays a third rendering, which includes the user-selected AOD wallpaper, AOD elements, and the projection of the AOD elements. Then, in response to the user selecting another AOD wallpaper in the wallpaper settings, the rendering changes to a fourth rendering, which includes the other selected AOD wallpaper, the AOD elements, and the projection of the AOD elements.

[0175] Taking the transition from an AOD (Away From Home) scene to a desktop scene as an example, when an electronic device is in AOD mode, it can display the AOD wallpaper with a nighttime lighting effect and project AOD elements onto the wallpaper with a nighttime projection effect. In response to the user's unlock operation on the AOD interface, the electronic device unlocks and enters the desktop scene.

[0176] As one possible implementation, after receiving the user's unlock operation on the AOD interface, the electronic device can obtain the desktop wallpaper (such as the home screen wallpaper) and desktop elements (such as the home screen elements) to be displayed. In response to the user's unlock operation on the AOD interface, the electronic device determines the projection of at least one desktop element (such as the home screen element) onto the desktop wallpaper (such as the home screen wallpaper) based on the light source information; the display includes the desktop wallpaper (such as the home screen wallpaper), desktop elements (such as the home screen elements), and the projection corresponding to at least one desktop element.

[0177] As another possible implementation, upon receiving the user's unlock operation on the AOD interface, the electronic device can acquire the desktop wallpaper (such as the home screen wallpaper) and desktop elements (such as the home screen elements) to be displayed. Responding to the user's unlock operation on the AOD interface, the electronic device displays multiple consecutive frames of the interface, such as displaying multiple consecutive frames of a fourth interface within a preset duration. These multiple frames of the fourth interface are used to present the positional change of at least one desktop element (such as the home screen element) projected onto the desktop wallpaper (such as the home screen wallpaper) as the light source moves from a first preset moment to the current moment. For example, the preset duration includes, but is not limited to, 0.5 seconds, 1 second, etc. This ensures the continuity of spatial interaction between interface elements and the theme wallpaper during the transition from the AOD scene to the desktop scene, and ensures the continuity of the visually created three-dimensional effect.

[0178] As an example, the first preset time is either the time before sunrise or the time at sunrise.

[0179] As an example, an electronic device can acquire a continuous multi-frame interface in the following manner: the electronic device determines multiple light source positions according to a set second time interval, and obtains a continuous multi-frame interface based on the multiple light source positions; the continuous multi-frame interface is displayed, wherein the interface of different frames is used to indicate the projection of desktop elements on the desktop wallpaper at different times. For example, the set second time interval includes, but is not limited to, 1 minute, 5 minutes, 10 minutes, 20 minutes, etc.

[0180] As an example, an electronic device can acquire a continuous multi-frame interface in the following way: The electronic device divides the time period from a first preset moment to the current moment into multiple sub-time periods according to a set number of frames; determines multiple light source positions based on the time points corresponding to each sub-time period; and obtains a continuous multi-frame interface based on these light source positions. The continuous multi-frame interface is then displayed, where different frames are used to indicate the projection of desktop elements onto the desktop wallpaper at different times. For example, the set number of frames includes, but is not limited to, 10, 15, 20, 30, 40, etc.

[0181] As an example, please refer to Figure 15 , Figure 15 Taking a smartphone as an example, another schematic diagram of the interface display process provided in an embodiment of this application is shown. Figure 15 As shown, in an AOD (Away From Home) scenario, electronic devices display AOD wallpapers, AOD elements, and projections of AOD elements using a nighttime lighting effect. In response to a user's unlocking action on the AOD interface, the electronic device displays multiple consecutive frames of the interface, for example, displaying multiple consecutive frames within a preset duration (e.g., 0.5 seconds, 1 second, etc.). Figure 15 Taking 2 frames as an example), multiple consecutive frames of the interface are used to present the process of the light source position moving from a first preset time (such as the time of sunrise) to the current time (such as the clock component 1608), at least one desktop element (including Figure 15 The projection of the clock component 1610 shown on the desktop wallpaper (including...) Figure 15 The position change process of the projection 1620 of the clock component 1610 shown.

[0182] Taking switching from one desktop tab to another in a desktop scenario as an example, when an electronic device displays the theme wallpaper of the first desktop tab, the desktop elements of the first desktop tab, and the projection corresponding to at least one desktop element of the first desktop tab, after receiving the operation to switch from the first desktop tab to the second desktop tab, the electronic device obtains the theme wallpaper (denoted as the second theme wallpaper) corresponding to the second desktop tab to be displayed and multiple desktop page elements (denoted as third interface elements) on the second desktop tab; based on the light source information, it determines the projection of at least one interface element (denoted as the fourth interface element) among the multiple third interface elements onto the second theme wallpaper; in response to the operation to switch from the first desktop tab to the second desktop tab, it displays an interface (denoted as the second interface) including the second theme wallpaper, multiple third interface elements, and the projection corresponding to at least one fourth interface element.

[0183] As one possible implementation, during the transition from a first desktop tab to a second desktop tab, the electronic device can display multiple consecutive frames of a third interface. These consecutive frames of the third interface are used to demonstrate how, during the transition from the first desktop tab to the second desktop tab, the projection of at least one second interface element onto the first theme wallpaper changes with the change in the position of the light source, and the projection of at least one fourth interface element onto the second theme wallpaper also changes with the transition. This ensures the continuity of spatial interaction between interface elements and the theme wallpaper during the transition from one desktop tab to another, and ensures the continuity of the visually created three-dimensional effect.

[0184] As an example, please refer to Figure 16 , Figure 16 Taking a smartphone as an example, another schematic diagram of the interface display process provided in an embodiment of this application is shown. Figure 16 As shown, when an electronic device displays a desktop home screen including a home screen wallpaper, home screen elements, and a projection of at least one home screen element onto the home screen wallpaper, in response to a user's right swipe operation on the home screen (i.e., switching to a right swipe operation), the electronic device switches desktop pages and displays the right swipe, which includes a right swipe wallpaper, right swipe elements, and a projection of at least one right swipe element onto the right swipe wallpaper. In some examples, during the switch from the home screen to the right swipe, the electronic device displays one or more intermediate interfaces, which include the home screen wallpaper during the swipe, the desktop elements during the swipe, and a projection of at least one desktop element onto the home screen wallpaper.

[0185] In some embodiments of this application, in order to further create a three-dimensional visual effect, the electronic device may also determine the occlusion relationship between at least one fifth interface element among a plurality of first interface elements and wallpaper elements on the first theme wallpaper before displaying the first interface. The occlusion relationship includes, but is not limited to, complete occlusion, partial occlusion, and no occlusion.

[0186] For example, an electronic device can obtain the fourth depth information of at least one fifth interface element based on the third depth information of the wallpaper area where at least one fifth interface element is located from among multiple first interface elements; and determine the occlusion relationship between each pixel of the at least one fifth interface element and each pixel of the wallpaper elements on the wallpaper area based on the third depth information and the fourth depth information. Figure 17 As shown, by analyzing the third depth information of the wallpaper area where at least one fifth interface element is located and the fourth depth information of at least one fifth interface element, it is possible to create a specific occlusion relationship between the clock component and the sand dunes on the theme wallpaper, enhance the spatial linkage between the clock component and the sand dunes on the theme wallpaper, and thus further create a three-dimensional visual effect.

[0187] As an example, the aforementioned at least one second interface element includes the aforementioned at least one fifth interface element. That is, the electronic device can not only display the projection corresponding to the fifth interface element on the first interface, but also create a specific occlusion relationship between the fifth interface element and the wallpaper elements on the first theme wallpaper.

[0188] As one possible implementation, please refer to Figure 18 , Figure 18 Taking the example of at least one second interface element including at least one fifth interface element, a flowchart of a method for determining the occlusion relationship between interface elements and wallpaper elements provided in this application embodiment is shown.

[0189] like Figure 18 As shown, the process of determining the occlusion relationship between interface elements and wallpaper elements includes S1801-S1803: S1801, The electronic device determines the wallpaper area where at least one fifth interface element is located among a plurality of first interface elements.

[0190] As one possible implementation, the electronic device can obtain the first display position of each pixel of the fifth interface element and the second display position of each pixel of the first theme wallpaper, and determine the wallpaper area where the fifth interface element is located based on the third display position and the second display position.

[0191] For example, the electronic device directly obtains the display position of at least one fifth interface element in the frame image to be displayed from the display data stream, i.e., the first display position; and the electronic device directly obtains the display position of each pixel of the first theme wallpaper in the frame image to be displayed from the display data stream, i.e., the second display position.

[0192] S1802, the electronic device acquires third depth information of the wallpaper area where at least one fifth interface element is located, and fourth depth information of at least one fifth interface element.

[0193] As one possible implementation, the electronic device can perform depth analysis on the wallpaper area containing at least one fifth interface element to obtain third depth information. Furthermore, the electronic device can perform depth analysis on at least one fifth interface element to obtain fourth depth information.

[0194] As one possible implementation, the electronic device can perform depth analysis on the wallpaper area containing at least one fifth interface element to obtain third depth information. Furthermore, the electronic device can obtain fourth depth information for at least one pre-defined fifth interface element.

[0195] As one possible implementation, the electronic device can perform depth analysis on the wallpaper area where at least one fifth interface element is located to obtain third depth information. Furthermore, the electronic device can determine fourth depth information for at least one fifth interface element based on the third depth information.

[0196] As an example, depth information (such as third and / or fourth depth information) may include one or more of the following information about a pixel: grayscale value, color encoding, depth value, etc.

[0197] For example, taking third-level depth information as an example, an electronic device can perform grayscale processing on the wallpaper area where the fifth interface element is located, obtaining the grayscale value of each pixel in the wallpaper area, and using the grayscale value of each pixel as the depth information of the corresponding pixel to obtain the third-level depth information. For example, the grayscale value may range from 0 to 255 (or it can be normalized to 0 to 100). As another example, the electronic device can perform spectral mapping on the wallpaper area where the fifth interface element is located, obtaining the color code of each pixel in the wallpaper area, and using the color code of each pixel as the third-level depth information of the corresponding pixel. As yet another example, the electronic device can perform depth analysis on the wallpaper area where the fifth interface element is located, obtaining the depth value of each pixel in the wallpaper area, and using the depth value of each pixel as the third-level depth information of the corresponding pixel.

[0198] As an example, please refer to Figure 19 , Figure 19 Taking the determination of the fourth depth information of at least one fifth interface element based on the third depth information as an example, a flowchart of the method for determining the depth information of interface elements provided in the embodiments of this application is shown.

[0199] like Figure 19 As shown, the electronic device determines the fourth depth information based on the third depth information, which may include S1-S3: S1. The electronic device obtains the average depth information, minimum depth information and maximum depth information of the wallpaper area based on the third depth information.

[0200] As one possible implementation, the electronic device can average the depth values ​​(such as grayscale values, color codes, depth of field values, etc.) of each pixel in the wallpaper area to obtain a second value, which is the average depth information N of the wallpaper area. ave .

[0201] As one possible implementation, the electronic device can compare the depth values ​​(such as grayscale values, color codes, depth of field values, etc.) of each pixel in the wallpaper area to determine a first value and a third value, where the first value is the minimum depth value N. min1 (e.g., minimum grayscale value), the third value is the maximum depth value N. max(e.g., maximum grayscale value).

[0202] S2. The electronic device determines whether the pixel with the largest depth value is located at the edge of the wallpaper area.

[0203] The pixel with the largest depth value may be located at the edge of the wallpaper area or at the center of the wallpaper area.

[0204] As one possible implementation, the electronic device can calculate the minimum distance L1 between the pixel with the largest depth value and the edge pixels of the wallpaper area, and the distance L2 between the pixel with the largest depth value and the center pixel of the wallpaper area. Based on whether the distance ratio L1 / L2 is less than or equal to a first preset value, it can determine whether the pixel with the largest depth value is located in the edge region of the wallpaper area. If L1 / L2 is less than or equal to the first preset value, the pixel with the largest depth value is determined to be located in the edge region of the wallpaper area; if L1 / L2 is greater than the first preset value, the pixel with the largest depth value is determined not to be located in the edge region of the wallpaper area, for example, it is located in the center region of the wallpaper area. Exemplarily, the first preset value includes, but is not limited to, 0.2, 0.25, 0.3, etc.

[0205] As one possible implementation, the electronic device can calculate the minimum distance L1 between the pixel with the largest depth value and the edge pixels of the wallpaper area. Based on whether L1 is less than or equal to a second preset value, it determines whether the pixel with the largest depth value is located in the edge region of the wallpaper area. If L1 is less than or equal to the second preset value, the pixel with the largest depth value is determined to be located in the edge region of the wallpaper area; if L1 is greater than the second preset value, the pixel with the largest depth value is determined not to be located in the edge region of the wallpaper area, for example, it is located in the center region of the wallpaper area. For example, the second preset value includes, but is not limited to, 80px (i.e., 80 pixels), 90px, 100px, etc., and is not limited thereto.

[0206] As one possible implementation, the electronic device can divide the wallpaper area into a central area and an edge area according to a preset principle, and then determine whether the pixel with the largest depth value is located in the edge area.

[0207] S3. Electronic devices determine fourth depth information.

[0208] As one possible implementation, the electronic device can determine the fourth depth information by combining the third depth information with whether the pixel with the largest depth value on the wallpaper area is located in the center of the wallpaper area.

[0209] In some embodiments of this application, if the pixel with the largest depth value on the wallpaper area is located in the center area of ​​the wallpaper area, the electronic device determines that the depth values ​​of each pixel of the fifth interface element at the corresponding position in the wallpaper area satisfy the first condition.

[0210] For example, the first condition includes: less than a first value, where the first value is the minimum depth value N of the wallpaper area. min1 That is, n < N min1 , where n is the depth value of the pixel of the fifth interface element.

[0211] For the case where the pixel with the largest depth value is located in the center of the wallpaper area, as a possible implementation, the electronic device can select from a set of multiple pre-set stepped depth values ​​that satisfy the first condition, namely, less than N. min1 The depth value is used as the depth value of each pixel of the fifth interface element at the corresponding position in the wallpaper area. For example, an electronic device can obtain a depth value less than N from a set of pre-set stepped depth values. min1 And closest to N min1 The depth value is used as the depth value of each pixel of the fifth interface element.

[0212] In some embodiments of this application, if the pixel with the largest depth value on the wallpaper area is located at the edge of the wallpaper area, the electronic device determines that the depth values ​​of each pixel of the fifth interface element at the corresponding position in the wallpaper area satisfy the second condition. As an example, the electronic device can determine whether the second condition is satisfied pixel by pixel.

[0213] For example, the second condition includes: greater than or equal to the second value and less than the third value, where the second value is the average depth N of the wallpaper area. ave The third value is the maximum depth N of the wallpaper area. max That is, N ave ≤n<N max Where n is the depth value of the pixel of the fifth interface element, or n is the depth value of the pixel of the fifth interface element at the location of the wallpaper element in the wallpaper area. Furthermore, the electronic device can obtain a value greater than or equal to N from a set of pre-set stepped depth values. ave And less than N max The depth value is used as the depth value of each pixel of the fifth interface element at the corresponding position in the wallpaper area, or as the depth value of the pixel of the fifth interface element at the position of the wallpaper element in the wallpaper area.

[0214] Alternatively, the second condition includes: less than the fourth value, where the fourth value is the minimum depth value N of the wallpaper element on the wallpaper area. min2 Furthermore, the electronic device can obtain values ​​less than N from a set of pre-set step depth values. min2The depth value is used as the depth value of each pixel of the fifth interface element at the corresponding position in the wallpaper area, or as the depth value of the pixel of the fifth interface element at the position of the wallpaper element in the wallpaper area.

[0215] Alternatively, the second condition includes: greater than or equal to the second value and less than the fourth value. Therefore, the electronic device can obtain a value greater than or equal to N from a set of pre-set step depth values. ave And less than N min2 The depth value is used as the depth value of each pixel of the fifth interface element at the corresponding position in the wallpaper area, or as the depth value of the pixel of the fifth interface element at the position of the wallpaper element in the wallpaper area.

[0216] For example, electronic devices can identify multiple wallpaper objects in a first-theme wallpaper based on edge recognition, depth recognition, and other technologies, such as image recognition technology. They can then identify objects among these wallpaper objects that overlap with the wallpaper area (denoted as "overlapping objects"). Based on the positional relationship between the wallpaper area and the overlapping objects, they can determine the overlapping area between the wallpaper area and the overlapping objects, and further determine each pixel within the overlapping area (denoted as "overlapping pixels"). Finally, they can determine the minimum depth value N among the overlapping pixels. min2 That is, the fourth value.

[0217] As an example, please refer to Figure 20 , Figure 20 A schematic diagram of a method for determining overlapping pixels provided in an embodiment of this application is shown. Figure 20 As shown, the first theme wallpaper includes multiple wallpaper objects, such as a large coconut tree on the left side of the wallpaper and a small coconut tree on the right side. Through image recognition technology, electronic devices can identify objects such as... Figure 20 The image shows a large coconut tree A on the left side of the wallpaper and a small coconut tree B on the right side. Further, the electronic device determines the area of ​​the wallpaper (such as...) Figure 20 The overlapping object (shown in the dashed box) is a large coconut tree A. Based on the positional relationship between the edge area of ​​the wallpaper area and the edge area of ​​the overlapping object A, the overlapping areas of the wallpaper area and the overlapping object include: local areas A11 of leaves A1 of the large coconut tree A and local areas A21 of leaves A2 of the large coconut tree A. Furthermore, the electronic device can determine the minimum depth value N in local area A11. min2-1 See N min2-1 Determine the depth value of each pixel at the corresponding location up to the fifth interface element; and the electronic device can determine the minimum depth value N in the local region A21. min2-2 See N min2-2 Determine the depth value of each pixel from the corresponding position to the fifth interface element.

[0218] S1803. The electronic device determines the occlusion relationship between each pixel of at least one fifth interface element and each pixel of the wallpaper element on the wallpaper area based on the third depth information and the fourth depth information.

[0219] In this embodiment, the fifth interface element is the interface element among the plurality of first interface elements that has an occlusion relationship with the wallpaper elements on the wallpaper area. That is, all of the plurality of first interface elements may have an occlusion relationship with the wallpaper elements on the wallpaper area, or they may have a partial occlusion relationship. The pixels on the fifth interface element may have an occlusion relationship with all of the wallpaper elements on the wallpaper area, or they may have a partial occlusion relationship with the wallpaper elements on the wallpaper area.

[0220] As one possible implementation, the electronic device determines the occlusion relationship between each pixel of the fifth interface element and each pixel of the wallpaper element on the wallpaper area by comparing the depth values ​​of each pixel of the fifth interface element in the fourth depth information with the depth values ​​of the corresponding pixel of the wallpaper element of the first theme wallpaper in the third depth information.

[0221] For example, if the depth value of a pixel (denoted as "first pixel") of a certain fifth interface element is less than the depth value of a pixel of the wallpaper element at the corresponding position, then it is determined that the pixel (i.e., the first pixel) of the fifth interface element occludes the pixel of the wallpaper element at the corresponding position; if the depth value of a pixel (denoted as "second pixel") of a certain fifth interface element is greater than or equal to the depth value of a pixel of the wallpaper element at the corresponding position, then it is determined that the pixel (i.e., the second pixel) of the fifth interface element is occluded by the pixel of the wallpaper element at the corresponding position.

[0222] For example, if the depth value of a pixel (such as the first pixel) of a fifth interface element is less than or equal to the depth value of a pixel of the wallpaper element at the corresponding position, then it is determined that the pixel (i.e., the first pixel) of the fifth interface element occludes the pixel of the wallpaper element at the corresponding position; if the depth value of a pixel (such as the second pixel) of a fifth interface element is greater than the depth value of a pixel of the wallpaper element at the corresponding position, then it is determined that the pixel (i.e., the second pixel) of the fifth interface element is occluded by the pixel of the wallpaper element at the corresponding position.

[0223] For example, if the depth value of a pixel (e.g., the first pixel) of a fifth interface element is less than the depth value of a pixel of the corresponding wallpaper element, then that pixel of the fifth interface element (i.e., the first pixel) is determined to occlude the pixel of the corresponding wallpaper element. If the depth value of a pixel (e.g., the second pixel) of a fifth interface element is greater than the depth value of the corresponding pixel of the wallpaper element, then that pixel of the fifth interface element (i.e., the second pixel) is determined to be occluded by the pixel of the corresponding wallpaper element. If the depth value of a pixel of a fifth interface element (denoted as the "third pixel") is equal to the depth value of the corresponding pixel of the wallpaper element, then the occlusion relationship between that pixel of the fifth interface element (i.e., the third pixel) and the pixel of the corresponding wallpaper element is determined according to preset rules. Preset rules include, but are not limited to, default interface elements occluding wallpaper elements or default wallpaper elements occluding interface elements.

[0224] After determining the occlusion relationship between each pixel of at least one fifth interface element and each pixel of the wallpaper element on the wallpaper area, as a possible implementation, the electronic device can adjust the layer of each pixel in the first theme wallpaper and / or adjust the layer of each pixel in at least one fifth interface element to achieve a specific occlusion relationship between each pixel of at least one fifth interface element and each pixel of the wallpaper element on the wallpaper area after display.

[0225] For example, if pixels in the overlapping area obscure interface elements, the electronic device can separate the pixels in the overlapping area from the layer containing the first theme wallpaper, and then combine the layer containing the obscured interface elements and the layer containing the pixels in the overlapping area in a bottom-to-top order before displaying them.

[0226] For example, if pixels in the overlapping area are obscured by interface elements, the electronic device can separate the pixels in the fifth interface element that are obscuring the overlapping area from the layer where the fifth interface element is located, and then combine the layers where the pixels in the overlapping area are located and the layer where the obscured interface element is locked in in a bottom-to-top order before displaying them.

[0227] As an example, please refer to Figure 21 , Figure 21 by Figure 20 Taking the overlapping pixels shown as an example, this paper illustrates four schematic diagrams of the occlusion relationships between interface elements and wallpaper elements provided in the embodiments of this application. Among them, Figure 21 (a) in the middle shows Figure 20 A portion A11 of the leaf A1 of the large coconut tree A shown in the image is obscuring the clock assembly. Figure 20 A schematic diagram showing a partial area A21 of leaf A2 of the large coconut tree A obscuring the clock assembly; Figure 21 (b) in the middle shows Figure 20 A portion A11 of the leaf A1 of the large coconut tree A shown is obscured by the clock component. Figure 20 A schematic diagram showing a partial area A21 of leaf A2 of the large coconut tree A being obscured by a clock component; Figure 21 (c) in the middle shows Figure 20 A portion A11 of the leaf A1 of the large coconut tree A shown in the image is obscuring the clock assembly. Figure 20 A schematic diagram showing a partial area A21 of leaf A2 of the large coconut tree A being obscured by a clock component; Figure 21 (d) in the text shows Figure 20 A portion A11 of the leaf A1 of the large coconut tree A shown is obscured by the clock component. Figure 20 A schematic diagram showing a partial area A21 of the leaf A2 of the large coconut tree A obscuring the clock assembly.

[0228] This application embodiment analyzes the depth information of the fifth interface element and the wallpaper elements on the first theme wallpaper. By assigning independent depth values ​​to each pixel of the fifth interface element, it establishes a specific occlusion relationship with the wallpaper object of the first theme wallpaper. This achieves the effect of the fifth interface element floating above the wallpaper object and / or embedding itself into the wallpaper object, while fully utilizing the spatial sense of the first theme wallpaper so that the fifth interface element can be well integrated into it. This solution can further enhance the spatial interaction between interface elements and theme wallpaper, thereby creating a more three-dimensional visual effect and further improving the visual experience and enjoyment of the display interface for users.

[0229] In some embodiments of this application, this application Figure 18 The method shown can be used with Figure 3 The interface is displayed using the methods shown.

[0230] For example, such as Figure 15 As shown, in an AOD scene, when electronic devices display AOD wallpapers and AOD elements with nighttime lighting effects, they will not only display AOD elements, but also create a specific occlusion relationship between the clock component and the sand dunes in the AOD wallpaper.

[0231] For example, such as Figure 15 As shown, in response to the user's unlocking operation on the AOD interface, the electronic device can display multiple consecutive frames of the interface (e.g., within a preset duration, such as 0.5 seconds, 1 second, etc.) Figure 15(Taking 2 frames as an example) Multiple consecutive frames of the interface are used to present the process of the light source position moving from the first preset time (such as the time of sunrise) to the current time (such as the clock component 1608), and the change in the position of the projection of the desktop element on the desktop wallpaper. It can also make the clock component and the sand dunes in the desktop wallpaper (such as the desktop home screen wallpaper) form a specific occlusion relationship.

[0232] For example, such as Figure 16 As shown, taking a desktop scene as an example, when an electronic device displays a desktop home screen that includes the desktop home screen wallpaper and desktop home screen elements, it can not only display the projection of the desktop home screen elements on the desktop home screen wallpaper, but also make the clock control and the sand dunes in the desktop wallpaper form a specific occlusion relationship.

[0233] For example, such as Figure 16 As shown, during the process of swiping from the home screen to the right, the electronic device displays one or more intermediate interfaces, including not only the desktop wallpaper, desktop elements, and the projection of desktop elements onto the desktop wallpaper during the swiping process, but also a specific occlusion relationship between the clock control and the sand dunes in the desktop wallpaper.

[0234] In some embodiments of this application, this application Figure 18 The method shown can also be implemented independently.

[0235] In some embodiments of this application, if the shape, size, or position of an interface element changes, the electronic device can adjust the occlusion relationship between the interface element and the theme wallpaper based on the change in the shape, size, or position of the interface element. That is, after the electronic device completes the execution... Figure 18 After steps S1801-S1803, if the shape, size, or position of an interface element changes, the process will be executed again. Figure 18 S1801-S1803 are shown.

[0236] In some embodiments of this application, if the theme wallpaper and / or interface elements to be displayed change, the electronic device can adjust the occlusion relationship between the interface elements and the theme wallpaper according to the changes in the theme wallpaper and / or interface elements. That is, when the shape / size / position of the interface elements changes, the electronic device executes the command again. Figure 18 S1801-S1803 are shown.

[0237] It should be understood that the various solutions in the embodiments of this application can be used in a reasonable combination, and the explanations or descriptions of the various terms appearing in the embodiments can be referenced or explained to each other in the various embodiments, without limitation.

[0238] It should also be understood that, in the various embodiments of this application, the order of the above-mentioned processes does not imply 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 this application.

[0239] It is understood that, in order to achieve the functions of any of the above embodiments, the electronic device includes hardware structures and / or software modules corresponding to the execution of each function. Those skilled in the art should readily recognize that, based on the units and algorithm steps of the examples described in conjunction with the embodiments disclosed herein, this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art 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.

[0240] This application embodiment can divide electronic devices into functional modules. For example, each function can be divided into its own functional module, or two or more functions can be integrated into one processing module. The integrated module can be implemented in hardware or as a software functional module. It should be noted that the module division in this application embodiment is illustrative and only represents one logical functional division; other division methods may be used in actual implementation.

[0241] It should also be understood that the various modules in an electronic device can be implemented in software and / or hardware, without specific limitations. In other words, an electronic device is presented in the form of functional modules. Here, "module" can refer to application-specific integrated circuits (ASICs), circuits, processors and memories that execute one or more software or firmware programs, integrated logic circuits, and / or other devices that can provide the above functions.

[0242] In one alternative approach, when data transmission is implemented using software, it can be implemented entirely or partially in the form of a computer program product. The computer program product includes one or more computer instructions. When the computer program instructions are loaded and executed on a computer, all or part of the processes or functions described in the embodiments of this application are implemented. The computer can be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. The computer instructions can be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another. For example, the computer instructions can be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via wired (e.g., coaxial cable, fiber optic, digital subscriber line (DSL)) or wireless (e.g., infrared, wireless, microwave, etc.) means. The computer-readable storage medium can be any available medium that a computer can access or a data storage device such as a server or data center that integrates one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., digital video disk (DVD)), or a semiconductor medium (e.g., solid-state disk (SSD)).

[0243] The steps of the methods or algorithms described in the embodiments of this application can be implemented in hardware or by a processor executing software instructions. The software instructions can consist of corresponding software modules, which can be stored in random access memory (RAM), flash memory, read-only memory (ROM), erasable programmable read-only memory (EPROM), electrically erasable programmable read-only memory (EEPROM), registers, hard disks, portable hard disks, compact disc read-only memory (CD-ROM), or any other form of storage medium known in the art. An exemplary storage medium is coupled to a processor, enabling the processor to read information from and write information to the storage medium. Of course, the storage medium can also be a component of the processor. The processor and storage medium can reside in an application-specific integrated circuit (ASIC). Alternatively, the ASIC can reside in an electronic device. Of course, the processor and storage medium can also exist as discrete components.

[0244] Through the above description of the implementation methods, those skilled in the art can clearly understand that, for the sake of convenience and brevity, only the division of the above functional modules is used as an example. In practical applications, the above functions can be assigned to different functional modules as needed, that is, the internal structure of the electronic device can be divided into different functional modules to complete all or part of the functions described above.

Claims

1. A method for displaying an interface, characterized in that, The method is applied to an electronic device, and the method includes: Retrieve the first theme wallpaper and multiple first interface elements to be displayed; Based on the light source information, determine the projection of at least one second interface element among the plurality of first interface elements onto the first theme wallpaper, wherein the light source information includes the light source position; The first interface is displayed, which includes the first theme wallpaper, the plurality of first interface elements, and the projection corresponding to the at least one second interface element.

2. The method according to claim 1, characterized in that, The method further includes: The light source information is determined based on the scene information of the electronic device, wherein the scene information includes any one or more of the following: time information, weather information, and location information.

3. The method according to claim 1 or 2, characterized in that, Determining the light source information based on the scene information of the electronic device includes: Based on the scene information of the electronic device, the position of the light source is determined from the light source movement trajectory; The light source movement trajectory includes the solar movement trajectory determined based on the sun's movement trajectory relative to the earth's movement trajectory.

4. The method according to claim 1 or 2, characterized in that, The projection corresponding to the at least one second interface element includes multiple projection points. Determining the projection of at least one second interface element among the multiple first interface elements onto the first theme wallpaper based on the light source information includes: Based on the positional relationship between the light source and the pixel of the at least one second interface element, the projection direction and projection length of each pixel are determined, and the projection length is used to represent the distance between the pixel of the interface element and the corresponding pixel on the projection. The projection of the at least one second interface element on the first theme wallpaper is determined based on the projection direction and projection length corresponding to each pixel.

5. The method according to claim 4, characterized in that, Determining the projection of at least one second interface element on the first theme wallpaper based on the projection direction and projection length corresponding to each pixel includes: Obtain first depth information of multiple pixels in the wallpaper area where the at least one second interface element is located, and obtain second depth information of multiple pixels in the at least one second interface element; Based on the first depth information and the second depth information, after offset calculation of the projection direction and projection length of each pixel, the projection point of the at least one second interface element on the first theme wallpaper is determined.

6. The method according to claim 5, characterized in that, The step of calculating the offset of the projection direction and projection length of each pixel based on the first depth information and the second depth information includes: Based on the first depth information and the second depth information, the offset coefficient corresponding to each pixel is determined; wherein, the larger the difference between the second depth information and the first depth information, the larger the offset coefficient. The projection direction and projection length of the corresponding pixel are offset according to the offset coefficient.

7. The method according to claim 5 or 6, characterized in that, The step of obtaining the second depth information of multiple pixels in the at least one second interface element includes: If the pixel with the largest depth value on the wallpaper area is located in the center area of ​​the wallpaper area, it is determined that the depth value of each pixel of the second interface element at the corresponding position of the wallpaper area is less than the first value, and the first value is the minimum depth value of the wallpaper area. If the pixel with the largest depth value in the wallpaper area is located in the edge area of ​​the wallpaper area, the depth value of each pixel of the second interface element at the corresponding position in the wallpaper area is determined to be greater than or equal to the second value and less than the third value. The second value is the average depth value of the wallpaper area, and the third value is the maximum depth value of the wallpaper area.

8. The method according to any one of claims 4-7, characterized in that, The method further includes: Based on the projection length, a first display attribute of the corresponding projection point is determined, and the first display attribute includes one or more of the following: brightness and transparency.

9. The method according to any one of claims 4-8, characterized in that, The longer the projection length, the lower the brightness and / or the higher the transparency of the corresponding projection point.

10. The method according to any one of claims 4-9, characterized in that, The light source information also includes light source intensity, and the method further includes: Based on the light source intensity, a second display attribute of the projection point on the first theme wallpaper is determined, and the second display attribute includes one or more of the following: brightness and transparency.

11. The method according to claim 10, characterized in that, The stronger the light source, the higher the brightness and / or the lower the transparency of the corresponding projection point.

12. The method according to any one of claims 1-11, characterized in that, The first interface display includes: displaying the first interface when the electronic device is in an unlocked state; the first theme wallpaper is the desktop wallpaper of the electronic device, and the plurality of first interface elements are elements on any desktop page of the electronic device; or, The first interface display includes: displaying the first interface when the electronic device is in an Always-On Display (AOD) state; the first theme wallpaper is the AOD wallpaper of the electronic device, and the plurality of first interface elements are the AOD elements of the electronic device; or, The first interface is a wallpaper settings interface for setting wallpapers, the first theme wallpaper is the theme wallpaper selected on the wallpaper settings interface, and the plurality of first interface elements are elements on the desktop home screen of the electronic device.

13. The method according to any one of claims 1-12, characterized in that, The plurality of first interface elements are elements on the first desktop page of the electronic device, and the method further includes: Retrieve the second theme wallpaper and multiple third interface elements corresponding to the second desktop page to be displayed; Based on the light source information, determine the projection of at least one fourth interface element among the plurality of third interface elements onto the second theme wallpaper; In response to the operation of switching from the first desktop tab to the second desktop tab, a second interface is displayed, the second interface including the second theme wallpaper, the plurality of third interface elements, and the projection corresponding to the at least one fourth interface element.

14. The method according to claim 13, characterized in that, The method further includes: During the transition from the first desktop tab to the second desktop tab, multiple consecutive frames of the third interface are displayed; the multiple consecutive frames of the third interface are used to present the changes in the projection of at least one second interface element on the first theme wallpaper during the transition from the first desktop tab to the second desktop tab, and the changes in the projection of at least one fourth interface element on the second theme wallpaper during the transition.

15. The method according to any one of claims 1-14, characterized in that, Before displaying the first interface, the method further includes: In response to unlocking the electronic device, a series of consecutive frames of the fourth interface are displayed, which are used to present the position change of the projection of at least one second interface element on the first theme wallpaper as the light source position moves from a first preset time to the current time.

16. The method according to any one of claims 1-14, characterized in that: When the electronic device is in AOD state and displays the first interface, it displays the first theme wallpaper with a night lighting effect and displays the projection of AOD elements on the first theme wallpaper with a night projection effect.

17. The method according to any one of claims 1-16, characterized in that, Before displaying the first interface, the method further includes: Determine the occlusion relationship between at least one fifth interface element among the plurality of first interface elements and the wallpaper elements on the first theme wallpaper.

18. The method according to claim 17, characterized in that, The at least one second interface element includes the at least one fifth interface element.

19. The method according to claim 18, characterized in that, Determining the occlusion relationship between at least one fifth interface element among the plurality of first interface elements and wallpaper elements on the first theme wallpaper includes: Obtain the third depth information of each pixel in the wallpaper area where the at least one fifth interface element is located, and obtain the fourth depth information of each pixel in the at least one fifth interface element; Based on the third depth information and the fourth depth information, the occlusion relationship between each pixel of the at least one fifth interface element and each pixel of the wallpaper element on the wallpaper area is determined.

20. The method according to claim 19, characterized in that, Determining the occlusion relationship between each pixel of the at least one fifth interface element and each pixel of the wallpaper element on the wallpaper area based on the third depth information and the fourth depth information includes: The at least one fifth interface element includes a first pixel. If the depth value of the first pixel is determined to be less than the depth value of the pixel of the wallpaper element at the corresponding position based on the third depth information and the fourth depth information, then it is determined that the first pixel occludes the pixel of the wallpaper element at the corresponding position. And / or, The at least one fifth interface element includes a second pixel. If the depth value of the first pixel is determined to be greater than or equal to the depth value of the pixel of the wallpaper element at the corresponding position based on the third depth information and the fourth depth information, then it is determined that the first pixel is occluded by the pixel of the wallpaper element at the corresponding position.

21. The method according to claim 19 or 20, characterized in that, The step of obtaining the fourth depth information of each pixel in the at least one fifth interface element includes: If the pixel with the largest depth value on the wallpaper area is located in the center area of ​​the wallpaper area, it is determined that the depth value of each pixel of the fifth interface element at the corresponding position of the wallpaper area is less than the first value, and the first value is the minimum depth value of the wallpaper area. If the pixel with the largest depth value in the wallpaper area is located in the edge area of ​​the wallpaper area, the depth value of each pixel of the fifth interface element at the corresponding position in the wallpaper area is determined to be greater than or equal to the second value and less than the third value. The second value is the average depth value of the wallpaper area, and the third value is the maximum depth value of the wallpaper area.

22. The method according to any one of claims 5-7 and 19-21, characterized in that, The depth information includes one or more of the following information for each pixel in the wallpaper area: grayscale value, color code, and depth of field value.

23. The method according to any one of claims 1-22, characterized in that, The interface elements include one or more of the following: application components, folders, application icons, and application cards. Application components include one or more of the following: clock components, date components, weather components, and music components.

24. The method according to any one of claims 1-23, characterized in that, The theme wallpaper includes one or more of the following: images and animated image frames.

25. The method according to any one of claims 1-3, characterized in that, The at least one second interface element corresponds to an initial projection at a preset position, and the step of determining the projection of at least one second interface element among the plurality of first interface elements on the first theme wallpaper based on light source information includes: Based on the light source information, determine the offset of each projection point in the initial projection of the at least one second interface element, wherein the light source information includes time information; The projection of the at least one second interface element on the first theme wallpaper is obtained based on the initial projection of the at least one second interface element and the offset of each projection point in the initial projection.

26. An electronic device, characterized in that, The electronic device includes: A display screen is used to display the interface. Memory is used to store computer program instructions; A processor for executing the computer program instructions to support the electronic device in implementing the method as described in any one of claims 1-25.

27. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer program instructions that, when executed by a processing circuit, implement the method as described in any one of claims 1-25.

28. A computer program product containing instructions, characterized in that, When the computer program product is run on a computer, it causes the computer to perform the method as described in any one of claims 1-25.

Images