WIND presentation

WIND: an Interaction Lightweight Programming Model

for Geographical Web Applications

The Nhan [email protected]

Thierry NodenotPatrick Etcheverry

Christophe Marquesuzaà

IUT de Bayonne Pays Basque

DESI team - LIUPPA

International Opensource Geospatial Research Symposium(Nantes, July 8, 2009)

Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 1 / 25

Outline

1 Introduction

2 WIND Core Concept

3 WIND Implementation

4 Future works


Introduction

Outline

1 Introduction

2 WIND Core Concept


4 Future works


Introduction

Introduction

Our goal

To conceive a Web environment allowing teachers to produce by them--selves educational applications exploiting the spatio-temporal semanticsembedded into texts.

The conception activity is driven by interaction considerations.

The environment consists of a Web 2.0 designing interface and aspeci�c API dedicated to interaction model.

The source code should be open source so that it can be bene�ted inthe educational community.


Introduction

Starting point

3 features of geographic information embedded into travel stories:

1 Spatial feature

2 Temporal feature

3 Phenomenon feature

[Gaio, 2007]

Web Mapping Services: Google Maps, OpenLayers, IGN Geoportail.

Mashup environments enable to quickly create web-based applications.


Introduction

Concerned application example

http://erozate.iutbayonne.univ-pau.fr/forbes2007/exp/


http://erozate.iutbayonne.univ-pau.fr/forbes2007/exp/

Introduction

Concerned application example

Starting point for educational activities.

This application embeds text, map and calendar �components�.

Management of interactions between these �components�.

Coded from scratch by developer (JF Boullier - Ph.D. student, 2007).

Speci�c to this kind of application (not reusable).

=⇒ Generic model to design this kind of application: WIND (WebINteraction Design).


WIND Core Concept

Outline

1 Introduction

2 WIND Core Concept


4 Future works


WIND Core Concept

UML model


WIND Core Concept

Model explanation

An interaction may be simply de�ned as a triple <area, event,

reactions>.i.e. an area (SensiblePart), under a speci�c user action (event),will launch system reactions (Reaction).


WIND Core Concept

Model explanation

An area (SensiblePart) can be a text area (TextPart) or a maparea (MapPart) or a calendar area (CalendarPart).

Text area (TextPart): word or a set of words.Map area (MapPart): geometry (point, line, polygon)Calendar area (CalendarPart): date


WIND Core Concept

Model explanation

User action (event): attribute as String type.For example:

left-click: (event = 'click')double-click: (event = 'dbclick')mouse-over: (event = 'mouseover')


WIND Core Concept

Model explanation

A reaction (Reaction) results in a visual e�ect on one area(SensiblePart), which may be de�ned with di�erent styles.For example:

boldfacing a text area: (calledFunction = 'bold')focusing a map area on the map: (calledFunction = 'focus')highlighting a date on the calendar: (calledFunction =

'highlight')


WIND Core Concept

Main features of WIND

WIND is object-oriented. WIND objects are simply created by theirclass constructor. Methods are disposed to implement relationshipsbetween objects. WIND model allows programming interactions forwhatever reactive areas thanks to polymorphism of the SensiblePartclass.

WIND is integrative. It combines textual, map and calendar�components�. The users may include within a web application asmany instances of each type of �components�.

WIND is executable thanks to its corresponding JavaScriptWIND-API. The users can simply design an interaction andimmediately execute it.

WIND is declarative. The code of a WIND-based application has avery simple structure. The users only have to declare sensible parts,events and reactions.


Implementation

Outline

1 Introduction

2 WIND Core Concept


4 Future works


Implementation

http://erozate.iutbayonne.univ-pau.fr/wind/simpledemo.html


http://erozate.iutbayonne.univ-pau.fr/wind/simpledemo.html

Implementation

Four programming steps for WIND-based application

1 Creating the application �components� with their characteristics.

2 Creating the sensible parts of each �component� de�ned in theprevious step.

3 De�ning the possible reactions for all the sensible parts.

4 De�ning the interactions upon previously de�ned sensible parts andreactions.


Implementation

JavaScript code example

Include WIND JavaScript API:

<script type="text/javascript"

src="http://erozate.iutbayonne.univ-pau.fr/wind/wind-api.js"/>

HTML code:

<div id="mytext"/> <div id="mymap"/>

1 Creating the application �components� with their characteristics.

var t = new WIND.Text('mytext');

t.setContent("March 20th 2009: we are in Anglet today.

Anglet is located in the southwest of France.");

var m = new WIND.Map('mymap', {'type': "Google_Street",

'longitude': -1.51, 'latitude': 43.49, 'zoom': 11});

2 Creating the sensible parts of each �component� de�ned previously.

var tp = t.createSensiblePart("Anglet");

var mp = m.createSensiblePart("POLYGON((-1.52 43.53,

-1.58 43.46,-1.44 43.48,-1.52 43.53))");Luong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 18 / 25

Implementation

JavaScript code example

CSS code:

<style>

.ville {

font-weight : bold; font-style : italic; font-size : 15pt;

color : blue; background-color: pink;}

</style>

3 De�ning the possible reactions for all the sensible parts.

var r1 = new WIND.Reaction(mp, 'highlight');

var r2 = new WIND.Reaction(tp, 'setStyleByClass:ville');4 De�ning the interactions upon previously de�ned sensible parts and

reactions.

var i1 = new WIND.Interaction(mp, 'click', null);

i1.addReaction(r1);

i1.addReaction(r2);

i1.activate();


Implementation

Demo

http://erozate.iutbayonne.univ-pau.fr/wind/index.htmlLuong et al. (DESI team - LIUPPA) Interaction Model for Geographical Web July 8, 2009 20 / 25

http://erozate.iutbayonne.univ-pau.fr/wind/index.html

Future works

Outline

1 Introduction

2 WIND Core Concept


4 Future works


Future works

Improvement of the sensible part concept

Extension of the sensible part concept (especially TextPart andMapPart) in order to allow programmers de�ning sensible parts withhigher level semantics.For example: var tp = t.createSensiblePart('city'); createsautomatically TextPart(s) having city semantics.This work relies on space indexing processes elaborated by DESI team(cf. PIIR, Loustau, 2008 and Geostream, Sallaberry, 2009).


Future works

Improvement of the user action concept

Improvement of the user action concept.For example: the system may react after a sequence of several speci�cuser actions (cf. Fig. c).

(a) (b) (c)


Future works

Creation of authoring environment

Creation of a dedicated authoring environment allowing end-users(teachers) to design by themselves WIND-based interactionapplications without coding.


Thank you for your attention!

Questions?

The Nhan LUONG

[email protected]


WIND presentation

Technology

Transcript of WIND presentation