WELCOME

1. WELCOME

2. Towards an Extensible Visual Editor for Embedded Systems Representation Models Jirong Zhu • Opponent: Qiang Liu • Supervisor: Paul Pop • Examiner: Petru Eles

3. Outline • Motivation and Contributions • Embedded System Design • Representation Models • Process graphs, Petri Nets, Finite State Machines • Extensible Visual Editor • Goal and Features • Related Work • Tools, Libraries • Design and Implementation • A Prototype Implementation of CPG Editor • Specify the Graph Models • Propose a design for an Extensible Visual Editor • Conclusions and Future Work

4. Motivation and Contributions • Motivation • New representation models are proposed frequently • An editor that is easily extensible with new models would reduce the development time • Contributions • Brief survey of the important representation models • Survey of related work on graph/diagram editors • Evaluation of two graph libraries, GEF and JGraph • Implementationof a prototype editor for process graphs • Specify the features of an extensible visual editor • Propose a design for an Extensible Visual Editor

5. Embedded System Design • Embedded systems • Dedicated functionality, as opposed to general purpose computers • Embedded into a host system • Characteristics: complex functionality, timing constraints, low manufacturing cost and low power • Examples: Cruise Controller in cars, Microwave cookers, SIM card in a mobile is an embedded system with a CPU, and etc. • Embedded systems design tasks • Specifying the functionality using representation models • Selecting the components of the architecture • Partitioning the functionality on the hardware components • Scheduling: determining the time at which functions are executed

6. Representation Models • Representation models • Capture the features of a system, describe its functionality • Clearly defined syntax and semantics • Being used during all design tasks • Overview • Process graphs • Conditional Process Graphs • Finite State Machines • UML statecharts • Petri nets • Others • Discrete-event systems, Synchronous/Reactive models, etc.

7. K D C C Conditional Process Graph • CPG Example: P0 P1 P11 D P2 P3 C P12 P13 P6 K P4 P5 P14 P16 P8 P9 P15 P7 P17 P10 • Programmable processorHardware processor—ASIC (Application Specific Integrated Circuit) P18

8. Petri net Example: Here is a simple Petri net example that presents the process from resource influx to resource death: Petri Net

9. UML Statechart • UML Statechart Example: • Here is a simple UML statechart example that models the status of a user's account in a Bug Tracker system:

10. Summary of Representation Models • Table of Graph Model Summary

11. Components of a General Model • Components to build a graph model Any type of representation model

12. General Graph Model • A graph G is a diagram constituting of a set of points connected by line segments, points are usually called vertices (V) or nodes, and line segments are called edges (E). G = (V,E)

13. An Extensible Visual Editor • Goal

14. Related Work • General diagram drawing/editing tools: • Microsoft Visio, diagramming application, has special objects to help draw UML diagrams, flowcharts, network diagrams, and so on • Dia, similar to Visio, open source • GME (Generic Modeling Environment), a configurable toolkit to build domain models • Tools dedicated to a particular model • Statemate, graphical modeling and simulation tool for UML statechart • PIPE, Platform Independent Petri net Editor, modeling Petri nets currently with six analysis modulars, open source • JGraphPad, free diagram editor based on JGraph, to create flow charts, maps, UML diagrams, and etc. • Graph libraries • GEF • JGraph

15. Graph Libraries • GEF(Graph Editing Framework) • URL: http://gef.tigris.org/ • Library of Java classes for editing diagrams and connected graphs • Successful usage: to build a UML editor, ArgoUML • Open source • JGraph • URL: http://jgraph.sourceforge.net/ • Library of Java classes for editing different types of graphs • Successful usage: to build a complex graph editor, JGraphPad • Open source • Others: Graph Editor • URL: http://members.tripod.com/~vjojic/intro/intro.html • Library of JAVA classes and provides a graph editor to display and manipulate graphs with different types of nodes and edges carrying various data • Open source

16. Example demo of GEF Node-port-edge graph model with fixed ports Drag and drop diagram objects onto the graph pane and create links between them Graph EditingFramework

17. Library packages uci.uiuser interface code that is used by GEF, includes the Toolbar uci.gef Central package, includes the basic classes(JGraph, Editor, Fig, Selection, Layer, Guide, Mode, Cmd, NetPrimitive ) uci.utilutility classes used by GEF uci.graphinterfaces/default classes for representing connected graphs uci.beans.editorsJavaBeans style property editors and associated classes for the property sheet uci.gef.democlasses that demonstrate how to use GEF to build applications and applets uci.gef.eventsclasses that implement graph selection events Graph Editing Framework (cont.)

18. Example demo of a simple diagram editor using JGraph Node-port-edge graph model but with floating port Drag and drop diagram objects onto the graph pane and create links between them Nodes and edges have editable text field themselves JGraph

19. GraphSelectionEvent com.jgraph.event JGraph (cont.) • Library packages: • com.jgraph is the topmost package that contains class JGraph, JGraph extends JComponent, and has a reference to its GraphUI and GraphModel • com.jgraph.graph defines classes/interfaces which include the graph model, graph cells, renderers and so on

20. DefaultPort and DefaultEdge, are respectively simple implementations for a port and an edge.They extend DefaultGraphCell,which gives a default implementation for the GraphCell interface. GraphCell is the basic interface for all graph cells and it defines the requirements for objects that appear as cells. Port and Edge are respective interfaces providing the definitions on the requirements for an object that represents a port or an edge in a graph model. GraphCell interface hierarchy and default implementations JGraph (cont.)

21. GEF vs. JGraph • Advantages • GEF • Very large number of features • Can handle very complex types of diagrams (we only need graphs) • Open source • JGraph • Simple API, similar to standard Swing components, easy to learn and to deploy • Dedicated to editing of graphs • Documentation and examples available • Open source • Disadvantages • GEF • Too many features (e.g., over 100 classes), very difficult to learn and use • Needs new demos to test and demonstrate the new features • Not enough documentation and examples • JGraph • Uses non-Swing API for more advanced features

22. Part of the codes to build a simple graph by JGraph Map attributes = new Hashtable(); // Create Vertexs and add Port DefaultPorts DefaultGraphCell hello = new DefaultGraphCell("Hello"); Map helloAttrib = GraphConstants.createMap(); Rectangle helloBounds = new Rectangle(20, 20, 40, 20); GraphConstants.setBounds(helloAttrib, helloBounds); attributes.put(hello, helloAttrib); hp = new DefaultPort(); hello.add(hp); … // Create Edge DefaultEdge edge = new DefaultEdge(); Map edgeAttrib = GraphConstants.createMap(); int arrow = GraphConstants.CLASSIC; GraphConstants.setLineEnd(edgeAttrib , arrow); attributes.put(edge, edgeAttrib); // Connect Edge and insert the graph ConnectionSet cs = new ConnectionSet(edge, hp, wp); Object[] cells = new Object[]{edge, hello, world}; insert(cells, cs, null, attributes); Resulting example graph: JGraph Library Example

23. In order to understand the issues involved in building an extensible visual editor, we have built first an editor for conditional process graphs (CPGs) Users can open and save CPGs Users can edit a CPG by modifying the node or edge attributes (e.g., names, resources and execution time) in an editable text field A Prototype Implementation of a CPG Editor

24. CPG Editor Design • Model-View-Control design method • Model • Content representation, describes the underlying graph model interface, selection model, and the elements they contain • View • Graphical representation, displays the graph represented by the model • Control • Manages the graph rendering, and the interaction with the graph model through the interface • More about design in CPG editor • Most classes in the CPG editor extend from JGraph • CPG files give the data and information of a graph model • The editor supports integration between the CPG files and the CPG models • There’s no specification in the prototype CPG editor currently

25. CPG Editor Implementation • Implementation is done with Java 1.4 • The model-view-control is implemented as • Classes CPGModel, CPGView, CPGEditor respectively • CPGModel and CPGView are derived from JGraph classes • Implementation details • Hashtable “nodes” holds all the nodes objects and class CPGNode holds the attributes data • Linkedlist “edges”and CPGEdge do the similar work • “nodes” and “edges” are associated by setting names of the source nodes in edges as the key • Command buttons to insert three types of nodes • The edges are connected directly by finding the ports and dragging the mouse. Their types are determined by the types of the source nodes. • Open and Save are done by openGraph() and saveGraph() • Edits are done either on graph models or on graph files

26. Towards an Extensible Visual Editor (EVE) • Extensible Visual Editor • Features specific to a graph type (e.g., to a CPG) • Model • Node properties • Edge properties • View • Node’s visual representation • Edge’s visual representation • Control • Model constraints • Toolbar and menus (depends on the node and edge types) • Design idea • Build general classes for Model, View, Control • Customize them for each graph type using a graph type specification file

27. EVE Design • A graph type specification file gives the criteria and definition in representing this type of graph model graphically. • Defines graph types <GraphType>…</GraphType> • Defines node types, attributes (properties), visual representation (e.g.a JPEG image) <Node type="node_type1" image xlink:href =”directory of the node image”> <Property name = “property1” type = property1_type …(other attributes for property1)> <Property name = “property2” type =property2_type …> … <Property name = “propertyN” type =propertyN_type … > </Node> • Defines the same things for the edges <Edge type="edge_type" image xlink:href =”directory of the edge image” sourceNode = “node_type1, node_type2… node_typeN” destinationNode = “node_type1, node_type2… node_typeN”> <Property name = “property1” type =property1_type …(other attributes for property1)> <Property name = “property2” type =property2_type …> … <Property name = “propertyN” type =propertyN_type … > </Edge> • The connection constraints are included when specifying the edge

28. EVE Design(Cont.) • <!-- Specification for CPG--> • Specify the graph type CPG and all types of nodes in CPG <CPG> <Node type=“normal node" image xlink:href =”directory of the node image”> … //the same with disjunction node but neglect the condition </Node> <Node type="disjunction node" image xlink:href =”directory of the node image”> <Property name = “name” type = “string” position = “center” color = “black”> <Property name = “process” type =”string” position = “right” color = “black”> <Property name = “wect” type = “int” position = “right” color = “black”> <Property name = “condition” type = “string” value = “C”> </Node> <Node type="conjunction node" image xlink:href =”directory of the node image”> … //the same with disjunction node but neglect the condition </Node>

29. EVE Design(Cont.) • <!-- Specification for CPG--> • Specify all types of edges in CPG <Edge type = “normal edge" image xlink:href =”directory of the image” sourceNode = “normal node,conjunction node” destinationNode = “normal node,disjunction node,conjunction node”> <Property name = “name” type = “string” position = “center” color = “black”> <Property name = “resource” type =”string” position = “right” color = “black”> <Property name = “wect” type = “int” position = “right” color = “black”> </Edge> <Edge type = "conditional edge" image xlink:href =”directory of the image” sourceNode = “disjunction node” destinationNode = “normal node,conjunction node,disjunction node”> … //the same with normal edge <Property name = “condition” type =”string” value = “C”> </Edge> </CPG>

30. EVE Design (Cont.) • General classes for Model, View and Control • The application loads a graph type specification file • The general classes react based on the graph type specifications, they become particular for that type • View • Draws the graph based on the node and edge visual representations • Model • Node class, holds a map of property name / property value pairs • Example: Class CPGNode • Same for edge class • Lists of nodes and edges • Example: Hashtable nodes and LinkedList edges in CPG • Control • Sets the menues and toolbars based on the node and edge types • Example: Menus and buttons to insert normal node, disjunction node and conjunction node in class CPGEditor • Applies the constraints related to the graph structure • Example: If the source node type is disjunction node, the edge starts from this node would be automatically condiotional edge with classical arrow in the end

31. EVE Design (Cont.) • GraphModel • Data structure to hold the nodes and their attributes • Data structure to hold the edges and their attributes • Mutual operations on the graph data between the graph files and the model structures • Functions to open and save the models • GraphView • Serves as a simple front-end to class GraphEditor • Render methods to draw individual cell for each type of graph • Create the view of the nodes considering its type • Create the view of the edges considering its type • GraphEditor • Mediate and communicate between the GraphModel and GraphView • Function to read the specification and become particular for that type • Set constraints for types of graph

32. EVE Design(Cont.) • Software Architecture(MVC)

33. Conclusion & Future work • Conclusion • Proposed a design for a generic graph-based modelling tool,the Extensible Visual Editor (EVE) • Conditional process graph (CPG) • Petri nets • UML statecharts • Survey of the representation models and their associated tools • Compared two graph libraries, GEF and JGraph • JGraph used for implementation • Designed and implemented an editor for CPGs • Used the experience to propose several design ideas for EVE • Future Work • Implement the Extensible Visual Editor • Complete and improve the specifications for different types of graph

34. Thank you!