NinJo
Diagram Framework
Benny Koza, DMI
EGOWS 2004, Potsdam, Germany
Agenda
• Diagram framework requirements
• Diagram framework design
• Current use and examples
EGOWS 2004: NinJo Diagram Framework, Slide 2
Agenda
• Diagram framework requirements
• Diagram framework design
• Current use and examples
EGOWS 2004: NinJo Diagram Framework, Slide 3
The Diagram Framework Activity
• The activity started in the summer of 2002
• Main goal:
» Create a framework which forms the basis of all types of
diagrams in NinJo
» In other words: Provide the functional components that are
common to all diagram types and make them easily
extensible
• The types of diagrams to be supported by NinJo are the
union of all types of existing diagrams
• The following slides are examples of existing diagrams
EGOWS 2004: NinJo Diagram Framework, Slide 4
Example: Meteogram
EGOWS 2004: NinJo Diagram Framework, Slide 5
Example: Meteogram (different histogram orientations)
EGOWS 2004: NinJo Diagram Framework, Slide 6
Example: Thumbnail diagrams
EGOWS 2004: NinJo Diagram Framework, Slide 7
Example: Temp Diagram
EGOWS 2004: NinJo Diagram Framework, Slide 8
Example: NWP Cross Section
EGOWS 2004: NinJo Diagram Framework, Slide 9
Functional Requirements
• The requirements specification
» contains examples of approx. 40 different existing diagrams,
mostly meteograms in different incarnations
» contains approx. 200 requirements
EGOWS 2004: NinJo Diagram Framework, Slide 10
Brief Summary of Functional Requirements
• A diagram shall be capable of containing one or more charts
(subdiagrams)
• A chart shall be capable of containing one or more data
series (from a single or more stations/model points)
• A data series shall be displayable in different views (curve,
histogram, symbol, iso areas etc.)
• A diagram shall be fully configurable
• A diagram shall be usable both in a secondary window and
as a thumbnail in a Layer
EGOWS 2004: NinJo Diagram Framework, Slide 11
Brief Summary of Functional Requirements (2)
• The user shall be able to customize the diagram
interactively and save it as a Favourite
• User customization of a diagram shall include:
» Addition/removal of charts and data series
» Customization of graphical attributes such as line styles,
colours, fonts etc.
» Customization of layout
» Changing station/model point
» Changing display time and period
EGOWS 2004: NinJo Diagram Framework, Slide 12
Technical Requirements
• Graphics to be produced using GOF such that diagrams are
reproducible on any media (screen, paper, graphics
formats)
• Reproducible in batch products without GUI
EGOWS 2004: NinJo Diagram Framework, Slide 13
Agenda
• Diagram framework requirements
• Diagram framework design
• Current use and examples
EGOWS 2004: NinJo Diagram Framework, Slide 14
Framework design – Other Frameworks Used
• The diagram framework is based on the following NinJo
frameworks:
» PAC (see following slides)
» GOF, for the graphics
» Configuration
» Vislib, for symbol plot graphics
» Error/Logging
» I18n, for the language handling
EGOWS 2004: NinJo Diagram Framework, Slide 15
Framework Design - PAC
• The PAC MVC pattern was quickly adopted for the design
because:
» MVC handles that
– There are different kinds of meteorological data and therefore
more data models and ways of obtaining the data exist
– There are many kinds of data views (curve, histogram etc.)
– Views shall be interchangeable also during run-time
» The PAC agent hierarchy reflects the hierarchical tree
structure:
diagram -- chart -- data series
of a diagram
EGOWS 2004: NinJo Diagram Framework, Slide 16
Diagram Framework PAC Hierarchy
• The diagram framework contains 4 base PAC agents
- Diagram container
- Diagram
- Chart
- Data series
Diagram container
Diagram 1
Chart 1
Diagram 2
Chart 1
Data series 1..n
Data series 1..n
Chart n
Data series 1..n
The diagram agent hierachy
EGOWS 2004: NinJo Diagram Framework, Slide 17
Diagram Framework PAC - Example
Diagram agent
Chart agents
Diagram container
agent
EGOWS 2004: NinJo Diagram Framework, Slide 18
Data series
agents
The DiagramContainer Agent
• Is used when displaying diagrams in secondary windows
• The role of the DiagramContainer agent is to act as the
toplevel agent of the secondary window, i.e.
» Control the global behaviour of the window
» Provide the general Swing GUI (undo/redo, print, favourite
handling etc.)
» Integrate the diagram(s), i.e.
– Arrange the layout of the diagrams
– Arrange the Swing GUI of the diagram(s) and its components
EGOWS 2004: NinJo Diagram Framework, Slide 19
The Diagram And The Chart agents
• The role of the Diagram agent is to:
» Arrange the charts using a specific layout
» Provide the Swing GUI of the diagram
• The role of the Chart agent is to:
» Manage the
– Axes
– Grids
– DataSeries agents
» Provide the Swing GUI of the chart
EGOWS 2004: NinJo Diagram Framework, Slide 20
The DataSeries Agent
• The role of the DataSeries agent is:
» Retrieve the data to be visualized
» Visualize the data
» Provide the Swing GUI of the data series
EGOWS 2004: NinJo Diagram Framework, Slide 21
New PAC Functionality
• New functionality introduced in the PAC by the diagram
framework:
» Layout
» Properties and PropertyGUIs
EGOWS 2004: NinJo Diagram Framework, Slide 22
Layout
• Since the graphics are to be reproducible on any supported
output media, Swing layout components cannot be used
• Therefore a layout mechanism which handles GOF layout
was introduced
• Different LayoutStrategies determine the layout behaviour
EGOWS 2004: NinJo Diagram Framework, Slide 23
Layout Examples
A vertical stack layout strategy
A vertical NinjoLayoutStrategy
EGOWS 2004: NinJo Diagram Framework, Slide 24
A BoxFlowLayoutStrategy with
3 columns
Layout Drag-and-Drop and Resize Support
Charts can be moved and swapped by
using the mouse
EGOWS 2004: NinJo Diagram Framework, Slide 25
Charts can be resized by using the mouse
Properties
• Properties serve the following purposes:
» They define the properties of a PAC agent that the user may
change during run-time. For diagrams these are e.g.
– visualization attributes (like colours, line styles, fonts etc.),
– the station or the period data is displayed for
» Provides the “glue” between the configuration and the GUI
used to change the configuration:
– Provides the Swing panel with the GUI components required to
change the configuration
– Holds a reference to the part of the agent configuration which it
represents
EGOWS 2004: NinJo Diagram Framework, Slide 26
Properties
• Properties may be inherited by child agents from a parent
agent thus providing sharing of information between agents,
» e.g. the station property may be defined at the Diagram agent
and then be inherited by the DataSeries agents. In this way
the whole diagram displays data for a single station.
• If more agents have equal configuration parts, e.g. defining
visualization attributes, the same property class can be
used to provide the same GUI for changing the
configuration
EGOWS 2004: NinJo Diagram Framework, Slide 27
PropertyGUI and PropertyPanes
• PropertyGUI provides the Swing panel containing the GUI
components to be used to change the configuration which a
Property references
• PropertyPane layouts the PropertyGUIs of a collection of
Properties
• PropertyPanes may also contain PropertyPanes
• A PropertyPane may realize itself as a
» Dialog
» Pop-up menu
» Menu of a menu bar
EGOWS 2004: NinJo Diagram Framework, Slide 28
PropertyPane Example
•
The property pane for a meteogram chart has the below hierachy (not finished)
PropertyPanes
ChartAgentPropertyPane
data
location
interval
Data interval
obs step
childs
model
type
add
grid
label
remove
for. step
Property GUI’s
BuildMenuBar()
BuildPopupMenu()
BuildDialog()
EGOWS 2004: NinJo Diagram Framework, Slide 29
PropertyPane Example
Property panes
Selected property
Property name
Property inheritance
EGOWS 2004: NinJo Diagram Framework, Slide 30
Agenda
• Diagram framework requirements
• Diagram framework design
• Current use and examples
EGOWS 2004: NinJo Diagram Framework, Slide 31
Current Use Of The Framework
• The diagram framework is currently used to provide
» Meteograms
» TEMP diagrams
• Is also to be used by
» Cross Sections (NWP, radar, TEMP etc.)
» Radar profiles
EGOWS 2004: NinJo Diagram Framework, Slide 32
Meteogram Example
Diagram menu bar
Chart menu bar
(active chart)
Diagram navigation bar
Chart Buttons
Data series buttons
EGOWS 2004: NinJo Diagram Framework, Slide 33
Meteogram Example
EGOWS 2004: NinJo Diagram Framework, Slide 34
Meteogram With Time Axis Slider
Data Slider
Display Slider
EGOWS 2004: NinJo Diagram Framework, Slide 35
TEMP Diagram Example (prototype)
EGOWS 2004: NinJo Diagram Framework, Slide 36