https://github.com/yeonv/home-assistant-vpd-card

VPD Table card
https://github.com/yeonv/home-assistant-vpd-card

grow hassio home-assistant lovelace lovelace-ui plant vpd

Last synced: about 1 month ago
JSON representation

VPD Table card

• Host: GitHub
• URL: https://github.com/yeonv/home-assistant-vpd-card
• Owner: YeonV
• License: mit
• Created: 2025-04-17T17:22:18.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2025-04-24T15:54:26.000Z (about 1 month ago)
• Last Synced: 2025-04-27T00:58:19.289Z (about 1 month ago)
• Topics: grow, hassio, home-assistant, lovelace, lovelace-ui, plant, vpd
• Homepage:
• Size: 24.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# VPD Table Card for Home Assistant

[![GitHub Release](https://img.shields.io/github/v/release/YeonV/home-assistant-vpd-card?include_prereleases)](https://github.com/YeonV/home-assistant-vpd-card/releases)

[![License](https://img.shields.io/github/license/YeonV/home-assistant-vpd-card)](LICENSE)

[![creator](https://img.shields.io/badge/CREATOR-Yeon-blue.svg?logo=github&logoColor=white)](https://github.com/YeonV) [![creator](https://img.shields.io/badge/A.K.A-Blade-darkred.svg?logo=github&logoColor=white)](https://github.com/YeonV)

Display a Vapor Pressure Deficit (VPD) table directly in your Lovelace dashboards, highlighting the current conditions based on your temperature and humidity sensors. Ideal for monitoring environments like grow tents or greenhouses.

![image](https://github.com/user-attachments/assets/d61e476f-117f-411b-90b3-6493202f69d8)

**Features:**

*   Displays a clear VPD table based on standard calculations.

*   Highlights the current VPD zone based on real-time sensor data.

*   Highlights the closest matching temperature row and humidity column.

*   Automatically scrolls the table to keep the current zone visible.

*   Customizable colors for different VPD zones (Danger, Flowering, Vegging) via UI editor.

*   Configurable header text.

*   Configurable table maximum height.

*   Responsive layout.

---

## Installation

### Method 1: HACS (Home Assistant Community Store) - Recommended

1.  Ensure [HACS](https://hacs.xyz/) is installed and working.

2.  Navigate to HACS -> Frontend -> Click the three dots (⋮) top right -> **Custom Repositories**.

3.  Enter the following information:

    *   **URL:** `https://github.com/YeonV/home-assistant-addons`

    *   **Category:** `Lovelace`

4.  Click **Add**.

5.  Close the Custom Repositories dialog.

6.  The "VPD Table Card" should now appear in the HACS Frontend list (you might need to refresh). Click **Install**.

7.  Follow the prompts to install the card and reload Lovelace resources.

### Method 2: Manual Installation

1.  Download the `vpd-card.js` file from the latest [Release](https://github.com/YeonV/home-assistant-addons/releases).

2.  Place the downloaded file into your Home Assistant `config/www/` directory. If you place it in a subdirectory (e.g., `config/www/cards/`), adjust the resource URL accordingly.

3.  Add the resource reference to your Lovelace configuration:

    *   Go to **Configuration** -> **Dashboards** -> Click the **three dots (⋮)** top right -> **Resources**.

    *   Click **+ Add Resource**.

    *   **URL:** `/local/vpd-card.js` (or `/local/cards/vpd-card.js` if you used a subdirectory).

    *   **Resource Type:** `JavaScript Module`.

    *   Click **Create**.

4.  Refresh your browser.

---

## Configuration

Add the card to your Lovelace dashboard like any other card.

**UI Configuration:**

![image](https://github.com/user-attachments/assets/dec6537e-8150-408c-901c-14c6aa63f94d)

The card supports configuration through the Lovelace UI editor.

| Name          | Type    | Required | Description                                                                 | Default                  |

|---------------|---------|----------|-----------------------------------------------------------------------------|--------------------------|

| `type`        | string  | Yes      | `custom:vpd-card`                                                           |                          |

| `temperature` | string  | Yes      | Entity ID of your temperature sensor (expects °C).                          |                          |

| `humidity`    | string  | Yes      | Entity ID of your relative humidity sensor (expects %).                     |                          |

| `header`      | string  | No       | Text to display above the table.                                            | `""` (None)              |

| `max_height`  | string  | No       | Maximum height of the scrollable table container (e.g., `300px`, `40vh`).   | `300px`                  |

| `colors`      | object  | No       | Object to customize zone colors (see details below).                        | (Internal Defaults)      |

**Color Configuration (`colors` object):**

You can override the default colors for different zones and the highlight effect. Define colors using valid CSS color values (e.g., `#RRGGBB`, `rgb(...)`, `white`).

```yaml

type: custom:vpd-card

temperature: sensor.grow_tent_temperature

humidity: sensor.grow_tent_humidity

header: Grow Tent VPD

max_height: 400px

colors:

  danger:

    background: '#8B0000' # Dark Red

    color: 'white'

  midlateflower:

    background: '#DAA520' # Goldenrod

    color: 'black'

  earlyflowerlateveg:

    background: '#90EE90' # Light Green

    color: 'black'

  properearlyveg:

    background: '#228B22' # Forest Green

    color: 'white'

  highlight:

    color: 'orange'