web-dev-qa-db-fra.com

Plans d'étage interactifs en HTML5

Je dois développer un navigateur et un visualiseur de plan d'étage interactifs pour les immeubles à appartements, qui succéderont à son prédécesseur basé sur Flash.

Je suis actuellement en train d'évaluer les techniques et technologies les mieux adaptées pour l'implémenter en HTML5. Je devrai prendre en charge tous les navigateurs courants (IE commençant par 7).

Exigences:

  • L'utilisateur se voit présenter plusieurs vues extérieures statiques du bâtiment, entre lesquelles il peut basculer avec un simple widget.
  • Ils pourront sélectionner un étage sur cette vue extérieure. Au survol de la souris (cliquez pour les appareils tactiles), le sol sera mis en surbrillance.
  • En cliquant sur l'étage, vous passez à un plan d'étage qui, à nouveau au survol/onclic, fournit des informations détaillées sur l'appartement.
  • Certaines animations devraient être impliquées, mais rien de trop sophistiqué.

J'ai réfléchi aux options de mise en œuvre. J'aurai également besoin d'un moyen rapide de sélectionner des polygones pour les étages (aperçu) et les appartements (plan d'étage) pour permettre aux non-développeurs de créer de nouveaux bâtiments.

Les options que j'ai trouvées:

  1. Utilisez des images simples et des cartes d'images pour les escales.
  2. Utilisez canvas (en utilisant la solution Javascript de Google pour les navigateurs sans support). Chargez l'image dans la balise canvas et créez dynamiquement les mises en page.
  3. Utiliser SVG

Quelle est la meilleure option pour la compatibilité entre les navigateurs?

htmlcanvasinteractive
20
theduke

Soit SVG ou Canvas conviendra à vos besoins. Vous aurez probablement plus de facilité à développer cela en SVG simplement à cause de ce qui est déjà fait pour vous.

Voici quelques autres considérations:

  • Canvas fonctionne dans tous les navigateurs "modernes", mais pas IE7/8
  • SVG fonctionne dans tous les navigateurs modernes et VML (très proche) est dans IE7/8
  • Le rendu du texte dans Canvas peut être très différent par navigateur en ce moment
  • Canvas fonctionne dans Android et iOS dans une certaine mesure (des choses mineures comme les dégradés de texte ne fonctionnent toujours pas))
  • SVG ne fonctionne pas dans Android (au moins il n'y a pas un an. Quelque chose change?) Il fonctionne dans iOS
  • L'accessibilité de SVG est LOIN meilleure. Le texte est consultable, donc optimisé pour le référencement, convivial pour les aveugles, copié-collé, etc. L'interaction avec le reste du DOM est beaucoup plus naturelle.
  • Les performances du canevas sont meilleures, mais vous n'en avez pas besoin.

À ce stade, ils sont assez égaux en termes de compatibilité, à l'exception des anciennes versions d'IE. Vous pouvez les faire fonctionner avec Canvas en utilisant la bibliothèque excanvas, mais ça craint un peu, surtout si quelque chose va bouger.

Je recommanderais SVG uniquement parce que vous pourrez commencer à le développer beaucoup plus rapidement pour une application de type plan d'étage. Tout est déjà un objet DOM. Les événements, la gestion de la souris, etc., sont déjà faits pour vous.

Mais si vous voulez vraiment qu'il fonctionne sur (les plus anciens?) Android téléphones, Canvas est peut-être le meilleur pari pour l'instant.

11
Simon Sarris

Je prévois quelque chose de similaire pour la navigation intérieure :)

J'ai fini par utiliser OpenLayers ( http://openlayers.org/ )

En fait, OpenLayers a été inventé pour les trucs SIG (cartes, etc.), mais vous pouvez facilement définir un système de coordonnées métriques X-Y-Z et simplement l'alimenter avec des données vectorielles.

Le gros avantage est qu'il est livré avec de nombreuses fonctionnalités telles que le dessin, différentes superpositions vectorielles, la détection de collision, la mesure de distance, les info-bulles, les marques, etc.:

Pour OpenLayers 2.x (à l'origine), voir:

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/draw-feature.html

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/transform-feature.html

Pour OpenLayers 3.x, voir:

http://openlayers.org/en/v3.4.0/examples/

http://openlayers.org/en/v3.4.0/examples/draw-features.html

Vous pouvez communiquer via GeoJSON, GML, etc. avec le backend. Nous avons utilisé PostGIS comme backend pour stocker les données vectorielles. Il y a aussi une extension spatiale pour mysql ( http://dev.mysql.com/doc/refman/5.0/en/spatial-extensions.html ).

Définissez simplement un système de coordonnées X-Y-Z simple avec un point de référence bien choisi :)

10
sled