Title: Seating Plan Editor? Circle Example
Last modified: October 7, 2017

---

# Seating Plan Editor? Circle Example

 *  Resolved [Chris](https://wordpress.org/support/users/weazel91/)
 * (@weazel91)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/seating-plan-editor-circle-example/)
 * Hi Malcolm,
 * Just a quickie. We have a show coming up that will be looking for a very complex
   seating plan. I see the circle example you have.
 * Is there a drag and drop editor available to create such or similar. If not how
   did you create your Circle example?
 * Short of going through every single seat I am not sure what the answer is.
 * Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Malcolm](https://wordpress.org/support/users/malcolm-oph/)
 * (@malcolm-oph)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/seating-plan-editor-circle-example/#post-9566684)
 * It is quite some time ago that I created the circle template (June 2014) but 
   I created the custom part of the template using a spreadsheet. There is no “drag
   and drop” editor so you’ll need to do something similar to create you template.
   I didn’t keep the original spreadsheet, but I’ve recreated it and will include
   it in the next release (in the docs folder).
 * Here’s the steps I think I followed.
 * 1. Created a spreadsheet with a column for the row number, seat number, top position.
   left position and html. Populate the Row and Seat entries so there all the seats
   are included and there is one row per seat.
 * 2. Add values using trigonometry to calculate the offset from the centre of the
   circle to the centre of the seat. Offsets are then added to make all the values
   positive.
    Note: Top coordinates increase as you go down the page.
 * 3. Create HTML to define the seats using the positions determined above. The 
   standard template uses a table with div elements in the cells to define the seats.
   The “In The Round” template replaces these with div elements where the position
   is defined as an absolute value. A typical element definition is as follows:
 * `<div class="stageshow-boxoffice-circleseat" id="stageshow-boxoffice-layout-seat-
   2_24" style="top:341px; left:115px;"></div>`
 * 3. Create a standard seating plan with the same number of rows and seats (4 and
   36 respectively) and then export that to a file. The position of the seats are
   defined by elements within a <Table> and these were replaced by <div> elements
   with the positions defined by style attributes that set the left and top positions
   of the seat. Replace the table with the HTMl from the spreadsheet.
 * 4. Save the resulting template and import into the seating plan.
 * There is one problem with the current version of the template …. It doesn’t have
   an aisle, so there is no way in!
 * If you want to send me details of your plan, I may have some suggestions.
 *  Thread Starter [Chris](https://wordpress.org/support/users/weazel91/)
 * (@weazel91)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/seating-plan-editor-circle-example/#post-9566738)
 * Thanks again Malcolm!
 * Sent
 *  Plugin Author [Malcolm](https://wordpress.org/support/users/malcolm-oph/)
 * (@malcolm-oph)
 * [8 years, 7 months ago](https://wordpress.org/support/topic/seating-plan-editor-circle-example/#post-9571839)
 * I’ve added the spreadsheet (CustomSeatingPlanGenerator.xls) to the docs folder
   in the plugin StageShowGold distribution. This includes three examples, as follows:
 * The “In The Round” example generates HTML for that sample
    The “Rotated Rectangle”
   example generates HTML for a single block of seats that is rotated. The “Diagonal
   Blocks” example generates HTML for three blocks where the end of the rows is 
   on the diagonal … very much like your layout.
 * The spreadsheet can generate code for any number of blocks of seats, just add
   the coordinates for the three “corner” seats of each block along with the starting
   row and seat numbers, and the number of rows and seats and click the button to
   generate the code.
    -  This reply was modified 8 years, 7 months ago by [Malcolm](https://wordpress.org/support/users/malcolm-oph/).

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Seating Plan Editor? Circle Example’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/stageshow_3c5670.svg)
 * [StageShow](https://wordpress.org/plugins/stageshow/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/stageshow/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/stageshow/)
 * [Active Topics](https://wordpress.org/support/plugin/stageshow/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/stageshow/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/stageshow/reviews/)

## Tags

 * [editor](https://wordpress.org/support/topic-tag/editor/)
 * [seating plan](https://wordpress.org/support/topic-tag/seating-plan/)

 * 3 replies
 * 2 participants
 * Last reply from: [Malcolm](https://wordpress.org/support/users/malcolm-oph/)
 * Last activity: [8 years, 7 months ago](https://wordpress.org/support/topic/seating-plan-editor-circle-example/#post-9571839)
 * Status: resolved