Display method and device of interface element, electronic equipment and readable storage medium

Abstract

The application discloses a display method and device of interface elements, electronic equipment and a readable storage medium, and belongs to the technical field of electronic equipment. The method comprises the following steps: determining a lightness algorithm according to a display mode of the electronic equipment; determining a layer rendering parameter according to the lightness algorithm; the layer rendering parameter comprises target lightness, target hue and target saturation; determining a blurred layer according to the layer rendering parameter; and updating a display interface element by using the blurred layer; wherein, in the case that the display mode is a light color mode, the lightness algorithm is an algorithm of a color dodge mode; and in the case that the display mode is a dark color mode, the lightness algorithm is an algorithm of an overlay mode.

Description

Technical Field

[0001] The present application belongs to the technical field of electronic devices, and specifically relates to a method and device for displaying interface elements, an electronic device, and a readable storage medium. Background Art

[0002] As electronic device interfaces become more diverse, more operating system interfaces are adopting real-time blur technology to optimize the user interface display experience. The advantage of real-time blur is that it can dynamically blur the background to enhance the visibility of foreground content, improving user focus and highlighting the foreground content. This technology is particularly common in operating system interfaces of smartphones and tablets.

[0003] In the related art, when an interface element is displayed on the screen of an electronic device, a real-time blurred visual effect is achieved by superimposing a blurred layer with transparency weight and blur parameters on the background layer of the interface element, wherein the brightness of the blurred layer is set by the device system, the hue of the blurred layer is determined based on the hue of the background layer of the interface element and the Gaussian blur algorithm, and the saturation of the blurred layer is determined based on the saturation of the background layer of the interface element and the Gaussian blur algorithm.

[0004] Although the above-mentioned blurred layer can achieve a certain degree of real-time blurring effect when superimposed on the background layer of the interface element, in light mode, the brightness of the blurred layer is too high, causing the blurred layer to appear pale after being superimposed on the background layer of the interface element, and the blurred effect is not transparent enough; in dark mode, the saturation of the blurred layer is too high, causing the blurred layer to appear gray or dull after being superimposed on the background layer of the interface element, and the blurred effect is also not transparent enough. Summary of the Invention

[0005] The purpose of the embodiments of the present application is to provide a method, device, electronic device and readable storage medium for displaying interface elements, which can improve the transparency of real-time blur effects.

[0006] In a first aspect, an embodiment of the present application provides a method for displaying an interface element, the method comprising:

[0007] Determining a brightness algorithm according to a display mode of the electronic device;

[0008] Determining layer rendering parameters according to the brightness algorithm; the layer rendering parameters include target brightness, target hue and target saturation;

[0009] Determine a blurred layer according to the layer rendering parameters;

[0010] Updating display interface elements using the blurred layer;

[0011] Wherein, when the display mode is a light color mode, the brightness algorithm is an algorithm of a color lightening mode; when the display mode is a dark color mode, the brightness algorithm is an algorithm of an overlay mode.

[0012] In a second aspect, an embodiment of the present application provides a device for displaying interface elements, the device comprising:

[0013] A first determining module, configured to determine a brightness algorithm according to a display mode of the electronic device;

[0014] A second determining module is configured to determine layer rendering parameters according to the brightness algorithm; the layer rendering parameters include target brightness, target hue, and target saturation;

[0015] A third determining module, configured to determine a fuzzy layer according to the layer rendering parameters;

[0016] A first display module, configured to update display interface elements using the blurred layer;

[0017] Wherein, when the display mode is a light color mode, the brightness algorithm is an algorithm of a color lightening mode; when the display mode is a dark color mode, the brightness algorithm is an algorithm of an overlay mode.

[0018] In a third aspect, an embodiment of the present application provides an electronic device comprising a processor and a memory, wherein the memory stores programs or instructions that can be run on the processor, and when the programs or instructions are executed by the processor, the steps of the method for displaying interface elements as described in the first aspect are implemented.

[0019] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, on which a program or instruction is stored. When the program or instruction is executed by a processor, the steps of the method for displaying interface elements as described in the first aspect are implemented.

[0020] In a fifth aspect, an embodiment of the present application provides a chip, which includes a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run programs or instructions to implement the method for displaying interface elements as described in the first aspect.

[0021] In a sixth aspect, an embodiment of the present application provides a computer program product, which is stored in a storage medium and executed by at least one processor to implement the method for displaying interface elements as described in the first aspect.

[0022] In an embodiment of the present application, a brightness algorithm is determined according to the display mode of the electronic device; layer rendering parameters are determined according to the brightness algorithm; the layer rendering parameters include target brightness, target hue and target saturation; a blurred layer is determined according to the layer rendering parameters; and the display interface elements are updated using the blurred layer; wherein, when the display mode is a light color mode, the brightness algorithm is a color fading mode algorithm; when the display mode is a dark color mode, the brightness algorithm is an overlay mode algorithm.

[0023] It can be seen that in the embodiment of the present application, since the algorithm using the color dodge mode in the light mode can increase the brightness and contrast of the blurred layer of the interface element, it can avoid the light blurred layer appearing pale after being superimposed on the background layer of the interface element, and the algorithm using the overlay mode in the dark mode can optimize the saturation of the blurred layer of the interface element, and avoid the dark blurred layer appearing gray or dull after being superimposed on the background layer of the interface element. Therefore, it can better cope with complex and changeable background layers, ensure real-time blurring and a more transparent display effect under different color and depth conditions, and improve the visibility of the interface elements and the natural blurring effect of the background layer of the interface elements. BRIEF DESCRIPTION OF THE DRAWINGS

[0024] Figure 1 This is an example diagram of real-time blur processing of interface elements provided by some embodiments of the present application;

[0025] Figure 2 This is one of the flow charts of a method for displaying interface elements provided by some embodiments of the present application;

[0026] Figure 3 This is one of the flowcharts of an implementation of step 202 provided in some embodiments of the present application;

[0027] Figure 4 This is a second flowchart of an implementation of step 202 provided in some embodiments of the present application;

[0028] Figure 5 is an example diagram of the HSB color model provided by some embodiments of the present application;

[0029] Figure 6 This is one of the example diagrams of the visual effect of the blurred layer provided by some embodiments of the present application;

[0030] Figure 7 is a flowchart of an implementation of step 202 provided in some embodiments of the present application;

[0031] Figure 8 This is the second example diagram of the visual effect of a blurred layer provided by some embodiments of the present application;

[0032] Figure 9 This is a second flowchart of a method for displaying interface elements provided by some embodiments of the present application;

[0033] Figure 10 This is an example diagram of the visual effects of turning on and off the Without Fresnel rendering mode provided by some embodiments of the present application;

[0034] Figure 11 This is a structural block diagram of a display device for an interface element provided by some embodiments of the present application;

[0035] Figure 12 is a schematic structural diagram of an electronic device provided by some embodiments of the present application;

[0036] Figure 13 It is a hardware structure diagram of an electronic device that implements various embodiments of the present application. DETAILED DESCRIPTION

[0037] The following will be combined with the accompanying drawings in the embodiments of the present application to clearly describe the technical solutions in the embodiments of the present application. Obviously, the embodiments described are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field are within the scope of protection of this application.

[0038] The terms "first," "second," and the like in the specification and claims of this application are used to distinguish similar objects, and are not used to describe a specific order or precedence. It should be understood that the terms used in this manner are interchangeable where appropriate, so that the embodiments of this application can be implemented in an order other than that illustrated or described herein, and that the objects distinguished by "first," "second," and the like are generally of the same type, and do not limit the number of objects; for example, the first object can be one or more. In addition, the term "and / or" in the specification and claims represents at least one of the connected objects, and the character " / " generally indicates that the objects associated with each other are in an "or" relationship.

[0039] To facilitate understanding, some relevant concepts and application scenarios involved in the embodiments of this application are first introduced below.

[0040] 1. Related Concepts

[0041] The HSB color mode is a color description mode based on human perception, in which:

[0042] H (Hue) stands for hue, or the type of color, such as red, green, or blue. Hue is the primary characteristic of color and the most accurate standard for distinguishing different colors. Hue is measured by position on a standard color wheel ranging from 0° to 360°. For example, 0° or 360° represents red, around 120° represents green, and around 240° represents blue.

[0043] Saturation (S) stands for saturation, which refers to the purity of a color and indicates the amount of gray in the color. Higher saturation results in a more vivid and pure color; lower saturation results in a duller, grayer color. Saturation values ​​typically range from 0% to 100%, with 0% representing a completely gray (no color) and 100% representing a fully saturated color.

[0044] B (Brightness) stands for brightness, also known as lightness, which measures the brightness of a color. Higher brightness indicates a brighter color, closer to white; lower brightness indicates a darker color, closer to black. Its value range is also 0%-100%, with 0% being black and 100% being white. This color model is widely used in fields such as image editing and software design because it best aligns with how humans intuitively perceive color.

[0045] Real-time blur technology is used in digital image processing, graphic design, user interface design, and video processing. It can be used to create visual hierarchy in software system spatial design. For example, adding a real-time blur effect behind a pop-up menu allows users to see the outline of the content behind the menu while highlighting the menu's content, creating a modern and aesthetically pleasing visual effect.

[0046] Color Dodge mode is a blending mode used in image editing and compositing. It is mainly used to change the blending effect between two layers or image elements to create special visual effects. In Color Dodge mode, the base color (the color of the background layer) is brightened according to the blend color (the color of the foreground layer). Specifically, this mode looks at the color information in each channel and brightens the base color by reducing the contrast to reflect the blend color. If the blend color is white, the base color will be faded to the extreme and become white; if the blend color is black, the base color will not change. For example, when a semi-transparent color layer with Color Dodge mode is superimposed on a grayscale image, the bright areas in the grayscale image will be further brightened, and the colors will become brighter and more vivid, while the brightening effect of the dark areas will be relatively weak.

[0047] Image contrast refers to the degree of difference between light and dark areas in an image. This difference can be reflected in brightness or color. By adjusting the contrast, the visual effect and emotional expression of the image can be changed.

[0048] Overlay mode is a blending mode used in image editing and compositing. It combines the features of Multiply and Screen modes, changing the visual effect of an image by blending the pixels of one layer with those of another. In Overlay mode, the contrast of the image increases or decreases, depending on the brightness of the base color. When the base color is lighter, the blended color is covered; when the base color is darker, the blended color becomes darker. This mode is often used to enhance the contrast and details of an image without causing color level overflow, thereby preserving the details of the image. In addition, by adjusting the transparency and intensity of the blended color, Overlay mode can achieve local adjustments to the image, making certain parts of the image more prominent or softer.

[0049] Soft Light mode is an image blending mode that determines how to affect the base color (the color of the background layer) based on the blend color (the color of the foreground layer). Compared with other blending modes, the effect produced by Soft Light mode is softer and more natural.

[0050] Hard Light mode is a blending mode in image editing and synthesis. It is similar to Soft Light mode, but the effect it produces is stronger and more vivid.

[0051] Without Fresnel rendering is a setting or description in the rendering field. The Fresnel effect is a common phenomenon in optical and computer graphics rendering, which describes the characteristics of light when it reflects and refracts on different surfaces. When Without Fresnel rendering is enabled, the rendering process does not consider the actual effect, and instead uses limited or preset conditions to simplify the calculation and rendering of refracted and reflected light.

[0052] Filters, often considered a special type of layer in Photoshop, can be applied to layers, using the layer's blending mode to achieve different visual effects. For example, filters can be mixed like paint, creating a third color when overlapping layers. This blending mode can be achieved by changing the layer's blending mode.

[0053] Dark mode and light mode are two different display modes, each with its own advantages and disadvantages in terms of visual effects, power saving effects, and applicable scenarios.

[0054] Dark mode sets the device interface background to a dark color (usually black or dark gray), while text, icons, controls, and other interface elements use light colors (such as white or light gray). This mode has the following characteristics: 1) Visual experience: Dark mode generally gives people a cooler, more high-end, and calmer feeling. 2) Reduce blue light: Dark mode can reduce the blue light emitted by the screen, helping to relieve eye fatigue, especially when using electronic devices at night. 3) Power saving: For electronic devices with OLED or AMOLED screens, dark mode can significantly reduce screen power consumption, thereby extending battery life.

[0055] Light mode sets the device interface background to a light color (usually white or light gray), while text, icons, controls, and other interface elements use dark colors (such as black or dark gray). This mode has the following characteristics: 1) Visual experience: Light mode is closer to the traditional paper reading experience, appearing brighter, fresher, and simpler. 2) Conformity with reading habits: Light mode is more in line with the habit of most users to obtain information from traditional media such as paper books and magazines, making reading more comfortable and natural. 3) Color expression: Light backgrounds can better present the colors and details of images, videos, and other content.

[0056] 2. Application Scenarios

[0057] With the diversification of electronic device interfaces, more and more operating system interfaces have begun to adopt real-time blur technology to optimize the user interface display experience. Figure 1 As shown, an interface element 12 is displayed on a screen 11 of an electronic device 10, wherein a foreground layer 13 of the interface element 12 is displayed on top of a background layer 14 of the interface element 12. Real-time blurring technology generates a blurred layer 15 and overlays the blurred layer 15 on the background layer 14 for display, thereby achieving the visual effect of blurring the background layer 14 of the interface element 12 in real time. The advantage of real-time blurring is that it can make the interface element more visible by dynamically rendering the blurred background, thereby enhancing the user's focus and highlighting the interface element. This technology is particularly common in the operating system interfaces of smartphones and tablet devices.

[0058] The earliest real-time blurring techniques achieved a real-time blurring visual effect by overlaying a color filter with transparency weights on the background layer of an interface element. For example, when using the mainstream HSB color model for color adjustment, assuming the background layer is pure red (H=0, S=100, B=100), and a gray transparent layer with a transparency weight of 0.6 and a lightness of 60 is overlaid, the transparency weight will affect the final color blending result. However, real-time blurring techniques based solely on transparency weights have several problems: 1) Luminance convergence: Because gray has a lower lightness (B=60), overlaying the background layer will reduce the brightness of the background layer, bringing the final lightness closer to the brightness level of gray. As the transparency weight changes, the lightness gradually approaches gray. 2) Saturation convergence: Because gray itself has a lower saturation (S is close to 0), the saturation of the background layer will be suppressed after overlaying, gradually approaching a desaturated effect. In other words, the overall color will appear desaturated, reducing contrast. For example, with an alpha weight of 0.6, both the lightness and saturation of the resulting color will tend toward gray, which will cause the color to fluctuate around B=70, producing a softer, low-contrast tone.

[0059] In related art, to enhance visual effects, a blur effect is applied after applying a transparency weight to the background, blurring it. Specifically, a blur layer with transparency weights and blur parameters is overlaid on the background layer to achieve a real-time blur effect. The brightness of the blur layer is set by the device system, the hue is determined based on the hue of the interface element's background layer and a Gaussian blur algorithm, and the saturation is determined based on the saturation of the interface element's background layer and a Gaussian blur algorithm. However, real-time blurring techniques using only transparency weights and blur values ​​also have some issues: 1) Brightness issues with light-colored blurred layers: When a blurred background is overlaid on a light-colored transparent layer, the resulting light-colored blurred layer has too high a brightness, causing the colors to appear too pale or bright white. 2) Saturation issues with dark-colored blurred layers: When a blurred background is overlaid on a dark-colored transparent layer, the resulting dark-colored blurred layer has too low a saturation, resulting in a grayish appearance and affecting the overall color purity.

[0060] It can be seen that in the related art, although the above-mentioned blurred layer can be superimposed on the background layer to achieve a certain degree of real-time blurring effect, in light mode, due to the high brightness of the light blurred layer, the light blurred layer will appear pale after being superimposed on the background layer of the interface element, and the blurring effect is not transparent enough; and in dark mode, due to the high saturation of the dark blurred layer, the dark blurred layer will appear gray or dull after being superimposed on the background layer of the interface element, and the blurring effect is not transparent enough.

[0061] In order to solve the above technical problems, the embodiments of the present application provide a method, device, electronic device and readable storage medium for displaying interface elements.

[0062] The following describes in detail a method for displaying interface elements provided by an embodiment of the present application with reference to the accompanying drawings.

[0063] It should be noted that the method for displaying interface elements provided in the embodiments of the present application is applicable to electronic devices. In actual applications, the electronic devices include but are not limited to: mobile terminals such as smart phones and tablet computers, and computer devices such as desktop computers and servers. The embodiments of the present application do not limit this.

[0064] Figure 2 This is one of the flow charts of a method for displaying interface elements provided by some embodiments of the present application, such as Figure 2 As shown, the method may include the following steps: step 201, step 202, step 203 and step 204;

[0065] In step 201, a brightness algorithm is determined according to the display mode of the electronic device; wherein, when the display mode is a light mode, the brightness algorithm is an algorithm of a color reduction mode; when the display mode is a dark mode, the brightness algorithm is an algorithm of an overlay mode.

[0066] In an embodiment of the present application, a brightness algorithm is used in real-time blurring technology to calculate the target brightness of a blurred layer of an interface element currently displayed on the screen of an electronic device, wherein the blurred layer of the interface element is used to be superimposed on the background layer of the interface element to achieve a visual effect of blurring the background layer in real time, making the interface element more visible and focused.

[0067] In the embodiments of this application, interface elements refer to a series of elements contained in a software or system interface that can meet the interaction requirements of the user. These elements are designed to meet the interaction needs of the user. Interface elements generally include the following types: text, navigation bars, menus, buttons, forms, images, icons, scroll bars, pagers, pop-up windows, etc.

[0068] Taking into account that different display modes have different display effects and display requirements for real-time blur, in an embodiment of the present application, the brightness algorithm can be determined according to the display mode of the electronic device.

[0069] Taking into account that the color dodge mode mainly brightens the background layer by reducing the color contrast of the foreground layer, this mode is often used in situations where it is necessary to emphasize the bright details of the foreground layer, especially when processing images with highlights. In the embodiment of the present application, in order to solve the problem that the blurred layer is prone to excessive brightness in the light mode, when the display mode of the electronic device is light mode, the algorithm of the color dodge mode can be used to calculate the brightness of the blurred layer. In this way, after the blurred layer is superimposed on the background layer, the brightness of the background layer can be increased, the brightness peak contrast is weakened, and the clarity of the bright area on the foreground layer is maintained, thereby enhancing the visual contrast between the foreground and the background, and making the visual effect of the foreground interface elements more transparent.

[0070] Taking into account that the overlay mode mainly analyzes the values ​​of each channel of the base color and performs positive overlay or color filter mixing on the color, the result color retains the light and dark contrast of the base color, and the result color is dominated by the base color. In the embodiment of the present application, in order to solve the problem of high saturation of the blurred layer in dark mode, when the display mode of the electronic device is dark mode, the overlay mode algorithm can be used to dynamically mix the foreground layer and the background layer under different brightness conditions, calculate the brightness of the blurred layer, and adjust the saturation of the blurred layer according to the calculated brightness. In this way, after the blurred layer is superimposed on the background layer, it can not only enhance the detail performance of the strong dark part of the background layer, but also approach the saturation of the background layer, thereby improving the color mixing effect and ensuring that the overall visual effect is smoother and more natural.

[0071] In step 202, layer rendering parameters are determined according to a brightness algorithm; wherein the layer rendering parameters include target brightness, target hue, and target saturation.

[0072] In the embodiment of the present application, the target brightness refers to the brightness of the blurred layer of the interface element currently displayed on the screen of the electronic device in the real-time blur technology, the target hue refers to the hue of the blurred layer of the interface element, and the target saturation refers to the saturation of the blurred layer of the interface element.

[0073] In step 203, a fuzzy layer is determined according to the layer rendering parameters.

[0074] In an embodiment of the present application, a blurred layer is drawn according to the target brightness, target hue and target saturation, wherein the brightness of the blurred layer drawn is the target brightness, the hue of the blurred layer drawn is the target hue, and the saturation of the blurred layer drawn is the target saturation.

[0075] In step 204 , the display interface elements are updated using the blurred layer.

[0076] In the embodiment of the present application, after the blur layer is drawn, the blur layer is superimposed on the background layer of the interface element to be displayed, so as to realize the visual effect of real-time blur background layer, and make the interface element more visible and focused.

[0077] As can be seen from the above embodiment, in the embodiment, the lightness algorithm is determined according to the display mode of the electronic device; the layer rendering parameter is determined according to the lightness algorithm; the layer rendering parameter includes target lightness, target hue and target saturation; the blur layer is determined according to the layer rendering parameter; the display interface element is updated by using the blur layer; wherein, in the case that the display mode is the light color mode, the lightness algorithm is the algorithm of the color dodge mode; in the case that the display mode is the dark color mode, the lightness algorithm is the algorithm of the overlay mode.

[0078] As can be seen, in the embodiment of the present application, since the algorithm of the color dodge mode is used in the light color mode to increase the lightness and contrast of the blur layer of the interface element, and avoid the pale blur layer after being superimposed on the background layer of the interface element, and the algorithm of the overlay mode is used in the dark color mode to optimize the saturation of the blur layer of the interface element, and avoid the phenomenon of gray or dull color of the dark blur layer after being superimposed on the background layer of the interface element, the complex and changeable background layer can be better coped with, the real-time blur display effect of better transparency can be realized under different color and lightness conditions, and the visibility of the interface element and the natural virtualization effect of the background layer of the interface element are improved.

[0079] In some other embodiments provided by the present application, in the case that the display mode of the electronic device is the light color mode, the lightness algorithm is the algorithm of the color dodge mode; in the case that the display mode of the electronic device is the dark color mode, the lightness algorithm is the algorithm of the overlay mode. Figure 2 Based on the embodiment shown in the above, as shown in the above, the step 202 can include the following steps: step 301, step 302 and step 303. Figure 3

[0080] In step 301, the target lightness of the blur layer is determined according to the lightness of the background layer of the interface element, the lightness of the foreground layer of the interface element and the lightness algorithm.

[0081] In the embodiment of the present application, when real-time blur processing is needed, the foreground layer of the interface element and the background layer of the interface element can be acquired from an image framework or captured, for example, the foreground layer and the background layer of the interface element displayed on the screen of the electronic device are acquired in one-to-one real time, wherein the image framework is a display framework of the UI interface running in the system, and the capture operation ensures that the complete image information on the foreground layer and the background layer is captured, and provides basic image data for subsequent blur processing.

[0082] ​The foreground and background layers from the screenshot are then processed and sampled according to a pre-set sampling rule, which can include forming a grid at specific dp intervals horizontally and vertically. Pixel color information (such as RGB or HSB values) and image shape information are extracted from the grid points. This sampled data is used in subsequent blur calculations and color overlay processing.

[0083] In an embodiment of the present application, when calculating the brightness, hue and saturation of a blurred layer, they are all calculated in units of pixels. For example, calculating the brightness, hue and saturation of a blurred layer refers to calculating the brightness, hue and saturation of each pixel in the blurred layer, respectively.

[0084] In an embodiment of the present application, when calculating the target brightness of the blurred layer, if a brightness threshold is involved, different display modes generally correspond to different brightness thresholds, wherein the light mode corresponds to a first brightness threshold and the dark mode corresponds to a second brightness threshold. The first brightness threshold is generally greater than the second brightness threshold. For example, the first brightness threshold is 100 and the second brightness threshold is 50.

[0085] In step 302, the initial hue of the blurred layer is corrected according to the target brightness of the blurred layer to obtain the target hue of the blurred layer; wherein the initial hue of the blurred layer is determined based on the hue of the background layer and the Gaussian blur algorithm.

[0086] In the embodiment of the present application, the calculation method of the initial hue of the blurred layer follows the traditional Gaussian blur algorithm. The traditional Gaussian blur process usually involves weighted averaging of multiple sample points in the pixel neighborhood of the background layer. The weights are derived from a function specially designed or empirically adjusted based on the Gaussian kernel. Let these weights be {w i}, satisfying Σ i w i = 1, where 1 ≤ i ≤ N, where N is the number of sample points in the pixel neighborhood. Furthermore, hue is a circular value (typically expressed in the range of 0° to 360° or 0 to 1), and linear averaging can easily cause problems at circular boundaries (for example, the average of 359° and 1° should not be 180° but closer to 0°). To correctly synthesize hue, the original algorithm first converts the hue value into a vector, averages it, and then converts it back to hue.

[0087] Based on the above considerations, the calculation process of the initial hue of the blurred layer includes the following steps: The hue is in the range of 0°-360°. If the standard of normalized hue of 0-1 is used, it needs to be converted to angle or calculated in radians first:

[0088] 1) Change the hue H of each pixel of the background layer i Convert to radians h i :

[0089] If H i In the range of 0° to 360°, use formula (1) to calculate h i If H i Normalized to [0,1], use formula (2) to calculate h i .

[0090]

[0091] h i =H i ×2π (2)

[0092] 2) Each h i Mapped to the corresponding point (x i ,y i ):

[0093] Calculate x using formula (3) i ; Use formula (4) to calculate y i .

[0094] x i =cos(h i ) (3)

[0095] y i =sin(h i ) (4)

[0096] 3) For (x i ,y i ) to perform weighted average:

[0097] Calculate x using formula (5) i The weighted average value X of ; y is calculated using formula (6) i The weighted average Y of .

[0098] X=Σ i (w i ·x i ) (5)

[0099] Y=Σ i (w i ·y i ) (6)

[0100] 4) Calculate the synthesized angle h final :

[0101] Calculate h using formula (7) final .

[0102] h final =arctan2(Y, X) (7)

[0103] The arctan2() function returns an angle value in the range of (-π,π). To convert it back to the range of 0° to 360°, you can perform the following transformation: final <0, then use formula (8) to calculate h final .

[0104] h final =h final +2π (8)

[0105] 5) h final Convert back to hue H final :

[0106] If h final If expressed in degrees, use formula (9) to calculate H final ; If h final Using 0 to 1 normalization, use formula (10) to calculate H final Among them, H final The initial hue of the blurred layer.

[0107]

[0108]

[0109] In an embodiment of the present application, the initial hue of the blurred layer can be corrected according to the target brightness of the blurred layer to obtain the target hue of the blurred layer, so as to achieve appropriate adjustment of the color according to changes in different brightness conditions, thereby ensuring the natural and consistent color performance in light mode and preventing color distortion in dark mode.

[0110] In step 303, the initial saturation of the blurred layer is corrected according to the target brightness of the blurred layer to obtain the target saturation of the blurred layer; wherein the initial saturation of the blurred layer is determined based on the saturation of the background layer and the Gaussian blur algorithm.

[0111] In the embodiment of the present application, the calculation method of the initial saturation of the blurred layer also follows the traditional Gaussian blur algorithm. The Gaussian blur process usually involves weighted averaging of multiple sample points in the pixel neighborhood of the background layer. The weights are derived from a function specially designed or empirically adjusted based on the Gaussian kernel. Let these weights be {w i}, satisfying ∑ i w i =1, where 1≤i≤N, and N is the number of sample points in the pixel neighborhood.

[0112] The initial saturation of the blurred layer is calculated using the following steps:

[0113] 1) Saturation is a scalar (range 0 to 1), and the saturation S of each pixel in the background layer isi Perform weighted averaging:

[0114] The weighted average value S is calculated using formula (11) final .

[0115]

[0116] 2) Under normalized weight conditions (Σ i w i =1), it can be simplified to:

[0117] S final =Σ i (w i ·S i ), where S final The initial saturation of the blurred layer.

[0118] In the embodiment of the present application, the initial saturation of the blurred layer can be corrected according to the target brightness of the blurred layer to obtain the target saturation of the blurred layer, so as to achieve, for light color mode, lowering the saturation under high brightness conditions to prevent color distortion caused by oversaturation; increasing the saturation under low brightness conditions to maintain the richness of color and visual comfort, ensuring that the color performance of the image is always natural and harmonious under any lighting conditions, and enhancing the overall sense of transparency. For dark color mode, increasing the saturation under low brightness conditions to enhance the color performance under low brightness; reducing the saturation under high brightness conditions to prevent the color from being oversaturated and dazzling, thereby avoiding visual fatigue, and can effectively prevent color distortion caused by brightness changes, ensuring the accuracy of color display and visual comfort.

[0119] It can be seen that in the embodiment of the present application, considering that the brightness of the layer mainly affects the brightness of the image, by adjusting the brightness of the layer, the brightness and darkness of the image can be changed, thereby affecting the overall visual effect. First, for different display modes, according to the brightness of the background layer of the interface element, the brightness of the foreground layer of the interface element and the brightness algorithm, the target brightness of the blurred layer in the display mode is determined, and then the initial hue and initial saturation of the blurred layer are corrected based on the target brightness of the blurred layer, so that the layer rendering parameters of the blurred layer with a more transparent overall visual effect can be obtained.

[0120] In other embodiments provided in this application, Figure 3 On the basis of the embodiment shown, when the display mode of the electronic device is a light color mode, the brightness algorithm is an algorithm of a color fading mode, such as Figure 4 As shown, the above step 202 may include the following steps: step 401, step 402 and step 403;

[0121] In step 401, the initial brightness of the blur layer is determined according to the brightness of the background layer of the interface element, the brightness of the foreground layer of the interface element, and the algorithm of the color fade mode; in the case that the initial brightness is greater than or equal to the first brightness threshold, the first brightness threshold is determined as the target brightness of the blur layer; in the case that the initial brightness is less than the first brightness threshold, the initial brightness is determined as the target brightness of the blur layer.

[0122] Exemplarily, the first brightness threshold is 100, and taking the brightness calculation process of a single pixel point as an example, for a pixel point, the brightness of the pixel point in the background layer is B1, the brightness of the pixel point in the foreground layer is B2, and first, the initial brightness B3 of the pixel point in the blur layer is calculated according to formula (12).

[0123]

[0124] After the initial brightness B3 is calculated, the size relationship between B3 and the first brightness threshold is compared, and according to the size relationship, the target brightness B3' of the pixel point is determined, specifically, if B3>100, then B3'=100; otherwise, B3'=B3.

[0125] In the embodiment of the application, the initial brightness calculation and adjustment mechanism of the blur layer is adopted, the highest brightness is limited to the first brightness threshold when the brightness is high to avoid the dazzling effect; the brightness is appropriately enhanced when the brightness is low to make the details of the dark part more obvious, the cases of excessively high or low brightness are prevented, the loss and distortion of the light part and dark part information are avoided, the overall brightness range of the image is optimized, and the sense of transparency and level of the visual effect is ensured.

[0126] In step 402, the hue offset is determined according to the target brightness of the blur layer, the first brightness threshold, the first control constant, and the offset constant; the first control constant is used to control the change amplitude of the hue, and the hue offset is negatively correlated with the target brightness; and the target hue of the blur layer is determined according to the initial hue of the blur layer and the hue offset.

[0127] It is considered that the hue of the real-time blur layer in the light color mode is usually not directly affected by the brightness, and the hue usually remains consistent with the original image without changing the hue. However, in specific cases, for example, the brightness is very high, which affects the contrast, such as the hue of the blue background and the blue control being the same, the hue contrast between the white background and the yellow control being weak, and the like, which affects the recognition degree. In the embodiment of the application, in order to ensure the consistency of the visual effect and maintain the recognition degree and the contrast, the target hue of the blur layer can be slightly offset on the basis of the initial hue of the blur layer.

[0128] For example, the target brightness of the blurred layer is recorded as B3′, the first brightness threshold is 100, the initial hue of the blurred layer is recorded as H, and the first control constant is recorded as k H , the offset constant is recorded as c, and the hue offset ΔH is calculated using formula (13). The target hue H′ of the blurred layer is calculated using formula (14).

[0129]

[0130] H′=H+ΔH (14)

[0131] Among them, such as Figure 5 As shown, the HSB color model is a color wheel or color column. The hue itself can be regarded as an angle on the color wheel (0 to 360 degrees or mapped into a circle between 0 and 1). γ is an angle parameter related to the hue and is used to control the periodic or regular changes of ΔH.

[0132] In step 403, a saturation adjustment factor is determined based on the target brightness of the blurred layer, a first brightness threshold, and a second control constant; wherein the second control constant is used to control the amplitude of the saturation change, and the saturation adjustment factor is negatively correlated with the target brightness; and the target saturation of the blurred layer is determined based on the initial saturation of the blurred layer and the saturation adjustment factor.

[0133] In the embodiments of the present application, saturation adjustment is related to changes in brightness, especially when color overlay is introduced. Based on changes in brightness, saturation is adjusted as follows: when brightness increases (brighter), saturation is generally reduced to avoid oversaturation and color distortion; when brightness decreases (darker), saturation can be moderately increased to maintain color richness.

[0134] For example, the target brightness of the blurred layer is recorded as B3′, the first brightness threshold is 100, the initial saturation of the blurred layer is recorded as S, and the second control constant is recorded as k s , using formula (15), calculate the saturation adjustment factor R S (B3′), where ks is usually between 0.5 and 1.0, and R S (B3′) is dynamically adjusted as the brightness changes. The target saturation S′ of the blurred layer is calculated using formula (16).

[0135]

[0136] S′=S×R S (B3′) (16)

[0137] For example, Figure 6As shown, in the light color mode, the real-time blurred visual effect of the blurred layer 61 generated by the related technology is superimposed on the background layer 60, and the real-time blurred visual effect of the blurred layer 62 generated by the embodiment of the present application is superimposed on the background layer 60. By comparison, it can be found that the real-time blurred visual effect of the blurred layer 62 generated by the embodiment of the present application is more transparent.

[0138] It can be seen that in the embodiment of the present application, when the display mode of the electronic device is the light color mode, the initial brightness of the blurred layer is calculated by the algorithm of the color dodge mode, and the initial brightness of the blurred layer is corrected according to the first brightness threshold to obtain the target brightness of the blurred layer, which can avoid the situation where the brightness is too high or too low and the loss of bright and dark information, optimize the overall brightness range of the image, and ensure the transparency and layering of the visual effect. According to the brightness of the blurred layer, the hue of the blurred layer is appropriately adjusted to ensure the naturalness and consistency of the color expression. According to the brightness of the blurred layer, the saturation of the blurred layer is appropriately adjusted to prevent color distortion caused by oversaturation, and maintain the richness of the color and visual comfort, ensuring that the color expression of the image is always natural and harmonious under any lighting conditions, and enhancing the overall transparent texture, thereby improving the visual experience and aesthetics of the user interface.

[0139] In other embodiments provided in this application, Figure 3 On the basis of the embodiment shown, when the display mode of the electronic device is dark mode, the brightness algorithm is an algorithm of superposition mode, such as Figure 7 As shown, the above step 202 may include the following steps: step 701, step 702 and step 703;

[0140] In step 701, the initial brightness of the blurred layer is determined based on the brightness of the background layer of the interface element, the brightness of the foreground layer of the interface element, and the multiply algorithm of the overlay mode; when the initial brightness is less than or equal to the second brightness threshold, the target brightness of the blurred layer is determined based on the initial brightness, the brightness of the background layer, and the soft light algorithm of the overlay mode; when the initial brightness is greater than the second brightness threshold, the target brightness of the blurred layer is determined based on the initial brightness, the brightness of the background layer, the second brightness threshold, and the strong light algorithm of the overlay mode.

[0141] In an embodiment of the present application, when performing real-time blur processing, the algorithm of the overlay mode uses two lighting effect modes, Soft Light or Hard Light, to process the sampled pixel information. By combining these two lighting effect modes, low-brightness and high-brightness areas can be processed more carefully, respectively, thereby avoiding the influence of information peak by blindly suppressing dark colors when processing dark colors, and optimizing the final visual effect. Among them, the algorithm of the Soft Light mode is used to simulate soft lighting, improve the delicacy of the image and increase the brightness while maintaining a natural transition. Its effect is relatively soft, the brightness of the bright part is increased, and the brightness of the dark part is slightly reduced. The algorithm of the Hard Light mode is used to simulate strong lighting, bringing stronger contrast changes. It will decide whether to darken (Multiply) or brighten (Screen) the foreground according to the background brightness, making the bright part brighter and the dark part darker.

[0142] For example, the second brightness threshold is 50. Taking the brightness calculation process of a single pixel as an example, for a pixel, the brightness of the pixel in the background layer is B1, and the brightness of the pixel in the foreground layer is B2. When B2 ≤ 50, formula (17) is used to calculate the initial brightness B3 of the pixel in the blurred layer. This means that the foreground brightness is 50 or lower. At this time, it is necessary to increase the brightness of the mixed foreground and background to make the details of the dark part more obvious. The increase ratio is dynamic and is adjusted based on the background brightness B1.

[0143]

[0144] When B2 > 50, the initial brightness B3 of the pixel in the blurred layer is calculated using formula (18). This indicates that the foreground brightness exceeds 50. This is used to reduce the brightness of the blended pixel to prevent the bright part from being too visually abrupt. This reduction is also dynamically adjusted based on the background brightness B1.

[0145]

[0146] After calculating the initial brightness B3, the algorithm of Soft Light mode or Hard Light mode is dynamically selected according to the value of B3 to determine the target brightness B3′ of the pixel. Specifically, when B3≤50, the algorithm of Soft Light mode is used, that is, formula (19) is used to calculate the target brightness B3′. This formula can be used in low-light conditions to gently increase the brightness and the visibility of details without being too glaring.

[0147]

[0148] When B3> 50, the algorithm of the Hard Light mode is used, i.e., the formula (20) is used to calculate the target brightness B3', wherein the formula is used in the high brightness case and can improve the contrast so that the bright area is more prominent, thereby enhancing the visual level.

[0149]

[0150] In the embodiments of the present application, when the display mode of the electronic device is the dark mode, the algorithm of the Soft Light mode is used to realize soft brightness improvement in the low brightness area, increase the delicacy and level of the image, and avoid too dazzling or distortion of the visual effect, so that the image appears more soft in the low brightness case, and the visual comfort and detail performance are enhanced. The algorithm of the Hard Light mode is used to enhance the contrast in the high brightness area, so that the bright part is more prominent and the dark part is more deep, thereby providing more vivid color and depth in the vision, the foreground layer can be dynamically selected to be darkened or brightened, and the best visual effect of the interface under different illumination conditions can be ensured.

[0151] In step 702, a hue offset is determined according to the target brightness of the blur layer, the brightness of the foreground layer of the interface element, and a third control constant, wherein the third control constant is used to control the variation range of the hue, the hue offset is positively correlated with the target brightness, and the target hue of the blur layer is determined according to the initial hue of the blur layer and the hue offset.

[0152] It is considered that the hue of the real-time blur layer in the dark mode is usually not directly affected by the brightness, and the hue usually remains consistent with the original image without changing the hue. However, in specific cases, for example, the brightness is very low, the contrast is affected, and the hue of the black background and the black or gray control is the same, which affects the recognition. In the embodiments of the present application, in order to ensure that the visual effect does not appear discontinuous, the initial hue of the blur layer can be slightly offset to obtain the target hue of the blur layer.

[0153] For example, the target brightness of the blur layer is denoted as B3', the brightness of the foreground layer is denoted as B2, the third control constant is denoted as k H , and the initial hue of the blur layer is denoted as H. The hue offset ΔH is calculated by using formula (21). The target hue H' of the blur layer is calculated by using formula (22).

[0154] ΔH=k H ×(B3′-B2) (21)

[0155] H′=H+ΔH (22)

[0156] wherein k HIt is an adjustment factor, usually a very small number (such as 0.1 or less) to prevent drastic changes in hue.

[0157] In step 703, a saturation adjustment factor is determined based on the target brightness of the blurred layer, the second brightness threshold and the fourth control constant; wherein the fourth control constant is used to control the amplitude of the saturation change, and the saturation adjustment factor is negatively correlated with the target brightness; the target saturation of the blurred layer is determined based on the initial saturation of the blurred layer and the saturation adjustment factor.

[0158] In the embodiment of the present application, the saturation is adjusted as follows based on changes in brightness: when the Soft Light mode algorithm is used, if the target brightness of the blurred layer is equal to the second brightness threshold, the saturation is not adjusted; if the target brightness of the blurred layer is less than the second brightness threshold (i.e., the brightness is low), the saturation is increased to enhance the color performance under low brightness conditions. When the Hard Light mode algorithm is used, if the target brightness of the blurred layer is equal to the second brightness threshold, the saturation is not adjusted; if the target brightness of the blurred layer is greater than the second brightness threshold (i.e., the brightness is high), the saturation is reduced to prevent the color from being oversaturated or glaring.

[0159] For example, the target brightness of the blurred layer is recorded as B3′, the second brightness threshold is 20, the initial saturation of the blurred layer is recorded as S, and the fourth control constant is recorded as k s , using formula (23), calculate the saturation adjustment factor R S (B3′), where k s The value of is usually between 0.5 and 1.0, R S (B3′) is dynamically adjusted as the brightness changes. The target saturation S′ of the blurred layer is calculated using formula (24).

[0160]

[0161] S′=S×R S (B3′) (24)

[0162] For example, Figure 8 As shown, in dark mode, the real-time blurred visual effect of the blurred layer 81 generated by the related technology superimposed on the background layer 80, and the real-time blurred visual effect of the blurred layer 82 generated by the embodiment of the present application superimposed on the background layer 80 are respectively shown. Through comparison, it can be found that the real-time blurred visual effect of the blurred layer 82 generated by the embodiment of the present application is more transparent.

[0163] It can be seen that in the embodiment of the present application, when the display mode of the electronic device is the dark mode, the initial brightness of the blurred layer is calculated by the algorithm of the overlay mode, and the initial brightness of the blurred layer is corrected according to the second brightness threshold to obtain the target brightness of the blurred layer, which can not only enhance the detail performance of the dark part, but also approach the saturation of the integrated base map, ensuring that the overall visual effect is smoother and more natural. According to the brightness of the blurred layer, the hue of the blurred layer is appropriately adjusted to prevent color distortion. According to the brightness of the blurred layer, the saturation of the blurred layer is appropriately adjusted, and the saturation is increased in low brightness conditions to enhance the color performance in low brightness; the saturation is reduced in high brightness conditions to prevent the color from being too saturated and dazzling, thereby avoiding visual fatigue and ensuring the accuracy of color display and visual comfort.

[0164] In some other embodiments provided in this application, the above Figure 2 、 Figure 3 、 Figure 4 or Figure 7 Based on any of the embodiments shown, after the above step 204, as shown in FIG. Figure 9 As shown, the following steps may also be included: step 901, step 902, step 903 and step 904;

[0165] In step 901, when a change in the posture of the electronic device is detected, posture change information of the electronic device is obtained, wherein the posture change information includes at least one of the following: a current tilt angle and a current moving distance.

[0166] In an embodiment of the present application, measurement data of the gyroscope, accelerometer and other positioning sensors of the electronic device can be obtained, and based on the obtained measurement data, it is determined whether the posture of the electronic device has changed; wherein the measurement data of the gyroscope includes: pitch angle, yaw angle and roll angle; the measurement data of the accelerometer includes: up and down, front and back data, and data from stillness, movement, and then stillness.

[0167] In the embodiment of the present application, the current tilt angle θ of the electronic device can be determined based on the measurement data of the gyroscope, where the range of θ is [-90°, +90°].

[0168] Exemplarily, when the current tilt angle of the electronic device changes by more than ±10° relative to the initial position (usually in the vertical direction), it is determined that the posture of the electronic device has changed.

[0169] In an embodiment of the present application, the current moving distance of the electronic device can be determined based on measurement data of an accelerometer or other positioning sensors.

[0170] Exemplarily, when the current moving distance of the electronic device exceeds 5 centimeters, it is determined that the posture of the electronic device has changed.

[0171] In the embodiment of the present application, when it is detected that the posture of the electronic device has changed, the WithoutFresnel rendering mode can be introduced, such as Figure 10 As shown, the visual effect 1000 is shown when the Without Fresnel rendering mode is turned off, and the visual effect 1001 is shown when the Without Fresnel rendering mode is turned on. When the Without Fresnel rendering mode is turned on, the brightness, saturation and hue of the blurred layer are dynamically adjusted according to the posture change information of the electronic device to adjust the real-time rendering of the blurred layer reflected light to simulate the material change corresponding to the distance of the human eye from the material.

[0172] In step 902, the layer rendering parameters are adjusted according to the posture change information.

[0173] In the embodiment of the present application, the adjusted layer rendering parameters may include: adjusted brightness, adjusted hue, and adjusted saturation. The adjusted layer rendering parameters are used to draw the adjusted blurred layer, so that the real-time blur effect changes adaptively with the position of the electronic device, thereby improving the visual effect of the real-time blur.

[0174] Considering that the brightness of the blurred layer is related to the tilt angle of the electronic device, in an embodiment of the present application, the brightness of the blurred layer can be dynamically adjusted according to the tilt angle of the electronic device to improve the visual effect of real-time blur.

[0175] In some embodiments, when the posture information includes the current tilt angle, the above step 902 may include the following steps: step 9021 and step 9022;

[0176] In step 9021, the brightness adjustment amount is determined based on the current tilt angle, the initial tilt angle and the fifth control constant; wherein the fifth control constant is used to control the speed of change of the brightness with the tilt angle; when the current tilt angle indicates that the electronic device is tilted clockwise relative to the initial position corresponding to the initial tilt angle, the brightness adjustment amount is positively correlated with the current tilt angle; when the current tilt angle indicates that the electronic device is tilted counterclockwise relative to the initial position, the brightness adjustment amount is negatively correlated with the current tilt angle.

[0177] For example, the current tilt angle is recorded as θ, the initial tilt angle is recorded as θ0 (usually 0), and the fifth control constant is recorded as k B (The brightness can be adjusted by 0.5% per degree of tilt). Using formula (25), calculate the brightness adjustment amount ΔB.

[0178] ΔB=k B ×(θ-θ0) (25)

[0179] In step 9022, the adjusted brightness is determined based on the target brightness and the brightness adjustment amount.

[0180] For example, the target brightness of the blurred layer is denoted as B3′, the brightness adjustment amount is denoted as ΔB, and the adjusted brightness B3″ is calculated using formula (26).

[0181] B3″=B3′+ΔB (26)

[0182] As can be seen, in the embodiment of the present application, when the electronic device is tilted clockwise, the brightness of the blurred layer is increased to simulate light shining more directly on the surface of the object, thereby enhancing the highlight effect. When the electronic device is tilted counterclockwise, the brightness of the blurred layer is reduced to simulate the increase in the incident angle of light, the weakening of the light, and the reduction of the highlight intensity, thereby improving the visual effect of real-time blur.

[0183] Considering that the change in the saturation of the blurred layer not only corresponds to the brightness adjustment, but is also closely related to the movement of the device, in an embodiment of the present application, the saturation of the blurred layer can be adjusted by referring to the adjusted brightness of the blurred layer and the movement distance of the device at the same time, so that the color change of the blurred layer is more natural.

[0184] In some embodiments, when the posture information includes the current moving distance, the above step 902 may include the following steps: step 9023 and step 9024;

[0185] In step 9023, the saturation adjustment amount is determined based on the target brightness, the adjusted brightness, the current moving distance, the preset maximum brightness change, the preset maximum value of the moving distance, the sixth control constant and the seventh control constant; wherein the sixth control constant is used to control the adjustment amplitude of the brightness to the saturation, and the seventh control constant is used to control the adjustment amplitude of the current moving distance to the saturation, the saturation adjustment amount is negatively correlated with the moving distance, the saturation adjustment amount is positively correlated with the brightness adjustment amount, and the brightness adjustment amount is the difference between the adjusted brightness and the target brightness.

[0186] For example, the target brightness is recorded as B3′, the adjusted brightness is recorded as B3″, the current moving distance is recorded as d, and the preset maximum brightness change is recorded as B max , the preset maximum moving distance is recorded as d max (can be set to the arm span of the device, for example 50 cm), the sixth control constant is denoted as k S , the seventh control constant is denoted as k Sd Using formula (27), calculate the saturation adjustment amount ΔS.

[0187]

[0188] In step 9024, the adjusted saturation is determined according to the target saturation and the saturation adjustment amount.

[0189] Exemplarily, the target saturation is denoted as S', the saturation adjustment amount is denoted as ΔS, and the adjusted saturation S" is calculated by using formula (28) to ensure that S" is between [0%, 100%].

[0190] S" = S' + ΔS (28)

[0191] It can be seen that in the embodiments of the present application, when the electronic device moves, if the brightness of the blur layer increases, the saturation of the blur layer is increased to make the color of the brighter part more vivid; if the brightness of the blur layer decreases, the saturation of the blur layer is decreased to make the color of the dark part more soft, thereby improving the visual effect of real-time blur.

[0192] Considering that the hue of the blur layer is related to the tilt angle of the electronic device, in the embodiments of the present application, the hue of the blur layer can be dynamically adjusted according to the tilt angle of the electronic device to simulate the color shift of light at different angles, wherein the change of the hue is related to the sine function of the tilt angle of the device.

[0193] In some embodiments, in the case where the pose information includes the current tilt angle, the above step 902 can include the following steps: step 9025 and step 9026.

[0194] In step 9025, the hue adjustment amount is determined according to the current tilt angle, the preset maximum tilt angle and the preset maximum hue offset amount; wherein the hue adjustment amount is directly proportional to the sine value of the current tilt angle.

[0195] Exemplarily, the current tilt angle is denoted as θ, the preset maximum tilt angle is denoted as θ max (such as 90°), and the preset maximum hue offset amount is denoted as ΔH max , the hue adjustment amount ΔH is calculated by using formula (29).

[0196]

[0197] In step 9026, the adjusted hue is determined according to the target hue and the hue adjustment amount.

[0198] Exemplarily, the target hue is denoted as H', the hue adjustment amount is denoted as ΔH, and the adjusted hue H" is calculated by using formula (30) to ensure that H" is between [0°, 360°).

[0199] H" = H' + ΔH (30)

[0200] As can be seen, in the embodiments of the present application, a maximum hue offset can be pre-set, for example, ±10°, to prevent distortion caused by excessive hue changes. Furthermore, setting the hue change proportional to the sine of the tilt angle can simulate color changes caused by light refraction, thereby improving the visual effect of real-time blur.

[0201] In step 903, the blurred layer is updated according to the adjusted layer rendering parameters.

[0202] In the embodiment of the present application, the blurred layer can be redrawn according to the adjusted layer rendering parameters, and the redrawn blurred layer is the updated blurred layer.

[0203] In step 904 , the display interface elements are updated using the updated blurred layer.

[0204] In an embodiment of the present application, the original blurred layer on the background layer of the interface element is first deleted, and then the updated blurred layer is superimposed on the background layer of the interface element to achieve a dynamically updated real-time blurred visual effect.

[0205] It can be seen that in the embodiment of the present application, the brightness, saturation and hue of the blurred layer can be dynamically adjusted by acquiring data from the gyroscope and accelerometer and monitoring the tilt angle and movement of the device in real time. Without Fresnel rendering is introduced, and the simulation of conditionally controllable reflection changes is added to make the light and shadow effects smoother and more natural, and enhance the user's sense of light and shadow realism of the picture as transparent as glass during use. According to the angle change and relative movement of the electronic device, the saturation and hue are dynamically adjusted. When the electronic device is tilted or moved, the color can respond to environmental changes more naturally. For example, the color of the bright area is brighter and the color of the dark area is more saturated. The direction of the light source and the environmental changes are simulated to achieve a more accurate visual effect display.

[0206] In some other embodiments provided by the present application, since the blurring process and the layer rendering process involve some parameters, such as σ parameter, α parameter, β parameter, σ θ Parameters, σ d Parameters, etc. Therefore, in order to ensure flexible calling of different environmental conditions during blur processing and rendering processing, and comprehensively improve the universality and adaptive performance of the system, the above parameters can be dynamically adjusted.

[0207] Among them, the σ parameter is a constant that controls the decay rate. It is used to control the decay rate of the weight or convolution kernel during the blurring process. The decay rate determines how fast the influence of farther pixels relative to the center pixel decreases when performing weighted averaging on the pixel neighborhood. By adjusting the σ parameter, a balance can be achieved between detail clarity and smoothness.

[0208] The alpha parameter is typically used to control the balance and intensity between brightness and hue. When ambient light is strong and the color temperature is high, increasing the alpha parameter can ensure reasonable color reproduction and contrast in light-colored, high-brightness scenes. Simply put, the higher the alpha parameter, the greater the impact on the balance between brightness and hue.

[0209] The β parameter is typically related to saturation and is used to enhance subtle color gradations in low-light, low-contrast, or low-saturation environments. When working in a darkened indoor environment, viewing dark-toned images, or viewing low-saturation content, increasing the β parameter appropriately helps preserve delicate color transitions and depth, resulting in a more comfortable viewing experience during blur processing.

[0210] σ θ The parameter is used to control the attenuation strength of hue in the blurring process. Hue is a circular data, and simple linear smoothing may cause color jumps. θ Parameters can achieve softer transitions in areas with significant color differences (such as between a high-speed moving foreground and a stationary background); in scenes requiring high color recognition, reducing σ θ Parameters can reduce unnecessary hue blending and maintain color clarity.

[0211] σ d The parameter is used to control the fuzzy depth information of the scene. Objects at different depth levels in the scene may need to be processed differently during imaging. d The parameter can achieve smoother transitions in areas with significant depth differences, and naturally blend the foreground and background through moderate blur; reducing σ d The larger the parameter, the more depth is retained, making the boundaries between near and far objects clearer.

[0212] The dynamic adjustment process of the above parameters may include the following steps:

[0213] 1) Obtain hardware information: Obtain characteristic data of the display device from the system configuration file or hardware interface, including but not limited to: refresh rate (FPS or Hz), display panel color gamut range, brightness characteristics (maximum brightness, HDR support), color temperature information and device resolution.

[0214] 2) Obtain information about the current user's usage environment: such as ambient light intensity (which can be detected by an ambient light sensor), scene type (indoor, outdoor, night mode), and user interaction behavior information (whether to quickly drag the window or quickly switch screens).

[0215] 3) According to the equipment characteristics and environmental data, set initial reference values ​​for each of the above adjustable parameters, wherein these reference values ​​may be pre-stored in the system parameter lookup table, or may be directly given through pre-calibration and empirical data.

[0216] 4) Parameter adaptive calculation: adjust the σ parameter according to the refresh rate of the display device and the required level of image detail; if a high refresh rate is detected (such as above 120Hz), appropriately reduce the value of the σ parameter to retain more details; if the refresh rate is low or the scene changes are not drastic, appropriately increase the value of the σ parameter to enhance blur smoothness. If the device display color temperature is high and the ambient light is strong, increase the value of the α parameter to enhance the balance between brightness and hue to ensure color restoration in bright scenes; if it is in a dim indoor environment, appropriately increase the value of the β parameter to make the low-saturation area more delicate and soft in the blur, so as to present a more comfortable visual effect. In addition, analyze the hue change rate and depth change rate in the current scene. If the hue or depth gradient is large (such as the foreground of a fast-moving object has a clear contrast with the static background), increase the corresponding σ θ The value of the parameter or σ d In static scenes that require clearer levels and hues, lowering σ θ The value of the parameter or σ d The value of the parameter is used to prevent the blurring process from excessively removing details.

[0217] 5) Real-time Rendering and Iterative Optimization: Periodically (e.g., every few frames or triggered by user interaction) re-evaluate the current environment and device status. If real-time rendering performance indicators (e.g., a significant drop in frame rate) or user feedback (e.g., user reports of color distortion) indicate that the current parameters are unsuitable, feedback will be recorded. After updating and re-adapting the parameters, automatic fine-tuning can be issued for specific models. After a certain period of operation, feedback will be collected until the optimal balance between rendering quality and performance is achieved.

[0218] 6) Data Storage and Parameter Persistence: The finalized parameter solution is stored in a local cache for quick loading the next time the same device or usage scenario is started, reducing re-adjustment time. If the system allows, data synchronization can be performed through the cloud parameter library, and data can be transferred between devices. User preferences or optimal device parameters can be reported to the server, or directly through the device switching application or other device switching data packet transmission methods, following the user to accelerate the parameter selection process on different devices and similar environments.

[0219] It can be seen that in the embodiment of the present application, by adjusting the parameters in the blur processing process or the rendering process in real time, on the one hand, the real-time rendering effect can be optimized, and on the other hand, it can flexibly adapt to various usage scenarios for different display devices and user environments, and improve compatibility with different devices and components.

[0220] The method for displaying interface elements provided in the embodiment of the present application can be executed by a display device for interface elements. In the embodiment of the present application, the method for displaying interface elements performed by a display device for interface elements is taken as an example to illustrate the display device for interface elements provided in the embodiment of the present application.

[0221] Figure 11 This is a structural block diagram of a display device for an interface element provided by some embodiments of the present application, such as Figure 11 As shown, the interface element display device 1100 may include: a first determination module 1101, a second determination module 1102, a third determination module 1103 and a first display module 1104;

[0222] The first determining module 1101 is configured to determine a brightness algorithm according to a display mode of the electronic device;

[0223] The second determining module 1102 is configured to determine layer rendering parameters according to the brightness algorithm; the layer rendering parameters include target brightness, target hue, and target saturation;

[0224] The third determining module 1103 is configured to determine a fuzzy layer according to the layer rendering parameters;

[0225] The first display module 1104 is configured to update display interface elements using the blurred layer;

[0226] Wherein, when the display mode is a light color mode, the brightness algorithm is an algorithm of a color lightening mode; when the display mode is a dark color mode, the brightness algorithm is an algorithm of an overlay mode.

[0227] As can be seen from the above embodiments, in this embodiment, the brightness algorithm is determined according to the display mode of the electronic device; the layer rendering parameters are determined according to the brightness algorithm; the layer rendering parameters include target brightness, target hue and target saturation; the blurred layer is determined according to the layer rendering parameters; the display interface elements are updated using the blurred layer; wherein, when the display mode is light mode, the brightness algorithm is a color fading mode algorithm; when the display mode is dark mode, the brightness algorithm is an overlay mode algorithm.

[0228] It can be seen that in the embodiment of the present application, since the algorithm using the color dodge mode in the light mode can increase the brightness and contrast of the blurred layer of the interface element, it can avoid the light blurred layer appearing pale after being superimposed on the background layer of the interface element, and the algorithm using the overlay mode in the dark mode can optimize the saturation of the blurred layer of the interface element, and avoid the dark blurred layer appearing gray or dull after being superimposed on the background layer of the interface element. Therefore, it can better cope with complex and changeable background layers, ensure real-time blur and more transparent display effects under different color and depth conditions, improve the visibility of the interface elements and the natural blur effect of the background layer of the interface elements, and thereby improve the real-time blurred visual effect of the interface elements.

[0229] Optionally, as an embodiment, the second determining module 1102 may include:

[0230] a first determining submodule, configured to determine a target brightness of the blurred layer according to the brightness of the background layer of the interface element, the brightness of the foreground layer of the interface element, and the brightness algorithm;

[0231] a first correction submodule, configured to correct the initial hue of the blurred layer according to the target brightness of the blurred layer to obtain the target hue of the blurred layer; wherein the initial hue of the blurred layer is determined based on the hue of the background layer and a Gaussian blur algorithm;

[0232] The second correction submodule is used to correct the initial saturation of the blurred layer according to the target brightness of the blurred layer to obtain the target saturation of the blurred layer; wherein the initial saturation of the blurred layer is determined based on the saturation of the background layer and the Gaussian blur algorithm.

[0233] Optionally, as an embodiment, the display mode is a light color mode;

[0234] The first determining submodule may include:

[0235] a first determining unit, configured to determine an initial brightness of the blurred layer according to the brightness of the background layer of the interface element, the brightness of the foreground layer of the interface element, and an algorithm of the color dodge mode;

[0236] a second determining unit, configured to determine, when the initial brightness is greater than or equal to a first brightness threshold, the first brightness threshold as a target brightness of the blurred layer;

[0237] The third determining unit is configured to determine the initial brightness as the target brightness of the blurred layer when the initial brightness is less than the first brightness threshold.

[0238] Optionally, as an embodiment, the first correction submodule may include:

[0239] a fourth determining unit, configured to determine a hue offset based on the target brightness of the blurred layer, the first brightness threshold, a first control constant, and an offset constant; wherein the first control constant is used to control the amplitude of hue change, and the hue offset is negatively correlated with the target brightness;

[0240] The fifth determining unit is configured to determine a target hue of the blurred layer according to the initial hue of the blurred layer and the hue offset.

[0241] Optionally, as an embodiment, the second correction submodule may include:

[0242] a sixth determining unit, configured to determine a saturation adjustment factor based on the target brightness of the blurred layer, the first brightness threshold, and a second control constant; wherein the second control constant is used to control the amplitude of saturation change, and the saturation adjustment factor is negatively correlated with the target brightness;

[0243] A seventh determining unit is configured to determine a target saturation of the blurred layer according to the initial saturation of the blurred layer and the saturation adjustment factor.

[0244] Optionally, as an embodiment, the display mode is a dark mode;

[0245] The first determining submodule may include:

[0246] an eighth determining unit, configured to determine an initial brightness of the blurred layer according to the brightness of the background layer of the interface element, the brightness of the foreground layer of the interface element, and a multiply algorithm of the overlay mode;

[0247] a ninth determining unit, configured to determine, when the initial brightness is less than or equal to a second brightness threshold, a target brightness of the blurred layer according to the initial brightness, the brightness of the background layer, and a soft light algorithm of the overlay mode;

[0248] The tenth determination unit is used to determine the target brightness of the blurred layer according to the initial brightness, the brightness of the background layer, the second brightness threshold and the strong light algorithm of the overlay mode when the initial brightness is greater than the second brightness threshold.

[0249] Optionally, as an embodiment, the first correction submodule may include:

[0250] an eleventh determining unit, configured to determine a hue shift based on a target brightness of the blurred layer, the brightness of the foreground layer of the interface element, and a third control constant; wherein the third control constant is used to control a range of hue change, and the hue shift is positively correlated with the target brightness;

[0251] The twelfth determining unit is configured to determine a target hue of the blurred layer according to the initial hue of the blurred layer and the hue offset.

[0252] Optionally, as an embodiment, the second correction submodule may include:

[0253] a thirteenth determining unit, configured to determine a saturation adjustment factor based on the target brightness of the blurred layer, the second brightness threshold, and a fourth control constant; wherein the fourth control constant is used to control the amplitude of saturation change, and the saturation adjustment factor is negatively correlated with the target brightness;

[0254] A fourteenth determining unit is configured to determine a target saturation of the blurred layer according to the initial saturation of the blurred layer and the saturation adjustment factor.

[0255] Optionally, as an embodiment, the interface element display device 1100 may further include:

[0256] an acquisition module, configured to acquire posture change information of the electronic device when a posture change of the electronic device is detected, wherein the posture change information includes at least one of the following: a current tilt angle and a current movement distance;

[0257] An adjustment module, configured to adjust the layer rendering parameters according to the posture change information;

[0258] An update module, used to update the blurred layer according to the adjusted layer rendering parameters;

[0259] The second display module is used to update and display the interface elements using the updated blurred layer.

[0260] Optionally, as an embodiment, the posture information includes a current tilt angle;

[0261] The adjustment module may include:

[0262] a second determining submodule, configured to determine a brightness adjustment amount based on the current tilt angle, the initial tilt angle, and a fifth control constant; wherein the fifth control constant is used to control a speed at which brightness changes with the tilt angle; if the current tilt angle indicates that the electronic device is tilted clockwise relative to an initial position corresponding to the initial tilt angle, the brightness adjustment amount is positively correlated with the current tilt angle; and if the current tilt angle indicates that the electronic device is tilted counterclockwise relative to the initial position, the brightness adjustment amount is negatively correlated with the current tilt angle;

[0263] The third determining submodule is configured to determine the adjusted brightness according to the target brightness and the brightness adjustment amount.

[0264] Optionally, as an embodiment, the posture information includes a current moving distance;

[0265] The adjustment module may include:

[0266] a fourth determination submodule, configured to determine a saturation adjustment amount based on the target brightness, the adjusted brightness, the current movement distance, a preset maximum brightness change, a preset maximum movement distance, a sixth control constant, and a seventh control constant; wherein the sixth control constant is used to control the magnitude of brightness adjustment to saturation, and the seventh control constant is used to control the magnitude of current movement distance adjustment to saturation; the saturation adjustment amount is negatively correlated with the movement distance, and the saturation adjustment amount is positively correlated with the brightness adjustment amount; and the brightness adjustment amount is the difference between the adjusted brightness and the target brightness;

[0267] The fifth determining submodule is configured to determine the adjusted saturation according to the target saturation and the saturation adjustment amount.

[0268] Optionally, as an embodiment, the posture information includes a current tilt angle;

[0269] The adjustment module may include:

[0270] a sixth determining submodule, configured to determine a hue adjustment amount based on the current tilt angle, a preset maximum tilt angle value, and a preset maximum hue offset; wherein the hue adjustment amount is proportional to the sine value of the current tilt angle;

[0271] The seventh determining submodule is configured to determine the adjusted hue according to the target hue and the hue adjustment amount.

[0272] The display device of the interface element in the embodiment of the present application can be an electronic device or a component in the electronic device, such as an integrated circuit or a chip. The electronic device can be a terminal or a device other than a terminal. Exemplarily, the electronic device can be a mobile phone, a tablet computer, a laptop computer, a PDA, a car-mounted electronic device, a mobile Internet device (Mobile Internet Device, MID), an augmented reality (Augmented Reality, AR) / virtual reality (Virtual Reality, VR) device, a robot, a wearable device, an ultra-mobile personal computer (Ultra-Mobile Personal Computer, UMPC), a netbook or a personal digital assistant (Personal Digital Assistant, PDA), etc., and can also be a server, a network attached storage (Network Attached Storage, NAS), a personal computer (Personal Computer, PC), a television (Television, TV), a teller machine or a self-service machine, etc., and the embodiment of the present application is not specifically limited.

[0273] The display device of the interface element in the embodiment of the present application can be a device having an operating system. The operating system can be an Android operating system, an iOS operating system, or other possible operating systems, which are not specifically limited in the embodiment of the present application.

[0274] The display device of the interface element provided in the embodiment of the present application can realize the above Figure 2 、 Figure 3 、 Figure 4 、 Figure 7 or Figure 9 To avoid repetition, the various processes implemented in any of the method embodiments shown in the drawings will not be described again here.

[0275] Alternatively, as Figure 12 As shown, an embodiment of the present application also provides an electronic device 1200, including a processor 1201 and a memory 1202, wherein the memory 1202 stores a program or instruction that can be run on the processor 1201, and when the program or instruction is executed by the processor 1201, the various steps of the embodiment of the display method of the above-mentioned interface elements are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0276] It should be noted that the electronic devices in the embodiments of the present application include the mobile electronic devices and non-mobile electronic devices mentioned above.

[0277] Figure 13 It is a schematic diagram of the hardware structure of an electronic device that implements various embodiments of the present application.

[0278] The electronic device 1300 includes but is not limited to components such as a radio frequency unit 1301 , a network module 1302 , an audio output unit 1303 , an input unit 1304 , a sensor 1305 , a display unit 1306 , a user input unit 1307 , an interface unit 1308 , a memory 1309 , and a processor 1310 .

[0279] Those skilled in the art will understand that the electronic device 1300 may also include a power source (such as a battery) to power each component, and the power source may be logically connected to the processor 1310 through a power management system, thereby implementing functions such as charging, discharging, and power consumption management through the power management system. Figure 13 The electronic device structure shown in the figure does not constitute a limitation on the electronic device. The electronic device may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently, which will not be repeated here.

[0280] In some embodiments, the processor 1310 is configured to determine a brightness algorithm based on a display mode of the electronic device; determine layer rendering parameters based on the brightness algorithm; the layer rendering parameters include a target brightness, a target hue, and a target saturation; and determine a blurred layer based on the layer rendering parameters.

[0281] Display unit 1306 is used to update the display interface elements using the blurred layer; wherein, when the display mode is a light mode, the brightness algorithm is an algorithm of a color fading mode; when the display mode is a dark mode, the brightness algorithm is an algorithm of an overlay mode.

[0282] It can be seen that in the embodiment of the present application, since the algorithm using the color dodge mode in the light mode can increase the brightness and contrast of the blurred layer of the interface element, it can avoid the light blurred layer appearing pale after being superimposed on the background layer of the interface element, and the algorithm using the overlay mode in the dark mode can optimize the saturation of the blurred layer of the interface element, and avoid the dark blurred layer appearing gray or dull after being superimposed on the background layer of the interface element. Therefore, it can better cope with complex and changeable background layers, ensure real-time blur and more transparent display effects under different color and depth conditions, improve the visibility of the interface elements and the natural blur effect of the background layer of the interface elements, and thereby improve the real-time blurred visual effect of the interface elements.

[0283] Optionally, as one embodiment, the processor 1310 is specifically configured to determine a target lightness of the blur layer according to the lightness of the background layer of the interface element, the lightness of the foreground layer of the interface element, and the lightness algorithm; correct an initial hue of the blur layer according to the target lightness of the blur layer to obtain a target hue of the blur layer; wherein the initial hue of the blur layer is determined based on the hue of the background layer and a Gaussian blur algorithm; correct an initial saturation of the blur layer according to the target lightness of the blur layer to obtain a target saturation of the blur layer; wherein the initial saturation of the blur layer is determined based on the saturation of the background layer and the Gaussian blur algorithm.

[0284] Optionally, as one embodiment, the display mode is a light color mode.

[0285] The processor 1310 is specifically configured to determine an initial lightness of the blur layer according to the lightness of the background layer of the interface element, the lightness of the foreground layer of the interface element, and the algorithm of the color fade mode; in a case where the initial lightness is greater than or equal to a first lightness threshold, determine the first lightness threshold as a target lightness of the blur layer; in a case where the initial lightness is less than the first lightness threshold, determine the initial lightness as the target lightness of the blur layer.

[0286] Optionally, as one embodiment, the processor 1310 is specifically configured to determine a hue offset according to the target lightness of the blur layer, the first lightness threshold, a first control constant, and an offset constant; wherein the first control constant is used to control a variation range of the hue, and the hue offset is negatively correlated with the target lightness; determine a target hue of the blur layer according to the initial hue of the blur layer and the hue offset.

[0287] Optionally, as one embodiment, the processor 1310 is specifically configured to determine a saturation adjustment factor according to the target lightness of the blur layer, the first lightness threshold, and a second control constant; wherein the second control constant is used to control a variation range of the saturation, and the saturation adjustment factor is negatively correlated with the target lightness; determine a target saturation of the blur layer according to the initial saturation of the blur layer and the saturation adjustment factor.

[0288] Optionally, as one embodiment, the display mode is a dark color mode.

[0289] Processor 1310 is specifically used to determine the initial brightness of the blurred layer based on the brightness of the background layer of the interface element, the brightness of the foreground layer of the interface element and the multiply algorithm of the overlay mode; when the initial brightness is less than or equal to the second brightness threshold, determine the target brightness of the blurred layer based on the initial brightness, the brightness of the background layer and the soft light algorithm of the overlay mode; when the initial brightness is greater than the second brightness threshold, determine the target brightness of the blurred layer based on the initial brightness, the brightness of the background layer, the second brightness threshold and the strong light algorithm of the overlay mode.

[0290] Optionally, as an embodiment, the processor 1310 is specifically used to determine the hue offset based on the target brightness of the blurred layer, the brightness of the foreground layer of the interface element and a third control constant; wherein the third control constant is used to control the amplitude of the hue change, and the hue offset is positively correlated with the target brightness; and the target hue of the blurred layer is determined based on the initial hue of the blurred layer and the hue offset.

[0291] Optionally, as an embodiment, the processor 1310 is specifically used to determine a saturation adjustment factor based on the target brightness of the blurred layer, the second brightness threshold and a fourth control constant; wherein the fourth control constant is used to control the amplitude of the saturation change, and the saturation adjustment factor is negatively correlated with the target brightness; and the target saturation of the blurred layer is determined based on the initial saturation of the blurred layer and the saturation adjustment factor.

[0292] Optionally, as an embodiment, the processor 1310 is further used to obtain posture change information of the electronic device when it is detected that the posture of the electronic device has changed, wherein the posture change information includes at least one of the following: current tilt angle, current moving distance; adjusting the layer rendering parameters according to the posture change information; updating the blurred layer according to the adjusted layer rendering parameters; and updating the display of the interface elements using the updated blurred layer.

[0293] Optionally, as an embodiment, the posture information includes a current tilt angle;

[0294] Processor 1310 is specifically used to determine a brightness adjustment amount based on the current tilt angle, the initial tilt angle and a fifth control constant; wherein the fifth control constant is used to control the speed of change of brightness with the tilt angle; when the current tilt angle indicates that the electronic device is tilted clockwise relative to the initial position corresponding to the initial tilt angle, the brightness adjustment amount is positively correlated with the current tilt angle; when the current tilt angle indicates that the electronic device is tilted counterclockwise relative to the initial position, the brightness adjustment amount is negatively correlated with the current tilt angle; and the adjusted brightness is determined based on the target brightness and the brightness adjustment amount.

[0295] Optionally, as an embodiment, the posture information includes a current moving distance;

[0296] Processor 1310 is specifically used to determine a saturation adjustment amount based on the target brightness, the adjusted brightness, the current moving distance, a preset maximum brightness change, a preset maximum moving distance, a sixth control constant, and a seventh control constant; wherein the sixth control constant is used to control the adjustment amplitude of brightness to saturation, and the seventh control constant is used to control the adjustment amplitude of the current moving distance to saturation, the saturation adjustment amount is negatively correlated with the moving distance, the saturation adjustment amount is positively correlated with the brightness adjustment amount, and the brightness adjustment amount is the difference between the adjusted brightness and the target brightness; and the adjusted saturation is determined based on the target saturation and the saturation adjustment amount.

[0297] Optionally, as an embodiment, the posture information includes a current tilt angle;

[0298] Processor 1310 is specifically used to determine the hue adjustment amount based on the current tilt angle, the preset maximum tilt angle and the preset maximum hue offset; wherein the hue adjustment amount is proportional to the sine value of the current tilt angle; and determine the adjusted hue based on the target hue and the hue adjustment amount.

[0299] It should be understood that in an embodiment of the present application, the input unit 1304 may include a graphics processing unit (GPU) 13041 and a microphone 13042, and the graphics processor 13041 processes the image data of a static picture or video obtained by an image capture device (such as a camera) in a video capture mode or an image capture mode. The display unit 1306 may include a display panel 13061, and the display panel 13061 may be configured in the form of a liquid crystal display, an organic light emitting diode, etc. The user input unit 1307 includes a touch panel 13071 and at least one of the other input devices 13072. The touch panel 13071 is also called a touch screen. The touch panel 13071 may include two parts: a touch detection device and a touch controller. Other input devices 13072 may include, but are not limited to, a physical keyboard, function keys (such as volume control keys, switch keys, etc.), a trackball, a mouse, and an operating stick, which will not be repeated here.

[0300] The memory 1309 can be used to store software programs and various data. The memory 1309 may mainly include a first storage area for storing programs or instructions and a second storage area for storing data, wherein the first storage area may store an operating system, applications or instructions required for at least one function (such as a sound playback function, an image playback function, etc.). In addition, the memory 1309 may include a volatile memory or a non-volatile memory, or the memory 1309 may include both volatile and non-volatile memories. Among them, the non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory. Volatile memory can be random access memory (RAM), static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDRSDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous link dynamic random access memory (SLDRAM), and direct RAM bus random access memory (DRRAM). The memory 1309 in the embodiment of the present application includes but is not limited to these and any other suitable types of memory.

[0301] Processor 1310 may include one or more processing units. Optionally, processor 1310 integrates an application processor and a modem processor. The application processor primarily handles operations related to the operating system, user interface, and application programs, while the modem processor primarily processes wireless communication signals, such as a baseband processor. It is understood that the modem processor may not be integrated into processor 1310.

[0302] An embodiment of the present application also provides a readable storage medium, on which a program or instruction is stored. When the program or instruction is executed by a processor, the various processes of the embodiment of the display method of the above-mentioned interface elements are implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0303] The processor is the processor in the electronic device described in the above embodiment. The readable storage medium includes a computer-readable storage medium, such as a computer read-only memory (ROM), a random access memory (RAM), a magnetic disk, or an optical disk.

[0304] An embodiment of the present application further provides a chip, which includes a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run programs or instructions to implement the various processes of the above-mentioned interface element display method embodiment, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0305] It should be understood that the chip mentioned in the embodiments of the present application can also be called a system-level chip, a system chip, a chip system or a system-on-chip chip, etc.

[0306] An embodiment of the present application provides a computer program product, which is stored in a storage medium. The program product is executed by at least one processor to implement the various processes of the embodiment of the display method of the above-mentioned interface elements, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0307] It should be noted that, in this article, the terms "comprise", "include" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device comprising a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, an element defined by the statement "comprises a ..." does not exclude the presence of other identical elements in the process, method, article or device comprising the element. In addition, it should be noted that the scope of the methods and devices in the embodiments of the present application is not limited to performing functions in the order shown or discussed, and may also include performing functions in a substantially simultaneous manner or in the opposite order according to the functions involved. For example, the described method may be performed in an order different from that described, and various steps may also be added, omitted, or combined. In addition, the features described with reference to certain examples may be combined in other examples.

[0308] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus the necessary general hardware platform, and of course can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present application is essentially or the part that contributes to the prior art can be embodied in the form of a computer software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), including a number of instructions for enabling a terminal (which can be a mobile phone, computer, server, or network device, etc.) to execute the methods described in each embodiment of the present application.

[0309] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of this application, ordinary technicians in this field can also make many forms without departing from the purpose of this application and the scope of protection of the claims, all of which are within the protection of this application.

Claims

1. A method for displaying interface elements, characterized in that: The method comprises: Determining a brightness algorithm according to a display mode of the electronic device; Determining layer rendering parameters according to the brightness algorithm; the layer rendering parameters include target brightness, target hue and target saturation; Determine a blurred layer according to the layer rendering parameters; Updating display interface elements using the blurred layer; Wherein, when the display mode is a light color mode, the brightness algorithm is an algorithm of a color lightening mode; when the display mode is a dark color mode, the brightness algorithm is an algorithm of an overlay mode.

2. The method according to claim 1, characterized in that The determining of layer rendering parameters according to the brightness algorithm includes: Determining a target brightness of the blurred layer according to the brightness of the background layer of the interface element, the brightness of the foreground layer of the interface element, and the brightness algorithm; Correcting the initial hue of the blurred layer according to the target brightness of the blurred layer to obtain the target hue of the blurred layer; wherein the initial hue of the blurred layer is determined based on the hue of the background layer and a Gaussian blur algorithm; According to the target brightness of the blurred layer, the initial saturation of the blurred layer is corrected to obtain the target saturation of the blurred layer; wherein the initial saturation of the blurred layer is determined based on the saturation of the background layer and the Gaussian blur algorithm.

3. The method according to claim 2, characterized in that The display mode is a light color mode; The determining the target brightness of the blurred layer according to the brightness of the background layer of the interface element, the brightness of the foreground layer of the interface element, and the brightness algorithm includes: Determining the initial brightness of the blurred layer according to the brightness of the background layer of the interface element, the brightness of the foreground layer of the interface element, and the algorithm of the color dodge mode; When the initial brightness is greater than or equal to a first brightness threshold, determining the first brightness threshold as the target brightness of the blurred layer; When the initial brightness is less than the first brightness threshold, the initial brightness is determined as the target brightness of the blurred layer.

4. The method according to claim 3, characterized in that The step of correcting the initial hue of the blurred layer according to the target brightness of the blurred layer to obtain the target hue of the blurred layer includes: determining a hue offset according to the target brightness of the blurred layer, the first brightness threshold, a first control constant, and an offset constant; wherein the first control constant is used to control the amplitude of the hue change, and the hue offset is negatively correlated with the target brightness; A target hue of the blurred layer is determined according to the initial hue of the blurred layer and the hue offset.

5. The method according to claim 3, characterized in that The step of correcting the initial saturation of the blurred layer according to the target brightness of the blurred layer to obtain the target saturation of the blurred layer includes: determining a saturation adjustment factor according to the target brightness of the blurred layer, the first brightness threshold, and a second control constant; wherein the second control constant is used to control the amplitude of the saturation change, and the saturation adjustment factor is negatively correlated with the target brightness; The target saturation of the blurred layer is determined according to the initial saturation of the blurred layer and the saturation adjustment factor.

6. The method according to claim 2, characterized in that The display mode is a dark mode; The determining the target brightness of the blurred layer according to the brightness of the background layer of the interface element, the brightness of the foreground layer of the interface element, and the brightness algorithm includes: Determining the initial brightness of the blurred layer according to the brightness of the background layer of the interface element, the brightness of the foreground layer of the interface element, and the multiply algorithm of the overlay mode; When the initial brightness is less than or equal to a second brightness threshold, determining a target brightness of the blurred layer according to the initial brightness, the brightness of the background layer, and the soft light algorithm of the overlay mode; When the initial brightness is greater than the second brightness threshold, the target brightness of the blurred layer is determined according to the initial brightness, the brightness of the background layer, the second brightness threshold and the bright light algorithm of the overlay mode.

7. The method according to claim 6, characterized in that The step of correcting the initial hue of the blurred layer according to the target brightness of the blurred layer to obtain the target hue of the blurred layer includes: Determining a hue shift according to the target brightness of the blurred layer, the brightness of the foreground layer of the interface element, and a third control constant; wherein the third control constant is used to control the amplitude of the hue change, and the hue shift is positively correlated with the target brightness; A target hue of the blurred layer is determined according to the initial hue of the blurred layer and the hue offset.

8. The method according to claim 6, characterized in that The step of correcting the initial saturation of the blurred layer according to the target brightness of the blurred layer to obtain the target saturation of the blurred layer includes: determining a saturation adjustment factor according to the target brightness of the blurred layer, the second brightness threshold, and a fourth control constant; wherein the fourth control constant is used to control the amplitude of the saturation change, and the saturation adjustment factor is negatively correlated with the target brightness; The target saturation of the blurred layer is determined according to the initial saturation of the blurred layer and the saturation adjustment factor.

9. The method according to claim 1, characterized in that After the step of updating the display interface elements using the blurred layer, the method further includes: When a change in the posture of the electronic device is detected, obtaining posture change information of the electronic device, wherein the posture change information includes at least one of the following: a current tilt angle and a current moving distance; Adjusting the layer rendering parameters according to the posture change information; Update the blur layer according to the adjusted layer rendering parameters; The interface element is updated and displayed using the updated blurred layer.

10. The method according to claim 9, characterized in that The posture change information includes the current tilt angle; The adjusting the layer rendering parameters according to the posture change information includes: determining a brightness adjustment amount based on the current tilt angle, the initial tilt angle, and a fifth control constant; wherein the fifth control constant is used to control a speed at which brightness changes with the tilt angle; when the current tilt angle indicates that the electronic device is tilted clockwise relative to an initial position corresponding to the initial tilt angle, the brightness adjustment amount is positively correlated with the current tilt angle; and when the current tilt angle indicates that the electronic device is tilted counterclockwise relative to the initial position, the brightness adjustment amount is negatively correlated with the current tilt angle; An adjusted brightness is determined according to the target brightness and the brightness adjustment amount.

11. The method according to claim 9, characterized in that The posture change information includes the current moving distance; The adjusting the layer rendering parameters according to the posture change information includes: Determining a saturation adjustment amount based on the target brightness, the adjusted brightness, the current moving distance, a preset maximum brightness change, a preset maximum moving distance, a sixth control constant, and a seventh control constant; wherein the sixth control constant is used to control the adjustment amplitude of brightness on saturation, and the seventh control constant is used to control the adjustment amplitude of the current moving distance on saturation, the saturation adjustment amount is negatively correlated with the moving distance, the saturation adjustment amount is positively correlated with the brightness adjustment amount, and the brightness adjustment amount is the difference between the adjusted brightness and the target brightness; An adjusted saturation is determined according to the target saturation and the saturation adjustment amount.

12. The method according to claim 9, characterized in that The posture change information includes the current tilt angle; The adjusting the layer rendering parameters according to the posture change information includes: Determining a hue adjustment amount according to the current tilt angle, a preset maximum tilt angle value, and a preset maximum hue offset; wherein the hue adjustment amount is proportional to the sine value of the current tilt angle; An adjusted hue is determined according to the target hue and the hue adjustment amount.

13. A display device for interface elements, characterized in that: The device comprises: A first determining module, configured to determine a brightness algorithm according to a display mode of the electronic device; A second determining module is configured to determine layer rendering parameters according to the brightness algorithm; the layer rendering parameters include target brightness, target hue, and target saturation; A third determining module, configured to determine a fuzzy layer according to the layer rendering parameters; A first display module, configured to update display interface elements using the blurred layer; Wherein, when the display mode is a light color mode, the brightness algorithm is an algorithm of a color lightening mode; when the display mode is a dark color mode, the brightness algorithm is an algorithm of an overlay mode.

14. An electronic device, characterized in that: The electronic device includes a processor and a memory, wherein the memory stores a program or instruction that can be run on the processor, and when the program or instruction is executed by the processor, the steps of the method for displaying interface elements according to any one of claims 1 to 12 are implemented.

15. A readable storage medium, characterized in that The readable storage medium stores a program or instruction, and when the program or instruction is executed by the processor, the steps of the method for displaying interface elements according to any one of claims 1 to 12 are implemented.

Images