KR20080060689A - Method and device for providing color selection interface - Google Patents

Abstract

A method and a device for providing a color selection interface are provided to enable a user to select various kinds of colors needed for web design, quickly detect/output the color selected by the user based on location information of a cursor, and enable the user to resize the color selection interface freely by providing the color selection interface based on painting. An interface screen display unit(202) paints a color selection interface, which includes a selection bar for selecting a color component among color, brightness, and saturation, and a window for selecting the remaining brightness and saturation components, to a web browser. The color component is continuously painted in the selection bar, and the brightness and saturation components are continuously painted in the window based on color component selection information. A color component detector(204) detects a value of the color component selected through the selection bar by recognizing location information of a cursor. A brightness/saturation component detector(206) detects the value of the brightness and saturation components selected through the window by recognizing the location information of the cursor.

Description

Method and device for providing a color selection interface {Method and Device for Providing Color Selection Interface}

1 illustrates an example of a color selection interface in accordance with a preferred embodiment of the present invention.

2 is a block diagram showing a configuration of a color selection device according to an embodiment of the present invention.

3 is a view showing a display screen for detecting color according to the position of the cursor according to an embodiment of the present invention.

4 is a diagram illustrating a display screen for detecting brightness and saturation according to a position of a cursor according to an exemplary embodiment of the present invention.

5 is a flow chart showing the overall flow of the color selection method according to an embodiment of the present invention.

6 shows an example of a color scheme of HSV.

7 is a diagram showing an example of program code implemented in Visual Basic for converting HSV to RGB.

The present invention relates to a method and apparatus for providing a color selection interface, and more particularly, to a method and apparatus for providing a color interface for allowing a user to select a color when designing a web page.

Conventional web services have been a form of providing information unilaterally, but in recent years, the participation and openness of users is becoming more and more important. In particular, such changes are occurring in blogs and personal homepages.

This culture is called Web 2.0, and User Created Contents (UCC) are the main content on the web rather than content produced by service providers.

Accordingly, there is a demand for a content production tool that can reflect various needs of users, and various technologies that can reveal the personality of users and attract participation are being studied.

In particular, color is a factor that significantly affects the mood of web pages when users design blogs or personal homepages, and users demand a means of using various kinds of colors according to their personalities.

Conventionally, although the user can set the background color and the text color of the blog or the personal homepage, the user is provided with a limited kind of color and a part of the user is selected. Did not meet the needs of users.

In order to solve this problem, a technique of providing an image file expressing various kinds of colors and providing a selected color in the image has been used, but when a color is provided as an image, it is impossible to enlarge or reduce the image. There was a problem that it took a considerable time to load the selected color.

In order to solve the conventional problems as described above, the present invention proposes a method and apparatus for providing a color selection interface in a web page that can select a variety of colors required by the user.

Another object of the present invention is to provide a method and apparatus for providing a color selection interface in a web page that can quickly detect and output a color selected by a user based on position information of a cursor.

It is still another object of the present invention to provide a method and apparatus for providing a color selection interface in a web page that a user can freely enlarge and reduce by providing a color selection interface by painting rather than in the form of an image.

Another object of the present invention is to propose a method and apparatus for providing a color selection interface in a web page capable of cross-browsing regardless of the type of web browser.

Still other objects of the present invention will be readily understood through the following description of the embodiments.

In order to achieve the above object, according to an aspect of the present invention, there is provided a selection bar for selecting any first component of hue, lightness and saturation and a window for selecting the remaining second and third components. (A) painting a color selection interface to the web browser; (B) sequentially painting the first component on the selection bar and recognizing cursor position information to sense a value of the first component; (C) continuously painting the second and third components on the window based on the sensed first components; A method of providing a selection interface in a web page is provided, the method comprising: (d) recognizing cursor position information to sense values of the second component and the third component.

The above method may further include converting the sensed hue, brightness and saturation values into RGB values.

The method may further include determining a type of a web browser, and the step (a) paints the color selection interface using a canvas or a gradient filter according to the type of the web browser.

Step (b) is normalization of the cursor on the selection bar using the vertical coordinates of the cursor on the screen on which the color selection interface is displayed, the vertical coordinates of the starting point of the selection bar on the display screen, and length information of the selection bar. The value of the first component is calculated by calculating the relative position.

The step (c) may be performed by calculating a normalized relative horizontal position of the cursor in the window by using the horizontal coordinate of the cursor on the display screen, the minimum horizontal coordinate of the window on the display screen, and the horizontal length information of the window. Calculating a second component and calculating a normalized relative vertical position of the cursor in the window by using the vertical coordinate of the cursor on the display screen, the minimum vertical coordinate of the window on the display screen, and the vertical length information of the window; The value of the third component is calculated.

According to another aspect of the present invention, there is provided a recording medium in which a combination of instructions for performing the above-described method is tangibly implemented, and in which a program can be read by a digital data processing apparatus.

According to another aspect of the invention, painting a color selection interface on a web browser comprising a selection bar for selecting any first component of hue, brightness and saturation and a window for selecting the remaining second and third components. An interface display unit, in which the first component is continuously painted on the selection bar, and the second and third components are continuously painted together on the window based on the first component selection information; A first component detecting unit recognizing cursor position information and sensing a value of the first component selected through the selection bar; And a second and third component detector including second and third component detectors for recognizing cursor position information and sensing values of the second and third components selected through the window. An apparatus for providing a color selection interface is provided on a page.

Hereinafter, with reference to the accompanying drawings will be described in detail a preferred embodiment of the method and apparatus for providing a color selection interface according to the present invention.

The present invention proposes an interface tool for user's color selection and application in designing web pages such as blogs and personal homepages.

Before describing the present invention, a method of expressing color will be described. A common way of expressing color on the web is to use the R.G.B (Red, Green, Blue) system. The R.G.B system is a way of expressing a lot of colors using the principle of the three primary colors of light. The monitor is coated with a luminous material that emits three colors and is free to mix the light intensity of the three colors, and the graphics card stores each of the three colors in video memory. Combining these three colors of light can produce a variety of colors.

Another color expression method is the HSV method using hue, saturation, and brightness. Here, the color means what color the color represents when it is arranged in the order of red, week, oar, second, wave, south, and beam, and the saturation indicates the degree of clarity and turbidity of the color, and the brightness is bright and dark. Indicate the degree.

6 is a diagram illustrating an example of a color system of HSV. The HSV color system is represented by a conical coordinate system as shown in FIG. 6, and arranged on a circle in a rainbow color order from red to purple is called a color wheel. The color represents the position of the color in degrees on the color wheel.

The color saturation increases as you go out of the center of the circle, and the saturation becomes weaker as you go out to the center. In addition, in Fig. 6, the brightness is increased toward the broad side of the cone, and the brightness decreases toward the pointed side.

According to a preferred embodiment of the present invention, the HSV color system allows a user to select a color and converts the selected HSV value into an RGB value for presentation on a monitor.

1 illustrates an example of a color selection interface according to an exemplary embodiment of the present invention.

Referring to FIG. 1, a color selection interface using an HSV color system is provided, and the color selection interface may include a color selection bar 100, a brightness / saturation window 102, and an applied color display window 104.

The color selection bar 100 continuously displays colors from red to purple. The user selects a desired color among the colors displayed on the color selection bar 100 using a user interface device such as a mouse.

When the user selects a specific color through the color selection bar 100, the brightness / saturation window 102 corresponding to the selected color is activated. In the lightness / saturation window 102, the vertical axis represents saturation and the horizontal axis represents lightness.

1 illustrates a state in which the brightness / saturation window 102 is activated when the user selects a color of a yellow color scheme.

The user can move the cursor and select brightness and saturation for the selected color simultaneously through the brightness / saturation window, and the color corresponding to the position of the cursor is included in the applied color display window 104 as the user moves the cursor. .

1 illustrates an interface for selecting a color through a bar in one dimension and simultaneously selecting brightness and saturation using a two-dimensional window, but selecting either brightness or saturation through a bar first, and then resting the window through the window. It will be apparent to those skilled in the art that an interface may be provided to select two.

For example, a window may be provided in which a brightness is selected first through a bar and a color and saturation are displayed at once, and a window may be provided in which a brightness and a color are displayed at a time and a saturation is selected first through a bar.

As shown in Fig. 1, a user can select a wider variety of colors by selecting one of hue, lightness, and saturation continuously by selecting one of the bars, and by selecting the other two consecutively in a window displaying consecutively. In addition, the color selection process can be relatively simple. In particular, the degree of freedom of color selection is significantly increased when compared to the conventional way of providing a limited number of colors and allowing one to be selected.

2 is a block diagram showing the configuration of a color selection device according to an embodiment of the present invention.

2, a color selection device according to an embodiment of the present invention includes a browser type determiner 200, an interface screen display 202, a color detector 204, a brightness / saturation detector 206, and an HSV. It may include a / RGB converter 208.

The browser type determination unit 200 determines a browser type on which the color selection interface is to be displayed. Currently, various web browsers such as Internet Explorer, Netsscape Navigator, Firefox, Opera, etc. are used, and the browser type determining unit 200 determines which web browser the user uses.

According to an embodiment of the present invention, the color selection interface as shown in FIG. 1 is dynamically painted without providing an image in the form of an image. In this case, the command for painting the color selection interface may be set differently depending on the browser type. For example, if your browser supports canvas, you can edit the command to paint the color selection interface using the canvas. If your browser does not support canvas, you can edit the command to paint the color selection interface using a gradient filter or the like.

That is, the browser type determination is for selecting which tool to paint the color selection interface. As such, the color selection interface that is dynamically painted can be adjusted in size as compared with the existing image, and the user's convenience is improved as compared with the case where the interface is provided with the image.

The interface screen display unit 202 paints the color selection interface shown in FIG. 1 on the user display device according to the browser type. The interface screen display unit 202 may display the color selection interface in the currently activated browser window or may display the color selection interface through a separate pop-up window.

The color detector 204 detects a color selected by a user using a color selection bar. As shown in FIG. 6, the color is represented by a color wheel of 360 degrees, and has a value of 1 to 360, and the color detector 204 determines which of these values corresponds to the color selected by the user.

According to a preferred embodiment of the present invention, the color selected by the user is detected by using the position information of the cursor. In the conventional color selection method, the color selection interface is provided as an image, and color information is provided in association with each pixel of the image.

That is, in the conventional case, when a user selects a specific color from the color selection interface image, color, brightness, etc. are sensed by extracting corresponding color information (HSV value or RGB).

However, when color information is directly extracted from an image as described above, a considerable operation is required, and a task of associating color information for each pixel of the image also takes a considerable time.

In particular, it is common for a user to determine which color to select while moving the cursor quickly when selecting a color. According to the conventional method, there is a problem in that the user cannot provide color selection information corresponding to the fast cursor movement of the user.

Therefore, according to a preferred embodiment of the present invention, a method for detecting the position information of the mouse on the display screen, and extracting the color value only by a simple operation that uses the position information of the mouse as a variable. A detailed method of extracting color values using only the location information of the mouse will be described in detail with reference to FIG. 3.

The brightness / saturation detector 206 detects brightness and saturation selected by the user through the brightness / saturation window 102 after selecting a color. As in the case of color selection, the brightness / saturation detection unit 206 calculates brightness and saturation values using the position information of the mouse on the display screen, and a method of calculating brightness and saturation will be described in detail with reference to FIG. 4. .

The HSV / RGB converter 208 converts the detected color, brightness, and saturation into values of an RGB system, which is a color system commonly used on the web. The method of converting HSV values to RGB values will be described later.

In FIG. 2, a color is first detected, and brightness and saturation are shown. However, as described above, one of brightness and saturation may be first detected and the other two components may be detected according to the shape of the color selection interface. It will be apparent to those skilled in the art.

The final output RGB value is finally applied to the web page. For example, it may be applied as the background color of a personal web page or may be applied as the color of a specific text.

3 is a diagram illustrating a display screen for detecting a color according to a position of a cursor according to an exemplary embodiment of the present invention.

Referring to FIG. 3, a color selection bar 302 is shown on a display screen 300 such as a monitor.

The color selection bar 302 displays a color in one dimension and detects a color using only height information.

In FIG. 3, the portion indicated by cursor means vertical coordinate information of the cursor on the display screen, and the portion indicated by Huebar.bottom means vertical coordinate information of the bottom portion of the color selection bar on the display screen, and Huebar.height is the color. The total length information of the selection bar.

When the user moves the cursor using a mouse or the like, the color detector detects vertical coordinate information on the display screen of the cursor and outputs a color value corresponding to the position of the cursor as shown in Equation 1 below.

In Equation 1 above, when the vertical coordinate of the bottom of the color selection bar is subtracted from the vertical coordinate of the cursor, height information on the color selection bar of the cursor is calculated. In addition, when the height on the color selection bar of the cursor is divided by the total length of the color selection bar, relative position information on the color selection bar of the normalized cursor having a value between 0 and 1 is calculated.

As described above, since the color has a value between 1 and 360, the color value is output when the normalized value is multiplied by 360.

That is, the present invention outputs the color value by a simple calculation as shown in Equation 1 by using the position information of the mouse. It is possible.

4 is a diagram illustrating a display screen for detecting brightness and saturation according to a position of a cursor according to an exemplary embodiment of the present invention.

Referring to FIG. 4, a brightness / saturation window 402 is shown on a display screen 400 such as a monitor.

To detect brightness, the ordinate value of the cursor is used. In FIG. 4, v.cursor means vertical coordinate information of a cursor, and a part indicated by v.bottom means vertical coordinate information of a bottom portion of a brightness / saturation window on a display screen, and v.height is a brightness / saturation window. Means vertical height information.

The method of detecting brightness is the same as the method of detecting color bars. The detection of brightness may be performed through the following equation (2).

The cursor's abscissa value is used to detect saturation. In FIG. 4, s.cursur means horizontal coordinate information of the cursor, s.bottom means horizontal coordinate information of the leftmost side of the brightness / saturation window, and s.height means horizontal width information of the brightness / saturation window. do.

Saturation is also the same as the case of detecting the color and brightness as shown in Equation 3 below, only the vertical coordinate information is replaced with the horizontal coordinate information.

5 is a flow chart showing the overall flow of the color selection method according to an embodiment of the present invention.

The method illustrated in FIG. 5 may be executed through a script of a web page provided to a user, or may be executed through an application of an ActiveX control type installed in a user client.

Referring to FIG. 5, first, a type of a browser installed in a user client is determined (S500). It is determined whether the painting in the browser can be done through the gradient filter or the browser can be painted through the canvas.

For example, with Microsoft's Internet Explorer, you can paint with gradient filters, and with browsers like Firefox and Opera, you can paint with canvas.

In the case of a browser capable of painting by canvas, painting the color selection interface as shown in FIG. 1 using the canvas (S502). In the case of a browser capable of painting by the gradient filter, selecting a color as shown in FIG. 1 using the gradient filter. Painting the interface (S504).

As described above, by painting the interface by determining the type of browser, cross-browsing that enables a user to provide a color selection interface in any browser is possible.

When the color selection interface is painted, the user selects color, brightness, and saturation using the color selection bar and the brightness / saturation window of the color selection interface, and first uses the cursor position information in the user's color selection bar to select the color value. In operation S506, a color detection algorithm such as Equation 1 is used.

When the user selects a specific color, a brightness / saturation window for selecting brightness and saturation corresponding to the selected color is activated (S508).

When the brightness / saturation window is activated and the user places the cursor at a specific position of the brightness / saturation window by using a mouse, the brightness and saturation are detected according to the cursor position information (S510). A lightness / saturation detection algorithm like Eq. 3 is used.

When the hue, brightness, and saturation values are respectively detected, the HSV values are converted to RGB values that are available on the web.

When converting HSV to RGB, in the case of achromatic color with zero saturation, R, G, and B all have the same intensity, and the value is expressed in brightness. Therefore, R, G, and B all have the same value as brightness.

In the case of the non-saturated saturation color, it is first determined whether one of the six colors of the color wheel corresponds. When R is the strongest and B is the weakest, the color is between 0 and 60 degrees in the color wheel, and since R has the strongest value, the brightness V has the same value as R. Saturation S is a normalization of the difference between the lightest and darkest colors to the brightest color and has a relationship as in Equation 4 below.

On the other hand, in the color wheel, the relative position H centered around R, G, and B is the second difference between the darkest color and the darkest color divided into the brightest and the darkest color, and has the relationship as shown in Equation 5 below.

The HSV is converted to RGB by using the relationship as shown in Equations 4 and 5, and FIG. 7 shows an example of program code implemented in Visual Basic to convert HSV to RGB.

Preferred embodiments of the present invention described above are disclosed for purposes of illustration, and those skilled in the art will be able to make various modifications, changes, and additions within the spirit and scope of the present invention. Additions should be considered to be within the scope of the following claims.

As described above, according to a preferred embodiment of the present invention, it is possible to select various types of colors required by the user, and to quickly detect and output a color selected by the user based on the location information of the cursor. There is this.

In addition, according to a preferred embodiment of the present invention, by providing a color selection interface by painting rather than in the form of an image, the user can freely enlarge and reduce, and there is an advantage that can be cross-browsed regardless of the type of web browser.

Claims (10)

(A) painting a color selection interface in a web browser comprising a selection bar for selecting any first component of hue, brightness and saturation and a window for selecting the remaining second and third components; (B) sequentially painting the first component on the selection bar and recognizing cursor position information to sense a value of the first component; (C) continuously painting the second and third components on the window based on the sensed first components; And detecting (d) values of the second component and the third component by recognizing cursor position information. The method of claim 1, And converting the sensed hue, brightness, and saturation values into RGB values. The method of claim 1, The method may further include determining a type of the web browser, and the step (a) may include painting the color selection interface using a canvas or a gradient filter according to the type of the web browser. How to Provide. The method of claim 1, Step (b) is normalization of the cursor on the selection bar using the vertical coordinates of the cursor on the screen on which the color selection interface is displayed, the vertical coordinates of the starting point of the selection bar on the display screen, and length information of the selection bar. And calculating a value of the first component by calculating the relative position. The method of claim 4, wherein Step (c) is, Calculating the second component by calculating a normalized relative horizontal position of the cursor in the window by using the horizontal coordinate of the cursor on the display screen, the minimum horizontal coordinate of the window on the display screen, and the horizontal length information of the window; Calculate the value of the third component by calculating the normalized relative vertical position of the cursor in the window using the vertical coordinate of the cursor on the display screen, the minimum vertical coordinate of the window on the display screen, and the vertical length information of the window. Method for providing a color selection interface in a web page, characterized in that. A recording medium in which a combination of instructions for performing the method of claims 1 to 5 is tangibly embodied and in which a program can be read by a digital data processing apparatus. An interface display for painting in a web browser a color selection interface comprising a selection bar for selecting any first component of hue, lightness, and saturation and a window for selecting the remaining second and third components; One component is continuously painted and the window is continuously painted with a second component and a third component based on first component selection information; A first component detecting unit recognizing cursor position information and sensing a value of the first component selected through the selection bar; And And a second and third component detector including second and third component detectors for recognizing cursor position information and detecting values of the second and third components selected through the window. Device for color selection interface The method of claim 7, wherein And a HSV / RGB converter for converting the sensed hue, brightness, and saturation values into RGB values. The method of claim 7, wherein The first component detecting unit normalizes the cursor on the selection bar by using the vertical coordinate of the cursor on the screen on which the color selection interface is displayed, the vertical coordinate of the starting point of the selection bar on the display screen, and length information of the selection bar. And calculating a value of the first component by calculating the calculated relative position. The method of claim 9, The second and third component detectors, Calculating the second component by calculating a normalized relative horizontal position of the cursor in the window by using the horizontal coordinate of the cursor on the display screen, the minimum horizontal coordinate of the window on the display screen, and the horizontal length information of the window; The value of the third component is calculated by calculating a normalized relative vertical position of the cursor in the window using the vertical coordinate of the cursor on the display screen, the minimum vertical coordinate of the window on the display screen, and the vertical length information of the window. Apparatus for providing a color selection interface in the web page, characterized in that the calculation.

Images