Indoor Plant PPFD Heatmap & Grow Light Footprint Generator

Technical Overview

A lightweight, high-performance browser-based tool that calculates and renders a real-time PPFD (Photosynthetic Photon Flux Density) heatmap for indoor growers. It relies purely on client-side canvas rendering to visualize light intensity distribution without requiring back-end processing or local storage.

Core Features

• Live Heatmap Visualization: Real-time generation of a color-coded light intensity map (High intensity = warm colors, Low intensity = cool colors).
• Physics-Based Calculations: Uses the inverse-square law to simulate light fall-off based on hanging height, beam angle, and total output.
• Customizable Parameters:
  • Light Intensity Input (μmol/s)
  • Hanging Height (cm/inches)
  • Beam Angle (degrees)
  • Grow Area Dimensions (width/length)
• Interactive Legend: Hover over the heatmap to see estimated μmol/m²/s values at specific coordinates.
• Export Utility: One-click image download of the generated footprint map for record-keeping.

User Interface Layout

• Header: Clean, minimalist title area with a brief usage instruction toggle.
• Sidebar (Control Panel): Stacked vertical input fields with high-quality sliders and numerical inputs for precise control.
• Main Display Area: Large, responsive HTML5 Canvas element centered in the view, rendering the heatmap. Below the map, a color-coded legend displays the range of light intensity.
• Footer/Bottom Section: Simple 'Download Map' button and 'Reset' button. No persistent footers are present.

Design System & Aesthetics

• Color Palette: Professional SaaS aesthetic using soft, bright tones.
  • Primary: Sage Green (#2D6A4F) for action buttons.
  • Background: Off-white (#F8F9FA) for the main canvas area.
  • Surface: Pure White (#FFFFFF) for control cards with soft, diffused box-shadows.
  • Text: Slate Grey (#343A40) for readability.
• Typography: Sans-serif, geometric font (e.g., Inter or system-ui) for clarity.
• Animations: Subtle transitions for slider movement and canvas redraws. No jarring movements; use transition: all 0.2s ease for UI elements.

Developer Directives

1. Architecture: Single HTML5 file containing all CSS (within <style>) and JavaScript (within <script>).
2. Zero Storage: Strictly adhere to the constraint of NO localStorage, sessionStorage, or cookies. Use local JS objects to manage state.
3. Responsiveness: Use Flexbox/Grid for the layout. Ensure the canvas remains responsive (aspect-ratio preserved) on mobile devices using max-width: 100%.
4. Iframe Security: Ensure no code attempts to access window.top or window.parent. All operations must be scoped to the iframe content.
5. Dependencies: CDN-based Tailwind CSS for styling and potentially html2canvas for the image export feature.
6. Performance: Efficiently redraw the canvas only when input values change using a requestAnimationFrame loop or debounce-heavy event listeners.