Automated Graphical User-Interface Layout

• US 20140075324A1
• Filed: 05/13/2013
• Published: 03/13/2014
• Est. Priority Date: 09/11/2012
• Status: Active Grant

• Current Assignee: Apple Inc.
• Original Assignee: Apple Inc.
• Inventors: Howard, Joe R., Frick, Brian R., Martin, Timothy B., Sanders, Christopher John
• Granted Patent: US 9,397,844 B2
• Time in Patent Office: Days
• US Class Current: 715/738
• CPC Class Codes: G06F 3/04817 using icons graphical or visual programming using iconic symbols G06F8/34
• CPC Class Codes: G06F 3/0484 for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
• CPC Class Codes: G06F 9/451 Execution arrangements for user interfaces
• CPC Class Codes: G06T 11/60 Editing figures and text; Combining figures or text
• CPC Class Codes: G06T 2200/24 involving graphical user interfaces [GUIs]
• CPC Class Codes: G09G 2340/12 Overlay of images, i.e. displayed pixel being the result of switching between the corresponding input pixels
• CPC Class Codes: G09G 5/026 Control of mixing and/or overlay of colours in general G09G5/022 and G09G5/024 take precedence
• CPC Class Codes: G09G 5/377 for mixing or overlaying two or more graphic patterns G09G5/02, G09G5/397 take precedence
• CPC Class Codes: H04L 12/18 for broadcast or conference , e.g. multicast
• CPC Class Codes: H04L 67/01 Protocols
• CPC Class Codes: H04L 67/10 in which an application is distributed across nodes in the network software deployment G06F8/60; multiprogramming arrangements G06F9/46

Abstract

Embodiments of the present disclosure relate to automatic generation of dynamically changing layouts for a graphical user-interface. Specifically, embodiments of the present disclosure employ analysis of an image associated with the view (e.g., either the current view or a future view) of the graphical user-interface to determine colors that are complementary to the image. The colors are applied to the view, such that the color scheme of the view matches the image.

Claims

1. A non-transitory computer-readable medium, comprising computer-readable instructions to:

provide a graphical user-interface to display content;

analyze an image associated with a current view of the content to determine a set of colors found in the image; and

update a layout of the current view of the graphical user-interface based at least in part upon the set of colors.

2. The non-transitory computer-readable medium of claim 1, comprising computer readable instructions to:

determine a primary text color from the set of colors;

determine a secondary text color from the set of colors;

apply the primary text color to a first level of text in the graphical user-interface; and

apply the secondary text color to a second level of text in the graphical user-interface.

3. The non-transitory computer-readable medium of claim 2, comprising computer readable instructions to:

generate a tertiary color by modifying a characteristic of the primary or secondary text color; and

apply the tertiary color to a third level of text in the graphical user-interface.

4. The non-transitory computer-readable medium of claim 3 comprising modifying a transparency characteristic, a brightness characteristic, or both of the primary or secondary text color to generate the tertiary color.

5. The non-transitory computer-readable medium of claim 2, comprising computer readable instructions to:

update the layout using a default set of colors when analysis of the image does not result in a suitable set of colors for the layout.

6. The non-transitory computer-readable medium of claim 1, comprising computer readable instructions to:

determine a background color from the set of colors, determine a background image based upon the analysis of the image, or both.

7. The non-transitory computer-readable medium of claim 1, comprising computer readable instructions to:

determine and apply a background image for the current view based upon the image associated with the current view;

wherein the background image is a faded version of the image associated with the current view that becomes increasingly faded towards a body of the current view.

8. The non-transitory computer-readable medium of claim 1, comprising computer readable instructions to:

detect whether the image associated with the current view contains a border;

crop the border if one is detected; and

determine a background color from the image after the boarder has been cropped.

9. The non-transitory computer-readable medium of claim 1;

wherein the graphical user-interface is configured to display media content comprising audio content, video content, information relating to the audio content, information relating to the video content, or a combination thereof;

10. A system comprising:

a server comprising a processor configured to provide content comprising an image associated with a user selection in a content player hosted by a client; and

a layout generator configured to generate machine-readable layout instructions configured to define changes to at least a portion of a layout of a graphical user interface of the content player based upon the image.

11. The system of claim 10, comprising the client, wherein the client comprises the layout generator.

12. The system of claim 10, wherein the server comprises the layout generator.

13. The system of claim 10, comprising a non-transitory cache storage configured to store the layout instructions for subsequent retrieval and use by the content player.

14. The system of claim 13, wherein the cache storage comprises non-transitory cloud-based storage.

15. The system of claim 13, wherein the server, the client, or both comprise the cache storage.

16. A method, comprising:

obtaining, via a processor, an input image;

analyzing, via the processor, the input image for potential background colors for a graphical user interface;

analyzing, via the processor, the input image to determine dominant colors of the input image;

determining, via the processor, a set of graphical user interface element colors based upon the dominate colors, by determining which of the dominant colors or variations of the dominant colors compliment the potential background colors;

applying, via the processor, one of the potential background colors to the graphical user interface; and

applying, via the processor, the set of graphical user interface element colors to one or more elements of the graphical user interface.

17. The method of claim 16, wherein analyzing the input image for potential background colors comprises:

resizing the input image;

generating hue and grayscale histograms from edges of the input images, wherein some edges of the input images may be weighted with higher importance;

condensing the hue and grayscale histograms;

choosing dominant hue and dominate grayscale values from the hue and grayscale histograms;

selecting the higher of the dominant hue or the dominate grayscale values;

determining a dominate color based upon the dominate hue when the dominate hue is selected;

validating the dominant color when the dominant color is determined or validating the dominant grayscale when the dominate grayscale is selected; and

setting the dominant color or the dominate grayscale as a background color of the graphical user interface when the validation is successful.

18. The method of claim 17, wherein validating the dominant color or dominant grayscale comprises:

selecting multiple locations along each edge of the input image;

repeating for each edge of the input image;

moving from the edge of the locations inward to compare pixel colors with the dominant color or dominant grayscale;

finding a length of a border for an edge location when the pixel colors contrast with the dominant color or dominant grayscale;

sorting the locations based on the length of the border;

comparing the longest and shortest border lengths for each edge; and

determining that the edge is a border when the length difference is within a certain threshold or the longest length is zero or otherwise determining that the edge is not a border;

determining that the input image is bordered when 3 or 4 edges are a border and otherwise determining that the input image is not bordered;

determining that the dominant color or dominant grayscale is not valid, cropping the image by the longest border length, and repeating analysis of the input image for potential background colors when the image is bordered; and

determining that the dominant color or dominant grayscale is valid when the input image is not bordered.

19. The method of claim 17, wherein edges are weighted based upon where the input image will be displayed on the graphical user interface.

20. The method of claim 16, wherein analyzing the input image to determine the dominant colors, comprises:

generating hue and grayscale histograms;

compressing the hue and grayscale histograms;

filtering the hue and grayscale histograms;

sorting the hue and grayscale histograms;

determining dominate colors for each hue in the hue historgram;

creating grayscale color based upon the grayscale historgram; and

merging the dominate colors for each hue and the grayscale color based on a dominate of the dominate colors in the input image.

21. The method of claim 16, wherein the one or more elements comprise primary text, secondary text, or both and the element colors comprise a primary text color, a secondary text color, or both.

22. The method of claim 21, comprising determining the primary text color by:

iterating through the dominant colors in the input image to determine whether any of the dominant colors contrasts with the background color;

choosing the primary text color from one of the dominate colors that contrasts with the background color or choosing a fallback color for the primary text color when none of the dominate colors contrasts with the background color.

23. The method of claim 22, wherein determining the primary text color, comprises artistically modifying the primary text color.

24. The method of claim 21, comprising determining the secondary text color by:

iterating through the dominant colors in the input image to determine whether any of the dominant colors is close in color to the primary text color and contrasts with the background color;

selecting the secondary text color from the dominant colors that are not close to the primary text color and contrast with the background color;

when all of the dominant colors are close to the primary text color and do not contrast with the background color, iterating through the dominant colors in the input image to determine whether any of the dominant colors contrasts with the background color;

selecting the secondary text color from one of the dominant colors that contrast with the background color;

when none of the dominant colors contrast with the background color, selecting the secondary text color from a fallback color.

25. The method of claim 24, comprising artistically modifying the secondary text color.