directory

Pixel RGB values

Form module design

Complete source code


Hello! Everybody is good! I’m a little grey ape trying to make money to buy hair tonic!

Recently in the development of useful red, green, blue color adjustment, and then want to use a certain color also need to go to the relevant website for query is very troublesome, so I want to use Java GUI to develop a simple color palette. Can adjust the color and get the corresponding red, green and blue color number.

Take a look at a wave of renderings:

In fact, the basic design idea of color toner is very simple:

Using the Java form, set it to red. Green. Then, when we drag the slider to change the RGB values of the three colors, we can use ChangeListener to monitor the event, obtain the corresponding RGB values of the three colors, and display the corresponding colors on the form.

Here may have some friends will ask, so is RGB value? Big bad Wolf to give you a popular science:

Pixel RGB values

In fact, just like all the pictures we usually see, whether they are color photos or black and white photos, they are actually colored. What’s more amazing is that almost all the colors we can see by naked eyes are obtained by mixing Red, Green and Blue with different depths. RGB color mode is a color standard in the industry. It is used to obtain various colors through the changes of red ®, green (G) and blue (B) color channels and their superposition among each other.

Therefore, RGB is the color representing the red, green and blue channels. This standard includes almost all colors that human vision can perceive, and it is one of the most widely used color systems at present. So we can say that all the colored images we see are made up of these three colors.

Form module design

After knowing these, is the module design of the toner.

The first step is to set up the palette form and font, and make a simple panel layout of the form according to our needs. Here we can divide the form into a row of three columns, namely: the first column has three sliders, the second column shows the RGB values of the three colors, and the third column shows the current color.

setTitle("Color palette");
setSize(600.300);
setLayout(new GridLayout(1.3)); // Layout the form
Font font1 = new Font("Regular script", Font.PLAIN, 20);

// Set up a panel to store the slider
JPanel jp_slide = new JPanel(new GridLayout(3.2));
add(jp_slide);

// Set up another panel to hold the control that displays the color number
JPanel jp_color = new JPanel(new GridLayout(3.1));
add(jp_color);
Copy the code

In the first panel, set the red, green and blue color sliders:

// Set the color prompt label
JLabel radtext = new JLabel("Red");
radtext.setFont(font1);
JLabel greentext = new JLabel("Green");
greentext.setFont(font1);
JLabel bluetext = new JLabel("Blue");
bluetext.setFont(font1);

js_red = new JSlider(0.255.255); // Set the red slider
js_green = new JSlider(0.255.0); // Set the green slider
js_blue = new JSlider(0.255.0); // Set the blue slider

jp_slide.add(radtext);
jp_slide.add(js_red);
jp_slide.add(greentext);
jp_slide.add(js_green);
jp_slide.add(bluetext);
jp_slide.add(js_blue);
Copy the code

In the slider setting, we used JSlider control, that is, the slider control. The corresponding three parameters behind this control are the minimum value of the slider, the maximum value of the slider, and the default position of the slider at the beginning, such as the slider representing the red RGB value, the minimum value is 0, the maximum value is 255. The default position of the slider is 255 when the program is running.

In the second panel, place the control that displays the RGB value of the color

// Set the display color color number control
jt_red = new JTextArea("255");
jt_red.setFont(font1);

jt_green = new JTextArea("0");
jt_green.setFont(font1);

jt_blue = new JTextArea("0");
jt_blue.setFont(font1);

jp_color.add(jt_red);
jp_color.add(jt_green);
jp_color.add(jt_blue);
Copy the code

Finally, the color display area is placed

// Set the color display area
colorLB = new JTable();
colorLB.setBackground(Color.red);
add(colorLB);
Copy the code

Now that the controls in the toner are almost all set up, let’s take a look at the effect:

But now when we drag the slider, there is no change in the color display area, because we have not added the corresponding event listener to the control.

Next, we monitor the RGB values of the red, green and blue sliders, and make corresponding responses in the RGB value display area and color display area.

In this case, we need to call the ChangeListener interface, which is the interface that listens for the ChangeEvent event. The ChangeEvent event is triggered when the component value changes, such as the slider value we used here. At the same time, the class (listener) that inherits the ChangeListener interface needs to override the stateChanged(ChangeEvent E1) method where the event is handled.

In the stateChanged(ChangeEvent E1) method of this project, we need to obtain the RGB values of the three sliders and display the corresponding values and colors on the form:

@Override
public void stateChanged(ChangeEvent e) {
// TODO Auto-generated method stub
r = js_red.getValue(); // Get the RGB value of the red slider
g = js_green.getValue(); // Get the RGB value of the green slider
b = js_blue.getValue(); // Get the RGB value of the blue slider

// Display the RGB values of the three colors on the form
jt_red.setText(Integer.toString(r));
jt_green.setText(Integer.toString(g));
jt_blue.setText(Integer.toString(b));

// Display the corresponding color
colorLB.setBackground(new Color(r, g, b));

}
Copy the code

In addition to the slider control, we also need to add listening events for the three types of slider:

js_red.addChangeListener(this);

js_green.addChangeListener(this);

js_blue.addChangeListener(this);
Copy the code

Now, our color palette is almost complete!

 

Complete source code

Finally, attach the full source code:

package toning_device;

import java.awt.Color;
import java.awt.Container;
import java.awt.Font;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.JSlider;
import javax.swing.JTable;
import javax.swing.JTextArea;
import javax.swing.event.AncestorListener;
import javax.swing.event.ChangeEvent;
import javax.swing.event.ChangeListener;

// Define the Toning_device class to inherit from the forms class and implement the ChangeListener interface to monitor component changes such as slider values
public class Toning_device extends JFrame implements ChangeListener{

// Set the control to public
public JSlider js_red,js_green,js_blue; // Define the slider control
public JTable colorLB; // Define the label for the color display
public JTextArea jt_red, jt_green, jt_blue; // Define the control to display the color number
public int r,g,b; // Define integer data to represent red, green, and blue

public static void main(String[] args) {
// TODO Auto-generated method stub
new Toning_device(); // Call the class to execute the constructor
}

public Toning_device(a){
setTitle("Color palette");
setSize(600.300);
setLayout(new GridLayout(1.3)); // Layout the form
Font font1 = new Font("Regular script", Font.PLAIN, 20);

// Set up a panel to store the slider
JPanel jp_slide = new JPanel(new GridLayout(3.2));
add(jp_slide);

// Set up another panel to hold the control that displays the color number
JPanel jp_color = new JPanel(new GridLayout(3.1));
add(jp_color);

// Set the color prompt label
JLabel radtext = new JLabel("Red");
radtext.setFont(font1);
JLabel greentext = new JLabel("Green");
greentext.setFont(font1);
JLabel bluetext = new JLabel("Blue");
bluetext.setFont(font1);

js_red = new JSlider(0.255.255); // Set the red slider
js_green = new JSlider(0.255.0); // Set the green slider
js_blue = new JSlider(0.255.0); // Set the blue slider

jp_slide.add(radtext);
jp_slide.add(js_red);
jp_slide.add(greentext);
jp_slide.add(js_green);
jp_slide.add(bluetext);
jp_slide.add(js_blue);

// Set the display color color number control
jt_red = new JTextArea("255");
jt_red.setFont(font1);
jt_green = new JTextArea("0");
jt_green.setFont(font1);
jt_blue = new JTextArea("0");

jt_blue.setFont(font1);

jp_color.add(jt_red);
jp_color.add(jt_green);
jp_color.add(jt_blue);

// Set the color display area
colorLB = new JTable();
colorLB.setBackground(Color.red);
add(colorLB);

js_red.addChangeListener(this);
js_green.addChangeListener(this);
js_blue.addChangeListener(this);

setVisible(true);
setLocationRelativeTo(null);
}

@Override
public void stateChanged(ChangeEvent e) {
// TODO Auto-generated method stub
r = js_red.getValue(); // Get the RGB value of the red slider
g = js_green.getValue(); // Get the RGB value of the green slider
b = js_blue.getValue(); // Get the RGB value of the blue slider

// Display the RGB values of the three colors on the form
jt_red.setText(Integer.toString(r));
jt_green.setText(Integer.toString(g));
jt_blue.setText(Integer.toString(b));

// Display the corresponding color
colorLB.setBackground(newColor(r, g, b)); }}Copy the code

Feel good remember to like attention yo!

** At the same time you can also pay attention to my micro public number “** Gray Wolf hole main **” background reply “**Java information” to get Java video highlights, Java programmers interview treasure book, software framework actual combat and project case analysis and other information sharing!

Big bad Wolf is looking forward to progress with you!