Конструктор кухонь

client-constructor.png


Задача: Разработать простую и удобную админ-панель для конструктора кухонь.

Все кухонные модули этого конструктора — не просто картинки, а объекты, которые отрисовываются с помощью JavaScript (и затем кешируются). Таким образом можно легко добавить текстуру или новый объект во всех текстурах, не загружая миллиона картинок. Поэтому нам нужна была админка для удобного добавления объектов, которые содержали бы в себе различные плоскости и их настройки.

Клиентскую часть можно посмотреть по ссылке: kuhni-klever.ru/constructor/
Её реализация полностью принадлежит Тюфякину Константину.

К сожалению, я не могу дать ссылку на демонстрацию администраторской части админ-панели, т.к. она связана с серверной частью. Но вы можете прочесть описание работы, посмотреть скриншоты и задать мне вопросы в комментариях или по почте: brusher.designer@gmail.com

Работа началась с того, что я проанализировал ресурсы клиента (у него имелись все объекты нарисованные в векторном формате) и оценил как можно оптимизировать работу менеджера по наполнению базы объектов. Решили сохранять объекты в формате SVG, чтобы автоматизировать процесс переноса изображения объекта в наш цифровой вид, который в дальнейшем используется для текстурирования в самом конструкторе.

Написал парсер («читалку») SVG-объектов. При загрузке объекта в админку он считывал порядок слоев, их названия (в дальнейшем дизайнер мог давать слоям необходимые названия, указывающие что это за объект (столешница = tabletop, стенка с текстурой = texture, дверца = door, ручка = handle и т.д.), а так же указывать тип проекции (верхняя, левая, правая, фронтальная).

В результате вот что делает менеджер для загрузки объекта в базу:

  1. step-1-intro.png Нажимает на кнопку и выбирает SVG-файл (или просто перетаскивает файл в окно браузера).

  2. step-2-sizes.png После загрузки SVG в админку менеджер видит свой объект, указывает размеры. При необходимости может сменить тип объекта (верхний модуль, нижний, подвесной). Интерфейс подсказвыает менеджеру правильно ли он указал размеры с помощью красных точек по углам объекта.

  3. step-3-layers.png Менеджер проверяет правильность порядка слоев и если необходимо то перетаскивает их в нужном порядке. Каждый слой имеет ряд настроек: тип слоя (столешница, стенка, ручка и т.д.), от которого зависит набор настроек. Например, для столешницы это выносы (мы достраиваем столешницу автоматически чтобы она получилась объемной: вверх и в стороны), а для стенок указание проекции текстур.

  4. step-4-preview-with-doors-and-handles.png Прежде чем сохранить объект менеджер убеждается, что объект собран правильно. Если допущена ошибка, то просто правит их и нажимает на кнопку «Собрать» повторно. Если же ошибок нет, то вводит название объекта и цены, которые являются обязательными по условиями магазина. И нажимает «Сохранить».

step-5-welldone.png

При разработке SVG-парсера объектов и админки возникали интересные моменты. Например, конструктор кухонь может без проблем рисовать модули с кривыми спилами столешниц и полок. Особенно хитрая логика плоскостей с кривыми потребовалась при реализации автоматической отрисовки объемной столешницы.

step-4-preview-and-save.png

В проекте были задействованы фреймворки PIXIJS для рисования на Canvas и KnockoutJS для двусторонней связи. Парсинг SVG и вся логика построения объектов самописные.

Если у вас есть проект похожей сложности или вы хотите себе аналогичный конструктор со своими особенностями или в другой нише — пишите: brusher.designer@gmail.com

Комментарии реализованы с помощью Disqus