This project started like most of mine do: a simple idea + a little caffeine + the dangerous confidence of “how hard can it be?” The goal? Build a wedding seating planner tool in HTML that staff at venues could use to drag and drop tables, place guests, upload floorplans—and then export the whole layout as a fillable PDF for clients.

Turns out, that “simple” idea needed a full-on interactive seating chart engine, with table logic, guest management, zoomable floorplans, and PDF generation baked in.

So I brought in a secret weapon: Codex, OpenAI’s code generation agent.

💍 The Goal: Easy Seating Planning for Weddings

We set out to create a tool that would:

Let staff drag and drop round or rectangular tables
Dynamically assign and rearrange guests to seats
Allow uploading a custom floorplan image
Support resizing, moving, and labeling elements like stages, dance floors, and decorations
Export the seating layout to a PDF with editable fields for guest counts and table numbers

And it needed to be:

Fully client-side (no server needed)
Easy enough for non-tech users
Something I could drop into a WordPress site or share as a standalone tool

🧪 The First Version: A Bit of Chaos, but Promising

With Codex’s help, the base of the tool came together fast—HTML, CSS, and JavaScript only. But early testing uncovered a few quirky bugs:

Tables defaulted to just two seats. Always two. Mysterious.
Guests removed from seats would disappear entirely.
Exports worked, but table names and seat counts couldn’t be edited after the fact.

This was the moment when I stopped “coding” and started vibe-coding: iterating rapidly by describing what I wanted in natural language, refining each interaction through short, focused prompts to Codex.

🧠 The Codex-Powered Fixes

Each feature and bug fix was fed to Codex like an AI sprint planning session:

🗣️ “When exporting to PDF, make the table number a fillable field.”
🗣️ “Add a way to import/export the layout as a JSON file.”
🗣️ “Let users name the document and use that as the export filename.”

This evolved into a pretty robust HTML-based wedding venue layout planner. Here’s a visual snapshot of how those prompts stacked up:

🧰 Under the Hood: How the Seating Chart Tool Works

The final version (v29) includes all the tools a wedding venue or planner could want:

Add and resize tables (round or rectangular)
Assign guests to specific seats with drag and drop
Show/hide seats and adjust guest counts per table
Insert venue features like dance floors, decor, and custom labels
Zoom and pan across uploaded floorplans (Alt + drag or scroll)
Export as PDF with fillable fields for names and seat counts
Save or load layouts to/from .json files for reusability

Everything’s in one HTML file. No external dependencies outside of PDF-lib and html2canvas. Drop it into a WordPress page as an iframe or host it standalone.

🧠 Lessons from Vibe-Coding with Codex

Codex thrives on specificity. Don’t just say “make it work.” Say, “make the table resize handles invisible during PDF export.”
UI tweaks are best done in flow. Watching Codex adjust positioning, styling, and interactivity in real time was… oddly satisfying.
PDF-lib is legit. It handled the fillable fields like a champ once coordinates were mapped properly.

This project is a perfect example of what a drag-and-drop table planner for weddings should feel like—simple, clean, and purpose-built.

💡 What’s Next?

I’m considering wrapping this into a hosted service or plugin with client portals, saved profiles, and analytics. But for now, it’s a rock-solid planner for any wedding venue, event coordinator, or DIY couple.

If you’re building something similar, trust me: Codex can absolutely be your copilot. Just bring the vibes, some test cases, and a healthy fear of infinite loops. 😅

📌 Final Thoughts

This interactive wedding seating planner built in HTML with Codex is already getting love from venue teams. It turns chaotic guest lists into clean, printable layouts—and lets your clients edit their own info without messing up the layout.

Give it a try below!

Table Planner

Table Planner is a lightweight web-based tool for designing seating layouts. It runs entirely in the browser and requires no server setup. Open tableplanner.html in any modern browser to start arranging tables, guests and floorplan elements.

Features

Create round or rectangular tables with adjustable seat counts
Add stages, dance floors, decorative elements and text boxes
Upload a custom floorplan image as the background
Drag guests from the tray onto seats
Toggle seat visibility when arranging the layout
Zoom or pan the floorplan using Alt + mouse wheel / drag
Export the plan as a fillable PDF or as a PNG image
Save your layout to a JSON file and import it later

Usage

Open tableplanner using the link below.
Use the controls at the top to add tables or other elements.
Enter guest names and drag them onto seats.
When finished, use Export Plan to download a PDF or Print as Image for a PNG snapshot.
Save or import layouts via the corresponding buttons to work on them later.

Everything is handled client-side, so the page can be used offline once loaded.

Tagged : AI

Home automation has transformed the way we interact with our living spaces. Home Assistant, combined with AI capabilities, offers powerful tools to enhance home automation. In this article, we’ll explore the “Skylar OTG Report” automation, which provides a quick status update on the house whenever I leave.

One of the main reasons I got into home automation was the worry of leaving the garage door open. Though it has only happened once, it left a lasting impression. This automation uses AI image analysis as a workaround when the Aladdin integration for Home Assistant was broken from January 2024 to June 2024. It takes a snapshot from my garage camera and sends it to OpenAI to analyze for people or open doors. This method has proven surprisingly accurate.

Even though the Aladdin integration is now fixed, I prefer the image analysis feature and plan to keep it. However, you can remove this part of the automation if you want to save on costs.

Understanding the YAML Configuration

The YAML configuration for the Skylar OTG Report automation is designed to monitor and report the status of your home when you leave. Here’s a breakdown of each section:

Trigger

The automation is triggered when the specified person (Skylar) leaves the designated home zone:

trigger:
  - platform: zone
    entity_id: person.skyflyt
    zone: zone.home
    event: leave
    enabled: true

This ensures that the automation activates as soon as Skylar exits the home zone.

Actions

Delay Action: Introduces a delay of 3 minutes before proceeding to the next actions. This is useful to ensure that any immediate return doesn’t trigger unnecessary actions.

action:
  - delay:
      hours: 0
      minutes: 3
      seconds: 0
      milliseconds: 0
    enabled: true

Snapshot from Garage Camera: Captures a snapshot from the garage camera and saves it to a specified location.

- service: camera.snapshot
  metadata: {}
  data:
    filename: /config/www/grge.jpg
  target:
    entity_id: camera.plexbox_garage_cam_53

AI Image Analysis: Uses an AI service to analyze the snapshot and ensure the garage doors are closed and there are no people in the garage. The AI response is stored in a variable for later use.

- service: extended_openai_conversation.query_image
  metadata: {}
  data:
    max_tokens: 300
    config_entry: 8fb173114f738c7b6
    prompt: >
      you are a vigilant security guard. Analyze the image and ensure the garage doors are closed and there are no people in it. Your message should be brief either saying Doors Closed, Garage Clear or describe the issue you see.
    images:
      url: https://myhomeassistant.ui.nabu.casa/local/grge.jpg
    model: gpt-4-vision-preview
  response_variable: securityguy

AI House Status Update: Uses another AI service to provide a humorous and concise update on the house’s status, including the security report from the garage camera analysis.

- service: conversation.process
  metadata: {}
  data:
    agent_id: 8fb173114f738c7b6abd
    text: >
      You are an intelligent smart home AI - respond as yourself. Your tone can be humorous like Jarvis, you are a pretty powerful smart home. Skylar has just left the house give an update on the condition of the house. Focus on Doors, Locks, Blinds, Solar Generation, Batteries Charge, Battery time remaining, and any lights left on. Your message should not be longer than 178 characters so it displays correctly. You also have a message from the security agent who has analyzed the garage camera looking for the garage door to be open or for any issues. Include a summary of the security agent's report in your message. Here is the Security agent message "{{ securityguy.choices[0].message.content }}"
  response_variable: agent

Notification to Mobile Devices: Sends the status update to Skylar’s mobile phone and Google Pixel watch.

- service: notify.mobile_app_skylar_pixel_8_pro
  metadata: {}
  data:
    message: "{{agent.response.speech.plain.speech}}"
    title: OTG Update
- service: notify.mobile_app_google_pixel_watch_2
  data:
    title: OTG update
    message: "{{agent.response.speech.plain.speech}}"

Conclusion

By following these steps, you can set up a robust home automation system that not only monitors your home but also leverages AI to provide intelligent updates. This “Skylar OTG Report” is just one example of how powerful Home Assistant can be when combined with AI capabilities.

Stay tuned for more articles on Home Assistant and how to integrate AI into your smart home setups!

Tagged : AI / home assistant

AllTheSystems

Tag: AI

How I Built a Drag-and-Drop Wedding Seating Planner in HTML Using Codex