Voir la source de Créer une interface synchronisant des modalités de visualisation multiples

[[TP Visualisation et Collaboration autour des données|retour]]

== Objectif ==
L’objectif est de vous conduire à développer une interface WEB synchronisant des modalités de représentation différentes d’un même objet physique. Nous proposons la représentation d’une partie d’une installation industrielle représenté sous la forme d’un modèle 3D, d’un schéma mécanique et d’une représentation conceptuelle topologique.

== Démo live ==
<iframe key="efrei" path="XDBrowser" />

== Données nécéssaires ==
Les données nécessaires à la réalisation sont disponibles et téléchargeable ici :

{| class="wikitable"
|+ Texte de la légende
|-
| <iframe key="efrei" path="datas" height="300" />
|}


== Réalisation ==
La réalisation est découpée en différentes parties. Les 4 premières peuvent être traitées en parallèle. 

=== [[VISUALISEUR 3D]] ===

=== [[VISUALISEUR 2D]] ===

=== [[VISUALISEUR 1D]] ===

=== [[VISUALISEUR NETWORK]] ===
=== [[RENDRE LA PAGE PLUS ESTHETIQUE]] ===
Cette partie, optionnelle, peut être abordée suite à chacune des parties précédentes pour rendre le résultat plus esthétique.

=== [[SYNCHRONISER LA VUE 3D, 2D, 1D ET NETWORK]] ===
Cette étape vous oriente afin de synchroniser initialement les vues 2D et 3D. Vous pouvez ensuite généraliser l’approche.

== Pour aller plus loin ==
Vous pouvez faire preuve de créativité :

* '''Faire apparaître des notifications''' en fonction des interactions. Utiliser la librairie [https://github.com/apvarun/toastify-js/blob/master/README.md Toastify-js] par exemple. 
* Des '''boites de dialogue ou des infobulles''' pourraient apparaitre. La librairie [https://jspanel.de/#getstarted jspanel] est puissante.
* Le SVG peut être rendu navigable (zoom+pan). Librairie [https://github.com/bumbu/svg-pan-zoom svg-zoom-pan].

__FORCERSOMMAIRE__

[[Catégorie:Travaux Pratiques]]