Electronic device for displaying and adjusting image layers in graphical user interface and method thereof

A method for displaying a graphical user interface on a display of an electronic device includes obtaining a total number “n” of image layers to be displayed on the display, and determining whether the total number of image layers is greater than two, determining a processing method of a number of processing methods for processing each image layer for displaying each image layer, processing each image layer according to the determined processing method, and displaying the graphical user interface on the display after all of the image layers have been processed. The number of processing methods include size adjustment, obfuscation adjustment, saturation adjustment, and transparency adjustment.

FIELD

The subject matter herein generally relates to an electronic device and method for displaying a graphical user interface on a display.

BACKGROUND

Generally, an electronic device can display a graphical user interface on a display screen. The graphical user interface can include a plurality of image layers.

DETAILED DESCRIPTION

FIG. 1illustrates a block diagram of an embodiment of an electronic device100for displaying a graphical user interface. The electronic device100can include an interface displaying system10, a storage device20, a display30, and a processing module40. The graphical user interface can be displayed on the display30.

The interface displaying system10can include an obtaining module11, a determining module12, an image processing module13, and a displaying module14. The modules11-14can include one or more software programs in the form of computerized codes stored in the storage device20. The computerized codes can include instructions executed by the processing device40to provide functions for the modules11-14.

The obtaining module11can obtain a total number “n” of image layers to be displayed on the graphical user interface. In at least one embodiment, a first image layer can be a top-most image layer being operable by a user, a last image layer can be a wallpaper of the graphical user interface, and a second to last image layer can be a plurality of icons on the wallpaper. The obtaining module11can determine whether the total number of image layers to be displayed is greater than two.

When the total number of image layers to be displayed is greater than two, the determining module12can determine a processing method of a plurality of processing methods for processing each of the total number of image layers. The plurality of processing methods can include size adjustment, saturation adjustment, obfuscation adjustment, and transparency adjustment. In at least one embodiment, each of the image layers from a second image layer to the second to last image layer is processed by size adjustment, each of the image layers from the second image layer to the last image layer is processed by obfuscation and saturation adjustment, and each of the image layers from the first image layer to the last image layer is processed by transparency adjustment.

The image processing module13can process each image layer according to the processing methods determined by the determining module12.

To adjust the size of each of the image layers from the second image layer to the second to last image layer, the image processing module13first reduces the size of the second image layer by a predetermined proportion “r”. The rest of the image layers can be processed according to the following formula:
[r−(i−2)*Δr]wherein:r<1;Δr is a predetermined step reduction value of r for each consecutive image layer after the second image layer;i is an integer and equals a sequence number of the image layer;2≦i≦n−1; andΔr<r/(n−2).

To adjust the obfuscation of each image layer from the second image layer to the last image layer, the image processing module13first obtains “K” reference pixels for each pixel of the image layer. As illustrated inFIG. 2, there are eight reference pixels for each pixel. Each pixel is located at a center of the K reference pixels. The K reference pixels are arranged equally along a horizontal direction and vertical direction of the display, with an equal number “W” of reference pixels on each side of the pixel. Thus, a number of the reference pixels along the horizontal direction and the vertical direction on each side of each pixel equals 2*W, and K equals 4*W.

The image processing module can calculate an average (R, G, B) value of each pixel from the K reference pixels.FIG. 2illustrates the K reference pixels for a pixel A and a pixel B. The reference pixels of pixel A include reference pixels A1-A8. When the pixel is located at a border of the display or adjacent to the border, a number of times of counting the (R, G, B) value of the reference pixels located at the border of the display is equal to a deficit number of the reference pixels along the corresponding horizontal or vertical direction. For example, as illustrated inFIG. 2, the pixel B is located at the border of the display and is missing one reference pixel along the left horizontal direction and two reference pixels along the bottom vertical direction. To compensate the missing reference pixels, the (R, G, B) value of a reference pixel located at the border of the display along the left horizontal direction is counted twice, and the (R, G, B) value of the pixel B located at the border of the display is counted three times. The obfuscation of the pixels can be adjusted by setting the (R, G, B) value of each pixel to the average (R, G, B) value of the reference pixels. The larger the value for W is, the greater the obfuscation effect is. In at least one embodiment, the value for W can be preset. In other embodiments, the value for W can be set by a user.

To adjust the saturation of each image layer from the second image layer to the last image layer, the image processing module first reduces the saturation of the second image layer by a predetermined proportion “t”. The rest of the image layers can be processed according to the following formula:
[t−(i−2)*Δt]wherein:t<1;Δt is a predetermined step reduction value oft for each consecutive image layer after the second image layer;i is an integer and equals a sequence number of the image layer; andΔt<t/(n−2).

To adjust the transparency of each image layer from the first image layer to the last image layer, the image layers can be processed by known processing means in the art.

Referring toFIG. 3, after all of the image layers have been processed, the displaying module can display the graphical user interface on the display. The image layers of the graphical user interface can have a 3-D effect of being layered on top of each other. Thus, the graphical user interface can be more intuitive for a user to operate.

FIG. 4illustrates a flowchart of an exemplary method for displaying a graphical user interface on a display of an electronic device. The example method is provided by way of example, as there are a variety of ways to carry out the method. The method described below can be carried out using the configurations illustrated inFIGS. 1-3, for example, and various elements of these figures are referenced in explaining the example method. Each block shown inFIG. 4represents one or more processes, methods, or subroutines carried out in the example method. Furthermore, the illustrated order of blocks is by example only, and the order of the blocks can be changed. Additional blocks may be added or fewer blocks may be utilized, without departing from this disclosure. The example method can begin at block201.

At block201, a total number of image layers to be displayed can be obtained. If the total number of image layers to be displayed is greater than two, block202is implemented. Otherwise, if the total number of image layers is less than or equal to two, the method ends.

At block202, a processing method of a plurality of processing methods for processing each of the image layers to be displayed can be determined. The processing methods can include size adjustment, obfuscation adjustment, saturation adjustment, and transparency adjustment.

At block203, each of the image layers to be displayed can be processed according to the determined processing methods. In at least one embodiment, each image layer from a second image layer to a second to last image layer is processed by size adjustment, each image layer from the second image layer to the last image layer is processed by obfuscation adjustment, each image layer from the second image layer to the last image layer is processed by saturation adjustment, and each image layer from a first image layer to the last image layer is processed by transparency adjustment.

At block204, the graphical user interface with the processed image layers can be displayed on the display.