Как сделать схему зрительного зала

13.01.202313.02.2023 admin 0 Comments

Быстрая интерактивная схема зала на canvas

Разрабатываем библиотеку для отображения больших интерактивных схем залов на canvas без фреймворков и заставляем хорошо работать в ie и мобильных устройствах. Попутно разбираемся с особенностями работы canvas.

Постановка задачи

Первым делом сформируем требования:

Введение

Не будем тянуть и сразу посмотрим демо, так будет понятнее о чем речь.

В статье я буду вставлять только небольшие участки кода, остальное можно посмотреть на
GitHub

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

Постоянно перебирать все объекты на схеме и сверять их координаты не оптимально. Хотя это и будет происходить достаточно быстро, мы все равно сделаем лучше: построим деревья поиска, разбив карту на сектора.

Кроме оптимизации поиска, постараемся следовать следующим правилам работы с canvas:

requestAnimationFrame

У браузера есть свой таймер отрисовки, и с помощью метода requestAnimationFrame можно попросить браузер отрисовать наш кадр вместе с остальными анимациями, — это позволит избежать двойной работы браузера. Для отмены анимации есть cancelAnimationFrame. Полифил.

Кеширование сложных объектов

Не обязательно постоянно перерисовывать сложные объекты, если они не изменяются. Можно отрисовать их заранее на скрытом canvas, а потом брать оттуда.

Отрисовывать только видимые объекты

Даже если элемент выходит за границы холста, на его отрисовку все равно тратится время.
Особенно это заметно в ie, он честно отрисовывает все, в то время в хроме это оптимизировано, и на это времени тратится намного меньше.

Перерисовывать только изменившиеся объекты

Нет смысла перерисовывать всю сцену, если изменился один элемент.

Меньше текста

Отрисовка текста для canvas тяжелая задача, поэтому нужно избегать большого количества
объектов с текстом. Даже если хочется на каждое место поставить цифру — лучше ограничить отображение этой цифры масштабом: например, показывать цифру только при определенном приближении, когда эта информация будет полезна.

Архитектура

Scheme — основной класс.
View — класс знает canvas, на котором нужно рисовать, и его параметры (у нас их будет два).
SchemeObject — класс объекта схемы знает свое местоположение, как себя отрисовать и как обрабатывать события. Может содержать дополнительные параметры, например, цену.
EventManager — класс обработки и создания событий. При получении события передает его нужному классу.
ScrollManager — класс, отвечающий за скролл схемы.
ZoomManager — класс, отвечающий за зум схемы.
StorageManager — класс, отвечающий за хранение объектов схемы, создание дерева поиска и поиск объектов по координатам.
Polyfill — класс с набором поллифилов для кроссбраузерности.
Tools — класс с различными функциями, типа определения пересечения квадратов.
ImageStorage — класс создания канвасов для хранения изображений

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

Очень хочется, чтобы у схемы были гибкие настройки. Для этого создадим такой нехитрый метод конфигурации объекта:

Теперь можно конфигурировать объекты так:

Это удобно: нужно только создать сеттеры у объектов, которые могут не просто установить значение в свойство, но и свалидировать или изменить значение при необходимости.

Хранение и отображение объектов

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

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

TreeNode — класс узла дерева знает своего родителя, своих детей и координаты квадрата содержащихся в нем объектов:

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

Теперь нам очень просто найти желаемые объекты как по квадрату, так и по координатам. Здесь уже есть поправки на скролл и зум, про них чуть ниже поговорим.

Еще мы можем легко определить, какие объекты лежат в зоне видимости и требуют отрисовки без перебора всех объектов:

Масштабирование

Зум — это просто. У canvas есть метод scale, который трансформирует сетку координат. Но нам нужно не просто зумить, нам нужно зумить в точку, в которой находится курсор или центр.

Для зума в точку нужно всего лишь знать две точки: старый центр зума (при старом масштабе) и новый, и добавить их разницу к смещению схемы:

Но мы же хотим поддерживать тач устройства, поэтому нужно обработать движение двух пальцев и запретить нативный зум:

В айфонах 6 и старше была найдена неприятная особенность: при быстром двойном касании возникал нативный зум с фокусом на канвасе, причем в таком режиме канвас начинал жутко тормозить. На viewport никакой реакции. Лечится так:

Класс, отвечающий за масштабирование: src/managers/ZoomManager.ts

Перемещение схемы

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

Некоторые люди при клике могут немного смещать курсор, это мы должны учесть:

Оптимизация

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

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

Потом я вспомнил правило, которое написано на каждом заборе (и в начале этой статьи) при работе с canvas: не перерисовывать неизменяющиеся части. Действительно, при перемещении и зуме сама схема не изменяется, поэтому нам нужно просто иметь «снимок» схемы в n раз больше начального масштаба и, при перемещении/зуме не рендерить объекты, а просто подставлять нашу картинку, пока разрешение карты не превысило разрешение снимка. А потом уже и оставшиеся реальные объекты будут быстро рисоваться в виду своего количества.

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

Таким вроде бы нехитрым способом мы очень сильно повысили скорость работы схемы.

Спасибо, что дочитали до конца. В процессе работы над схемой я подглядывал в исходники fabricjs и chartjs чтобы меньше велосипедить.

Редакторский дайджест

Присылаем лучшие статьи раз в месяц

Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.

Курсы

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Минуточку внимания

Комментарии 17

Схема зала — это не обязательно сетка, похожая на таблицу «X на Y». Нужна возможность рисовать как схемы с полукруглыми/вытянутыми секторами (театры оперы и балета с бенуарами, бельетажами, балконами), так и полностью круглые схемы (цирки с ареной посередине).

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

Мы в ходе разработки сайтов по продаже билетов bezantrakta.ru поначалу экспериментировали с SVG, сейчас остановились на HTML-схемах.

Как количество пользователей и то, какой у них браузер, влияет на скорость работы?

Хорошая работа. Хотелось бы в следующей статье увидеть сравнительные нагрузочные тесты: canvas vs svg vs html для разных популярных браузеров. Например, для маленьких залов, согласен с предыдущим оратором, наверное проще отрендерить html на сервере?

Почему бы вместо дерева не использовать обычный двумерный массив? А нужная ячейка в таком массиве ищется обычным дилением позиции чего бы то ни было, будь то позиция курсора или другой координаты, на заранее известную константу. При это вы экономите кучу памяти только на том, что вам не нужны разные дополнительные поля для организации дерева. И вы экономите время на поиск нужного квадрата, потому вам не надо перебирать элементы структуры данных; вы находите нужный элемент простым математическим вычислением его позиции.

Если у вас не вся область вмещается на «экран», то добавьте к point.X и point.Y смещение, если масштабирование — то умножьте/разделите на коэффициент масштабирования.

А откуда исходные данные зала: координаты в вашей системе координат и ряды/места в системе координат бухгалтерии зала?

Долго не давала ваша задача мне покоя. Всё казалось, что незначительными изменениями можно существенно ускорить ваше решение.
Демо-стенд я бы долго делал, по этому опишу в кратце суть идеи.

Думаю можно в разы повысить быстродействие если:
1. Кешировать полномасштабную схему на диск в png рядом с scheme-data.js. (В вашем варианте это около 8000 на 8000px).
2. Ничего не перерисовывать при перетаскивании и масштабировании: таскать и масштабировать можно с помощью css (transform и overflow). Даже телефоны с этим быстро справляются
3. Ничего не перерисовывать при ховере. По сути нужно получить координаты Места (об этом ниже) и спозиционировать там html элмент с динамичным содержимым. Позиционирование одного элемента — это быстрая операция.

Как «по-быстрому» найти координаты объекта? По цвету 🙂
Чего проще: снять координаты мыши (или пальца), получить по этим координатам цвет пикселя с канваса.
Для этого рисуем схему на канвасе в полном размере (один раз) каждое Место уникальным цветом (у нас их 16 миллионов) на основе индекса объекта (конвертим int в hex)

Все исходные данные готовы — можно показывать:
1. показываем закешированный канвас юзеру, по которому он кликает и ховерит
2. по координатам клика/ховера получаем цвет из цветовой карты
3. конвертим hex цвет обратно в int (это индекс нашего объекта в массиве)
4. получаем данные из объекта и дальше показываем то-что надо

А вот, данные, которые должны оставаться на канвасе (при клике) или если они «недоступны»/«распроданы» и проч, нужно уже точечно рисовать, как вы и делаете.
Или, если хватит памяти на целевых устройствах, не по канвасу со схемой, а на новом канвасе (сделать верхним синхронным слоем)

При этом что мы выигрываем:
1. В scheme-data.js только сами «места» без лишних (балкон, портер) (и прочих bgcolor и font-size) — это котлеты
2. Дорисовать в фотошопе на сохранённую схему необходимые надписи с использованием дизайнерских шрифтов и прочего творчества — это мухи.
3. Скорость работы одинакова в любом масштабе.
5. Фактически мы не ограничены количеством в 5-6 тыщ. Мне кажется, что и карты размером в 16 000px будут нормально работать, а это зал на 25 000 мест — стадион.

Теоретически…
В общем я излился 🙂 Возможно, я где-то ошибаюсь и что-то не учитываю.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Источник

Разработка схем концертных залов, ночных клубов и ресторанов для онлайн продажи билетов

Любая современная система продажи билетов должна предоставлять своим клиентам возможность использовать схемы концертных залов. TicketTool позволяет организовать продажи билетов как на мероприятие без схемы зала так и на те мероприятия где без схемы зала не обойтись. Более того, возможен вариант совмещения, то есть использования схемы, а также продажа части билетов без мест. Такой вариант часто используется в ночных клубах для продажи билетов за столиками и на танцпол.

Для каких типов мероприятий следует использовать схемы залов

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

Использование схемы концертного зала позволяет покупателю выбрать лучшие из доступных на данный момент мест, в соответствии с его финансовыми возможностями. Это не только удобно, но и позволяет покупателю понять масштаб мероприятия. Для организатора плюсы также очевидны. Благодаря размещению схемы зала он избегает лишних обращений в службу поддержки с просьбой подобрать лучшие места и объяснить на словах или в письме где зритель в итоге окажется и какие еще есть варианты размещения. Есть страны в которых из-за некоторых культурных особенностей и сложившихся в развлекательной индустрии традиций принято продавать билеты на концерты с одной ценовой категорией, кажется что в таком случае схема зала не особо нужна, так как зритель может выбрать любое свободное место, но даже при таком подходе многие организаторы пользуются схемой для продажи билетов. Это обусловлено тем, что схема зала позволяет упорядочить процесс размещения зрителей и вовремя начать концерт, так как зрители знают какие места им следует занять и не перемещаются хаотично по залу в поисках лучших мест.

Как заказать изготовление схемы зала

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

Сколько может занять изготовление схемы концертного зала

Как правило, времени на изготовление требуется немного. Средний зал размером 500-600 мест, со стандартным размещением мы изготавливаем в течении одного, максимум двух рабочих дней с момента подачи заявки в службу поддержки. Если речь идет об изготовлении большого зала или стадиона, то это процесс может занять до одной рабочей недели. Самые неудобные для изготовления залы это залы с круговым размещением мест, например цирки и амфитеатры, на изготовление таких залов тоже может потребоваться дополнительное время.

Как самостоятельно изготовить схему зала

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

С чего начать изготовление схемы зала

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

Если вы уверены что со схемой все в порядке, вы можете зарегистрироваться в нашей системе продажи билетов, если не сделали этого ранее, и перейти в раздел “Залы” где найдете список площадок, которые вы уже использовали, а также сможете добавить новый зал, нажав на ссылку “Добавить зал” размещенную над списком. Форма добавления зала выглядит следующим образом:

Довольно часто нас спрашивают зачем в этой форме нужно указывать географические координаты и где их можно получить. Ответ довольно прост, координаты нужны для точного указание местарасположения зала на карте, ссылка на которую есть на странице продажи билетов, это довольно часто помогает покупателю билетов при вводе данных в автомобильный навигатор или смартфон для прокладки маршрута. Выяснить координаты можно на одном из специальных сервисов, которые позволяют ввести адрес любого места и получить широту и долготу. Вот ссылка на один из таких сервисов https://www.latlong.net/

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

После этого будет открыт редактор схемы зала и начнется самое интересное, а именно разработка новой схемы концертного зала.

Мы расскажем о процессе изготовления схемы зала на реальном примере. Это будет зал “Robert Krieps Hall”, расположенный по адресу 28, rue Münster L-2160 Luxembourg, запрос на изготовление этого зала поступил к нам в день написание статьи от клиента. Клиент предоставил схему зала в виде изображения которое вы можете увидеть ниже.

Зал относительно небольшой, имеет всего 20 рядов и горизонтальное расположение рядов. С точки зрения изготовления он очень простой, нам даже придется немного усложнить себе задачу, чтобы раскрыть все возможности нашего редактора концертных залов.

Начало работы с редактором залов

Окно редактора залов выглядит как показано на скриншоте снизу.

Как видите, слева находится рабочая область, а справа область с вкладками для управления процессом. Изучать каждую из вкладок будем по мере их использования в процессе изготовления зала. Начнем с вкладки с настройками размера схемы, эта вкладка показана на скриншоте выше. Как видите размер схемы мы установили по ширине 780 пикселей, а по высоте 880. Это примерно соответствует размеру изображения со схемой. Также на этой вкладке можно задать цвет фона рабочей области, такая возможность предусмотрена на тот случай если на рабочей области нужно будет разместить иконки, того же цвета что и фон и они сольются с фоном. В таком случае можно на время разработки сменить фон. Последняя панель на активной вкладке управления позволяет задавать цвет элементов размещаемых на схеме, а частности иконок, а так же цвет прямоугольников или кругов, которыми можно обозначить на схеме сцену или столики при изготовлении схемы ресторана. После установки размеров схемы перейдем к размещению мест.

Размещение мест на схеме зала

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

Сначала разберем панель. В самом низу находится управление размером места. По умолчанию радиус круга который символизирует собой место в концертном зале установлен в 10 пикселей, соответственно диаметр этого места будет 20 пикселей. Мы рекомендуем не изменять это значение, опытным путем мы пришли к тому, что это идеальный размер места, который мы используем всегда. Как мы уже писали выше есть четыре способа размещения мест, а именно:

На скриншоте сверху слева направо показаны все четыре способа добавления мест на схему. Места или другие элементы выделенные красным являются активными, их можно перемещать по схеме с помощью мышки или клавиатуры используя клавиши со стрелками. При перемещении при помощи клавиатуры смещение происходит на один пиксель в нужную сторону, а при удержании клавиши “Shift” сразу на 10 пикселей.

Выделение элементов на схеме

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

Удаление мест и любых других элементов

Для удаления элементов их сперва нужно выделить, то есть сделать так, чтобы они были окрашены в красный цвет. Этого можно достичь с помощью инструмента выделения, либо просто нажимая на нужный элемент. Для выделения нескольких элементов нужно удерживать клавишу “Shift”. После выделения элементов которые нужно удалить следует нажать на кнопку с иконкой в виде мусорного ведра, она расположена внизу панели перед кнопкой сохранения схемы зала. После подтверждения операции удаления все активные элементы будут удалены.

После того, как мы удалили все места и столики которые размещали для демонстрации вернемся к разработке зала.

Для начала поместим на схему 20 рядов по 17 мест в каждом. Как видно на схеме предоставленной клиентом нашей билетной системы начиная с 9 ряда мест в каждом ряду будет меньше чем 17, но их мы выделим и удалим позже. Проще сделать так, чем изначально размещать в каждом ряду нужное количество мест. Подготовим ненужные места к удалению выделив их.

После нажатия на кнопку удаления красные места исчезнут, и мест на схеме станет ровно столько, сколько нам нужно.

Нумерация рядов и мест в зале

Первым шагом после размещения мест должна быть нумерация рядов. Для этого следует перейти на пятую сверху вкладку и приступить к нумерации рядов. На вкладке есть одно текстовое поле, значение которое есть в этом поле присваивается рядам при нажатии на место. Но это не единственный способ нумерации, нумеровать ряды можно не только по нажимая на одно место, но и настроив нумерацию при совпадении координат по горизонтали или вертикали. Грубо говоря, мы жмем на первое место в ряду, а система присваивает номер сразу всему ряду. Таким образом нумерация 20 рядов делается ровно в 20 кликов. Значение в поле с номером ряда также не нужно менять вручную, потому что настроено автоматическое наращивание значения на единицу. То есть после клика на место из ряда 1, значение в поле меняется на 2, и так далее. Кстати система умеет работать не только с числами но и с буквами, если бы номера рядов шли по алфавиту начинаясь с буквы А, мы бы точно так же завершили работу в 20 кликов. После нумерации всех рядов наша схемы выглядит как показано на картинке ниже.

На каждом месте обозначен номер ряда к которому оно принадлежит.

После завершения нумерации рядов следует перейти к присвоению номеров местам. Для этого нужно перейти на шестую вкладку сверху, номера рядов при этом больше не будут отображаться на схеме, так как на шестой вкладке отображаются номера мест. К счастью, для указания номеров мест нам тоже не придется делать несколько сотен кликов, мы можем воспользоваться тем что уже присвоили номера рядам и нумеровать места автоматически, целыми рядами. Именно поэтому важно соблюдать такую последовательность действий, сначала нумеровать ряды, а потом места. Нумерация рядов также завершена за 20 кликов благодаря тому, что наш редактор схем залов может расставлять номера мест автоматически слева направо, наращивая значение в поле на единицу или выбирая следующую букву в алфавите. Вот что мы получим после нумерации мест.

Присвоение зон в концертном зале

После присвоения рядов и мест можем указать к каким зонам относятся те или иные места. Сразу оговоримся что под зоной мы понимаем места в зале, сгруппированные по расположению. В небольших залах обычно есть только “Партер” и “Балкон”. В крупных залах может быть несколько балконов и множество лож. В данном случае есть всего одна зона, мы ее назовем “Parter” и присвоим ей все места. Для этого перейдем на восьмую сверху вкладку, с иконкой в виде забора. На этой вкладке есть возможность добавить зоны, при этом присваивая им цвета. Цвета нужны для того, чтобы визуально различать зоны на схеме. После создания зоны “Parter” и присвоения ей зеленого цвета выберем в панели управления присвоением мест опцию “All” которая присвоит зону сразу всем местам. Из названий других опций понятно что у нас есть возможность присваивать зоны по клику сразу всему ряду или местам имеющим такие же координаты как то место на которое мы нажимаем по горизонтали или вертикали.

Присвоение цен местам на схеме зала

Для присвоения цен следует перейти на вкладку со значком доллара. Установка цен работает аналогично установке зон. Мы добавляем название, указываем цену и цвет, которым места отнесенный к ценовой категории будут отображаться. Для примера добавим три ценовые зоны и установим цены по рядам.

Добавление надписей на схему

На каждой схеме следует нумеровать ряды чтобы покупатель билетов мог лучше ориентироваться на схеме, а позже и в самом зале. Также не лишним будет надписями показывать зоны к которым принадлежат места. Для этого наш редактор имеет все необходимые инструменты. Вкладка для работы с текстами — четвертая сверху и имеет иконку с буквой “T”. Перейдя на эту вкладку мы видим что у нас есть возможность выбрать размер и шрифт текста. Остается только ввести сам текст и нажать на единственную на вкладке кнопку чтобы текст появился на рабочей панели. Для примера мы разместили слово “Parter” над первым рядом.

После этого мы можем разместить на схеме номера рядов. Для этого нам не нужно будет добавлять текст и перемещать его вручную, все намного проще. Номера рядов можно добавлять по нажатию на место. Например, если нажать на первое место слева в каком-то из рядов, то в рабочей области появится надпись с номером этого ряда. Нам нужно выбрать в самом низу на панели управления где должен появится этот текст, слева, справа, снизу или сверху от того места на которое мы нажмем. В данном случае нумерация мест в ряду заключается в 40 кликах(потому что на схеме 20 рядов), на первом и последнем месте каждого ряда, справа или слева от этих мест появится нумерация. Ниже показан результат работы по добавлению текстов на схему нашего концертного зала.

Добавление сцены на схему концертного зала

Для того чтобы обозначить где расположена сцена следует перейти на седьмую сверху вкладку, на которой изображена иконка с квадратом. Тут можно указать размеры прямоугольника, который будет добавлен на схему, а также его координаты. Размер этого прямоугольника можно изменять потащив за правый нижний угол, а координаты с помощью клавиатуры или перемещая его мышкой. Поместим такой прямоугольник на ширину всего первого ряда. Напомним, что цвет этого прямоугольника задается на вкладке общих настроек, которая была описана в этой статье самой первой. Также, следует упомянуть, что добавленный нами прямоугольник может послужить нам в качестве кнопки для выбора мест в какой-то ценовой категории. Например для танцпола, для этого нужно было бы перейти на вкладку, указать категорию цен и нажать на этом прямоугольнике для установки цены.

Добавление иконок на схему зала

Последним шагом при разработке схемы зала станет добавление иконок. Для этого мы перейдем на третью вкладку сверху и среди множества иконок, которые могут пригодиться при изготовлении схемы зала, начиная от иконки указывающей на выход из помещения до иконки показывающей WIFI точки доступа выбираем необходимые. Для того, чтобы сделать схему немного более информативной поместим поверх прямоугольника показывающего сцену иконку с микрофоном, а также обозначим последние два места в двадцатом ряду как места для людей передвигающихся на колясках. Кроме того, напротив первого и последнего ряда поместим иконки указывающие на наличие выходов. Как мы указывали выше цвет иконок можно менять. Также есть возможность выбрать один из трех размеров иконок. В данном примере присутствуют самые маленькие и средние иконки, большие не пригодились, но могут быть полезны если нужно показать места для парковки или другие крупные элементы.

Схема зала которую мы сделали в итоге будет выглядеть как показано на рисунке ниже.

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

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

Остались вопросы? Звоните по номеру телефона: