Display method and device, equipment, storage medium and product

Abstract

The invention provides a display method and device, equipment, a storage medium and a product. The method comprises the following steps: determining at least one control to be displayed, and generating a visual effect of each control; taking display content of at least one currently displayed layer as a reference image, and traversing pixels in the reference image to obtain pixel values of the pixels; wherein the reference image comprises a display background of at least one control; determining a reference pixel from the reference image based on a to-be-displayed display position of each control in the display interface, and adjusting a visual effect of the control based on a pixel value of the reference pixel; and generating and displaying a graphical user interface based on the adjusted visual effect of each control. According to the embodiment, the control can be more matched with the background, and the visual consistency is enhanced.

Description

Technical Field

[0001] This disclosure relates to the field of computer software technology, and in particular to a display method, apparatus, electronic device, computer-readable storage medium, and computer program product. Background Technology

[0002] A graphical user interface (GUI) is a user interface related to computer operation that is displayed graphically. It can be interface elements such as windows and controls displayed on the screen of an electronic device. Controls can include visual interface elements such as icons, buttons, menus, tabs, text boxes, dialog boxes, status bars, and navigation bars.

[0003] Currently, most electronic device manufacturers use static and fixed display methods to display controls in graphical user interfaces. This display method cannot meet users' growing demand for realism. Therefore, the display effect of controls in graphical user interfaces needs further optimization. Summary of the Invention

[0004] To overcome the problems existing in the related technologies, this disclosure provides a display method, apparatus, electronic device, computer-readable storage medium, and computer program product.

[0005] According to a first aspect of the present disclosure, a display method is provided, comprising:

[0006] Identify at least one control to be displayed and generate visual effects for each of the controls;

[0007] Using the display content of at least one currently displayed layer as a reference image, the pixel values ​​of the pixels in the reference image are obtained by traversing the pixels in the reference image; wherein, the reference image includes the display background of the at least one control;

[0008] Based on the display position of each control in the display interface, a reference pixel is determined from the reference image, and the visual effect of the control is adjusted based on the pixel value of the reference pixel;

[0009] Based on the adjusted visual effects of each of the controls, a graphical user interface is generated and displayed.

[0010] According to a second aspect of the present disclosure, a display device is provided, the device comprising:

[0011] A visual effects generation module is used to determine at least one control to be displayed and generate visual effects for each of the controls;

[0012] The reference information acquisition module is used to take the display content of at least one currently displayed layer as a reference image, and traverse the pixels in the reference image to obtain the pixel value of the pixel; wherein, the reference image includes the display background of the at least one control;

[0013] A visual effect adjustment module is used to determine reference pixels from the reference image based on the display position of each control in the display interface, and adjust the visual effect of the control based on the pixel value of the reference pixels.

[0014] The graphical user interface generation and display module is used to generate and display a graphical user interface based on the adjusted visual effects of each of the controls.

[0015] According to a third aspect of the present disclosure, an electronic device is provided, comprising:

[0016] processor;

[0017] A memory for storing computer programs that can be executed by the processor;

[0018] Wherein, when the processor executes the program, it implements the steps of the method described in the first aspect.

[0019] According to a fourth aspect of the present disclosure, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the steps of the method described in the first aspect.

[0020] According to a fifth aspect of the present disclosure, a computer program product is provided, including a computer program / instructions that, when executed by a processor, implement the steps of the method described in the first aspect.

[0021] The technical solutions provided by the embodiments of this disclosure may include the following beneficial effects:

[0022] In this embodiment of the disclosure, after determining at least one control to be displayed and generating the visual effects of each control, the display content of at least one currently displayed layer can be used as a reference image. The pixels in the reference image are traversed to obtain the pixel values ​​of the pixels. The reference image includes the display background of the control to be displayed. Then, based on the display position of each control in the display interface, reference pixels are determined from the reference image, and the visual effects of the control are adjusted based on the pixel values ​​of the reference pixels. Dynamically adjusting the visual effects of the control can make the control and the background more compatible, enhance visual consistency, and avoid the control appearing abrupt due to different backgrounds. Finally, based on the adjusted visual effects of each control, a graphical user interface is generated and displayed. The graphical user interface generated based on the adjusted visual effects of the control will better meet the user's visual expectations and blend better with the background and overall design, avoiding visual interference caused by the incoordination between the background and the control.

[0023] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and are not intended to limit this disclosure. Attached Figure Description

[0024] Figure 1 This is a schematic diagram illustrating a graphical user interface according to an exemplary embodiment of the present disclosure;

[0025] Figure 2 This is a flowchart illustrating a display method according to an exemplary embodiment of the present disclosure;

[0026] Figure 3 This is a schematic diagram illustrating another graphical user interface according to an exemplary embodiment of the present disclosure;

[0027] Figure 4 This is a schematic diagram showing an enlarged shadow effect according to an exemplary embodiment of the present disclosure;

[0028] Figure 5 This is a schematic diagram of a scaled-down reference image shown according to an exemplary embodiment of the present disclosure;

[0029] Figure 6 This is a schematic diagram illustrating a control partition according to an exemplary embodiment of the present disclosure;

[0030] Figure 7 This is a structural block diagram of a display device according to an exemplary embodiment of the present disclosure;

[0031] Figure 8 This disclosure is a structural block diagram of an electronic device according to an exemplary embodiment. Detailed Implementation

[0032] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numerals in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this disclosure. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this disclosure as detailed in the appended claims.

[0033] The terminology used in this disclosure is for the purpose of describing particular embodiments only and is not intended to be limiting of the disclosure. The singular forms “a,” “the,” and “the” as used in this disclosure and the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used herein refers to and includes any and all possible combinations of one or more of the associated listed items.

[0034] It should be understood that although the terms first, second, third, etc., may be used in this disclosure to describe various information, such information should not be limited to these terms. These terms are used only to distinguish information of the same type from one another. For example, without departing from the scope of this disclosure, first information may also be referred to as second information, and similarly, second information may also be referred to as first information. Depending on the context, the word "if" as used herein may be interpreted as "when," "when," or "in response to determination."

[0035] To further optimize the display effect of controls in a graphical user interface, this disclosure presents a display method that analyzes the pixel values ​​of the background and adjusts the visual effect of the controls accordingly. This allows the controls displayed in the graphical user interface to dynamically adapt to different backgrounds, achieving a harmonious interface effect regardless of background changes, thus avoiding visual interference caused by inconsistencies between the background and the controls.

[0036] The display method of this disclosure can be applied to electronic devices, including a display screen for displaying a graphical user interface. Electronic devices include, but are not limited to, smartphones / mobile phones, tablet computers, personal digital assistants (PDAs), laptop computers, desktop computers, media content players, video game consoles / systems, virtual reality systems, augmented reality systems, wearable devices (e.g., watches, glasses, gloves, headwear (e.g., hats, helmets, virtual reality headsets, augmented reality headsets, head-mounted devices (HMDs), headbands), pendants, armbands, leg loops, shoes, vests), remote controls, or any other type of device. See, for example, [link to relevant documentation]. Figure 1 The diagram shows a mobile phone displaying a graphical user interface, which includes at least one control.

[0037] like Figure 2 As shown, Figure 2 This is a flowchart illustrating a display method according to an exemplary embodiment of the present disclosure. The method can be performed by an electronic device, and the method includes:

[0038] In S201, at least one control to be displayed is determined, and the visual effects for each control are generated.

[0039] In this step, when a new graphical user interface (GUI) needs to be displayed, the electronic device first determines at least one control that needs to be displayed in the new GUI, such as a button, text box, or image, and generates preliminary visual effects for each control. At this stage, the visual effects are static and not adjusted based on background images or other dynamic information. During this phase, the visual effects of the controls remain consistent with the initial design intent, ensuring the basic aesthetics of the UI (User Interface).

[0040] For example, when the interface is updated or switched, electronic devices need to determine which controls will be displayed based on specific actions. The following are some possible application scenarios illustrating when it is necessary to determine at least one control to be displayed:

[0041] In a first possible application scenario, the electronic device has an interface refresh function, which can determine at least one control to be displayed in the next graphical user interface in response to a refresh command. During the refresh process, the electronic device will determine which controls need to be reloaded or updated, such as text, images, buttons, etc., that need to be displayed based on the latest data, using the graphical user interface display method provided in this embodiment.

[0042] In the second possible application scenario, when a user performs an interface switching operation (such as swiping, menu selection, button click, etc.), the electronic device needs to determine the new controls based on this interface switching operation and display them on the new graphical user interface to be shown. For example, please refer to [link to example]. Figure 3 When a user swipes across the screen of an electronic device to switch to the next page of application icons, the device needs to determine the application icons, folders, search bars, and other controls to be displayed on the next screen based on the user's action. In another example, within the graphical user interface displayed on the electronic device, when a user clicks on an option to enter a submenu, the device needs to determine the controls to be displayed on the next page, such as checkboxes, input boxes, and switches, and adjust the visual effects of these controls according to the background or theme.

[0043] In the third possible application scenario, when a user resizes a window or the device resolution changes, the electronic device needs to redetermine which controls need to be displayed and how to rearrange them. For example, when an electronic device rotates from portrait to landscape mode, the interface layout changes, and it is necessary to determine which controls need to be rearranged and which controls may no longer be displayed (such as buttons or images adapted to different layouts).

[0044] It is understood that there may be other application scenarios, and the embodiments disclosed herein are not limited thereto.

[0045] For example, after determining at least one control to be displayed, the visual effect of each control can be generated based on the visual effect parameters corresponding to each control and the display size of each control. For example, the visual effect parameters corresponding to each control include at least one of the following: the display radius of the visual effect, color, and transparency, but are not limited to these.

[0046] For example, the visual effects of a control include at least one of the following: shadow effect, light and shadow effect, blur effect, and transparency effect, but are not limited to these. (1) The shadow effect refers to adding a soft shadow to the edge or bottom of the control to enhance the sense of three-dimensionality and depth. This effect makes the control look like it is floating on the background, thereby guiding the user's attention; for example, see Figure 1 and Figure 3 (1) The text within each control is overlaid with a shadow effect. (2) Light and shadow effects enhance the three-dimensionality of controls by simulating the effect of light sources. This usually involves a combination of highlights and shadows. Highlights show the areas illuminated by light, while shadows show the areas that cannot be reached by light. (3) Blur effects reduce the clarity of controls or background images, making them less distinct. Blur effects can make the distinction between controls and backgrounds more obvious, while creating a soft visual atmosphere. (4) Transparency effects make some or all areas of controls transparent, allowing the content underneath to be seen through the controls. Changes in transparency can convey the status or importance of controls. These visual effects can be used individually or in combination to enhance the aesthetics and usability of the user interface. Reasonable visual effect design can improve the user experience and make the application more user-friendly and attractive.

[0047] In S202, the display content of at least one currently displayed layer is used as a reference image, and the pixel values ​​of the pixels in the reference image are obtained by traversing the pixels in the reference image; wherein, the reference image includes the display background of at least one control.

[0048] In this step, the electronic device takes a screenshot of the graphical user interface currently displayed on its screen to obtain a reference image. The operating system typically provides dedicated APIs (Application Programming Interfaces) for applications to access the current screen content. These APIs can be directly called, allowing applications to obtain screenshots (i.e., the reference image mentioned above). Alternatively, the frame buffer is a memory area that stores the currently rendered frame of the electronic device. By accessing the frame buffer, pixel information displayed on the screen can be directly obtained to generate a screenshot (i.e., the reference image mentioned above). Of course, other methods can also be used to obtain the graphical user interface currently displayed on the electronic device's screen; this disclosure does not impose any limitations on these methods.

[0049] For example, an electronic device can use the display content of at least one layer among all layers currently displayed in the display interface as a reference image, based on the display layer of at least one control to be displayed. The display layer of the at least one control to be displayed is located above the reference image layer; in other words, the display layer of the at least one control to be displayed is located above the reference image layer, meaning the reference image serves as the display background for the at least one control to be displayed.

[0050] Next, the electronic device iterates through every pixel in the reference image, acquiring their pixel values. These pixel values ​​contain key information such as color and brightness, reflecting the characteristics of the current graphical user interface background. By iterating through all pixels, the electronic device gains a comprehensive understanding of the entire interface's background. This step lays the foundation for subsequently adjusting the visual effects of controls based on the background. It's understandable that the electronic device includes a GPU (Graphics Processing Unit), and the process of iterating through all pixels in the reference image to obtain pixel values ​​can be performed by the GPU within the electronic device.

[0051] In S203, reference pixels are determined from the reference image based on the display position of each control in the display interface, and the visual effect of the control is adjusted based on the pixel value of the reference pixel.

[0052] In this step, the electronic device extracts the corresponding reference pixels (i.e., the pixels corresponding to the display position of the control) from the reference image according to the display position of the control on the display interface. Then, based on the pixel values ​​of these reference pixels, the electronic device dynamically adjusts the visual effect of the control. For example, the electronic device can adjust the transparency and brightness of the control based on the color of the reference pixels, or change the shadow effect of the control based on the brightness and darkness of the reference pixels, to enhance the visual sense of three-dimensionality and depth. Dynamically adjusting the visual effect of the control makes the control blend more closely with the background, enhances visual consistency, and prevents the control from appearing abrupt due to different backgrounds.

[0053] For example, for each control, the electronic device can determine the target brightness at the display position of the control based on the pixel value of the reference pixel corresponding to that control. In computer graphics, the brightness of a color is usually calculated using the Y component of the YUV color space, which represents the lightness or darkness of the color. For RGB colors, brightness can be obtained using the luminance function, which can be expressed as: Y = α1*R + α2*G + α3*B, where α1 + α2 + α3 = 1; Y represents brightness, R represents red, G represents green, B represents blue, and α1, α2, and α3 are coefficients corresponding to different color components. Furthermore, the electronic device can adjust the visual effect of the controls according to the target brightness corresponding to each control, so that the adjusted visual effect of the controls is coordinated with the display background of the controls.

[0054] For example, visual effects include shadow effects. After determining the target brightness for each control, electronic devices can adjust the transparency of the shadow effect of the controls according to the target brightness; where target brightness and transparency are inversely related. That is, against a light background, lower shadow transparency can improve the visibility of controls, while against a dark background, higher shadow transparency contributes to visual harmony and natural integration. Against a light (high-brightness) background, to make shadows stand out more, the shadow transparency is usually reduced, i.e., the shadow opacity is increased to make it more obvious. This is because on a high-brightness background, if the shadow transparency is too high, the shadow will not be clear enough and will not stand out. Against a dark (low-brightness) background, the shadow transparency can be increased, even approaching the background color, so that the shadow blends into the background and creates a more natural transition effect. This is because in a low-brightness environment, an overly obvious shadow may appear unnatural or too abrupt. Therefore, as the target brightness increases, the shadow transparency usually decreases, and as the target brightness decreases, the shadow transparency usually increases. This inverse relationship helps shadows achieve appropriate effects against backgrounds of different brightness.

[0055] To give another example, visual effects include lighting and shadow effects. After determining the target brightness for each control, the electronic device can adjust the brightness of the control's lighting and shadow effects according to the target brightness. There is a negative correlation between the target brightness and the brightness of the control's lighting and shadow effects. Specifically, when the background brightness (i.e., the target brightness) is darker, the lighting and shadow effects of the controls can usually be brighter or stronger to improve contrast and enhance the visibility and three-dimensionality of the controls. Conversely, when the background brightness (i.e., the target brightness) is brighter, the lighting and shadow effects of the controls will be weakened, allowing the controls to blend more smoothly into the background and avoid being overly abrupt. This negative correlation helps optimize the visual performance of controls under different backgrounds, ensuring the overall aesthetics and usability of the user interface. For example, when a control is placed against a dark background, its lighting and shadow effects can be brighter to improve contrast, making the control appear three-dimensional and clearly visible; while against a bright background, the lighting and shadow effects can be weakened accordingly, making the overall visual performance of the control more natural and maintaining overall visual balance.

[0056] In S204, a graphical user interface is generated and displayed based on the adjusted visual effects of each control.

[0057] In this step, the electronic device generates the final graphical user interface (GUI) based on the adjusted visual effects of each control and displays it on the screen. This stage integrates the final effects of all controls into a complete GUI and presents it to the user. The GUI generated based on the adjusted visual effects of the controls will better meet the user's visual expectations, blend better with the background and overall design, and avoid visual interference caused by inconsistencies between the background and controls.

[0058] This embodiment analyzes the pixel values ​​of the background and adjusts the visual effects of the controls accordingly, enabling the controls in the graphical user interface to dynamically adapt to different backgrounds. Regardless of background changes, a harmonious interface effect is maintained. Especially in complex backgrounds or dynamic scenes, this automatic adjustment method greatly enhances the user's interactive experience and avoids conflicts between controls and the background.

[0059] To further reduce power consumption and improve efficiency in the graphical user interface generation process, several optimization schemes for the above-mentioned graphical user interface display method are provided below.

[0060] In some embodiments, the generation process (S201) of the visual effects of each control can be optimized. For example, a unified visual effect generation template can be pre-set. This visual effect generation template is used to generate an initial visual effect with a preset size. This visual effect generation template can be reused multiple times, thereby improving the generation efficiency of the visual effects of the control.

[0061] For each control, the electronic device can obtain an initial visual effect generated by a preset visual effect generation template. This initial visual effect has a preset size. Then, based on the proportional relationship between the display size of the control and the preset size, the initial visual effect is scaled to obtain the visual effect for each control. This embodiment uses a preset visual effect generation template, avoiding the calculation process of generating a separate visual effect for each control. The visual effect generation template can be reused multiple times; the electronic device only needs to scale the initial visual effect generated by an existing template to generate visual effects adapted to different control sizes. This greatly reduces the time and resource consumption for visual effect generation. For example, when generating shadow effects for multiple similar buttons, the device can generate an initial visual effect based on the same shadow template, and then scale the shadow according to the size of the button, instead of recalculating the shadow for each button.

[0062] For example, please refer to Figure 4 Taking the shadow effect as an example, the initial visual effect generated by the preset visual effect generation template is an initial shadow effect with a size of 1cm*1cm. Since the display size of the control is 2cm*2cm, the initial shadow effect with a size of 2cm*2cm can be enlarged proportionally to obtain a shadow effect with a size of 2cm*2cm, which is adapted to the display size of the control.

[0063] In one possible implementation, considering that different control types have different visual effect display requirements, a mapping relationship between control types and visual effect parameters can be pre-set. Then, during the generation of the visual effects for each control, the electronic device first obtains the corresponding visual effect parameters for each control from the pre-stored mapping relationship between control types and visual effect parameters, based on the control type of each control. Different control types correspond to different visual effect parameters, which include, but are not limited to, at least one of the following: display radius, color, and transparency. The electronic device then inputs the visual effect parameters corresponding to each control into a preset visual effect generation template to obtain an initial visual effect with a preset size generated by the template. Finally, according to the proportional relationship between the control's display size and the preset size, the initial visual effect is scaled to obtain the visual effect for each control.

[0064] This embodiment takes into account that different types of controls (such as buttons, text boxes, and icons) may require different visual effect parameters (such as shadows, transparency, and halos). By pre-setting the mapping relationship between control types and visual effect parameters, the device can automatically provide exclusive visual effects for different control types, meeting the personalized display needs of controls, so that each control can present the best visual effect in the interface. For example, buttons may need larger shadows and lighting effects to highlight their interactivity, while text boxes may only need slight shadows to maintain simplicity. Through the above mapping relationship, the electronic device can automatically select the most suitable visual effect for each control type, making the overall interface more intuitive and easier to operate.

[0065] Furthermore, the mapping relationship makes the visual effect generation process more modular and automated. Developers no longer need to manually design and configure visual effects for each control; instead, they can set the visual effect parameters for different control types all at once through the mapping relationship. Electronic devices will automatically select the appropriate visual effect and scale it according to the control type. This reduces repetitive work and significantly lowers the workload for development and maintenance. For example, developers only need to set the visual effect parameters, such as shadow size and transparency, for control types like buttons, input boxes, and icons once. In subsequent development and updates, the visual effects for these controls will be automatically generated, reducing the time and effort spent on repetitive design.

[0066] In one possible implementation, considering that different controls may have different display shapes, a single-shape visual effect template may cause stretching and deformation when scaling different controls, affecting the visual presentation of the controls. Therefore, embodiments of this disclosure can pre-set at least two visual effect generation templates, with different visual effect generation templates corresponding to different display shapes. In the process of generating the visual effects for each control, for each control, the electronic device first determines the target visual effect generation template from the pre-set at least two visual effect generation templates based on the control's display shape, then obtains an initial visual effect with a preset size generated by the target visual effect generation template; subsequently, according to the proportional relationship between the control's display size and the preset size, the initial visual effect is scaled to obtain the visual effects for each control.

[0067] This embodiment provides multiple visual effect templates for different control shapes, allowing for the selection of an appropriate template based on the actual display shape of the control. This ensures that no stretching or deformation occurs during scaling, thus guaranteeing the accuracy and naturalness of the visual effect. For example, if button A is circular and button B is rectangular, using the same template to generate a shadow might cause the circular shadow to be stretched into an ellipse after scaling. This embodiment provides different shadow templates for circular and rectangular buttons, ensuring that the shadow maintains its original shape when the buttons are scaled.

[0068] Furthermore, selecting corresponding visual effect templates based on the different shapes of controls ensures that the visual effects match the shapes of the controls, making the entire interface look more aesthetically pleasing and harmonious. The shape characteristics of different controls are preserved, resulting in a more unified and natural visual effect, thereby improving the overall aesthetics and consistency of the user interface. For example, in scenarios where the interface contains circular icons, rectangular buttons, and oval labels simultaneously, appropriate visual effect templates can be selected based on different shapes, ensuring that the shadows, lighting effects, and other visual effects of each control remain natural and beautiful, without distortion or inconsistency due to shape differences.

[0069] In some embodiments, the pixel traversal process of the reference image (S202) can be optimized. The electronic device includes a GPU (Graphics Processing Unit), and the process of traversing all pixels in the reference image to obtain pixel values ​​can be performed by the GPU in the electronic device. When the size of the reference image is large, traversing all pixels in the reference image by the GPU takes a long time. However, considering that the accuracy of determining the background color does not need to be very high, the GPU footprint can be reduced by shrinking the reference image, thereby reducing GPU power consumption.

[0070] For example, after obtaining a reference image, the electronic device can reduce the size of the reference image to minimize performance overhead by directly traversing and calculating pixels in the high-resolution image. It then traverses all pixels in the reduced image to obtain the pixel value of each pixel. This significantly reduces the total number of pixels in the image and the number of pixels that need to be traversed and calculated, thus reducing computational load and GPU burden while ensuring computational efficiency. Furthermore, the electronic device can determine the reference pixels corresponding to the display positions of various controls on the display interface and the reduction ratio of the reference image. By using the reduction ratio, the device can accurately determine the position of the controls in the reduced reference image. This provides a basis for subsequently obtaining the reference pixels corresponding to the control positions from the reduced reference image. The pixel values ​​of the reference pixels can then be accurately extracted from the reduced image, allowing for the rapid acquisition of color or brightness information near the control positions, which can then be used to adjust the visual effects of the controls.

[0071] The performance improvement from downscaling images is significant, especially in high-resolution displays or complex interfaces. Since much of the background in a graphical user interface typically has smooth color transitions, downscaling the image still maintains sufficient reference accuracy and does not affect the adjustment of control lighting and shadows. See, for example... Figure 5The reference image can be reduced by 16 times to obtain a 1 / 16 scaled-down reference image. Since the accuracy of background color sampling does not need to be very high, the reference pixel value (i.e., reference color) at the corresponding position can still be obtained through the 1 / 16 scaled-down reference image. By reducing the number of pixels that need to be traversed, the GPU usage can be effectively reduced.

[0072] In some embodiments, after adjusting the visual effects of the controls, the generation process of the graphical user interface (S204) can be optimized. For example, if there are multiple controls to be displayed, drawing each control individually would lead to frequent calls to drawing operations, increasing processor overhead. Therefore, drawing in groups can effectively improve drawing efficiency and reduce processor usage.

[0073] After obtaining the adjusted visual effects of each control, the electronic device can group multiple controls according to their display positions on the display interface, resulting in at least two drawing groups. Each drawing group includes at least one control. For each drawing group, the controls within that group are merged and drawn based on their adjusted visual effects. This embodiment, through grouped drawing, allows the electronic device to group multiple controls according to their display positions and draw controls belonging to the same drawing group at once, significantly reducing the number of drawing operations. Each drawing operation consumes a certain amount of CPU (Central Processing Unit) resources, especially when processing complex graphics, where the CPU load may become excessive. This embodiment, through grouped drawing, can merge the drawing operations of multiple controls into one, avoiding unnecessary repetitive processing and reducing CPU consumption.

[0074] For example, please refer to Figure 1 as well as Figure 3 Multiple controls are displayed in a row-column layout in a graphical user interface. Understandably, after grouping multiple controls, the CPU in the electronic device sends drawing instructions to the GPU for each drawing group. The GPU then draws the controls within each drawing group based on these instructions. Specifically, the drawing area of ​​each drawing group is the smallest bounding graphic encompassing all controls in that group. In a row-column layout, there may be significant spacing between different controls. If the drawing groups are not properly divided, the GPU may draw large areas containing a lot of blank space, resulting in wasted computing resources. By dividing the controls into drawing groups based on row or column spacing, the smallest bounding graphic of each drawing group can compactly wrap around the controls, thereby reducing unnecessary blank areas being drawn.

[0075] In one possible implementation, please refer to Figure 6 If the row spacing in a row-column layout is greater than the column spacing, controls displayed in the same row are identified as belonging to the same drawing group based on their intended display position on the screen. This effectively reduces the drawing area required for each drawing group, decreases the drawing area, improves GPU drawing efficiency, and reduces the resource consumption of electronic devices. Figure 6 The graphical user interface divides the 11 controls into three drawing groups, which can be drawn in three separate steps. The electronic device merges the controls in the same row based on the adjusted visual effect of the controls belonging to the same row.

[0076] In another possible implementation, if the column spacing in the row-column layout is greater than the row spacing, controls displayed in the same column are identified as belonging to the same drawing group based on their intended display position on the screen. This effectively reduces the area of ​​each drawing partition, decreases the drawing area, improves GPU drawing efficiency, and reduces the resource consumption of the electronic device. The electronic device then merges and draws the controls in the same column based on the adjusted visual effect.

[0077] Row spacing refers to the vertical distance between adjacent controls in the same column (i.e., the space between vertically aligned controls). Column spacing refers to the horizontal distance between adjacent controls in the same row (i.e., the space between horizontally aligned controls). When row spacing is greater than column spacing, controls in the same row are grouped together for drawing, resulting in a smaller drawing area; conversely, when column spacing is greater than row spacing, controls in the same column are grouped together for drawing, resulting in a smaller drawing area.

[0078] In this embodiment, the drawing partitioning method (by row or by column) is adaptively determined based on the relative size of the row spacing and column spacing in the interface layout, ensuring that the drawing range is optimal for each layout form. Partitioning by row when the row spacing is large and by column when the column spacing is large maximizes drawing efficiency and reduces the processing of redundant areas. Based on reasonable grouping, each drawing group only needs to draw the area tightly wrapped by the controls, reducing the GPU's processing requirements for blank areas. Simultaneously, the number of drawing instructions generated by the CPU is also reduced, as each drawing group corresponds to only one drawing instruction, rather than issuing instructions individually to each control. By reducing the drawing range and the number of instructions, the load on the GPU and CPU is significantly reduced, especially in complex interfaces with a large number of controls, which can significantly reduce the performance pressure on electronic devices, extend battery life, and improve the user experience. Furthermore, by reasonably grouping and reducing unnecessary drawing areas, the interface update and refresh speed is significantly improved. For dynamic interfaces or scenarios with high-frequency updates (such as games, animations, and real-time data update interfaces), reducing drawing overhead can make the user interface smoother and provide a more real-time interactive experience.

[0079] Taking an application scenario as an example, suppose we need to generate a graphical user interface, which includes multiple controls (such as buttons, input boxes, pictures, etc.). These controls are arranged in a row and column layout and have shadow effects.

[0080] The electronic device first determines all controls to be displayed in the graphical user interface, including basic information such as the display position, size, and type of each control. Simultaneously, to generate shadow effects, the electronic device pre-loads shadow templates (such as circular and rectangular shadow templates) and applies them to each control. Assuming there is a button control, the electronic device selects a rectangular shadow template from the shadow template library, generates an initial shadow effect with a default size for the button control, and further scales the initial shadow effect based on the size of the button control to obtain the final shadow effect for the button control.

[0081] To adjust the shadow effect, the electronic device obtains the display content of at least one layer currently on display as a reference image, i.e., a screenshot of the current screen. Next, the electronic device will scale down this reference image (e.g., to 1 / 16 of the resolution) and iterate through the pixels in the scaled-down reference image to obtain the color information of each pixel.

[0082] The electronic device extracts the corresponding pixels (i.e., reference pixels) from a scaled-down reference image based on the display position of the control within the display interface. Based on the brightness of these reference pixels, the electronic device dynamically adjusts the control's shadow effect. Generally, when the control is against a dark background, the electronic device increases the transparency of the control's shadow effect to blend naturally with the background; when the control is against a bright background, the electronic device decreases the transparency of the control's shadow effect to highlight the control. The control's shadow effect automatically adjusts according to its background brightness, making the user interface visually more natural and harmonious, thus enhancing the overall user experience.

[0083] Finally, because the graphical user interface has multiple controls displayed in a row-and-column layout, the electronic device groups the controls according to their intended display position. Assuming the row spacing is greater than the column spacing, the device groups controls within the same row into a single drawing group. The CPU then issues drawing instructions for each group, and the GPU draws all controls and their shadows within that group at once. For example, if the graphical user interface has three button controls in the same row, the device treats these three buttons and their shadows as a single drawing group and issues drawing instructions, allowing the GPU to draw all three buttons and their shadows at once, rather than drawing them one by one. Through this efficient partitioning and drawing, the GPU reduces unnecessary blank areas and the number of drawing calls, significantly improving drawing efficiency.

[0084] The various technical features in the above embodiments can be combined arbitrarily, as long as there is no conflict or contradiction between the combinations of features. However, due to space limitations, they are not described one by one. Therefore, the arbitrary combination of various technical features in the above embodiments is also within the scope of this specification.

[0085] Based on the same inventive concept as the above method, such as Figure 7 As shown, Figure 7 This is a structural block diagram of a display device according to an exemplary embodiment of the present disclosure. The device includes:

[0086] The visual effects generation module 701 is used to determine at least one control to be displayed and generate visual effects for each of the controls.

[0087] The reference information acquisition module 702 is used to take the display content of at least one currently displayed layer as a reference image, and traverse the pixels in the reference image to obtain the pixel value of the pixel; wherein, the reference image includes the display background of the at least one control.

[0088] The visual effect adjustment module 703 is used to determine reference pixels from the reference image based on the display position of each control in the display interface, and adjust the visual effect of the control based on the pixel value of the reference pixels.

[0089] The graphical user interface generation and display module 704 is used to generate and display a graphical user interface based on the adjusted visual effects of each of the controls.

[0090] In some embodiments, the visual effects generation module 701 includes an initial visual effects generation unit and a visual effects generation unit. The initial visual effects generation unit is used to obtain, for each of the controls, an initial visual effects generated by a preset visual effects generation template, the initial visual effects having a preset size. The visual effects generation unit is used to scale the initial visual effects based on the proportional relationship between the display size of the control and the preset size to obtain the visual effects for each of the controls.

[0091] In one implementation, the initial visual effect generation unit is specifically used to determine a target visual effect generation template from at least two preset visual effect generation templates based on the display shape of each control; wherein different visual effect generation templates correspond to different display shapes; and to obtain an initial visual effect with a preset size generated by the target visual effect generation template.

[0092] In one implementation, the initial visual effect generation unit is specifically used to obtain visual effect parameters corresponding to each of the controls from a pre-stored mapping relationship between control types and visual effect parameters, based on the control type of each control; wherein, controls of different control types correspond to different visual effect parameters; and input the visual effect parameters corresponding to each of the controls into the preset visual effect generation template to obtain an initial visual effect with a preset size generated by the preset visual effect generation template.

[0093] In some embodiments, the reference information acquisition module 702 is specifically used to perform a scaling down process on the reference image and traverse the pixels in the scaled-down reference image to obtain the pixel value of each pixel.

[0094] The visual effects adjustment module 703 is specifically used to determine the reference pixel corresponding to the display position from the reduced reference image based on the display position of each control to be displayed in the display interface and the reduction ratio of the reference image.

[0095] In some embodiments, the visual effect adjustment module 703 is specifically used to determine the target brightness at the display position of the control based on the pixel value of the reference pixel, and adjust the visual effect of the control according to the target brightness.

[0096] In one implementation, the visual effect includes a shadow effect; the visual effect adjustment module 703 is specifically used to adjust the transparency of the shadow effect of the control according to the target brightness; wherein the target brightness and the transparency are negatively correlated.

[0097] In some embodiments, there are multiple controls to be displayed. The graphical user interface generation and display module 704 is specifically used to group the multiple controls according to their display positions in the display interface to obtain at least two drawing groups, each drawing group including at least one control; for each drawing group, the controls in the drawing group are merged and drawn according to the adjusted visual effect of the controls belonging to the drawing group.

[0098] In one implementation, the multiple controls are displayed in the graphical user interface in a row-column layout. The graphical user interface generation and display module 704 is specifically used to determine the controls that will be displayed in the same row as belonging to the same drawing group if the row spacing in the row-column layout is greater than the column spacing, according to the display position of each control in the display interface; and to determine the controls that will be displayed in the same column as belonging to the same drawing group if the column spacing in the row-column layout is greater than the row spacing, according to the display position of each control in the display interface.

[0099] In some embodiments, the visual effect includes at least one of the following: shadow effect, light and shadow effect, blur effect, and transparency effect.

[0100] The specific implementation process of the functions and roles of each unit in the above device can be found in the implementation process of the corresponding steps in the above method, and will not be repeated here.

[0101] For the apparatus embodiments, since they basically correspond to the method embodiments, the relevant parts can be referred to in the description of the method embodiments. The apparatus embodiments described above are merely illustrative, and the units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units.

[0102] Based on the same inventive concept as the above method, this disclosure also provides an electronic device, the electronic device comprising:

[0103] processor;

[0104] A memory for storing computer programs that can be executed by the processor;

[0105] When the processor executes the program, it implements the method described in any of the above embodiments.

[0106] like Figure 8 As shown, Figure 8This disclosure is a structural block diagram of an electronic device for processing jump rope data according to an exemplary embodiment. The electronic device 800 may include one or more of the following components: a processing component 801, a memory 802, a power supply component 803, a multimedia component 804, an audio component 805, an input / output (I / O) interface 806, a sensor component 807, and a communication component 808.

[0107] Processing component 801 typically controls the overall operation of electronic device 800, such as operations associated with display, telephone calls, data communication, camera operation, and recording operations. Processing component 801 may include one or more processors 809 to execute instructions to complete all or part of the steps of the methods described above. Furthermore, processing component 801 may include one or more modules to facilitate interaction between processing component 801 and other components. For example, processing component 801 may include a multimedia module to facilitate interaction between multimedia component 804 and processing component 801.

[0108] Memory 802 is configured to store various types of data to support the operation of electronic device 800. Examples of this data include instructions for any application or method operating on electronic device 800, contact data, phonebook data, messages, pictures, videos, etc. Memory 802 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk.

[0109] Power supply component 803 provides power to various components of electronic device 800. Power supply component 803 may include a power management system, one or more power supplies, and other components associated with generating, managing, and distributing power to electronic device 800.

[0110] Multimedia component 804 includes a screen that provides an output interface between the electronic device 800 and the user. The screen may include a touch panel (TP), implemented as a touchscreen, to receive input signals from the user. The touch panel includes one or more touch sensors to sense touches, swipes, and gestures on the touch panel. The touch sensors may sense not only the boundaries of the touch or swipe action but also the duration and pressure associated with the touch or swipe operation. In some embodiments, multimedia component 804 includes a front-facing camera and / or a rear-facing camera. When the electronic device 800 is in an operating mode, such as a shooting mode or a video mode, the front-facing camera and / or rear-facing camera may receive external multimedia data. Each front-facing camera and rear-facing camera may be a fixed optical lens system or have focal length and optical zoom capabilities.

[0111] Audio component 805 is configured to output and / or input audio signals. For example, audio component 805 includes a microphone (MIC) configured to receive external audio signals when electronic device 800 is in an operating mode, such as call mode, recording mode, and voice recognition mode. The received audio signals may be further stored in memory 802 or transmitted via communication component 808. In some embodiments, audio component 805 also includes a speaker for outputting audio signals.

[0112] I / O interface 806 provides an interface between processing component 801 and peripheral interface modules, such as keyboards, click wheels, buttons, etc. These buttons may include, but are not limited to, home buttons, volume buttons, power buttons, and lock buttons.

[0113] Sensor assembly 807 includes one or more sensors for providing state assessments of various aspects of electronic device 800. For example, sensor assembly 807 can detect the on / off state of electronic device 800, the relative positioning of components such as the display and keypad of electronic device 800, changes in position of electronic device 800 or a component of electronic device 800, the presence or absence of user contact with electronic device 800, orientation or acceleration / deceleration of electronic device 800, and temperature changes of electronic device 800. Sensor assembly 807 may include a proximity sensor configured to detect the presence of nearby objects without any physical contact. Sensor assembly 807 may also include a light sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, sensor assembly 807 may also include an accelerometer, gyroscope, magnetometer, pressure sensor, temperature sensor, photoelectric sensor, or GPS sensor.

[0114] Communication component 808 is configured to facilitate wired or wireless communication between electronic device 800 and other devices. Electronic device 800 can access wireless networks based on communication standards, such as WiFi, 2G, 3G, 4G LTE, 8G NR (8G New Radio), or combinations thereof. In one exemplary embodiment, communication component 808 receives broadcast signals or broadcast-related information from an external broadcast management system via a broadcast channel. In one exemplary embodiment, communication component 808 also includes a near-field communication (NFC) module to facilitate short-range communication. For example, the NFC module may be implemented based on radio frequency identification (RFID) technology, Infrared Data Association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.

[0115] In an exemplary embodiment, the electronic device 800 may be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field-programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components to perform the methods described above.

[0116] The specific implementation process of the functions and roles of each component in the above-mentioned equipment can be found in the implementation process of the corresponding steps in the above-mentioned method, and will not be repeated here.

[0117] For the device embodiments, since they basically correspond to the method embodiments, the relevant parts can be referred to in the description of the method embodiments. The device embodiments described above are merely illustrative. The components described as separate parts may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this disclosure according to actual needs. Those skilled in the art can understand and implement this without creative effort.

[0118] Based on the same inventive concept as the above method, this disclosure also provides a computer-readable storage medium having a computer program stored thereon, which, when executed by the processor 509 of the above electronic device, implements the steps of the display method described in any of the above embodiments.

[0119] This disclosure can take the form of a computer program product implemented on one or more storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing program code. Computer-usable storage media include permanent and non-permanent, removable and non-removable media, and information storage can be implemented by any method or technology. Information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to: phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage or other magnetic storage devices, or any other non-transfer medium that can be used to store information accessible by a computing device.

[0120] Based on the same inventive concept as the methods described above, this disclosure also provides a computer program product, including a computer program / instructions that, when executed by a processor, implement the steps of any of the methods described above.

[0121] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this disclosure are indicated by the following claims.

[0122] It should be understood that this disclosure is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this disclosure is limited only by the appended claims.

[0123] The above description is merely a preferred embodiment of this disclosure and is not intended to limit this disclosure. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A display method, characterized in that, include: Identify at least one control to be displayed and generate visual effects for each of the controls; Using the display content of at least one currently displayed layer as a reference image, the pixel values ​​of the pixels in the reference image are obtained by traversing the pixels in the reference image; wherein, the reference image includes the display background of the at least one control; Based on the display position of each control in the display interface, a reference pixel is determined from the reference image, and the visual effect of the control is adjusted based on the pixel value of the reference pixel; Based on the adjusted visual effects of each of the controls, a graphical user interface is generated and displayed.

2. The method according to claim 1, characterized in that, The generation of the visual effects for each of the controls includes: For each of the aforementioned controls, an initial visual effect generated by a preset visual effect generation template is obtained, wherein the initial visual effect has a preset size; Based on the proportional relationship between the display size of the control and the preset size, the initial visual effect is scaled to obtain the visual effect of each control.

3. The method according to claim 2, characterized in that, For each of the controls, obtaining the initial visual effect generated by the preset visual effect generation template includes: For each of the controls, a target visual effect generation template is determined from at least two preset visual effect generation templates based on the display shape of the control; wherein, different visual effect generation templates correspond to different display shapes; Obtain an initial visual effect with a preset size generated by the target visual effect generation template.

4. The method according to claim 2, characterized in that, For each of the controls, obtaining the initial visual effect generated by the preset visual effect generation template includes: Based on the control type of each control, the visual effect parameters corresponding to each control are obtained from the pre-stored mapping relationship between control types and visual effect parameters; wherein, controls of different control types correspond to different visual effect parameters. The visual effect parameters corresponding to each of the controls are input into the preset visual effect generation template to obtain an initial visual effect with a preset size generated by the preset visual effect generation template.

5. The method according to claim 1, characterized in that, The step of traversing the pixels in the reference image to obtain the pixel value includes: The reference image is scaled down, and the pixels in the scaled-down reference image are traversed to obtain the pixel value of each pixel; The step of determining reference pixels from the reference image based on the display positions of each of the controls in the display interface includes: Based on the display position of each control in the display interface and the scaling ratio of the reference image, a reference pixel corresponding to the display position is determined from the scaled-down reference image.

6. The method according to claim 1, characterized in that, Adjusting the visual effect of the control based on the pixel value of the reference pixel includes: The target brightness at the display position of the control is determined based on the pixel value of the reference pixel, and the visual effect of the control is adjusted according to the target brightness.

7. The method according to claim 6, characterized in that, The visual effects include shadow effects; Adjusting the visual effect of the control according to the target brightness includes: The transparency of the shadow effect of the control is adjusted according to the target brightness; wherein the target brightness and the transparency are negatively correlated.

8. The method according to claim 1, characterized in that, There are multiple controls to be displayed; The process of generating a graphical user interface based on the adjusted visual effects of each of the controls includes: According to the display position of each control in the display interface, the multiple controls are grouped to obtain at least two drawing groups, and each drawing group includes at least one control. For each drawing group, the controls in that group are merged and drawn according to the adjusted visual effect of the controls belonging to that group.

9. The method according to claim 8, characterized in that, The multiple controls are displayed in a row-column layout in the graphical user interface; The step of grouping multiple controls according to their display positions on the display interface includes: If the row spacing in the row and column layout is greater than the column spacing, the controls that will be displayed in the same row will be determined as controls belonging to the same drawing group according to their display positions on the display interface. If the column spacing in the row and column layout is greater than the row spacing, controls that will be displayed in the same column will be identified as controls belonging to the same drawing group, according to their intended display positions on the display interface.

10. The method according to any one of claims 1 to 9, characterized in that, The visual effects include at least one of the following: shadow effect, light and shadow effect, blur effect, and transparency effect.

11. A display device, characterized in that, The device includes: A visual effects generation module is used to determine at least one control to be displayed and generate visual effects for each of the controls; The reference information acquisition module is used to take the display content of at least one currently displayed layer as a reference image, and traverse all pixels in the reference image to obtain the pixel values ​​of all pixels; wherein, the reference image includes the display background of the at least one control; A visual effect adjustment module is used to determine reference pixels from the reference image based on the display position of each control in the display interface, and adjust the visual effect of the control based on the pixel value of the reference pixels. The graphical user interface generation and display module is used to generate and display a graphical user interface based on the adjusted visual effects of each of the controls.

12. An electronic device, characterized in that, include: processor; A memory for storing computer programs that can be executed by the processor; When the processor executes the program, it implements the steps of the method according to any one of claims 1 to 10.

13. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 10.

14. A computer program product comprising a computer program / instructions, characterized in that, When the computer program / instructions are executed by the processor, they implement the steps of the method as described in any one of claims 1 to 10.

Images