Animated lines in Java Swing

Question

I am currently writing code for creating a monitoring tool which monitors the Amazon Web Services and Amazon Cloud, and visualize my currently running cloud infrastructure.

For example , if the CPU Utilization or the Network I/O increases some threshold value than auto scaling is called and a new instance of EC2 is added to the system, this code is running perfectly but now I am visualizing this thing on the GUI of the tool which shows this activity. I am using Java Swing to create the monitoring tool.

The main help I needed is as following:

I am visualizing client on the top of the frame and EC2 instances below the client and just to show logical connectivity between client and server I am drawing lines between client and EC2 instances.

Now I need these line to be animated - maybe a stroked line moving slowly just to show that there is some traffic between client and EC2 instances also I want that the speed of the animation or stroke movement in the line increases as the traffic increases.(may be a variable to set speed of animation).

I need help on how I could implement such animated lines in Java Swings. Any help is highly appreciated.

*"Best Regards ACoder"* Please leave sigs. out of questions. — Andrew Thompson, Apr 12 '12 at 20:05

score 2 · Answer 1 · answered Apr 12 '12 at 15:38

Here is a small example of moving dashed line fully painted and animated from zero:

private static int speed = 5;

public static void main ( String[] args )
{
    JFrame frame = new JFrame ();
    frame.setLayout ( new BorderLayout () );

    frame.add ( new JComponent ()
    {
        private int diff = 0;

        {
            final Timer timer = new Timer ( 1000 / ( 10 * speed ), null );
            timer.addActionListener ( new ActionListener ()
            {
                public void actionPerformed ( ActionEvent e )
                {
                    if ( diff < 20 )
                    {
                        diff++;
                    }
                    else
                    {
                        diff = 0;
                    }
                    repaint ();
                    timer.setDelay ( 1000 / ( 10 * speed ) );
                }
            } );
            timer.start ();
        }

        protected void paintComponent ( Graphics g )
        {
            Graphics2D g2d = ( Graphics2D ) g;
            g2d.setRenderingHint ( RenderingHints.KEY_ANTIALIASING,
                    RenderingHints.VALUE_ANTIALIAS_ON );
            g2d.setStroke (
                    new BasicStroke ( 5f, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND, 1f,
                            new float[]{ 10f, 10f }, diff ) );
            g2d.setPaint ( Color.BLACK );
            g2d.drawLine ( 0, getHeight () / 2, getWidth (), getHeight () / 2 );
        }
    } );
    frame.add ( new JSlider ( JSlider.HORIZONTAL, 1, 10, speed )
    {
        {
            addChangeListener ( new ChangeListener ()
            {
                public void stateChanged ( ChangeEvent e )
                {
                    speed = getValue ();
                }
            } );
        }
    }, BorderLayout.SOUTH );
    frame.setSize ( 500, 500 );
    frame.setLocationRelativeTo ( null );
    frame.setVisible ( true );
}

Basically for animation you will need to paint most of the things you want to animate. In your case if it is two objects connected with a dashed line - you could use container that paints that connection and just simple Swing components placed on it. So it will detect their bounds and draw connecting lines...

Please, please, please just extend JPanel instead of writing classes within classes within a main... — jpalm, Apr 12 '12 at 18:03
+1 for `RenderingHints` and using `javax.swing.Timer` to pace the animation; a fully qualified name would be nice, but the signature is recognizable. @jjiceman: [_double brace initialization_](http://stackoverflow.com/questions/1958636/what-is-double-brace-initialization-in-java) is a little obscure; ping me if you post an unraveled variation for comparison in another answer. — trashgod, Apr 12 '12 at 18:32
@jjiceman this example could be quickly executed within any other class, that is why i always write shortest examples with the main method included. But i guess i will do next examples as you offered :) — Mikle Garin, Apr 12 '12 at 19:57

score 2 · Answer 2 · edited May 23 '17 at 12:30

2

Animate a BasicStroke. See this answer for example code.

edited May 23 '17 at 12:30

Community

1
1

answered Apr 12 '12 at 20:08

Andrew Thompson

168,117
40
217
433

UVM · Answer 3 · 2012-04-12T15:57:15.620

1

Use JPanel and override its paintComponent() method.This method will be responsible for animation.

public void paintComponent(Graphics g)
 {
 super.paintComponent(g);
 g.setColor(Color.red); 
 g.drawLine(x1,y1,x2, y2); 
}

Increment the x2 again when required.In your case, need to do increment x2 when new connections are handled by the server. Hope this will help you.

edited Apr 12 '12 at 15:57

answered Apr 12 '12 at 15:38

UVM

9,776
6
41
66

Animated lines in Java Swing

3 Answers3