Interface element display method and device, electronic equipment and readable storage medium

Abstract

The invention discloses an interface element display method and device, electronic equipment and a readable storage medium, and belongs to the technical field of electronic equipment.The method comprises the steps that a brightness algorithm is determined according to a display mode of the electronic equipment; determining layer rendering parameters according to the brightness algorithm; the layer rendering parameters comprise target brightness, target hue and target saturation; determining a fuzzy image layer according to the image layer rendering parameter; updating display interface elements by using the fuzzy layer; wherein under the condition that the display mode is a light color mode, the brightness algorithm is an algorithm of a color fading mode; under the condition that the display mode is a dark color mode, the brightness algorithm is an algorithm of a superposition 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] 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. The advantage of real-time blur is that it can blur the background through dynamic rendering, making the foreground content more visible, improving the user's focus and highlighting effect on the foreground content. This technology is particularly common in the operating system interfaces of smartphones and tablet devices.

[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 a 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 a 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 a 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 blurring 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 blurring effect is 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] Determine 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] Using the blurred layer to update display interface elements;

[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 an interface element, the device comprising:

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

[0014] A second determination module is used 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, used to determine a fuzzy layer according to the layer rendering parameters;

[0016] A first display module, used 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 program 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, and 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, comprising a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run a program or instruction 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 is 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 a 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 display interface elements are updated using the blurred layer; wherein, when the display mode is a light color mode, the brightness algorithm is an algorithm for a color fading mode; and when the display mode is a dark color mode, the brightness algorithm is an algorithm for an overlay mode.

[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 blur under different color and depth conditions, and achieve a more transparent display effect, thereby improving 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 is an example diagram of real-time blur processing of interface elements provided by some embodiments of the present application;

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

[0026] Figure 3 It 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 the blurred layer provided by some embodiments of the present application;

[0032] Fig. 9 This is a second flowchart of a method for displaying an interface element provided in some embodiments of the present application;

[0033] Fig.10 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] Fig.11 is a structural block diagram of a display device for an interface element provided by some embodiments of the present application;

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

[0036] Fig.13 It is a schematic diagram of the hardware structure of an electronic device implementing various embodiments of the present application. DETAILED DESCRIPTION

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

[0038] The terms "first", "second", etc. in the specification and claims of the present application are used to distinguish similar objects, and are not used to describe a specific order or sequence. It should be understood that the terms used in this way are interchangeable where appropriate, so that the embodiments of the present application can be implemented in an order other than those illustrated or described herein, and the objects distinguished by "first", "second", etc. are generally of one type, and the number of objects is not limited. For example, the first object can be one or more. In addition, "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 the present application are first introduced below.

[0040] 1. Related concepts

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

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

[0043] S (Saturation) stands for saturation, which refers to the purity of color. It indicates the degree of gray in the color. The higher the saturation, the brighter and purer the color; the lower the saturation, the darker the color and the closer it is to gray. The saturation value range is usually 0%-100%, 0% means completely gray (no color), and 100% means a fully saturated color.

[0044] B (Brightness) stands for brightness, also known as brightness, which is used to measure the brightness of a color. The higher the brightness, the brighter the color and the closer it is to white; the lower the brightness, the darker the color and the closer it is to black. Its value range is also 0%-100%, 0% is black and 100% is white. This color mode is widely used in image editing, software design and other fields because it is more in line with the way humans describe their intuitive feelings about color.

[0045] Real-time blur technology is a technology used in digital image processing, graphic design, user interface design, and video processing. For the spatial system design of software systems, real-time blur technology can be used to create visual hierarchy. 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 display content of the menu itself, providing a modern and beautiful 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 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 in image editing and synthesis. It combines the characteristics of Multiply and Screen modes, and changes the visual effect of the image by blending the pixels of one layer with the pixels of another layer. In Overlay mode, the contrast of the image will increase or decrease, depending on the brightness of the base color. When the base color is brighter, the blended color will be covered; when the base color is darker, the blended color will be darker. This mode is often used to enhance the contrast and details of the image without causing color level overflow, thereby maintaining the details of the image. In addition, by adjusting the transparency and intensity of the blended color, the 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 blending 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 is reflected and refracted on the surface of different media. When Without Fresnel rendering is turned on, the real effect is not considered during the rendering process, and limited conditions or preset conditions are used to simplify the calculation and rendering of refracted and reflected light.

[0052] Filters are usually considered a special type of layer in Photoshop. Filters can be applied to layers to achieve different visual effects through the layer's blending mode. For example, filters can be mixed like paints, and a third color can be mixed when layers overlap. 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 refers to setting 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 usually gives people a cooler, high-end, and calmer feeling. 2) Reduce blue light: Dark mode can reduce the blue light emitted by the screen, which helps 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 means setting 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 reading experience of traditional paper, and looks brighter, fresher and simpler. 2) Conform to 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, and reading is more comfortable and natural. 3) Color expression: Light background can better present the color 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 are beginning 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, and the real-time blurring technology generates a blurred layer 15, and superimposes the blurred layer 15 on the background layer 14 for display, so as to achieve a 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 effect on the interface element, and this technology is particularly common in the operating system interface of smart phones and tablet devices.

[0058] The earliest real-time blur technology is to achieve a real-time blur visual effect by superimposing a color filter with transparency weight on the background layer of the interface element. For example, when using the mainstream HSB color mode for color adjustment, assuming that the background layer is pure red (H=0, S=100, B=100), superimpose a gray transparent layer with a transparency weight of 0.6 and a brightness of 60. The transparency weight will affect the final color mixing result. However, there are some problems with the real-time blur technology with only transparency weight: 1) Brightness convergence: Since the brightness of gray is low (B=60), the brightness of the background layer will decrease after superimposition, making the final brightness closer to the brightness level of gray. The brightness will gradually approach gray as the transparency weight changes. 2) Saturation convergence: Since gray itself has a low saturation (S is close to 0), the saturation of the background layer will also be suppressed after superposition, gradually approaching the decolorization effect, that is, the overall color will appear desaturated, reducing the contrast. For example, with an alpha weight of 0.6, the resulting color will tend toward gray in both lightness and saturation, which will cause the color to fluctuate around B=70, producing a softer, low-contrast tone.

[0059] In the related art, in order to improve the visual effect, a blur effect is added after the transparency weight to process the background, so that the background becomes blurred. That is, a blur layer with transparency weight and blur parameter is added on the background layer to achieve a real-time blurred visual effect, wherein the brightness of the blur layer is set by the device system, the hue of the blur 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 blur layer is determined based on the saturation of the background layer of the interface element and the Gaussian blur algorithm. However, there are also some problems with the real-time blur technology with only two parameters, transparency weight and blur value: 1) Brightness problem of light-colored blur layer: When the background blur is added on the light-colored transparent layer, the brightness of the obtained light-colored blur layer is too high, causing the color to look too pale or bright white. 2) Saturation problem of dark-colored blur layer: When the background blur is added on the dark-colored transparent layer, the color saturation of the obtained dark-colored blur layer is too low, resulting in a graying phenomenon, which affects the purity of the overall color.

[0060] It can be seen that in the related art, although the above-mentioned blurred layer superimposed on the background layer can achieve a certain degree of real-time blurring effect, in the light color 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 the dark color 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] A method for displaying interface elements provided by an embodiment of the present application is described in detail below 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 practical 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, which are not limited in the embodiments of the present application.

[0064] Figure 2 is one of the flow charts of a method for displaying an interface element 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 a display mode of the electronic device; when the display mode is a light color mode, the brightness algorithm is a color reduction mode algorithm; when the display mode is a dark color mode, the brightness algorithm is an overlay mode algorithm.

[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 a screen of an electronic device, wherein the blurred layer of the interface element is used to be superimposed on a 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 the present application, interface elements refer to a series of elements contained in the software or system interface that can meet the interaction needs, and these elements are intended to meet the interaction needs of users. Interface elements generally include the following types: text, navigation bar, menu, button, form, picture, icon, scroll bar, pager, pop-up window, etc.

[0068] Taking into account different display modes, the display effects and display requirements of real-time blur are different. In the 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 peak brightness contrast can be weakened, and at the same time, the clarity of the bright area on the foreground layer can be 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, 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 the dark mode, when the display mode of the electronic device is the 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 both enhance the detail performance of the strong dark part of the background layer and 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 blurred 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 an embodiment of the present application, after the blurred layer is drawn, the blurred layer is superimposed on the background layer of the interface element for display, so as to achieve a visual effect of blurring the background layer in real time, making the interface element more visible and focused.

[0077] It can be seen from the above embodiments that in this embodiment, 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 an algorithm for a color fading mode; and when the display mode is a dark color mode, the brightness algorithm is an algorithm for an overlay mode.

[0078] 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 under different color and depth conditions, and achieve a more transparent display effect, thereby improving the visibility of the interface elements and the natural blurring effect of the background layer of the interface elements.

[0079] In some other embodiments provided in the present application, Figure 2 Based on the embodiment shown, Figure 3 As shown, the above step 202 may include the following steps: step 301, step 302 and step 303;

[0080] In step 301, the target brightness of the blurred 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 a brightness algorithm.

[0081] In an embodiment of the present application, when real-time blur processing is required, the foreground layer of the interface element and the background layer of the interface element can be acquired in real time from the image frame or screenshot. For example, the foreground layer and the background layer of the interface element displayed on the screen of the electronic device are acquired in real time on a one-to-one basis, wherein the image frame is the display frame of the UI interface running on the system, and the screenshot 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] After that, the foreground layer and background layer obtained from the screenshot are processed and sampled according to the preset sampling rules, which may include forming a grid at a specific dp interval horizontally and vertically. The color information (such as RGB value or HSB value) and image shape information of the pixel points are extracted from the grid points. These sampling data will be used for subsequent blur calculation 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 a 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, and N is the number of sample points in the pixel neighborhood. In addition, hue is a circular value (usually expressed in the range of 0° to 360° or 0 to 1), and linear averaging is prone to problems at the circular boundary (for example, the average of 359° and 1° should not be 180° but should be close to 0°). In order to correctly synthesize hue, the original algorithm needs to first convert the hue value into a vector, average it, and then convert 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 to 1 is used, it needs to be converted to angle or calculated in radians first:

[0088] 1) Set 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 on the unit circle (x i ,y i ):

[0093] Use formula (3) to calculate x 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] Use formula (5) to calculate x i The weighted average value X of 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] Use formula (7) to calculate h 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, H is calculated using formula (9) final ; if h final Using 0 to 1 normalization, H is calculated using formula (10) final ; Among them, H final The initial hue of the blurred layer.

[0107]

[0108]

[0109] In the 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 the 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 calculation process of the initial saturation of the blurred layer includes the following steps:

[0113] 1) Saturation is a scalar (range 0 to 1), which is the saturation S of each pixel in the background layer.i Take a weighted average:

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

[0115]

[0116] 2) Under the normalized weight condition (Σ 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 the light color mode, lowering the saturation under high brightness conditions to prevent color distortion caused by over-saturation; increasing the saturation under low brightness conditions to maintain the richness of colors 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 the 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 too saturated and dazzling, thereby avoiding visual fatigue, and being able to 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 as to obtain the layer rendering parameters of the blurred layer with a more transparent overall visual effect.

[0120] In some other embodiments provided in the present application, Figure 3 Based on 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 reduction 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 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 algorithm of the color dodge mode; when 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 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.

[0122] Exemplarily, the first brightness threshold is 100. 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. First, according to formula (12), the initial brightness B3 of the pixel in the blurred layer is calculated.

[0123]

[0124] After the initial brightness B3 is calculated, the size relationship between B3 and the first brightness threshold is compared, and the target brightness B3′ of the pixel point is determined based on the size relationship. Specifically, if B3>100, B3′=100; otherwise B3′=B3.

[0125] In an embodiment of the present application, the above-mentioned initial brightness calculation and adjustment mechanism for the blurred layer is adopted to limit the maximum brightness to the first brightness threshold when the brightness is high to avoid a glare effect; the brightness is appropriately enhanced when the brightness is low to make the details of the dark part more obvious, thereby preventing the brightness from being too high or too low, avoiding the loss and distortion of bright and dark information, optimizing the overall brightness range of the image, and ensuring the transparency and layering of the visual effect.

[0126] In step 402, the hue offset is determined based on the target brightness of the blurred layer, the first brightness threshold, the first control constant and the 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; the target hue of the blurred layer is determined based on the initial hue and the hue offset of the blurred layer.

[0127] Considering that the hue of the real-time blurred layer in light color mode is usually not directly affected by the brightness, the hue usually remains consistent with the original image without changing the hue. However, in certain circumstances, such as when the brightness is very high, the contrast is affected, such as when the blue background and the blue control have the same hue; the hue contrast between the white background and the yellow control is weak, etc., which will affect recognition. In an embodiment of the present application, in order to ensure the consistency of the visual effect and maintain recognition and contrast, a slight offset can be made based on the initial hue of the blurred layer to obtain the target hue of the blurred 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, Figure 5 As shown, the HSB color model is a color wheel and a color column. The hue itself can be regarded as an angle on the color wheel (0 to 360° or 0 to 1 mapped into a circle). γ 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 embodiment of the present application, the adjustment of saturation is related to the change of brightness, especially when color superposition is introduced. According to the change of brightness, the saturation is adjusted as follows: when the brightness becomes higher (brighter), the saturation usually needs to be reduced to avoid color distortion caused by over-saturation; when the brightness becomes lower (darker), the saturation can be moderately increased to maintain the richness of the color.

[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, 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 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 superimposed on the background layer 60 are respectively shown. 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 fading 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 of too high or too low brightness 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 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, improving the visual experience and aesthetics of the user interface.

[0139] In some other embodiments provided in the present application, Figure 3 Based on the embodiment shown, when the display mode of the electronic device is a dark mode, the brightness algorithm is an algorithm of the 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 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 the second brightness threshold, the target brightness of the blurred layer is determined 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 strong light algorithm of the overlay mode.

[0141] In the 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, so as to avoid blindly suppressing the dark color when processing dark colors and affecting the information peak, thereby 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, which brings 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] Exemplarily, 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, the initial brightness B3 of the pixel in the blurred layer is calculated using formula (17). This means that the foreground brightness is 50 or lower. At this time, the brightness of the mixed foreground and background needs to be increased 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 formula (18) is used to calculate the initial brightness B3 of the pixel in the blurred layer. This means that the foreground brightness exceeds 50, which is used to reduce the brightness after mixing to prevent the overly bright part from being too abrupt visually. This reduction effect is also dynamically adjusted based on the background brightness B1.

[0145]

[0146] After the initial brightness B3 is calculated, the algorithm of the Soft Light mode or the 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 the Soft Light mode is used, that is, formula (19) is used to calculate the target brightness B3′. This formula can be used in low-brightness conditions to gently increase the brightness and the visibility of details without being too glaring.

[0147]

[0148] When B3>50, the algorithm of Hard Light mode is used, that is, formula (20) is used to calculate the target brightness B3′. This formula is used in high brightness conditions and can improve the contrast, making the bright area more prominent, thereby enhancing the visual layering.

[0149]

[0150] In the embodiment of the present application, when the display mode of the electronic device is dark mode, the algorithm of the Soft Light mode is used to achieve a soft brightness boost in low-brightness areas, increase the delicacy and layering of the image, and avoid excessive glare or distortion of the visual effect, so that the image appears softer in low-brightness conditions, enhancing visual comfort and detail performance. The algorithm of the Hard Light mode is used to enhance the contrast in high-brightness areas, making the bright parts more prominent and the dark parts deeper, thereby providing more vivid colors and depth visually, and being able to dynamically choose to darken or brighten the foreground layer to ensure that the interface can achieve the best visual effect under different lighting conditions.

[0151] In step 702, the hue offset is determined based on the target brightness of the blurred layer, the brightness of the foreground layer of the interface element and the 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; the target hue of the blurred layer is determined based on the initial hue of the blurred layer and the hue offset.

[0152] Considering that the hue of the real-time blurred layer in dark mode is usually not directly affected by the brightness, the hue usually remains consistent with the original image without changing the hue. However, in certain circumstances, such as when the brightness is very low, which affects the contrast, such as when the black background has the same hue as the black or gray control, it will affect recognition. In an embodiment of the present application, in order to ensure that the visual effect does not have the problem of color interruption, a slight offset can be made based on the initial hue of the blurred layer to obtain the target hue of the blurred layer.

[0153] For example, the target brightness of the blurred layer is recorded as B3′, the brightness of the foreground layer is recorded as B2, and the third control constant is recorded as k H , the initial hue of the blurred layer is recorded as H, and the hue shift ΔH is calculated using formula (21). The target hue H′ of the blurred layer is calculated using formula (22).

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

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

[0156] Among them, 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; and 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 according to the change in brightness: when the algorithm of the Soft Light mode 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. When the algorithm of the Hard Light mode 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 too saturated or dazzling.

[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. 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. By 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, 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, in the above Figure 2 , Figure 3 , Figure 4 or Figure 7 Based on any of the embodiments shown, after the above step 204, as Fig. 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 posture change 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 a gyroscope, an accelerometer and other positioning sensors of an 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 an initial position (usually in a vertical direction), it is determined that the posture of the electronic device has changed.

[0169] In the embodiment of the present application, the current moving distance of the electronic device can be determined based on the measurement data of the 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 Fig.10 As shown, visual effect 1000 is shown when the Without Fresnel rendering mode is turned off, and 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 blur layer, so that the real-time blur effect changes adaptively with the position change of the electronic device, thereby improving the visual effect of the real-time blur.

[0174] Taking into account 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 according to 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% for each 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 according to the target brightness and the brightness adjustment amount.

[0180] Exemplarily, 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] It can be seen that in the embodiment of the present application, when the electronic device is tilted clockwise, the brightness of the blurred layer is increased to simulate that the light is irradiated more directly onto 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 that the incident angle of the light increases, the illumination weakens, and the highlight intensity is reduced, 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 moving 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 according to 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, 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 based on 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 using formula (28) to ensure that S″ is between [0%, 100%].

[0190] S″=S′+ΔS (28)

[0191] It can be seen that in the embodiment of the present application, when the electronic device moves, if the brightness of the blurred layer increases, the saturation of the blurred layer is increased to make the brighter parts more vivid; if the brightness of the blurred layer decreases, the saturation of the blurred layer is reduced to make the dark areas softer, thereby improving the visual effect of real-time blur.

[0192] Taking into account that the hue of the blurred layer is related to the tilt angle of the electronic device, in an embodiment of the present application, the hue of the blurred 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 in hue is related to the sinusoidal function of the device tilt angle.

[0193] In some embodiments, when the posture information includes the current tilt angle, the above step 902 may 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 value and the preset maximum hue offset; wherein the hue adjustment amount is proportional to the sine value of the current tilt angle.

[0195] For example, the current tilt angle is recorded as θ, and the preset maximum tilt angle is recorded as θ max (such as 90°), the preset maximum hue offset is recorded as ΔH max , using formula (29), calculate the hue adjustment amount ΔH.

[0196]

[0197] In step 9026, the adjusted hue is determined based on 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 using formula (30) to ensure that it is between [0°, 360°).

[0199] H″=H′+ΔH (30)

[0200] It can be seen that in the embodiment of the present application, the maximum hue offset can be pre-set, for example, ±10°, to prevent distortion caused by excessive hue change. In addition, setting the hue change to be proportional to the sine value of the tilt angle can simulate the color change caused by light refraction, thereby improving the real-time blurred visual effect.

[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. The 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 reality 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, simulating the direction of the light source and environmental changes to achieve a more accurate visual effect display.

[0206] In some other embodiments provided in 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 the flexible calling of different environmental conditions during blur processing and rendering processing, and to 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 speed. It is used to control the decay speed of the weight or convolution kernel during the blurring process. The decay speed determines how fast the influence of farther pixels decreases relative to the center pixel when the pixel neighborhood is weighted averaged. By adjusting the σ parameter, a balance can be achieved between detail clarity and smoothness.

[0208] The α parameter is usually used to control the balance and enhancement between brightness and hue. When the ambient light is strong and the color temperature is high, increasing the α parameter can ensure that reasonable color reproduction and contrast can be maintained in light-colored and high-brightness scenes. In short, the higher the α parameter value, the greater the impact on the balance of brightness and hue.

[0209] The β parameter is usually related to saturation and is used to enhance subtle color levels in low light, low contrast or low saturation environments. When in a darker indoor environment, watching dark-toned pictures or low-saturation content, appropriately increasing the β parameter helps preserve delicate color transitions and layers, thereby achieving a more comfortable visual effect in blur processing.

[0210] σ θ The parameter is used to control the attenuation strength of hue in blur processing. Hue is a circular data, and simple linear smoothing may cause color jumps. θ The σ parameter can achieve a softer transition in areas with significant color differences (such as between a fast-moving foreground and a stationary background); in scenes that require high color recognition, reducing σ θ Parameters can reduce unwanted 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 a smoother transition in areas with significant depth differences, and naturally blend the foreground and background through moderate blur; reduce σ d The larger parameter preserves more depth and makes the boundary 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 the screen).

[0215] 3) According to the equipment characteristics and environmental data, initial reference values ​​are set for 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) Adaptive parameter calculation: adjust the σ parameter according to the refresh rate of the display device and the required image detail level; 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, 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 high-brightness scenes; if it is in a dim indoor environment, increase the value of the β parameter to make the low-saturation area more delicate and soft in the blur 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 to make the blurring process not to over-ablate the details.

[0217] 5) Real-time rendering and iterative optimization: Re-evaluate the current environment and device status regularly (e.g. every few frames or triggered by user interaction). If real-time rendering performance indicators (e.g. a significant drop in frame rate) or user-side feedback data (e.g. user reports of color distortion issues) indicate that the current parameters are not suitable, the feedback records the above description. After updating and re-adapting the parameters, it can be automatically fine-tuned for specific models. After running for a certain period of time, feedback is collected. This is until a better balance between rendering effect and performance is achieved.

[0218] 6) Data storage and parameter persistence: The finalized parameter solution is stored in the local cache so that it can be quickly loaded the next time the same device or the same usage scenario is started, reducing the time for re-adjustment. If the system allows, data synchronization can be performed through the cloud parameter library, and the user's preferences or the best device parameters can be reported to the server, or directly through the device switching application and other device switching data packet transmission methods, following the user to speed up the parameter selection process on different devices and similar environments.

[0219] It can be seen that in the embodiments 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 display method of the interface element provided in the embodiment of the present application can be executed by a display device of the interface element. In the embodiment of the present application, the display device of the interface element executing the display method of the interface element is taken as an example to illustrate the display device of the interface element provided in the embodiment of the present application.

[0221] Fig.11 is a structural block diagram of a display device for an interface element provided by some embodiments of the present application, such as Fig.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 determination module 1101 is used to determine a brightness algorithm according to a display mode of the electronic device;

[0223] The second determination module 1102 is used 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 determination module 1103 is used to determine the blurred layer according to the layer rendering parameters;

[0225] The first display module 1104 is used to update the 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] It can be seen from the above embodiments that in this embodiment, 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 an algorithm for a color fading mode; and when the display mode is a dark color mode, the brightness algorithm is an algorithm for an overlay mode.

[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 thus improve the real-time blur visual effect of the interface elements.

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

[0230] A first determination submodule, used to determine 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;

[0231] A first correction submodule, used 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 the 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 fading mode;

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

[0237] The third determination unit is used 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 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;

[0240] The fifth determining unit is used to determine the 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 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 variation range of saturation, and the saturation adjustment factor is negatively correlated with the target brightness;

[0243] The seventh determining unit is used to determine the 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 determination 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 according to a target brightness of the blurred layer, a brightness of a foreground layer of the interface element, and a third control constant; wherein the third control constant is used to control a change range of the hue, and the hue shift is positively correlated with the target brightness;

[0251] The twelfth determining unit is used to determine the 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 is used to determine 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 variation range of saturation, and the saturation adjustment factor is negatively correlated with the target brightness;

[0254] A fourteenth determining unit is used to determine the 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 moving distance;

[0257] An adjustment module, used for adjusting the layer rendering parameters according to the posture change information;

[0258] An update module, used for updating 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 determination submodule, configured to determine a brightness adjustment amount according to the current tilt angle, the initial tilt angle and a fifth control constant; wherein the fifth control constant is used to control a speed of change of brightness 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;

[0263] The third determination submodule is used 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 according to 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, 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;

[0267] The fifth determination submodule is used 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 determination submodule, configured to determine 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;

[0271] The seventh determination submodule is used 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 it can be other devices other than the terminal. Exemplarily, the electronic device can be a mobile phone, a tablet computer, a laptop computer, a PDA, a vehicle-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, a super 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 may be a device having an operating system. The operating system may 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 Fig. 9 To avoid repetition, the various processes implemented in any of the method embodiments shown in the figure will not be described again here.

[0275] Alternatively, if Fig.12 As shown, an embodiment of the present application further provides an electronic device 1200, including a processor 1201 and a memory 1202, wherein the memory 1202 stores programs or instructions that can be executed on the processor 1201, and when the program or instructions are 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, they are not described 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] Fig.13 It is a schematic diagram of the hardware structure of an electronic device implementing various embodiments of the present application.

[0278] The electronic device 1300 includes but is not limited to: 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 and other components.

[0279] Those skilled in the art will appreciate that the electronic device 1300 may also include a power source (such as a battery) for supplying power to each component, and the power source may be logically connected to the processor 1310 through a power management system, thereby implementing functions such as managing charging, discharging, and power consumption management through the power management system. Fig.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 described in detail here.

[0280] In some embodiments, the processor 1310 is configured to determine a brightness algorithm according to a display mode of the electronic device; determine layer rendering parameters according to the brightness algorithm; the layer rendering parameters include a target brightness, a target hue, and a target saturation; and determine a blurred layer according to 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 color mode, the brightness algorithm is an algorithm of a color fading mode; when the display mode is a dark color 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 thus improve the real-time blur visual effect of the interface elements.

[0283] Optionally, as an embodiment, the processor 1310 is specifically used to determine 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; according to the target brightness of the blurred layer, correct the initial hue 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; according to the target brightness of the blurred layer, correct the initial saturation 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.

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

[0285] Processor 1310 is specifically used to determine 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, the first brightness threshold is determined 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.

[0286] 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 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; and the target hue of the blurred layer is determined based on the initial hue of the blurred layer and the hue offset.

[0287] 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 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.

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

[0289] Processor 1310 is specifically used to determine 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 the second brightness threshold, determine the 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, 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.

[0290] Optionally, as an embodiment, the processor 1310 is specifically used to determine the hue offset 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 offset is positively correlated with the target brightness; and the target hue of the blurred layer is determined according to 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: a current tilt angle, a 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 an 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 the saturation adjustment amount according to 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, 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; and the adjusted saturation is determined according to 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 the embodiment of the present application, the input unit 1304 may include a graphics processor (Graphics Processing Unit, GPU) 13041 and a microphone 13042, and the graphics processor 13041 processes the image data of the static picture or video obtained by the image capture device (such as a camera) in the video capture mode or the 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 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 a joystick, 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, an application program or instructions required for at least one function (such as a sound playback function, an image playback function, etc.), 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. The volatile memory may be a random access memory (RAM), a static random access memory (SRAM), a dynamic random access memory (DRAM), a synchronous dynamic random access memory (SDRAM), a double data rate synchronous dynamic random access memory (DDRSDRAM), an enhanced synchronous dynamic random access memory (ESDRAM), a synchronous link dynamic random access memory (SLDRAM) and a direct memory 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] The processor 1310 may include one or more processing units; optionally, the processor 1310 integrates an application processor and a modem processor, wherein the application processor mainly processes operations related to an operating system, a user interface, and application programs, and the modem processor mainly processes wireless communication signals, such as a baseband processor. It is understandable that the modem processor may not be integrated into the 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 above-mentioned interface element display method embodiment 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 display method embodiment 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 variant thereof are intended to cover non-exclusive inclusion, so that the process, method, article or device including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise one..." do not exclude the presence of other identical elements in the process, method, article or device including the element. In addition, it should be pointed out 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 reverse 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 a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, 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, a disk, or an optical disk), and includes a number of instructions for a terminal (which can be a mobile phone, a computer, a server, or a 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 the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.

Claims

1. A method for displaying an interface element, characterized in that: The method comprises: Determining a brightness algorithm according to a display mode of the electronic device; Determine 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; Using the blurred layer to update display interface elements; 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 step of determining the layer rendering parameters according to the brightness algorithm includes: 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; According to the target brightness of the blurred layer, the initial hue of the blurred layer is corrected 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; 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 step of 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 comprises: 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 a 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: Determine 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; The 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 variation range of saturation, 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 step of 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 comprises: 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 the second brightness threshold, determining the 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 strong 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; The 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: Determine 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 variation range of saturation, 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 information includes a current tilt angle; The adjusting the layer rendering parameters according to the posture change information includes: Determine a brightness adjustment amount according to 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; 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; The 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 information includes the current moving distance; The adjusting the layer rendering parameters according to the posture change information includes: Determine a saturation adjustment amount according to 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, 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; The 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 information includes a 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 determination module, configured to determine a brightness algorithm according to a display mode of the electronic device; A second determination module is used 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, used to determine a fuzzy layer according to the layer rendering parameters; A first display module, used 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 as described in 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