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

2. EGOWS 2004: NinJo Diagram Framework, Slide 2 Agenda Diagram framework requirements Diagram framework design Current use and examples

3. EGOWS 2004: NinJo Diagram Framework, Slide 3 Agenda Diagram framework requirements Diagram framework design Current use and examples

4. 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

5. EGOWS 2004: NinJo Diagram Framework, Slide 5 Example: Meteogram

6. EGOWS 2004: NinJo Diagram Framework, Slide 6 Example: Meteogram (different histogram orientations)

7. EGOWS 2004: NinJo Diagram Framework, Slide 7 Example: Thumbnail diagrams

8. EGOWS 2004: NinJo Diagram Framework, Slide 8 Example: Temp Diagram

9. EGOWS 2004: NinJo Diagram Framework, Slide 9 Example: NWP Cross Section

10. 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

11. 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

12. 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

13. 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

14. EGOWS 2004: NinJo Diagram Framework, Slide 14 Agenda Diagram framework requirements Diagram framework design Current use and examples

15. 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

16. 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

17. 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 1Diagram 2 Chart 1Chart nChart 1 Data series 1..n The diagram agent hierachy

18. EGOWS 2004: NinJo Diagram Framework, Slide 18 Diagram Framework PAC - Example Data series agents Diagram agent Chart agents Diagram container agent

19. 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

20. 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

21. 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

22. EGOWS 2004: NinJo Diagram Framework, Slide 22 New PAC Functionality New functionality introduced in the PAC by the diagram framework: »Layout »Properties and PropertyGUIs

23. 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

24. EGOWS 2004: NinJo Diagram Framework, Slide 24 Layout Examples A vertical stack layout strategyA BoxFlowLayoutStrategy with 3 columns A vertical NinjoLayoutStrategy

25. 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

26. 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

27. 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

28. 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

29. EGOWS 2004: NinJo Diagram Framework, Slide 29 PropertyPane Example The property pane for a meteogram chart has the below hierachy (not finished) ChartAgentPropertyPane datachildsgridlabel Data intervallocationmodeladdremovetype intervalobs stepfor. step PropertyPanes Property GUI’s BuildPopupMenu() BuildDialog() BuildMenuBar()

30. EGOWS 2004: NinJo Diagram Framework, Slide 30 PropertyPane Example Selected property Property panes Property name Property inheritance

31. EGOWS 2004: NinJo Diagram Framework, Slide 31 Agenda Diagram framework requirements Diagram framework design Current use and examples

32. 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

33. 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

34. EGOWS 2004: NinJo Diagram Framework, Slide 34 Meteogram Example

35. EGOWS 2004: NinJo Diagram Framework, Slide 35 Meteogram With Time Axis Slider Data Slider Display Slider

36. EGOWS 2004: NinJo Diagram Framework, Slide 36 TEMP Diagram Example (prototype)