Svg Components
Kingsley Elmes, XUI 3.1, 4th Sept 2007
Carousel SVG Components are designed for use in a wide range of
Rich Internet Applications for purposes such as mapping, facilities management, interactive drawings and illustration. A rich developer API is provided that integrates with other Carousel components and services.
Examples of how the SVG components may be used in an application
are shown below.
XSvgImageMap
The XSvgImageMap class manages the display of an SVG image. The class extends the XUI XPanel class to provide a panel to display
the SVG image in.
The XSvgImageMap can be added to an XML page as follows:
 |
|
 |
|
Example 1 |
|
|
<SvgImageMap name="imageMap1" x="50" y="50" w="200" h="150"
content="images/image1.svg">
|
|
 |
|
 |
Or added through the pageCreated method of a page as follows:
|
|
|
|
Example 2 |
|
|
public class Images extends XPage
{
protected XPanel panel;
protected XSvgImageMap svgImage;
public void pageCreated()
{
XPanel panel = (XPanel)findComponent( “panel1” );
svgImage = new XSvgImageMap();
svgImage.setURL( ClassLoader.getSystemResource( "images/image1.svg" ));
panel.add( svgImage );
}
}
|
|
|
|
|
XSvgMagnifyingWindow
The XSvgMagnifyingWindow class provides a means of zooming an SVG image in conjunction with the XSvgImageMap 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:
|
|
|
|
Example |
|
|
<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:
|
|
|
|
Example |
|
|
public class Magnification extends XPage implements MouseMotionListener
{
protected XSvgImageMap imageMap;
protected XSvgMagnifyingWindow magWindow;
public void pageCreated()
{
imageMap = (XSvgImageMap)findComponent("imageMap");
magWindow = (XSvgMagnifyingWindow)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() );
}
}
|
|
|
|
|
XSvgMagnifyingGlass
The XSvgMagnifyingGlass class provides a means of zooming an SVG image in conjunction with the XSvgImageMap class.
I differs from the XSvgMagnifyingWindow 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:
|
|
|
|
Example |
|
|
public class Magnification extends XPage implements MouseMotionListener,
MouseListener
{
protected XSvgImageMap imageMap;
protected XSvgMagnifyingGlass magGlass;
protected JComponent glassPane;
public void pageCreated()
{
imageMap = (XSvgImageMap)findComponent( "imageMap" );
magGlass = new XSvgMagnifyingGlass();
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 ( XSvgMagnifyingGlass.FADE_IN, 20F );
}
public void mouseExited( MouseEvent e )
{
magGlass.setAnimationMode ( XSvgMagnifyingGlass.FADE_OUT, 10F );
}
}
|
|
|
|
|
In the above code example the mouseEntered and mouseExied 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.
XSvgMagnifier
The XSvgMagnifier combines the XSvgMagnifyingWindow and XSvgMagnifyingGlass into one easy to use component displayed below.
A window is provided for displaying the magnification using XSvgMagnifyingWindow. 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.
|
|
|
|
Example |
|
|
public class Magnification extends XPage implements Mouselistener,
MouseMotionListener
{
protected XSvgMagnifier magnifier;
protected JComponent glassPane;
public void pageCreated()
{
glassPane =
(JComponent)( (XApplet)project.getStartupObject()
).getGlassPane();
glassPane.setOpaque( false );
glassPane.setLayout( new BorderLayout() );
XSvgImageMap svgImage = (XSvgImageMap)findComponent(“svgImage”);
svgImage.getSvgPanel ().addMouseMotionListener (this);
magnifier = new XSvgMagnifier( 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( XSvgMagnifyingGlass.FADE_IN,
20F );
}
public void mouseExited (MouseEvent e)
{
magnifier.setMagGlassAnimation( XSvgMagnifyingGlass.FADE_OUT,
10F );
}
}
|
|
|
|
|
XGrabMap
The XGrabMap class provide a means of dragging an SVG image in conjunction with the XSvgImageMap class using the mouse.
The component can be added to an application that uses the XSvgImageMap quite easily, as shown below.
|
|
|
|
Example |
|
|
public class Welcome extends XPage
{
protected XSvgImageMap svgImage;
public void pageCreated()
{
svgImage = new XSvgImageMap();
svgImage.setURL( ClassLoader.getSystemResource( "images/image1.svg" ));
XGrabMap grabMap = new XGrabMap( svgImage );
}
}
|
|
|
|
|
XGroupHierarchy
The XGroupHierarchy 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.
The code example below shows how the how the component can be
used in a program by passing it an instance of the XSvgImageMap
and then diplaying the results in a JTree within a JFrame.
|
|
|
|
Example |
|
|
public class Welcome extends XPage
{
protected XSvgImageMap svgImage;
public void pageCreated()
{
svgImage = new XSvgImageMap();
svgImage.setURL( ClassLoader.getSystemResource( "images/image1.svg" ));
XGroupHierarchy gh = new XGroupHierarchy( 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 );
}
}
|
|
|
|
|
XViewBoxListener
The XViewBoxListener class works in conjunction with the XSvgImageMap 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 XPointSystem 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.
|
|
|
|
Example |
|
|
public class Welcome extends XPage
{
protected XSvgImageMap svgImage;
protected JComponent glassPane;
public void pageCreated()
{
glassPane = (JComponent)( (XApplet)project.getStartupObject()
).getGlassPane();
glassPane.setOpaque( false );
glassPane.setLayout( new BorderLayout() );
svgImage = new XSvgImageMap();
svgImage.setURL( ClassLoader.getSystemResource(
"images/image1.svg"));
JLabel label1 = new JLabel( “Label 1” );
label1.setBounds( 200, 200, 50, 20 );
glassPane.add( label1 );
XViewBoxListener listener = new XViewBoxListener( imageMap );
listener.registerComponent( label1 );
}
}
|
|
|
|
|
XRolloverComponent
The XRolloverComponent class is used to display a Swing component
on the glass pane when a mouse rollover event occurs.
It can be added to an application as shown below.
|
|
|
|
Example |
|
|
public class Welcome extends XPage
{
protected XSvgImageMap svgImage;
protected JComponent glassPane;
protected XRolloverComponent rc;
public void pageCreated()
{
glassPane = (JComponent)( (XApplet)project.getStartupObject()
).getGlassPane();
glassPane.setOpaque( false );
glassPane.setLayout( new BorderLayout() );
svgImage = new XSvgImageMap();
svgImage.setURL( ClassLoader.getSystemResource(
"images/image1.svg"));
Graph graph = new Graph();
rc = new XRolloverComponent( new JComponent[]{ graph } );
rc.setBounds( 349, 233, 11, 11 );
glassPane.add( rc );
}
}
|
|
|
|
|
In the above example, when a mouse rollover event occurs on the XRolloverComponent, the Graph component will be displayed on the glass pane.
XSelectionZoom
The XSelectionZoom class allows zooming of the Svg image displayed in the XSvgImageMap class
by selecting a region using the 'CTRL' key and the mouse.
It can be added to an application as shown below.
|
|
|
|
Example |
|
|
public class Welcome extends XPage
{
protected XSvgImageMap svgImage;
public void pageCreated()
{
svgImage = new XSvgImageMap();
svgImage.setURL( ClassLoader.getSystemResource( "images/image1.svg" ));
XSelectionZoom zoomSelection = new XSelectionZoom( svgImage );
}
}
|
|
|
|
|
XPointSystem
The XPointSystem 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.
|
|
|
|
Example |
|
|
public class Welcome extends XPage
{
protected XSvgImageMap svgImage;
public void pageCreated()
{
svgImage = new XSvgImageMap();
svgImage.setURL( ClassLoader.getSystemResource( "images/image1.svg" ));
XPointSystem pointSystem = new XPointSystem( svgImage );
Point2D p1 = pointSystem.glassPaneToSvg( 100.0, 200.0 );
}
}
|
|
|
|
|
The above example shows a coordinate being converted from the application coordinate system to the svg coordinate system.
