WINDMash
WINDMash
WINDMash is a visual environment allowing a user to design interactive Web applications. They exploit geographic contents. The creation of applications is done visually (an environment of Mashup) and is based on three phases: the Contents manipulated, the GUI displaying these contents and the application behavior (Interaction).
WINDMash uses Semantic Web technologies and principles of MDE (Model Driven Engineering). The designer can immediately test/see the result of his/her design with powerful tools for code generation. WINDMash based on a part of the WIND API.
http://erozate.iutbayonne.univ-pau.fr/Nhan/windmash5/WIND
WIND API
WIND (Web Interaction Design) is a JavaScript library for uniformly manipulating visual components such as textual, cartographic and temporal. WIND allows to hide the usage complexity of cartographic providers (OpenLayers, Google Maps, IGN).
Based on 10 000 lines of code with a size of 300KB, the API produces a short and object-oriented code.
http://erozate.iutbayonne.univ-pau.fr/Nhan/windapi/Applications coded by exploiting the API WIND
Any developer can use the WIND API to code interactive applications with geographical connotation.
Photo - Map - Timeline
This application is intended to present the career of football mangager Jose Mourinho. It contains three displays:
- a timeline located on the upper part containing the active periods in the career of Jose Mourinho
- an interactive map (left area) highlighting the locations of stadium
- a photographic component (right area) showing photos of clubs.
The two components (Map, Photo) are synchronized with the Timeline. When a user clicks on an event mentioned in the Timeline, the map automatically zooms in on the corresponding stadium and the photography component places the photo associated to this event in the center of its area.
http://erozate.iutbayonne.univ-pau.fr/Nhan/timemap/
Example operating TempoStream
With this application, the user can enter text in a form and the system automatically generates a simple application for viewing and synchronizing text (upper zone) and timeline (lower zone):
- When the user clicks on temporal information in the text (a word or a string of words), the timeline focuses on the corresponding event (an instance or an interval).
- When the user clicks on an event (an instance or an interval) of the Timeline, the corresponding words in the text are highlighted.
This application uses the Web service "TempoStream" (developed by the T2i team) automatically extracting temporal entities (dates or periods) quoted in a French text.
http://erozate.iutbayonne.univ-pau.fr/Nhan/tempo/
Example operating GeoStream
With this application, the user can enter text in a form and the system automatically generates a simple application for viewing and synchronizing text (upper zone) and the map (lower zone):
- When the user clicks on a spatial information in the text (a word or a string of words), the map will zoom in on this location (point or polygon).
- When the user clicks on a location (point or polygon) on the map, the corresponding words in the text are highlighted.
This application uses the Web service "GeoStream" (developed by the team T2i) automatically extracting spatial features mentioned in a text whose names are written in French and begin with a capital character.
http://erozate.iutbayonne.univ-pau.fr/Nhan/gs/
Annotate and drag
This application shows that you can encode more dynamic applications with the API WIND. The user can enter text with spatial information (place names) and temporal (dates) and the system will generate an application with the following behavior:
- When the user annotates a place name (upper-left area) with the BLUE button (click on the button and select the words), the map (right area) shows the coordinates of the location and the name of the place is highlighted in blue in the text.
- When the user annotates the words with the RED button (click on the button and select the words), these words are highlighted in red in the text. They then become clickable. When clicking on those words, they become draggable. The user can then drag these words and drop into the Timeline (lower-left area) to create an event corresponding to the position of the deposit.
Cerco
This application is designed to visualize sequences of locations on the map. The user can enter subjects (combination of places) and the system will automatically generate their visualization on the map. A subject contains several place names in the following form: Sujet6003: Versailles - Angoulême - St. Astier / Bordeaux - Périgueux / Perpignan - Soustons //. The "/" character is to divide parts of a subject and "//" terminates a subject. The first part (before the ":" character) is the name of the topic where it is possible to associate a color.
The display style is presented in the form of a itinerary line or a bounding polygon. There are two display modes: total or progressive (15s, 30s, 60s, corresponding to different parts separated by the "/" character).
http://erozate.iutbayonne.univ-pau.fr/Nhan/cerco/Applications generated by WINDMash
WINDMash based on a part of the WIND API and allows a user (not computer scientist) to visually design (and immediately test) an interactive application.
Application DocEng2011
Suppose a French course for foreigners where a teacher wants to explain the following concepts : Town, "Département" (a sort of province inside the country) and "Préfecture" (an administrative town inside a "Département"). More precisely, the teacher wants students to study a text written in French which contains several places names, e.g., Cannes (Town), Lyon ("Préfecture") and Savoie ("Département").
For pedagogical purposes, the teacher would like a Webbased geographic application. Indeed, it contains the text in French (upper-left area), a map containing spatial annotations (right area) and three lists of towns, "Préfectures" and "Départements" (lower-left area). These lists should be automatically computed from the text. Furthermore, students are allowed to select a specific place in the lists. When clicking on a place, the corresponding term in the text is highlighted and the map is focused on this place.
http://erozate.iutbayonne.univ-pau.fr/Nhan/windmash/demo/Frenchcourse/app.html
Application IUI2012
Starting from a text and a map presenting some towns located on the French Atlantic and Mediterranean coasts, the main goal of the application to design is to learn the concept of "département". The behaviour of the application is as follows: When the user clicks on a town written on the text (located on the left part of the screen) or displayed on the map zone (located on the right part of the screen), then the name of the corresponding "département" is automatically displayed (in a dedicated zone in the top centre of the screen) and the border of the "département" are highlighted (in a dedicated zone in the bottom centre of the screen). The name of the clicked town in the main text and the border of this town in the main map will also be highlighted.
http://erozate.iutbayonne.univ-pau.fr/Nhan/windmash/demo/iui2012/app.htmlList of projects using the API WIND
Other applications have been developed as student projects and also exploit the WIND API.
-
PIND (2009 - 2010): Designing an interactive photo gallery. This application allows a user to synchronize textual, cartographic, calendar and photographic components.
http://erozate.iutbayonne.univ-pau.fr/Nhan/pind/demo/DemoWIND_PIND.html
- GeoText2Map (2010 - 2011): This application allows to geolocate places mentioned in text. From a textual source, this application allows you to display the extracted locations and possibly modify them.
- Frise chnologique (2010 - 2011): Design and deployment of Web applications based on timelines.
- Saisie cartographique (2011 - 2012): Input Mapping Web Tool
Editor
InMap
This application was developed in 2009 in the beginning of thesis work. It allows a user to draw on a map, to add markers, to draw routes and to change the map layer without loss of entered data.
http://erozate.iutbayonne.univ-pau.fr/Nhan/InMap/In Java
JFresnel (INRIA)
Fresnel is a presentation vocabulary for Semantic Web data designed to be application and representation paradigm independent. JFresnel is a Java library that implements the Fresnel specification for various RDF APIs, such as Jena and Sesame.
http://jfresnel.gforge.inria.fr/
Portlets' Implementation (WebContent project)
Visualization portlets used in the Airbus application : event timeline, event statistics by year,..
WINDMash
WINDMash
WINDMash est un environnement visuel permettant à un utilisateur de concevoir des applications Web interactives. Les applications que nous visons exploitent du contenu à caractère géographique. La création des applications se fait de façon visuelle (environnement de type Mashup) et repose sur 3 phases : le Contenu manipulé, l'Interface graphique présentant ce contenu et le comportement de l'application (Interaction).
WINDMash utilise les technologies du Web sémantique et les principes de l'IDM (Ingénierie Dirigée par les Modèles). Le concepteur peut immédiatement tester / visualiser le résultat de sa conception grâce à des outils puissants de génération de code. WINDMash repose sur une partie de l'API WIND.
http://erozate.iutbayonne.univ-pau.fr/Nhan/windmash5/WIND
WIND API
WIND (Web INteraction Design) est une bibliothèque JavaScript permettant de manipuler de manière uniforme (indépendante du composant utilisé) des composants visuels textuels, cartographiques et temporels. WIND permet de s'abstraire des fourniseurs cartographiques (OpenLayers, Google Maps, IGN).
Reposant sur 10 000 lignes de code pour une taille de 300Ko, l'API permet de produire un code à la fois court, orienté objet.
http://erozate.iutbayonne.univ-pau.fr/Nhan/windapi/Applications codées à la main en exploitant l'API WIND
Tout informaticien peut utiliser l'API WIND pour coder à la main des applications fortement interactives utilisant du code à forte connotation géographique.
Photo - Map - Timeline
Cette application a pour but de présenter la carrière de l'entraîneur José Mourinho. Elle se compose de trois afficheurs :
- une frise chronologique située sur la partie haute contenant les périodes d'activité dans la carrière de José Mourinho ;
- une carte interactive (zone gauche) mettant en évidence les lieux des stades ;
- un afficheur photographique (zone droite) montrant les photos des clubs.
Les deux composants du bas (Carte, Photographie) sont synchronisés avec la frise. Quand l'utilisateur clique sur un événement mentionné sur la frise, la carte est automatiquement centrée sur le stade correspondant et le composant photographie place la photo associée à cet événement au centre de sa zone.
http://erozate.iutbayonne.univ-pau.fr/Nhan/timemap/Exemple d'exploitation de TempoStream
Avec cette application, l'utilisateur peut saisir un texte dans une zone de formulaire et le système génère automatiquement une application simple permettant de visualiser et synchroniser le texte (zone haute) et la frise chronologique (zone basse) :
- Quand l'utilisateur clique sur une information temporelle dans le texte (mot ou suite de mots), la frise chronologique se centre sur cet événement (une instance ou un intervalle).
- Quand l'utilisateur clique sur un événement (une instance ou un intervalle) sur la frise, le (les) mots correspondant dans le texte se met(tent) en évidence.
Cette application exploite le service Web "TempoStream" (développé par l'équipe T2i) extrayant automatiquement les entités temporelles (dates ou périodes) citées dans un texte en français.
http://erozate.iutbayonne.univ-pau.fr/Nhan/tempo/Exemple d'exploitation de GeoStream
Avec cette application, l'utilisateur peut saisir un texte dans une zone de formulaire et le système génère automatiquement une application simple permettant de visualiser et synchroniser le texte (zone haute) et la carte (zone basse) .
- Quand l'utilisateur clique sur une information spatiale dans le texte (mot ou suite de mots), la carte se centre sur ce lieu (point ou polygone).
- Quand l'utilisateur clique sur un lieu (point ou polygone) sur la carte, le (les) mots correspondant dans le texte se met(tent) en évidence.
Cette application exploite le service Web "GeoStream" (développé par l'équipe T2i) extrayant automatiquement les entités spatiales citées dans un texte dont les noms de lieux sont écrits en français et commencent par une majuscule.
http://erozate.iutbayonne.univ-pau.fr/Nhan/gs/Annoter et glisser
Cette application montre que l'on peut coder les applications plus dynamiques avec l'API WIND. L'utilisateur peut saisir un texte comportant des informations spatiales (nom de lieux) et temporelles (dates) et le système va générer une application avec le comportement suivant :
- Quand l'utilisateur annote un nom de lieu (zone haute-gauche) avec le bouton BLEU (cliquer sur le bouton et sélectionner les mots), la carte (zone droite) met en évidence les coordonnées de ce lieu et le nom du lieu est surligné en bleu dans le texte.
- Quand l'utilisateur annote des mots avec le bouton ROUGE (cliquer sur le bouton et sélectionner les mots), ces mots sont surlignés en rouge dans le texte. Ils deviennent alors cliquables. Lors du clic sur ces mots, ils deviennent déplaçables. L'utilisateur peut alors prendre ces mots et les glisser dans la frise (zone basse-gauche) pour créer un événement correspondant à la position du dépôt.
Cerco
Cette application a pour but de visualiser des enchaînements de lieux sur la carte. L'utilisateur peut saisir des sujets (enchaînements de lieux) et le système va générer automatiquement leur visualisation sur carte. Un sujet se compose de plusieurs noms de lieux sous la forme suivante : Sujet6003 : Versailles - Angoulême - Saint-Astier / Bordeaux - Périgueux / Perpignan - Soustons // . Le caractère "/" permet de diviser les parties d'un sujet et "//" termine un sujet. La première partie (avant le ":") correspond au nom du sujet pour lequel il est possible d'associer une couleur.
Le style d'affichage se présente sous la forme d'une ligne d'itinéraire ou d'un polygone englobant. Il y a aussi deux modes d'affichage : total ou progressif (15s, 30s, 60s, correspondant aux différentes parties séparées par le caractère "/").
http://erozate.iutbayonne.univ-pau.fr/Nhan/cerco/Applications générées par WINDMash
WINDMash repose sur une partie de l'API WIND et permet à un utilisateur (non informaticien) de concevoir visuellement (et tester immédiatement) une application interactive.
Application DocEng2011
Supposons un cours de français pour étrangers, où un professeur veut expliquer les concepts suivants : ville, département et préfecture. Plus précisément, l'enseignant veut que les élèves étudient un texte écrit en français qui contient plusieurs noms de lieux, par exemple, Cannes (ville), Lyon (préfecture) et Savoie (département).
Pour des objectifs pédagogiques, l'enseignant souhaite une application Web géographique qui contient le texte en français (zone haute-gauche), une carte contenant les annotations spatiales (zone droite) et trois listes de villes, préfectures et départements (zone basse-gauche). Ces listes sont calculées automatiquement à partir du texte. Par ailleurs, les étudiants sont autorisés à choisir un lieu spécifique dans les listes. En cliquant sur un lieu, le terme correspondant dans le texte est surligné et la carte effectue un zoom avant sur ce lieu.
http://erozate.iutbayonne.univ-pau.fr/Nhan/windmash/demo/Frenchcourse/app.htmlApplication IUI2012
A partir d'un texte et d'une carte présentant quelques villes françaises situées sur la côte atlantique et méditerranéenne, l'objectif principal de l'application est d'apprendre le concept de "département". Le comportement de l'application est le suivant : Lorsque l'utilisateur clique sur une ville citée sur le texte (situé sur la partie gauche de l'interface) ou affichée sur la carte (située sur la partie droite de l'interface), le nom du "département" correspondant est automatiquement affiché dans la zone au centre en haut de l'interface et les coordonnées du département (sous forme de leur géométrie) sont mis en évidence dans la zone au centre en bas de l'interface. Le nom de la ville selectionnée dans le texte principal et les coordonnées de cette ville dans la carte principale seront également mis en évidence.
http://erozate.iutbayonne.univ-pau.fr/Nhan/windmash/demo/iui2012/app.htmlListe des projets utilisant l'API WIND
D'autres applications ont été développées dans le cadre de projets étudiants et exploitent aussi l'API WIND.
-
PIND (2009 - 2010) : Conception d'une galerie de photos interactives. Cette application permet de synchroniser les composants textuel, cartographique, calendrier et photographique.
http://erozate.iutbayonne.univ-pau.fr/Nhan/pind/demo/DemoWIND_PIND.html
- GeoText2Map (2010 - 2011) : Cette application permettant la géolocalisation de lieux cités dans un texte. À partir d'un texte source, cette application vous permettra d'afficher la ou les localisation(s) des lieux repérés et éventuellement de les modifier.
- Frise chnologique (2010 - 2011) : Conception et déploiement d'applications Web basées sur des frises chronologiques.
- Saisie cartographique (2011 - 2012) : Outil Web de saisie cartographique
Editeur
InMap
Cette application a été développé en 2009 au début des travaux de thèse. Elle permet à l'utilisateur de dessiner sur une carte, d'ajouter des marqueurs, de tracer des itinéraires et de changer de fond cartographique sans perte des données saisies.
http://erozate.iutbayonne.univ-pau.fr/Nhan/InMap/En Java
JFresnel
Fresnel is a presentation vocabulary for Semantic Web data designed to be application and representation paradigm independent. JFresnel is a Java library that implements the Fresnel specification for various RDF APIs, such as Jena and Sesame.
http://jfresnel.gforge.inria.fr/Portlets' Implementation (WebContent project)
Visualization portlets used in the Airbus application : event timeline, event statistics by year,..