Interactive Psychrometric Chart & HVAC Calculator

Overview

A high-performance, single-file browser application designed to plot and calculate air properties. This tool provides a professional-grade interface for HVAC professionals, students, and facility managers to visualize thermodynamic air states without the need for bloated software.

Feature List

• Interactive Canvas Plotting: Real-time rendering of state points on a standard psychrometric chart base.
• Dual-Variable Input: Calculate state points using Dry Bulb (DB) + Wet Bulb (WB) or Dry Bulb + Relative Humidity (RH).
• Comprehensive Output Table: Displays calculated values for Dew Point, Humidity Ratio (Grains/lb or g/kg), Enthalpy (Btu/lb or kJ/kg), and Specific Volume.
• Multi-Point Comparison: Plot up to five concurrent points to compare different air states (e.g., Supply Air vs. Return Air).
• Responsive Resizing: The chart container adjusts dynamically to maintain aspect ratio and clarity across mobile, tablet, and desktop viewports.
• Unit Toggles: Simple toggle between Imperial (IP) and Metric (SI) units.
• Image Export: A "Snapshot" feature to download the current chart view as a high-resolution PNG for reports.

UI Layout

• Header: Clean, minimalist title with a simple unit toggle button.
• Main Tool Area (Split View):
  • Control Panel (Left/Top): Fixed-width sidebar featuring clean, grouped input fields with validation. Buttons are "SaaS-style" with subtle hover gradients.
  • Visualization Canvas (Right/Bottom): The heart of the app. A responsive, high-fidelity <canvas> element displaying the psychrometric curves and user-generated data points.
• Results Section: A collapsible drawer below the chart displaying numerical data for each plotted point.

Visual Design & Aesthetics

• Palette: A "Professional Light" theme. Backgrounds are clean whites (#FFFFFF) and off-whites (#F9FAFB). Text uses deep slate (#1F2937). Chart lines use soft gray (#E5E7EB) and subtle accents in vibrant blue (#2563EB) for plot points.
• Animations:
  • Smooth fade-in for calculation results.
  • "Spring" physics for point placement on the canvas when plotted.
  • Graceful transition during window resizing to re-center the chart.

Technical Implementation Constraints

• Single File: All CSS, HTML, and JS must be bundled into one index.html file.
• Memory Only: NO localStorage, sessionStorage, or backend database. All data exists purely in JavaScript memory and resets on reload.
• No Popups: All errors and confirmations (e.g., "Clear all points?") must be custom, inline HTML modals.
• Performance: Use requestAnimationFrame for all canvas updates to ensure 60fps performance during interactive scaling.
• External Libraries: May use CDN-hosted chart.js or d3.js for chart logic, but the file must be bundled or included as a strict CDN reference to maintain portability.