<%BANNER%>

An XML-based diagrammatic dynamic modeling and simulation system

University of Florida Institutional Repository
Permanent Link: http://ufdc.ufl.edu/UFE0000950/00001

Material Information

Title: An XML-based diagrammatic dynamic modeling and simulation system
Physical Description: Mixed Material
Language: English
Creator: Shim, Hyunju ( Dissertant )
Fishwick, Paul A. ( Thesis advisor )
Hammer, Joachim ( Reviewer )
Essl, George ( Reviewer )
Publisher: University of Florida
Place of Publication: Gainesville, Fla.
Publication Date: 2003
Copyright Date: 2003

Subjects

Subjects / Keywords: Computer and Information Science and Engineering thesis, M.S
Computer simulation   ( lsch )
SVG (Document markup language)   ( lcsh )
XML (Document markup language)   ( lcsh )
Dissertations, Academic -- UF -- Computer and Information Science and Engineering

Notes

Abstract: The emergence of eXtensible Markup Language (XML) brought a new way of representing information and knowledge on the World Wide Web. The XML was also found to be very useful for modeling and configuring graphical elements and opened a new way to share them over the Web. Much research and XML-based technology is used for modeling and visualization in Extensible 3D (X3D) and Scalable Vector Graphic (SVG). The primary goal of this thesis was to develop an effective way to represent a model in XML, especially SVG. A secondary goal was to construct a powerful modeling and simulation framework using XML-based technology. We constructed a rube2D modeling and simulation framework to broaden the paradigm and methodology of rube into the 2D models, especially for the diagrammatic dynamic models. The precursor of rube2D, rube, was developed as a modeling and simulation framework for 3D models. The models in rube2D can be viewed in two different perspectives. The model can be understood by its dynamic behavior over time. It also can be described according to its physical appearance or metaphoric presentation. The two perspectives of the model are defined in two separate parts of rube2D. The model topology is defined in Multimodel eXchange Language (MXL). The model presentation is defined using SVG. Separating the model topology from the presentation makes the model topology independent from presentation and vice versa. This independence provides great advantages such as effectiveness, flexibility, and aesthetic computing in the modeling and simulation and this is what distinguishes rube2D from similar works. For creating the simulation code from the model topology, Model Translation Engines is defined in XSLT stylesheet. To represent heterogeneous model types in MXL into homogeneous block model, Dynamics eXchange Language (DXL) is defined. DXL is an assembly-like language between a high level model description language, MXL and the executable simulation code. Model Translation Engines translate MXL into DXL and DXL into a simulation JavaScript code. The system being modeled in MXL can be simulated using SimPackJ/S, which provides simulation code libraries. Model Fusion Engine, which is written in the eXtensible Stylesheet Language Transformations (XSLT), is developed to merge the model presentation defined in SVG with the simulation code generated from the model topology, MXL. Finally a dynamic SVG that behaves as defined in model topology is generated as a result of model fusion. The final output of rube2D is an SVG that has same geometry as the original SVG, and dynamic behavior as defined in the model topology file, MXL.
Subject: dxl, modeling, mxl, web, xml, xslt
General Note: Title from title page of source document.
General Note: Includes vita.
Thesis: Thesis (M.S.)--University of Florida, 2003.
Bibliography: Includes bibliographical references.
General Note: Text (Electronic thesis) in PDF format.

Record Information

Source Institution: University of Florida
Holding Location: University of Florida
Rights Management: All rights reserved by the source institution and holding location.
Resource Identifier: aleph - 002950011
System ID: UFE0000950:00001

Permanent Link: http://ufdc.ufl.edu/UFE0000950/00001

Material Information

Title: An XML-based diagrammatic dynamic modeling and simulation system
Physical Description: Mixed Material
Language: English
Creator: Shim, Hyunju ( Dissertant )
Fishwick, Paul A. ( Thesis advisor )
Hammer, Joachim ( Reviewer )
Essl, George ( Reviewer )
Publisher: University of Florida
Place of Publication: Gainesville, Fla.
Publication Date: 2003
Copyright Date: 2003

Subjects

Subjects / Keywords: Computer and Information Science and Engineering thesis, M.S
Computer simulation   ( lsch )
SVG (Document markup language)   ( lcsh )
XML (Document markup language)   ( lcsh )
Dissertations, Academic -- UF -- Computer and Information Science and Engineering

Notes

Abstract: The emergence of eXtensible Markup Language (XML) brought a new way of representing information and knowledge on the World Wide Web. The XML was also found to be very useful for modeling and configuring graphical elements and opened a new way to share them over the Web. Much research and XML-based technology is used for modeling and visualization in Extensible 3D (X3D) and Scalable Vector Graphic (SVG). The primary goal of this thesis was to develop an effective way to represent a model in XML, especially SVG. A secondary goal was to construct a powerful modeling and simulation framework using XML-based technology. We constructed a rube2D modeling and simulation framework to broaden the paradigm and methodology of rube into the 2D models, especially for the diagrammatic dynamic models. The precursor of rube2D, rube, was developed as a modeling and simulation framework for 3D models. The models in rube2D can be viewed in two different perspectives. The model can be understood by its dynamic behavior over time. It also can be described according to its physical appearance or metaphoric presentation. The two perspectives of the model are defined in two separate parts of rube2D. The model topology is defined in Multimodel eXchange Language (MXL). The model presentation is defined using SVG. Separating the model topology from the presentation makes the model topology independent from presentation and vice versa. This independence provides great advantages such as effectiveness, flexibility, and aesthetic computing in the modeling and simulation and this is what distinguishes rube2D from similar works. For creating the simulation code from the model topology, Model Translation Engines is defined in XSLT stylesheet. To represent heterogeneous model types in MXL into homogeneous block model, Dynamics eXchange Language (DXL) is defined. DXL is an assembly-like language between a high level model description language, MXL and the executable simulation code. Model Translation Engines translate MXL into DXL and DXL into a simulation JavaScript code. The system being modeled in MXL can be simulated using SimPackJ/S, which provides simulation code libraries. Model Fusion Engine, which is written in the eXtensible Stylesheet Language Transformations (XSLT), is developed to merge the model presentation defined in SVG with the simulation code generated from the model topology, MXL. Finally a dynamic SVG that behaves as defined in model topology is generated as a result of model fusion. The final output of rube2D is an SVG that has same geometry as the original SVG, and dynamic behavior as defined in the model topology file, MXL.
Subject: dxl, modeling, mxl, web, xml, xslt
General Note: Title from title page of source document.
General Note: Includes vita.
Thesis: Thesis (M.S.)--University of Florida, 2003.
Bibliography: Includes bibliographical references.
General Note: Text (Electronic thesis) in PDF format.

Record Information

Source Institution: University of Florida
Holding Location: University of Florida
Rights Management: All rights reserved by the source institution and holding location.
Resource Identifier: aleph - 002950011
System ID: UFE0000950:00001


This item has the following downloads:


Full Text












AN XML-BASED DIAGRAMMATIC DYNAMIC
MODELING AND SIMULATION SYSTEM


















By

HYUNJU SHIM


A THESIS PRESENTED TO THE GRADUATE SCHOOL
OF THE UNIVERSITY OF FLORIDA IN PARTIAL FULFILLMENT
OF THE REQUIREMENTS FOR THE DEGREE OF
MASTER OF SCIENCE

UNIVERSITY OF FLORIDA


2003































Copyright 2003

by

Hyunju Shim


































To my parents,

and my two brothers















ACKNOWLEDGMENTS

I would like to show my deepest gratitude to my advisor, Dr. Paul A. Fishwick.

He inspired me with insightful comments and suggestions in this interesting research and

provided invaluable guidance during my studies. I also would like to show my thanks to

Dr. Joachim Hammer and Dr. George Essl for serving as my committee members.

I really appreciate my research colleagues, Minno Park and Jinho Lee, for their

companionship. They always helped me and offered valuable discussions on my research.

They also provided a warm family-like environment in our lab. I also would like to thank

Taewoo Kim for his kind assistance and guidance when I first got oriented in our lab.

Above all, I would like to show my deepest thanks and respect to my wonderful

parents and two brothers. They have always loved me as I am and trusted me in any

situation. Without their encouragement, it would have been impossible to carry on my

studies and research for my Master of Science degree.
















TABLE OF CONTENTS
page

A C K N O W L E D G M E N T S ................................................................................................. iv

L IST O F F IG U R E S .... ...... ................................................ .. .. ..... .............. vii

ABSTRACT .............. .................. .......... .............. ix

CHAPTER

1 IN TR OD U CTION ............................................... .. ......................... ..

1.1 M otiv action ............................................. 1
1.2 M ain C contribution ................................................................. ........................ 2

2 BACKGROUND KNOW LEDGE.......................................... .......................... 3

2.1 Extensible M arkup Language (XM L) ..................................... ..............3
2.2 Extensible Stylesheet language Transformation (XSLT).............. .................4
2.3 Scalable V ector G raphic (SV G ) ........................................ ......... ............... 5
2 .4 ru b e ....................................... ........................... ................ 6
2.4.1 Paradigm and M ethodology ........................................ ...... ............... 7
2.4.2 Framework.............................................. 7
2.4.3 M odeling and Simulation in rube....................................... ................... 9

3 R E L A T E D W O R K .......... .................... .......................................... ........................... 10

3.1 Scalable Vector Graphic (SVG) Visualization and Modeling............................10
3.2 Extensible 3D (X3D) Visualization and Modeling ............................................11
3.3 Visual Simulation Environment: VSE (Balci)................... .................................11
3.4 Diagrammatic Representation and Reasoning.....................................................13
3.5 Sodipodi .................. ................ ..... ...... .. ......... .......... 14

4 rube 2D FRA M EW ORK ........................................... ...................................15

4.1 Paradigm and M ethodology............................................ ........... ............... 15
4.2 Development Environment ........... ...... ........ ................... 16
4.3 Framework ................. .. .. ...... ....... ..........17
4.4 rube2D C ontribution.................................................. ............................... 19
4.4.1 O pen Source .................................................... ..................... 19
4.4.2 XML-Based Modeling and Simulation ........................................... 20









4 .4 .3 ru be M eth odology ........................................................... .....................2 1
4.4.4 Aesthetic Computing Approach Modeling......................................... 21
4.4.5 Integration of Model Presentation with Dynamic Model.........................22

5 M O D E L IN G IN rube 2D .............................................. ......................................... 23

5.1 M odel Representation in M XL ...................................................................23
5.1.1 MXL Model Structure ................................ .......................... 23
5.1.2 JavaScript Functionality ................................................... .......................26
5.2 M odel R presentation in SV G ......................................... ......................... 27
5.3 M odel Creation .......... ........................... ....... ... ... ........ ...... 33
5 .3 .1 SV G C reaction ................................................................... ................ .. 3 3
5.3.2 MXL Creation from the SVG Model: GUI............. .......................34

6 SIM U LA TION IN rube 2D ...................................... .......... ............................... 41

6 .1 O v erv iew ................................................................................................ ..... 4 1
6.2 M X L to D X L Translation.......................................................... ............... 41
6.3 D XL to JavaScript Translation .........................................................................43
6 .4 M odel F u sion E ngin e ......................................... .............................................4 5
6.5 M odel Sim ulation .............................. ......................... ... ...... .... ...........48

7 C O N C L U SIO N ......... ......................................................................... ........ .. ..... .. 52

APPENDIX

A SCHEM A FOR M XL AND D XL ...................................................................... ...54

B MODELING AND SIMULATION EXAMPLE............................. ...............56

L IST O F R E F E R E N C E S ......... .. ............... ................. ................................................70

B IO G R A PH IC A L SK E TCH ..................................................................... ..................72
















LIST OF FIGURES


Figure pge

2-1 The XM L-based rube fram work structure ........................................ ..................8

4-1 O overall structure of rube2D ....................................................................... ...... 18

5-1 A n FB M w ith three blocks......................................................................... .. .... 24

5-2 Model file for FBM with 3 blocks .......... ............. .............. 24

5-3 M ultim odel exam ple ...........................................................................26

5-4 JavaScript functions for the FBM MXL with three blocks.................................27

5-5 An SVG representation of FBM with three blocks......... ............... 28

5-6 SVG source code for FBM ............................................................................. 29

5-7 Different SVG representation of FBM with three blocks.................. ......... 30

5-8 An FSM for a four-stroke engine...................................... ......................... 31

5-9 A SVG representation of a four-stroke engine dynamic model...........................32

5-10 Phases of a four-stroke engine in SVG A) Intake stroke B) Compression
stroke C) Power or work stroke D) Exhaust stroke ............................................32

5-11 Snapshot of SVG creation using Sodipodi............................................... 34

5-12 Framework of GUI of MXL creation tool ..................................................36

5-13 Data structure for SVG element in Select.js.......................... .......................38

5-14 Snapshot of the MXL creation GUI.............................. ......... ................. 39

5-15 rube2D framework with the MXL creation GUI............................................40

6-1 A DXL of FBM with three blocks ....................................................42

6-2 DXL block diagram for FBM with three blocks................. .....................43









6-3 Abstract segmentation of the JavaScript code generated from FBM DXL ..........44

6-4 Abstract code about the model variables in simulation code..............................45

6-5 Code segment from the Model Fusion Engine (SVGmerge.xsl)...........................47

6-6 Code segment of the final SVG ............................ ......... ............... 48

6-7 Code for the variable declaration and assign statements in the merged SVG.......49

6-8 Example of the modified user_code0 method in the merged SVG ...................50

6-9 Snapshot of the fi nal SV G ........................................ ........... ....... .....................51

A -1 M X L schem a....................... .......................... .. ...... .. ....... ..... .... 54

A -2 D XL scheme a .................................... ... ... ........... .............. .. 55

B-l Block diagram for x" + 0.8x' + x = 2 ....................................... ............... 56

B-2 SVG scene for the FBM in Figure B- ...................................... ............... 56

B-3 M XL for the FBM in Figure B- ........................................ ........ ............... 57

B-4 User input JavaScript for the FBM in Figure B-............... ............... 58

B-5 DXL for the FBM in Figure B- .........................................................................59

B-6 User simulation code in merged SVG ....................................... ............... 60

B -7 F in al sim u latio n ....................................................................... .. .................... 6 1

B-8 Diagram for the four stroke gasoline or diesel engine...............................62

B-9 SVG scene for the multimodel in Figure B-8 ................................................62

B-10 MXL for the multimodel in Figure B-8 ............................. ............... 63

B-11 User input JavaScript for the multimodel in Figure B-8.....................................64

B-12 DXL for the multimodel in Figure B-8 .......... .......... .......... ..............65

B-13 User simulation code in merged SVG ....................................... ............... 67

B -14 F final sim ulation .......................................................................... ..................69















Abstract of Thesis Presented to the Graduate School
of the University of Florida in Partial Fulfillment of the
Requirements for the Degree of Master of Science

AN XML-BASED DIAGRAMMATIC DYNAMIC
MODELING AND SIMULATION SYSTEM

By

Hyunju Shim

August, 2003

Chair: Paul A. Fishwick
Major Department: Computer and Information Science and Engineering

The emergence of eXtensible Markup Language (XML) brought a new way of

representing information and knowledge on the World Wide Web. The XML was also

found to be very useful for modeling and configuring graphical elements and opened a

new way to share them over the Web. Much research and XML-based technology is used

for modeling and visualization in Extensible 3D (X3D) and Scalable Vector Graphic

(SVG). The primary goal of this thesis was to develop an effective way to represent a

model in XML, especially SVG. A secondary goal was to construct a powerful modeling

and simulation framework using XML-based technology.

We constructed a rube2D modeling and simulation framework to broaden the

paradigm and methodology of rube into the 2D models, especially for the diagrammatic

dynamic models. The precursor of rube2D, rube, was developed as a modeling and

simulation framework for 3D models.









The models in rube2D can be viewed in two different perspectives. The model

can be understood by its dynamic behavior over time. It also can be described according

to its physical appearance or metaphoric presentation. The two perspectives of the model

are defined in two separate parts of rube2D. The model topology is defined in

Multimodel eXchange Language (MXL). The model presentation is defined using SVG.

Separating the model topology from the presentation makes the model topology

independent from presentation and vice versa. This independence provides great

advantages such as effectiveness, flexibility, and aesthetic computing in the modeling and

simulation and this is what distinguishes rube2D from similar works.

For creating the simulation code from the model topology, Model Translation

Engines is defined in XSLT stylesheet. To represent heterogeneous model types in MXL

into homogeneous block model, Dynamics eXchange Language (DXL) is defined. DXL

is an assembly-like language between a high level model description language, MXL and

the executable simulation code. Model Translation Engines translate MXL into DXL and

DXL into a simulation JavaScript code. The system being modeled in MXL can be

simulated using SimPackJ/S, which provides simulation code libraries.

Model Fusion Engine, which is written in the eXtensible Stylesheet Language

Transformations (XSLT), is developed to merge the model presentation defined in SVG

with the simulation code generated from the model topology, MXL. Finally a dynamic

SVG that behaves as defined in model topology is generated as a result of model fusion.

The final output of rube2D is an SVG that has same geometry as the original

SVG, and dynamic behavior as defined in the model topology file, MXL.














CHAPTER 1
INTRODUCTION

1.1 Motivation

The primary motivation for my research was the the possibility of extending the

power of modeling and simulation using rube in 2D modeling. The modeling and

simulation framework rube is based on eXtensible Markup Language (XML)

technologies and has a distinct modeling and simulation methodology of separating

model topology from presentation.

The research on 2D modeling and simulation using rube2D mainly focuses on

two issues. One issue is how to present a model in a 2D world while keeping the XML-

based architecture. The answer came from the existing XML for 2D graphics. By having

Scalarable Vector Graphics (SVG) with fully defined specification, SVG model

presentation in rube2D became a very solid process.

The process of obtaining a simulation code from a model topology is well defined

and developed in rube. The second issue of 2D modeling and simulation using rube2D is

how to make extensive use of the simulation code for simulating a model defined in

SVG. The answer came from one of the XML technologies, eXtensible Stylesheet

Language Transformations (XSLT). By defining transforming rules and merging rules

between the original SVG and simulation code in the XSLT stylesheet, dynamic SVG

with JavaScript simulation code associated can be obtained. Simulation of the dynamic

SVG can be easily achieved by simply running the final SVG.









As an extended interest, MXL creation tool with Graphic User Interface (GUI) is

implemented to facilitate modelers. This tool provides a way to create MXL from a

presentation, SVG.

1.2 Main Contribution

rube2D is an open-source framework. Modelers can do modeling and simulation

using rube2D for free. Also, modelers can copy and modify a whole or part of the source

codes in any way. rube2D is XML-based. Powerful XML technologies, such as XSLT

stylesheet, the XSLT processor, and Web-based modeling are used in rube2D.

The methodology used in rube2D, separating model semantics from presentation,

provides excellent features to the modeling and simulation in 2D. First, an aesthetic

computing and modeling in 2D can be achieved easily by the existence of an independent

model presentation from its semantics. Second, several different metaphors for the model

presentation can be applied over the same model topology. Finally, integration of the

scene with a dynamic model is much easier in the rube2D environment.

1.3 Organization of the Thesis

Chapter 2 discusses background knowledge of rube2D. Chapter 3 introduces the

related modeling and simulation works. A detailed discussion of rube2D is presented in

Chapter 4. The paradigm and methodology of rube2D is introduced followed by an

explanation of the development environment and overall framework. Also, a detailed

discussion about the contribution of rube2D is addressed in Chapter 4. Chapter 5

introduces modeling in rube2D divided into two parts: model topology design and model

presentation design. The model simulation process with the Model Fusion Engine is

introduced in Chapter 6. Conclusions are given in Chapter 7.














CHAPTER 2
BACKGROUND KNOWLEDGE

Basic ideas and knowledge underlying rube2D, which is an XML-based

diagrammatic dynamic modeling and simulation framework, are introduced in this

chapter. The eXtensible Markup Language (XML) is reviewed first followed by Scalar

Vector Graphics (SVG) which is 2D graphical XML. Next, XML technology eXtensible

Stylesheet Language Transformation (XSLT), which plays an important role in rube and

rube 2D architectures is discussed. Finally, rube, the precursor of rube 2D, is explained

in the last section.

2.1 Extensible Markup Language (XML)

The definition of XML from the abstract of the XML 1.0 specification [1] is:

The Extensible Markup Language (XML) is a subset of SGML that is completely
described in this document. Its goal is to enable generic SGML to be served,
received, and processed on the Web in the way that is now possible with HTML.
XML has been designed for ease of implementation and for interoperability with
both SGML and HTML.

As described in the XML specification, XML is directly derived from Standard

Generalized Markup language (SGML). Although SGML is very powerful and useful,

particularly for dealing with large quantity of structured data, it is complex and

expensive. The complexity of SGML makes it inconvenient for use over the Internet. The

main design goal of XML is to extend the power of SGML to the Web in a way that is

now possible with HTML. The XML simplifies SGML for ease of implementation while

it inherits the power of SGML.









The XML is also playing an increasingly important role in the exchange of a wide

variety of data on the Web and elsewhere. While HTML is mainly about how to represent

information, XML mainly deals with the nature of the information. This feature of XML

lets the programmer manipulate the data in an XML document for the data representation

and also for other purposes. The XML also provides a way to define one's own tags and

structure of documents. The XML schema provides a means for defining the structure,

contents, and semantics of documents.

Unlike HTML, XML separates information from details by how it is presented.

This enables information to be rendered or used appropriately for a variety of devices.

This also gives great flexibility for design and redesign of XML documents.

Another great power of XML comes from its transformability. Through the XSLT

process, one XML document can easily converted into another XML document. Using

XSLT, one domain of XML can be translated into another domain of XML without a

complicated process.

The XML features previously described give strong power to XML and motivate

many research groups and enterprises to use XML as a tool or a software environment.

The last two features or advantages of XML, separation of data from presentation and

transformability, are the main features of rube architecture.

2.2 Extensible Stylesheet language Transformation (XSLT)

The XSLT definition in the specification [2] gives a clear idea what it is:

XSLT is designed for use as part of XSL, which is a stylesheet language for XML.
In addition to XSLT, XSL includes an XML vocabulary for specifying formatting.
XSL specifies the styling of an XML document by using XSLT to describe how the
document is transformed into another XML document that uses the formatting
vocabulary.









XSLT 1.0 published on 16 November 1999. The XSLT describes how an XML

document or several XML documents are translated into another XML document. The

XSLT plays a very important role for data transformation between two different XML

applications.

Encoding interchanging data between different organizations or different

applications in XML does not mean automatic data conversion between two different

domains. Encoding in XML means it is easy to create and read the data and it is easy to

write programs which process XML documents. Some kind of intermediate process is

needed to convert one XML document into another form of an XML document. The

XSLT stylesheet translates an XML document into another XML document based on

template rules which describe how each element must be processed for transformation. A

transformation expressed in XSLT is called a stylesheet.

For an XML document transformation, the XSLT processor reads both the XSLT

stylesheet and XML documents. The XSLT processor outputs new XML documents by

reading the XML document and applying rules described in the XSLT stylesheet. The

well-known XSLT processors are SAXON [3] developed by Michael Kay and XALAN

[4] developed by the Apache Software Foundation.

In rube architecture, two kinds of XML, MXL and DXL, are defined for model

types and dynamic behavior of a model description, and the XSLT stylesheet is defined

for translation needed for the modeling and simulation process, which will be discussed

in Chapter 2 and Chapter 4 in detail.

2.3 Scalable Vector Graphic (SVG)

In the Scalable Vector Graphic (SVG) 1.0 specification, SVG is defined as a

sublanguage of XML describing a two-dimensional vector or vector/raster mixed









graphics [5]. Three types of graphic objects in SVG are vector graphic shapes, image, and

text. The SVG is a W3C recommendation released 4 September 2001. By being written

in XML, a SVG builds on strong foundation and gains many advantages from XML, such

as standardization, internationalization, powerful structuring capability, an object model,

and so forth.

The SVG drawings are interactive and dynamic. Interactive means that SVG

drawings can interact with a user via input devices such as a mouse. Dynamic means the

SVG drawing can be changed via a script or declarative 'animation' element.

Sophisticated interactive and dynamic SVG applications are made possible by use of

Web-based script languages, such as JavaScript, which accesses SVG DOM (Document

Object Model) and with a rich set of event handlers. The SVG DOM provides complete

access to all elements and attributes of the SVG document. Thus all elements and

attributes of the SVG document are easily accessible and dynamically changeable after it

is loaded into a web browser. Also, SVG works well across platforms and output

resolutions.

With all the strong advantages previously described and the openness of SVG,

SVG has emerged as a great interest among Web designers and computer graphic

communities. rube has extended its visual presentation level not only in 3D but also into

2D with SVG support. SVG can fit into a model presentation component of rube

architecture without any difficulties since SVG itself is a sublanguage of XML and rube

is XML-based architecture.

2.4 rube

In this section, we will discuss software modeling and a visualization framework

called rube developed by rube research and development team in the Computer and









Information Science and Engineering Department at the University of Florida. rube is a

3D XML-based customized modeling and simulation framework for dynamic models.

rube framework encompasses model simulation, as well as modeling of a dynamic

model. In Section 2.4.1, the paradigm and methodology of rube is introduced, rube

framework is described in Section 2.4.2. Finally, the modeling and simulation process in

rube is discussed in Section 2.4.3.

2.4.1 Paradigm and Methodology

The main goal of rube is creating a modeling and simulation methodology that

supports a separation of a dynamic model semantic from presentation and visualization

[6]. rube methodology creates great potential into system modeling and simulation. A

consideration of metaphor will play a great role in rube. rube paradigm allows the model

developer total freedom in the choice of metaphor [7]. rube also prompts the integration

of an aesthetic aspect of a model into modeling and simulation.

rube evolved from its precursor Object-Oriented Physical Multimodeling

(OOPM). With OOPM, programs are multimodels defined as a hierarchically connected

set of dynamic models. Each model type in a multimodel is a basic dynamic behavioral

model type, such as Finite State Machine (FSM), Functional Block Model (FBM),

System Dynamics Model (SDM), Equation Constraint Model (ECM), Petri Net (PNET),

and others [8]. As a successor of OOPM, rube encompasses single models, as well as

multimodels. The single dynamic behavioral models are freely and easily combined into

or glued together into multimodeling in rube.

2.4.2 Framework

The overall structure of XML-based rube architecture is shown in Figure 2-1.

rube is mainly a 3D XML-based framework for dynamic models. The model in rube is









described in two separate files: a scene file which describes model presentation in X3D,

and a model file which defines the semantic of model in MXL. X3D [9] is XML version

of Virtual Reality Modeling Language (VRML). X3D is able to express geometry and

behavior capabilities of VRML 97. MXL stands for Multimodel eXchange Language,

which defines the topology and dynamic behavior of the model type. MXL will be

discussed in Chapter 5 in detail.

In rube architecture, the model file, which is written in MXL, is translated into

assembly level model language DXL by an XSLT stylesheet. Overall structure of rube

framework is shown in the Figure 2-1.



X3D w"o Sinulatioln IIXL

YS LT'I MXL to DXL translator



DXL to JavaScript translator

Model Fusion Engine



I3D) w. Simulation




Figure 2-1. The XML-based rube framework structure

DXL is another model language which stands for Dynamic eXchange Language. DXL

represents a multimodel containing more than one heterogeneous sub-model type within

homogeneous block diagrams. DXL acts like assembly level languages between MXL

and a simulation code referencing SimPackJ/S library [10]. SimPack J/S is a collection of

JavaScript libraries for computer simulation derived from SimPack. DXL is translated









into a simulation code using Document Object Model (DOM). Currently the simulation

code generated from DXL is written in JavaScript. Generating a Java version of the

simulation code is now under development. The simulation code can be a stand-alone

processor, which generates simulation output of the model semantic in MXL.

2.4.3 Modeling and Simulation in rube

In the XML-based rube framework, the model presentation and model semantic

are described with XML. However, to visualize the model in any way, the X3D model

presentation file needs to have a mechanism to visualize the X3D contents describing the

model geometry since no X3D viewer is available. Fortunately, with no surprise, there

many kinds of translators exist which transform X3D into VRML and vice versa. Thus

developers can create the model presentation file in VRML and translate it into X3D.

X3D with simulation code can be transformed into VRML for visualization.

By using the simulation output generated from the simulation code written in

JavaScript, X3D or VRML model presentation can be accessed dynamically and

simulated as the user sets the relationship between the simulation output and model

geometry.














CHAPTER 3
RELATED WORK

This chapter discusses related research work in modeling and simulation and the

model and software visualization. Among various modeling and simulation related work,

XML technologies [1-5] based works are discussed in this chapter.

SVG and X3D are XML graphic languages and both provide rich elements of

graphical components. Many research groups are adapting SVG or X3D for modeling

and visualization. Modeling and visualization in SVG and X3D are discussed first and

Visual Simulation Environment (VSE) is introduced next. In the last section, the open

source SVG creation tool, Sodipodi, which facilitates users with great functionality and

easiness, is introduced.

3.1 Scalable Vector Graphic (SVG) Visualization and Modeling

Visualization using SVG is proposed by Domokos and Varro[ 1]. The main

features of this visualization framework include:

* SVG-based batch visualization framework for modeling languages defined by
metamodeling techniques

* Combining XML standards with existing graph transformation and graph drawing
technologies

* An open, tool-independent architecture

Their overall aim is to visualize a concrete model such as Petri Net by transforming

it into an SVG representation, which can be rendered by Web browsers. The visualizing

process involves transforming from an abstract representation of model to a concrete

SVG-based textual format model. The motamodel first transformed into XML Metadata









Interchange(XMI) by their "layout" translator. This transformed XML from XMI is

translated into SVG for the model visualization. XSLT stylesheet is applied over XMI

and generate SVG.

The rube further extends use of the technology of XML in modeling and

simulation. SVG in rube 2D not only visualizes a system model but also transforms into a

dynamic SVG, which is accessible to a simulation code of a dynamic behavior of model.

With the simulation code in which the dynamic behavior of a model is defined, the ability

of SVG in rube 2D is extended from the model visualization capability to the model

simulation capability.

3.2 Extensible 3D (X3D) Visualization and Modeling

The Naval Postgraduate School (NPS) performed research toward development of

a scenario authoring and Web-based visualization capability [12]. The main activities are

employing Web-based technologies for information content (XML) and 3D graphic

content (X3D) to create an initial presentation of operations. The NPS project is called

Scenario Authoring and Visualization for Advanced Graphical Environment (SAVAGE).

The main component for NPS's framework is composed of an authoring

component and visualization component. The main feature ofNPS's tool is automatic

creation of a 3D model for an operation. The authoring component creates X3D for the

scenario and the visualization component takes authorized X3D into VRML so the users

can display their authoring.

3.3 Visual Simulation Environment: VSE (Balci)

The VSE is object-oriented, component-based, visual simulation model

development and execution environment. Dynamic objects of model are entities which









moves physically or logically moves in a model, and graphically decomposed in a

hierarchical and natural say in VSE.

The VSE solves problems if the problem can be simulated using discrete-event

simulation [13]. The architecture of the VSE model consists of static architecture and the

dynamic object, and a model component is either part of the model static architecture or a

part of the dynamic object. The model structure is created in a hierarchical and natural

manner. A standard built-in VSE class library is available to provide reusable model

objects. Communication between objects is done by message passing.

The main processes of modeling and simulation in VSE are the editing model

specification and simulation using a VSE simulator. A component in VSE can be created

as a part of the model static architecture in the VSE editor. The VSE editor also translates

the component created into executable code automatically. The VSE simulator provides

an environment for execution, animation, and experimentation of the model created by

the VSE editor.

The VSE is an object-oriented simulation environment. One of the benefits of

VSE comes from component-based visual simulation and the capability of reusable

simulation. These characteristics of VSE enable developers to observe large-scale visual

simulation with reduced cost.

rube2D is differentiated from VSE in terms of the methodology of modeling and

simulation. While VSE mainly focuses on object-oriented, component-based modeling

and simulation with reusability, rube2D is mainly XML-based. rube2D separates model

semantic from presentation and this gives freedom to the users to choose their own









metaphor for the model and a aesthetic aspect of modeling can be integrated with model

creation.

3.4 Diagrammatic Representation and Reasoning

Diagrams are effective not only for representation but can also be useful to carry

out a certain type of reasoning. A vocabulary definition of diagrammatic is a visual

means of representation of information. Diagrams can be used as representational

systems [14]. Diagrams are externally drawn representation systems rather than internal

mental representations. Diagrammatic representations may use graphical element, as well

as pictorial elements.

Recently, computer scientists, philosophers, and researchers have focused on

diagrammatic representation systems. The interest in the diagrams has been generated by

the fact that diagrams are more effective than other types of representations for certain

types of tasks such as a reasoning process model, data and knowledge model, and

scientific model. Zenon Kulpa summarized the main criteria characterizing the usefulness

of a diagrammatic language as expressiveness, effectiveness, and presentation ability

[15]. Euler's and Venn's diagrams are examples of how a mathematician's simple and

internal intuition about diagramming reasoning has gradually been developed into an

external formal representation system.

The diagrammatic representational models may describe a physical situation or

abstract phenomenon. Diagrammatic representations of physical situation can be

achieved by simplifying the physical objects or dimensions while abstract phenomenon

can be presented by abstract element and relations through metaphor. Although diagrams

do not necessarily need to be in 2D, many applications of diagrams are presented in 2D.

That is probably because the aim of diagrammatic representation, effective reasoning, is









best achieved using 2D graphics. Of course, diagrams can be present in 3D. Modelers

who want to model a diagrammatic representational system will find rube2D is a very

qualified framework to achieve their modeling and simulation goal.

3.5 Sodipodi

Many kinds of free SVG editors are currently available on the Web. Sodipodi [16]

is one of the most powerful and well-equipped free SVG editors. Sodipodi is an open-

source, vector-based drawing program. It uses W3C SVG as its naive file format. Thus

model or graphic designers can create and visualize the SVG without any exporting or

transformation, as most of free SVG editors require. Also Sodipodi supports a wide

variety of flat form. The first version of Sodipodi was developed for Linux environment

but the Windows version of Sodipodi is available with the All-in-One auto installer

currently.

The main author of Sodipodi is Lauris Kaplinski. However, since Sodipodi is

open-source free software, many people are participating in the development of Sodipodi

and heading toward the construction of more reliable and efficient SVG editors together.

rube2D provides an extensive way of using Sodipodi in system modeling. Since

SVG generated from Sodipodi is not compatible with rube 2D adaptable SVG, several

processes are added in rube2D framework to make extensive use of Sodipodi SVG.

Chapter 5 discusses this issue in more detail.














CHAPTER 4
RUBE 2D FRAMEWORK

In this chapter, diagrammatic dynamic modeling and simulation framework rube2D

are discussed in detail. The paradigm and methodology of rube2D are introduced in the

first section followed by the development environment in the second section. In Section

3, the overall structure of rube2D framework is described in detail. Finally, contributions

of rube2D are discussed in Section 4.

4.1 Paradigm and Methodology

rube2D is an XML-based software modeling and simulation framework for 2D.

rube2D is a ramification of rube. rube2D extends the capability of rube into the model

domain of 2D while preserving the paradigm and the methodology [6]. The main idea of

rube, that is, separating the topology of the model from its presentation, gives flexibility

to the presentation of the model. That is to say, separating the topology from its

presentation makes applying same topology over different model presentations possible.

Separation of the topology from the presentation gives freedom to model

designers with not only the flexibility of applying the model topology over different 3D

presentations or metaphor, but also making it possible to apply the model topology over

2D presentations of the model. If we can separate the model topology from its

presentation and apply that topology over different 3D presentations, then we can easily

think of the same mechanism with 2D presentations in rube. This gives an intuitive idea

of rube 2D.









The power of rube 2D comes from the extensibility of rube modeling and

simulation into model domains, which are more efficient and well described in 2D. The

diagrammatic modeling and simulation for logical, mathematical, and physical systems in

rube 2D enable developers to build more specific and precise models. Reasoning of the

system in those fields can be performed with more care by concentrating the model

semantic into model files in rube 2D. The diagrammatic representation of the model will

also give a freedom to model developers to choose proper metaphors for their model to

increase understandability along with the possibility of aesthetic modeling.

4.2 Development Environment

The primary development environment of rube2D is XML. The two components

of the rube, model presentation file and model semantic file, are defined in XML. Also,

every process of modeling, simulation, and visualization in rube2D, is associated with

XML and XML technology.

In rube, the model presentation file is either in X3D or VRML. Since there is no

existing X3D viewer, creating X3D document is cumbersome task. Developers can take

alternative ways to compose the model presentation file with VRML, which will later be

translated into X3D by available translation free tools. The final X3D with a simulation

code also must be transformed into VRML to visualize the final output of simulation.

The release of XML for 2D graphics, SVG, has brought standardized and

internationalized graphics in 2D graphics of the Web. rube2D is inspired by the

interactivity and dynamics of SVG. By representing the model presentation file in SVG,

rube framework accommodates XML in 2D. Unlike X3D, SVG is provided with many

free viewers, which can be plugged into the Web browsers very easily. The SVG model









presentation file can be directly fed into the rube2D architecture without any

transformation necessary for the model visualization.

rube2D provides GUI for MXL creation from model presentation in SVG. The

model semantic, MXL, is a logical perception and understanding of the dynamic model

about how it works while presentation, SVG, is physical perception and configuration of

the model about how it looks. Both MXL and SVG in rube2D is different aspect of the

same model and they are associated with each other. Logical representation of the model,

the model semantic, can be extracted from the physical presentation. Likewise, the

presentation of the model can be constructed from model semantics with extra

information. The extra information involves configurations of model objects, as well as

the layout of the model objects. In rube2D, by providing a way to construct a model

semantic from a model presentation, developers can construct a model file from a

presentation file. The GUI creating MXL from SVG is discussed in detail in Chapter 5.

4.3 Framework

The overall architecture of rube 2D is described in this section. The basic

structure of rube 2D is almost identical to rube described in Chapter 2. The only

difference is the language used in the model presentation file, SVG. The model

representation in rube2D is achieved by decomposition of the dynamic model into two

components: model presentation and model semantic. The model presentation of a

dynamic model is defined in a presentation file written in SVG. The model semantic of a

dynamic model is described in scene file written in MXL. The final SVG is created by

internal transformation processes in rube2D architecture.

The SVG file, input to the rube2D, is purely static and has only geometry

information of the model. However, every element in SVG can be easily integrated with









the rest of the architecture of rube2D.

The model file written in MXL is like an abstract and a high-level description of

heterogeneous model semantics providing the model semantic of dynamic behavior. The

model simulation code is generated transformations of the model file. First, MXL file is

translated into a low-level model file, Dynamic eXchange Language (DXL). DXL is an

assembly-level modeling language which represents a multimodel containing more than

one heterogeneous sub-model type within homogeneous block diagrams. That is to say,

heterogeneous model types described in MXL are transformed into homogeneous block

diagrams model representation in DXL using Java DOM and SimPackJ/S [10]. Next,

DXL is translated into executable simulation JavaScript codes. Finally, a Model Fusion

Engine fuses the JavaScript codes with the SVG model presentation file. The output from

the Model Fusion Engine is SVG file with associated simulation codes. The overall

structure of rube 2D is shown in Figure 4-1.



'w wo _W Shnulation NIWL

iS LT MtXLto DXL translator



DXL to JavaScript translator

Model Fusion Engine


SVG w Shnuiarion



Figure 4-1. Overall structure of rube2D

The model fusion engine in rube2D is defined in XSLT to integrate SVG with the

JavaScript simulation code. This new model fusion engine performs the same









functionality as it works in rube. The model fusion engine in rube2D will be discussed in

Chapter 6 in detail.

To facilitate users with the creation of model presentation in SVG, rube2D

provides a way to use an open-source SVG editor, Sodipodi [16], by providing an XSLT

stylesheet which translates SVG generated by Sodipodi into rube2D applicable SVG.

This stylesheet transform sodipodi SVG into rube2D framework accessible SVG by

mainly reformatting by way of declaring attributes in SVG elements since the SVG

element generated from Sopipodi uses a client-side element style definition, which cannot

directly fit into rube2D.

4.4 rube2D Contribution

In this section, the main contributions of rube2D are discussed. Since rube2D is

XML based, it takes strong power that XML technologies provide. rube2D extends the

methodology of rube, and enables model developers to achieve personalized and

aesthetic computing approach in modeling.

4.4.1 Open Source

The open-source software/tool is a software/tool software for which the source

code is fully distributed or available with complied form without charge or limitations on

modifications. No one is restricted from making use of the program in a specific field of

endeavor [17]. The main advantages of the open source software are performance and

reliability. According to the nature of an open source, the performance and reliability of

the software can be easily proved from the fields. Linux, Apache Web Server, and

Mozilla Web Browser are good examples of open-source projects.

rube2D framework is an open-source tool. It is available as a source code, and

anybody can copy or modify the source code without any restriction. Because the main









development environment rube is XML and HTML, rube 2D can be easily edited or

shared among the modeling and simulation community.

4.4.2 XML-Based Modeling and Simulation

One of the most prominent features of rube framework [6] is that it is XML-

based. As a ramification of rube, rube2D is also founded on XML technology [1-5]. As

mentioned in Chapter 2, XML is a Web standard for information exchange and

repositories. The range of an XML application is extensive from e-business to

mathematics applications. XML separates data from presentation. Separating information

from details in the way it is to be represented brought huge advantages to the Web-based

technologies.

In particularly, rube2D extends the feature of XML, separating data from the

presentation, to the modeling and simulation domain. The model in modeling and

simulation can be viewed from two different aspects. One aspect is from the view

concerning the model semantic, which describes how the model is supposed to act. The

other aspect is the model presentation, which describes the appearance of the model. The

basic line of rube2D is separating model semantic from presentation as XML does. Both

the model semantic and model presentation are written in XML in rube2D system. MXL

is used to define the model semantic, and SVG describes the model presentation. Both

MXL and SVG are XML sublanguages.

XML is a Web standard for information exchange and repositories. Thus XML is

straightforwardly usable over the Internet. Web-based modeling and simulation promote

publication and standardization of digital model objects, as well as the reusability of

those objects. By taking this feature of XML, rube2D extends its power to the Web-based

modeling and simulation.









The XML documents are easy to create, and it is easy to write programs which

process XML documents. By building on cleanly implemented specifications, creation of

XML-based implementations does not require a huge effort. XML also supports a wide

variety of applications.

4.4.3 rube Methodology

rube2D methodology succeeds the rube methodology. The goal of rube is to

create a model design methodology that supports a separation of a dynamic model

semantic from presentation and visualization. In this way, creating more a personalized

and aesthetic presentation of a model can be achieved with relatively less effort.

Separating model semantics from model presentations gives model developers a

freedom to apply different types of model presentations or metaphors to the model

semantics [18]. Model developers can construct their own meaningful model metaphor

for model presentations as well as they can reuse any existing presentations. An aesthetic

computing approach of modeling is also possible in rube2D modeling and simulation.

The aesthetic computing approach in rube2D will be discussed in Section 4.4.4 in detail.

The fact that visualizations can be highly customized by the user makes rube and rube2D

unique from similar works.

4.4.4 Aesthetic Computing Approach Modeling

One of the primary purposes of rube and rube2D is to facilitate aesthetic formal

models, especially mathematical and computing models. As prototyping machines and

computer hardware power grows rapidly, representations of mathematics, sciences, and

software have broaden their expressive capabilities. With increased efficiency for

creating computing models, we have an opportunity to re-phrase formal representations

of such model [19].









Representation of computational models can be achieved by means of metaphor.

The use of metaphors can provide a new way of extending the existing computational

model representation into a more exploratory, aesthetic medium. The model type which

has a computational topology but does not have physical representation can be expressed

in more aesthetic way by exploring the use of artistic methods within common

representations in computing.

Modelers who want to model an abstract scientific model into a more effective

and expressive aesthetic form can achieve their goal in modeling and simulation with

rube2D.

4.4.5 Integration of Model Presentation with Dynamic Model

A dynamic model is used to express and model the behavior of a system over

time. It plays an important role in describing system behavior explicitly for system

development, especially for a system design phase in software engineering. However, a

dynamic model is symbolic presentation of system behavior, not actual presentation the

system.

In a modeling and simulation world, visualization of a model is an essential part.

While a dynamic model describes the behavior of a system over time, visualization of a

model is a way to describe static presentation of the system. A dynamic model and model

presentation are two different ways of understanding and describing the system.

In rube2D, users are able to juxtapose a dynamic model with a model presentation

within the scene file. Both a dynamic model and model presentation can be simulated

using the JavaScript simulation code result to represent the dynamic of the system and the

picture of the model over time. By simulating a juxtaposed scene of a dynamic model

with a model presentation, an understanding of the system is much easier.














CHAPTER 5
MODELING IN RUBE 2D

rube2D is a framework primarily for modeling and execution. In general,

modeling is a way of reasoning about systems which involve the level of understanding

of the system. Modeling or model design can be divided into two parts. One part is

defining the dynamics of the model. The other part is defining the static presentation of

the model. In this chapter, modeling in rube2D, constructing the model topology in

MXL, and the creating model presentation in SVG is discussed in detail.

5.1 Model Representation in MXL

5.1.1 MXL Model Structure

The model file defines the topology and dynamic behaviors of the model type.

The model file is defined in Multimodel eXchange Language (MXL). MXL provides an

effective way to represent components and dynamics of the model, as well as simulation

information in XML. To provide a concrete description of rules and syntax of the model

file, which contains a topology of the model, XML schema is used. The schema of MXL

is provided in the Appendix A.

Basic elements of the model file are model and simulation elements. The type

attribute of the model element defines the type of model. Currently, the Functional Block

Model (FBM) and Finite State Machine (FSM) are supported in rube2D. The topology

element defines interconnectivity of model objects. The model object can be represented

by a node element. The connectivity among model objects can be represented by an edge

element. Each node or edge element has a script element, which contains a link to the









JavaScript file describing the dynamic behavior of the node or edge element. The

simulation element contains information needed for the simulation of the model defined.

For the modeling example, we will use a simple equation in Eq. 5-1.

sin(x) *2 (Eq. 5-1)

The block diagram of the equation 5-1 with an additional print block for the equation is

shown in Figure 5-1. First block is sine value generator. Second block multiplies it by

two. The MXL definition for this FBM is given in Figure 5-2

FBM

Fl T12 F2 T23 F3
sin(o) times() I print()


Figure 5-1. An FBM with three blocks









Start Simulation handle (HUD)
Simulation Time:


...... SVG elements copied from original SVG


Figure 6-6. Code segment of the final SVG

The merged SVG is the final output of the rube2D framework. This SVG includes

a precisely defined scripting code, which produces the results for each model object, as

defined in the model topology file, MXL. Simulation of the merged SVG is done through

changing the attribute values of the element. Details about the SVG element simulation

will be discussed in Section 6.5.

6.5 Model Simulation

The JavaScript code produces outputs from each node element defined in MXL.

The simulation outputs of node elements in MXL are calculated and stored in the model

variable named out in the simulation code. Those values can be used to









analyze the performance of the model or to show the state of each model object over

time. To actually use the output values for the simulation of SVG, we need to use the

model variables in the simulation code to change the attribute values of the SVG

elements.

Every ID of the SVG elements are declared as variables and the reference to the

element is stored in its variables. Figure 6-7 is the code fraction from the merged SVG.

var sine value;
var times value;
var sinepath;
var times2_path;
var sine ball;
var times ball;

function assignObjecto

sinevalue = evt.target.ownerDocument.getElementByld(" sinevalue");
times2_value = evt.target.ownerDocument.getElementByld("times2_value");
sinepath = evt.target.ownerDocument.getElementByld("sine_path");
times2path = evt.target.ownerDocument.getElementByld("times2_path");
sineball = evt.target.ownerDocument.getElementByld("sineball");
timesball = evt.target.ownerDocument.getElementByld("timesball");
Time = evt.target.ownerDocument.getElementByld("Time");
}

var out F
var out F2
var out F3

function usercode(
{
/User willfill this function later to manipulate SVG element


Figure 6-7. Code for the variable declaration and assign statements in the merged SVG

The function user_code0 in Figure 6-5 has no code in the body. This is where

users can use the model variables to simulate SVG elements in the way they want. Figure

6-8 shows the example of the modified user_code0 method.







































Figure 6-8. Example of the modified user_code0 method in the merged SVG

In the example code in Figure 6-6, the simulation result of the first block, out_Fl,

is used to change the value of the text element 'boardsine_value', change the position

of the rectangle element 'sine_ball', and draw an extended path from the path element

'sinepath'. Likewise, the result of the second block, out_F2, is used to change the value

of the text element 'boardtimes2_value', change the position of the rectangle element

'pathball', and draw an extended path from the path element 'times2_path'. Figure 6-9

is a snapshot of running the merged SVG after adding the simulation codes in Figure 6-8.

The final output ofrube2D is SVG that has the same geometry as the original SVG

and dynamic behavior as defined in the model topology file, MXL. The simulation code


var sine draw = "M 181.035 690 L 189.92 690 "

var times draw = "M 179.925 670.3 L 187.699 670.3 "
var pre_outl = 0;
var pre_out2 = 0;

function usercode(

{
board sine value.firstChild.data = out Fl;
boardtimes2_value.firstChild.data = outF2;

sineball.setAttribute('y', 396 out_F1*56);
times_ball.setAttribute('y', 396 outF2*56);

diffl = pre_outl out_Fl;
diff2 = pre_out2 out_F2;

sine draw = sine draw + "1 0.5 + diffl*55 + "
sine_path.setAttribute('d', sine_draw);

times draw = times draw + "1 0.5 + diff2*55 + "
times2path.setAttribute('d', times_draw);

pre_outl = out_Fl;
pre_out2 = out_F2;







generated based on the model topology defined in MXL is used to simulate the elements
in the merged SVG. Figure 6-9 shows the result of using the simulation code to draw
graphs and text values.

Hide HUD
Start
Simulation Time, 6.18 sin ) 2 print:



-x -0a72



sinVx)*2=-1-5x


Figure 6-9. Snapshot of the final SVG














CHAPTER 7
CONCLUSION

My research goal is to provide a powerful and effective Web-based modeling and

simulation environment, rube2D, for diagrammatic dynamic models. rube2D enables

modelers to define model semantic and a model presentation, and acquire an automated

simulation model from them. By separating the model topology from the presentation,

rube2D provides a totally personalized dynamic model representation and extends the

power of modeling and simulation with an aesthetic computing approach and integration

of model presentation with a dynamic model.

The model design in rube2D is separated in two parts: topology design in

Multimodel eXchange Language (MXL) and presentation design in SVG. By

representing a model presentation in SVG, rube2D inherits all the advantages of XML

technologies. The model presentation written in SVG can be easily accessed and

modified or transformed. The model topology stored in MXL captures the dynamic

behavior of the model over time. To facilitate modelers creating MXL, an automated

MXL creation tool with GUI is provided in rube2D. This GUI lets modelers extract

model topology from the presentation and construct MXL from it.

Simulation in rube2D involves several steps: generating simulation code from

MXL and merge SVG with the simulation code. To obtain the JavaScript simulation

code, model topology in MXL must be translated into a different and executable form.

Before translated into the simulation code, MXL is first translated into Dynamics

eXchange Language (DXL). DXL is an intermediate presentation of model topology.









With simplified model topology in DXL, translation into the simulation code is much

easier. The Model Fusion Engine written in XSLT stylesheet merges the simulation code

with SVG scene file to produce a dynamic SVG. Finally users can simulate the dynamic

SVG by changing the attribute values of SVG elements using the JavaScript simulation

code.

rube2D provides extensive modeling and simulation environment for modelers to

achieve personalized and customized modeling and aesthetic computing modeling in 2D

diagrammatic dynamic models. It also provides a convenient and modularized simulation

while enables modelers the Web-based modeling and simulation with a new emerging

XML technology.

rube2D supports only for Functional Block Model (FBM) and Finite State

Machine (FSM) currently. The other model types will be supported by rube and rube2D

as the research progresses.



















APPENDIX A
SCHEMA FOR MXL AND DXL





Multimodel eXchange Language(MXL) schema for rube architecture.
Copyright 2001 University of Florida. All rights reserved.



















































Figure A-1. MXL schema
















Comment describing your root element
















































Figure A-2. DXL schema















APPENDIX B
MODELING AND SIMULATION EXAMPLE

Simple Model: Functional Block Model


Figure B-1. Block diagram for x" + 0.8x' + x = 2


Figure B-2. SVG scene for the FBM in Figure B-1








57










... Start Simulation handle (HUD) Simulation Time: SVG elements copied from original SVG Figure 6-6. Code segment of the final SVG The merged SVG is the final output of the rube2D framework. This SVG includes a precisely defined scripting code, which produces the results for each model object, as defined in the model topology file, MXL. Simulation of the merged SVG is done through changing the attribute values of the element. Details about the SVG element simulation will be discussed in Section 6.5. 6.5 Model Simulation The JavaScript code produces outputs from each node element defined in MXL. The simulation outputs of node elements in MXL are calculated and stored in the model variable named out_ in the simulation code. Those values can be used to

PAGE 59

49 analyze the performance of the model or to show the state of each model object over time. To actually use the output values for the simulation of SVG, we need to use the model variables in the simulation code to change the attribute values of the SVG elements. Every ID of the SVG elements are declared as variables and the reference to the element is stored in its variables. Figure 6-7 is the code fraction from the merged SVG. var sine_value; var times2_value; var sine_path; var times2_path; var sine_ball; var times_ball; function assignObject() { sine_value = evt.target.ownerDocument.getElementById("sine_value"); times2_value = evt.target.ownerDocument.getElementById("times2_value"); sine_path = evt.target.ownerDocument.getElementById("sine_path"); times2_path = evt.target.ownerDocument.getElementById("times2_path"); sine_ball = evt.target.ownerDocument.getElementById("sine_ball"); times_ball = evt.target.ownerDocument.getElementById("times_ball"); Time = evt.target.ownerDocument.getElementById("Time"); } var out_F1 var out_F2 var out_F3 function user_code() { //User will fill this function later to manipulate SVG element } Figure 6-7. Code for the variable declaration and assign statements in the merged SVG The function user_code() in Figure 6-5 has no code in the body. This is where users can use the model variables to simulate SVG elements in the way they want. Figure 6-8 shows the example of the modified user_code() method.

PAGE 60

50 var sine_draw = "M 181.035 690 L 189.92 690 var times_draw = "M 179.925 670.3 L 187.699 670.3 var pre_out1 = 0; var pre_out2 = 0; function user_code() { board_sine_value.firstChild.data = out_F1; board_times2_value.firstChild.data = out_F2; sine_ball.setAttribute('y', 396 out_F1*56); times_ball.setAttribute('y', 396 out_F2*56); diff1 = pre_out1 out_F1; diff2 = pre_out2 out_F2; sine_draw = sine_draw + "l 0.5 + diff1*55 + "; sine_path.setAttribute('d', sine_draw); times_draw = times_draw + "l 0.5 + diff2*55 + "; times2_path.setAttribute('d', times_draw); pre_out1 = out_F1; pre_out2 = out_F2; } Figure 6-8. Example of the modified user_code() method in the merged SVG In the example code in Figure 6-6, the simulation result of the first block, out_F1, is used to change the value of the text element board_sine_value, change the position of the rectangle element sine_ball, and draw an extended path from the path element sine_path. Likewise, the result of the second block, out_F2, is used to change the value of the text element board_times2_value, change the position of the rectangle element path_ball, and draw an extended path from the path element times2_path. Figure 6-9 is a snapshot of running the merged SVG after adding the simulation codes in Figure 6-8. The final output of rube2D is SVG that has the same geometry as the original SVG and dynamic behavior as defined in the model topology file, MXL. The simulation code

PAGE 61

51 generated based on the model topology defined in MXL is used to simulate the elements in the merged SVG. Figure 6-9 shows the result of using the simulation code to draw graphs and text values. Figure 6-9. Snapshot of the final SVG

PAGE 62

CHAPTER 7 CONCLUSION My research goal is to provide a powerful and effective Web-based modeling and simulation environment, rube2D, for diagrammatic dynamic models. rube2D enables modelers to define model semantic and a model presentation, and acquire an automated simulation model from them. By separating the model topology from the presentation, rube2D provides a totally personalized dynamic model representation and extends the power of modeling and simulation with an aesthetic computing approach and integration of model presentation with a dynamic model. The model design in rube2D is separated in two parts: topology design in Multimodel eXchange Language (MXL) and presentation design in SVG. By representing a model presentation in SVG, rube2D inherits all the advantages of XML technologies. The model presentation written in SVG can be easily accessed and modified or transformed. The model topology stored in MXL captures the dynamic behavior of the model over time. To facilitate modelers creating MXL, an automated MXL creation tool with GUI is provided in rube2D. This GUI lets modelers extract model topology from the presentation and construct MXL from it. Simulation in rube2D involves several steps: generating simulation code from MXL and merge SVG with the simulation code. To obtain the JavaScript simulation code, model topology in MXL must be translated into a different and executable form. Before translated into the simulation code, MXL is first translated into Dynamics eXchange Language (DXL). DXL is an intermediate presentation of model topology. 52

PAGE 63

53 With simplified model topology in DXL, translation into the simulation code is much easier. The Model Fusion Engine written in XSLT stylesheet merges the simulation code with SVG scene file to produce a dynamic SVG. Finally users can simulate the dynamic SVG by changing the attribute values of SVG elements using the JavaScript simulation code. rube2D provides extensive modeling and simulation environment for modelers to achieve personalized and customized modeling and aesthetic computing modeling in 2D diagrammatic dynamic models. It also provides a convenient and modularized simulation while enables modelers the Web-based modeling and simulation with a new emerging XML technology. rube2D supports only for Functional Block Model (FBM) and Finite State Machine (FSM) currently. The other model types will be supported by rube and rube2D as the research progresses.

PAGE 64

APPENDIX A SCHEMA FOR MXL AND DXL Multimodel eXchange Language(MXL) schema for rube architecture. Copyright 2001 University of Florida. All rights reserved. p Figure A-1. MXL schema 54

PAGE 65

55 Comment describing your root element Figure A-2. DXL schema

PAGE 66

APPENDIX B MODELING AND SIMULATION EXAMPLE Simple Model: Functional Block Model X X x 5 6 4 2 K 1 3 X 0.8 K 2 0 Figure B-1. Block diagram for x + 0.8x + x = 2 Figure B-2. SVG scene for the FBM in Figure B-1 56

PAGE 67

57