web-dev-qa-db-fra.com

Comment créer des plans qui fonctionnent bien avec les navigateurs mobiles et de bureau?

Voulez-vous créer un plan d'étage dynamique d'un bureau pour montrer l'occupation et vous lier à des réunions, etc. J'ai quelques fichiers AutoCAD sous la main et je cherchais des moyens de le créer dans un navigateur. Il me semble que SVG serait un bon candidat prenant en charge la plupart des navigateurs mobiles et de bureau (aucune ancienne version de IE s'il vous plaît), mais je doute qu'il existe des moyens de lier des données à chaque objet du plan d'étage. . J'ai cherché des bibliothèques comme D3.js ou Raphaël et elles semblent être la bibliothèque dont j'ai besoin. Donc mes questions sont:

  1. Existe-t-il un moyen de convertir un fichier AutoCAD en SVG, tandis que le SVG affiche les sièges et les pièces du plan en tant qu’objets individuels?
  2. Quelle bibliothèque (D3 ou Raphaël) conviendrait à mes besoins? J'ai une base de données MySQL qui peut pomper l'occupation et aussi les données de réunion.
  3. Pensez-vous que l’exportation du fichier CAD vers une image constitue une solution de rechange au cours du développement? Utilisez des hacks classiques, tels que HTML Image Map, pour afficher un élément de base, ce qui est une bonne idée? Je pense que si cela pouvait devenir un retour en arrière pour ces bons vieux navigateurs.
javascriptsvgd3.js
14
Tom Wrigley

J'ai construit une application floorplan qui ressemble à ce que vous créez. N'hésitez pas à regarder le code source et à créer votre propre fork. J'espère que vous pourrez vous en inspirer.

Le code le plus pertinent pour la manipulation SVG est Map.js , vous pouvez donc commencer par là. L'un des fichiers SVG de la carte est stocké dans mv.svg .

Malheureusement, je ne peux pas vous indiquer l'instance active sur laquelle elle s'exécute car elle se trouve sur un serveur HR interne.

Notes d'architecture

  • les noms de murs et de salles sont stockés dans un fichier SVG.
    • généré dans Adobe Illustrator, qui peut importer AutoCAD DWG
    • SVG édité à la main pour inclure un tableau JavaScript de coordonnées de siège
  • lors du chargement de la page, la création de modèles côté serveur insère le SVG dans la source HTML
    • sinon, si SVG est chargé à l'aide d'une balise <object> ou <image> ou CSS background-image, vous n'aurez pas accès au DOM SVG via JavaScript.
  • les données dynamiques (réunions, sièges) sont extraites d'une base de données Mongo et exposées via une API JSON REST
  • une application JavaScript MVC côté client utilise Backbone pour insérer les données dynamiques dans le DOM SVG et attacher des gestionnaires d'événements
    • quand on clique sur l'avatar d'une personne, les informations détaillées de la personne sont affichées
    • lorsque l'utilisateur tape dans un champ de recherche, les avatars du SVG obtiennent les classes CSS appliquées afin que les images d'avatar qui ne correspondent pas à la recherche soient semi-transparentes

Schéma de base de données

La base de données Mongo a une collection people, chacune contenant un document de la forme suivante:

{
    "_id" : ObjectId("5201db41f5f4be9ae57e37a9"),
    "fullname" : "Ben Hutchison",
    "desk" : 3,
    "office" : "mv",
    "email" : "ben",
    "title" : "Software Engineer, Graphic Designer",
    "tags" : [  "des",  "eng" ],
    "linkedInId" : 139463329,
    "mobilePhone" : "845-986-0123",
    "workPhone" : "408-550-2995"
}

Le seul champ obligatoire est fullname (et _id, mais je laisse Mongo auto-générer cela).

Configuration

Vous pouvez configurer les paramètres de connexion à la base de données et de serveur HTTP en copiant le config.json.example fourni dans config.json et en apportant vos modifications dans le nouveau fichier.

Capture d'écran

screenshot

31
Ben Hutchison

Si vous souhaitez obtenir une solution de remplacement pour votre plan d'étage, vous pouvez utiliser un logiciel pour dessiner les sièges et les salles de votre image exportée, par exemple iiCreator ( http://www.iicreator.com ) pouvez importer votre image de plan d'étage et vous pouvez utiliser des outils pour créer facilement des sièges et des salles. Il n’est peut-être pas aussi complet que le système de plan de sol d’Aldaviva, mais il répond à vos besoins à court terme.

1
Mandi