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

Как подключить интерактивную схему мест к событию Как подключить интерактивную схему мест к событию

В 2020 году мы обновили интерфейс управления событием, а также ценами и скидками. О том, как выглядит и работает новый интерфейс читайте в статье Новый интерфейс редактирования билетов и скидок.

Схемы зала в новом интерфейсе недоступны, поэтому если функционала не хватает и вы хотите создать событие со схемой зала, то заполните эту форму. В обращении укажите ссылку на мероприятие и что хотите добавить схему рассадки. Спустя некоторое время, интерфейс обновится, а в разделе «Билеты и цены» вы увидите кнопку «Схема зала».

Не хочу читать, хочу посмотреть видео!

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

Если вы хотите создать новое событие со схемой мест, зайдите в ваш личный кабинет и нажмите «Создать событие». Дойдите до третьего шага «Настройка участия».

Если вы хотите подключить схему мест к уже существующему событию, нажмите на ссылку «Редактировать» на странице события и перейдите к шагу «Настройка участия».

На шаге «Настройка участия» нажмите на кнопку «Добавить интерактивную схему мест» внизу формы основной части страницы.

Вы увидите Редактор схемы мест.

Добавьте места на схему

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

При перемещении вы увидите создаваемые места, для удобства размер добавляемой группы мест обозначен в виде «Высота Х Ширина» рядом с курсором.

Отпустите левую кнопку мыши, чтобы закончить создавать места.

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

Нажмите кнопку «Изменить места» справа сверху.

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

Выделяйте те места, которые вы хотите переместить или удалить.

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

Чтобы удалить места, просто нажмите клавищу Delete или Backspace.

Пример

У нас имеются только что созданные места — зал размером 15 мест в высоту и 51 в ширину. Допустим у нескольких задних рядов нет по 4 боковых места, между местами нужно сделать проходы и отодвинуть первые ряды от остальных.

Назначайте местам стоимость

Чтобы назначить местам стоимость, выделите их, затем нажмите на кнопку «Задать тип билета». В выпадающем меню выберите «Добавить категорию».

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

После добавления категории еще раз нажмите «Задать тип билета». Теперь в выпадающем списке появилась только что созданная категория. Нажмите на нее и она назначится выделенным местам.

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

Цвета для новых категорий выбираются автоматически.

Чтобы изменить стоимость категории мест, выделите места, нажмите «Задать тип билета», и нажмите на карандашик напротив нужной категории мест.

Чтобы удалить категорию мест, нажмите в том же месте на крестик.

Пронумеруйте места

Чтобы пронумеровать места, выделите все места или часть, которую нужно пронумеровать.

Нажмите «Пронумеровать места» на панели сверху, в появившемся окне выберите способ нумерации и начальные значения, нажмите «Пронумеровать».

Делайте все так, как вам удобно

Масштаб

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

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

Положение холста

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

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

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

Источник

Онлайн-система построения схем залов и площадок

Предлагаем программный модуль Онлайн-система построения схем залов и площадок Театрон.Лайт.Схема в виде веб-приложения, подключаемого по API к сайту с продажей билетов. Стоимость онлайн-системы:
Лицензия на 1 сервер 12 500 руб. + настройка 20 чел.-часов = 30 000 руб.
Свяжитесь с нами по e-mail: support@bitronica.com

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

Создать площадку или зала несложно. Достаточно взять простой графический редактор или бесплатный SVG-редактор и нарисовать схематично зал (без мест). Затем разместить созданный зал на задний фон схемы. Поверх фона наложить реальные места или сектора с возможностью бронирования и продажи. Схема зала готова!

Но как продавать места в созданном зале если у вас уже есть сайт и своя система продаж.

Предлагаем решение: Продажи мест в зале как в составе программного комплекса, так и поставка только модуля «Схема мест». Подключение к модулю производится через API с использованием формата данных JSON.

Вы можете использовать свой сайт продаж, а к схемам залов подключаться по API: запрос занятых и доступных мест, передача выбранных мест

Для получения дополнительной информации напишите или позвоните нам.

К созданному залу вы можете создать места / ряды / секторы или назначить свои наименования элементов схемы. Далее вы сможете продавать созданные места.

Для создания схем мест предусмотрено:

Функциональные возможности создаваемой схемы мест:

Предлагаем услуги

Создание схемы залов online

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

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

На заказ создаем залы и площадки. Для интерактивного режима построения предлагаем рисование на canvas или построение на основе DIV. В любом случае производится послойное построение интерактивных схем с программированием на JavaScript. Далее каждому месту задается уникальный код и этот код передается в систему бронирования и продаж билетов.

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

Бронирование билетов в концертные залы, стадионы, рестораны, клубы.

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

Как связаться с разработчиками программ по схемам залов и бронированию мест

Позвоните по тел. +7 (473) 229-55-18 или заполните Форму заказа и поставьте нам задачу на автоматизацию продажи билетов на мероприятия.

Готовые решения: от расчета до портала

Система управления: товары, заказы и онлайн-магазины

Билетный портал (транспорт, театр, спорт)

Направления

Услуги

О нас

Контакты

Время работы:
понедельник — пятница,
с 09:30 до 18:30
Выходной: суббота, воскресенье.

Источник

Быстрая интерактивная схема зала на 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 чтобы меньше велосипедить.

Ой, у вас баннер убежал!

Читают сейчас

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

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

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

Похожие публикации

Удаление узлов из красно-чёрного дерева

Почему единственный вид деревьев не победил все остальные?

Анатомия KD-Деревьев

Средняя зарплата в IT

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 мест — стадион.

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

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

Источник