Overview of the FreeStyler Modeling Environment

7/31/2019 Overview of the FreeStyler Modeling Environment

1/8

Overview of the FreeStyler Modeling Environment

Adam Giemza, Sabrina Ziebarth

Collide, University of Duisburg-Essen

Version 1.3, 18-Jan-2008

Introduction

FreeStyler is a cooperative and interactive modeling tool which combines different graphical

languages being used to structure the content with hand written input. Predefined shapes

are provided representing different input types. They help to distinguish various elements in

the elaboration and analysis of an issue. The plug-in concept allows for flexibly exchanging

and extending the palettes.

ARGUNAUT An Intelligent Guide to Support Productive Online Dialog

Figure 1: The FreeStyler


2/8

Pages are used to structure a FreeStyler document. This is particular helpful when using

FreeStyler for interactive presentation (e.g. in lectures). The pages are either accessed via

tabs on top of the workspace or by using the arrows to browse through them. When a new

page is opened it gets a successive number, but it can also be named by the user. These

names can also be used as an anchor for hyperlinks in the document offering a third way ofnavigation. Each page consists of layers in order to stratify different levels of input. There

are layers for hand-written input and for graphical elements. The layer sequence can be

changed. Together with the possibility to hide layers, also different levels of detail and

different perspectives can be represented.

FreeStyler can be used as a single user application as well as in collaborative scenarios with

multiple users in synchronous work. Both aspects have been approved successfully in many

national and EU-funded research projects (VIP-NET, Kaleidoscope, Coldex, SEED, SkyWatch,

LMMP) as well as in everyday teaching at schools and universities.

FreeStylers continuous development has started around the year 2000. It has been slightly

modified and extended to serve as one of the end user environments in the Argunaut

context.

Overview of the user interface

Figure 2: FreeStyler Overview

Page Tabs

Palettes

Handwriting Page Scrolling Layer Control

Workspace


3/8

Figure 2shows a brief survey of the FreeStyler application. FreeStyler is mainly separated in

three areas: The workspace with pages and page tabs in the center, the palettes panel on

the right and the control panel at the bottom.

Workspace

The workspace contains pages, which can be easily accessed by the page tabs or the

browsing arrows in the control panel at the bottom. The pages consist of different layers for

graphical elements and for hand writing. The layers can be organized dynamically and are

shown on demand by the layer control.

The hand writing layer contains the hand written input in the form of strokes. Strokes can

have different colors and strengths. They can be moved and deleted. The hand writing

functionality enables the user to annotate her/his models in an intuitive way and also allows

using FreeStyler as a digital white board application.

Graph layers contain the elements of the visual languages. Users make use of them by

dragging elements from the palette, and dropping them at the desired location on the page.

They can also connect them through links. Depending on the visual language these links infer

changes of the model. Such visual models offer simulations opportunities to the user.

Furthermore elements of different visual languages can be mixed with each other (see

FreeStyler figure above).

Palettes

As mentioned above, the FreeStyler supports different visual languages organized in plug-

ins. In FreeStyler these plug-ins are called palettes. A palette contains all graphical elements

of a visual language. These elements are shown in the palette panel on the right side. It is

Figure 3: Palette Loading Dialog


4/8

possible to open several palettes at the same time.

They are organized in tabs in the palette panel. Addition palettes can be loaded on demand.

Figure 3 shows the palette loading dialog. Currently there are around 60 palettes for

FreeStyler, which support a vast amount of scenarios.

Petri nets, UML and QOC (Questions-Options-Criteria) are just some well known visual

representations for which palettes already exist. The strength of FreeStyler is that it does not

only visualize the models, but it can also run simulations e.g. with the Petri nets palette. As

you can see inFigure 2some of the blue Petri net nodes have buttons with the label Fire.

These nodes are called transitions. Transitions are connected to the round nodes called

places. So if transitions fires, a token, the small white circle, will be added to the place and so

on. This procedure can be simulated in FreeStyler by clicking the buttons and thus running

the simulation.

Collaboration Features

In collaborative settings FreeStyler uses a collaboration server called MatchMaker. The

MatchMaker server can hold several sessions at a time and synchronizes the content of the

session among all users. Users can create new or join existing sessions with the FreeStyler

connection dialogs.

Figure 6: Joining a session on a MatchMaker server

Figure 5: Creating a session on a MatchMaker server


5/8

FreeStyler within the Argunaut System

Besides Petri nets, UML diagrams, System Dynamics,

Stochastics and other visual languages, FreeStyler supports

graphical discussions in almost the same manner as Digalo.

A special FreeStyler palette was developed to provide the

Digalo discussion language (seeFigure 6).

A discussion is formed by contributions and links in

between. Contributions are represented by graph nodes and

links by graph edges. Participants of the discussion may add,

edit, arrange, connect and delete theses discussion

elements.

The contributions have a title providing a short summary ofthe contribution, a text note for a longer description or

other content and the creator of the node (see discussion

figure below). The title of the contribution is always visible

whereas the long description is only visible when the node

has been expanded via the arrow. The content of the

contribution can be edited in a contribution dialog

appearing on double-click (seeFigure 7).

Furthermore the contributions visual representation can bemodified. This includes the background and border colors,

the font type and the font size. The user can also change the

type of the contribution, if he recognizes that he has not

used the appropriate contribution type. This is done by a

pop-menu which can be accessed by a right-click on the

contribution node.

Figure 7: Argunaut Discussion

Palette

Figure 8: Contribution Dialog


6/8

A moderated FreeStyler session

In the Argunaut project, FreeStyler is embedded into the Paseo framework (see at the top of

Figure 8). It runs as an internal application. To achieve the goals of Argunaut, FreeStyler was

extended to support the visualization of moderators interventions, such as annotations,

highlighting, remote pointer, pop-up and text messages.Figure 8shows almost all of these

interventions and how they are presented to the end user.

Annotations are shown as yellow shapes that are connected to the elements

currently being annotated.

Highlighted elements change their border to a thicker red border and back to their

original state.

Pop-up messages are shown in a pop-up dialog.

A text box in the lower right corner shows text messages from the moderator.

The remote pointer is visualized as a second pointer inside FreeStyler (not shown in

this figure).

Highlighting

Pop-Up

Messag

Text

Message

Annotation

Figure 9: Moderators interventions in FreeStyler


7/8

Other FreeStyler Features

FreeStyler has a very rich feature set which description

goes far beyond this document. Nevertheless some

features should be mentioned to show the potential

and flexibility of FreeStyler.

FreeStyler provides several export filters (seeFigure 9).

It supports a PDF export as well as several image file

formats likejpg, png and gif. It is also possible to send

the document directly as an email or directly upload

the document to the learning management system

Moodle.

Another feature that is worth to mention is the

possibility connecting FreeStyler to a learning object

repository called CoLOR to store and to retrieve

FreeStyler documents. For this purpose the documents contain semi-automatically created

metadata. The repository can be queried from within FreeStyler taking the metadata into

account. The dialog for this purpose is shown inFigure 10. Thus it is possible to query for

concepts in the description rather than for elements in the documents content. The

repository is also capable of querying for similar document providing the user with the

opportunity to discover other persons solutions to similar problems.

Figure 10: Export in FreeStyler

Figure 11: Query dialog for CoLOR learning object repository


8/8

References

[LMMP] http://www.lmmp-bw.de

[Kaleidoscope] http://www.noe-kaleidoscope.org

[VIP-NET] http://www.vip-net.info

[SkyWatch] http://www.sky-watch.org

[Coldex] http://www.coldex.info

[Seed] http://www.seed.slb.com

[Moodle] http://www.moodle.org
http://www.lmmp-bw.de/http://www.lmmp-bw.de/http://www.noe-kaleidoscope.org/http://www.noe-kaleidoscope.org/http://www.vip-net.info/http://www.vip-net.info/http://www.sky-watch.org/http://www.sky-watch.org/http://www.coldex.info/http://www.coldex.info/http://www.seed.slb.com/http://www.seed.slb.com/http://www.moodle.org/http://www.moodle.org/http://www.moodle.org/http://www.seed.slb.com/http://www.coldex.info/http://www.sky-watch.org/http://www.vip-net.info/http://www.noe-kaleidoscope.org/http://www.lmmp-bw.de/

Documents

Overview of the FreeStyler Modeling Environment