BACKGROUND

The present disclosure relates generally to a user interface (UI) system. The present disclosure relates more particularly to systems and methods for providing different sized images for display on controls of a UI according to scaling of a display (e.g., display device, screen, window, module, component, and/or the like).

Generally, a graphical user interface (GUI) for a computer application or computer program displays graphics or images on various controls, such as, for example, on toolbars, on buttons, next to menu items, and the like. These graphics and images may be contained in a list (e.g., an image list), and the controls are connected to the list, such that the graphics and images are drawn from an index (e.g., image1, image2, image3, etc.) in the list. For example, a button on the GUI may draw from image5(e.g., an image corresponding to index5) in the list, while several menu items on the GUI may draw from images11,100, and53(e.g., images corresponding to index11, index100, and index53) in the list.

However, some systems and devices allow for only images of a fixed pixel size in the list, which may cause problems when displaying the images on modern display devices having higher resolutions (e.g., high DPI displays, retina displays, and the like). For example, some Windows operating systems provided by Microsoft Corporation of Redmond, Wash., use image lists to enable management of a large set of graphics (or bitmaps). These image lists are a collection of images, each having the same pixel size that are contained in a single wide bitmap, and each of the images are drawn from its index. Thus, instead of referencing an image stored on a file system, for example, the images are effectively coded into the image list. Management of these image lists are accomplished using various image list functions that may be enabled via an application programming interface (API), for example, such as Microsoft Win32API, and various handles (e.g., an HIMAGELIST handle) may be used to access these image lists.

While such image lists provide for efficient management of a large number of images that are used on various controls of a GUI, these image lists do not include support for providing different sized images dependent on the display scaling. Instead, when a display is scaled, the images may be drawn too small (such that they appear smaller on the scaled display), or may be drawn to appear physically larger using more pixels. For example, an image list configured to hold 16×16 sized images allows for only images having a 16×16 pixel size in the image list. In this case, for a display at 200% scaling, a 16×16 sized image may be rendered in twice the number of pixels vertically and horizontally, such that the image will be drawn to appear larger on the display screen. For example, a 16×16 sized image from the image list may be drawn with 32×32 pixels on the display screen at 200% scaling. However, when an image intended for a smaller pixel size is drawn with more pixels to appear physically larger on the display screen, the image can appear distorted, blurred, and/or pixelated.

Accordingly, systems and methods for automatically providing images of a desired size (e.g., pixel size) according to scaling of the display screen or window may be desired.

The above information disclosed in this Background section is for enhancement of understanding of the background of the invention, and therefore, it may contain information that does not constitute prior art.

SUMMARY

Example embodiments relate to a graphical user interface (GUI) having an image list associated with a display component of a display device, where the image list has an index of logical images, each of the logical images having a fixed pixel size. The GUI also has an image container connected to the image list, where the image container includes a plurality of different size versions of at least some of the logical images. The GUI also has one or more control objects, where each of the control objects is configured to draw a corresponding image from the index of logical images of the image list. The GUI is configured to update the index of logical images of the image list with the different size versions sourced from the image container in response to a scale change of the display component.

In further examples, each of the control objects is configured to draw a corresponding different size version of the logical images in response to the update of the image list.

In further examples, each of the different size versions of the logical images have the same aspect ratio, and each different size version of a corresponding logical image has a different pixel size than those of other different size versions of the corresponding logical image.

In further examples, the GUI is configured to: compare the pixel size of each of the different size versions of a corresponding logical image with a scaled pixel size corresponding to the scale change; and determine whether the different size versions of the corresponding logical image include a version having the scaled pixel size.

In further examples, the GUI is further configured to: identify a version from among the different size versions of the corresponding logical image that includes the scaled pixel size; and in response to identifying the version having the scaled pixel size, re-populate a corresponding image in the index of the image list with the version having the scaled pixel size.

In further examples, the GUI is further configured to: determine that none of the different size versions of the corresponding logical image includes the scaled pixel size; downscale one of the different sized versions of the corresponding logical image having a pixel size that is greater than the scaled pixel size to generate a downscaled version of the corresponding logical image having the scaled pixel size; and re-populate a corresponding image in the index of the image list with the downscaled version having the scaled pixel size.

Further example embodiments relate to a system for displaying graphics on controls of a GUI, where the system includes a display device configured to display the GUI; one or more processors; and memory coupled to the one or more processors and storing instructions. The instructions, when executed by the one or more processors, cause the one or more processors to: receive an indication of a scale change of a display component of the display device, the display component displaying the GUI; identify an image list associated with the display component, the image list having an index of logical images, each of the logical images having a fixed pixel size; identify an image container connected to the image list, the image container comprising a plurality of different size versions of at least some of the logical images; update each entry of the logical images in the image list with the different size versions sourced from the image container in response to the scale change of the display component; and redraw a graphic for a control object in the GUI from the updated image list, the graphic corresponding to one of the different size versions in the updated image list.

In further examples of the system, each of the different size versions of the logical images have the same aspect ratio, and each different size version of a corresponding logical image has a different pixel size than those of other different size versions of the corresponding logical image.

In further examples of the system, the instructions further cause the one or more processors to: identify a pixel size of the logical images in the index of the image list; calculate a scaled pixel size based on the scale change and the pixel size of the logical images; and retrieve the different size versions of the logical images from the image container corresponding to the scaled pixel size.

In further examples of the system, to retrieve the different size versions of the logical images from the image container, the instructions further cause the one or more processors to: compare the pixel size of each of the different size versions of a corresponding logical image with the scaled pixel size; and determine whether the different size versions of the corresponding logical image include a version having the scaled pixel size.

In further examples of the system, the instructions further cause the one or more processors to: identify a version from among the different size versions of the corresponding logical image that includes the scaled pixel size; and in response to identifying the version having the scaled pixel size, re-populate a corresponding image in the index of the image list with the version having the scaled pixel size.

In further examples of the system, the instructions further cause the one or more processors to: determine that none of the different size versions of the corresponding logical image includes the scaled pixel size; downscale one of the different sized versions of the corresponding logical image having a pixel size that is greater than the scaled pixel size to generate a downscaled version of the corresponding logical image having the scaled pixel size; and re-populate a corresponding image in the index of the image list with the downscaled version having the scaled pixel size.

Further examples embodiments relate to a method for displaying graphics on controls of a GUI. In such examples, the method includes: receiving, by a processor, an indication of a scale change of a display component of a display device, the display component displaying the GUI; identifying, by the processor, an image list associated with the display component, the image list having an index of logical images, each of the logical images having a fixed pixel size; identifying, by the processor, an image container connected to the image list, the image container comprising a plurality of different size versions of at least some of the logical images; updating, by the processor, the index of the image list with the different size versions sourced from the image container in response to the scale change of the display component; and redrawing, by the processor, a graphic for a control object in the GUI from the updated image list, the graphic corresponding to one of the different size versions in the updated image list.

In further examples of the method, each of the different size versions of the logical images have the same aspect ratio, and each different size version of a corresponding logical image has a different pixel size than those of other different size versions of the corresponding logical image.

In further examples, the method includes: identifying, by the processor, a pixel size of the logical images in the index of the image list; calculating, by the processor, a scaled pixel size based on the scale change and the pixel size of the logical images; and retrieving, by the processor, the different size versions of the logical images from the image container corresponding to the scaled pixel size.

In further examples of the method, to retrieve the different size versions of the logical images from the image container, the method further comprises: comparing, by the processor, the pixel size of each of the different size versions of a corresponding logical image with the scaled pixel size; and determining, by the processor, whether the different size versions of the corresponding logical image include a version having the scaled pixel size.

In further examples, the method includes: identifying, by the processor, a version from among the different size versions of the corresponding logical image that includes the scaled pixel size; and in response to identifying the version having the scaled pixel size, re-populating, by the processor, a corresponding image in the index of the image list with the version having the scaled pixel size.

In further examples, the method includes: determining, by the processor, that none of the different size versions of the corresponding logical image includes the scaled pixel size; downscaling, by the processor, one of the different sized versions of the corresponding logical image having a pixel size that is greater than the scaled pixel size to generate a downscaled version of the corresponding logical image having the scaled pixel size; and re-populating, by the processor, a corresponding image in the index of the image list with the downscaled version having the scaled pixel size.

In further examples of the method, the image list is configured to modify at least one of the different size versions of the logical images sourced from the image container to be drawn semi-transparent or in grayscale.

In further examples of the method, the instructions further cause the one or more processors to modify at least one of the different size versions of the logical images sourced from the image container.

In further examples, the method includes modifying, by the processor, at least one of the different size versions of the logical images sourced from the image container.

