Руководство пользователя Editor
Видеоурок
Полный видеоурок по редактору — от пустого списка площадок до двух опубликованных схем, хоккейной арены и кабаре-зала, — меньше чем за девять минут:
Введение
Описание
Компонент Editor платформы seatmap.pro позволяет создавать, редактировать и хранить схемы концертных залов, стадионов, клубов, театров и других площадок. Практическое пошаговое руководство по построению реалистичной схемы площадки см. в статье Visual Workshop: How to Build Beautiful Maps.
Возможности редактора схем
- Быстрое рисование рядов мест
- Перемещение и удаление выбранных рядов и мест
- Добавление рядов и мест в созданные секции
- Наклон, искривление и растягивание рядов мест
- Управление столами (включая круглые и эллиптические столы)
- Режим редактирования стола для управления отдельными местами
- Сочетания клавиш для частых действий
- Обнаружение конфликтов имён мест с визуальными предупреждениями
- Управление расстоянием между местами для каждого ряда
- Режимы выравнивания подписей рядов
- Events Hub для управления жизненным циклом событий
- Импорт векторных объектов из SVG
- Привязка векторных объектов ко входным зонам и рядам мест
- Управление ценами
- Экспорт схем в SVG
Технические требования
Для работы с Editor используйте браузер Google Chrome.
Быстрый старт
Добавление площадки
Нажмите Create venue.
В окне Create Venue введите название и адрес площадки. Карта обновится соответствующим образом.
Нажмите Create.
Создание схемы
Нажмите на название нужной площадки в списке слева, а затем нажмите New schema.
Откроется экран редактирования новой схемы.
В правом нижнем углу есть чёрный значок клавиатуры. Наведите на него курсор, чтобы увидеть список полезных сочетаний клавиш. Например,
Ctrl+Zотменяет ваше последнее действие.
Секции и места
Создание секций
Выберите инструмент Seat Rows на панели инструментов.
Удерживайте левую кнопку мыши и перетаскивайте указатель. Вы увидите прямоугольник и количество рядов и мест, которые будут созданы после того, как вы отпустите кнопку мыши.
Если вы начали рисовать секцию, но передумали, уменьшите прямоугольное выделение до состояния, когда количество рядов и мест не отображается. Отпустите кнопку мыши — секция не будет создана.
Если при растягивании прямоугольника вы видите, что нужное количество рядов или мест не помещается на экране, отмените рисование и уменьшите масштаб схемы по необходимости.
После создания секции вы можете перемещать её мышью, переименовывать или применять к ней преобразования (поворот, вертикальный сдвиг и т. д.).
Редактирование секции
Выберите секцию, чтобы увидеть боковую панель. На этой боковой панели вы можете сделать следующее:
- переименовать секцию
- управлять подписями с номерами рядов
- управлять настройками обводки
- выравнивать ряды влево, вправо или по центру
- добавлять дополнительные ряды сверху или снизу
- преобразовывать секцию
- выполнять базовые действия (отразить по вертикали или горизонтали, клонировать или удалить выбранную секцию)
Параметр обводки сектора отключён по умолчанию. Включение этого параметра позволяет управлять размером обведённой области (отступом), размером шрифта и положением названия секции.
Вы также можете применять преобразования к секции. Секцию можно легко повернуть, изогнуть или растянуть — просто введите нужное значение или используйте ползунок справа.
Задание формы площадки и преобразование секции
Форма площадки по умолчанию отключена. Чтобы включить эту настройку, выберите Venue Shape в выпадающем меню. В открывшейся боковой панели нажмите Configure Venue Shape, чтобы настроить её положение, радиус скругления углов и размеры. Эту же кнопку можно увидеть и в других настройках преобразования секции.
После того как форма площадки задана, вернитесь в режим редактирования схемы, выбрав его на панели инструментов. Затем выберите секцию и выберите один из следующих вариантов:
- оставить Venue Shape отключённым (это означает, что вам придётся располагать секцию вручную)
- расположить секцию за пределами формы площадки
- расположить секцию внутри формы площадки
- выровнять секцию по центру относительно границы площадки
Эта настройка экономит ваше время при попытках подогнать размер секции и степень её изгиба, позволяя создавать схемы аккуратно и точно.
Редактирование мест в секции
Чтобы удалять, добавлять и перемещать места внутри секции, переключитесь в режим редактирования секции. Для этого дважды щёлкните по секции или выберите секцию и нажмите Edit Seats.
Чтобы удалить некоторые места из секции, переназначьте их в другую секцию, а затем удалите её. Для этого используйте инструмент Extract Seats.
Вы также можете добавлять места в выбранный ряд с помощью боковой панели.
Чтобы выйти из режима редактирования секции, нажмите крестик рядом с названием секции в правом верхнем углу рабочей области.
Нумерация мест и рядов
Чтобы пронумеровать места, выберите нужные места и нажмите Number Seats на панели инструментов.
При необходимости вы можете сделать это вручную:
- Войдите в режим редактирования секции.
- Выберите место.
- Задайте/измените номер в открывшемся окне.
Чтобы пронумеровать ряды, нажмите инструмент Select Rows и используйте панель нумерации, открывающуюся справа.
В окне Number Seats вы можете задать диапазоны номеров рядов и мест, а также направление нумерации. С помощью флажков укажите, присваивать ли номера рядам, местам или и тем, и другим.
Нажмите Apply Numbering, чтобы подтвердить настройки.
Места, добавленные вручную, автоматически не присваиваются ни одному ряду. Не забудьте пронумеровать их тоже.
Управление столами
Чтобы добавить в схему прямоугольный стол, нажмите Table. Чтобы добавить круглый стол, нажмите Round Table. Новый стол появится в центре. Перетащите его в нужное положение. Используйте панель справа для настройки стола:
- Укажите название стола при необходимости.
- Если вы не хотите, чтобы стол отображался, выберите Display: None. В этом случае видны только места.
- Для прямоугольных столов выберите, сколько стульев должно быть за столом и с какой стороны. Чтобы поставить стул, укажите 1, чтобы убрать стул, укажите 0.
- Для круглых столов задайте общее количество мест, начальную позицию и направление нумерации. Измените размеры стола неравномерно, чтобы создать эллиптическую форму. Подробности см. в разделе Круглые и эллиптические столы.
- Выберите номер, с которого начинать нумерацию мест.
- Выберите направление нумерации (по часовой стрелке или против).
Дважды щёлкните по любому столу, чтобы войти в режим редактирования стола, где можно выбирать отдельные места и помечать их как скрытые, доступные или отмеченные.
На этой же панели можно клонировать или удалить фигуру.
Назначение ценовых зон
Если вы назначите ценовые зоны местам и столам, эта информация не будет потеряна, если позже вы скопируете свою схему для других событий.
Нажмите Pricing Zones. Панель справа показывает:
- количество мест с ценой из общего числа мест
- список доступных цен
Чтобы добавить цену, введите число в поле и нажмите Create. Цена появится в списке ниже. Чтобы изменить или удалить цену, наведите на неё курсор и нажмите появившуюся рядом соответствующую кнопку.
Чтобы назначить ценовую зону:
- Выберите место, ряд, несколько рядов или стол.
- Нажмите нужную цену на панели справа.
- Повторите шаги 1–2 для каждого объекта, которому хотите назначить ценовую зону.
В результате:
- Выбранным объектам назначается соответствующая ценовая зона, и они подсвечиваются тем же цветом, что и цена.
- Количество мест рядом с использованной ценой увеличивается.
- Количество мест с ценой обновляется соответствующим образом.
Прочие объекты площадки
Чтобы отобразить входные зоны площадки, сцены и другие объекты, загрузите подложку, подготовленную в любом векторном редакторе (Adobe Illustrator, Inkscape, Sketch, Figma) в формате SVG. Для этого переключитесь в режим подложки, выбрав вариант Underlay в выпадающем меню.
После загрузки подложки её обычно нужно подогнать под схему.
В режиме подложки перетаскивайте мышь в рабочей области, чтобы сместить подложку относительно нарисованных секций.
Перетаскивайте мышь вверх или вниз, удерживая клавишу Shift, чтобы увеличить или уменьшить размер подложки, подгоняя её под нужный размер.
Если подложку нужно нарисовать, а в схеме уже есть нарисованные секции, выполните следующее:
- Экспортируйте схему в SVG.
- В графическом редакторе нарисуйте необходимые объекты, ориентируясь на расположение мест.
- В графическом редакторе удалите места.
- Экспортируйте созданное в графическом редакторе изображение в SVG.
- Загрузите подложку и при необходимости отрегулируйте её положение.
Как сделать SVG-подложку интерактивной
После того как подложка подогнана под схему, нужно привязать к ней секции, не относящиеся к входным зонам (GA). Выполните следующее:
- Выберите режим Underlay.
- Нажмите стрелку слева, чтобы открыть боковую панель.
- Нажмите нужную секцию (стрелка рядом с её названием сменится на значок карты).
- Нажмите на положение выбранной секции на подложке.
- Нажмите Save (или нажмите значок карты).
Теперь секция привязана к подложке. После того как вы назначите цены хотя бы некоторым местам в секции, вы сможете видеть обводку секции при её выборе.
Если вы по ошибке привязали не ту секцию, повторите шаги 1–5, чтобы это исправить.
Управление областью просмотра
Вы можете вручную управлять границами SVG в Editor, чтобы убедиться, что они включают все необходимые элементы.
Чтобы управлять границами:
- Выберите режим Underlay.
- Нажмите View Area.
- На панели View Area справа выберите Manual, чтобы настроить границы по своему усмотрению.
- Либо перетащите прямоугольник области просмотра, как нужно, либо укажите его положение/размеры на панели.
Если вы выберете вариант Auto на панели, область просмотра автоматически включит все доступные элементы.
Фильтрация секций
Теперь, когда у вас есть множество различных секций, вы можете фильтровать свою схему по названиям секций, чтобы быстро сфокусироваться на нужном объекте.
Для этого:
- Нажмите стрелку слева, чтобы развернуть левую панель.
- Выберите название нужного объекта.
В результате объект будет отцентрирован и сфокусирован.
Сохранение схемы
Убедитесь, что у схемы правильное название, при необходимости измените его на правой панели и нажмите кнопку Save на панели инструментов.
Не забывайте сохранять внесённые вами изменения.
Если вы хотите отменить несохранённые действия, обновите страницу браузера.
Публикация схемы
Изначально схемы находятся в статусе Draft. Это позволяет сохранять промежуточный результат работы.
Когда схема готова и вы готовы назначить цены, вы можете опубликовать её.
Если вы не видите блок для редактирования названия схемы или публикации, вы, вероятно, находитесь в режиме редактирования секции или у вас есть выделенные объекты на схеме. Выйдите из режима редактирования секции или сбросьте текущее выделение, щёлкнув за его пределами.
Управление ценами
Вы можете управлять ценами только после публикации схемы.
Чтобы управлять ценами, нажмите Pricing.
Панель справа показывает:
- количество мест с ценой из общего числа мест
- количество билетов для входных зон (GA)
- общую стоимость (стоимость мест с ценой + стоимость билетов для входных зон GA)
- список доступных цен
Чтобы добавить цену, введите число в поле и нажмите Create. Цена появится в списке ниже. Чтобы изменить или удалить цену, наведите на неё курсор и нажмите появившуюся рядом соответствующую кнопку.
Назначение цен местам по отдельности
Чтобы назначить цену конкретному месту (включая место за столом):
- Нажмите Select Seats.
- Нажмите на место.
- Нажмите нужную цену на панели справа.
В результате:
- Месту назначается соответствующая цена, и оно подсвечивается тем же цветом, что и цена.
- Количество мест рядом с ценой увеличивается, а общая стоимость мест с этой же ценой обновляется соответствующим образом.
- Количество мест с ценой и общая стоимость в верхней части панели обновляются соответствующим образом.
Назначение цен рядам мест
Чтобы назначить цену одному или нескольким рядам мест:
- Нажмите Select Rows.
- Нажмите на один или несколько рядов.
- Нажмите нужную цену на панели справа.
В результате:
- Всем местам в ряду назначается соответствующая цена, и они подсвечиваются тем же цветом, что и цена.
- Количество мест рядом с ценой увеличивается, а общая стоимость мест с этой же ценой обновляется соответствующим образом.
- Количество мест с ценой и общая стоимость в верхней части панели обновляются соответствующим образом.
Назначение цен столам
Чтобы назначить цену столу:
- Нажмите Select Sections.
- Нажмите на нужный стол.
- Выберите нужную цену на панели справа.
- Во всплывающем окне укажите, относится ли цена ко всему столу или к каждому месту.
Чтобы назначить разные цены местам за столом, выберите каждое место отдельно с помощью инструмента Select Seats.
- Нажмите Assign.
В результате:
- Местам за столом назначается соответствующая цена, и они подсвечиваются тем же цветом, что и цена.
- Количество мест рядом с ценой увеличивается, а общая стоимость мест с этой же ценой обновляется соответствующим образом.
- Количество мест с ценой и общая стоимость в верхней части панели обновляются соответствующим образом.
Назначение цен входным зонам (GA)
Чтобы назначить цену входной зоне (GA):
- Нажмите Select Sections.
- Нажмите на нужную входную зону (GA).
- Во всплывающем окне выберите цену и укажите количество билетов (т. е. вместимость секции).
- Нажмите Save.
В результате:
- Входной зоне (GA) назначается соответствующая цена, и она отмечается тем же цветом, что и цена.
- Количество билетов рядом с ценой увеличивается, а общая стоимость билетов с этой же ценой обновляется соответствующим образом.
- Количество билетов GA и общая стоимость в верхней части панели обновляются соответствующим образом.
После того как вы назначили цены входной зоне (GA), вы не можете удалить эту секцию.
Удаление входной зоны (GA) с назначенными ценами
Если вам нужно удалить входную зону (GA) с ценами, сначала отмените назначение цены. Выполните следующее:
-
Выберите режим Pricing.
-
Нажмите Select Sections.
-
Нажмите на нужную входную зону (GA).
-
Во всплывающем окне оставьте поле Select Quantity пустым.
Отмена назначения цен для входной зоны (GA) -
Сохраните изменения.
-
Выберите режим Edit Schema.
-
Удалите входную зону (GA).