Using SVG graphics

Scaleable Vector Graphics ( SVG) is a vector file format from the W3C. SVG is a widely supported, resolution independant graphics file format that can be used with Aria and Aria.

SVG images can be created by experienced graphic designers and provide a relatively compact format. Sympathic use of SVG graphics can greatly enhance the overall visual impact of your application. Aria provides several painter classes, components and evan a Swing look and feel that support SVG. However, SVG is not just for eye candy, and rich, iteractive components can be built into your application to provide advanced, eye catching features.

Installing the components

Aria's SVG Components are designed for use in a wide range or Rich Internet Applications for purposes such as mapping, facilities management, interactive drawings and illustration. A rich developer API is provided that integrates with other Aria components and services. The API is designed to allow easy access to backend services so that the SVG components may be used for easy visualization of complex spatial data or just to add some extra interaction to your application.

Component details

DisplaySvg

A JComponent class that can display SVG images.

GrabMap

The GrabMap class provide a means of dragging an SVG image in conjunction with the SvgImageMap class using the mouse.

The component can be added to an application that uses the SvgImageMap quite easily, as shown below.

Setting up a grab map

 public class Welcome extends Page
 {
   protected SvgImageMap svgImage;	
 
   public void pageCreated()
   {
     svgImage = new SvgImageMap();
     svgImage.setURL( ClassLoader.getSystemResource( "images/image1.svg" ));
     GrabMap grabMap = new GrabMap( svgImage );		
   }
 }

GroupHierarchy

The GroupHierarchy class extracts the group hierarchy from and SVG image. The group hierarchy is then stored in a DefaultMutableTreeNode instance so that the group hierarchy can be displayed in a tree component.

Setting up a group hierarchy

 public class Welcome extends Page
 {
   protected SvgImageMap svgImage;	
   public void pageCreated()
   {
     svgImage = new SvgImageMap();
     svgImage.setURL( ClassLoader.getSystemResource( "images/image1.svg" ));
 
     GroupHierarchy gh = new GroupHierarchy( svgImage );
     DefaultMutableTreeNode root = gh.getGroupHierarchy();
     JTree tree = new JTree( root );
 
     JFrame frame = new JFrame(); 
     frame.setSize( 375, 400 );
     frame.setLocation( 100, 100 );
     frame.getContentPane().add( new JScrollPane( tree ),    
     BorderLayout.CENTER ); 
     frame.setVisible( true );	
   }
 }

HotSpotInfo

An interface that can be implemented by any class that needs to have data passed to it from InfoFileParser class.

InfoFileParser

Used to parse an xml file and pass the information to a class implmenting the StatusInfo interface.

MapArea

Defines an area's bounds based on a set of points.

OverlayComponent

A non-opaque component, in which other components can be added, that can be used as an overlay.

PointSystem

The PointSystem class allows conversion of a coordinate from the svg coordinate system to the application coordinate system and vice versa. It can be used in an application as follows.

Use a point system

 public class Welcome extends Page
 {
   protected SvgImageMap svgImage;	
 
   public void pageCreated()
   {
     svgImage = new SvgImageMap();
     svgImage.setURL( ClassLoader.getSystemResource( "images/image1.svg" ));
     PointSystem pointSystem = new PointSystem( svgImage );
     Point2D p1 = pointSystem.glassPaneToSvg( 100.0, 200.0 );      
   }
 }

PopUpWindow

A pop-up window that can be used to display textual information.

RenderingSemephore

Used to insure that seperate calls to render the SVG image occur independently.

RolloverComponent

The RolloverComponent class is used to display a Swing component on the glass pane when a mouse rollover event occurs.

 public class Welcome extends Page
 {
   protected SvgImageMap svgImage;	
   protected JComponent glassPane;
   protected RolloverComponent rc;
 
   public void pageCreated()
   {
     glassPane = (JComponent)( (Applet)project.getStartupObject()   
     ).getGlassPane();
     glassPane.setOpaque( false ); 
     glassPane.setLayout( new BorderLayout() );
 
     svgImage = new SvgImageMap();
     svgImage.setURL( ClassLoader.getSystemResource(
     "images/image1.svg"));	
 
     Graph graph = new Graph();
 
     rc = new RolloverComponent( new JComponent[]{ graph } );
     rc.setBounds( 349, 233, 11, 11 );
     glassPane.add( rc );   
   }
 }

In the above example, when a mouse rollover event occurs on the RolloverComponent , the Graph component will be displayed on the glass pane.

RoutePlotter

Used to plot a route within an SVG image using a series of waypoints.

SelectionZoom

The SelectionZoom class allows zooming of the Svg image displayed in the SvgImageMap class by selecting a region using the CTRL key and the mouse.

It can be added to an application as shown below.

Adding a selection area

 public class Welcome extends Page
 {
   protected SvgImageMap svgImage;	
 
   public void pageCreated()
   {
     svgImage = new SvgImageMap();
     svgImage.setURL( ClassLoader.getSystemResource( "images/image1.svg" ));
     SelectionZoom zoomSelection = new SelectionZoom( svgImage );
   }
 }

SelectSvgArea

Used to select a region within an svg image an return all elements within that region.

SvgImageMap

The SvgImageMap class manages the display of an SVG image. The class extends the Aria Panel class to provide a panel within which the SVG image can be displayed.

The SvgImageMap can be added to a page as follows:

Adding an SvgImageMap component

 <SvgImageMap name="imageMap1" x="50" y="50" w="200" h="150" 
 content="images/image1.svg">

Or via Java code as follows: Adding an SvgImageMap via Java

 public class Images extends Page
 {
   protected XPanel panel;
   protected SvgImageMap svgImage;	
 
   public void pageCreated()
   {
     Panel panel = (Panel)findComponent( "panel1" );
     svgImage = new SvgImageMap();
     svgImage.setURL( ClassLoader.getSystemResource( "images/image1.svg" ));
     panel.add( svgImage );
   }
 }

SvgLayer

A layer, which elements can be added to, that can be added to an svg image.

SvgMagnifyingWindow

The SvgMagnifyingWindow class provides a means of zooming an SVG image in conjunction with the SvgImageMap class. The class provides a component for displaying the zoomed SVG image.

Below is an example of setting up the magnifying window in a page. First the window is added through XML:

Adding an SvgMagnifyingWindow via XML

 <SvgMagnifyingWindow name="magWindow" x="0" y="0" h="180" w="200" background="white" >

Then the remaining set-up work is done in the pageCreated method and using the mouseMoved method of the MouseMotionListener interface: Setting up the magnifier

 public class Magnification extends Page implements MouseMotionListener
 {
   protected SvgImageMap imageMap;
   protected SvgMagnifyingWindow magWindow;
 
   public void pageCreated()
   {
     imageMap = (SvgImageMap)findComponent("imageMap");
     magWindow = (SvgMagnifyingWindow)findComponent("magWindow");
 
     imageMap.addMouseMotionListener( this );
 
     magWindow.setBorder( BorderFactory.createLineBorder( 
     Color.GRAY, 2 ));
     magWindow.setDiagram( imageMap.getSvgDiagram() );
     magWindow.setImageMap( imageMap );
     magWindow.setScaleFactor( 5.0F ); 
   }
 
   public void mouseMoved( MouseEvent e )
   {
     magWindow.setZoomPoint( e.getPoint() );
   }
 }

SvgMagnifyingGlass

The SvgMagnifyingGlass class provides a means of zooming an SVG image in conjunction with the SvgImageMap class. It differs from the SvgMagnifyingWindow in that it provides a magnifying glass which can be scrolled over the image using the mouse. The component is displayed on the glass pane and the zoomed area of the SVG image is displayed in the magnifying glass. The class provides a component for displaying the zoomed SVG image.

Then set-up work is done in the pageCreated method, the mouseMoved method of the MouseMotionListener interface and the mouseEntered and mouseExited methods of the MouseListener interface:

Setup the magnifying glass

 public class Magnification extends Page implements MouseMotionListener, 
 MouseListener
 {
   protected SvgImageMap imageMap;
   protected SvgMagnifyingGlass magGlass;
   protected JComponent glassPane;
 
   public void pageCreated()
   {
     imageMap = (SvgImageMap)findComponent( "imageMap" );
     magGlass = new SvgMagnifyingGlass();
     glassPane = imageMap.getGlassPane();
     glassPane.setLayout( new BorderLayout() );
     imageMap.addMouseMotionListener( this );
     imageMap.addMouseListener( this );
 
     magGlass.setDiagram(  imageMap.getSvgDiagram() );
     magGlass.setImageMap( imageMap );
     magGlass.setScaleFactor( 5.0F ); 
     glassPane.add( magGlass );
     new Thread( magGlass ).start (); 
     glassPane.setVisible( true );
   }
 
   public void mouseMoved( MouseEvent e )
   {
     magGlass.setZoomPoint( e.getPoint(), e.getPoint() );
   }
 
   public void mouseEntered( MouseEvent e ){
     magGlass.setAnimationMode ( SvgMagnifyingGlass.FADE_IN, 20F );
   }
 
   public void mouseExited( MouseEvent e )
   {
     magGlass.setAnimationMode ( SvgMagnifyingGlass.FADE_OUT, 10F );
   }
 }

In the above code example the mouseEntered and mouseExited methods trigger the fade-in and fade-out animations for the magnifying glass. The float value passed to the setAnimationMode method sepecifies the duration if the animation.

SvgMagnifier

The SvgMagnifier class uses the SvgMagnifyingGlass and SvgMagnifyingWindow classes to magnify an SVG image.

A window is provided for displaying the magnification using SvgMagnifyingWindow . Radio buttons are provided for switching between magnification modes i.e. Magnifying window and magnifying glass. Check boxes are provided for switching on the rotation and high quality rendering modes of the magnifying glass during run time.

Setting up the Magnifier

 public class Magnification extends Page implements Mouselistener, 
 MouseMotionListener
 {
   protected SvgMagnifier magnifier;
   protected JComponent glassPane;
 
   public void pageCreated()
   {
     glassPane = 
     (JComponent)( (Applet)project.getStartupObject() 
     ).getGlassPane();
 
     glassPane.setOpaque( false ); 
     glassPane.setLayout( new BorderLayout() );
     SvgImageMap svgImage = (SvgImageMap)findComponent("svgImage"); 
     svgImage.getSvgPanel ().addMouseMotionListener (this);
     magnifier = new SvgMagnifier( glassPane, svgImage );
 
     svgImage.addMouseMotionListener( this );
     svgImage.addMouseListener( this );
   }
 
   public void mouseMoved( MouseEvent e )
   {
     magnifier.setZoomPoint( e.getPoint());
   }
 
   public void mouseDragged( MouseEvent e )
   {
     magnifier.setZoomPoint( e.getPoint());
   }
 
  public void mouseEntered (MouseEvent e)
   {
     magnifier.setMagGlassAnimation( SvgMagnifyingGlass.FADE_IN, 
     20F );
   }
 
   public void mouseExited (MouseEvent e)
   {
     magnifier.setMagGlassAnimation( SvgMagnifyingGlass.FADE_OUT,      
     10F );
 
 
   } 
 }

SvgRolloverFinder

An interface containing methods that can be implemented to aid the setup of rollover blocks.

ViewBoxListener

The ViewBoxListener class works in conjunction with the SvgImageMap to ensure components displayed on the glass pane above a certain point of image map remain at that location if the image map's view box is modified. This is achieved by using the PointSystem class to convert from the SVG co-ordinate system to the glass pane co-ordinate system. An example of its use in an application is shown below.

Setting up a ViewBoxListener

 public class Welcome extends Page
 {
   protected SvgImageMap svgImage;	
   protected JComponent glassPane;
 
   public void pageCreated()
   {
     glassPane = (JComponent)( (Applet)project.getStartupObject() 
     ).getGlassPane();
     glassPane.setOpaque( false ); 
     glassPane.setLayout( new BorderLayout() );
 
     svgImage = new SvgImageMap();
     svgImage.setURL( ClassLoader.getSystemResource(
     "images/image1.svg"));
 
     JLabel label1 = new JLabel( "Label 1" );
     label1.setBounds( 200, 200, 50, 20 );
     glassPane.add( label1 );
 
     ViewBoxListener listener = new ViewBoxListener( imageMap );
     listener.registerComponent( label1 );
   }
 }

ViewBoxModifier

Used to modify the viewbox size and position.

Waypoint

A waypoint representing a point within an SVG image.

WaypointFlag

A flag that can be added to an SVG image to mark a waypoint.