it-swarm.com.de

Wie erstelle ich Grundrisse, die mit mobilen und Desktop-Browsern gut funktionieren?

Möchten Sie eine dynamische Grundrisskarte eines Büros erstellen, um die Belegung anzuzeigen und eine Verknüpfung mit Besprechungen usw. herzustellen? Ich habe einige AutoCAD-Dateien zur Hand und habe nach Möglichkeiten gesucht, diese in einem Browser zu erstellen. Es scheint mir, dass SVG ein guter Anwärter ist, der die meisten mobilen und Desktop-Browser unterstützt (keine alte Version von IE bitte), aber ich bezweifle, dass es Möglichkeiten gibt, Daten an jedes Objekt im Grundriss zu binden . Ich habe nach Bibliotheken wie D3.js oder Raphaël gesucht und sie scheinen die Bibliothek zu sein, die ich brauche. Meine Fragen sind also:

  1. Gibt es eine Möglichkeit, eine AutoCAD-Datei in eine SVG-Datei zu konvertieren, während die SVG-Datei die Sitzplätze und Räume auf dem Plan als einzelne Objekte anzeigt?
  2. Welche Bibliothek (D3 oder Raphaël) würde meinen Bedürfnissen entsprechen? Ich habe eine MySQL-Datenbank, die die Auslastung und auch die Besprechungsdaten abpumpen kann.
  3. Denken Sie als Notlösung während der Entwicklung, dass es eine gute Idee ist, die CAD -Datei in ein Bild zu exportieren und Vintage-Hacks wie HTML-Imagemap zu verwenden, um etwas Grundlegendes zu zeigen? Ich denke, wenn dies ein Fallback für diese guten alten Browser werden kann.
14
Tom Wrigley

Ich habe eine floorplan-Anwendung erstellt die sich ähnlich anhört, als wenn Sie sie erstellen. Schauen Sie sich den Quellcode an und erstellen Sie Ihre eigene Gabel. Hoffentlich können Sie sich davon inspirieren lassen.

Der für die SVG-Manipulation relevanteste Code ist Map.js . Daher möchten Sie vielleicht dort beginnen. Eine der Karten-SVGs ist in mv.svg gespeichert.

Leider kann ich Sie nicht auf die Live-Instanz verweisen, auf der diese ausgeführt wird, da sie sich auf einem internen HR-Server befindet.

Anmerkungen zur Architektur

  • wände und Raumnamen werden in einer SVG-Datei gespeichert.
    • in Adobe Illustrator erstellt, mit dem AutoCAD DWG importiert werden kann
    • SVG von Hand bearbeitet, um ein JavaScript-Array von Sitzkoordinaten aufzunehmen
  • beim Laden der Seite fügt das serverseitige Templating die SVG-Datei in den HTML-Quelltext ein.
    • andernfalls haben Sie keinen Zugriff auf das SVG-DOM über JavaScript, wenn SVG mit einem <object>- oder <image>-Tag oder mit einem CSS-Code background-image geladen wird
  • dynamische Daten (Besprechungen, Sitzplätze) werden aus einer Mongo-Datenbank abgerufen und über eine JSON REST API verfügbar gemacht
  • eine clientseitige JavaScript-MVC-Anwendung verwendet Backbone, um die dynamischen Daten in das SVG-DOM einzufügen und Ereignishandler anzuhängen.
    • wenn der Avatar einer Person angeklickt wird, werden detaillierte Personeninformationen angezeigt
    • wenn der Benutzer ein Suchfeld eingibt, erhalten die Avatare in der SVG-Klasse CSS-Klassen, sodass Avatar-Bilder, die nicht mit der Suche übereinstimmen, halbtransparent sind

Datenbankschema

Die Mongo-Datenbank hat eine people-Sammlung, die jeweils ein Dokument der folgenden Form enthält:

{
    "_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"
}

Das einzige erforderliche Feld ist fullname (und _id, aber ich lasse es automatisch von Mongo generieren).

Aufbau

Sie können die Datenbankverbindung und die HTTP-Servereinstellungen konfigurieren, indem Sie den bereitgestellten config.json.example nach config.json kopieren und Ihre Änderungen in der neuen Datei vornehmen.

Bildschirmfoto

screenshot

31
Ben Hutchison

Wenn Sie beispielsweise einen Fallback für Ihre Grundrisskarte wünschen, können Sie versuchen, mit einer Software die Sitze und Räume auf Ihrem exportierten Bild zu zeichnen, z. B. iiCreator ( http://www.iicreator.com ). Sie können Ihr Grundrissbild importieren, und Sie können Werkzeuge verwenden, um die Sitze und Räume problemlos zu erstellen. Es ist möglicherweise nicht so umfassend wie das Floorplansystem von Aldaviva, aber es dient kurzfristig Ihrem Zweck.

1
Mandi