In 16 years, due to work needs, I needed to get the color of the specified location according to the UI map. I downloaded several color picking software on the Internet, and the operation was inconvenient, so I spent some time to make one.
You may find it difficult to make such a software, but it is not difficult. The UI interface plus a series of optimizations only took a few hours.
How to do it
First of all, you have to know what Windows API is, excerpted from Baidu Encyclopedia: Windows API is the Windows application programming interface, which is a system programming interface for the Microsoft Windows operating system family.
Windows API can do many things, such as simulating mouse clicks, modifying memory data, etc. Wait. What we have to do to make a screen color picker is to use it to take screenshots and pick colors.
Knowing what to do, the next step is to design the program.
The general design of the software:
For user experience (our own experience), our software should be available on call, at least not to turn it off and reopen it after use, so we put it in the tray at the bottom right corner of the desktop Go in and call out with shortcut keys.
After the software is called out, if it stops at a certain position in the form of a window, and we just want to take the point of that position, it will cause interference. Therefore, we design the color picking window as a small window that moves with the mouse.
It is difficult to accurately select the color value of a certain coordinate point with the mouse. Therefore, we can display the color of the 10 pixels of the mouse circle in the form of small squares. Click the small square on the software to accurately select the pixel of a coordinate point.
After getting the coordinate value, you need to copy the color value. We design to click the color value and copy it directly to the clipboard. The
final rendering is as follows:
After the software starts, it will be minimized to the tray icon in the lower right corner
Ctrl+Alt+X: Call out the software color picking interface
Ctrl+Alt+C: Hide the software color picking interface
Shift: After calling out the software color picking interface, hold down the Shift key to pick the color The interface will follow the mouse to move, get the color code of 10 pixels in the mouse position
Ctrl+Alt+S: Copy the color value to the clipboard and
click the small square on the color picking interface to get the color value at the small square and
click to pick the color Color value text on the interface, automatically copy the color value to the clipboard
The design is complete, and the coding phase begins.
Digression: I want to talk about pseudo-code here. You have learned pseudo-code when you learn programming, and it can be understood as a code description. However, we basically don't write pseudo-code. Many comrades have unclear needs and code first. Whether you think about it or not, write it first, if there is a problem, change it, and finally find that you can't write it like this, delete it and write again. I think pseudo-code can play a role in organizing the design. Many times you may find that you can’t write it like this. Writing pseudocode can help you discover this in advance. Pseudocode is actually a very important thing, but it does not have much space in the book and it is ignored by many people. (Many people don’t even bother to write comments now)
Coding design:
Get the color of 10 pixels in the mouse circle, that is, 21 grids horizontally and vertically.
-Define a 21*21 two-dimensional array to save the color value of the
coordinates near the mouse position . Everyone should know the screen coordinate system. The upper left corner is 0,0, the horizontal axis is the X axis, and the vertical axis is the Y axis.
-Get the coordinates (x, y) of the current position of the mouse
-Loop traversal, traverse the abscissa from x-10 to x+10, and traverse the ordinate from y-10 to y+10 { -Store the coordinate color value into a two-dimensional array Middle -} -Plot the color values of the two-dimensional array to the software
(Take a look at the function of pseudo code) After
writing the pseudo code, we can see two key points, get the mouse coordinates, and get the color code of the coordinate position. After solving these two points, the core of the entire software can be written. The code for these two key points can almost be copied from Baidu.
Let's take a look at this pseudo-code again. The logic is very simple, but when the code is actually written, it may be a very long code. If the code is written in one method, it will look very complicated and it is not convenient to maintain it later.
From this pseudo code, we can already see that the first sentence defines a two-dimensional array, which must be a global variable, because we must use it more than just this place. The second sentence, call the system function to get the position of the mouse on the screen, normal code. Then enter the loop, a piece of ordinary code. The last sentence is to display the data on the screen. This can be used as a method. It has little to do with our logic. If we don't need interface display, this code can be omitted.
After the code is written, you can directly treat the pseudo code as a comment. Many comrades don’t have the habit of writing comments. I suggest you write more. If you take over a project where you basically can’t see the comments, you will definitely greet the people who wrote in the previous wave N times. In turn, you wrote one like this The people who take over will greet you in their hearts.
Going back to the program just now, I ran into a problem. I found that directly fetching colors from the screen is a very time-consuming operation, resulting in one card for the software, what should I do?
We usually develop our own modules at work, and we often encounter some problems. At this time, we will ask colleagues for help. After colleagues come, we will jump around and show the code to others. After watching for a long time, we will show colleagues I'm confused.
But if we can write the whole logic of our own code in pseudo-code, colleagues will know what you want to do at a glance, and there will be no need to follow your code to understand your needs. This will save a lot of time, and you may find the problem yourself in the process of writing pseudocode.
For the above question, I guess that the function of getting the window handle will be called every time we get the color value. Now we have more than 400 grids. Suppose we take 10 milliseconds once, and 400 points will take 4 seconds. What should I do? Change to 100 grids? Reducing the number of grids is the last resort. There is really no way to use this method.
I change the way, I first take a screenshot of the screen and save it in the memory, and get the color value at the coordinate from the memory. Pseudo code is written like this
-Define a 21*21 two-dimensional array to save the color value of the coordinates near the mouse position
-Get the coordinates (x, y) of the current position of the mouse
-Capture the screen image and save it in the memory
-Loop through, the abscissa is from x- Traverse 10 to x+10, and traverse the ordinate from y-10 to y+10 { -Store the coordinate color value on the memory image in a two-dimensional array -} -Draw the color value of the two-dimensional array to the software
I tried it, and it didn't get stuck.
We sometimes encounter some problems at work, but there is more than one way to solve the problem. If one solution does not work, we can try to use other solutions instead of stumbling on one point.
The core of the software is finished. The next step is to make the interface. The interface does not need to be beautiful, but it must be comfortable to use.
It seems that this software is almost done, but there are actually big problems. For example, our pseudo code does not take into account that the mouse moves to the edge of the screen, and the array index will be less than 0.
Many problems were not thought of when they were written, so they were not considered, so after writing the code, be sure to test more and try to find the reasons that might make it crash.
Some things look magical, but as long as you dare to think and do it yourself, it is not as difficult as you think.
However, to make a software well, it takes a lot of time and energy to design.
The source code of the project of my screen color picker is open sourced here. The code is VB. It can be run with the simplified version of VB6.0, with an exe file that can be run directly. (Although I majored in Java, Java is really inconvenient for desktop applications)
github: https://github.com/lieyanfeimao/screencolor
code cloud: https://gitee.com/edadmin/screencolor
Windows API used:
GetAsyncKeyState: Determine whether the key is pressed or not.
BitBlt: Perform bit_block conversion on the pixels in the specified source device environment area to transfer to the target device environment. (Screenshot operation)
GetCursorPos: Get the coordinates of the mouse on the screen
GetDC: Get the device handle
getpixel : Get the RGB color value of the pixel at the specified coordinate point
SetProcessDpiAwareness: Set the DPI scaling mode
SetWindowPos: Set the window to the top
GetDeviceCaps: Get the DPI set by the system, different DPI corresponds to different screen zoom ratios
The API used can be viewed on Baidu for a detailed explanation
Author: Hyun-wing cat 2019-10-25