ninjo diagram framework benny koza, dmi egows 2004, potsdam, germany
TRANSCRIPT
![Page 1: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/1.jpg)
NinJo NinJo Diagram FrameworkDiagram Framework
Benny Koza, DMI
EGOWS 2004, Potsdam, Germany
![Page 2: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/2.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 2
Agenda
• Diagram framework requirements
• Diagram framework design
• Current use and examples
![Page 3: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/3.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 3
Agenda
• Diagram framework requirements
• Diagram framework design
• Current use and examples
![Page 4: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/4.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 4
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
![Page 5: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/5.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 5
Example: Meteogram
![Page 6: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/6.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 6
Example: Meteogram (different histogram orientations)
![Page 7: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/7.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 7
Example: Thumbnail diagrams
![Page 8: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/8.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 8
Example: Temp Diagram
![Page 9: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/9.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 9
Example: NWP Cross Section
![Page 10: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/10.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 10
Functional Requirements
• The requirements specification
» contains examples of approx. 40 different existing diagrams, mostly meteograms in different incarnations
» contains approx. 200 requirements
![Page 11: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/11.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 11
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
![Page 12: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/12.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 12
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
![Page 13: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/13.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 13
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
![Page 14: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/14.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 14
Agenda
• Diagram framework requirements
• Diagram framework design
• Current use and examples
![Page 15: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/15.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 15
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
![Page 16: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/16.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 16
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
![Page 17: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/17.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 17
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
![Page 18: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/18.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 18
Diagram Framework PAC - Example
Data series agents
Diagram agent
Chart agents
Diagram containeragent
![Page 19: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/19.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 19
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
![Page 20: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/20.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 20
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
![Page 21: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/21.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 21
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
![Page 22: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/22.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 22
New PAC Functionality
• New functionality introduced in the PAC by the diagram framework:
» Layout
» Properties and PropertyGUIs
![Page 23: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/23.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 23
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
![Page 24: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/24.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 24
Layout Examples
A vertical stack layout strategy A BoxFlowLayoutStrategy with3 columns
A vertical NinjoLayoutStrategy
![Page 25: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/25.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 25
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
![Page 26: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/26.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 26
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
![Page 27: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/27.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 27
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
![Page 28: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/28.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 28
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
![Page 29: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/29.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 29
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()
![Page 30: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/30.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 30
PropertyPane Example
Selected property
Property panes
Property name
Property inheritance
![Page 31: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/31.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 31
Agenda
• Diagram framework requirements
• Diagram framework design
• Current use and examples
![Page 32: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/32.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 32
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
![Page 33: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/33.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 33
Diagram menu bar
Meteogram Example
Chart menu bar(active chart)
Diagram navigation bar
Data series buttons
Chart Buttons
![Page 34: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/34.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 34
Meteogram Example
![Page 35: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/35.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 35
Meteogram With Time Axis Slider
Data Slider
Display Slider
![Page 36: NinJo Diagram Framework Benny Koza, DMI EGOWS 2004, Potsdam, Germany](https://reader035.vdocuments.mx/reader035/viewer/2022081515/5697bf781a28abf838c819f9/html5/thumbnails/36.jpg)
EGOWS 2004: NinJo Diagram Framework, Slide 36
TEMP Diagram Example (prototype)