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

Question

[AlexandrMa]

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

Надо, чтобы работало как на компе, так и на смартфоне.

Пока что сделал на канве. Смущает, что масштабирование тупо не работает, а люди будут увеличивать, чтобы выбрать место.

Также сделал дивами, тоже фигня какая-то вышла.

Свгшками может как-то... Графика все же векторная.

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

Каким методом наиболее правильно сделать подобное? Интересует именно идея, реализовать сам смогу.

Comments

[Василий Банников]

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

[AlexandrMa]

Василий Банников, На одном сделано на канве, причем удивительно, масштабирование там работает...
А на втором path и видимо комбинация js + svg замудреная.

[AlexandrMa]

А не, не работает. Там масштабирование работает в самом модуле, но не при увеличении масштаба страницы.

[Василий Банников]

AlexandrMa, ну я однажды пытался на svg+js сделать интерактивный просмотрщик для диаграммы (чистый d3 мне не подошёл), так что могу только пожелать удачи, успехов и ментального здоровья.

Возможно, проще и дешевле будет купить готовый компонент.

[AlexandrMa]

Спасибо)

[Viktor T2]

https://github.com/micah-williamson/d3-seating-chart
https://github.com/thanhbinhtruong/SeatMap

Answer 1

[VoidVolker]

Каким методом наиболее правильно сделать подобное? Интересует именно идея, реализовать сам смогу.

Правильнее по каким именно критериям? Если же смотреть на проблему глобально и в целом с точки зрения эффективности разработки, то проще всего сделать следующее:

1. В любом векторном редакторе сделать рисунок или схему зала (да хоть в фигме или в том же диаграмс.нет)
   
2. Выдать креслам номера/ID/классы
   
3. Экспортировать в SVG
   
4. Добавить на странцу в виде стандартного SVG элемента
   
5. Добавить стили для кресел "свободно/занято/выбрано/выбирается" и т.п.
   
6. На странице в JS повесить простые обработчики на события креслам
   
7. Profit
   

Минимум усилий - максимум результата. Canvas тут не нужен. Только если у вас есть под рукой либа 2D/3D графики, которую вы отлично знаете и вам на ней сделать то же самое будет как два байте переслать - то кто же против-то? Тогда да, можно использовать Canvas и прочее.

Comments

[AlexandrMa]

Благодарен Вам, гениально.
Никогда бы не подумал, что с svg можно взаимодействовать на уровне отдельных элементов...
Проверил, работает!
Пока в фигме правда не понял, как назначать айди, но если что руками буду искать элементы))))))

[VoidVolker]

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

[AlexandrMa]

VoidVolker, Да, я уже наворотил)
Схему зала как статичную svg сделал. А кресла, по координатам создал уже на сайте.

const c = document.createElementNS(this.block, 'circle')
c.setAttributeNS(null, 'cx', data.x)
c.setAttributeNS(null, 'cy', data.y)
c.setAttributeNS(null, 'r', 10)
            
c.addEventListener("click", () => {
  console.log("CLICK", data)
  c.setAttributeNS(null, 'class', "selected")
})

Ну далее, фантазия реально далеко может уйти)
Спасибо еще раз за помощь.

[Adamos]

AlexandrMa, на всякий - есть открытый редактор Inkscape, SVG для него - родной формат, со всеми плюшками айдишников и проч.

Answer 2

[Komrus]

Как делать правильно - я не знаю, но то, как сделано у большинства залов - очень печально с точки зрения пользователя.
Не, если зал - правильный кубик с монотонной и равномерной сеткой кресел, то наверно всё замечательно...
Но! Что в старинном театре, что в современном клубе - архитектура более замысловатая. Какое-то место может внезапно за колонной оказаться, откуда-то - только пол-сцены видно... И очень хотелось бы иметь возможность понимать это перед заказом билетов...

Может, какую-то фотографию (или реальный чертеж архитектуры) подложить и уже поверх него квадратики подсвечивать?

Comments

[AlexandrMa]

Не не, уже решили выше. Сделал SVG графикой и всё.