Interact with a graphic representation of data - i.e seating plan

Support
#1

Hi, I have an idea for a project and wondered what the right approach be in cuba-platform.

The project is a seating planner for concert halls, where the user could select seats and add attributes to the seat selection.

The problem is that I have no idea about how I would go about displaying a seat map, with the ability to interact (i.e. select one or multiple seats, and add color to seats depending on attributes).

The seat map data would be prepared outside of Cuba. I was thinking maybe using svg would allow for parsing in Cuba.

Any ideas on how to do this?

#2

Hi,

I would recommend to represent each seat with a button. So you can react to clicks and change seat color by adding styles.

Regards,
Gleb

#3

Hi Gleb,

Thank you for your kind reply and suggestion!

Two things spring to my mind - how would I position each button to look like the actual seating map? More specifically,

  • Is it possible to place buttons with absolute positioning? (within a canvas or frame?)
  • Is it possible to rotate buttons by a specific degree? (some seats are sideways…)

Thank you again for your kind help!

#4

In such a complex case I would develop a JavaScript widget and then integrate it to UI. Check this manual page for custom JavaScript component integration.

In that JavaScript component you can use keyboard events, SVG or Canvas and call server-side using RPC.

1 Like
#5

Why not just HtmlBoxLayout?

#6

It is hard to use it with dynamically formed components. It supports only static HTML template and UI components, though HTML template can formed dynamically at runtime.

#7

Hi Yuriy and Konstantin,

Thank you very much for your input!

Developing a JavaScript widget would probably allow for the most complete and clean solution, but HtmlBoxLayout may be an option to quickly solve the issue.

Thank you for these great hints.