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

Souhaitez créer une dynamique de schéma d'implantation d'un bureau de montrer de l'occupation et du lien aux réunions etc. J'ai quelques fichiers AutoCAD sur la main et fait des recherches sur les moyens de faire cela sur un navigateur. Il me semble que SVG serait un bon candidat qui prend en charge la plupart des mobiles et des navigateurs de bureau (pas de vieille version d'IE s'il vous plaît), mais je doute qu'il existe des moyens pour lier les données de chaque objet sur le plan d'étage. J'ai cherché pendant des bibliothèques comme D3.js ou Raphaël et ils semblent tbe la bibliothèque dont j'ai besoin. Donc mes questions sont:

  1. Est-il un moyen de convertir un fichier AutoCAD à quelque chose comme SVG, tandis que les SVG d'affichage, les sièges et les chambres sur le plan des objets individuels?
  2. La bibliothèque (D3 ou Raphaël) permettrait de répondre à mes besoins? J'ai une base de données MySQL qui peut pomper de l'occupation et également les données de la réunion.
  3. Comme une mesure provisoire au cours du développement, les gars, vous ne pensez que l'exportation de fichiers CAO d'une image et utiliser vintage hacks comme le HTML de l'image de la carte pour montrer quelque chose de base est une bonne idée? Je pense si cela peut devenir une solution de repli pour ces bons vieux navigateurs.

source d'informationauteur Tom Wrigley

  1. 31

    J'ai construit un plan de l'étage de l'application qui semble similaire à ce que vous êtes en train de créer. N'hésitez pas à regarder le code source et de créer votre propre fourchette. Nous espérons que vous pouvez tirer de l'inspiration.

    Le code le plus pertinent pour SVG manipulation est Map.jsvous voudrez peut-être commencer par là. Celui de la carte SVGs est stocké dans mv.svg.

    Malheureusement, je ne peux pas vous le live de cette instance est en cours d'exécution sur parce que c'est sur l'une, interne, RH serveur.

    Architecture notes

    • murs de la chambre et les noms sont stockés dans un fichier SVG.
      • généré dans Adobe Illustrator, qui peuvent importer AutoCAD DWG
      • SVG édité par la main pour inclure un tableau JavaScript de siège coordonnées
    • au chargement de la page, à côté serveur template insère le SVG dans le code source HTML
      • sinon, si le SVG est chargé à l'aide d'un <object> ou <image> balise CSS ou background-imagevous n'aurez pas accès à la SVG DOM à l'aide de JavaScript
    • dynamique de données (réunions, les sièges) sont récupérées à partir d'une base de données Mongo et exposés par le biais d'un JSON API REST
    • côté client JavaScript MVC de l'application utilise la colonne vertébrale, à insérer les données dynamiques dans les DOM SVG et joindre les gestionnaires d'événements
      • lorsqu'une personne avatar est cliqué, détaillé personne info est montré
      • lorsque l'utilisateur tape dans une zone de recherche, les avatars du SVG obtenir des classes CSS appliqué de manière avatar images qui ne correspondent pas à la recherche sont semi-transparents

    Schéma de base de données

    La base de données Mongo a un people collection, dont chacune contient 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 _idmais je laisse Mongo générer automatiquement des que).

    Configuration

    Vous pouvez configurer la connexion de base de données et serveur HTTP paramètres par copie de la condition config.json.example à config.json et de faire vos modifications dans le nouveau fichier.

    Capture d'écran

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

  2. 1

    Si vous voulez quelque chose comme une solution de repli pour votre plan d'étage de la carte, vous pouvez essayer d'utiliser un logiciel pour dessiner des sièges et des pièces de votre image exportée, par exemple, iiCreator (http://www.iicreator.com) pouvez importer votre plan d'étage de l'image, et vous pouvez utiliser des outils pour créer des sièges et des chambres facilement. Il peut ne pas être aussi complet comme le Sol, système de plan de Aldaviva, mais il sert à votre but à court terme.