Flight

Management
Systems

Flight Management Systems

Java GUI – 3
Programming Graphical User Interfaces in Java.
Java Graphics

Joan Vila Carbó & Angel Rodas Jordá

Universitat Politècnica de Valencia (UPV)
Index

Basic Concepts
• Graphics, pixels, component hierarchy, primitives,
attributes
Primitives using Graphics library
Primitives using Graphics2D library
Repainting
• Problem definition
• Examples
• paintComponent method. Exercises
Designing a graphical traffic monitoring system

J. Vila & A. Rodas 2

Basic Concepts. Graphics
 Window is like a painter’s canvas
 App must paint its window contents
- Java components paint themselves
- Anything else: Programmer

 When to paint?
 How to paint?

JButton
J. Vila & A. Rodas
Basic Concepts. Pixels

(0,0) (width,0)

(0,height) (width, height)

J. Vila & A. Rodas

Basic Concepts. Component Hierarchy
 Each component has its own subwindow
- Subwindow = rectangular area within parent component
- Has own coordinate system
 Clipping:
- Can’t paint outside its subwindow
- Can’t paint over child components?
(0,0) JPanel
(0,0) JButton
JButton
(wb, hb)

J. Vila & A. Rodas

(wp, hp)
Basic Concepts. Painting Components

 Can paint any component

 JPanel is good for custom graphics area

JButton
JPanel

J. Vila & A. Rodas

Basic Concepts. Painting in Java
import java.awt.Graphics
import java.awt.Graphics2D // Java2

1. Get the “graphics context” of component

Graphics g = myJPanel.getGraphics();
Graphics2D g2 = (Graphics2D) g;
2. Paint in it
g2.drawLine(x1, y1, x2, y2);

J. Vila & A. Rodas

 Basic Concepts. Graphics Primitives
Draw Fill
 Point (x,y)

 Line (pt1,pt2)

 PolyLine (pt list)

 Arc

 Oval (pt, w,h)

 Rectangle (pt, w,h)

 RoundRectangle

 Polygon (pt list)

 Image (file, x,y)

 Text (string, x,y) label

J. Vila & A. Rodas
Basic Concepts. Graphics Attributes
 Color
 Font
 Stroke attributes:
• Line width, dash, end caps, joins, miter
 Paint attributes:
• Color, gradient, texture
 Composite:
• Blending
 Transforms:
• Translate, rotate, flip, shear, scale

J. Vila & A. Rodas

Basic Concepts. Color
 Combinations of Red, Green, Blue
 Each [0, 255]
Color constant Color RGB value
public final static Color ORANGE orange 255, 200, 0
public final static Color PINK pink 255, 175, 175
public final static Color CYAN cyan 0, 255, 255
public final static Color MAGENTA magenta 255, 0, 255
public final static Color YELLOW yellow 255, 255, 0
public final static Color BLACK black 0, 0, 0
public final static Color WHITE white 255, 255, 255
public final static Color GRAY gray 128, 128, 128
public final static Color LIGHT_GRAY light gray 192, 192, 192
public final static Color DARK_GRAY dark gray 64, 64, 64
public final static Color RED red 255, 0, 0
public final static Color GREEN green 0, 255, 0
public final static Color BLUE blue 0, 0, 255

 Java: new Color(255, 150, 0)

 Method setColor(color) Hokie Orange

J. Vila & A. Rodas

Index

Basic Concepts
• Graphics, pixels, component hierarchy, primitives,
attributes
Primitives using Graphics library
Primitives using Graphics2D library
Repainting
• Problem definition
• Examples
• paintComponent method. Exercises
Designing a graphical traffic monitoring system

J. Vila & A. Rodas 11

Primitives using Graphics library
Method Description
public void drawLine( int x1, int y1, int x2, int y2 )
Draws a line between the point (x1, y1) and the point (x2, y2).
public void drawRect( int x, int y, int width, int height )

Draws a rectangle of the specified width and height. The top-left corner
of the rectangle has the coordinates (x, y). Only the outline of the rectangle
is drawn using the Graphics object’s color—the body of the rectangle is
not filled with this color.
public void fillRect( int x, int y, int width, int height )

Draws a filled rectangle with the specified width and height. The top-left
corner of the rectangle has the coordinate (x, y). The rectangle is filled
with the Graphics object’s color.
public void clearRect( int x, int y, int width, int height )

Draws a filled rectangle with the specified width and height in the
current background color. The top-left corner of the rectangle has the
coordinate (x, y). This method is useful if the programmer wants to
remove a portion of an image.
public void drawRoundRect( int x, int y, int width, int height,
int arcWidth, int arcHeight )

Draws a rectangle with rounded corners in the current color with the
specified width and height. The arcWidth and arcHeight determine
the rounding of the corners (see Fig. 12.20). Only the outline of the shape is
drawn.

J. Vila & A. Rodas

 Primitives using Graphics library
Method Description
public void fillRoundRect( int x, int y, int width, int height,
int arcWidth, int arcHeight )

Draws a filled rectangle with rounded corners in the current color with the
specified width and height. The arcWidth and arcHeight determine
the rounding of the corners (see Fig. 12.20).
public void draw3DRect( int x, int y, int width, int height, boolean b )

Draws a three-dimensional rectangle in the current color with the specified

width and height. The top-left corner of the rectangle has the
coordinates (x, y). The rectangle appears raised when b is true and
lowered when b is false. Only the outline of the shape is drawn.
public void fill3DRect( int x, int y, int width, int height, boolean b )

Draws a filled three-dimensional rectangle in the current color with the

specified width and height. The top-left corner of the rectangle has the
coordinates (x, y). The rectangle appears raised when b is true and
lowered when b is false.
public void drawOval( int x, int y, int width, int height )

Draws an oval in the current color with the specified width and height.
The bounding rectangle’s top-left corner is at the coordinates (v, y). The
oval touches all four sides of the bounding rectangle at the center of each
side (see Fig. 12.21). Only the outline of the shape is drawn.
public void fillOval( int x, int y, int width, int height )

Draws a filled oval in the current color with the specified width and
height. The bounding rectangle’s top-left corner is at the coordinates (x,
y). The oval touches all four sides of the bounding rectangle at the center of
each side (see Fig. 12.21).
J. Vila & A. Rodas
Primitives using Graphics library
Method Description
public void drawArc( int x, int y, int width, int height, int startAngle, int
arcAngle )
Draws an arc relative to the bounding rectangle’s top-left x and y coordinates with the specified
width and height. The arc segment is drawn starting at startAngle and sweeps
arcAngle degrees.
public void fillArc( int x, int y, int width, int height, int startAngle, int
arcAngle )
Draws a filled arc (i.e., a sector) relative to the bounding rectangle’s top-left x and y
coordinates with the specified width and height. The arc segment is drawn starting at
startAngle and sweeps arcAngle degrees.

J. Vila & A. Rodas

Index

Basic Concepts
• Graphics, pixels, component hierarchy, primitives,
attributes
Primitives using Graphics library
Primitives using Graphics2D library
Repainting
• Problem definition
• Examples
• paintComponent method. Exercises
Designing a graphical traffic monitoring system

J. Vila & A. Rodas 15

Primitives using Graphics2D library
 Can use Graphics legacy mode to drawing primitives:
- g2.drawLine( ), .drawRect( ), …
- g2.fillRect( ), …
 Object oriented:
1. Create shape:
- import java.awt.geom.*
- shape = new Point2D.Float(x, y);
- Line2D, Rect2D, CubicCurve2D, …
2. Draw the shape:
- g2.draw(shape);
- g2.fill(shape);

J. Vila & A. Rodas

Primitives using Graphics2D library
 Legacy Color and font:
- g2.setColor( new Color(r,g,b) );
- g2.setFont( new Font(…) );
 Advanced:
- g2.setStroke(…);
- g2.setPaint(…); // extends setColor in Graphics2D
- g2.setComposite(…);
- g2.setTransform(…);
 Steps
1. Set graphics attributes
2. Draw graphics

J. Vila & A. Rodas

Primitives using Graphics2D library

J. Vila & A. Rodas

Primitives using Graphics2D library

J. Vila & A. Rodas

Primitives using Graphics2D library

J. Vila & A. Rodas

Primitives using Graphics2D library

J. Vila & A. Rodas

Primitives using Graphics2D library

J. Vila & A. Rodas

Primitives using Graphics2D library

J. Vila & A. Rodas

Primitives using Graphics2D library

J. Vila & A. Rodas

Primitives using Graphics2D library

J. Vila & A. Rodas

Primitives using Graphics2D library

J. Vila & A. Rodas

Primitives using Graphics2D library

J. Vila & A. Rodas

Primitives using Graphics2D library

J. Vila & A. Rodas

Primitives using Graphics2D library

J. Vila & A. Rodas

Primitives using Graphics2D library

Other methods

g2.scale(shape);
g2.rotate(shape);
g2.shear(shape);
g2.clip(shape);

J. Vila & A. Rodas

 Exercises
Exercise 1. Drawing a rectangle and a text.
Try and observe if graphics are persistent
private void textButtonActionPerformed(java.awt.event.ActionEvent evt)
{
Graphics g = canvasPanel.getGraphics();
Graphics2D g2 = (Graphics2D) g;

g2.setColor(Color.red); // establecemos color rojo

g2.fillRect(50, 50, 200, 100); // rectángulo

Font font = new Font("Serif", Font.PLAIN, 40);

// Establece el tipo de fuente
g2.setFont(font);
// Dibuja una cadena de texto
Done!
g2.drawString("Hola mundo", 20, 40);
// Establece la sugerencia de usar suavizamiento de orillas
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
// Dibuja una cadena de texto
g2.drawString("Hola mundo", 20, 200);
}
J. Vila & A. Rodas
 Exercises
Exercise 2. Execute and observe the code Done!
Exercise 3. Paint selected flight in a Panel
TODO: method paintTraffic invoked from updateTraffic callback. Consider airplane
as a 5x5 white rectangle identified with its hexid code

Insert a panel !!
// area of interest: Comunitat Valenciana

double latNorth = 42.0;

double
double
latSud = 37.0;
lonWest = -4.0;
TODO!
double lonEast = 4.0;

// size
double sizeEW = lonEast - lonWest;
double sizeNS = latNorth - latSud;

// normalization supposing Panel name is radarPanel

int y = (int) (radarPanel.getHeight() * (latNorth - lat) / sizeNS);
int x = (int) (radarPanel.getWidth() * (lon - lonWest) / sizeEW);

J. Vila & A. Rodas 32

Index

Basic Concepts
• Graphics, pixels, component hierarchy, primitives,
attributes
Primitives using Graphics library
Primitives using Graphics2D library
Repainting
• Problem definition
• Examples
• paintComponent method
Designing a graphical traffic monitoring system

J. Vila & A. Rodas 33

Repainting. Concept
 Screen is like a painter’s canvas
- All windows paint on the same surface!
- Windows don’t “remember” what is under them

 Need to re-paint when portions are newly exposed

 Receive Repaint events
- Open, resize, bring to front
- When other windows in front move, resize, close

J. Vila & A. Rodas

 Repainting. Example

MyApp
J. Vila & A. Rodas
 Repainting. Example

Open WinExp, Notepad

J. Vila & A. Rodas
 Repainting. Example

Close
Explorer

Repaint event sent to: MyApp, Desktop

J. Vila & A. Rodas
 Repainting. Example

Desktop gets repaint event

J. Vila & A. Rodas
 Repainting. Example

MyApp JPanel gets repaint event

J. Vila & A. Rodas
 Repainting. Example

MyApp JPanel forwards repaint event to JButton

J. Vila & A. Rodas
Repainting. Dispatching event

GUI MANAGER QUEUE

GUI THREAD

REQUEST
R1 R2 RN

update( )

J. Vila & A. Rodas

Repainting. Dispatching event

 Repaint event:
- Java Swing components catch repaint event, and call their
paintComponent( ) method
- Default paintComponent( ) method paints component
‣ E.g. panel background color

 Sub-class the component (typically JPanel)

 Over-ride paintComponent( ) method
- Custom graphics here
 Can call repaint( ) to invoke paintComponent( )

J. Vila & A. Rodas

Repainting. Example code
public class MyPanel extends JPanel {

public void paintComponent(Graphics g){

super.paintComponent(g); // erases background
Graphics2D g2 = (Graphics2D)g; //cast for java2

// my graphics:
Hello World
g2.setColor(new Color(255,0,0));
g2.fillRect(10,10,200,50);
g2.setColor(new Color(0,0,0));
g2.drawString("Hello World", 10, 10);
}
}

J. Vila & A. Rodas

 Repainting

Typical program structure for Dynamic Graphics

 Store data structure of window contents

- E.g. user drawn picture in paint program

 Repaint event:
- Erase window (draw background color)
- Draw window contents using data structure

 Other event that alters window contents:

- modify the data structure
- send repaint event

J. Vila & A. Rodas

Repainting

Problem: Flashing
 Ugly flashing when repaint:

- Paint background
- Redraw shapes

J. Vila & A. Rodas

Repainting

Solution: Double buffering

J. Vila & A. Rodas

Repainting

 Double buffered repaint:

- Draw all graphics in temporary off-screen image
Paint background color
Paint shapes
- Then paint image to JPanel

 Bonus: Swing does this for you!

- Draw graphics on JPanel
- JPanel maintains off-screen image

J. Vila & A. Rodas

 Repainting. Exercises
Exercise 4. Rewrite exercise 1 to achieve persistence

Only red
rectangle is
persistent

Insert a JPanel and name its variable canvasPanel

Create a new class derived from JPanel and name CPaint
We need override paintComponent method in CPaint class
Problems with Netbeans automatic code generation
Customize Code
J. Vila & A. Rodas 48
 Repainting. Exercises
Exercise 4. Rewrite exercise 1 to repaint.

We need to modify
this protected code
Using Customize
Code Menu

J. Vila & A. Rodas 49

 Repainting. Exercises

Exercise 4b. Add a Slider to change rectangle pos.

Method repaint() is used to refresh and to invoke paintComponent()

Done!

J. Vila & A. Rodas 50

Index

Basic Concepts
• Graphics, pixels, component hierarchy, primitives,
attributes
Primitives using Graphics library
Primitives using Graphics2D library
Repainting
• Problem definition
• Examples
• paintComponent method. Exercises
Designing a graphical traffic monitoring system

J. Vila & A. Rodas 51

 Designing a graphical traffic monitoring system
Class support to insert traffics in graphical panels
See Traffic_graphics packet
New TrafficGraphics and TrafficGraphicsMap class
New Interfaces

J. Vila & A. Rodas 52

 Designing a graphical traffic monitoring system
TrafficGraphicsMap class

J. Vila & A. Rodas 53

 Designing a graphical traffic monitoring system
TrafficGraphicsMap class

J. Vila & A. Rodas 54

 Designing a graphical traffic monitoring system
Exercise 5. Inserting traffic objects and maps in panels

paintComponent method and repaint method used

Map in vectorial format
Improvements: select flights and view its attributes in a panel
J. Vila & A. Rodas 55
 Designing a graphical traffic monitoring system
Exercise 6. Improve exercise 5 with bitmaps

Map as a image (use JLabel instead of JPanel)

Airplanes represented as images
More improvements: start and stop antenna, emulator, etc
J. Vila & A. Rodas 56