java GUI to assign array value

Question

There is one Paraview user interface as follow attracted me.

I think this interface can be used to assign value into array. It works like this :

I want to implement this into a Java program but I found no Java API can support my idea. The closest design from me would be adding multiple JSlider like this :

But what if it is a 100 size array, I wouldn't want to add 100 JSliders. Do you have better solution for this ?

Answer 1

Okay, so this is a pretty basic example. It needs a lot more work and optimisation, but should get you moving in the right direction

Have a look at Painting in AWT and Swing, Performing Custom Painting, 2D Graphics and How to Write a Mouse Listener for more details

import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.Shape;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.awt.geom.Ellipse2D;
import java.awt.geom.Path2D;
import java.util.ArrayList;
import java.util.List;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class TestGraph {

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

    public TestGraph() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new GraphPane(0, 100, new int[100]));
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

    public static class GraphPane extends JPanel {

        protected static final int COLUMN_WIDTH = 10;
        protected static final int VERTICAL_INSETS = 10;

        private int[] data;
        private int minValue, maxValue;
        private Path2D.Double graph;
        private List<Shape> buttons;

        private Point mousePoint;

        public GraphPane(int minValue, int maxValue, int[] data) {
            this.data = data;
            this.minValue = minValue;
            this.maxValue = maxValue;

            buttons = new ArrayList<>(data == null ? 25 : data.length);

            updateView();

            MouseAdapter ma = new MouseAdapter() {
                @Override
                public void mouseClicked(MouseEvent e) {
                    updateData(e);
                }

                @Override
                public void mouseDragged(MouseEvent e) {
                    updateData(e);
                }
            };

            addMouseListener(ma);
            addMouseMotionListener(ma);
        }

        protected void updateData(MouseEvent e) {

            // Which "column" was clicked on
            int column = (int) Math.round(((double) e.getX() / (double) COLUMN_WIDTH)) - 1;
            // Get the "height" of the clickable area
            int clickRange = getHeight() - (VERTICAL_INSETS * 2);
            // Adjust the y click point for the margins...
            int yPos = e.getY() - VERTICAL_INSETS;

            // Calculate the vertical position that was clicked
            // this ensures that the range is between 0 and clickRange
            // You could choose to ignore values out side of this range
            int row = Math.min(Math.max(clickRange - yPos, 0), clickRange);

            // Normalise the value between 0-1
            double clickNormalised = row / (double) clickRange;

            // Calculate the actual row value...
            row = minValue + (int) (Math.round(clickNormalised * maxValue));

            // Update the data
            data[column] = row;

            mousePoint = new Point(
                            COLUMN_WIDTH + (column * COLUMN_WIDTH), 
                            getHeight() - (VERTICAL_INSETS + (int) Math.round((data[column] / 100d) * clickRange)));

            updateView();

            repaint();
        }

        @Override
        public void invalidate() {
            super.invalidate();
            updateView();
        }

        protected Shape createButton(int xPos, int yPos) {

            return new Ellipse2D.Double(xPos - COLUMN_WIDTH / 2, yPos - COLUMN_WIDTH / 2, COLUMN_WIDTH, COLUMN_WIDTH);

        }

        protected void updateView() {

            graph = new Path2D.Double();
            buttons.clear();
            if (data != null && data.length > 0) {

                int verticalRange = getHeight() - (VERTICAL_INSETS * 2);

                int xPos = COLUMN_WIDTH;
                int yPos = getHeight() - (VERTICAL_INSETS + (int) Math.round((data[0] / 100d) * verticalRange));
                graph.moveTo(xPos, yPos);

                if (data[0] > 0) {
                    buttons.add(createButton(xPos, yPos));
                }

                for (int index = 1; index < data.length; index++) {

                    xPos = (index * COLUMN_WIDTH) + COLUMN_WIDTH;
                    yPos = getHeight() - (VERTICAL_INSETS + (int) Math.round((data[index] / 100d) * verticalRange));

                    graph.lineTo(xPos, yPos);

                    if (data[index] > 0) {
                        buttons.add(createButton(xPos, yPos));
                    }

                }

            }

        }

        @Override
        public Dimension getPreferredSize() {
            return new Dimension(data == null ? 0 : (data.length + 1) * COLUMN_WIDTH, 200);
        }

        @Override
        protected void paintComponent(Graphics g) {
            super.paintComponent(g);
            if (data != null) {
                Graphics2D g2d = (Graphics2D) g.create();
                g2d.setColor(new Color(64, 64, 64, 32));
                for (int index = 0; index < data.length; index++) {
                    int xPos = (index * COLUMN_WIDTH) + COLUMN_WIDTH;
                    g2d.drawLine(xPos, VERTICAL_INSETS, xPos, getHeight() - VERTICAL_INSETS);
                }

                g2d.setColor(Color.BLACK);
                g2d.draw(graph);

                for (Shape button : buttons) {
                    g2d.fill(button);
                }

                if (mousePoint != null) {
                    g2d.setColor(new Color(255, 192, 203));
                    Ellipse2D dot = new Ellipse2D.Double((mousePoint.x - COLUMN_WIDTH / 2) - 2, (mousePoint.y - COLUMN_WIDTH / 2) - 2, COLUMN_WIDTH + 4, COLUMN_WIDTH + 4);
                    g2d.draw(dot);
                    g2d.setColor(new Color(255, 192, 203, 128));
                    g2d.fill(dot);
                }

                g2d.dispose();
            }
        }

    }

}

Before anyone says I didn't put the "fill" in, I deliberately used a Path2D to make it much simpler to achieve ;)

Answer 2

here is a small example how to create this using polygon class .i sorted x coordinate and use polygon class to make this.

GraphPane.class

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Polygon;
import java.awt.RenderingHints;
import java.util.ArrayList;
import java.util.Collections;
import javax.swing.JPanel;

public class GraphPane extends JPanel {

    ArrayList<XYpoints> poinList = new ArrayList();
    private int px;
    private int py;
    private XYpoints last;
    private boolean drag;
    private static Color graphColor=new Color(32, 178, 170);

    public GraphPane() {
        initComponents();
        poinList.add(new XYpoints(50, 400));
        poinList.add(new XYpoints(450, 50));
        poinList.add(new XYpoints(600, 400));
    }

    private void initComponents() {      
        setBackground(new java.awt.Color(255, 255, 255));
        addMouseMotionListener(new java.awt.event.MouseMotionAdapter() {
            public void mouseDragged(java.awt.event.MouseEvent evt) {
                System.out.println("drag");
                if (drag) {
                    last.setY(evt.getY());
                    GraphPane.this.repaint();
                }
            }
        });
        addMouseListener(new java.awt.event.MouseAdapter() {
            public void mousePressed(java.awt.event.MouseEvent evt) {
                int x = evt.getX();
                int y = evt.getY();

                for (XYpoints poinList1 : poinList) {
                    px = poinList1.getpX();
                    py = poinList1.getpY();
                    if (x < px + 5 && x > px - 5 && y < py + 5 && y > py - 5) {
                        System.out.println("inter");
                        poinList1.setIntersect(true);
                        last = poinList1;
                        drag = true;
                        GraphPane.this.repaint();
                        return;
                    }
                }

                poinList.add(new XYpoints(x, y));
                Collections.sort(poinList, new XComp());
                GraphPane.this.repaint();
            }

            public void mouseReleased(java.awt.event.MouseEvent evt) {
                if (drag) {
                    drag = false;
                    last.setIntersect(false);
                    GraphPane.this.repaint();
                }
            }
        });
    }

    @Override
    protected void paintComponent(Graphics gr) {
        super.paintComponent(gr);

        Graphics2D g = (Graphics2D) gr.create();
        Polygon p = new Polygon();
        g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

        for (XYpoints poinList1 : poinList) {
            px = poinList1.getpX();
            py = poinList1.getpY();
            p.addPoint(px, py);
        }
        g.setColor(graphColor);
        g.fillPolygon(p);

        for (XYpoints poinList1 : poinList) {
            px = poinList1.getpX();
            py = poinList1.getpY();

            g.setColor(Color.red);

            if (poinList1.isIntersect()) {
                g.setColor(Color.blue);
            }
            g.fillOval(px - 5, py - 5, 10, 10);
        }
        g.dispose();

    }
}

XYpoints.class

import java.awt.Polygon;
import java.util.Comparator;

public class XYpoints extends Polygon {

    private int x;
    private int y;
    private boolean inter;

    public XYpoints(int x, int y) {
        this.x = x;
        this.y = y;
    }

    public void setIntersect(boolean state) {
        inter = state;
    }
    public void setY(int y){
        this.y=y;
    }

    public boolean isIntersect() {
        return inter;
    }

    public int getpX() {
        //System.out.println("send " + this.x);
        return this.x;
    }

    public int getpY() {
        return this.y;
    }

}

XComp .class

class XComp implements Comparator<XYpoints> {

    @Override
    public int compare(XYpoints t, XYpoints t1) {

        if (t.getpX() < t1.getpX()) {
            return -1;
        } else {
            return 1;
        }
    }
}

myframe.class

import javax.swing.JFrame;

public class myframe extends JFrame {

    public myframe() {
        GraphPane pane = new GraphPane();
        setContentPane(pane);
        setSize(650, 500);
        setVisible(true);
    }

    public static void main(String[] args) {
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                new myframe();
            }
        });
    }

}