Garden Mapper

A Val Town application for mapping multiple gardens and tracking information about each plant.

• Multiple Garden Support - Create and manage multiple gardens with different names and sizes
• Garden Selector - Easily switch between different gardens using the dropdown selector
• Garden Settings - Rename gardens and customize their size individually
• Interactive garden map interface
• Add plants with specific coordinates and diameters
• Store notes and information about each plant
• Edit and delete existing plants
• Visual representation of plants on the map
• Mobile-friendly with touch support
• Admin panel for database management and inspection of both plants and gardens tables

The application provides the following RESTful API endpoints:

Returns a list of all gardens.

Returns details for a specific garden by ID.

Creates a new garden. Required fields:

• name: Name of the garden

Optional fields:

• garden_width: Width of the garden map in pixels (300-2000, default: 800)
• garden_height: Height of the garden map in pixels (300-2000, default: 500)

Updates garden settings. All fields are optional:

• name: Name of the garden
• garden_width: Width of the garden map in pixels (300-2000)
• garden_height: Height of the garden map in pixels (300-2000)

Removes a garden and all its plants. Cannot delete the last remaining garden.

Returns a list of all plants in a specific garden.

Returns a list of all plants across all gardens (for admin purposes).

Returns details for a specific plant by ID.

Creates a new plant. Required fields:

• garden_id: ID of the garden this plant belongs to
• x_coordinate: X position on the map
• y_coordinate: Y position on the map
• diameter: Size of the plant in pixels

Optional fields:

• name: Name of the plant
• notes: Additional information about the plant

Updates an existing plant. All fields are optional.

Removes a plant from the garden.

The application uses SQLite with the following schemas:

CREATE TABLE gardens_v2 (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  name TEXT NOT NULL,
  garden_width INTEGER NOT NULL DEFAULT 800,
  garden_height INTEGER NOT NULL DEFAULT 500,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)

CREATE TABLE garden_plants_v3 (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  garden_id INTEGER NOT NULL,
  x_coordinate REAL NOT NULL,
  y_coordinate REAL NOT NULL,
  diameter REAL NOT NULL,
  name TEXT,
  notes TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)

1. Select a Garden: Use the dropdown selector next to "Garden Map" to switch between your gardens
2. Create New Garden: Click the "+ New" button to create a new garden with a custom name and size
3. Garden Settings: Click "Garden Settings" to rename your current garden or change its dimensions
4. Delete Garden: Use the "Delete Garden" button in the settings modal (you cannot delete your last garden)

1. Add Plants: Tap anywhere on the current garden map to immediately see a placeholder plant and open the edit form
2. Edit Plants: Fill in the plant details form and tap "Save Plant" to convert the placeholder into a real plant
3. Clear Form: Tap "Clear Form" to remove the placeholder plant and reset the form
4. Select Plants: Tap on existing plants to edit their details
5. Move Plants: Select a plant and click "Move", then click where you want to move it
6. Plant List: Use the plant list on the right to quickly find and select plants in the current garden

• Custom Sizes: Set any garden size between 300×300 and 2000×2000 pixels
• Preset Options: Choose from Small (600×400), Medium (800×500), or Large (1000×600) sizes
• Garden Names: Give each garden a descriptive name like "Front Yard", "Vegetable Garden", etc.
• Persistent Settings: Your garden settings are saved in the database and restored when you return to the app

Access the admin panel by clicking "Admin Panel" in the header to view both database tables (plants and gardens) with their schemas and records.

• Immediate Visual Feedback: When you click the map, a gray dashed placeholder plant appears instantly
• Real-time Size Updates: Adjust the diameter in the form to see the placeholder plant resize in real-time
• Smart Cleanup: Placeholder plants are automatically removed when you save, clear the form, or select an existing plant

• Hono.js for the API backend
• SQLite for data storage
• Vanilla JavaScript for the frontend
• Twind for styling