发表新帖
发表新帖

How to create floor plans that work nice with mobile and desktop browsers?

前端 未结
关注
2 790
野趣味
野趣味 2021-01-31 11:39

Want to create a dynamic floor plan map of an office to show occupancy and link up to meetings etc. I have some AutoCAD files on hand and been researching for ways to make this

2条回答
  • 盖世英雄少女心
    盖世英雄少女心 (楼主)
    2021-01-31 12:16

    I built a floorplan application that sounds similar to what you're creating. Feel free to look at the source code and create your own fork. Hopefully you can pull some inspiration from it.

    The code most relevant to SVG manipulation is Map.js, so you may want to start there. One of the map SVGs is stored in mv.svg.

    Sadly, I can't point you to the live instance this is running on because it's on an internal HR server.

    Architecture notes

    • walls and room names are stored in an SVG file.
      • generated in Adobe Illustrator, which can import AutoCAD DWG
      • SVG edited by hand to include a JavaScript array of seat coordinates
    • on page load, server-side templating inserts the SVG into the HTML source
      • otherwise, if SVG is loaded using an or tag or CSS background-image, you won't have access to the SVG DOM through JavaScript
      • dynamic data (meetings, seats) are retrieved from a Mongo database and exposed through a JSON REST API
      • a client-side JavaScript MVC application uses Backbone to insert the dynamic data into the SVG DOM and attach event handlers
        • when a person's avatar is clicked, detailed person info is shown
        • when the user types in a search box, the avatars in the SVG get CSS classes applied so avatar images that don't match the search are semi-transparent

        • Database schema

        The Mongo database has a people collection, each of which contains a document of the following form:

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

        The only required field is fullname (and _id, but I let Mongo autogenerate that).

        Configuration

        You can configure the database connection and HTTP server settings by copying the provided config.json.example to config.json and making your changes in the new file.

        Screenshot

        screenshot

        0 讨论(0)
         看不清?
        提交回复
        热议问题