Как сделать макет окна
Обновлено: 05.05.2024
Решал интересную задачу – сделать визуальный редактор-конфигуратор окон.
Подробностями процесса разработки я с вами, коллеги, и поделюсь.
UPD. Добавил скриншоты.
UPD2. Речь идет об окнах оффлайновых, застекленных, деревянных или пластиковых — через которые на улицу из дома смотрят
Спасибо за отклики!
1. Это модуль для сайта, который должен работать в произвольных популярных кейсах.
2. В режиме редактирования программа должна позволять указывать количество и расположение проемов в окнах.
3. В режиме редактирования программа должна позволять указывать способ открывания проемов в окнах, пять вариантов: нет открывания, налево, направо, налево и откидывается, направо и откидывается.
4. В режиме отображения программа должна картинкой в произвольном масштабе отображать конфигурацию окна.
5. Не нужно хранить и работать со сведениями о размере, пропорциях, цвете и других характеристиках окна. Картинки должны быть цветными и понятными. ЕСКД в данном случае не при делах.
6. Не должно глючить, тупить, должно быть кроссбраузерно, должно работать на в браузерах планшетных ПК и на смартфонах и т.д.
На этом этапе мы совместно с заказчиком поиском по картинкам Google просматриваем интерфейс аналогичных продуктов. Поиском по сайтам находим продавцов окон, и посещаем десяток сайтов, чтобы посмотреть на интерфейс онлайн-конфигураторов и вообще ассортимент конфигураций окон. Обсуждаем, что у нас должно быть, и чего, быть не должно.
Теперь дополняем бизнес-требования техническими условиями, для того, чтобы в итоге сформировать техническое задание.
1. Изходя из требования произвольного масштабирования – возникает понимание, что графика должна быть векторной. Кроссбраузерное решение, которое удовлетворит – HTML5 canvas.
2. Очевидно, должно быть два режима: режим редактирования и режим отображения.
3. В режиме редактирования данные должны сохраняться в input type=hidden. Я не буду вносить изменений в CMS – зачем мне лишние головняки? Просто добавлю одно поле в формы для добавления и редактирования, в СУБД и в соответствующие модели (у меня реально это происходит одним действием, если у вас нет – вероятно имеет смысл пересмотреть структуру программы).
4. В режиме редактирования ранее созданная визуальная конфигурация окна должна восстанавливаться из данных, находящихся и подставленных автоматически в поле input type=hidden.
5. В режиме отображения CMSка отдаст данные, как свойство какого-нибудь div, и моя программа должна эти данные: а) обнаружить, б) нарисовать по ним окно.
В данном случае спецификацию я делать не буду, а пойду по пути наименьшего сопротивления. Хорошая часть видения решения присутствует уже на данный момент, поэтому я начну реализацию немедленно.
Суровая программисткая реальность: не хочу усложнять себе жизнь, и поэтому изначально создаю масштабируемые и сопровождаемые решения. Поэтому DRY, поэтому абстракции и слои – сразу, по умолчанию.
Когда просматривал разновидности окон, зарисовал в тетрадке карандашом небольшой каталог, чтобы понять, что предстоит рисовать. Когда я делал эти зарисовки, пришло понимание, что я не хочу делать это на CSS (вероятно зря), и продолжать работать с .
Иду искать библиотеку для работы с canvas. Нахожу calebevans.me/projects/jcanvas, бегло просматриваю документацию, оцениваю качество исходников и понимаю, что это то, что мне нужно сейчас.
Понимаю, что рисование будет самой низкоуровневой функцией. И вообще, давно хочется порисовать. Пробую несколько функций по документации, нахожу примеры онлайн в песочнице. Все работает, все устраивает.
Создам функцию-основу для рисования окна.
Естественно, функции не хранят параметры (это называется данными). Внутри функций – переменные.
В тот момент совесть не просыпалась, поэтому они в глобальной области видимости. Если она проснется – просто положу все в класс. Если проснется одновременно с ленью (или здравым смыслом) – буду писать на CoffeeScript. Сейчас звезды встали в определенное положение, и есть некоторое понимание того, что конечный продукт будет маленькой программой, состоящей из десятка фунций jQuery, в связи с чем целесообразность подобных действий в настоящий момент просто не рассматривается. Сначала сделать, чтобы работало. Рефакторинг – потом.
Глядя на свои зарисовки, вижу, что я могу рисовать оконные проемы, как прямоугольники, и обозначать открывание с помощью ровных ломаных линий внутри них.
Теперь – линии, обозначающие открывание. Left — налево, right – направо, tilt – откидывание. Кейса с фрамугой вниз нет (переспрашивал, когда интервьюировал заказчика), поэтому и заморачиваться сейчас не буду. Если возникнет потребность – потом можно будет легко его добавить.
Пишу несколько очень быстрых тестов, чтобы попробовать это. Все работает, поэтому перехожу дальше.
Собственно, по конфигурации проемов все окна можно поделить на “вертикальные” (как обычно делают в квартирах), Т-образные. Реже встречаются “горизонтальные” — в подъездах и в учреждениях.
Сначала нарисую что-нибудь попроще. Параметр leafs – количество проемов.
Посредством небольшой отладки и серии мелких тестов привожу функцию в рабочий вид.
Руками передаю параметры и вызываю функции, рисующие открывание – для того, чтобы сверху отображались ломанные линии.
Поворачиваю на 90 градусов, и получаю “горизонтальное” окно.
Тестирую, добиваюсь работоспособности.
Красивая пропорция – 1 к 2. Так как в бизнес-требованиях есть указание не заморачиваться с пропорциями, для Т-образного окна сделаю вот такой дизайн.
Делаю тесты, заставляю все работать ровно, без рывков.
Нарисую все виды окон, с которыми должна работать программа.
Седьмой параметр и понимание его содержание добавились позднее. Просто не обращайте на него внимание сейчас.
И добавлю в функцию, ответственные за рисование створки окна, коллбек на клик. Промежуточная версия кода не сохранилась – взяв хороший разгон, я позабыл делать частые комиты, поэтому покажу окончательную версию.
И функция, которая ловит клик по створке большого окна или маленькому окну в каталоге.
Была мысль сделать раздельные коллбеки, но в процессе причин для совершения лишней работы не нашел.
Добавил функцию-диспетчер, для удобства.
Открывание створок будет переключаться щелчком. Что может быть проще?
Сохраню в массиве список створок, и определю во втором массиве возможности по их открыванию.
Заполню массив данными по умолчанию. Не лучший вариант, но на момент написания думал о другом – о вероятном сохранении данных.
По щелчку должно меняться открывание створки. В цикле по возможностям открывания: нет, налево, направо, налево и откидывается, направо и откидывается.
И тут же, не уходя далеко…
Данные после редактирования нужно сохранять.
Сделаю сериализацию от руки.
И, теперь никто не мешает рисовать окна из сохраненных данных.
Конфигурация окон может отрисовываться в списках заказов, это очень удобно. Маленькие картинки.
Программа должна каким-то образом понимать, что настало время рисовать окна.
Исходя из ТЗ, есть два варианта – поле формы и в произвольном месте.
Пожалуй, input[name=«window_type»] – не лучшее решение. Просто на этот момент у меня была цель запустить программу в работу, и я совсем не хотел модифицировать CMSку — поэтому обучил плагин искать свое поле по его имени: windows_type.
Если делать из этой программы библиотеку, нужно положить селектор в переменную. И обязательно завернуть это в класс, чтобы закрыть пространство имен, и т.д.
Вот переработанный код целиком. Это бета, и она же пошла в продакшн без изменений.
Что не показано в статье. Функция windows_handler запускается другим JS-компонентом, по двум событиям: document.ready и успешной загрузке аяксовых данных. Таким образом, окна отрисовываются немедленно после загрузки страницы, и перерисовываются, если происходит интерактивное обновление данных (“живой режим”).
Все юзкейсы выполняются. Сделал простой тест с большим количеством перерисовываний без перезагрузок, оставил машину с запущенными хромом и мозилой на некоторое время – память не жрется. Погонял этот же тест несколько часов в хроме и в сафари на айпаде и макбуке. Проблем не обнаружено.
Маленькая картинка, создается на клиенте на лету (распечатывается великолепно)
В режиме редактирования. Щелчок на маленькое окошко в каталоге изменяет конфигурацию большого (и сразу же данные в input type=hidden).
Щелчок на створку большого окна изменяет открывание створки.
Изменений в CMS не было. Окно добавляется и редактируется в скрытом поле, отрисовывается в div. Получается, что конфигуратор окон можно засунуть в произвольный вордпресс — просто подключив этот скрипт.
В настоящий момент благодаря этому решению продано, заказано и установлено уже очень много новых окон.
Хорошо бы засунуть этот код в какую-нибудь песочницу, вместе с тестами. Как вы считаете?
Подпишитесь на автора, если вам нравятся его публикации. Тогда вы будете получать уведомления о его новых статьях.
Отписаться от уведомлений вы всегда сможете в профиле автора.
Статья относится к принтерам:
В процессе изготовления масштабных моделей почти всегда возникает необходимость сделать стекла кабины из прозрачного материала. Хорошо когда есть точный принтер и лазерный резак - стекла вырезаются из тонкого оргстекла и вклеиваются. Но у меня такого оборудования нет, и приходится что-то изобретать на коленке. Хотя наверное настоящим моделистам способ давно известен.
Итак покажу на примере остекления двери:
Нам понадобится УФ-отверждаемая смола, лавсановая плёнка и клей БФ-6.
Из пленки (смола к ней не приклепает) вырезаю деталь перекрывающую окошко с запасом и приклеиваю на БФ-6 (он потом без следа удалится спиртом) на внешнюю сторону двери. С внутренней стороны ровным слоем заливаю смолу и отверждаю УФ-лампой. Окно получается слегка выпуклым (зависит от количества смолы). При наличии контакта с воздухом на смоле остается тонкий липкий слой, который также удаляется спиртом. Если есть желание можно налить смолы точно вровень и внутри также накрыть лавсановой пленкой - тогда липкого слоя не будет и обе поверхности будут плоскими (но у меня так получалось не всегда, иногда получались пузыри и я остановился на первом варианте).
Смола отверждается довольно долго 2-4 минуты (зависит от спектра и мощности УФ-лампы) и вместо неё я пробовал использовать УФ-клей. Он более текучий, застывает в течение минуты, однако дает усадку. Поэтому накрывать сверху лавсаном его не стоит. И если облучать сверху (со стороны открытой поверхности клея) то верхний слой быстро застывает, а нижний уменьшаясь в объеме натягивает внутрь пузыри. Поэтому используя клей я "подпирал" лавсан снизу кусочком оргстекла и облучал снизу. И полимеризация начинаясь от дна не приводила к образованию пузырей. Если липкий слой еще не удалён то можно в нужных местах долить клея и облучить еще - получается монолит.
Это еще с клеем БФ, какой-то вариант:
Тут вышло получше:
Еще УФ-смолой я заливаю (по акриловой краске) световые приборы:
Если поверхности вокруг стекла ровные и лавсан приклеен без зазоров - получается хорошо. У меня модель для отработки технологий, поэтому не очень ровно все. Думаю у вас получится получше.
Все это можно делать и с эпоксидной смолой (я так делал. ), но мне кажется это дольше. Хотя зависит от смолы.
Подпишитесь на автора
Подпишитесь на автора, если вам нравятся его публикации. Тогда вы будете получать уведомления о его новых статьях.
Ни одна архитектурная визуализация не может обойтись без окон. Именно через них в закрытое помещение проникает свет. Если он не будет проникать, то не получится никакого рендеринга. Но окна являются преградой для света, несмотря на свою прозрачность. Поэтому для корректности расчета и реалистичности сцены важно правильно смоделировать окна.
1. Моделирование
Прежде всего нужно вырезать отверстие в стене, куда встанет окно. Для этого создайте Box с размером будущего окна и толще стены. Передвиньте его так, чтобы он проходил сквозь стену насквозь. Затем выберите стену и выберите Create – Geometry – Compound Objects – Boolean. В меню Boolean выберите Subtract, нажмите Add Operands и выберите созданный Box. Отверстие прорежется автоматически.
Переходим в Create – Geometry – Windows и выбираете любое из окон. В статье мы воспользуемся Casement. Другие окна и не только можно увидеть в статье «Архитектурные примитивы в 3ds Max». Настраивать размер окна удобнее всего с привязкой к точкам Main Toolbar – Snaps Toggle (Vertex).
Используйте Modify – Edit Poly – Polygon чтобы удалить стекла. На месте стекол растяните плоскости (Plane).
Если у вас экстерьерная сцена или окна будут видны и неприкрыты, то стекла можно оставить. Но в таком случае плоскость должна быть снаружи постройки на очень маленьком расстоянии от окна.
2. Материалы
Закончив моделирование, необходимо приступить к материалам. Сложность материалов зависит от сцены, желаемых свойств. В данном случае материалы будут очень простыми.
Материал Window накладывается на модель рамы. Материал Glass накладывается на стекло. CoronaPortalMtl нужно использовать на плоскость (Plane). Если сцена собрана целиком, то ее можно уже рендерить.
Для наложения материалов необходимо отделить полигоны стекла от модели с помощью Edit Poly – Polygon – Detach.
3. Portal
Материал CoronaPortalMtl использован, но возникает вопрос, зачем он нужен. Это световой портал, который корректирует распространение фотонов. Он помогает снизить шум в закрытой сцене (помещении) и позволяет более правильно рассчитать освещение. Портал обязательно должен иметь толщину в 1 полигон и, желательно, совпадать с размерами стекла. Находиться портал обязан за пределами постройки. Направление нормалей и лицевой части плоскости ни на что не влияет. На рендере плоскость с материалом не отображается.
Влияние портала на «чистоту» сцены и на освещение особенно заметно в затененных участках. Было сделано 50 проходов (Passes Total) без использования Denoise Mode.
Безусловно, на обоих картинках все еще виден шум. Как отдельный инструмент CoronaPortalMtl не сильно повысит качество визуализации. Однако, если применить ее вместе с инструментом Denoise Mode и увеличить число проходов, то финальный рендер станет значительно лучше.
Как сделать окна для миниатюрных моделей.
Спасибо Владимир.
Тогда немного добавлю про технологию.
1. Чтобы нити направлять точнее я сперва распечатал рисунок окон на принтере (в программе Корел) и в нужных точках, на этих линиях просверлил отверстия. Тогда нити очень легко позиционировать.
2. Наружные оконные рамы их двойных нитей (изготовил на тросомоте). Внутренние переплеты рам их одинарных нитей.
3. Нити пропитал клеем ПВА. И ворс убрался и после высыхания их легче вдевать в отверстия (диаметр отверстий 1мм).
4. «Окна» внутри и снаружи залил глянцевым лаком. Нити лаком приклеились друг к другу и к черной подложке. Но главное внутри окон от блескучего лака появились «стекла».
Недавно попробовал для имитации иллюминаторов акриловый клей aqua kriszal klear. замечательно имитирует стекло, и обладая большим коэффициентом поверхностного натяжения, позволяет имитировать стекло в просверленных и прорезанных отверстиях. Наносится очень легко и при высыхании образует ровную, глянцевую и очень прозрачную плёнку. Можно использовать как клей. Я с его помощью имитировал пирамидальное остекление нактоуза иллюминаторы и светлые люки на "Струе".
Технология необычная для окон.
Размер вроде не слишком маленький, зачем делать тряпичные окна, если совсем не сложно сделать натуральные деревянные.
Но основное замечание по натуральности изготовленного. Окна смотрятся явно понарошковыми, нарисованными.
Основное предназначение всех окон на модели - сделать ее визуально объемной, для этого окно не должно быть нарисовано и не должно быть никаких по любому блестящих стекол. Окно должно уходить в пустоту, тогда получается абсолютно черная дыра, которая и придает объем модели.
Учитывая тонкую организацию ТСа и всех остальных, заранее извиняюсь за замечание.
Володь, ты безусловно прав в рассуждениях по поводу "черности дыр", однако с увеличением масштаба трудность изготовления оконного переплета возростает в разы,(по сравнению с окнами на твоей фотке) и изготовить окно размером даже в 2,0 на 2,5 мм из дерева перерастает в задачу довольно сложную. Приходится искать компромисы.
Сначала вырезается основа из 2-мм картона. Верхняя рама заходит на нижнюю, и надо это учитывать при разметке. Всего вырезается 4 детали: 2 для верхней рамы, 2 для нижней.
Затем вооружаемся канцелярским ножом и аккуратно вырезаем "окошки".
Обе детали каждой рамы должны быть максимально "зеркальными", так как потом будут склеиваться изнанками друг к другу, и неровный раскрой будет виден. Я сравниваю детали после вырезания каждого "окошка" и стараюсь подправлять огрехи сразу.
Потом нарезаем полоски шпона нужной ширины, обрезаем уголки и наклеиваем по периметру рамы на лицевые стороны. Делается это для рельефа( окантовка рамы слегка возвышается над переплетом)) и для упрочнения конструкции. Ну и для большей "деревяннистости", конечно)))
Следующий этап - покраска. Я крашу и с изнанки тоже, так меньше заметны огрехи резки картона.
Теперь стекла. Из упаковочного твердого пластика вырезается 2 прямоугольника размерами чуть меньше рам (так будет прочнее склеиваться "стеклопакет", если пластик весь окажется в картоне). Это если окно - имитация. А для открываюшегося для нижней рамы вырезается прямоугольничек с "ушками" (см. схему). Дальше склеиваем "сэндвич". Одну деталь рамы мажем с изнанки клеем (не очень обильно, чтобы при сжимании не выступал), на нее накладываем "стекло". Мажем с изнанки вторую, максимально аккуратно клеим на стекло, чтоб переплеты совпадали (вот тут-то и вылезают огрехи "зеркальности" рам). Плотно сжимаем. Как высохнет, ровняем ножом торцы, подгоняем окончательно под оконный проем.
"Ушки" при склеивании слегка торчат с боков. Выступающая из торца часть "ушка" размерами 1*10 мм. "Ушки" будут ходить в выдолбленной в косяке канавке. Если сделать слишком широкое, придется долбить глубокий пропил в косяке окна, если длинное, придется пропил делать длиной почти во весь косяк.
В косяке окна делается пропил. Я режу канавку тем же канцелярским ножом. У меня толщина стены 10 мм. Толщина стеклопакета 5 мм, так что пропил делаю, отступив на 2 мм от внутреннего края косяка. Ширина канавки - 1 мм, глубина 1,5-2 мм, длина 3/5 высоты косяка на уровне трех средних секций (для моей рамы 5*3). Если и верхняя, и нижняя рамы симметричные (классическое окно 6*3, например), то пропил надо будет делать до самого верха, так как рама поднимается до верхнего косяка.
К нижней раме с внутренней стороны прикрепляем ручку. Я делаю их из коннектора и 2 пинов. У коннектора обрезаю одно колечко и гну его на круглогубцах. Пины обрезаю, оставляя мм 3 под шляпкой. В раме иглой намечаю дырочки, ручку смазываю клеем, устанавливаю. Пины тоже окунаю в клей и ими, как гвоздями, приколачиваю ручку
Дальше устанавливаем рамы. Проем предварительно подготавливаем, выравниваем и красим. Начинаем с нижней:пластиковые "ушки" гибкие, поэтому продавливаем раму в проем до щелчка, пока "ушки" не лягут в канавку. Можно подвигать туда-сюда, чтоб сразу прочистить пропил, если что-то мешает движению рамы. Верхняя рама просто вклеивается в проем. Вуаля - окно готово. Наличники - просто рамка из картона.
Читайте также: