Patent Application
20130207994
1. Field of the Invention
The present invention relates to the field of computer software and, in particular, to a system and method for generating and applying a color theme to a user interface.
2. Description of the Related Art
In recent years, the popularity of personal web pages that are hosted by web service providers has increased. Examples of such personal web pages include profile pages in social networks, personal blog pages, personal photo galleries, and the like. There exists a strong connection between a user and their personal web page that has led web service providers to enable their users to customize the look and feel of personal web pages. For example, some web service providers allow users to upload photos that are displayed as background images on their personal web pages, and/or allow users to edit the font size and font type displayed in their personal web pages. Some web service providers also enable users to modify the colors of user interface (UI) elements that are included in the personal web page, such as font colors, border colors, and the like.
One popular approach of modifying the colors of UI elements involves the user manually selecting one or more user interface element (UI) elements, such as a hypertext markup language (HTML) button, and then selecting a color to be applied to the UI element. However, a large number of UI elements are typically included in even the simplest of personal web pages; therefore, the manual selection process quickly becomes cumbersome. Moreover, a majority of individuals do not understand the complex relationship between colors and what is pleasing to the human eye, which results in the users conducting a trial-and-error process that further contributes to the burdensome task of customizing a personal web page.
As the foregoing illustrates, there is a need in the art for an improved technique for modifying the appearance of user interfaces, such as personal web pages.
Embodiments of the invention provide a software application through which a user may customize, via a selection of a single color, the color for one or more user interface (UI) elements included in a graphical user interface (GUI). The user selects a color via a color selection UI. A color palette that includes a range of colors is generated based on the single color. UI elements in the GUI are each associated with a shade number that corresponds to a particular location in the color palette. The software application can assign colors to the UI elements based on the generated color palette.
One embodiment provides a method for applying a color scheme to a user interface that includes one or more user interface (UI) elements. The method includes receiving a selection of a first color, generating a first portion of a color palette that includes the first color and one or more colors that sequentially transition from the first color to a first termination color, and assigning a color from the color palette to a UI element included in the user interface, wherein the color from the color palette corresponds to a position in the color palette associated with the UI element.
Further embodiments provide a non-transitory computer-readable medium and a computer system to carry out the method set forth above.
The patent or application file contains at least one drawing executed in color. Copies of this patent or patent application publication with color drawing(s) will be provided to the Office upon request and payment of the necessary fee.
In the following description, several specific details are presented to provide a thorough understanding of embodiments of the invention. One skilled in the relevant art will recognize, however, that the concepts and techniques disclosed herein can be practiced without one or more of the specific details, or in combination with other components, etc. In other instances, well-known implementations or operations are not shown or described in detail to avoid obscuring aspects of various examples disclosed herein.
Each client computer 102 includes conventional components of a computing device, e.g., a processor, system memory, a hard disk drive, input devices such as a mouse and a keyboard, and output devices such as a monitor, which are illustrated in
In the embodiments of the present invention described below, users are respectively operating the client computers 102 that are connected to the web servers 108 over the network 106. Web pages are displayed to a user via the client computers 102. The web pages are transmitted from the web servers 108 to the user's client computer 102 and processed by the web browser program stored in that user's client computer 102 for display through a display device in communication with that user's client computer 102.
As shown, computer system 200 includes a central processing unit (CPU) 202 and a system memory 204 communicating via a bus path that may include a memory bridge 206. CPU 202 includes one or more processing cores, and, in operation, CPU 202 is the master processor of system 200, controlling and coordinating operations of other system components. System memory 204 stores software applications and data for use by CPU 202. CPU 202 runs software applications and optionally an operating system. Memory bridge 206, which may be, e.g., a Northbridge chip, is connected via a bus or other communication path (e.g., a HyperTransport link) to an I/O (input/output) bridge 211. I/O bridge 211, which may be, e.g., a Southbridge chip, receives user input from one or more user input devices 222 (e.g., keyboard, mouse, joystick, digitizer tablets, touch pads, touch screens, still or video cameras, motion sensors, and/or microphones) and forwards the input to CPU 202 via memory bridge 206.
A display processor 208 is coupled to memory bridge 206 via a bus or other communication path (e.g., a PCI Express, Accelerated Graphics Port, or HyperTransport link); in one embodiment display processor 208 is a graphics subsystem that includes at least one graphics processing unit (GPU) and graphics memory. Graphics memory includes a display memory (e.g., a frame buffer) used for storing pixel data for each pixel of an output image. Graphics memory can be integrated in the same device as the GPU, connected as a separate device with the GPU, and/or implemented within system memory 204.
Display processor 208 periodically delivers pixels to a display device 210 (e.g., a screen or conventional CRT, plasma, OLED, SED or LCD based monitor or television). Additionally, display processor 208 may output pixels to film recorders adapted to reproduce computer generated images on photographic film. Display processor 208 can provide display device 210 with an analog or digital signal.
A system disk 212 is also connected to I/O bridge 211 and may be configured to store content and applications and data for use by CPU 202 and display processor 208. System disk 212 provides non-volatile storage for applications and data and may include fixed or removable hard disk drives, flash memory devices, and CD-ROM, DVD-ROM, Blu-ray, HD-DVD, or other magnetic, optical, or solid state storage devices.
A switch 214 provides connections between I/O bridge 211 and other components such as a network adapter 220 and various add-in cards 220 and 221. Network adapter 220 allows system 200 to communicate with other systems via an electronic communications network, and may include wired or wireless communication over local area networks and wide area networks such as the Internet.
Other components (not shown), including USB or other port connections, film recording devices, and the like, may also be connected to I/O bridge 211. For example, an audio processor may be used to generate analog or digital audio output from instructions and/or data provided by CPU 202, system memory 204, or system disk 212. Communication paths interconnecting the various components in
In one embodiment, display processor 208 incorporates circuitry optimized for graphics and video processing, including, for example, video output circuitry, and constitutes a graphics processing unit (GPU). In another embodiment, display processor 208 incorporates circuitry optimized for general purpose processing. In yet another embodiment, display processor 208 may be integrated with one or more other system elements, such as the memory bridge 206, CPU 202, and I/O bridge 211 to form a system on chip (SoC). In still further embodiments, display processor 208 is omitted and software executed by CPU 202 performs the functions of display processor 208.
Pixel data can be provided to display processor 208 directly from CPU 202. In some embodiments of the present invention, instructions and/or data representing a scene are provided to a render farm or a set of server computers, each similar to system 200, via network adapter 220 or system disk 212. The render farm generates one or more rendered images of the scene using the provided instructions and/or data. These rendered images may be stored on computer-readable media in a digital format and optionally returned to system 200 for display. Similarly, stereo image pairs processed by display processor 208 may be output to other systems for display, stored in system disk 212, or stored on computer-readable media in a digital format.
Alternatively, CPU 202 provides display processor 208 with data and/or instructions defining the desired output images, from which display processor 208 generates the pixel data of one or more output images, including characterizing and/or adjusting the offset between stereo image pairs. The data and/or instructions defining the desired output images can be stored in system memory 204 or graphics memory within display processor 208. In an embodiment, display processor 208 includes 3D rendering capabilities for generating pixel data for output images from instructions and data defining the geometry, lighting shading, texturing, motion, and/or camera parameters for a scene. Display processor 208 can further include one or more programmable execution units capable of executing shader programs, tone mapping programs, and the like.
It will be appreciated that the system shown herein is illustrative and that variations and modifications are possible. The connection topology, including the number and arrangement of bridges, may be modified as desired. For instance, in some embodiments, system memory 204 is connected to CPU 202 directly rather than through a bridge, and other devices communicate with system memory 204 via memory bridge 206 and CPU 202. In other alternative topologies display processor 208 is connected to I/O bridge 211 or directly to CPU 202, rather than to memory bridge 206. In still other embodiments, I/O bridge 211 and memory bridge 206 might be integrated into a single chip. The particular components shown herein are optional; for instance, any number of add-in cards or peripheral devices might be supported. In some embodiments, switch 214 is eliminated, and network adapter 220 and add-in cards 220, 221 connect directly to I/O bridge 211.
Network computers are another type of computer system that can be used in conjunction with the teachings provided herein. Network computers do not usually include a hard disk or other mass storage, and the executable programs are loaded from a network connection into the memory 204 for execution by the CPU 202. A Web TV system, which is known in the art, is also considered to be a computer system, but it may lack some of the features shown in
It should be borne in mind, however, that all of these and similar terms are to be associated with the appropriate physical quantities and are merely convenient labels applied to these quantities. Unless specifically stated otherwise as apparent from the following discussion, it is appreciated that throughout the description, discussions utilizing terms such as “processing” or “computing” or “calculating” or “determining” or “displaying” or the like, refer to the action and processes of a computer system, or similar electronic computing device, that manipulates and transforms data represented as physical (electronic) quantities within the computer system's registers and memories into other data similarly represented as physical quantities within the computer system memories or registers or other such information storage, transmission or display devices.
The present example also relates to an apparatus for performing the operations herein. This apparatus may be specially constructed for the required purposes, or it may comprise a general purpose computer selectively activated or reconfigured by a computer program stored in the computer. Such a computer program may be stored in a computer readable storage medium, such as, but is not limited to, read-only memories (ROMs), random access memories (RAMs), EPROMs, EEPROMs, flash memory, magnetic or optical cards, any type of disk including floppy disks, optical disks, CD-ROMs, and magnetic-optical disks, or any type of media suitable for storing electronic instructions, and each coupled to a computer system bus.
The algorithms and displays presented herein are not inherently related to any particular computer or other apparatus. Various general purpose systems may be used with programs in accordance with the teachings herein, or it may prove convenient to construct more specialized apparatus to perform the required method steps. The required structure for a variety of these systems will appear from the description above. In addition, the present examples are not described with reference to any particular programming language, and various examples may thus be implemented using a variety of programming languages.
As described in greater detail herein, embodiments of the invention provide a software application through which a user may customize, via a selection of a single color, the color for one or more user interface (UI) elements included in a graphical user interface (GUI). In particular, a color selection UI is presented to the user, e.g., a color wheel or color picker, from which the user selects the single color. Once the single color is selected, one or more termination colors, which represent end points of color difference from the selected color, are generated, or user-selected. From the selected color, and termination color(s), one or more color palettes, having distinct colors within the range from the selected color to the termination color(s), are generated. In embodiments that include multiple color palettes, each color palette corresponds to a different type of UI element. For example, a first color palette may be associated with typography UI elements and a second color palette may be associated with background UI elements. In embodiments that include two termination colors, each color palette includes both a first shade associated with a first termination color—which is the color white or a user-selected termination color—and a second shade associated with a second termination color—which is the color black or a user-selected termination color. Other shades in the generated palette are associated with colors between the first termination color and the second termination color, although each of the other shades can be manually reassigned to another color by the user if he or she so desires. Finally, for each UI element included in the GUI, the software application associates the UI element with a corresponding color in one of the one or more color palettes. The correspondence of the UI element to a color in one of the one or more color palettes is based on a pre-determined mapping or based on a manual assignment from the user.
In the particular example illustrated in
In one embodiment, each palette also includes, at least by default, white and black colors as first and second termination colors, respectively. In other embodiments, other colors besides white and black are the first and second termination colors, as described in detail below in conjunction with
As described above, a user can select a color for shade 8. For example, the user can select the color for shade 8 by typing in a color number (e.g., hexadecimal color value), selecting the color from a color palette or color wheel, or via any other technique. The shades that lie above shade 8 (shades 1 to 7 and white) represent eight different steps of equally-increasing the RGB value(s) until the RGB value(s) of white (i.e., 255, 255, 255) is reached. In this example, the upper eight different shades are calculated by adding multiples of “16” to each R, G, and B value of shade 8, where the value of “16” is derived from dividing by eight (different shades) the difference between the RGB value(s) of white and shade 8 (i.e., 255−127=128; 128÷8=16). Thus, the RGB value calculated for shade 7 is (127+16,127+16,127+16)=(143,143,143), the RGB value calculated for shade 6 is (127+32,127+32,127+32)=(159,159,159), and so forth. Conversely, the RGB values for the shades that lie below shade 8 (shades 9 to 15 and black) represent eight different steps of equally-decreasing the RGB value(s) of shade 8 until the RGB value of black (i.e., RGB value of (0, 0, 0)) is reached. Accordingly, the lower eight different shades are calculated by subtracting multiples of “16” from each R, G and B value of shade 8, e.g., the RGB value calculated for shade 9 is (127−16,127−16,127−16)=(111,111,111), the RGB value calculated for shade 10 is (127−32,127−32,127−32)=(95,95,95), and so forth. In some embodiments, when the calculations described above produce non-integer numbers, the values can be rounded to the nearest integer value. In other embodiments, the non-integer numbers can be rounded down to the largest integer value.
Alternatively, in one embodiment, when a hue, saturation, and lightness (HSL) color scheme is implemented, the RGB value of shade 8 (i.e., (127,127,127)) is equivalent to an HSL value of (0,0,120), where the hue value has a range between 0 to 239, the saturation value has a range between 0 to 240, and the lightness value has a range between 0 to 240. If the HSL color scheme is implemented, the upper eight different shades are sequentially calculated by adding respective multiples of “15” to the lightness value, where “15” is derived from dividing by eight (different shades) the difference between the lightness value of white and shade 8 (i.e., 240−120).
In other embodiments, the values of the different shades in a palette can be calculated by extrapolating (x,y) coordinates over a color gradient plot, an illustration of which is included in
As further shown in
One having ordinary skill in the art will recognize that any color scheme may be implemented by the embodiments described herein, such as the hue, saturation and value (HSV) color scheme, the cyan, magenta, yellow and black (CMYK) color scheme, and the like.
As described above, each of the UI elements included in user interface 300 is associated with a particular “shade” of color included in one of the background palette 302, the typography palette 304 or the accent palette 306. For example, as shown in
The association of a particular UI element to a particular shade in a particular color palette is defined according to a pre-determined mapping. In one embodiment, the pre-determined mapping is based on a color scheme that has been identified by an administrator as being pleasant to the human eye. In other embodiments, the user can select from a list of pre-determined mappings from UI elements to shades in a color palette or may define a customized mapping. Embodiments of the invention implement the pre-determined mapping according to a variety of techniques including, but not limited to, Cascading Style Sheets (CSS), JavaScript, XML files, server side scripting languages (such as PHP or Active Server Page (ASP.net) technologies), and the like. Also, according to various embodiments, the calculations of different shades included in the palettes may be executed by either one or more web servers 108, software(s) 104 executing on client computer 102 (such as the web browser that displaying to the user the user interface 300), or a combination thereof.
As described above, the illustrations in
The color palette generation interface 320 shown in
In one embodiment, a web server 108 receives the selection of the single color and assigns the selected color as shade 8 included in generated palette 326. Web server 108 then generates the shades that lie above (i.e., tending to white) and below (i.e., tending to black) shade 8 (shades 1 to 7, 9 to 15, white, and black) in the color palette 326 according to the techniques described above.
In some embodiments, a user can edit the range of the shades of the generated palette by selecting an edit range link 300, which causes an interface, such as the one portrayed in
As illustrated in
Furthermore, some embodiments are associated with a single termination color, not two termination colors. In these embodiments, the selected color is placed at the end of the color palette (i.e., as a pseudo-termination color) and the single termination color is located at the other end of the color palette. The software application is then configured to generate the remaining shades of color between the selected color and the single termination color, as described below.
Turning now to
In some cases, the user may wish to modify user interface 300′ to include colors that are different than the selected single color, e.g., a blue color scheme for the UI elements included in modified user interface 300′ that are related to typography. Thus, embodiments of the invention enable the user to click on the link 340 that reads “Edit . . . ” included in any of the background palette 302, typography palette 304 and accent palette 306, which displays to the user color palette generation interface 320 described above in conjunction with
Additionally, in some embodiments, the user may desire to update the particular shade of color and/or palette to which one or more UI elements included in user interface 300 refer, an example of which is illustrated in
Additionally, the user may also directly modify any shade of color included in a palette, e.g., shade 12 included in background palette 302. In one embodiment, the user double-clicks on the shade of color that he or she wishes to change, whereupon a color picker is displayed from which the user is able to select a replacement color. Any UI elements included in user interface 300 that refer to the updated shade of color are correspondingly updated to match the new shade selected by the user. For example, the body of the user interface 300 can be changed from referring to background palette shade 3 to accent palette shade 5.
Additionally, in some embodiments, as shown in
In the example illustrated in
In yet another embodiment, certain UI elements in the GUI may be linked so that the shade numbers of the UI elements maintain a certain distance relative to one another. For example, a first UI element may be associated with shade number “4” and a second UI element may be associated with shade number “8,” where the first UI element and the second UI element are linked. Linking of the first and second UI elements provides that the difference between the color shade numbers of the first and second UI elements is maintained, i.e., the difference is set to 8−4=4. Therefore, if the shade number associated with the second UI element is changed by the user to “7,” then the shade number of the first UI element is automatically changed to “3” to maintain the difference of 4. In addition, the difference is said to “wrap around” when the color shade numbers reach the end of the color palette. For example, if the shade number associated with the second UI element is changed by the user to “1,” then the shade number of the first UI element is automatically changed to “14.” Color shade “14” is 4 color shade units away from color shade “1” based on wrapping around to the other end of the color palette, thereby maintaining a difference of 4 color shade units.
As shown, method 400 begins at step 402, where web server 108 receives a specification of a color. For example, the color may be specified by a user via color palette generation interface 320, described above in conjunction with
At step 404, web server 108 determines whether one or more custom color termination points are specified by the user. For example, according to the techniques described herein, custom color termination points may be specified via palette shade distribution editor 328 or by double-clicking a shade of color in the palette to set that shade of color equal to the specified color. If, at step 404, web server 108 determines that the user does not specify any custom color termination points, then method 400 proceeds to step 406, where web server 108 sets a first termination point as the color white and a second termination point as the color black. For example, white and black termination points may be defined by default. If, however, web server determines that the user specifies one or more custom color termination points, then method 400 proceeds to step 408, where web server 108 sets a first termination point and/or a second termination point according to the one or more custom termination points specified via palette shade distribution editor 328. In one embodiment, the selected color may be set as a first termination point and a default color, such as white or black, may be set as the second termination point.
At step 410, web server 108 generates a palette of colors, e.g., background palette 302, that includes the specified color from step 402 and one or more different shades of color that sequentially transition from the specified color to the first termination point, and one or more different shades of color that sequentially transition from the selected color to the second termination point, as described above in conjunction with
At step 412, web server 108 determines whether the user specifies another color for one or more other palettes, e.g., by selecting a different color for typography palette 304 and/or accent palette 306 than the color that was selected for the background palette 302 generated at step 410. If, at step 412, web server 108 determines that the user specifies another color for another palette, then the method steps 404-410 are repeated according to the techniques described above to define the colors for the other palette.
Otherwise, method 400 proceeds to step 414, where web server 108 sets, for each user interface element that is associated with a particular palette and a particular shade of color in the palette, the UI element to the particular shade of color, as described above in conjunction with
Advantageously, embodiments of the invention provide an improved technique for generating and applying a color theme to a user interface. A color palette is generated according to a base color selected by a user and includes various shades of the color that range between two separate endpoint/termination colors, such as white and black. Various UI elements included in the user interface are each mapped to a shade of color included in the generated color palette, or to various shades of color included in one of additional color palettes with which the user interface is associated. The user may also assign colors to each of the additional color palettes (if included) to establish a contrasting color theme that includes two or more colors. Additionally, the user is able to modify both the color palette and/or the shade of color to which the various UI elements are mapped. As a result, the user is able to generate and apply a color theme to the user interface simply by selecting one base color. Moreover, the user is able to conveniently modify aspects of the contrasting color theme by selecting additional colors, setting endpoint colors, and assigning UI elements to different color palettes, and/or shades of color included therein.
While the forgoing is directed to embodiments of the present invention, other and further embodiments of the invention may be devised without departing from the basic scope thereof. For example, aspects of the present invention may be implemented in hardware or software or in a combination of hardware and software. One embodiment of the invention may be implemented as a program product for use with a computer system. The program(s) of the program product define functions of the embodiments (including the methods described herein) and can be contained on a variety of computer-readable storage media. Illustrative computer-readable storage media include, but are not limited to: (i) non-writable storage media (e.g., read-only memory devices within a computer such as CD-ROM disks readable by a CD-ROM drive, flash memory, ROM chips or any type of solid-state non-volatile semiconductor memory) on which information is permanently stored; and (ii) writable storage media (e.g., floppy disks within a diskette drive or hard-disk drive or any type of solid-state random-access semiconductor memory) on which alterable information is stored. Such computer-readable storage media, when carrying computer-readable instructions that direct the functions of the present invention, are embodiments of the present invention.
It will be appreciated to those skilled in the art that the preceding examples are exemplary and not limiting. It is intended that all permutations, enhancements, equivalents, and improvements thereto that are apparent to those skilled in the art upon a reading of the specification and a study of the drawings are included within the true spirit and scope of the present disclosure. It is therefore intended that the following appended claims include all such modifications, permutations, and equivalents as fall within the true spirit and scope of these teachings.
