Андрей Коваль

ТЗ на расстановщик мебели

**Кратко

Необходимо двигать и вращать картинки в определенной области. Картинки
чувствуют края друг друга и "толкаются". Картинки получать через XML.

** Исходные данные

Холст (канва)
Инструментарий (кнопки)
Набор отобранных товаров (мебели) из корзины покупателя. У каждого товара есть:
чертежное растровое изображение “вид сверху”
числовые габариты прямоугольника (длина, ширина в миллиметрах), в который вписан товар
тип товара (стол, шкаф, стул и т.д. – около 15 типов)

** Задача пользователя

При начале работы задать размеры помещения в сантиметрах
На появившемся холсте с размерной сеткой нарисовать контур помещения в виде линий
Из перечня отобранных товаров вытащить на холст нужные в виде картинок и расставить их по помещению
Сохранить результат в виде массива координат на сервер (скачивать не нужно) для последующей отправки менеджеру. Расстановщик должен суметь восстановить картинку по заданному массиву.

** Техническое описание

При генерации ролик получает среди входных параметров адрес для запроса XML-файла со списком отобранной мебели. При запросе используются текущие coockies, сохраненные в браузере, чтобы не потерять сессию посетителя.

Примерный формат XML

<objects>
<item id=”123” type=”table” plan_img=”/files/catalog/plans/a1b2c3.png” photo_img=”/files/catalog/3d/a1b2c3.jpg” width=”1500” height=”900” title=”Стол для персонала \”Удачный\””></item>
</objects>

где
id – числовое значение ID в базе
type – строковое представление типа мебели
plan_img – адрес картинки с видом сверху относительно корня хоста
photo_img – адрес фотографии товара относительно корня хоста
title – название товара
width – размер товара в мм (по ширине картинки)
height – размер товара в мм (по высоте картинки)

Отображение

Пользователя отображается диалог с запросом размеров помещения в см. После ввода создается холст с пользовательским размером + 10%. На холсте отображена полутоновая сетка из линий, расположенных на равном расстоянии друг от друга. Начинается сетка не от края холста, а без учета припуска 10%, т.е. остаются поля на всякий случай. Линии сетки располагаются на расстоянии 1 м (более яркие) и 0.5 м (менее яркие) друг от друга в масштабе помещения.

Сбоку от холста расположен прокручиваемый список с фотографиями и названиями мебели из той XML, что получена при загрузке. Эту мебель можно перетащить на холст или кликнуть для добавления на холст, если перетаскивание сложно в реализации. На холст вставляется уже вид сверху от той мебели, которую выбрали. При этом картинка вида сверху масштабируется исходя из размеров width и height и масштаба холста. При добавлении товар не исчезает из списка доступных сбоку.

Вставленный объект можно:
Вращать. Или на произвольный угол, или на какие-то кратные углы, но не менее, чем на 15 градусов (90/6).
Таскать мышкой. При перетаскивании он “летит” над холстом, но при отпускании приземляется так, чтобы не пересекаться с другими объектами и стенами помещения. Т.е. если его ставят на частично занятый участок, то он съезжает с него на ближайшее подходящее свободное пространство. Объекты считаем прямоугольными. При этом нужно, конечно же, учитывать угол наклона объекта.
Убрать с холста, перетащив за его пределы или перетащив в область “корзины” (по выбору). Можно рассмотреть другие удобные решения. Как при добавлении, так и при удалении с холста объект остается в доступных объектах сбоку.

После морального удовлетворения от строительства, пользователь может нажать на кнопку “сохранить”. Расстановщик отправляет на сервер результат работы (по адресу, получаемому в параметрах, массив передается в post-переменной “planishing” в виде сериализированной строки. Принцип сериализации не важен – отдельно от планировщика массив не обрабатывается) и получает взамен ссылку для перенаправления (можно в JSON-переменной url или простым текстом). Перенаправляет пользователя по ссылке.