Member Avatar for nadiam

hey guys, so im not sure if this is the right forum, sorry if its not.
anyway, i have to create a webpage that can do seating arrangements graphically. it would be like those seating plan softwares out there but this would be online. users can choose tables/chairs/etc which guests seats where that sort of thing.

im not sure how to even start doing this, if anyone has any links/suggestions/ideas that would be great. thanks.

  • 3 Contributors
  • 3 Replies
  • 520 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by nadiam

Dani AI

Generated

Good question, . A pragmatic way to attack a web seating planner is: pick the rendering surface, design a small canonical data model, implement simple drag/assign/select interactions, then iterate with save/export and accessibility. The ideas from and are useful starting points; below is a focused, practical workflow you can apply right away.

For rendering choose based on needs: SVG for most cases - vector, scalable, each seat/table is an element you can attach events to and style with CSS; DOM elements (positioned divs) work for very simple editors; Canvas is appropriate only when you need extreme draw-performance (many thousands of objects) but it complicates hit-testing and accessibility. Use Pointer Events (or a small polyfill) to handle mouse+touch consistently across devices.

Keep the data model tiny and authoritative so UI is just a view over state. Example minimal plan snapshot:

{
  "tables": [
    {
      "id": "t1",
      "x": 200,
      "y": 150,
      "rotation": 0,
      "shape": "round",
      "seats": [
        {"id": "s1", "angle": 0, "guestId": "g1"}
      ]
    }
  ],
  "guests": [
    {"id": "g1", "name": "Alice Smith"}
  ]
}

Build an MVP and iterate: 1) render one table + seats from model, 2) implement drag/rotate handles and update model on drop, 3) add seat-assignment UI and server save/restore, 4) add selection (single, shift+click, lasso for groups), undo/redo and export (print/PDF, CSV guest list). Troubleshooting tips: normalized coordinates make zooming simple; when a table is rotated, transform seat coordinates with a rotation matrix; use event delegation to avoid thousands of listeners; debounce autosaves; test touch gestures early. If you follow a model-first approach, the UI remains simple to reason about and features like grouping, alignment-snaps and printing become straightforward to add.

Recommended Answers

All 3 Replies

Member Avatar for pritaeas

Check out how an image map works. Am sure that will get you started.

Member Avatar for Member #120589

In addition to image maps...

jQueryUI has the selectable widget:

http://api.jqueryui.com/selectable/

Which may or may not help you. Note you can swap list elements for images or anything else. I think that Google's angular library has some good examples too, but I forget where.

//EDIT

http://paulhammant.com/2012/03/03/replacing-jquery-with-angular/

//END EDIT

You could also try looking at code for "voting stars", which I think is a similar concept.

Edited by Member #120589
Member Avatar for nadiam

thank you for the suggestions. will check them out.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.