1. База знаний
2. Редактор площадок

Руководство пользователя 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 на панели инструментов.

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

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

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

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

Редактирование секции

Выберите секцию, чтобы увидеть боковую панель. На этой боковой панели вы можете сделать следующее:

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

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

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

Задание формы площадки и преобразование секции

Включите Venue Shape на переключателе слоёв холста. Откройте Configure Venue Shape, чтобы задать положение, размеры и Corner Style: Round или Chamfer. Для Round задайте радиус углов, для Chamfer — размер фаски.

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

• оставить Venue Shape отключённым (это означает, что вам придётся располагать секцию вручную)
• расположить секцию за пределами формы площадки
• расположить секцию внутри формы площадки
• выровнять секцию по центру относительно границы площадки

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

Расхождение задних рядов

Задайте Back row dispersion от 0 до 100 на панели формы площадки; начальное значение — 100. Секции, следующие форме, наследуют это значение. Для отдельной секции снимите Use venue shape setting на панели преобразования и настройте ползунок. Изменения сохраняются со схемой и поддерживают отмену.

Распознавание формы по местам

Если форма площадки ещё не задана, выберите Recognize from Seats. Подходящие секции можно вписать в форму со скруглениями или фасками. Каждое преобразованное место смещается не более чем на один пиксель; столы и секции вне найденной формы остаются без изменений. Всё распознавание отменяется одним действием. Проверьте результат перед сохранением, особенно оценку открытой стороны. Повёрнутые или неподдерживаемые секции могут помешать распознаванию; редактор сообщает, если форма не найдена.

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

Редактирование мест в секции

Чтобы удалять, добавлять и перемещать места внутри секции, переключитесь в режим редактирования секции. Для этого дважды щёлкните по секции или выберите секцию и нажмите Edit Seats.

Чтобы удалить некоторые места из секции, переназначьте их в другую секцию, а затем удалите её. Для этого используйте инструмент Extract Seats.

Вы также можете добавлять места в выбранный ряд с помощью боковой панели.

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

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

Чтобы пронумеровать места, выберите нужные места и нажмите Number Seats на панели инструментов.

При необходимости вы можете сделать это вручную:

1. Войдите в режим редактирования секции.
2. Выберите место.
3. Задайте/измените номер в открывшемся окне.

Чтобы пронумеровать ряды, нажмите инструмент Select Rows и используйте панель нумерации, открывающуюся справа.

В окне Number Seats вы можете задать диапазоны номеров рядов и мест, а также направление нумерации. С помощью флажков укажите, присваивать ли номера рядам, местам или и тем, и другим.

Нажмите Apply Numbering, чтобы подтвердить настройки.

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

Управление столами

Чтобы добавить в схему прямоугольный стол, нажмите Table. Чтобы добавить круглый стол, нажмите Round Table. Новый стол появится в центре. Перетащите его в нужное положение. Используйте панель справа для настройки стола:

• Укажите название стола при необходимости.
• Если вы не хотите, чтобы стол отображался, выберите Display: None. В этом случае видны только места.
• Для прямоугольных столов выберите, сколько стульев должно быть за столом и с какой стороны. Чтобы поставить стул, укажите 1, чтобы убрать стул, укажите 0.
• Для круглых столов задайте общее количество мест, начальную позицию и направление нумерации. Измените размеры стола неравномерно, чтобы создать эллиптическую форму. Подробности см. в разделе Круглые и эллиптические столы.
• Выберите номер, с которого начинать нумерацию мест.
• Выберите направление нумерации (по часовой стрелке или против).

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

На этой же панели можно клонировать или удалить фигуру.

Назначение ценовых зон

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

Нажмите Pricing Zones. Панель справа показывает:

• количество мест с ценой из общего числа мест
• список доступных цен

Чтобы добавить цену, введите число в поле и нажмите Create. Цена появится в списке ниже. Чтобы изменить или удалить цену, наведите на неё курсор и нажмите появившуюся рядом соответствующую кнопку.

Чтобы назначить ценовую зону:

1. Выберите место, ряд, несколько рядов или стол.
2. Нажмите нужную цену на панели справа.
3. Повторите шаги 1–2 для каждого объекта, которому хотите назначить ценовую зону.

В результате:

• Выбранным объектам назначается соответствующая ценовая зона, и они подсвечиваются тем же цветом, что и цена.
• Количество мест рядом с использованной ценой увеличивается.
• Количество мест с ценой обновляется соответствующим образом.

Прочие объекты площадки

Лимит импорта SVG — 6 МиБ (6 291 456 байт). Панель показывает лимит до выбора файла, а сообщение об ошибке содержит размер выбранного файла.

Чтобы отобразить входные зоны площадки, сцены и другие объекты, загрузите подложку, подготовленную в любом векторном редакторе (Adobe Illustrator, Inkscape, Sketch, Figma) в формате SVG. Для этого переключитесь в режим подложки, выбрав вариант Underlay в выпадающем меню.

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

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

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

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

1. Экспортируйте схему в SVG.
2. В графическом редакторе нарисуйте необходимые объекты, ориентируясь на расположение мест.
3. В графическом редакторе удалите места.
4. Экспортируйте созданное в графическом редакторе изображение в SVG.
5. Загрузите подложку и при необходимости отрегулируйте её положение.

Как сделать SVG-подложку интерактивной

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

1. Выберите режим Underlay.
2. Нажмите стрелку слева, чтобы открыть боковую панель.
3. Нажмите нужную секцию (стрелка рядом с её названием сменится на значок карты).
4. Нажмите на положение выбранной секции на подложке.
5. Нажмите Save (или нажмите значок карты).

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

Если вы по ошибке привязали не ту секцию, повторите шаги 1–5, чтобы это исправить.

Управление областью просмотра

Вы можете вручную управлять границами SVG в Editor, чтобы убедиться, что они включают все необходимые элементы.

Чтобы управлять границами:

1. Выберите режим Underlay.
2. Нажмите View Area.
3. На панели View Area справа выберите Manual, чтобы настроить границы по своему усмотрению.
4. Либо перетащите прямоугольник области просмотра, как нужно, либо укажите его положение/размеры на панели.

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

Фильтрация секций

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

Для этого:

1. Нажмите стрелку слева, чтобы развернуть левую панель.
2. Выберите название нужного объекта.

В результате объект будет отцентрирован и сфокусирован.

Сохранение схемы

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

Не забывайте сохранять внесённые вами изменения.

Если вы хотите отменить несохранённые действия, обновите страницу браузера.

Публикация схемы

Изначально схемы находятся в статусе Draft. Это позволяет сохранять промежуточный результат работы.

Когда схема готова и вы готовы назначить цены, вы можете опубликовать её.

Если вы не видите блок для редактирования названия схемы или публикации, вы, вероятно, находитесь в режиме редактирования секции или у вас есть выделенные объекты на схеме. Выйдите из режима редактирования секции или сбросьте текущее выделение, щёлкнув за его пределами.

Управление ценами

Вы можете управлять ценами только после публикации схемы.

Чтобы управлять ценами, нажмите Pricing.

Панель справа показывает:

• количество мест с ценой из общего числа мест
• количество билетов для входных зон (GA)
• общую стоимость (стоимость мест с ценой + стоимость билетов для входных зон GA)
• список доступных цен

Чтобы добавить цену, введите число в поле и нажмите Create. Цена появится в списке ниже. Чтобы изменить или удалить цену, наведите на неё курсор и нажмите появившуюся рядом соответствующую кнопку.

Работа с несколькими событиями

Вверху панели цен находится блок Событие с тем событием, для которого вы назначаете цены: название, точка статуса (Черновик, Опубликовано или В архиве), дата события, счётчик мест с ценой из общего числа и полоса покрытия ценами. Счётчик и полоса учитывают и места, и входные зоны (GA).

В блоке доступны такие действия:

• Все события открывает колонку событий справа от холста. Она появляется только если у схемы больше одного события.
• Кнопка с карандашом редактирует событие, не выходя из режима цен.
• Кнопка воспроизведения открывает модальное окно предпросмотра события.
• Кнопка внешней ссылки открывает событие в Playground в новой вкладке браузера.

В колонке событий можно:

• искать события по названию или внешнему идентификатору;
• фильтровать список по значениям Все, Без назначений и С назначениями, где назначение означает, что хотя бы одному месту или входной зоне уже задана цена;
• видеть статус, дату, счётчик мест с ценой и полосу покрытия для каждого события;
• перемещаться по результатам стрелками вверх и вниз и выбирать событие клавишей Enter; Escape очищает поиск.

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

Чтобы скрыть от ваших пользователей колонку событий и вкладки событий в модальном окне предпросмотра, добавьте ?hidden=events к URL редактора. См. Управление видимостью элементов интерфейса.

Назначение цен местам по отдельности

Чтобы назначить цену конкретному месту (включая место за столом):

1. Нажмите Select Seats.
2. Нажмите на место.
3. Нажмите нужную цену на панели справа.

В результате:

• Месту назначается соответствующая цена, и оно подсвечивается тем же цветом, что и цена.
• Количество мест рядом с ценой увеличивается, а общая стоимость мест с этой же ценой обновляется соответствующим образом.
• Количество мест с ценой и общая стоимость в верхней части панели обновляются соответствующим образом.

Назначение цен рядам мест

Чтобы назначить цену одному или нескольким рядам мест:

1. Нажмите Select Rows.
2. Нажмите на один или несколько рядов.
3. Нажмите нужную цену на панели справа.

В результате:

• Всем местам в ряду назначается соответствующая цена, и они подсвечиваются тем же цветом, что и цена.
• Количество мест рядом с ценой увеличивается, а общая стоимость мест с этой же ценой обновляется соответствующим образом.
• Количество мест с ценой и общая стоимость в верхней части панели обновляются соответствующим образом.

Назначение цен столам

Чтобы назначить цену столу:

1. Нажмите Select Sections.
2. Нажмите на нужный стол.
3. Выберите нужную цену на панели справа.
4. Во всплывающем окне укажите, относится ли цена ко всему столу или к каждому месту.

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

5. Нажмите Assign.

В результате:

• Местам за столом назначается соответствующая цена, и они подсвечиваются тем же цветом, что и цена.
• Количество мест рядом с ценой увеличивается, а общая стоимость мест с этой же ценой обновляется соответствующим образом.
• Количество мест с ценой и общая стоимость в верхней части панели обновляются соответствующим образом.

Назначение цен входным зонам (GA)

Чтобы назначить цену входной зоне (GA):

1. Нажмите Select Sections.
2. Нажмите на нужную входную зону (GA).
3. Во всплывающем окне выберите цену и укажите количество билетов (т. е. вместимость секции).
4. Нажмите Save.

В результате:

• Входной зоне (GA) назначается соответствующая цена, и она отмечается тем же цветом, что и цена.
• Количество билетов рядом с ценой увеличивается, а общая стоимость билетов с этой же ценой обновляется соответствующим образом.
• Количество билетов GA и общая стоимость в верхней части панели обновляются соответствующим образом.

После того как вы назначили цены входной зоне (GA), вы не можете удалить эту секцию.

Удаление входной зоны (GA) с назначенными ценами

Если вам нужно удалить входную зону (GA) с ценами, сначала отмените назначение цены. Выполните следующее:

1. Выберите режим Pricing.

2. Нажмите Select Sections.

3. Нажмите на нужную входную зону (GA).

4. Во всплывающем окне оставьте поле Select Quantity пустым.

   

5. Сохраните изменения.

6. Выберите режим Edit Schema.

7. Удалите входную зону (GA).

Рисование криволинейных объектов

Используйте инструмент полигонов на слое Artwork. Щелчок создаёт прямой край; нажатие, перетаскивание и отпускание — дугу. Смена инструмента отменяет незавершённый рисунок. Отмена удаляет завершённый объект.

Доступные цвета

Откройте профиль и включите Accessibility → Color-blind friendly. Настройка меняет цвета взаимодействия редактора и сохраняется в этом браузере. По умолчанию она выключена; изменение может потребовать перезагрузки, поэтому сначала сохраните схему.