Custom Java Swing Meter Control

Question

I'm trying to make a custom swing control that is a meter.

The arrow will move up and down. Here is my current code, but I feel I've done it wrong.

import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.LinearGradientPaint;
import java.awt.Polygon;
import java.awt.Stroke;
import java.awt.geom.Point2D;
import java.awt.geom.Rectangle2D;

import javax.swing.JFrame;
import javax.swing.JPanel;

public class meter extends JFrame {

Stroke drawingStroke = new BasicStroke(2);
Rectangle2D rect = new Rectangle2D.Double(105, 50, 40, 200);
Double meterPercent = new Double(0.57);

public meter() {

    setTitle("Meter");

    setLayout(null);

    setSize(300, 300);
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setLocationRelativeTo(null);
    setVisible(true);

}

public void paint(Graphics g) {
    // Paint Meter
    Graphics2D g1 = (Graphics2D) g;
    g1.setStroke(drawingStroke);
    g1.draw(rect);

    // Set Meter Colors
    Point2D start = new Point2D.Float(0, 0);
    Point2D end = new Point2D.Float(0, this.getHeight());
    float[] dist = { 0.1f, 0.5f, 0.9f };
    Color[] colors = { Color.green, Color.yellow, Color.red };
    LinearGradientPaint p = new LinearGradientPaint(start, end, dist,
            colors);

    g1.setPaint(p);
    g1.fill(rect);

    // Make a triangle - Arrow on Meter
    int[] x = new int[3];
    int[] y = new int[3];
    int n; // count of points

    // Set Points for Arrow
    Integer meterArrowHypotenuse = (int) rect.getX();
    Integer meterArrowTip = (int) rect.getY()
            + (int) (rect.getHeight() * (1 - meterPercent));
    x[0] = meterArrowHypotenuse - 25;
    x[1] = meterArrowHypotenuse - 25;
    x[2] = meterArrowHypotenuse - 5;
    y[0] = meterArrowTip - 20; // Top Left
    y[1] = meterArrowTip + 20; // Bottom Left
    y[2] = meterArrowTip; // Tip of Arrow
    n = 3; // Number of points, 3 because its a triangle

    // Draw Arrow Border
    Polygon myTriShadow = new Polygon(x, y, n); // a triangle
    g1.setPaint(Color.black);
    g1.fill(myTriShadow);

    // Set Points for Arrow Board
    x[0] = x[0] + 1;
    x[1] = x[1] + 1;
    x[2] = x[2] - 2;
    y[0] = y[0] + 3;
    y[1] = y[1] - 3;
    y[2] = y[2];

    Robot robot = new Robot();

    Color colorMeter = robot.getPixelColor(x[2]+10, y[2]);

    // Draw Arrow
    Polygon myTri = new Polygon(x, y, n); // a triangle
    Color colr = new Color(colorMeter.getRed(), colorMeter.getGreen(), colorMeter.getBlue());
    g1.setPaint(colr);
    g1.fill(myTri);

}

public static void main(String[] args) {
    new meter();
}

}

Thanks for looking.

Answer 1

You could use a JSlider and use setValue(int n) to set the value whenever you need. You can also change the default appearance, so you get an arrow and a gradient as you want.

Answer 2

In addition to @Jonas' example, you might like to look at the article How to Write a Custom Swing Component.

Addendum: On reflection, it looks a little intimidating, but you can extend BasicSliderUI and reuse some of your code in paintThumb() and paintTrack().

JSlider slider = new JSlider();
slider.setUI(new MySliderUI(slider));
...
private static class MySliderUI extends BasicSliderUI {

    public MySliderUI(JSlider b) {
        super(b);
    }

    @Override
    public void paintTrack(Graphics g) {
        Graphics2D g2d = (Graphics2D) g;
        Rectangle r = trackRect;
        g2d.setPaint(new GradientPaint(
            r.x, r.y, Color.red, r.x + r.width, r.y + r.height, Color.blue));
        g.fillRect(r.x, r.y, r.width, r.height);
    }

    @Override
    public void paintThumb(Graphics g) {
        super.paintThumb(g); // replace with your fill() 
    }
}