Java GUI to assign an array value

Question

There is one Paraview user interface as it attracts me.

I think this interface can be used to assign a value to an array. It works as follows:

I want to implement this in a Java program , but have not found that the Java API does not support my idea . The closest design from me will add a few JSlider, like this:

But what if it is an array of size 100, I would not want to add 100 JSliders. Do you have a better solution for this?

Answer 1

Good, so this is a pretty simple example. It takes a lot more work and optimization, but you have to move in the right direction.

See 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 that I did not add “padding”, I deliberately used Path2D to make it a lot easier to achieve;)

Answer 2

here is a small example of how to create this using the polygon class. I sorted the x coordinate and applied the polygon class to do 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(); } }); } }