WELCOME
1 of 14 1
Towards an Extensible Visual Editor
for Embedded Systems
Representation Models
Jirong Zhu
 Opponent: Qiang Liu
 Supervisor: Paul Pop
 Examiner: Petru Eles
2 of 14 2
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
3 of 14 3
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
Implementation of a prototype editor for process graphs
Specify the features of an extensible visual editor
• Propose a design for an Extensible Visual Editor
4 of 14 4
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
5 of 14 5
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.
6 of 14 6
Conditional Process Graph
 CPG Example:
P0
P1
P2
C
C
P6
K
P5
P7
D
P3
C
P4
D
P11
P8
P9
P14
P13
K
P15
P16
P17
P10
 Programmable processor
 Hardware processor—ASIC
P12
P18
(Application Specific Integrated Circuit)
7 of 14 7
Petri Net
 Petri net Example:
• Here is a simple Petri net example that presents the process from
resource influx to resource death:
8 of 14 8
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:
9 of 14 9
Summary of Representation Models
 Table of Graph Model Summary
Node Type
UML
Statechart
CPG
Petri net
State
Initial State
Final State
Normal node
Disjunction node
Conjunction node
Places
Transitions
Tokens
Edge Type
Tansition
Normal edge
Conditional edge
Arc
Model Constraints
•Allow self loop and
multiple connections
•Conditional edges start
from only disjunction nodes
•Alternative edges from
disjunction nodes meet only
in conjunction nodes
•No self-loop and no
multiple connections
•Allow multiple connections
•No self-loop
10
10 of 14
Components of a General Model
 Components to build a graph model
Any type of
representation model
Constraints on the components and their relationships
Node type
Edge type
Visual
Visual
Properties
representation
representation
Properties
Based on the general graph model
11
11 of 14
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)
BeiJing
39
10
23
12
16
15
XiAn
1309
1
179
244
1
1025
93
2
870
09
14
558
15241
ChongQing
65
1
ShangHai
1482
887
GuiLin
XiaMen
12
12 of 14
An Extensible Visual Editor
 Goal
13
13 of 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
14
14 of 14
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
15
15 of 14
Graph Editing Framework
 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
16
16 of 14
Graph Editing Framework (cont.)
 Library packages
uci.graph
interfaces/default
classes for representing
connected graphs
uci.gef
Central package,
includes the basic
classes(JGraph, Editor,
Fig, Selection, Layer,
Guide, Mode, Cmd,
NetPrimitive )
uci.ui
user interface code that
is used by GEF, includes
the Toolbar
uci.util
utility classes used by
GEF
uci.beans.editors
JavaBeans style property editors
and associated classes for the
property sheet
uci.gef.demo
classes that demonstrate
how to use GEF to build
applications and applets
uci.gef.events
classes that implement
graph selection events
17
17 of 14
JGraph
 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
18
18 of 14
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
GraphSelectionEvent
JComponent
graph:
JGraph
javax.swing
ComponentUI
graph:
JGraph
javax.swing.plaf
graph:GraphModel
JGraph
com.jgraph.graph
JGraph
graph: JGraph
com.jgraph
GraphUI
graph: JGraph
com.jgraph.plaf
DefaultGraphModel
graph:
JGraph
com.jgraph.graph
graph:GraphView
JGraph
com.jgraph.graph
BasicGraphUI
graph:
JGraph
com.jgraph.plaf.basic
com.jgraph.event
19
19 of 14
JGraph (cont.)
 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 interface
hierarchy and default
implementations
 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.
20
20 of 14
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
21
21 of 14
JGraph Library Example
 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:
22
22 of 14
A Prototype Implementation of a CPG Editor
 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
23
23 of 14
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
24
24 of 14
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
25
25 of 14
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
26
26 of 14
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
27
27 of 14
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>
28
28 of 14
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>
29
29 of 14
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
30
30 of 14
EVE Design (Cont.)
 GraphModel
• Data structure to
• Data structure to
• Mutual operations
structures
• Functions to open
hold the nodes and their attributes
hold the edges and their attributes
on the graph data between the graph files and the model
and save the models
 GraphView
•
•
•
•
Serves
Render
Create
Create
as a simple front-end to class GraphEditor
methods to draw individual cell for each type of graph
the view of the nodes considering its type
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
31
31 of 14
EVE Design(Cont.)
Software Architecture(MVC)
Specifications
JGraph
*
+graphModel : GraphModel
+specify
+createView()
*
+control
GraphEditor
GraphModel
+nodes
+edges
+openGraph()
+saveGraph()
+model
+control
*
*
+model
*
+graph data
*
+graphView : GraphView
+graphModel : GraphModel
+setGraphView() : GraphView
+setGraphModel() : GraphModel
+editCommands()
+editEvents()
*
*
GraphView
+graphModel : GraphModel
+control+view
#createVertexView()
#createEdgeView()
Graph files
32
32 of 14
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
33
33 of 14
Thank you!
34
34 of 14