如何创建适合移动和桌面浏览器的平面图？ [英] How to create floor plans that work nice with mobile and desktop browsers?

问题描述

想要创建一个办公室的动态平面图地图，以显示占用率并链接到会议等。我有一些AutoCAD文件在手，并正在研究的方式使这一点在浏览器上。在我看来，SVG将是一个很好的竞争者，支持大多数移动和桌面浏览器（没有旧版本的IE请），但我怀疑是否有办法绑定数据到平面图上的每个对象。我已经搜索了像D3.js或Raphaël的图书馆，他们似乎是我需要的图书馆。所以我的问题是：

1. 有任何方法可以将AutoCAD文件转换为像SVG，SVG会显示座位和房间


2. 哪个库（D3或Raphaël）适合我的需要？我有一个MySQL数据库，可以抽出占用率和会议数据。


3. 作为开发过程中的一个stopgap措施，你们认为导出CAD文件的图像和使用复古hacks像HTML图像地图来显示基本的东西是个好主意？我想如果这样做可以成为那些好的旧浏览器的后备。

解决方案

构建了一个类似于您创建的平面布置图应用。随意查看源代码并创建自己的fork。希望你能从中获得一些灵感。

与SVG操作最相关的代码是 Map.js ，因此您可以从那里开始。其中一个地图SVG存储在 mv.svg

很遗憾，我无法指向正在运行的实例，因为它位于内部HR服务器上。

建筑音符

• 墙壁和房间名称存储在SVG文件中。
  
  
  
  
  • 在Adobe Illustrator中生成，可以导入AutoCAD DWG
  
  
  • 手动编辑SVG，坐标
  
  


• 在页面加载时，服务器端模板将SVG插入HTML源
  
  
  
  
  • 否则，如果SVG使用< object> 或< image> 标签或CSS background-image ，您将无法通过JavaScript访问SVG DOM。
  
  


• 从Mongo数据库检索动态数据（会议，席位）并通过JSON REST API显示


• 客户端JavaScript MVC应用程序使用Backbone插入动态数据进入SVG DOM并附加事件处理程序
  
  
  
  
  • 当用户的头像被点击时，显示详细的人物信息
  
  
  • 用户在搜索框中输入，SVG中的头像获取应用的CSS类，所以与搜索不匹配的头像图像是半透明的
  
  

数据库模式

Mongo数据库有人 collection，其中每个都包含以下形式的文档：

  {
_id：ObjectId 5201db41f5f4be9ae57e37a9），
fullname：Ben Hutchison，
desk：3，
office：mv，
email：ben ，
title：软件工程师，平面设计师，
tags：[des，eng]，
linkedInId：139463329，
 mobilePhone：845-986-0123，
workPhone：408-550-2995
} 
  

唯一需要的字段是 fullname （和 _id ，但我让

您可以通过复制提供的数据库连接和HTTP服务器设置来配置数据库连接和HTTP服务器设置。 config.json.example 至 config.json 并在新文件中进行更改。

截图

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 on a browser. It seems to me that SVG would be a good contender which supports most mobile and desktop browsers (no old version of IE please), but I doubt if there are ways to bind data to each object on the floor plan. I have searched for libraries like D3.js or Raphaël and they seem to tbe the library I need. So my questions are:

1. Is there any way to convert an AutoCAD file to something like SVG, while the SVG would display the seats and rooms on the plan as individual objects?
2. Which library (D3 or Raphaël) would suit my needs? I have a MySQL database which can pump out occupancy and also the meeting data.
3. As a stopgap measure during the development, do you guys think that exporting the CAD file to an image and use vintage hacks like HTML image map to show something basic is a good idea? I am thinking if doing this can become a fallback for those good old browsers.

解决方案

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 <object> or <image> 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

这篇关于如何创建适合移动和桌面浏览器的平面图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！