svg for process visualization
DESCRIPTION
SVG for Process Visualization. Johan Koolwaaij Peter Fennema Diederik van Leeuwen Telematica Instituut The Netherlands. Tel ematica Instituut bridges the gap. Knowledge tran sfer. Initiate applied research. Market oriented project s. Fundament al method s and techniques. Generi c - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: SVG for Process Visualization](https://reader035.vdocument.in/reader035/viewer/2022062310/56816850550346895dde5035/html5/thumbnails/1.jpg)
1
SVG for Process Visualization
Johan KoolwaaijPeter Fennema
Diederik van Leeuwen
Telematica Instituut The Netherlands
![Page 2: SVG for Process Visualization](https://reader035.vdocument.in/reader035/viewer/2022062310/56816850550346895dde5035/html5/thumbnails/2.jpg)
2
Fundamentalmethods andtechniques
Generictelematics
applications
Market orientedprojects
Science Businessparties
Knowledge transfer
Initiate applied research
Telematica Instituut bridges the gap
![Page 3: SVG for Process Visualization](https://reader035.vdocument.in/reader035/viewer/2022062310/56816850550346895dde5035/html5/thumbnails/3.jpg)
3
Application areas
Collaborate Electronicbusiness
Content engineering
For fixed and mobile users
![Page 4: SVG for Process Visualization](https://reader035.vdocument.in/reader035/viewer/2022062310/56816850550346895dde5035/html5/thumbnails/4.jpg)
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)
![Page 5: SVG for Process Visualization](https://reader035.vdocument.in/reader035/viewer/2022062310/56816850550346895dde5035/html5/thumbnails/5.jpg)
5
Demonstrator visualization: rationale
3G mobile network
WASPapplicationplatform
WASPapplications
3rd parties+
services3G
platform
Enduser
Userinterface
![Page 6: SVG for Process Visualization](https://reader035.vdocument.in/reader035/viewer/2022062310/56816850550346895dde5035/html5/thumbnails/6.jpg)
6
Demonstrator visualization: example I
![Page 7: SVG for Process Visualization](https://reader035.vdocument.in/reader035/viewer/2022062310/56816850550346895dde5035/html5/thumbnails/7.jpg)
7
Demonstrator visualization: example II
![Page 8: SVG for Process Visualization](https://reader035.vdocument.in/reader035/viewer/2022062310/56816850550346895dde5035/html5/thumbnails/8.jpg)
8
Architecture
![Page 9: SVG for Process Visualization](https://reader035.vdocument.in/reader035/viewer/2022062310/56816850550346895dde5035/html5/thumbnails/9.jpg)
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
![Page 10: SVG for Process Visualization](https://reader035.vdocument.in/reader035/viewer/2022062310/56816850550346895dde5035/html5/thumbnails/10.jpg)
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
![Page 11: SVG for Process Visualization](https://reader035.vdocument.in/reader035/viewer/2022062310/56816850550346895dde5035/html5/thumbnails/11.jpg)
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
![Page 13: SVG for Process Visualization](https://reader035.vdocument.in/reader035/viewer/2022062310/56816850550346895dde5035/html5/thumbnails/13.jpg)
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)
![Page 14: SVG for Process Visualization](https://reader035.vdocument.in/reader035/viewer/2022062310/56816850550346895dde5035/html5/thumbnails/14.jpg)
14
Demonstrations
B2B2ME:web servicecomposition
Impact: Electronicmarket places
Uluru: mobileaudio-visual services
WASP:contextawaremobileservices
![Page 15: SVG for Process Visualization](https://reader035.vdocument.in/reader035/viewer/2022062310/56816850550346895dde5035/html5/thumbnails/15.jpg)
15
Thank you for your attention!Questions?
More information• Via e-mail: [email protected]• Via internet: http://portal.demo.telin.nl/mis/
Availablesoon!
Check it out!