Perforce JViews Diagrammer Sample: Creating Custom Graphics using the SDK


Description

This sample shows simple custom graphics that are made dynamic by changing properties in the data model.

How to Use the Sample

How to Run the Sample as an Application

This sample can be run as an application. The installation directory contains an executable JAR file, customgraphics.jar, that allows you to execute the sample with a double click from a file browser. Note that if you are using Internet Explorer, you can open the installation directory and execute the JAR file from the browser. This technique may not work in other Web browsers.

Alternatively, you can run the sample application from the command line. First check that the Ant utility is properly configured. If not, see the instructions on how to configure Ant for Perforce JViews.

Then, go to the installation directory of the sample and type:

ant run

Topics Covered

Detailed Description

Several objects, which could be space vehicles, turn around an alien artefact at different orbits and speeds.

The identifier and the position of each vehicle are displayed respectively above and below the vehicle's icon. Red, blue, and green areas around the artefact represent dangerous areas. When a vehicle enters one of these areas, its color changes to match the color of the area.

The artefact emits a kind of radar signal. From time to time, it captures a vehicle that is in its radar area and brings it closer to itself, step by step. When the vehicle finally enters the "dead zone", it becomes black.

You can park a vehicle by clicking it. It will quit its trajectory and move to the bottom right corner of the view where it enters the queue of parked vehicles. To unpark a vehicle, just click it and it will be put back into orbit.

Explanation

This demo creates an instance of a diagram component and the Swing GUI. Then it loads an IVL file containing some graphic objects that represent the dangerous areas and the artefact. These will be used later during the simulation.

A random number of nodes is created in the diagrammer model to represent the vehicles.

Nodes

The nodes are instances of the Node class which extends IlvDefaultSDMNode. We added some members to this class in order to store data used for positioning and animating the nodes in the view. As the nodes get animated on a elliptical trajectory, each node has an orbit, an angle, and a rotation speed (in degrees/animation step).

Graphical Representation of Nodes

To graphically represent the nodes, we have created a custom class which extends IlvGraphicSet and is made of the following components:

A CSS file associates the nodes of the model with the custom graphic class. It also defines the link object used to capture the vehicles.

Simulation

Before starting, the simulation sets the stylesheet (the CSS file) used by the model. When the model is ready, the simulation can start.

It mainly consist in a timer performing an animation every n ms.

During each step, several operations are performed to change the properties of the nodes:

We have seen that a node has an "action" property which defines the way it moves. This property can have three different values: "turning", "parking", or "unparking". This value changes when clicking the node. By default, all nodes turn around the artefact. When clicking a turning node, you change its "action" from "turning" to "parking". When clicking a parked node, you change the "action" to "unparking".

Clicks are detected by an interactor. Only the nodes representing a vehicle respond to this interactor. It is set in the CSS file. A class named Interactor manages the clicks.

Installation Directory

The Creating Custom Graphics using the SDK sample is installed here.

Classes Involved

Source Files

Copyright © 2021 Rogue Wave Software, Inc., a Perforce company. All rights reserved. Legal terms.