Как создать планы этажей, которые хорошо работают с мобильными и настольными браузерами?

Хотите создать динамическую карту плана офиса, чтобы показать занятость и связь с собраниями и т.д. У меня есть некоторые файлы AutoCAD под рукой и изучаем способы сделать это в браузере. Мне кажется, что SVG был бы хорошим соперником, который поддерживает большинство мобильных и настольных браузеров (без старой версии IE, пожалуйста), но я сомневаюсь, есть ли способы привязать данные к каждому объекту в плане этажа. Я искал библиотеки, такие как D3.js или Raphaël, и они, похоже, нуждаются в библиотеке, в которой я нуждаюсь. Поэтому мои вопросы:

  1. Есть ли способ конвертировать файл AutoCAD в нечто вроде SVG, в то время как SVG отображает места и комнаты на плане как отдельные объекты?
  2. Какая библиотека (D3 или Raphaël) соответствует моим потребностям? У меня есть база данных MySQL, которая может откачивать занятие, а также данные собрания.
  3. Как мера остановки во время разработки, вы, ребята, думаете, что экспорт файла САПР на изображение и использование винтажных хаков, таких как карта изображений HTML, чтобы показать что-то основное, - хорошая идея? Я думаю, что если это может стать резервом для старых старых браузеров.

Ответы

Ответ 1

Я создал приложение для планшета, которое похоже на то, что вы создаете. Не стесняйтесь смотреть на исходный код и создавать свою собственную вилку. Надеюсь, вы сможете извлечь из этого вдохновение.

Код, наиболее подходящий для манипуляции SVG, - Map.js, поэтому вы можете начать с него. Один из SVG- карт хранится в mv.svg.

К сожалению, я не могу указать вам на живой экземпляр, на котором это работает, потому что он находится на внутреннем персональном сервере.

Заметки архитектуры

  • стены и названия комнат хранятся в SVG файле.
    • созданный в Adobe Illustrator, который может импортировать AutoCAD DWG
    • SVG, отредактированный вручную, включает в себя массив JavaScript координат места
  • при загрузке страницы серверный шаблон вставляет SVG в источник HTML
    • в противном случае, если SVG загружается с использованием <object> или <image> или background-image CSS, у вас не будет доступа к SVG DOM с помощью JavaScript
  • динамические данные (встречи, места) извлекаются из базы данных Mongo и отображаются через API JSON REST
  • клиентское приложение JavaScript MVC использует Backbone для вставки динамических данных в SVG DOM и присоединения обработчиков событий
    • при щелчке персонального аватара отображается подробная информация о человеке
    • когда пользователь вводит в поле поиска, аватары в SVG получают классы CSS, применяемые так, чтобы изображения аватаров, не совпадающие с поиском, были полупрозрачными

Схема базы данных

База данных Mongo имеет коллекцию people, каждая из которых содержит документ следующей формы:

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

Единственное обязательное поле - fullname (и _id, но я даю Mongo автогенерировать это).

конфигурация

Вы можете настроить подключение к базе данных и настройки HTTP-сервера, скопировав предоставленный config.json.example в config.json и внеся изменения в новый файл.

Скриншот

screenshot

Ответ 2

Если вы хотите что-то вроде резерва для вашей карты плана этажей, вы можете попробовать использовать какое-то программное обеспечение, чтобы вырезать места и комнаты на экспортированном изображении, например, iiCreator (http://www.iicreator.com) может импортировать ваш пол и вы можете использовать инструменты для создания мест и комнат. Возможно, он не такой полнофункциональный, как система этажного плана от Aldaviva, но он служит вашей цели в краткосрочной перспективе.