WO2022111593A1

WO2022111593A1 - Graphical user interface display method and apparatus

Info

Publication number: WO2022111593A1
Application number: PCT/CN2021/133215
Authority: WO
Inventors: 范振华; 杨婉艺; 曹原
Original assignee: 华为技术有限公司
Priority date: 2020-11-28
Filing date: 2021-11-25
Publication date: 2022-06-02
Also published as: CN114584652A; CN114584652B

Abstract

A graphical user interface (GUI) display method and apparatus, applied to an electronic device, the electronic device comprising a display screen for displaying a GUI, and the GUI comprising a specified view control having a depth attribute. The method may comprise: determining, according to a captured first image of a biological characteristic, the position of the biological characteristic with respect to a first light source of a display screen; generating and outputting a first shadow light effect for a specified view control according to the position of the first light source; determining, according to a captured second image of the biological characteristic, the position of the biological characteristic with respect to a second light source of the display screen; and generating and outputting a second shadow light effect for the specified view control according to the position of the second light source. The position of the first light source is different from the position of the second light source, and the first shadow light effect is different from the second shadow light effect, so that a shadow and a light effect of the specified view control can be dynamically displayed, and thus improving the sense of reality of the GUI.

Description

A kind of user graphic interface display method and device

This application claims the priority of the Chinese patent application filed on November 28, 2020 with the application number 202011363058.4 and the application title is "a method for displaying a graphical user interface and its device", the entire contents of which are incorporated by reference in in this application.

technical field

The present application relates to the technical field of electronic equipment, and in particular, to a method and apparatus for displaying a user graphical interface.

Background technique

Graphical user interface (GUI) refers to a user interface related to computer operations displayed in a graphical manner. It can be an icon, window, control and other interface elements displayed on the display screen of the electronic device, wherein the control can include icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, etc. interface elements.

Most electronic equipment manufacturers use a single, static and fixed GUI, which cannot meet the increasing demands of users for realism. Therefore, some electronic equipment manufacturers introduce shadows and light effects in GUIs to build realistic user interfaces, thereby enhancing user experience.

At present, although shadows and light effects are introduced in the GUI, the GUI is still static and fixed.

SUMMARY OF THE INVENTION

The present application provides a user graphical interface display method and device thereof, which can dynamically display the shadow and light effect of a specified view control in the GUI, thereby improving the realism of the GUI.

In a first aspect, the present application provides a method for displaying a graphical user interface. The method is applied to an electronic device, the electronic device includes a display screen for displaying a graphical user interface, and the graphical user interface includes a specified view control with a depth attribute. The method includes: the electronic device determines the position of the first light source according to the first image of the collected biological features; according to the position of the first light source, generating and outputting a first shadow light effect for a specified view control; according to the first image of the collected biological features Two images, determine the position of the second light source; according to the position of the second light source, generate and output the second shadow light effect for the specified view control.

The position of the first light source and the position of the second light source are the positions of the biological feature relative to the display screen, and the position of the first light source is different from the position of the second light source, and the first shadow light effect is different from the second shadow light effect. . That is to say, different light source positions can generate different shadow light effects for the same specified view control.

It can be seen that the shadow light effect of the same specified view control can change with the change of the light source position, so as to realize the dynamic display of the shadow effect of the specified view control, which is beneficial to build a more realistic user graphical interface.

With reference to the first aspect, in a possible implementation manner, the electronic device determines the first image position of the biometric feature in the first image according to the collected first image of the biometric feature, and estimates the distance of the biometric feature relative to the display screen ; Determine the position of the first light source according to the position and distance of the first image. In the same way, the position of the second light source can be determined.

It can be seen that the position of the light source can be determined according to the position of the biological feature in the image and the distance relative to the display screen, which can ensure the accuracy of the position of the light source.

In combination with the first aspect, in a possible implementation manner, when the angle between the display screen and the horizontal direction is within a preset range, the electronic device determines the first viewing angle according to the position and distance of the first image, and determines the first viewing angle according to the first image position and distance. A viewing angle is used to determine the position of the first light source. If the angle between the display screen and the horizontal direction is within the preset range, it can be understood that the display screen is vertical or nearly vertical to the horizontal direction. In this case, the influence of the posture of the electronic device on the position of the light source can be ignored, and the amount of calculation can be reduced.

In combination with the first aspect, in a possible implementation manner, when the angle between the display screen and the horizontal direction is not within the preset range, the electronic device determines the first image according to the angle between the display screen and the horizontal direction, the position and distance of the first image. There are two viewing angles, and the position of the first light source is determined according to the second viewing angle. If the angle between the display screen and the horizontal direction is not within the preset range, it can be understood that the tilt angle of the display screen is relatively large. In this case, considering the influence of the posture of the electronic device on the position of the light source, the position of the light source with higher accuracy can be obtained.

It can be seen that the change of the viewing angle will change the position of the light source, and then different shadow light effects can be generated for the same specified view control.

With reference to the first aspect, in a possible implementation manner, the first shadow light effect includes a first shadow. The electronic device generates and outputs a first shadow for the specified view control according to the position of the first light source, the intensity of the first light source and the material attribute information of the specified view control. When generating shadows, electronic devices not only consider the position and intensity of the light source, but also the material attribute information, which can enrich the shadow effect and make the shadow effect more suitable for the material.

With reference to the first aspect, in a possible implementation manner, the electronic device determines the blur radius of the subject according to the position of the first light source and the intensity of the first light source; and determines the blur radius of the subject according to the position of the first light source and the material attribute information of the specified view control. Projection blur information; according to the subject blur radius and projection blur information, generate and output the first shadow for the specified view control. This method is not only applicable to specified view controls of rectangle, rounded rectangle and circle, but also to specified view controls of other shapes, and has a wider application range.

Wherein, the material property information of the specified view control may include one or more of refractive index, reflectance, diffuse reflectance or transparency. Materials can include one or more of background materials, border materials, or backplane materials. That is to say, if the material property information of the specified view control is different, shadows of different weights, colors, and light effects of different effects can be generated.

With reference to the first aspect, in a possible implementation manner, the first shadow light effect includes a first light effect. The electronic device generates and outputs a first light effect for the specified view control according to the position of the first light source, the intensity of the first light source and the original color information of the specified view control. That is to say, if the position of the light source, the intensity of the light source, and/or the original color information of the specified view control determined by the electronic device are different, the generated light effect will be different, so that the purpose of dynamically displaying the specified view control can be achieved.

With reference to the first aspect, in a possible implementation manner, the first shadow light effect includes a first light effect. The electronic device determines the radial gradient radius according to the position of the first light source; determines the Gaussian blur radius according to the intensity of the first light source; generates and outputs the first light effect for the specified view control according to the radial gradient radius and the Gaussian blur radius. That is to say, the position of the light source or the intensity of the light source determined by the electronic device is different, the radial gradient radius and the Gaussian blur radius are different, and thus the generated light effects are different.

In a second aspect, the present application provides a method for displaying a graphical user interface, the method is applied to an electronic device, the electronic device includes a display screen for displaying a graphical user interface, and the graphical user interface includes a specified view control with a depth attribute. The method includes: the electronic device obtains a first position of the electronic device relative to a preset light source; according to the first position and the position of the preset light source, generating and outputting a first shadow light effect for a specified view control; obtaining the electronic device relative to a preset light source The second position of the light source; according to the second position and the position of the preset light source, generate and output a second shadow light effect for the specified view control.

The first position is different from the second position, and the first shadow light effect is different from the second shadow light effect. That is to say, the position of the preset light source is fixed, the position of the electronic device relative to the preset light source is different, and different shadow light effects can be generated for the same specified view control. The difference between the first position and the second position can be understood as the different postures of the electronic device.

It can be seen that the shadow light effect of the same specified view control can change with the posture of the electronic device, so as to realize the dynamic display of the shadow effect of the specified view control, which is conducive to building a more realistic user graphical interface. The method generates a shadow light effect according to the word strip of the electronic device, and has low power consumption.

With reference to the second aspect, in a possible implementation manner, the first shadow effect includes a first shadow. The electronic device generates and outputs a first shadow for the specified view control according to the first position, the position of the preset light source, the intensity of the first light source, and the material attribute information of the specified view control. When generating shadows, electronic devices not only consider the position and intensity of the light source, but also the material attribute information, which can enrich the shadow effect and make the shadow effect more suitable for the material.

Wherein, the material property information of the specified view control includes one or more of refractive index, reflectance, diffuse reflectance or transparency. Materials can include one or more of background materials, border materials, or backplane materials. That is to say, if the material property information of the specified view control is different, shadows of different weights, colors, and light effects of different effects can be generated.

With reference to the second aspect, in a possible implementation manner, the first shadow light effect includes the first light effect. The electronic device generates and outputs the first light effect for the specified view control according to the first position, the position of the preset light source, the intensity of the first light source, and the original color information of the specified view control. That is to say, if the first position determined by the electronic device, the position of the preset light source, the intensity of the light source, and/or the original color information of the specified view control are different, the generated light effects will be different, so that the specified view control can be dynamically displayed. the goal of.

With reference to the second aspect, in a possible implementation manner, the electronic device determines the radial gradient radius according to the first position and the position of the preset light source; determines the Gaussian blur radius according to the first position and the intensity of the preset light source; Radial gradient radius and Gaussian blur radius, generate and output the first light effect for the specified view control. That is to say, the position of the electronic device relative to the preset light source or the intensity of the preset light source is different, the radial gradient radius and the Gaussian blur radius are different, and thus the generated light effects are different.

In a third aspect, a user graphical interface display device is provided, and the user graphical interface display device has part or all of the functions of the electronic device described in the first aspect or the second aspect. For example, the function of the apparatus may have the function of some or all of the embodiments of the electronic device in the present application, and may also have the function of independently implementing any embodiment of the present application. The functions can be implemented by hardware, or can be implemented by hardware executing corresponding software. The hardware or software includes one or more units or modules corresponding to the above functions.

In a possible design, the structure of the user graphic interface display device may include a processing unit and a display unit, and the processing unit is configured to support the user graphic interface display device to perform the corresponding functions in the above method. The display unit is configured to display the corresponding output shadow light effect in the above-mentioned method performed by the user graphical interface display device. The user graphical interface display device may further include a storage unit, which is used for coupling with the processing unit and the display unit, and stores necessary program instructions and data of the user graphical interface display device.

With reference to the third aspect, in a possible implementation manner, the above-mentioned user graphical interface display device includes:

a processing unit, configured to determine the position of the first light source according to the collected first image of the biological feature; generate a first shadow light effect for the specified view control according to the position of the first light source;

a display unit for outputting the first shadow light effect;

The processing unit is further configured to determine the position of the second light source according to the collected second image of the biological feature; according to the position of the second light source, generate a second shadow light effect for the specified view control;

a display unit, further used for outputting a second shadow light effect;

Wherein, the position of the first light source and the position of the second light source are the positions of the biological feature relative to the display screen, and the position of the first light source is different from the position of the second light source; the first shadow light effect is different from the second shadow light effect.

For the relevant content of this embodiment, reference may be made to the relevant content of the above-mentioned first aspect, which will not be described in detail here.

a processing unit for acquiring a first position of the electronic device relative to the preset light source; generating a first shadow light effect for a specified view control according to the first position and the position of the preset light source;

a display unit for outputting the first shadow light effect;

The processing unit is further configured to obtain a second position of the electronic device relative to the preset light source; according to the second position and the position of the preset light source, generate a second shadow light effect for the specified view control;

a display unit, further used for outputting a second shadow light effect;

Wherein, the first position is different from the second position, and the first shadow light effect is different from the second shadow light effect.

For the relevant content of this embodiment, reference may be made to the relevant content of the above-mentioned second aspect, which will not be described in detail here.

In a fourth aspect, the present application provides a user graphical interface display device, including a display screen, a memory, one or more processors, multiple application programs, and one or more programs. Wherein, one or more programs are stored in the memory, and when the one or more processors execute the one or more programs, the user graphical interface display device implements the method described in the first aspect or the second aspect.

In a fifth aspect, the present application provides a computer device, including a memory, a processor, and a computer program stored in the memory and running on the processor. When the processor executes the computer program, the computer device implements the first aspect or the second aspect. method described in the aspect.

In a sixth aspect, the present application provides a computer program product containing instructions, when the computer program product is run on an electronic device, the electronic device is made to execute the first aspect and any possible implementation of the first aspect. method; or performing the method as described in the second aspect and any possible implementation manner of the second aspect.

In a seventh aspect, the present application provides a computer-readable storage medium, comprising instructions that, when the above-mentioned instructions are executed on an electronic device, cause the above-mentioned electronic device to execute as described in the first aspect and any possible implementation manner of the first aspect method; or performing the method as described in the second aspect and any possible implementation manner of the second aspect.

Description of drawings

Fig. 1 is an example diagram of a three-dimensional coordinate axis of a mobile phone;

Figure 2 is an example diagram of the shadow effect of the specified view control under the action of the light source;

3 is a schematic diagram of a structure of an electronic device provided by an embodiment;

4 is a schematic flowchart of a method for displaying a graphical user interface provided by an embodiment of the present application;

FIG. 5 is an example diagram of a first image provided by an embodiment of the present application;

FIG. 6 is an example diagram of a first image and a display screen provided by an embodiment of the present application;

FIG. 7-1 is an exemplary diagram of determining the position of the first light source according to an embodiment of the present application;

FIG. 7-2 is another exemplary diagram of determining the position of the first light source provided by the embodiment of the present application;

FIG. 8 is an example diagram of generating a first shadow provided by an embodiment of the present application;

FIG. 9 is an example diagram of generating a first light effect provided by an embodiment of the present application;

FIG. 10 is an example diagram provided by the embodiment of the present application;

FIG. 11 is another example diagram provided by an embodiment of the present application;

12 is a schematic flowchart of another method for displaying a graphical user interface provided by an embodiment of the present application;

FIG. 13 is another example diagram provided by an embodiment of the present application;

FIG. 14 is a schematic diagram of a user graphical interface display device provided by an embodiment of the present application.

Detailed ways

The terms used in the following embodiments of the present application are only for the purpose of describing specific embodiments, and are not intended to be used as limitations of the present application. As used in the specification of this application and the appended claims, the singular expressions "a," "an," "the," "above," "the," and "the" are intended to also Plural expressions are included unless the context clearly dictates otherwise. It will also be understood that, as used in this application, the term "and/or" refers to and includes any and all possible combinations of one or more of the listed items.

The present application relates to the technical field of electronic equipment. In some embodiments, the electronic device may be a portable electronic device that also includes other functions such as personal digital assistant and/or music player functions, such as a cell phone, tablet computer, wearable electronic device with wireless communication capabilities (eg, a smart watch) Wait. Exemplary embodiments of portable electronic devices include, but are not limited to, carry-on

Or portable electronic devices with other operating systems. The portable electronic device described above may also be other portable electronic devices, such as a laptop computer (Laptop) with a touch-sensitive surface or a touch panel, or the like. It should also be understood that, in some other embodiments, the above-mentioned electronic device may not be a portable electronic device, but a desktop computer having a touch-sensitive surface or a touch panel.

The term "user graphical interface" in the description, claims and drawings of this application is a commonly used expression form of user interface (UI). UI is a medium interface for interaction and information exchange between application programs or operating systems and users, and it realizes the conversion between the internal form of information and the form acceptable to users. The user interface of the application is the source code written in a specific computer language such as java and extensible markup language (XML). Such as pictures, text, buttons and other controls. Controls, also known as widgets, are the basic elements of the user interface. Typical controls include toolbars, menu bars, text boxes, buttons, and scroll bars. (scrollbar), pictures and text. The attributes and content of controls in the interface are defined by tags or nodes. For example, XML specifies the controls contained in the interface through nodes such as <Textview>, <ImgView>, and <VideoView>. A node corresponds to a control or property in the interface, and the node is rendered as user-visible content after parsing and rendering. In addition, many applications, such as hybrid applications, often contain web pages in their interface. A web page, also known as a page, can be understood as a special control embedded in an application interface. A web page is source code written in a specific computer language, such as hypertext markup language (GTML), cascading styles Tables (cascading style sheets, CSS), java scripts (JavaScript, JS), etc., the source code of the web page can be loaded and displayed as user-identifiable content by a browser or a web page display component similar in function to a browser. The specific content contained in a web page is also defined by tags or nodes in the source code of the web page. For example, GTML defines the elements and attributes of web pages through <p>, <img>, <video>, and <canvas>.

Graphical user interface refers to a user interface related to computer operation displayed in a graphical manner. The user graphical interface can be an icon, window, control or other interface elements displayed on the display screen of the electronic device, wherein the control can include icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, navigation bars, Widgets and other visual interface elements.

The embodiments of the present application provide a user graphical interface display method and device thereof, which can dynamically display shadows and light effects of specified view controls in the user graphical interface, thereby providing a realistic sense of the user graphical interface.

In this embodiment of the present application, the user graphical display interface includes a specified view control with a depth attribute. View controls can be visual interface elements such as icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, and navigation bars in a user graphical interface. The specified view control refers to a view control with a depth property. The depth attribute can also be described as a Z-axis attribute, an elevation attribute, or an altitude attribute, among other names. It can be understood that the specified view control adds a Z-axis attribute on the basis of a conventional view control with X-axis and Y-axis attributes.

The electronic device takes a mobile phone as an example, and the definition of the three-dimensional coordinate axis of the mobile phone by the Android system can be seen in Figure 1. In A of Figure 1, the short axis of the mobile phone is the X axis, the long axis is the Y axis, and the vertical upward direction of the mobile phone display is the Z axis; in B of Figure 1, the short axis of the mobile phone is the Y axis, the long axis is the X axis, and the vertical axis is the X axis. The screen of the mobile phone is the Z-axis upwards.

Specifies that the view control can produce shadow effects under the action of the light source. For example, as shown in Figure 2, the specified view control takes a button as an example. The button's depth attribute changes from 0dp to 6dp, which can produce a shadow effect; the button's depth attribute changes from 6dp to 0dp, without shadow effect. In Figure 2, a button with a depth attribute of 6dp has two shadow effects, namely the ambient light shadow effect and the point light shadow effect. In the case where the value of the depth attribute is fixed, the shadow effect shown in Figure 2 is static and fixed, and will not change with the change of the posture of the mobile phone, nor will it change with the change of the user's eye position.

Under the action of the light source, the specified view control can not only produce shadow effects, but also light effects. The light effect of parallel light is related to the direction of the light and the orientation of the illuminated plane. When the direction of the light is at a 90-degree angle to the illuminated plane, the light effect is the strongest; when the angle between the direction of the light and the illuminated plane gradually decreases, the light effect gradually becomes weaker; When the illumination plane is parallel, no light is irradiated on the illuminated plane, the light intensity is 0, and there is no light effect. The light effect of a point light source is not only related to the direction of the light and the orientation of the illuminated plane, but also to the light intensity and color of the light. In this application, the light effect is also related to the original color of the specified view control.

It can be understood that words such as "specified view control", "depth attribute", "shadow", and "light effect" are some words used in the embodiments of the present application, and their meanings have been recorded in the embodiments of the present application, and It does not constitute a limitation to the embodiments of the present application. "Shadow" may also be referred to as other terms such as "shadow effect", and "light effect" may also be referred to as other terms such as "light effect" or "light effect". In this embodiment of the present application, "shadow light effect" is used to describe two effects of "shadow" and "light effect", that is, "shadow light effect" may include "shadow" and/or "light effect".

First, the exemplary electronic device 100 provided in the following embodiments of the present application is introduced.

FIG. 3 shows a schematic structural diagram of the electronic device 100 .

The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (USB) interface 130, a charge management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2 , mobile communication module 150, wireless communication module 160, audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone jack 170D, sensor module 180, buttons 190, motor 191, indicator 192, camera 193, display screen 194, and Subscriber identification module (subscriber identification module, SIM) card interface 195 and so on. The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, and ambient light. Sensor 180L, bone conduction sensor 180M, etc.

It can be understood that the structures illustrated in the embodiments of the present application do not constitute a specific limitation on the electronic device 100 . In other embodiments of the present application, the electronic device 100 may include more or less components than shown, or combine some components, or separate some components, or arrange different components. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

The processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (application processor, AP), a modem processor, a graphics processor (graphics processing unit, GPU), an image signal processor (image signal processor, ISP), controller, video codec, digital signal processor (digital signal processor, DSP), baseband processor, and/or neural-network processing unit (neural-network processing unit, NPU), etc. Wherein, different processing units may be independent devices, or may be integrated in one or more processors.

The controller can generate an operation control signal according to the instruction operation code and timing signal, and complete the control of fetching and executing instructions.

A memory may also be provided in the processor 110 for storing instructions and data. In some embodiments, the memory in processor 110 is cache memory. This memory may hold instructions or data that have just been used or recycled by the processor 110 . If the processor 110 needs to use the instruction or data again, it can be called directly from the memory. Repeated accesses are avoided and the latency of the processor 110 is reduced, thereby increasing the efficiency of the system.

In some embodiments, the processor 110 may include one or more interfaces. The interface may include an integrated circuit (inter-integrated circuit, I2C) interface, an integrated circuit built-in audio (inter-integrated circuit sound, I2S) interface, a pulse code modulation (pulse code modulation, PCM) interface, a universal asynchronous transceiver (universal asynchronous transmitter) receiver/transmitter, UART) interface, mobile industry processor interface (MIPI), general-purpose input/output (GPIO) interface, subscriber identity module (SIM) interface, and / or universal serial bus (universal serial bus, USB) interface, etc.

The I2C interface is a bidirectional synchronous serial bus that includes a serial data line (SDA) and a serial clock line (SCL). In some embodiments, the processor 110 may contain multiple sets of I2C buses. The processor 110 can be respectively coupled to the touch sensor 180K, the charger, the flash, the camera 193 and the like through different I2C bus interfaces. For example, the processor 110 may couple the touch sensor 180K through the I2C interface, so that the processor 110 and the touch sensor 180K communicate with each other through the I2C bus interface, so as to realize the touch function of the electronic device 100 .

The I2S interface can be used for audio communication. In some embodiments, the processor 110 may contain multiple sets of I2S buses. The processor 110 may be coupled with the audio module 170 through an I2S bus to implement communication between the processor 110 and the audio module 170 . In some embodiments, the audio module 170 can transmit audio signals to the wireless communication module 160 through the I2S interface, so as to realize the function of answering calls through a Bluetooth headset.

The PCM interface can also be used for audio communications, sampling, quantizing and encoding analog signals. In some embodiments, the audio module 170 and the wireless communication module 160 may be coupled through a PCM bus interface. In some embodiments, the audio module 170 can also transmit audio signals to the wireless communication module 160 through the PCM interface, so as to realize the function of answering calls through the Bluetooth headset. Both the I2S interface and the PCM interface can be used for audio communication.

The UART interface is a universal serial data bus used for asynchronous communication. The bus may be a bidirectional communication bus. It converts the data to be transmitted between serial communication and parallel communication. In some embodiments, a UART interface is typically used to connect the processor 110 with the wireless communication module 160 . For example, the processor 110 communicates with the Bluetooth module in the wireless communication module 160 through the UART interface to implement the Bluetooth function. In some embodiments, the audio module 170 can transmit audio signals to the wireless communication module 160 through the UART interface, so as to realize the function of playing music through the Bluetooth headset.

The MIPI interface can be used to connect the processor 110 with peripheral devices such as the display screen 194 and the camera 193 . MIPI interfaces include camera serial interface (CSI), display serial interface (DSI), etc. In some embodiments, the processor 110 communicates with the camera 193 through a CSI interface, so as to realize the photographing function of the electronic device 100 . The processor 110 communicates with the display screen 194 through the DSI interface to implement the display function of the electronic device 100 .

The GPIO interface can be configured by software. The GPIO interface can be configured as a control signal or as a data signal. In some embodiments, the GPIO interface may be used to connect the processor 110 with the camera 193, the display screen 194, the wireless communication module 160, the audio module 170, the sensor module 180, and the like. The GPIO interface can also be configured as I2C interface, I2S interface, UART interface, MIPI interface, etc.

The USB interface 130 is an interface that conforms to the USB standard specification, and may specifically be a Mini USB interface, a Micro USB interface, a USB Type C interface, and the like. The USB interface 130 can be used to connect a charger to charge the electronic device 100, and can also be used to transmit data between the electronic device 100 and peripheral devices. It can also be used to connect headphones to play audio through the headphones. The interface can also be used to connect other electronic devices, such as AR devices.

It can be understood that the interface connection relationship between the modules illustrated in the embodiments of the present application is only a schematic illustration, and does not constitute a structural limitation of the electronic device 100 . In other embodiments of the present application, the electronic device 100 may also adopt different interface connection manners in the foregoing embodiments, or a combination of multiple interface connection manners.

The charging management module 140 is used to receive charging input from the charger. The charger may be a wireless charger or a wired charger. In some wired charging embodiments, the charging management module 140 may receive charging input from the wired charger through the USB interface 130 . In some wireless charging embodiments, the charging management module 140 may receive wireless charging input through a wireless charging coil of the electronic device 100 . While the charging management module 140 charges the battery 142 , it can also supply power to the electronic device through the power management module 141 .

The power management module 141 is used for connecting the battery 142 , the charging management module 140 and the processor 110 . The power management module 141 receives input from the battery 142 and/or the charge management module 140, and supplies power to the processor 110, the internal memory 121, the display screen 194, the camera 193, and the wireless communication module 160. The power management module 141 can also be used to monitor battery capacity, battery cycle times, battery health status (leakage, impedance) and other parameters. In some other embodiments, the power management module 141 may also be provided in the processor 110 . In other embodiments, the power management module 141 and the charging management module 140 may also be provided in the same device.

The wireless communication function of the electronic device 100 may be implemented by the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modulation and demodulation processor, the baseband processor, and the like.

Antenna 1 and Antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 may be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example, the antenna 1 can be multiplexed as a diversity antenna of the wireless local area network. In other embodiments, the antenna may be used in conjunction with a tuning switch.

The mobile communication module 150 may provide wireless communication solutions including 2G/3G/4G/5G etc. applied on the electronic device 100 . The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA) and the like. The mobile communication module 150 can receive electromagnetic waves from the antenna 1, filter and amplify the received electromagnetic waves, and transmit them to the modulation and demodulation processor for demodulation. The mobile communication module 150 can also amplify the signal modulated by the modulation and demodulation processor, and then turn it into an electromagnetic wave for radiation through the antenna 1 . In some embodiments, at least part of the functional modules of the mobile communication module 150 may be provided in the processor 110 . In some embodiments, at least part of the functional modules of the mobile communication module 150 may be provided in the same device as at least part of the modules of the processor 110 .

The modem processor may include a modulator and a demodulator. Wherein, the modulator is used to modulate the low frequency baseband signal to be sent into a medium and high frequency signal. The demodulator is used to demodulate the received electromagnetic wave signal into a low frequency baseband signal. Then the demodulator transmits the demodulated low-frequency baseband signal to the baseband processor for processing. The low frequency baseband signal is processed by the baseband processor and passed to the application processor. The application processor outputs sound signals through audio devices (not limited to the speaker 170A, the receiver 170B, etc.), or displays images or videos through the display screen 194 . In some embodiments, the modem processor may be a separate device. In other embodiments, the modulation and demodulation processor may be independent of the processor 110, and be provided in the same device as the mobile communication module 150 or other functional modules.

The wireless communication module 160 can provide applications on the electronic device 100 including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), bluetooth (BT), global navigation satellites Wireless communication solutions such as global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), and infrared technology (IR). The wireless communication module 160 may be one or more devices integrating at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2 , frequency modulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 110 . The wireless communication module 160 can also receive the signal to be sent from the processor 110 , perform frequency modulation on it, amplify it, and convert it into electromagnetic waves for radiation through the antenna 2 .

In some embodiments, the antenna 1 of the electronic device 100 is coupled with the mobile communication module 150, and the antenna 2 is coupled with the wireless communication module 160, so that the electronic device 100 can communicate with the network and other devices through wireless communication technology. The wireless communication technologies may include global system for mobile communications (GSM), general packet radio service (GPRS), code division multiple access (CDMA), broadband Code Division Multiple Access (WCDMA), Time Division Code Division Multiple Access (TD-SCDMA), Long Term Evolution (LTE), BT, GNSS, WLAN, NFC , FM, and/or IR technology, etc. The GNSS may include a global positioning system (global positioning system, GPS), a global navigation satellite system (GLONASS), a Beidou navigation satellite system (BDS), a quasi-zenith satellite system (quasi -zenith satellite system, QZSS) and/or satellite based augmentation systems (SBAS).

The electronic device 100 implements a display function through a GPU, a display screen 194, an application processor, and the like. The GPU is a microprocessor for image processing, and is connected to the display screen 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. Processor 110 may include one or more GPUs that execute program instructions to generate or alter display information.

Display screen 194 is used to display images, videos, and the like. Display screen 194 includes a display panel. The display panel can be a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active-matrix organic light-emitting diode or an active-matrix organic light-emitting diode (active-matrix organic light). emitting diode, AMOLED), flexible light-emitting diode (flex light-emitting diode, FLED), Miniled, MicroLed, Micro-oLed, quantum dot light-emitting diode (quantum dot light emitting diodes, QLED) and so on. In some embodiments, the electronic device 100 may include one or N display screens 194 , where N is a positive integer greater than one.

In this embodiment of the present application, the display screen 194 may be used to display shadows and light effects of specified view controls. For the manner in which the electronic device displays the shadow light effect of the specified view control, reference may be made to the related descriptions in the subsequent embodiments, and details are not described herein again.

The electronic device 100 may implement a shooting function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, an application processor, and the like.

The ISP is used to process the data fed back by the camera 193 . For example, when taking a photo, the shutter is opened, the light is transmitted to the camera photosensitive element through the lens, the light signal is converted into an electrical signal, and the camera photosensitive element transmits the electrical signal to the ISP for processing, and converts it into an image visible to the naked eye. ISP can also perform algorithm optimization on image noise, brightness, and skin tone. ISP can also optimize the exposure, color temperature and other parameters of the shooting scene. In some embodiments, the ISP may be provided in the camera 193 .

Camera 193 is used to capture still images or video. The object is projected through the lens to generate an optical image onto the photosensitive element. The photosensitive element may be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then transmits the electrical signal to the ISP to convert it into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. DSP converts digital image signals into standard RGB, YUV and other formats of image signals. In some embodiments, the electronic device 100 may include 1 or N cameras 193 , where N is a positive integer greater than 1. Further, the electronic device 100 may include one or more rear cameras, and may also include one or more front cameras. The rear camera is usually located on the back of the display screen 194 , and the front camera is usually located on the side of the display screen 194 .

A digital signal processor is used to process digital signals, in addition to processing digital image signals, it can also process other digital signals. For example, when the electronic device 100 selects a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy and so on.

Video codecs are used to compress or decompress digital video. The electronic device 100 may support one or more video codecs. In this way, the electronic device 100 can play or record videos of various encoding formats, such as: Moving Picture Experts Group (moving picture experts group, MPEG) 1, MPEG2, MPEG3, MPEG4 and so on.

The NPU is a neural-network (NN) computing processor. By drawing on the structure of biological neural networks, such as the transfer mode between neurons in the human brain, it can quickly process the input information and can continuously learn by itself. Applications such as intelligent cognition of the electronic device 100 can be implemented through the NPU, such as image recognition, face recognition, speech recognition, text understanding, and the like.

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 100 . The external memory card communicates with the processor 110 through the external memory interface 120 to realize the data storage function. For example to save files like music, video etc in external memory card.

Internal memory 121 may be used to store computer executable program code, which includes instructions. The internal memory 121 may include a storage program area and a storage data area. The storage program area can store an operating system, an application program required for at least one function (such as a sound playback function, an image playback function, etc.), and the like. The storage data area can store data (such as audio data, phone book, etc.) created during the use of the electronic device 100 and the like. In addition, the internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, universal flash storage (UFS), and the like. The processor 110 executes various functional applications and data processing of the electronic device 100 by executing instructions stored in the internal memory 121 and/or instructions stored in a memory provided in the processor.

The electronic device 100 may implement audio functions through an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, an application processor, and the like. Such as music playback, recording, etc.

The audio module 170 is used for converting digital audio information into analog audio signal output, and also for converting analog audio input into digital audio signal. Audio module 170 may also be used to encode and decode audio signals. In some embodiments, the audio module 170 may be provided in the processor 110 , or some functional modules of the audio module 170 may be provided in the processor 110 .

Speaker 170A, also referred to as a "speaker", is used to convert audio electrical signals into sound signals. The electronic device 100 can listen to music through the speaker 170A, or listen to a hands-free call.

The receiver 170B, also referred to as "earpiece", is used to convert audio electrical signals into sound signals. When the electronic device 100 answers a call or a voice message, the voice can be answered by placing the receiver 170B close to the human ear.

The microphone 170C, also called "microphone" or "microphone", is used to convert sound signals into electrical signals. When making a call or sending a voice message, the user can make a sound by approaching the microphone 170C through a human mouth, and input the sound signal into the microphone 170C. The electronic device 100 may be provided with at least one microphone 170C. In other embodiments, the electronic device 100 may be provided with two microphones 170C, which can implement a noise reduction function in addition to collecting sound signals. In other embodiments, the electronic device 100 may further be provided with three, four or more microphones 170C to collect sound signals, reduce noise, identify sound sources, and implement directional recording functions.

The earphone jack 170D is used to connect wired earphones. The earphone interface 170D can be the USB interface 130, or can be a 3.5mm open mobile terminal platform (OMTP) standard interface, a cellular telecommunications industry association of the USA (CTIA) standard interface.

The pressure sensor 180A is used to sense pressure signals, and can convert the pressure signals into electrical signals. In some embodiments, the pressure sensor 180A may be provided on the display screen 194 . There are many types of pressure sensors 180A, such as resistive pressure sensors, inductive pressure sensors, capacitive pressure sensors, and the like. The capacitive pressure sensor may be comprised of at least two parallel plates of conductive material. When a force is applied to the pressure sensor 180A, the capacitance between the electrodes changes. The electronic device 100 determines the intensity of the pressure according to the change in capacitance. When a touch operation acts on the display screen 194, the electronic device 100 detects the intensity of the touch operation according to the pressure sensor 180A. The electronic device 100 may also calculate the touched position according to the detection signal of the pressure sensor 180A. In some embodiments, touch operations acting on the same touch position but with different touch operation intensities may correspond to different operation instructions. For example, when a touch operation whose intensity is less than the first pressure threshold acts on the short message application icon, the instruction for viewing the short message is executed. When a touch operation with a touch operation intensity greater than or equal to the first pressure threshold acts on the short message application icon, the instruction to create a new short message is executed.

The gyro sensor 180B may be used to determine the motion attitude of the electronic device 100 . In some embodiments, the angular velocity of electronic device 100 about three axes (ie, x, y, and z axes) may be determined by gyro sensor 180B. The gyro sensor 180B can be used for image stabilization. Exemplarily, when the shutter is pressed, the gyro sensor 180B detects the shaking angle of the electronic device 100, calculates the distance that the lens module needs to compensate according to the angle, and allows the lens to offset the shaking of the electronic device 100 through reverse motion to achieve anti-shake. The gyro sensor 180B can also be used for navigation and somatosensory game scenarios.

The air pressure sensor 180C is used to measure air pressure. In some embodiments, the electronic device 100 calculates the altitude through the air pressure value measured by the air pressure sensor 180C to assist in positioning and navigation.

The magnetic sensor 180D includes a Hall sensor. The electronic device 100 can detect the opening and closing of the flip holster using the magnetic sensor 180D. In some embodiments, when the electronic device 100 is a flip machine, the electronic device 100 can detect the opening and closing of the flip according to the magnetic sensor 180D. Further, according to the detected opening and closing state of the leather case or the opening and closing state of the flip cover, characteristics such as automatic unlocking of the flip cover are set.

The acceleration sensor 180E can detect the magnitude of the acceleration of the electronic device 100 in various directions (generally three axes). The magnitude and direction of gravity can be detected when the electronic device 100 is stationary. It can also be used to identify the posture of electronic devices, and can be used in applications such as horizontal and vertical screen switching, pedometers, etc.

Distance sensor 180F for measuring distance. The electronic device 100 can measure the distance through infrared or laser. In some embodiments, when shooting a scene, the electronic device 100 can use the distance sensor 180F to measure the distance to achieve fast focusing.

Proximity light sensor 180G may include, for example, light emitting diodes (LEDs) and light detectors, such as photodiodes. The light emitting diodes may be infrared light emitting diodes. The electronic device 100 emits infrared light to the outside through the light emitting diode. Electronic device 100 uses photodiodes to detect infrared reflected light from nearby objects. When sufficient reflected light is detected, it can be determined that there is an object near the electronic device 100 . When insufficient reflected light is detected, the electronic device 100 may determine that there is no object near the electronic device 100 . The electronic device 100 can use the proximity light sensor 180G to detect that the user holds the electronic device 100 close to the ear to talk, so as to automatically turn off the screen to save power. Proximity light sensor 180G can also be used in holster mode, pocket mode automatically unlocks and locks the screen.

The ambient light sensor 180L is used to sense ambient light brightness. The electronic device 100 can adaptively adjust the brightness of the display screen 194 according to the perceived ambient light brightness. The ambient light sensor 180L can also be used to automatically adjust the white balance when taking pictures. The ambient light sensor 180L can also cooperate with the proximity light sensor 180G to detect whether the electronic device 100 is in a pocket, so as to prevent accidental touch.

The fingerprint sensor 180H is used to collect fingerprints. The electronic device 100 can use the collected fingerprint characteristics to realize fingerprint unlocking, accessing application locks, taking pictures with fingerprints, answering incoming calls with fingerprints, and the like.

The temperature sensor 180J is used to detect the temperature. In some embodiments, the electronic device 100 uses the temperature detected by the temperature sensor 180J to execute a temperature processing strategy. For example, when the temperature reported by the temperature sensor 180J exceeds a threshold value, the electronic device 100 reduces the performance of the processor located near the temperature sensor 180J in order to reduce power consumption and implement thermal protection. In other embodiments, when the temperature is lower than another threshold, the electronic device 100 heats the battery 142 to avoid abnormal shutdown of the electronic device 100 caused by the low temperature. In some other embodiments, when the temperature is lower than another threshold, the electronic device 100 boosts the output voltage of the battery 142 to avoid abnormal shutdown caused by low temperature.

Touch sensor 180K, also called "touch panel". The touch sensor 180K may be disposed on the display screen 194 , and the touch sensor 180K and the display screen 194 form a touch screen, also called a “touch screen”. The touch sensor 180K is used to detect a touch operation on or near it. The touch sensor can pass the detected touch operation to the application processor to determine the type of touch event. Visual output related to touch operations may be provided through display screen 194 . In other embodiments, the touch sensor 180K may also be disposed on the surface of the electronic device 100 , which is different from the location where the display screen 194 is located.

The bone conduction sensor 180M can acquire vibration signals. In some embodiments, the bone conduction sensor 180M can acquire the vibration signal of the vibrating bone mass of the human voice. The bone conduction sensor 180M can also contact the pulse of the human body and receive the blood pressure beating signal. In some embodiments, the bone conduction sensor 180M can also be disposed in the earphone, combined with the bone conduction earphone. The audio module 170 can analyze the voice signal based on the vibration signal of the vocal vibration bone block obtained by the bone conduction sensor 180M, so as to realize the voice function. The application processor can analyze the heart rate information based on the blood pressure beat signal obtained by the bone conduction sensor 180M, and realize the function of heart rate detection.

The keys 190 include a power-on key, a volume key, and the like. Keys 190 may be mechanical keys. It can also be a touch key. The electronic device 100 may receive key inputs and generate key signal inputs related to user settings and function control of the electronic device 100 .

Motor 191 can generate vibrating cues. The motor 191 can be used for vibrating alerts for incoming calls, and can also be used for touch vibration feedback. For example, touch operations acting on different applications (such as taking pictures, playing audio, etc.) can correspond to different vibration feedback effects. The motor 191 can also correspond to different vibration feedback effects for touch operations on different areas of the display screen 194 . Different application scenarios (for example: time reminder, receiving information, alarm clock, games, etc.) can also correspond to different vibration feedback effects. The touch vibration feedback effect can also support customization.

The indicator 192 can be an indicator light, which can be used to indicate the charging state, the change of the power, and can also be used to indicate a message, a missed call, a notification, and the like.

The SIM card interface 195 is used to connect a SIM card. The SIM card can be contacted and separated from the electronic device 100 by inserting into the SIM card interface 195 or pulling out from the SIM card interface 195 . The electronic device 100 may support 1 or N SIM card interfaces, where N is a positive integer greater than 1. The SIM card interface 195 can support Nano SIM card, Micro SIM card, SIM card and so on. Multiple cards can be inserted into the same SIM card interface 195 at the same time. The types of the plurality of cards may be the same or different. The SIM card interface 195 can also be compatible with different types of SIM cards. The SIM card interface 195 is also compatible with external memory cards. The electronic device 100 interacts with the network through the SIM card to implement functions such as call and data communication. In some embodiments, the electronic device 100 employs an eSIM, ie: an embedded SIM card. The eSIM card can be embedded in the electronic device 100 and cannot be separated from the electronic device 100 .

The electronic device 100 exemplarily shown in FIG. 3 may dynamically display designated view controls in the GUI through the display screen 194 . In some embodiments, the electronic device 100 may determine the positions of different light sources through the images captured by the camera 193, and then dynamically display the shadow light effects of the specified view controls. In some embodiments, the electronic device 100 may detect the posture of the user holding the electronic device 100 through the gyro sensor 180B, the acceleration sensor 180E, etc., and then dynamically display the shadow light effect of the view control according to different postures. In some embodiments, the electronic device 100 can detect the gesture of the user holding the electronic device 100 through the image collected by the camera 193 and the gyro sensor 180B, the acceleration sensor 180E, etc., and dynamically display the shadow light effect of the specified view control.

The following will introduce the user graphical interface display method provided by the present application.

Please refer to FIG. 4 , which is a schematic flowchart of a method for displaying a graphical user interface provided by an embodiment of the present application. The process may be but not limited to the following steps:

Step 401: Determine the position of the first light source according to the collected first image of the biological feature.

Wherein, the organism refers to an organism with kinetic energy, such as a human, a cat, a dog, and the like. In the embodiments of the present application, the creature takes a human as an example, that is, a user. Biometrics are often unique (unlike other living things) and can be used for measurement, identification, verification, etc. Biometrics may include, but are not limited to, eyes, nose, mouth, face, iris, fingerprints, and the like. In the embodiments of the present application, the biological feature takes eyes as an example.

In an implementation manner, the electronic device 100 starts the front camera, and collects the first image of the biometric feature through the front camera. The first image includes eyes, which can be the complete facial image shown in A in FIG. The image shown in B in FIG. 5 only includes the eyes, and the position of the eyes in the first image is related to the focal length of the front camera and the distance of the eyes relative to the display screen 194 . Without considering the thickness of the display screen, the distance of the eyes relative to the display screen 194 can be understood as the distance of the eyes relative to the electronic device 100 .

In another implementation manner, the electronic device 100 uses a preset face (face) identification (identify, ID) or a collected face ID as the first image. The face ID is used for face recognition, and in the embodiment of the present application, the face ID is also used to determine the position of the light source, and the eyes in the face ID are used as the light source. The electronic device 100 may collect the face ID through the camera 193 in advance, and store it as a preset face ID.

The electronic device 100 determines the position of the first light source according to the first image. The position of the first light source is the position of the eye relative to the display screen. Specifically, the electronic device 100 determines the position of the first light source according to the first image position of the eye in the first image and the distance of the eye relative to the display screen.

The first image position may include the position of the left eye in the first image, and/or the position of the right eye in the first image. The electronic device 100 can identify the eye in the first image through a human eye recognition algorithm, and then determine the position of the first image. Or, the electronic device 100 may identify the human face in the first image through a face recognition algorithm, and then determine the position of the first image through the ratio of the eyes to the human face. The method for how the electronic device 100 determines the position of the first image is not limited in this embodiment of the present application.

The distance of the eye relative to the display screen can be understood as the vertical distance of the eye relative to the display screen, that is, the vertical distance of the first image relative to the display screen. The electronic device 100 can estimate the distance of the eyes relative to the display screen according to the face area, the area of the first image, and the preset focal length of the front camera. Specifically, the following formula can be used to estimate the distance of the eye relative to the display screen.

Distance = face area / area of the first image * conversion factor

The conversion coefficient is related to the preset focal length and the focal length when the first image is collected, and the specific relationship and specific value are not limited in the embodiments of the present application. To further improve the accuracy of the distance, the method of distance between eyes can be used to assist in calculating the distance. The electronic device 100 may also use other methods to calculate the distance between the eyes and the display screen, and the embodiment of the present application does not limit how to calculate the distance between the eyes and the display screen.

The electronic device 100 determines the position of the eye, that is, the position of the first light source, when the position of the first image and the above-mentioned distance are obtained. As shown in FIG. 6 , the electronic device 100 determines the position of the eye relative to the display screen in the case of determining the distance of the eye relative to the display screen and the position of the eye in the first image. If the lines on which the two eyes are located are parallel to the horizontal direction, then the angle 1 and the angle 2 in FIG. 6 are the same; otherwise, there is a certain difference between the angle 1 and the angle 2.

In one implementation, the location of the first light source may include the location of the left eye and/or the location of the right eye. In another implementation manner, the position of the first light source is a position comprehensively determined according to the position of the left eye and the position of the right eye.

The electronic device 100 determines the position of the first light source according to whether the angle between the display screen and the horizontal direction is within a preset range. The preset range may be [90°-M°, 90°+M°], for example, M is 5, and within the range of [85°, 95°], the display screen is considered to be vertical relative to the horizontal direction. The specific value of M is not limited in the embodiments of the present application. It can be understood that when the included angle between the display screen and the horizontal direction is within the deviation range of 90 degrees, the display screen is considered to be vertical with respect to the horizontal direction, and the deviation value can be ignored.

Case 1: The angle between the display screen and the horizontal direction is within a preset range, that is, the display screen is vertical relative to the horizontal direction. The electronic device 100 determines the first viewing angle according to the first image position and the above-mentioned distance, and determines the position of the first light source according to the first viewing angle. Taking the position of the first light source as the position of the right eye as an example, as shown in Figure 7-1, according to the first image position and the above distance, combined with the principle of trigonometric functions, the first angle of view can be calculated, and then according to the first angle of view, The position (x, y, z) of the right eye can be calculated.

Case 2: The angle between the display screen and the horizontal direction is not within the preset range, that is, the display screen has a certain angle relative to the horizontal direction. The electronic device 100 determines the second viewing angle according to the first image position, the above-mentioned distance, and the angle between the display screen and the horizontal direction, and determines the position of the first light source according to the second viewing angle. It can be understood that, assuming that the display screen is vertical relative to the horizontal direction, the first viewing angle is determined, and the first viewing angle is corrected according to the angle between the display screen and the horizontal direction to obtain the second viewing angle. Taking the position of the first light source as the position of the right eye as an example, as shown in Figure 7-2, the first viewing angle is corrected to obtain the second viewing angle, and then the position of the right eye (x) can be calculated according to the second viewing angle. , y, z).

The calculated position of the first light source in the second case is more accurate than that in the first case.

Further, in the case of determining the position of the first light source, the electronic device 100 may determine the intensity of the first light source. It can be understood that the closer the distance between the light source and the display screen, the stronger the intensity of the light source; otherwise, the weaker the intensity of the light source. In this embodiment of the present application, how the electronic device 100 determines the intensity of the first light source is not limited.

Step 402 , according to the position of the first light source, generate and output a first shadow light effect for a specified view control.

Wherein, the first shadow light effect may include a first shadow. The electronic device 100 may generate the first shadow for the specified view control according to the position of the first light source in the following manner, and output the first shadow through the display screen.

Manner 1, the electronic device 100 generates the first shadow for the specified view control according to the position of the first light source and the shadow drawing algorithm, and outputs the first shadow through the display screen. The shadow drawing algorithm may be a shadow drawing command. For the outer frame (rectangle, rounded rectangle, circle) of the specified view control in the GUI, when the shadow drawing command is received, the shadow drawing command is executed, the shadow is drawn, and the ambient light shadow and the shadow are respectively generated according to the position of the first light source. Point light shadows.

Method 1 can be applied to specify that the outer frame of the view control is a rectangle, a rounded rectangle or a circle, and can generate ambient light shadows and point light shadows.

In a second manner, the electronic device 100 generates a first shadow for the specified view control according to the position of the first light source, the intensity of the first light source and the material attribute information of the specified view control, and outputs the first shadow through the display screen. Specifically, the electronic device 100 determines the subject blur radius according to the position of the first light source and the intensity of the first light source; determines the projection blur information according to the position of the first light source and the material attribute information of the specified view control; Blur information, generate the first shadow for the specified view control.

For example, see FIG. 8 . The electronic device 100 acquires the subject image, that is, the image of the specified view control, determines the subject blur radius, such as Gaussian blur 20, according to the position of the first light source and the intensity of the first light source, and uses the subject blur radius to perform subject blur on the specified view control. , to get the effect of blurring the subject. The electronic device 100 determines the projection blur information according to the position of the first light source and the material property information of the specified view control, for example, includes projection color #000000, 13% opacity, projection blur radius 40, Y-axis offset 8, and uses the projection blur information Perform projection blur on the specified view control to obtain the effect of projection blur. The electronic device 100 superimposes the blurred effect of the subject and the effect of projection blur to obtain a superimposed effect, and superimposes the superimposed effect with the subject image, so that the subject image has a shadow effect.

Wherein, the material property information of the specified view control includes one or more of refractive index, reflectance, diffuse reflectance or transparency. Materials can include one or more of background materials, border materials, or backplane materials. Users can define information such as refractive index, reflectivity, diffuse reflectivity or transparency for the view controls in the GUI, or directly set the type of view controls, such as frosted glass, paper, specular, etc. Different material property information of the specified view control will produce shadows of different weights, colors, and light effects of different effects.

The position of the light source and material property information can affect the shadow transparency, shadow blur radius, and shadow offset.

The second method can be applied to the outer frame of the specified view control in any shape, and has a wider scope of application. Combined with the material properties, it is more suitable for practical applications.

The above manners 1 and 2 are used as examples, and other manners may be used to generate the first shadow in practical applications.

Wherein, the first shadow light effect may include a first light effect. The electronic device 100 can generate the first light effect for a specified view control according to the position of the first light source in the following manner, and output the first light effect through the display screen.

Mode A, the electronic device 100 generates a first light effect for the specified view control according to the position of the first light source, the intensity of the first light source and the original color information of the specified view control, and outputs the first light effect through the display screen.

Specifically, using the first light source as a parallel light source, the electronic device 100 obtains the angle information of the light and the color information of the light. The electronic device 100 may obtain the angle information of the light according to the position of the first light source and the depth attribute of the specified view control. Further, the electronic device 100 performs a dot product operation with the original color information of the specified view control according to the color information of the light, the angle information of the light and the intensity of the first light source, thereby changing the intensity information of the original color of the specified view control. The electronic device 100 reproduces and draws the user graphical interface according to the changed intensity information, thereby displaying another light effect.

Mode B, the electronic device 100 determines the radial gradient radius according to the position of the first light source; determines the Gaussian blur radius according to the intensity of the first light source; generates the first light effect for the specified view control according to the radial gradient radius and the Gaussian blur radius , and output the first light effect through the display screen.

Specifically, the electronic device 100 determines the radial gradient radius according to the position of the first light source, and then draws a radial gradient sphere according to the radial gradient radius. The color of the sphere can be a predefined color, such as white light by default. . The electronic device 100 determines the Gaussian blur radius according to the intensity of the first light source, and then performs Gaussian blur on the sphere according to the Gaussian blur radius. On the specified view control, draw a Gaussian blurred sphere to generate the first light effect, as shown in Figure 9.

Step 403: Determine the position of the second light source according to the collected second image of the biological feature.

Step 404 , according to the position of the second light source, generate and output a second shadow light effect for the specified view control.

It should be noted that the execution process of step 403 to step 404 is similar to the execution process of step 401 to step 402 , for details, please refer to the description of step 401 to step 402 . The difference is that the position of the light source in step 403 is different from that in step 401 .

The position of the first light source and the position of the second light source are different positions of the eyes relative to the display screen, that is, the position of the first light source is different from the position of the second light source. In a possible implementation manner, the position of the first light source is the first moment, the position of the eye relative to the display screen; the position of the second light source is the second moment, the position of the eye relative to the display screen, so that the first light source is is different from the position of the second light source.

In the embodiment shown in FIG. 4 , the position of the first light source is different from the position of the second light source, and thus the first shadow light effect is different from the second shadow light effect. It can be seen that the shadow light effect of the same specified view control can change with the change of the light source position, so as to realize the dynamic display of the shadow effect of the specified view control, which is beneficial to build a more realistic user graphical interface.

In an example, as shown in FIG. 10 , when the angle between the display screen and the horizontal plane is within a preset range, the position of the eyes in A in FIG. 10 is different from that in B in FIG. 10 , so that For the same specified view control, the shadow light effect of A in FIG. 10 is different from the shadow light effect of B in FIG. 10 .

In another example, as shown in FIG. 11 , when the angle between the display screen and the horizontal plane is not within the preset range, in A in FIG. 11 , the posture of the electronic device 100 is different from that in B in FIG. 11 . 100, so that for the same specified view control, the shadow light effect of A in FIG. 11 is different from the shadow light effect of B in FIG. 11 . If the position of the eye in A in FIG. 11 is different from that in B in FIG. 11 , the position of the eye is different, and the posture of the electronic device 100 is different, the generated shadow light effects are also different. Even if the position of the eyes in A in Figure 11 is the same as the position of the eyes in B in Figure 11, different shadow light effects can be generated.

Please refer to FIG. 12 , which is a schematic flowchart of another method for displaying a graphical user interface provided by an embodiment of the present application. The process may be but not limited to the following steps:

Step 501: Obtain a first position of the electronic device relative to a preset light source.

It should be noted that, when the position of the light source cannot be determined according to the collected biometric image due to performance considerations or hardware limitations of the electronic device, the method shown in FIG. 12 can be used to realize the dynamic display of the user graphical interface.

In the method shown in FIG. 12 , the pre-light source can be understood as a hypothetical light source, which may not actually exist. The position of the preset light source can be set by the user or defaulted by the system. The specific position of the preset light source is not limited in the embodiments of the present application.

The electronic device 100 may acquire the position of the electronic device 100 relative to the preset light source according to the sensor in the electronic device 100 . The position of the electronic device 100 relative to the preset light source may be understood as the posture of the electronic device 100 relative to the preset light source.

Step 502: Generate and output a first shadow light effect for a specified view control according to the first position and the position of the preset light source.

It should be noted that, for the execution process of step 502, reference may be made to the specific description in step 402, which is not repeated here. The difference is that step 402 is to generate and output a first shadow light effect for the specified view control according to the position of the first light source, while step 502 is to generate and output the first shadow light effect according to the position of the preset light source and the first position of the electronic device relative to the preset light source. , generates and outputs the first shadow light effect for the specified view control.

Step 503: Obtain a second position of the electronic device relative to the preset light source.

Step 504 , according to the second position and the position of the preset light source, generate and output a second shadow light effect for the specified view control.

It should be noted that the execution process of step 503 to step 504 is similar to the execution process of step 401 to step 402 , for details, please refer to the description in step 501 to step 502 . The difference is that the position of the electronic device relative to the preset light source in step 503 and step 501 is different.

In the embodiment shown in FIG. 12 , the first position is different from the second position, and thus the first shadow light effect is different from the second shadow light effect. It can be seen that the shadow light effect of the same specified view control can change with the posture of the electronic device, so as to realize the dynamic display of the shadow effect of the specified view control, which is conducive to building a more realistic user graphical interface.

In an example, as shown in FIG. 13 , in A of FIG. 13 , the position of the electronic device 100 relative to the preset light source is different from that of B and C in FIG. 13 , that is, the positions of the electronic device 100 in A, B, and C are different The poses are different, the angle of the light is different, and the shadow light effects generated for the same specified view control are different.

The embodiment shown in FIG. 12 only uses the sensor inside the electronic device, has the characteristics of lower power consumption, and has more commercial value.

The embodiment shown in FIG. 14 is a schematic diagram of a user graphical interface display device provided by the present application. The apparatus includes a processing unit 1401 and a display unit 1402 .

In one embodiment:

The processing unit 1401 is configured to determine the position of the first light source according to the collected first image of the biological feature; and generate the first shadow light effect for the specified view control according to the position of the first light source;

a display unit 1402, configured to output a first shadow light effect;

The processing unit 1401 is further configured to determine the position of the second light source according to the collected second image of the biological feature; and generate a second shadow light effect for the specified view control according to the position of the second light source;

The display unit 1402 is further configured to output the second shadow light effect;

In an implementation manner, the processing unit 1401 is specifically configured to determine the first image position of the biological feature in the first image according to the collected first image of the biological feature, and estimate the distance of the biological feature relative to the display screen; The first image position and distance determine the position of the first light source.

In an implementation manner, the processing unit 1401 is specifically configured to determine the first viewing angle according to the first image position and distance according to the angle between the display screen and the horizontal direction within a preset range; and determine the first light source according to the first viewing angle s position.

In an implementation manner, the processing unit 1401 is specifically configured to determine the second viewing angle according to the angle between the display screen and the horizontal direction, the position and distance of the first image, if the angle between the display screen and the horizontal direction is not within the preset range; According to the second viewing angle, the position of the first light source is determined.

In an implementation manner, the first shadow light effect includes a first shadow; the processing unit 1401 is specifically configured to generate the specified view control according to the position of the first light source, the intensity of the first light source and the material attribute information of the specified view control and output the first shadow.

In one implementation, the processing unit 1401 is specifically configured to determine the subject blur radius according to the position of the first light source and the intensity of the first light source; and determine the projection blur according to the position of the first light source and the material attribute information of the specified view control information; generate and output the first shadow for the specified view control according to the blur radius of the subject and the shadow blur information.

In one implementation, the material property information of the specified view control includes one or more of refractive index, reflectance, diffuse reflectance, or transparency.

In an implementation manner, the first shadow light effect includes a first light effect; the processing unit 1401 is specifically configured to, according to the position of the first light source, the intensity of the first light source and the original color information of the specified view control, target the specified view control A first light effect is generated and output.

In an implementation manner, the first shadow light effect includes a first light effect; the processing unit 1401 is specifically configured to determine the radial gradient radius according to the position of the first light source; and determine the Gaussian blur radius according to the intensity of the first light source; Generates and outputs the first light effect for the specified view control based on the radial gradient radius and Gaussian blur radius.

In another embodiment:

The processing unit 1401 is used to obtain a first position of the electronic device relative to the preset light source; according to the first position and the position of the preset light source, generate a first shadow light effect for a specified view control;

a display unit 1402, configured to output a first shadow light effect;

The processing unit 1401 is further configured to acquire a second position of the electronic device relative to the preset light source; generate a second shadow light effect for the specified view control according to the second position and the position of the preset light source;

In an implementation manner, the first shadow light effect includes a first shadow; the processing unit 1401 is specifically configured to, according to the first position, the position of the preset light source, the intensity of the first light source, and the material attribute information of the specified view control, for Specifies that the view control generates and outputs the first shadow.

In an implementation manner, the first shadow light effect includes a first light effect; the processing unit 1401 is specifically configured to, according to the first position, the position of the preset light source, the intensity of the first light source and the original color information of the specified view control, Generates and outputs the first light effect for the specified view control.

In an implementation manner, the first shadow light effect includes a first light effect; the processing unit 1401 is specifically configured to determine the radial gradient radius according to the first position and the position of the preset light source; according to the first position and the preset light source Determine the Gaussian blur radius; according to the radial gradient radius and Gaussian blur radius, generate and output the first light effect for the specified view control.

As used in the above embodiments, the term "when" may be interpreted to mean "if" or "after" or "in response to determining..." or "in response to detecting..." depending on the context. Similarly, depending on the context, the phrases "in determining..." or "if detecting (the stated condition or event)" can be interpreted to mean "if determining..." or "in response to determining..." or "on detecting (the stated condition or event)" or "in response to the detection of (the stated condition or event)".

In the above-mentioned embodiments, it may be implemented in whole or in part by software, hardware, firmware or any combination thereof. When implemented in software, it can be implemented in whole or in part 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 the present application are generated. The computer may be a general purpose computer, special purpose computer, computer network, or other programmable device. The computer instructions may be stored in or transmitted from one computer-readable storage medium to another computer-readable storage medium, for example, the computer instructions may be downloaded from a website site, computer, server, or data center Transmission to another website site, computer, server, or data center by wire (eg, coaxial cable, optical fiber, digital subscriber line) or wireless (eg, infrared, wireless, microwave, etc.). The computer-readable storage medium can be any available medium that can be accessed by a computer or a data storage device such as a server, a data center, or the like that includes an integration of one or more available media. The usable media may be magnetic media (eg, floppy disks, hard disks, magnetic tapes), optical media (eg, DVDs), or semiconductor media (eg, solid state drives), and the like.

Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be implemented. The process can be completed by instructing the relevant hardware by a computer program, and the program can be stored in a computer-readable storage medium. When the program is executed , which may include the processes of the foregoing method embodiments. The aforementioned storage medium includes: ROM or random storage memory RAM, magnetic disk or optical disk and other mediums that can store program codes.

Claims

A method for displaying a graphical user interface, characterized in that the method is applied to an electronic device, the electronic device includes a display screen for displaying a graphical user interface, the graphical user interface includes a specified view control with a depth attribute, the The methods described include:

determining the position of the first light source according to the collected first image of the biological feature;

generating and outputting a first shadow light effect for the specified view control according to the position of the first light source;

determining the position of the second light source according to the collected second image of the biological feature;

generating and outputting a second shadow light effect for the specified view control according to the position of the second light source;

Wherein, the position of the first light source and the position of the second light source are the positions of the biological feature relative to the display screen, and the position of the first light source is different from the position of the second light source; the The first shadow light effect is different from the second shadow light effect.
The method according to claim 1, wherein the determining the position of the first light source according to the collected first image of the biological feature comprises:

According to the collected first image of the biological feature, determine the first image position of the biological feature in the first image, and estimate the distance of the biological feature relative to the display screen;

Based on the first image position and the distance, the position of the first light source is determined.
The method according to claim 2, wherein the determining the position of the first light source according to the first image position and the distance comprises:

The angle between the display screen and the horizontal direction is within a preset range, and a first viewing angle is determined according to the first image position and the distance;

According to the first viewing angle, the position of the first light source is determined.
The method according to claim 2, wherein the determining the position of the first light source according to the first image position and the distance comprises:

The angle between the display screen and the horizontal direction is not within the preset range, and the second viewing angle is determined according to the angle between the display screen and the horizontal direction, the position of the first image and the distance;

According to the second viewing angle, the position of the first light source is determined.
The method according to any one of claims 1-4, wherein the first shadow light effect comprises a first shadow;

The generating and outputting the first shadow for the specified view control according to the position of the first light source includes:

The first shadow is generated and output for the specified view control according to the position of the first light source, the intensity of the first light source and the material property information of the specified view control.
The method according to claim 5, characterized in that, according to the position of the first light source, the intensity of the first light source and the material property information of the specified view control, generating and Outputting the first shadow includes:

determining a subject blur radius according to the position of the first light source and the intensity of the first light source;

Determine the projection blur information according to the position of the first light source and the material property information of the specified view control;

The first shadow is generated and output for the specified view control according to the subject blur radius and the projection blur information.
The method according to claim 5 or 6, wherein the material property information of the specified view control comprises one or more of refractive index, reflectance, diffuse reflectance or transparency.
The method according to any one of claims 1-4, wherein the first shadow light effect comprises a first light effect;

The generating and outputting the first light effect for the specified view control according to the position of the first light source includes:

The first light effect is generated and output for the specified view control according to the position of the first light source, the intensity of the first light source and the original color information of the specified view control.
The method according to any one of claims 1-4, wherein the first shadow light effect comprises a first light effect;

The generating and outputting the first light effect for the specified view control according to the position of the first light source includes:

determining a radial gradient radius according to the position of the first light source;

determining a Gaussian blur radius according to the intensity of the first light source;

The first light effect is generated and output for the specified view control according to the radial gradient radius and the Gaussian blur radius.
A method for displaying a graphical user interface, characterized in that the method is applied to an electronic device, the electronic device includes a display screen for displaying a graphical user interface, the graphical user interface includes a specified view control with a depth attribute, the The methods described include:

acquiring a first position of the electronic device relative to a preset light source;

generating and outputting a first shadow light effect for the specified view control according to the first position and the position of the preset light source;

acquiring a second position of the electronic device relative to the preset light source;

generating and outputting a second shadow light effect for the specified view control according to the second position and the position of the preset light source;

Wherein, the first position is different from the second position, and the first shadow light effect is different from the second shadow light effect.
The method of claim 10, wherein the first shadow light effect comprises a first shadow;

The generating and outputting the first shadow for the specified view control according to the first position and the position of the preset light source includes:

The first shadow is generated and output for the specified view control according to the first position, the position of the preset light source, the intensity of the first light source, and the material property information of the specified view control.
The method according to claim 11, wherein the material property information of the specified view control comprises one or more of refractive index, reflectance, diffuse reflectance or transparency.
The method of claim 10, wherein the first shadow light effect comprises a first light effect;

The generating and outputting the first light effect for the specified view control according to the first position and the position of the preset light source includes:

The first light effect is generated and output for the specified view control according to the first position, the position of the preset light source, the intensity of the first light source, and the original color information of the specified view control.
The method of claim 10, wherein the first shadow light effect comprises a first light effect;

The generating and outputting the first light effect for the specified view control according to the first position and the position of the preset light source includes:

determining a radial gradient radius according to the first position and the position of the preset light source;

determining a Gaussian blur radius according to the first position and the intensity of the preset light source;

The first light effect is generated and output for the specified view control according to the radial gradient radius and the Gaussian blur radius.
A user graphical interface display device, comprising a display screen, a memory, one or more processors, a plurality of application programs, and one or more programs; wherein the one or more programs are stored in the memory; which It is characterized in that, when the one or more processors execute the one or more programs, the user graphical interface display device implements the method according to any one of claims 1 to 14.
A computer device, comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, when the processor executes the computer program, the computer device realizes A method as claimed in any one of claims 1 to 14.
A computer program product comprising instructions, characterized in that, when the computer program product is run on an electronic device, the electronic device is caused to perform the method according to any one of claims 1 to 14.
A computer-readable storage medium comprising instructions, characterized in that, when the instructions are executed on an electronic device, the electronic device is caused to perform the method according to any one of claims 1 to 14.