Как раскрасить столики в кафе?

Question

[Константин Биржаков]

Задача – динамически показывать на сайте состояние тех или иных объектов, например столиков в кафе, стендов на выставке или других подобных вещей. Рисуем простенькую схему, создаем для нее imagemap: jsfiddle.net/KonstRuctor/wvwc9/
Статусами столиков рулит администратор из своей панели, статус пишется в базу.
Я придумал такой вариант –
1) Нарисовать прозрачные гифы (или png) со столиками, каждый в трех цветовых вариантах (занят, свободен, бронь)
2) С помощью css позиционировать нужную картинку каждого столика поверх основной схемы всего кафе, картинка с нужным цветом столика выбирается php согласно статусу, это сделать элементарно.
Вопрос такой – есть ли более простое решение, без рисования кучи картинок, например на css или jquery?
Я нашел только плагины со всевозможными hover-эффектами…

Comments

[Softlink]

Картинку столика бы закинули, может его можно на css сделать.

[Константин Биржаков]

Допустим, 3 квадратных столика стоят рядом у стены.

Answer 1

[Igor]

Можно использовать Raphaël. Быстро и удобно можно делать различные планы или небольшие карты. Заранее можно всё подготовить в вектором графическом редакторе.

Answer 2

[Сергей Еремин]

Э… ну раз «раскрасить столики в кафе» то решения прямолинейно как луч света! Прост покрасить их разными цыетами в реале. Далее се просто «Ваш столик „Зеленый в желтый горошек“ в „Красном зале“… :)

Answer 3

[avalak]

Сомневаюсь что это будет проще, но ещё есть вариант с canvas. Мне очень понравился калькулятор скилов из Path Of Exile. Правда реализовывать придётся самому.

Comments

[Сергей Протько]

canvas это хорошо, но зачем?

[avalak]

Просто как вариант. Недавно размышлял о том как реализовать подобную задачу (визуализация состояния ~30k элементов). В моём случае это было лучшее решение. Собственно я сразу сказал что это более трудозатратное решение.

[Сергей Протько]

При 30К элементов использовать канвас уже разумно, ибо перерисовать можно только часть изображения, это более производительное решение.

Answer 4

[Сергей Протько]

Если это квадраты — просто див с определенным цветом и прозрачностью навесить над столиком. Это из простых вариантов. Если столики имеют текстуру — нужен спрайт. Если столиков больше тысячи (в чем я сомневаюсь) то это уже надо на канвас переложить.

Answer 5

[Павел Берсенев]

Можно и не красить, а помечать иконками «забронирован», «свободен», «скоро освободится».

Comments

[Vadim]

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

Answer 6

[Константин Биржаков]

Благодарю за идеи, коллеги!
Столиков немного, поэтому пока сделал изображениями.
Первое – самое большое – схема кафе, где обозначены постоянные элементы (стойка бара и т.п.);
Второе – столики: прозрачные гифы, для каждого столика три цветовых решения.
Сделал позиционирование каждого столика на CSS относительно схемы.
Ну и меняю картинки в зависимости от статуса.
Минус данного подхода: передвинули столик в реале – переделываем кучу картинок, переписываем CSS на сайте, что заказчику самостоятельно не сделать.

Comments

[Urvin]

А столики не одинаковые?
Нельзя написать «карту» столиков с координатами?

[Константин Биржаков]

Нет, в том-то и дело. Столик – прямоугольник, который может быть поставлен так или эдак… как бы выразиться по фэншую :-) портретно или ладншафтно, если можно эти эпитеты применить к столикам :-)
Впрочем, я пока еще думаю над реализацией. К примеру, меня мучает вопрос, как же с помощью jquery плагины делают ховер-эффект, значит можно ведь как-то раскрасить…