NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany

NinJo NinJo Diagram FrameworkDiagram Framework

Benny Koza, DMI

EGOWS 2004, Potsdam, Germany

EGOWS 2004: NinJo Diagram Framework, Slide 2

Agenda

• Diagram framework requirements

• Diagram framework design

• Current use and examples


Agenda





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


Example: Meteogram


Example: Meteogram (different histogram orientations)


Example: Thumbnail diagrams


Example: Temp Diagram


Example: NWP Cross Section


Functional Requirements

• The requirements specification

» contains examples of approx. 40 different existing diagrams, mostly meteograms in different incarnations

» contains approx. 200 requirements


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


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


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


Agenda





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


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


Diagram Framework PAC Hierarchy

• The diagram framework contains 4 base PAC agents

- Diagram container- Diagram- Chart- Data series

Diagram container

Diagram 1 Diagram 2

Chart 1 Chart nChart 1

Data series 1..nData series 1..n Data series 1..n

The diagram agent hierachy


Diagram Framework PAC - Example

Data series agents

Diagram agent

Chart agents

Diagram containeragent


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


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


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


New PAC Functionality

• New functionality introduced in the PAC by the diagram framework:

» Layout

» Properties and PropertyGUIs


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


Layout Examples

A vertical stack layout strategy A BoxFlowLayoutStrategy with3 columns

A vertical NinjoLayoutStrategy


Layout Drag-and-Drop and Resize Support

Charts can be moved and swapped by using the mouse 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


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


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


PropertyPane Example

• The property pane for a meteogram chart has the below hierachy (not finished)

ChartAgentPropertyPane

data childs grid label

Data intervallocation model add removetype

interval obs step for. step

PropertyPanes

Property GUI’s

BuildPopupMenu()

BuildDialog()

BuildMenuBar()


PropertyPane Example

Selected property

Property panes

Property name

Property inheritance


Agenda





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


Diagram menu bar

Meteogram Example

Chart menu bar(active chart)

Diagram navigation bar

Data series buttons

Chart Buttons


Meteogram Example


Meteogram With Time Axis Slider

Data Slider

Display Slider


TEMP Diagram Example (prototype)

Documents

NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany