Forschungszentrum Karlsruhe in der Helmholtz-Gemeinschaft Using SVG-based Maps for Mobile Guide Systems A Case Study for the Design, Adaptation, and Usage

Forschungszentrum Karlsruhein der Helmholtz-Gemeinschaft

Using SVG-based Maps for Mobile Guide Systems

A Case Study for the Design, Adaptation, and Usage of SVG-based Maps for Mobile Nature Guide

Applications

By: V. Patalaviciute, Dr. C. Düpmeier, Prof. P. Freckmann, M. Ruchter

Patalaviciute/Düpmeier/Freckmann/Ruchter – SVGOpen 2005

- 2 -


Outline

• Motivation

• MobiNaG Architecture and Functionality

• Concepts for Mobile Nature Guide Maps

• Applicability of SVG in the MobiNaG


- 3 -


Mobile Nature Guide

Visitors of Natural Areas

Direct Experience

User Interaction

Environmental Information

Mobile Guide

MobiNaG

Natural Environment


- 4 -


Technical Environment

• PDA

• GPS for navigation

• GPRS / UMTS for internet access

• Data upload on PDA with ActiveSync

• Central server for

– Description of nature

experience areas

– Additional information

System Architecture


- 6 -


MobiNaG Prototype for

Evaluation

Navigation service

Tour service


- 7 -


Symbols for Different Target Groups


- 8 -


function activateLayer(evt,Layer) { ...if ( // Layer X is set visible in dialog ) { X.setAttribute("visibility",„visible");else { X.setAttribute("visibility",„hidden");}...

(1)

(2)

Interactive Legend


- 9 -


Function ZoomUp () {...if (curZoomStep==3) { document.getElementById('Landmark').setAttribute('visibility', 'visible');else {document.getElementById('Landmark').setAttribute('visibility', ‚hidden'); }}...

Landmark-based Navigation

<svg id="Landmark" visibility="hidden“ >…</svg>


- 10 -


Spring

Autumn

Dynamics of the Natural Environment

autumn.css.forest { fill:yellow; stroke:yellow; stroke-width:2; }

<?xml-stylesheet href= „autumn.css" type="text/css"?><svg><g id=„forst" class= „forest" > <path d="M0.376,246.646c17.234-18.837.... />...</svg>

spring.css.forest { fill:lightgreen; stroke:lightgreen; stroke-width:2; }


- 11 -


Spring

Autumn

POI.xml<POI id="POI_10" categoryRef=„season:autumn; type:sense:observe"><Position> <Longitude> … </Longitude> <Latitude>… </Latitude></Position> </POI>

Interpretive Maps

Iconlibrary.svg<symbol id=„observe">… </symbol>

Application<svg><use xlink:href= “Iconlibrary.svg#observe categoryRef=„season:autumn; type:sense:observe"></svg>


- 12 -


Problems with the Applicability of SVG

• Limited functionality of SVG engines on mobile devices

– SVG implementations do not support multi-line text objects

– Use is not fully implemented in used eSVG engine

<use xlink:href=„symbols.svg#telefon“>

• SVG file cannot be split into modular components (for example

symbol / icon library)

• No standard SVG-based user interface elements, like popups, dialog components, etc.

• Used SVG component does not support object- oriented integration with embedding application

– Calling C++ or .NET components of application from javascript


- 13 -


Future Work

• MobiNaG Redesign for First Production Version

– Looking for better SVG engine / better SVG support

– Presentation of multimedia information by HTML / SMIL

component?

• Further Developments

– GUI-based editor for nature experience area descriptions based

on the Java Batik SVG toolkit

– Diploma thesis on the Integration of a Pedagogical Agent

• Uses SVG-based character animations

Documents

Forschungszentrum Karlsruhe in der Helmholtz-Gemeinschaft Using SVG-based Maps for Mobile Guide Systems A Case Study for the Design, Adaptation, and Usage