svg for process visualization

1

SVG for Process Visualization

Johan KoolwaaijPeter Fennema

Diederik van Leeuwen

Telematica Instituut The Netherlands

2

Fundamentalmethods andtechniques

Generictelematics

applications

Market orientedprojects

Science Businessparties

Knowledge transfer

Initiate applied research

Telematica Instituut bridges the gap

3

Application areas

Collaborate Electronicbusiness

Content engineering

For fixed and mobile users

4

Challenge

• Visualize the process that is executed under the hood of an application

• For demonstration or instruction purposes(Not for management, debugging or tuning purposes)

• In a web-based environment• For distributed applications• In real time• Lightweight• Adaptable by (to) the (wishes of) viewer(s)

5

Demonstrator visualization: rationale

3G mobile network

WASPapplicationplatform

WASPapplications

3rd parties+

services3G

platform

Enduser

Userinterface

6

Demonstrator visualization: example I

7

Demonstrator visualization: example II

8

Architecture

9

Features

• Topic subscription• Web service API for event publication• Pushing of XML events from router to subscriber • Client-side JavaScript XML event parsing • Mapping of XML events to graphical updates, • Event queuing facilities

• to delay the event flow• to show parallel events

• Sync between different views

10

Visualization

• SVG front-end• Graphical expressiveness• Highly dynamic nature • Programmable through JavaScript• Automatic generation• Lightweight solution

• Different views• Level of detail• Process, actor or function view• Aspects• Fancy or plain

11

Process models

• Generate SVG from formal process models, e.g.• ebXML BPSS• UML / XMI• RSD Studio

• Using XSLT style sheets• Hooks for programmatic updates

and/or simulation• RSD supports extensible import and

export facilities.• Import for older RSD versions• Export to SVG, BPSS, et cetera

Need forservice

Logprogress

Selectoptimal results

Specify need

Buyer

Register need

User directory

Service directory

Service profile

Resolve needinto subservices

Processsupplier details

Aggregateresults

Service broker

Search and retrieverelevant services

Registry

Registerservice Service

registry

Processservice request

New service

Inventory catalog

Supplier

Processservice request

New service

Logistics schedule

Logisticsservice

Processservice request

New service

Information store

Informationservice

Findservices

Provide servicedescription

Requestservice

Provideresults

Provideresults

Requestservice

Provideresults

Requestservice

Reporterror

Reportstatus

Reportresults

12

Conceptual demo

13

Bottlenecks

• SVG design tools that allow structured SVG and roundtrip editing

• SVG controls (slider, switch, etc.)• Version 1.0 shortcomings, e.g. text

wrapping, z-layer, …• Time consuming SVG DOM

programming• Difficult to avoid scripting in the XSLT

that generates SVG• A comprehensive and understandable

process model/view• Client-side dependence (scripting,

fonts, SVG support in mobile devices)

14

Demonstrations

B2B2ME:web servicecomposition

Impact: Electronicmarket places

Uluru: mobileaudio-visual services

WASP:contextawaremobileservices

15

Thank you for your attention!Questions?

More information• Via e-mail: Johan.Koolwaaij@telin.nl• Via internet: http://portal.demo.telin.nl/mis/

Availablesoon!

Check it out!