Как сделать интерактивный план
Делаем интерактивный план местности за 15 минут
На Тостере часто спрашивают о том, как сделать интерактивную схему дома, план его внутреннего устройства, возможность выбора этажей или квартир с выводом информации о них, вывод информации о деталях того или иного товара при наведении мыши на них на фотографии и.т.д. Речь там идет не о трехмерной модели, а именно о картинке с возможностью подсветить те или иные детали. Все эти задачи похожие и решаются достаточно просто, но тем не менее вопросы продолжают появляться, так что сегодня мы рассмотрим, как подобные вещи делаются при помощи SVG, графического редактора и щепотки javascript.
Выбор именно SVG обусловлен тем, что это максимально простой для разработки и отладки вариант. Я встречал людей, которые советовали все это делать на canvas, но там гораздо сложнее понять, что происходит, да и координаты всех точек на кривых нужно как-то заранее рассчитать, а здесь – открыл инструменты разработчика и сразу видишь всю структуру, все объекты, с которыми идет взаимодействие, а все остальное можно накликать мышкой в человеко-понятном интерфейсе. Производительность между обычным 2d-канвасом и SVG почти не будет отличаться. WebGL может дать некоторый бонус в этом плане, но и сроки разработки вырастут в разы, не говоря уже о дальнейшей поддержке, что не всегда вписывается в бюджет. Я бы даже сказал “никогда не вписывается”.
В этом туториале мы сделаем что-то вроде виджета для вымышленного сайта по аренде частных домов в каком-то районе, но понятно, что рассматриваемые принципы создания таких вещей применимы к любой тематике.
Начинаем начинать
Я буду все показывать на примере Inkscape, но все те же действия можно провернуть и в любом другом редакторе используя аналогичные функции.
Для работы нам понадобятся два основных диалоговых окна:
Сразу запускаем их и переходим к созданию документа.
Если вы случайно перетянули их в отдельное окно, то можно кликнуть под верхней рамкой этого окна (где ничего нет), и перетянуть их обратно в основное. Это не совсем интуитивно понятно, но довольно удобно.
Открываем фотографию с видом на район. Мы можем выбрать – вставить саму картинку в виде base64-строки или внешней ссылкой. Поскольку она большая, выбираем ссылку. Путь к картинке потом поменяем руками при внедрении всего в страницы сайта. Создастся SVG-документ, в который фотография будет встроена через тег image.
Для растровых картинок, встроенных в SVG, встроенных в HTML, можно будет использовать lazy loading, так же, как и для обычных картинок на страницах. В этом примере мы не будем останавливаться на таких оптимизациях, но не стоит про них забывать в практической работе.
На текущем этапе видим перед собой примерно такую картину:
Теперь создаем новый слой (Ctrl+Shift+N или Menu > Layer > Add layer). В XML-редакторе видим, что появился обычный элемент g. Пока далеко не ушли, можем задать ему class, который потом будем использовать в скриптах.
Не стоит полагаться на id. Чем сложнее интерфейс, тем проще схлопотать их повторение и получить странные баги. А в нашей задаче от них все равно пользы нет никакой. Так что классы или data-атрибуты – наш выбор.
Если пристально посмотреть на структуру документа в XML-редакторе, то можно заметить, что там много лишнего. Любой более-менее сложный векторный графический редактор будет добавлять что-то свое в документы. Убирать все это руками – дело долгое и неблагодарное, редактор постоянно будет что-то добавлять заново. Так что очистка SVG от мусора производится только в конце работы. И желательно в автоматизированном виде, благо есть готовые варианты, тот же svgo к примеру.
Находим инструмент под названием Draw Bezier curves and Straight Lines (Shift+F6). С его помощью будем рисовать замкнутые контуры вокруг объектов. В нашей задаче нужно обрисовать все здания. Для примера ограничимся шестью, но в реальных условиях стоило бы заранее выделить время для того, чтобы аккуратно обрисовать все необходимые объекты. Хотя часто бывает, что есть много похожих сущностей – те же этажи на здании могут быть абсолютно идентичными. В таких случаях можно немного ускориться и копипастить кривые.
После того, как обвели нужные здания, возвращаемся в XML-редактор, добавляем классы или, что скорее всего будет даже удобнее, data-атрибуты с индексами для них (можно и с адресами, но т.к. у нас район вымышленный — есть только индексы), и перемещаем все в ранее созданный слой, чтобы все было “разложено по полочкам”. И картинку, кстати, тоже будет полезно туда переместить, чтобы все было в одном месте, но это уже мелочи.
Теперь, выбрав один path – кривую вокруг здания, можно выбрать их все с помощью Ctrl+A или Menu > Edit > Select All и редактировать одновременно. Нужно их все закрасить в окне Fill and Stroke, а заодно там же убрать лишнюю обводку. Ну или добавить ее, если она нужна из соображений дизайна.
Имеет смысл закрасить все контуры каким-нибудь цветом с минимальным значением opacity для них, даже если это не нужно в плане дизайна. Дело в том, что “умные” браузеры считают, что нельзя кликнуть по пустому контуру, а по залитому – можно, даже если никто этой заливки не видит.
В нашем примере оставим небольшую подсветку белым цветом, чтобы лучше видеть, с какими именно зданиями работаем, сохраним все и плавно переместимся в браузер и более привычный редактор кода.
Базовый пример
Сделаем пустую html-страницу, вставим полученную SVG прямо в нее и добавим немного CSS, чтобы ничего не вылезало за границы экрана. Тут даже комментировать нечего.
Вспоминаем, что добавили зданиям классы, и используем их, чтобы CSS был более-менее структурированным.
Поскольку мы задавали инлайновые стили в Inkscape, в CSS нужно их перебить. Было бы удобнее все делать в CSS? И да, и нет. Зависит от ситуации. Иногда выбора нет. Например если дизайнер нарисовал много всего разноцветного и переносить все в CSS и раздувать его до невозможности как-то не комильфо. В данном примере я использую “неудобный” вариант, чтобы показать, что и он не особенно то и страшный в контексте решаемой задачи.
Предположим, что к нам прилетели свежие данные по домам, и добавим им разные классы в зависимости от их текущего статуса:
Получим что-то такое:
Уже виднеется что-то похожее на то, что нам нужно. На данном этапе мы имеем подсвеченные объекты на плане местности, которые реагируют на наведение мыши. И не составляет труда добавить для них реагирование на нажатие кнопки мыши через стандартный addEventListener.
Leader Line
Часто встречается задача сделать линии, которые будут соединять объекты на карте и какие-то элементы на странице с дополнительной информацией, а также сделать минимальные всплывающие подсказки при наведении на эти самые объекты. Для решения этих задач очень неплохо подходит мини-библиотека leader-line, которая создает векторные стрелочки на любой вкус и цвет.
Давайте добавим к данным цены для всплывающих подсказок и сделаем эти линии.
Как можно заметить, ничего сложного не происходит. У линии есть “места крепления” к элементам. Координаты этих точек относительно элементов обычно удобно определять в процентах. В целом там есть много разных опций, перечислять и запоминать которые не имеет смысла, так что рекомендую просто полистать документацию. Одна из этих опций – startLabel – понадобится нам для создания маленькой всплывающей подсказки с ценой.
Никто не мешает все подсказки рисовать в графическом редакторе. Если у них предполагается неизменный контент, то это может быть даже удобно. Особенно если есть желание задавать им разное положение для разных объектов.
Мы также можем добавить опцию hide, чтобы все линии не отображались в виде веника. Будем показывать их по одной при наведении мыши на здания, которым они соответствуют:
Здесь же можно выводить дополнительную информацию (в нашем случае просто текущий статус объекта) в место для информации. Получится уже почти то, что нужно:
Такие штуки редко проектируют под мобильные устройства, но стоит вспомнить о том, что их часто делают на весь экран на десктопе, да еще и с какими-нибудь панелями сбоку для дополнительной информации и нужно все красиво растянуть. Как-то так к примеру:
При этом пропорции SVG-элемента определенно не будут совпадать с пропорциями картинки внутри. Что же делать?
Несовпадающие пропорции
Первая вещь, которая приходит на ум – это свойство object-fit:cover из CSS. Но есть один момент: оно совершенно не умеет работать с SVG. А даже если бы и работало, то дома по краям плана могли бы вылезти за края схемы и стать абсолютно недоступными. Так что здесь нужно пойти несколько более сложным путем.
Шаг первый. У SVG бывает атрибут preserveAspectRatio, который в некоторой степени аналогичен свойству object-fit (не совсем, конечно, но. ). Задав preserveAspectRatio=»xMinYMin slice» для основного SVG-элемента нашего плана получим растянутую схему без пустот по краям и без искажений.
Шаг второй. Нужно сделать перетаскивание мышкой. Технически такая возможность у нас осталась. Вот тут уже задачка посложнее, особенно для новичков. В теории у нас есть стандартные события для мышки и тачскрина, которые можно обработать и получить значение, на сколько нужно подвинуть карту. Но на практике можно в этом увязнуть очень надолго. На помощь придет hammer.js – еще одна небольшая библиотека, которая берет всю внутреннюю кухню на себя и предоставляет простой интерфейс для работы с перетаскиваниями, свайпами и.т.д.
Нам нужно сделать перемещение слоя со зданиями и картинкой во все стороны. Сделать это несложно:
По умолчанию hammer.js включает распознание еще и свайпов, но они нам не нужны на карте, так что выключаем их сразу, чтобы не морочили голову:
Теперь нужно как-то понять, что именно нужно поститать, чтобы перемещать карту только до ее краев, но не дальше. Нехитрым представлением двух прямоугольников в голове понимаем, что для этого нужно узнать отступы слоя со зданиями от родительского элемента (SVG в нашем случае) со всех четырех сторон. На помощь приходит getBoundingClientRect:
И почему у нас до сих пор нет более цивилизованного (и стабильно работающего) способа это сделать? Каждый раз дергать getBoundingClientRect очень нехорошо в плане производительности, но выбор не очень богатый, да и на глаз заметить торможение практически невозможно, так что не будем придумывать преждевременные оптимизации там, где и так все работает приемлемо. Так или иначе, это позволяет нам сделать проверку положения слоя со зданиями и перемещать все только если это имеет смысл:
По краям обычно стоит замедлить движение, чтобы не было резких остановок или рывков. Таким образом все туда-сюда превращаются во что-то такое:
Вариантов замедлений можно придумать много. Этот – самый простой. И да, он не очень красивый, но зато тупой как пробка и понятный. Коэффициенты в таких примерах обычно подбираются на глаз, в зависимости от желаемого поведения карты.
Если открыть браузер и поиграться с размером окна в инструментах разработчика, то можно обнаружить, что что-то пошло не так.
Нечистые силы
На десктопных устройствах все работает, а на мобильных происходит магия, а именно – вместо перемещения карты перемещается элемент body. У-у-у-у-уууу! Только приведения там не хватает. Хотя ладно, это бывает потому, что что-то где-то переполнилось и какой-то обертке не задали overflow: hidden. Но в нашем случае может случиться такое, что совсем ничего не двигается.
Загадка для зеленых верстальщиков: есть элемент g, внутри элемента svg, внутри элемента div, внутри элемента body, внутри элемента html. Doctype естественно html. Если для перетаскивания элемента g добавить к нему transform: translate(…), то на ноутбуке он переместится, как и задумано, а на телефоне — даже не шелохнется. Ошибок в консоли нет. Но баг определенно есть. Браузер – последний Хром и там и там. Вопрос – почему?
Предлагаю вам подумать минут 10 без гугла перед тем, как смотреть ответ.
Ха-ха! Я вас обманул. Точнее не так. Я описал то, что мы бы наблюдали при ручном тестировании. Но на самом деле все работает так, как и должно работать. Это не баг, а фича, связанная с CSS-свойством touch-action. В контексте нашей задачи (внезапно!) обнаруживается, что оно есть, и, более того, имеет некоторое значение, которое ломает всю логику взаимодействия с картой. Так что поступаем с ним очень грубо:
Но вернемся к нашим баранам и посмотрим на результат (лучше, конечно, открыть в отдельной вкладке):
Я решил не подгонять код под какой-то из модных фреймворков, чтобы он остался в виде нейтральной бесформенной заготовки, от которой можно отталкиваться при создании своих компонентов.
Сам себе архитектор – обзор бесплатных программ для проектирования дома
Ситуация на отечественном строительном рынке такова, что обращение к профессионалам всех мастей совершенно не гарантия, что качество услуг будет соответствовать ценнику. Проектирование тоже не является исключением из этого печального «правила», поэтому многие самостройщики не только реализацию, но и разработку проекта берут на себя. Незаменимый помощник, который многократно облегчит и построение чертежей, и расчеты, и «рисование» – бесплатная компьютерная программа для проектирования частного дома. Да, программное обеспечение тоже потребует времени на освоение, особенно, при начальном пользовательском уровне, но оно с лихвой окупится в дальнейшем. Приобретенные навыки пригодятся и в процессе оформления интерьера, и в ландшафтном дизайне, и для будущего строительства хозяйственных помещений. Если несколько лет назад не все конструкторы могли похвастаться интуитивно понятным, русскоязычным интерфейсом, сейчас в интернете выбор обширный. А работать можно как в удаленном режиме, скачав и установив программу, так и напрямую, онлайн.
Содержание
Нюансы самостоятельного проектирования
Полноценный проект, включающий архитектурный, конструктивный и инженерный разделы, со всеми расчетами, разрезами, ведомостями, спецификациями и чертежами, потянет минимум на сорок листов, а в зависимости от сложности и на все сто. И без специфичных навыков и определенного опыта разработать его самостоятельно практически нереально. Другое дело, что когда речь о частных малоэтажных домах, можно обойтись и меньшими объемами информации. Однако меньшими, не значит минимальными – построиться только на базе эскизов, то есть, нескольких картинок с фасадами и планировками, не получится. Вернее, получится, но это практически гарантированный долгострой, перерасход и нервотрепка с недоделками, переделками и регулярной необходимостью изобретать колесо. Тем печальнее, что некоторые «специалисты» берущиеся за проектирование частных домов, вместо полноценной документации продают те же самые визуализации.
Я за проект двумя руками. Но за тот, в котором все узлы и материалы за тебя проработал специалист. Как найти такого человека, который тебе сделает ПРОЕКТ, а не несколько красивых картинок? Я сейчас сам столкнулся с этим. Заплатил деньги, получил «проект»… а там несколько общих видов. Ни одного конкретного узла. Да, размеры есть. Но как крепится крыша к стенам, как балки соединяются друг с другом – ничего нет. На мои вопросы архитектор ответил – отдадите чертежи строителям, они построят, я всем делаю такие. Мой опыт сотрудничества с архитектором – зря выброшенные деньги.
И это не единичный случай, а распространенная практика, которая и толкает людей на самостоятельное проектирование. Самодельный проект дома, который поможет четко определиться с конструктивом, сметой и сроками, должен содержать и эскизы, и данные о материалах, и расчеты нагрузок. И если не все, то большинство программ, используемых для проектирования частного дома, позволяют именно конструировать, а не только планировать.
Функционал специализированных программ
В свободном доступе широкий выбор софта, ориентированного на решение различных задач и рассчитанного как на обычных пользователей, так и на профессиональный уровень. Некоторые программы узкоспециальны и «заточены» скорее, под ремонт квартиры или дома с упором именно на дизайн, другие, на проработку планировки и расстановку мебели, третьи, на визуализацию архитектуры. Универсального же любительского построителя, в котором можно создавать полноценный проект дома, от первого до последнего гвоздя – нет, но «для себя» вполне достаточно и программ с расширенным функционалом. У современного софта большое количество возможностей.
Если пару-тройку лет назад еще возникали сложности с русификацией, сегодня построители для проектирования частных домов идут на русском. Условно практически все конструкторы, рассчитанные на установку, относятся к профессиональному программному обеспечению – пришли они из-за рубежа, а там вообще нет понятия самостроев и самодельных проектов домов. Но фактически, они уже адаптированы и под любительский уровень, что вкупе с обучающими роликами делает их доступными даже для новичков. Однако самый ценный ресурс потратить придется.
Если раньше вообще не имел дела с проектированием домов и чертежами, то любая, даже самая простая прога потребует времени для освоения и вникания – это ведь не в Пейнте рисовать.
Программы для самостоятельного проектирования домов
Google SketchUp
Одна из самых распространенных программ для трехмерного моделирования не только домов, но и интерьеров, меблировки и ландшафтного дизайна с впечатляющим функционалом.
Все строительные чертежи для своего дома делал в скетчапе, весьма удобная программа, чтобы не говорили гуру-проектировщики. Простая, без лишних наворотов. С ее помощью лучше всего готовить тех. документацию. Как дизайнерская программа, где разные текстуры, тени и прочее – сказать не могу, ибо в таком качестве не использовал. Вроде есть такие функции, но если откровенно, оно мне самостройщику надо? Положить пару месяцев на эту разрисовку.
Изначально программа была полностью бесплатной, но со сменой владельцев у google sketchup остался тестовый период в тридцать дней, в который не каждый успеет уложиться. Если платить нет желания или возможности, есть альтернатива.
Действительно продали, но бесплатные версии по-прежнему имеются. Последняя официально бесплатная версия на русском языке SketchUp Make 2017. Правда она уже идет для 64-битных (новых компьютеров). То есть ее не поставишь на старенький 32-битный комп. А скачать можно прямо с официального сайта.
ArchiCAD
Программа предназначена для трехмерного моделирования и построения двухмерных чертежей домов и других конструкций, но непрофессионалам может показаться более сложной, хотя и более совершенна. Она ориентирована на создание архитектурных интерактивных моделей, позволяет выполнять расчеты теплотехники и инсоляции для выбранного конструктива.
Относится к условно-бесплатным, с тем же тестовым периодом на месяц, по истечении которого программное обеспечение придется купить. Однако если в семье есть студент соответствующего профиля, тестовый период растягивается на год. По уровню сложности – все относительно.
Проще архикада софт еще поискать надо. Открываешь и пошел фигачить. Есть мелочи несущественные, которые при желании нужно поискать, чтобы подстроить под себя, создал проект, настроил высоты этажей и понеслась. Я уж не говорю про подсчет материалов, которые используются в проекте, легко сделать за 2 секунды.
Освоение Архикада у меня прошло на интуитивном уровне, благодаря моим способностям в рисовании. Это дало мне понять конструктивные особенности любого проекта изнутри. Как конструктору, мне дает возможность исключить ошибки, предупредить несоответствия всех конструктивных элементов. Дешевле ошибиться и все исправить в Архикаде, чем в реальной стройке. Иногда некоторые элементы конструкций делаю в Скетчапе и потом через импорт довожу в Архикаде. С Архикадом мне удалось реализовать несколько интересных объектов. Кому трудно быстро освоить программу – для этого есть много видеоуроков.
nanoCAD
Основная масса конструкторов сейчас идет с упором на объемное моделирование и возможность виртуальной прогулки, но когда нужны плоские чертежи, не обойтись без этой разработки.
Если нет желания работать в 3D программах, то для двухмерного проектирования имеется профессиональная программа (отечественная) nanoCAD. По сути дела – это отечественный автокад. Даже интерфейс похожий. И открывает, и сохраняет файлы в автокадовском формате dwg.
Для «самиздата» вполне достаточно функционала бесплатной версии, который на выходе позволяет получить рабочие чертежи, а не только эскизы. Черчение автоматически выполняется по действующим нормативам и стандартам оформления, и их чтение осилят даже непрофессионалы. Сложности могут возникнуть у совсем уж «универсалов» из ближнего зарубежья, не владеющих русским языком.
HouseCreator
Специальная программа, для создания проектов деревянных домов из бруса или бревна, что особенно актуально с учетом возросшей популярности данного направления. Включает встроенные редакторы фундамента, сруба, стен, перекрытий и крыши, а также редактор чертежей, модуль оптимизации раскроя древесины. В отчетную документацию войдут не только планы, чертежи, схемы и спецификации, но и бирки для разметки бруса (бревна).
Sweet home 3d
В отличие от предыдущих конструкторов, программа не рассчитана на разработку полноценного проекта дома, ее специфика – дизайн интерьера и меблировка. Однако функционала вполне достаточно и для создания планировочных решений, а несомненным достоинством является простота и удобство интерфейса.
У меня спросили, в какой программе удобнее работать чайникам и я «прошел» по основным бесплатным программам и по ArCon. Несомненным победителем считаю Sweet Home 3D. Повторюсь. Программа для чайников. Для создания планировки и понимания своих хотелок и их сочетания с действительностью.
Работа с программой возможна как после скачивания и установки, так и online, в соответствующем приложении, в последнее время такой способ проектирования становится все популярнее.
Home Plan Pro
Еще одна достаточно распространенная программа для разработки планировок и дизайна, с набором готовых шаблонов (расположение окон и дверей, базовой меблировки и др.). Работа с ней осложняется отсутствием версии на русском языке, но стандартные инструменты и простота работы компенсируют отсутствие перевода. Большой выбор встроенных готовых модулей позволит оперативно распланировать весь дом или практически в несколько кликов обставить одну комнату.
Разрабатывать проект или заказывать?
Практически вечный вопрос, ответа на который всегда будет два.
Рисовал сам, коробку поставил сам. Считаю, что все делаю правильно.
Я не архитектор и не конструктор – поэтому, все, что я нарисую, будет сыровато и требовать переделки. Считаю проектирование очень важной частью строительства, которую нужно делать платно и у профессионалов. А для визуального выражения своих хотелок, лучший – «Sweet Home 3D», можно даже онлайн. Большего не нужно. Освоил за 2 часа со всеми нюансами – одно удовольствие рисовать, просто и быстро.
Какой из вариантов правильный, зависит от конкретных условий, стимулов как у «за», так и у «против» тоже два.
Рисовал дом сам в Архикад. Только из-за жесткой экономии, т.к. строюсь сам. В идеале, было бы получить готовый проект, со всеми тонкостями. И не пришлось бы ломать голову, как правильно и где провести трубу, где прокинуть кабель, выдержит ли перегородка или балка или плита ПК и т.п. мелочи, на обдумывание которых уходит много времени. Одно хорошо – работа такая, что времени хватает.