Patent Application
20140047362
This application claims the benefit under 35 U.S.C. §119(a) of a Korean patent application filed on Aug. 10, 2012 in the Korean Intellectual Property Office and assigned Serial No. 10-2012-0087704, the entire disclosure of which is hereby incorporated by reference.
1. Field of the Invention
The present disclosure relates to a system and method that displays graphic user interface (GUI) in a variety of states by combining image effect to enhance user experience.
2. Description of the Related Art
With the development of technology in the field of computers, various types of interfaces have been developed to easy users' experiences in using computers. Today, many electronic devices are implemented with a touch screen to provide a graphic user interface (GUI) in lieu of keyboards. GUIs include various types of menus and images, e.g., windows, scroll bars, icons, control buttons, etc., compared to the traditional DOS command interfaces.
In recent years, attempts have been made to represent the states of GUIs, e.g., a normal state, a clicked state, a selected state, an enabled state, and a disenabled state, in a variety of ways to meet the demand for more attractive GUIs. For example, conventional electronic devices store images corresponding to the states of respective GUIs in a memory for display the respective state of a GUI during operation.
However, the conventional GUI display methods are disadvantageous in that the limited memory capacity is unnecessarily wasted with GUI images, thus reducing the memory capacity and deteriorates the performance of the electronic devices. Conventional GUI display methods also require too many image sources which in turn make it difficult to operate and manage GUIs.
The invention has been made in view of the above problems and provides additional advantages, by providing a graphic user interface (GUI) display system and method for providing a variety of color effects which is achieved by applying color codes corresponding to GUI to chroma key images.
The invention further provides a GUI display system and method for providing texture or cubic effects by applying effect images corresponding to GUI states to chroma key images.
In accordance with an exemplary embodiment of the invention, a graphic user interface (GUI) display method includes: loading a chroma key image of a certain shape for a GUI; applying a color code corresponding to the GUI to the chroma key image; creating a GUI image by combining an effect image corresponding to the GUI with the chroma key image to which the color code is applied; and displaying the GUI image.
In accordance with another exemplary embodiment of the invention, a graphic user interface (GUI) display system includes: a display unit for displaying one or more GUIs; and a controller for: loading a chroma key image of a certain shape for the GUI; applying a color code corresponding to the GUI to the chroma key image; creating a GUI image by combining an effect image corresponding to the GUI with the chroma key image to which the color code is applied; and controlling the display unit to display the GUI image.
The above features and advantages of the invention will become more apparent from the following detailed description viewed in conjunction with the accompanying drawings, in which:
In the following description, although embodiments of the invention are explained based on an electronic device equipped with a GUI display function, it should be understood that the invention is not limited to the embodiments. It will be appreciated that the invention can be applied to all information communication devices, multimedia devices, and their applications, when they are equipped with a memo function, for example, smart phones, portable terminals, mobile communication terminals, Personal Digital Assistants (PDAs), Portable Multimedia Players (PMPs), computers, laptop computers, note pad devices, Wibro terminals, tablet PC, smart TVs, smart refrigerators, etc.
The terms or words described in the present description and the claims should not be limited by a general or lexical meaning, instead should be analyzed as a meaning and a concept through which the inventor defines and describes the invention to comply with the idea of the invention. Therefore, one skilled in the art will understand that the embodiments disclosed in the description and configurations illustrated in the drawings are only preferred embodiments, instead there may be various modifications, alterations, and equivalents thereof to replace the embodiments at the time of filing this application.
As used herein, the singular forms “a,” “an” and “the” are intended to include the plural forms as well, unless expressly stated otherwise. It will be further understood that the terms “includes,” “comprises,” “including” and/or “comprising,” when used in this specification, specify the presence of stated features, integers, steps, operations, elements, and/or components, but do not preclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and/or groups thereof.
Hereinafter, exemplary embodiments of the invention are described in detail with reference to the accompanying drawings.
Referring to
In operation, the input unit 110 creates control signals according to the user's inputs. The input unit 110 may be implemented with a keypad, a dome switch, a jog wheel, a jog switch, etc. The input unit 110 may include a touch sensor, a pressure sensor, a proximity sensor, an electromagnetic sensor, etc. Alternatively, the input unit 110 may also be implemented with various types of pads, e.g., a touch pad (of resistive/capacitive type), Electro Magnetic Resonance (EMR) pad, Electro Magnetic Interface (EMI) pad, etc. The input unit 110 senses, via sensors, user's inputs using a variety of objects, such as the user's body (e.g., hand), a physical tool (e.g., a stylus pen), etc. Further, the input unit 110 may be configured with a number of pads that are multi-layered. Alternatively, the input unit 110 and the display unit 140 may be configured in a layered structure, i.e., a touch screen.
The input unit 110 senses a user's input applied to one or more GUIs. Examples of the user's input are a press gesture, a drag gesture, a flick gesture, etc. In addition, the input unit 110 can also sense multi-points input by a number of input tools or touches.
The storage unit 120 stores commands or programs related to the GUI display system 100. The controller 130 executes the commands and the commands stored in the storage unit 120.
The storage unit 120 may be implemented with a flash memory type, a hard disk type, a multimedia card micro type, a card type of memory (e.g., SD, XD, etc.), a Random Access Memory (RAM), a Static Random Access Memory (SRAN), a Read-Only Memory (ROM), Electrically Erase Programmable Read-Only Memory (EEPROM), a Programmable Read-Only Memory (PROM), a magnetic memory, a magnetic disk, an optical disk, etc.
In an embodiment of the invention, the storage unit 120 stores one or more GUIs and/or images to create GUIs. The storage unit 120 also stores effect images, color codes, chroma key images corresponding to GUIs, etc. The storage unit 120 also stores information regarding GUIs corresponding to user's inputs, or the operations, functions, and states of the GUI display system 100. The storage unit 120 may temporarily or permanently store GUIs created by the controller 130.
The controller 130 controls the entire operation of the GUI display system 100. For example, the controller 130 controls the components to display GUIs on the GUI display system 100.
The controller 130 performs the control operations to display GUIs corresponding to user's inputs, or the operations, functions, and states of the GUI display system 100. The controller 130 loads a chroma key image of a certain shape or form for GUI, and applies a color code corresponding to the GUI to the chroma key image. That is, the controller 130 applies a color code to a chroma key image, where the color code refers to a code according to one of an RGB value, a hex code, and a color value of a palette provided by a mobile device, corresponding to a state, type, etc., of a GUI.
The controller 130 combines an effect image corresponding to a GUI with a chroma key image. The effect image may be an effect corresponding to a state of the GUI, including at least one of a normal state, a clicked state, a selected state, an enabled state, and a disenabled state. In addition, the effect image may correspond to at least one of a texture effect or a cubic effect according to shadow.
The controller 130 controls the display unit 140 to display a GUI image that is created on a chroma key image by applying a color code thereto. The controller 130 can control the display unit 140 to display GUIs, by successively altering the color code or effect image according to time, use frequency, preference, importance, etc. or according to a user's input. A detailed operation of the controller 130 will be provided later referring to the accompanying drawings.
The display unit 140 displays information processed in the GUI display system 100. For example, the display unit 140 displays user interface (UI) or graphic user interface (GUI) related to the control operations of the GUI display system 100.
The display unit 140 may be implemented with a flat display panel, such as a Liquid Crystal Display (LCD), a Thin Film Transistor-liquid crystal display (TFT LCD), Organic Light Emitting Diodes (OLEDs), a flexible display, a three-dimensional (3D) display, or the like.
The display unit 140 may be configured with the touch sensors to serve as a touch screen. That is, the display unit 140 may be implemented with a display panel combined with touch sensors, e.g., a TSP panel. Here, the display unit 140 of a touch screen also serves as an input device.
The display unit 140 can display one or more GUIs. The display unit 140 can also display GUI images created under the control of the controller 130. In addition, the display unit 140 can also display GUI images by successively altering the colors under the control of the controller 130.
In another embodiment, the GUI display system 100 may further include a communication unit 150. The communication unit 150 performs data communication with external systems, in a wired mode or a wireless mode such as RF communication or short-range communication, for example. RF communication may be Wireless LAN (WLAN), Wi-Fi, Wireless broadband (Wibro), World Interoperability for Microwave Access (Wimax), High Speed Downlink Packet Access (HSDPA), etc. Short-range RF communication may be Bluetooth, Radio Frequency Identification (RFID0, Infrared Data Association (IrDA), Ultra Wideband (UWB), Zigbee, etc. Wired short range communication may be Universal Serial Bus (USB), IEEE 1394, Thunderbolt™ of Intel, etc. The communication unit 150 may include one or more communication modules for Bluetooth, Zigbee, UWB, Wireless USB, Near Field Communication (NFC), Wireless LAN, etc.
In an embodiment of the invention, the communication unit 150 receives a chroma key image for GUI, an effect image, a previously created GUI image, etc. from the external systems. In addition, the communication unit 150 may receive a color code according to an RGB value and a hex code from the external system or a palette including values for one or more colors.
It should be understood that the GUI display system 100 shown in
Referring to
Chroma keying refers to a technique that combines two images so that a first image is superimposed on a second image based on color hues, where the second image serves as a chroma key image, i.e., a background image. Chroma key images may have in general colors complementary to those of images to be combined (superimposed), and alternatively patterns, e.g., a check pattern as shown in
In an embodiment of the invention, the chroma key image serves as a background layer to create GUI images, and is removed after GUI images are created.
The GUI display system 100 loads a chroma key image layer of a certain shape in order to create a GUI image. It is preferable that a chroma key image is shaped to correspond to the shape of GUI image. For example, if a GUI image is shaped as a curved rectangle, the chroma key image may be designed in the same shape as the GUI image as shown in
The chroma key image is stored in the GUI display system 100. Alternatively, the GUI display system 100 may download chroma key images from other devices or servers, in data communication, via the applications, software programs, services, etc.
After loading a chroma key image at step 210, the GUI display system 100 applies a color code corresponding to the GUI to the chroma key image (220). The color code may be RGB values, a hex code, or a code corresponding to one of the colors of a palette provided by the GUI display system 100. For example, the color code may be a code made up of RGB values, e.g., (17, 133, 194), (228, 73, 0), etc. Alternatively, the color code may be a hex code, e.g., #415227, #5fa8dc, #383838, etc. The GUI display system 100 may apply a color code corresponding to a GUI to a chroma key image. If a GUI needs to be created in black, the GUI display system 100 applies RGB values (0, 0, 0) or a hex code (#000000) to the chroma key image.
The GUI display system 100 may successively alter color codes and apply them to the chroma key image. In order to provide the color alteration effect to the GUI, the GUI display system 100 may successively alter color codes according to time interval, event, or user's inputs, and apply them to the chroma key image. The GUI display system 100 displays GUI images based on the chroma key images to which the successively altered color codes are applied, so that the user can view the GUIs with a variety of visual effects according to colors during operation. For example, the GUI display system 100 may provide a GUI with a visual effect, fading from a first color to a second color. To this end, the GUI display system 100 may seamlessly and successively change from a color code corresponding to the first color to one that corresponds to the second color, in an interval that is imperceptible to the human eye. In addition, the GUI display system 100 may successively alter color codes corresponding to a first or second color by turns, thereby providing a GUI in a flickering effect.
After applying a color code to the chroma key image at step 220, the GUI display system 100 combines an effect image corresponding to the GUI with the color code applied chroma key image (230).
The effect image may corresponds to a state of the GUI, including at least one of a normal state, a pressed state, a selected state, a highlighted state, an active state, and an inactive state. In addition, the effect image may correspond to at least one of a texture effect or a cubic effect according to shadow. The image with an effect may be shaped to correspond to the shape of GUI.
Referring to
Referring to
Referring to
Referring to
The areas without textures or shades in the images of effects as shown in
Although the embodiments are described based on the state of a corresponding GUI, and the texture, shadow shape, form, and applicable area of effect images, it should be understood that the invention is not limited to the embodiments.
The images with effects are stored in the GUI display system 100. Alternatively, the GUI display system 100 may download the images from other devices or servers, in data communication, via the applications, software programs, services, etc.
The GUI display system 100 combines an effect image with a chroma key image in such a way that the effect image layer is placed on the chroma key image layer, thereby creating the GUI image. For example, as shown in
As such, since the GUI display system 100 can create a GUI image by combining layers of a few effect images according to the states of GUI and the color codes with a layer containing a small amount of the chroma key image, it can prevent the drawbacks associated with wasting the storage space as in the prior art. In addition, since the GUI display system 100 alters effect images and/or color codes applied to a chroma key image in order to represent GUIs according to the states, without loading new GUI images each time as in the prior art when it needs to alter the states of GUIs, thus it can enhance the speed of implementing GUIs.
When the GUI display system 100 provides visual effects according to colors to a GUI, it can alter corresponding color codes in the created GUI image and display it, without loading all of the GUI images corresponding to the respective colors, thereby efficiently providing a variety of visual effects to the GUI. For example, as shown in
The embodiment may be modified in such a way that the GUI display system 100 first combines an effect image with a chroma key image and then applies color codes to the combined, created image. For example, in order to provide a GUI image, combined with an effect image, with visual effects according to color alteration, the GUI display system 100 may apply a color code to the chroma key image.
Referring back to
The GUI display system 100 can successively alter color codes for the displayed GUI image, and apply them to the chroma key image configuring the GUI image. In addition, the GUI display system 100 can also display a GUI image based on successively altered color codes, thereby providing it with a variety of visual effects.
The GUI display system 100 determines whether a user's input applies to a GUI, i.e., a GUI image created and displayed according to the invention (310). Examples of the user's input are a touch input, a proximity input, a hovering input, a press input, etc. The user's input serves to alter the states of a GUI. For example, as shown in
When the GUI display system 100 ascertains that a user's input applies to a GUI at step 310, it loads the corresponding chroma key image (320).
The GUI display system 100 determines a GUI corresponding to the user's input. Since the GUI display system 100 stores information regarding GUIs corresponding to various types of inputs respectively, if it detects a user's input to a GUI, it can search for information regarding the GUI according to the detected input. If the GUI displays system 100 searches for the GUI information, it can determine the GUI corresponding to the detected input, based on the searched GUI information. In addition, the GUI display system 100 can load a chroma key image for the determined GUI.
Examples of the GUI are a dial image, a keyboard, an icon, a control button, a scroll bar or an indicator bar. The chroma key may be shaped to correspond to the shape of GUI image. For example, if a GUI image is shaped as a curved rectangle, the chroma key image may be designed in the same shape as the GUI image as shown in
The chroma key image is stored in the GUI display system 100. The GUI display system 100 may download chroma key images from other devices or servers, in data communication, via the applications, software programs, services, etc.
If the GUI display system 100 detects a user's input to a GUI image that has been displayed, it may not perform a process for loading a chroma key image. In that case, the GUI display system 100 may modify a GUI image, based on the same chroma key image as the GUI image that has been displayed.
After loading a chroma key image at step 320, the GUI display system 100 determines a color code and/or an effect image according to an input (330). For example, if the GUI display system 100 detects an input for altering a normal state of a GUI to a pressed state, it determines an effect image to display an image corresponding to the pressed state. In addition, if the GUI display system 100 detects an input termination for returning a pressed state of a GUI to a normal state, it may alter a color code that corresponds to a first color of the GUI to one that corresponds to a second color.
After determining a color code and/or an effect image according to an input at step 330, the GUI display system 100 applies the determined color code to a chroma key image (340). The color code may be RGB values, a hex code, or a code corresponding to one of the colors of a palette provided by the GUI display system 100. For example, the color code may be a code made up of RGB values, e.g., (17, 133, 194), (228, 73, 0), etc. Alternatively, the color code may be a hex code, e.g., #415227, #5fa8dc, #383838, etc. The GUI display system 100 may apply the determined color code to a chroma key image. If a determined color code corresponds to a black color, the GUI display system 100 applies RGB values (0, 0, 0) or a hex code (#000000) to the chroma key image.
If the GUI display system 100 detects an input to a GUI that has been displayed, it may apply the determined color code to a chroma key image configuring the displayed GUI.
After applying the color code to the image at step 340, the GUI display system 100 combines the determined effect image with the chroma key image to which the color code is applied (350).
The effect image may corresponds to a state of the GUI, including at least one of a normal state, a pressed state, a selected state, a highlighted state, an active state, and an inactive state. In addition, the effect image may correspond to at least one of a texture effect or a cubic effect according to shadow. The image with an effect may be shaped corresponding to the shape of GUI.
The GUI display system 100 combines an effect image with a chroma key image in such a way that the effect image layer is placed on the chroma key image layer, thereby creating the GUI image.
If the GUI display system 100 detects an input for a GUI that has been displayed, it alters the effect image configuring the displayed GUI, via the determined effect image. For example, referring to
After combining the determined effect image with the chroma key image at step 350, the GUI display system 100 displays the GUI image created according to the input (360).
The GUI display system 100 varies the effect image according to the state or the color of the GUI image and displays it, thereby providing the GUI with a variety of effects according to the user's input. For example, as shown in
As described above, the GUI display system and method according to the invention applies color codes to a chroma key image and combines a few effect images with the chroma key image, thereby providing GUIs with a variety of colors and effects to enhance user experience.
In addition, the GUI display system and method according to the invention uses a relatively small amount of image resources to provide a set of GUIs, thereby requiring a relatively small amount of memory, enhancing the speed of implementing GUI, and providing a GUI with a variety of effects.
The above-described methods according to the present invention can be implemented in hardware, firmware or as software or computer code that can be stored in a recording medium such as a CD ROM, an RAM, a floppy disk, a hard disk, or a magneto-optical disk or computer code downloaded over a network originally stored on a remote recording medium or a non-transitory machine readable medium and to be stored on a local recording medium, so that the methods described herein can be rendered in such software that is stored on the recording medium using a general purpose computer, or a special processor or in programmable or dedicated hardware, such as an ASIC or FPGA. As would be understood in the art, the computer, the processor, microprocessor controller or the programmable hardware include memory components, e.g., RAM, ROM, Flash, etc. that may store or receive software or computer code that when accessed and executed by the computer, processor or hardware implement the processing methods described herein. In addition, it would be recognized that when a general purpose computer accesses code for implementing the processing shown herein, the execution of the code transforms the general purpose computer into a special purpose computer for executing the processing shown herein.
Although exemplary embodiments of the invention have been described in detail hereinabove, it should be understood that many variations and modifications of the basic inventive concept herein described, which may be apparent to those skilled in the art, will still fall within the spirit and scope of the exemplary embodiments of the invention as defined in the appended claims.
| Number | Date | Country | Kind |
|---|---|---|---|
| 10-2012-0087704 | Aug 2012 | KR | national |
