Displaying 2D array contents on GUI colours

Question

I'm in the process of creating a agent bases modelling program. So far I have the relavent classes to model a simulator, grid, different agents etc. I've also created a 2D array of object e.g. agents moving around the array doing whatever.

I am familary with creating simple GUI's but how do I come about creating a pane\panel which then is added to the GUI. which shows the 2D array on run time with each object with its corresponding colour. Also I want to try and use the MVC pattern to basically display the simulation data differently. Such as one pane shows the different objects colour and another pane showing the same objects but every objects angry levels with different shades of red. Any guidelines would be really helpful also similar tutorials.

Thanks

score 1 · Answer 1 · answered Jan 26 '14 at 02:32

1

I'd create a queue (JMS for a very big list of agents, but there are some in-memory queue implementations that are faster to use) and would allow all your agents to write their states in there. Then in another side, I'd write a consumer that listens to the queue to get these states to be processed by your GUI as they're coming.

If there are too many events, you may want to process them in batches, periodically, according to some refresh rate that makes sense for you.

answered Jan 26 '14 at 02:32

Leo

6,480
4
37
52

Any example please ? The consumer would that be a method within the agent class or a separate class on its own ? – user3112844 Jan 26 '14 at 18:34
if your agents fit into a in-memory collection of some kind, please ignore my answer. See @dakkaron answer. I'd only improve his solution a little not setting only 4 color, but instead using a wider color palette. But I think he/she said it all. – Leo Jan 27 '14 at 01:13

score 1 · Answer 2 · edited May 23 '17 at 10:24

You could use a GUI API like awt and swing (look e.g. at Java 2D game graphics), to create a canvas, upon which you would draw a representation of your system. For example, a set of circles and edges, if the circle is filled, there is an agent there, you can hover mouse over it and or click on it and another panel shows some relevant properties of the agent. Maybe an arrow from a filled circle indicates where the agent is going to go next.

You can instantiate a canvas (like java.awt.canvas), it fits into your GUI as any other widget (panel combo box etc) does it has a size you can add scrollbars etc. As opposed to other controls like combo box, a canvas is a 2d area on which you draw whatever you want.

The MVC is a design structure that separates application concerns along view, control, model axis. Whereas you could put all your control logic such as user input handling, database connection handling, network operations all that could be Don in one place in your canvas class event handling methods, in MVC you would separate all control logic from canvas, canvas event handler would just call the apprpriate controller method (such as handleNewFile). In turn the controller queries the model and tells the view what to show (for instance it loops over all agents in your model and "adds" an agent to the view. The view is where you decide how to represent the agent the controller nothing about representation.

So basically create a canvas with the corresponding row, columns of the 2D array, would the canvas be a component that goes onto the GUI ? Also can I incorporate this in a MVC pattern. — user3112844, Jan 26 '14 at 18:33
How my simulation works is it iterates through the collections and calls the act method in the agents to move around the grid(2D array) effectively one step. What about the refresh rate of the canvas drawing I want to draw the graphics on the canvas ever time 1 step of the simulation is completed. How do I come about achieving this ? — user3112844, Jan 26 '14 at 20:46
@user3112844 SO is a Q&A forum not a discussion forum. Please focus on one question and keep your question focused otherwise if too broad it will get closed. Accept the answer which you found most useful or clarify why an answer does not help enough so author can improve, but don't keep extending with more questions. Try to get enough rep to upvote answers (to any questions not just yours) that you find useful that what makes SO such a useful database. — Oliver, Jan 27 '14 at 06:25

Dakkaron · Answer 3 · 2014-01-27T08:24:20.477

One of the easier ways to go is to create a new Class that extends javax.swing.panel and override the paintComponent()-method.

In the constructor of the new class pass a reference to your 2D-Array.

In your overriden paintComponent()-method do something like this:

public void paintComponent(Graphics g) {
    for (int x=0;x<arrayWidth;x++) {
        for (int y=0;y<arrayHight;y++) {
            switch (array[x][y]) {
                case 1: g.setColor(Color.RED);break;
                case 2: g.setColor(Color.BLUE);break;
                case 3: g.setColor(Color.GREEN);break;
                case 4: g.setColor(Color.YELLOW);break;
            }
            g.drawRect(x*10,y*10,10,10);
        }
    }
}

Just fit the numbers and colors to your needs.

Edit: if you have some kind of values that can't be used in a switch statement (like e.g. custom classes or Strings in older Java-versions) just replace it with if/elseifs:

public void paintComponent(Graphics g) {
    for (int x=0;x<arrayWidth;x++) {
        for (int y=0;y<arrayHight;y++) {
            if (array[x][y].equals(value1)) {
                g.setColor(Color.RED);
            } else if (array[x][y].equals(value2)) {
                g.setColor(Color.BLUE);
            } else if (array[x][y].equals(value3)) {
                g.setColor(Color.GREEN);
            } else {
                g.setColor(Color.YELLOW);
            }
            g.drawRect(x*10,y*10,10,10);
        }
    }
}

The switch statement is coming up with an error "Cannot switch on a value of type Agent. Only convertible int values, strings or enum variables are permitted" — user3112844, Jan 26 '14 at 23:00
then if your array is of Agent, and if your agent has an int value, you do the switch by Agent.getValue() — Leo, Jan 27 '14 at 01:13
You can also replace the switch-case construct with if-elseifs. I will add that to the solution. — Dakkaron, Jan 27 '14 at 08:21

Displaying 2D array contents on GUI colours

3 Answers3