TWI602111B - Electronic device and color setting method for user interface - Google Patents

Description

Electronic device and user interface color setting method

The present invention relates to an electronic device and a method of operating the same, and more particularly to a color setting method for an electronic device and a user interface thereof.

The user interface (UI) is a medium for interaction and information exchange between the system and the user. The user interface is designed to interact with each other and is designed to enable the user to interact with each other. It is convenient and efficient to operate the hardware to achieve two-way interaction, to complete the work that you want to complete with hardware, the user interface is broadly defined, including human-computer interaction and graphical user interface, and participate in the communication between human and mechanical information. There are user interfaces in the field.

Software developers design in advance because modern software is often developed by different companies and can then be executed on the same device, and the user interface will overlap. For example, the background of the home screen launcher of the Android system can be replaced, and the user can replace the wallpaper of the desktop. In this case, the interface tool is designed in advance. The color of the widget may be inconsistent with the user's desktop. It would be too much trouble if the user had to re-select the color each time the tablecloth was changed.

In order to solve the above problems, the relevant fields have not exhausted their efforts to seek solutions, but the methods that have not been applied for a long time have been developed. Therefore, how to automatically adjust the color of the user interface is one of the current important research and development topics, and has become an urgent need for improvement in related fields.

One aspect of the present invention is to provide a color setting method for an electronic device and its user interface to solve the problems of the prior art.

The color setting method of the user interface provided by the present invention includes the following steps: capturing a sample image from the display content of the screen, wherein the sample image includes a part of the image of the foreground user interface and a part of the background user interface, A part of the image of the background user interface is adjacent to the periphery of the image of the foreground user interface; analyzing the color parameters of the partial image of the background user interface in the sampled image; and calculating the contrast color parameter according to the color parameter, wherein the contrast is The color parameters are complementary to the color parameters; the color of the foreground user interface is adjusted according to the contrast color parameters.

In another aspect, the electronic device provided by the present invention includes a screen, a screen capture module, a color analysis module, a color selection module, and a color adjustment module. The screen is used to display the background user interface and the foreground user interface; the screen capture module is used to capture the sampled image from the display content of the screen, wherein the sampled image includes the image of the foreground user interface and the background user interface. It Part of the image, part of the image of the background user interface is adjacent to the periphery of the image of the foreground user interface; the color analysis module is used to analyze the color parameters of the image of the background user interface in the sampled image; color selection The module is configured to calculate a contrast color parameter according to the color parameter, wherein the contrast color parameter and the color parameter are complementary; the color adjustment module adjusts the relevant color of the foreground user interface displayed on the screen according to the contrast color parameter.

In summary, the technical solution of the present invention has obvious advantages and beneficial effects compared with the prior art. With the above technical solution, considerable technological progress can be achieved, and the industrial use value is widely used, which has at least the following advantages: 1. When the multiple user interfaces overlap, the color of the foreground user interface is automatically set, and the user is allowed to It has a clear color, which effectively protects the human eye; and 2, no need for the user to manually select the color, simple and convenient.

The above description will be described in detail in the following embodiments, and further explanation of the technical solutions of the present invention will be provided.

The above and other objects, features, advantages and embodiments of the present invention will become more apparent and understood.

100‧‧‧Electronic devices

110‧‧‧ screen

120‧‧‧Screen capture module

130‧‧‧Color Analysis Module

140‧‧‧Color selection module

150‧‧‧Color adjustment module

210, 310‧‧‧ prospect user interface

220, 320‧‧‧ background user interface

222‧‧‧Part image

223‧‧‧First background image area

225‧‧‧second background image area

230‧‧‧Sampling images

250‧‧‧ screen image

260‧‧‧Sampling area

Edge of 311, 312, 313‧‧

315‧‧‧ icon

400‧‧‧Color setting method

410~440‧‧‧Steps

The above and other objects, features, advantages and embodiments of the present invention will become more <RTIgt; </ RTI> <RTIgt; </ RTI> <RTIgt; </ RTI> <RTIgt; The figure is a schematic diagram of foreground and background user interface overlap according to an embodiment of the invention; FIG. 3 is a foreground and background user according to another embodiment of the present invention. A schematic diagram of interface overlap; and FIG. 4 is a flow chart of a color setting method of a user interface according to an embodiment of the invention.

In order to make the description of the present invention more complete and complete, reference is made to the accompanying drawings and the accompanying drawings. On the other hand, well-known elements and steps are not described in the embodiments to avoid unnecessarily limiting the invention.

FIG. 1 is a block diagram of an electronic device 100 according to an embodiment of the invention. As shown in FIG. 1 , the electronic device 100 includes a screen 110 , a screen capture module 120 , a color analysis module 130 , and a color selection module . 140 and color adjustment module 150. In practice, the electronic device 100 can be a tablet computer, a mobile phone, a notebook computer or other portable electronic products, and the screen 110 can be a liquid crystal screen, an electronic paper or other display device. The specific implementation manners of the screen capture module 120, the color analysis module 130, the color selection module 140, and the color adjustment module 150 may be software, hardware, and/or carcass. For example, if the execution speed and accuracy are the primary considerations, the modules can basically be dominated by hardware and/or carcass; if design flexibility is the primary consideration, then the modules are basically The software is mainly used; or, the modules can work together with software, hardware and carcass. It should be understood that the above examples are not intended to limit the present invention, and are not intended to limit the present invention. Those skilled in the art will be able to flexibly select the specific embodiments of the modules as needed. In an embodiment, the screen capture module 120, color The analysis module 130, the color selection module 140, and the color adjustment module 150 can be integrated into a central processing unit, a microcontroller, or similar functional electronic components.

Referring to FIG. 1 and FIG. 2 simultaneously, in an embodiment, the screen 110 can display the screen image 250 as shown in FIG. 2, for example, can be a full screen screen. The background user interface 220 and the foreground user interface 210 of the screen 110 are partially overlapped with each other. For example, the foreground user interface 210 can be an interface tool set, and the background user interface 220 can be a tablecloth. The screen capture module 120 captures the sample image 230 from the display content of the screen 110. The sample image 230 includes an image of the foreground user interface 210 and a partial image 222 of the background user interface 220. The background user interface The image 222 of the portion 220 is adjacent to the periphery of the image of the foreground user interface 210; the color analysis module 130 is configured to analyze the color parameter of the partial image 222 of the background user interface 220 in the sample image 230; The group 140 calculates a contrast color parameter according to the color parameter, wherein the contrast color parameter and the color parameter are complementary; the color adjustment module 150 adjusts the color of the foreground user interface displayed by the screen 110 according to the contrast color parameter, and the color changing process A fade-in/fade-out effect can be used. Thereby, when the multiple user interfaces overlap, the electronic device 100 automatically sets the color of the foreground user interface, so that the user feels the color is distinct, thereby effectively protecting the human eye.

In practice, whenever the background user interface 220 is changed, the user may feel that the color is uncoordinated. In order not to bother the user to manually reselect the color, the screen capture module 120 can automatically detect whether the background user interface 220 is changed. When the background user interface 220 is changed, it is obtained from the screen 110. The screen image 250 is further cropped from the screen image 250, and then processed by the color analysis module 130, the color selection module 140, and the color adjustment module 150. Alternatively, the screen capture module 120 can periodically acquire the screen image 250 from the screen, and then crop the sample image 230 from the screen image 250, and then, by the color analysis module 130, the color selection module 140, and the color. The adjustment module 150 performs subsequent processing. Thereby, the user does not need to manually select the color, which is simple and convenient.

Specifically, the screen capture module 120 defines an area that is outwardly proportionally expanded centering on the position occupied by the foreground user interface 210 as the sampling area 260, thereby overlapping the screen image 250 with the sampling area 260. Clipped out as a sampled image 230, in one embodiment of the invention, the length and width of the sampling region 260 are each 3 times the length and width of the foreground user interface 210, but the screen image 250 is centered with the sampling region 260 non-overlapping ranges are discarded. Thereby, the background range far from the foreground user interface 210 is excluded to improve the reliability of sampling.

The color analysis module 130 divides the partial image 222 of the background user interface 220 in the sample image 230 into the first background image area 223 and the second background image area 225, thereby averaging the first background image area 223. The color value is multiplied by the first weight and the average color value of the second background image area 225 is multiplied by a second weight to derive a color parameter, wherein the second background image area 225 is contiguous with the first background image The periphery of the area 223, and the first background image area 223 is adjacent to the periphery of the image of the foreground user interface 210, the first weight being higher than the second weight. Thereby, the electronic device 100 preferentially considers the first background image area 223 that is closest to the foreground user interface 210, which helps to improve. The highlight of color adjustment.

In practice, the color parameter obtained by the color analysis module 130 corresponds to the first color, and the contrast color parameter calculated by the color selection module 140 according to the color parameter corresponds to the second color, wherein the first color and the second color are mutually For complementary colors. In a superimposed primary color system, such as an RGB system, if two colors can produce white when mixed in equal amounts, the two colors complement each other; in contrast, in a subtractive primary color system, such as a CMYK system, if two When the colors are mixed in equal amounts, a turbid brown that is close to black is produced, and the two colors are complement each other. Taking the RGB system as an example, if the color parameters (R255, G255, B0) correspond to pure yellow, the calculation by the color selection module 140: R (255-255), G (255-255), B (255-0) ), the calculated contrast color parameter (R0, G0, B255) corresponds to blue; if the color parameter (R0, G255, B0) corresponds to green, the calculation by the color selection module 140: R (255- 0), G(255-255), B(255-0), and the calculated contrast color parameters (R255, G0, B255) correspond to purple. On the other hand, HSV is a representation of the point in the RGB system in the cylindrical coordinate system. HSV is hue, saturation, and brightness (Hue, Saturation, Value). The range of Hue is 0~360. Yes (Hue+180) takes the remainder of 360. For example, blue color parameters (R0, G0, B255) in RGB systems can be converted to color parameters (H(240), S(100), V(100)) in HSV systems, while contrasting color parameters It is H ((240 + 180)% 360), S (100), V (100) = H (60), S (100), V (100). It should be understood that the above-mentioned RGB and HSV systems are merely illustrative and are not intended to limit the present invention. In practice, those skilled in the art should flexibly select any color model at that time.

The color adjustment module 150 can change the internal color of the foreground user interface 210 such that the internal color contains the second color described above, thereby highlighting the color of the foreground user interface 210. For example, the internal color of the foreground user interface 210 includes a font color, and if the font color changes to the second color, the font can be more clear than the background. Moreover, the color adjustment module 150 can change the edge color of the foreground user interface 210 so that the edge color has at least a second color, so that the interface between the foreground user interface 210 and the background user interface 220 is more obvious.

In order to further describe the "edge color", please refer to FIG. 1 and FIG. 3 simultaneously. In an embodiment, the screen 110 can display the screen image 350 as shown in FIG. 3, and the screen image 350 presents the background. The user interface 320 and the foreground user interface 310, for example, the foreground user interface 310 can be a menu, and the background user interface 320 can be a tablecloth. The color adjustment module 150 can set the foreground user interface 310 to have a plurality of layer edges 311, 312, 313, and then adjust the color of the edge layer 312 to be alternately arranged by the second color and the first color, for example, an edge. 311, 313 are the second color, and the edge 312 is the first color, so that the boundary between the foreground user interface 310 and the background user interface 320 is more distinct. On the other hand, regarding the internal color of the foreground user interface 210, the color adjustment module 150 can change the color of the icon 315 in the foreground user interface 310 so that the color of the icon 315 contains the second color (eg, the second color border). , the font of the second color, etc.), thereby highlighting the color of the icon 315.

4 is a flow chart of a color setting method 400 for a user interface in accordance with an embodiment of the present invention. As shown in Figure 4, color settings The method 400 includes steps 410-440. It should be understood that the steps mentioned in this embodiment can be adjusted according to actual needs, except that the order is specifically described, and may be performed simultaneously or partially simultaneously. . As for the hardware device for carrying out these steps, since the above embodiments have been specifically disclosed, the description thereof will not be repeated.

If the background user interface and the foreground user interface partially overlap each other, in step 410, a sample image is captured from the display content of the screen, wherein the sample image includes a partial image of the foreground user interface and the background user interface. For example, a part of the image of the background user interface is adjacent to the periphery of the image of the foreground user interface; in step 420, the color parameter of the partial image of the background user interface in the sampled image is analyzed; in step 430, according to the color The parameter calculates a contrast color parameter, wherein the contrast color parameter and the color parameter have complementarity; in step 440, the color of the foreground user interface is adjusted according to the contrast color parameter, and the color change process may adopt a fade in/out effect. Thereby, when the multiple user interfaces overlap, the color setting method 400 automatically sets the color of the foreground user interface, so that the user feels the color is distinct, thereby effectively protecting the human eye.

In practice, whenever the background user interface changes, the user may feel that the color is uncoordinated. In order not to bother the user to manually reselect the color, in step 410, it is possible to detect whether the background user interface changes, when the background user interface is changed. When changing, a screen image is acquired from the screen, and the sampled image is cropped from the screen image, and then processed by steps 420-440. Alternatively, in step 410, a screen image may be periodically acquired from the screen, and then the sampled image is cropped from the screen image, and then, by steps 420-440 Do follow-up processing. Thereby, the user does not need to manually select the color, which is simple and convenient.

Specifically, in step 410, an area that is outwardly proportionally expanded centering on a position occupied by the foreground user interface is defined as a sampling area; and a range overlapping the sampling area in the screen image is cut out as a sample image. . Thereby, the background range far from the foreground user interface is excluded to improve the reliability of sampling.

In step 420, the partial image of the background user interface in the sampled image is divided into a first background image area and a second background image area, wherein the second background image area is adjacent to the first background image. a periphery of the area, and the first background image area is adjacent to the periphery of the image of the foreground user interface; then, the average color value of the first background image area is multiplied by the first weight and the second background image area is The average color value is multiplied by a second weight to derive a color parameter, wherein the first weight is higher than the second weight. Thereby, the color setting method 400 preferentially considers the first background image area 223 closest to the foreground user interface, which helps to improve the highlighting of the color adjustment.

In step 430, the more prominent colors can be selected by the principle of the aforementioned complementary colors. In one embodiment, the color parameter obtained in step 420 corresponds to the first color, and the contrast color parameter calculated according to the color parameter in step 430 corresponds to the second color, and the first color and the second color are complementary colors to each other.

In step 440, the internal color of the foreground user interface can be changed such that the internal color contains a second color to highlight the color of the foreground user interface. For example, the internal color of the foreground user interface includes the font color. If the font color changes to the second color, the font can be compared to the background. More clearly. Alternatively, or in addition, in step 440, the edge color of the foreground user interface may also be changed so that the edge color has at least a second color, so that the interface between the foreground user interface and the background user interface is more obvious.

In order to further highlight the "edge color", in an embodiment, in step 440, the foreground user interface can be set to have a plurality of layer edges, and the color layers of the edge layers are adjusted to be alternately arranged by the first color and the second color.

The color setting method 400 as described above can be implemented by various types of computer devices, such as the aforementioned electronic device 100, etc., and some functions can be implemented as a program product (such as a mobile phone APP) for users to download, or Some functions are stored as an application on a computer readable recording medium, and the computer reads the recording medium to cause a computer system to execute the color setting method 400.

Although the present invention has been disclosed in the above embodiments, it is not intended to limit the present invention, and the present invention can be modified and modified without departing from the spirit and scope of the present invention. The scope is subject to the definition of the scope of the patent application attached.

400‧‧‧Color setting method

410~440‧‧‧Steps

Claims (20)

A method for setting a color of a user interface, comprising: capturing a sample image from a display content of a screen, wherein the sample image includes an image of a foreground user interface and a partial image of a background user interface, The portion of the image of the background user interface is adjacent to the periphery of the image of the foreground user interface; analyzing color parameters of the portion of the image of the background user interface in the sampled image; according to the color parameter, A contrast color parameter is calculated, wherein the contrast color parameter is complementary to the color parameter; and the color of the foreground user interface is adjusted according to the contrast color parameter. The color setting method of claim 1, wherein the step of capturing the sampled image from the screen comprises: detecting whether the background user interface is changed; and acquiring a background from the screen when the background user interface is changed The screen image, and then the sampled image is cropped from the screen image. The color setting method of claim 1, wherein the step of capturing the sampled image from the screen comprises: periodically acquiring a screen image from the screen, and then cropping the sampled image from the screen image. The color setting method of claim 2 or 3, wherein the step of cropping the sampled image from the screen image comprises: An area that is outwardly scaled outwardly centered on the position occupied by the foreground user interface is defined as a sampling area; and a range of the screen image overlapping the sampling area is clipped as the sampled image. The color setting method of claim 1, wherein the step of analyzing the color parameter of the partial image of the background user interface in the sampled image comprises: selecting the portion of the background user interface in the sampled image The image is divided into a first background image area and a second background image area, wherein the second background image area is adjacent to a periphery of the first background image area, and the first background image area is a periphery of the image adjacent to the foreground user interface; and multiplying an average color value of the first background image region by a first weight and multiplying an average color value of the second background image region by a second weight According to the color parameter, the first weight is higher than the second weight. The color setting method of claim 1, wherein the color parameter corresponds to a first color, and the contrast color parameter corresponds to a second color, the first color and the second color being complementary colors. The color setting method of claim 6, wherein the step of adjusting the color of the foreground user interface comprises: changing an internal color of the foreground user interface such that the internal color contains the second color. The color setting method of claim 7, wherein the internal color is Includes font color. The color setting method of claim 6, wherein the step of adjusting the color of the foreground user interface comprises: changing an edge color of the foreground user interface such that the edge color contains at least the second color. The color setting method of claim 9, wherein the step of changing the edge color of the foreground user interface comprises: setting the foreground user interface to have a plurality of layer edges; and adjusting the color of the edge layer edges to The first color is alternately arranged with the second color. An electronic device includes: a screen for displaying a background user interface and a foreground user interface; and a screen capture module for capturing a sample image from the display content of the screen, wherein the sampling The image includes an image of the foreground user interface and a portion of the image of the background user interface, the portion of the image of the background user interface being adjacent to the periphery of the image of the foreground user interface; a color analysis a module for analyzing a color parameter of the image of the portion of the background user interface in the sampled image; a color selection module configured to calculate a contrast color parameter according to the color parameter, wherein the contrast color parameter Complementing the color parameter; and a color adjustment module for adjusting the firefly according to the contrast color parameter The color of the foreground user interface displayed by the screen. The electronic device of claim 11, wherein the screen capture module detects whether the background user interface is changed, and when the background user interface changes, acquiring a screen image from the screen, and further from the screen image The sampled image is cropped in the image. The electronic device of claim 11, wherein the screen capture module periodically acquires a screen image from the screen, and then crops the sample image from the screen image. The electronic device of claim 12 or 13, wherein the screen capture module defines an area that is outwardly proportionally expanded centering on a position occupied by the foreground user interface, and thereby defines the screen image. The range in which the sampling area overlaps is clipped to serve as the sampled image. The electronic device of claim 11, wherein the color analysis module divides the partial image of the background user interface in the sample image into a first background image area and a second background image area, And multiplying the average color value of the first background image area by the first weight and multiplying the average color value of the second background image area by the second weight, thereby obtaining the color parameter, wherein the second background The image area is adjacent to the periphery of the first background image area, and the first background image area is adjacent to the periphery of the image of the foreground user interface, and the first weight is higher than the second weight. The electronic device of claim 11, wherein the color parameter is Corresponding to a first color, the contrast color parameter corresponds to a second color, and the first color and the second color are complement colors. The electronic device of claim 16, wherein the color adjustment module changes an internal color of the foreground user interface such that the internal color contains the second color. The electronic device of claim 17, wherein the internal color comprises a font color. The electronic device of claim 16, wherein the color adjustment module changes an edge color of the foreground user interface such that the edge color includes at least the second color. The electronic device of claim 19, wherein the color adjustment module sets the foreground user interface to have a plurality of layer edges, and then adjusts the color of the edge layers to be alternated by the second color and the first color arrangement.