The Atlantic Builders Convention wanted to be able to display a floorplan on their convention website that reflected booth occupancy in real time.
For years the New Jersey Builders Association, who host the Atlantic Builders Convention, would take booth reservations via paper submissions. This would lead to issues with two or more companies requesting the same booth location. Even though the form asked for first, second and third choices, there were times when potential exhibitors would be disappointed and not exhibit. This lead to a conversation about automating the process where a booth would be reserved or at least held when the booth request was made. Basically a floorplan that reflected the occupancy in real time.
There were several issues in play here. First, the floorplan layout changes a few times between the date where reservations start and the date of the show. This would mean that the online display would be have to be flexible to reflect those changes quickly. Another issue is that the floor had over 500 booth spaces to reserve. This could take hours to recreate using web technologies and even more hours to update the floorplan display once it changed. Finally, the company who was in charge of the floor used a CAD system to layout the floor within the exhibit hall which was limited to how they could export the file. The solution came as a mishmash of a graphic design program and integrated it with web coding.
I was able to get the floorplan as a pdf file and imported the pdf into Adobe Illustrator. Once I scaled it to the correct pixel width, I created boxes within Illustrator overtop of the floorplan. One set for regular booths and another set for premium booths. If the floorplan changes, I would import the new floorplan in a new layer, match the scaling and move the boxes if necessary. Once that was finished, I exported the document as a SVG file because I could apply styles to the individual items.
Tying it all together
Each one of the box names I created corresponded with the booth number it was over. I created a function in PHP that read from the database of exhibitors and applied a color to the booths that were occupied. I also created a second routine from an array of booth numbers to color the premium booths that were unoccupied yellow to differentiate them from regular booths.
The way it works is a company would reserve a booth via the online form and once they submitted the application, the booths were automatically colored grey to indicate that they were taken and the system would not allow that booth to be reserved by anyone else.
On the backend, I developed an admin system that the show director can use to update information about the exhibitor including invoicing, sending reminders, running reports and deleting exhibitors and opening up the booth number again.
This is the sixth year the system is in place. Each year before we go live, we review and fix any issues from the previous year and add additional functionality if needed.
New Jersey Builders Association