Skip to content

Commit

Permalink
- refactoring functions for better handling
Browse files Browse the repository at this point in the history
- refactoring types
- added global leaf_temperature_offset
- added global version number to prevent caching after version update
- removed sensor.leaf_temperature_offset
- removed timeout for tooltip
  • Loading branch information
mentalilll committed May 20, 2024
1 parent 1ab4e26 commit d835632
Show file tree
Hide file tree
Showing 5 changed files with 292 additions and 319 deletions.
67 changes: 37 additions & 30 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# HaVpdChart for Home Assistant

![HaVpdChart Image](https://github.com/mentalilll/ha-vpd-chart/blob/main/assets/image.png?raw=true)

![HaVpdChart Image](https://github.com/mentalilll/ha-vpd-chart/blob/main/assets/bar_view.png)
Expand All @@ -13,33 +14,35 @@
- Basic knowledge of YAML and Home Assistant configuration

## Installation

### HACS Easy Installation

1. **Currently not available - still wait for accept pull request**

### HACS Installation

1. **Add Repository**
Click `HACS` -> `Three Dot Menu upper right` -> `Custom Repository`
-> `Category: Lovelace` | `Repositury Url: https://github.com/mentalilll/ha-vpd-chart`

Click `HACS` -> `Three Dot Menu upper right` -> `Custom Repository`
-> `Category: Lovelace` | `Repositury Url: https://github.com/mentalilll/ha-vpd-chart`

3. **Install Plugin**

Search for VPD within Integrations and install `ha-vpd-chart`


### From GitHub

1. **Clone the repository or download the JS file**

First, you need to download the JavaScript file `ha-vpd-chart.js` from GitHub or clone the entire repository.
First, you need to download the JavaScript file `ha-vpd-chart.js` from GitHub or clone the entire repository.

2. **Incorporate the file into Home Assistant**

Copy `ha-vpd-chart.js` into your `www` directory of Home Assistant, typically located at `<config>/www/`.
Copy `ha-vpd-chart.js` into your `www` directory of Home Assistant, typically located at `<config>/www/`.

3. **Add the resource in Home Assistant**

Add the resource to your `configuration.yaml` or through the Home Assistant UI under `Configuration` -> `Lovelace Dashboards` -> `Resources`:
Add the resource to your `configuration.yaml` or through the Home Assistant UI under `Configuration` -> `Lovelace Dashboards` -> `Resources`:

```yaml
lovelace:
Expand All @@ -48,13 +51,14 @@
type: module
```
**Note:** After adding the resource, you may need to restart Home Assistant.
**Note:** After adding the resource, you may need to restart Home Assistant.
Follow the steps above to store the file locally and include it as a resource.
## Usage
Easy start as Chart View:
```yaml
type: custom:ha-vpd-chart
sensors:
Expand All @@ -67,6 +71,7 @@ sensors:
```
Easy start as Bar View:
```yaml
type: custom:ha-vpd-chart
is_bar_view: true
Expand All @@ -80,6 +85,7 @@ sensors:
```
To use the `HaVpdChart` in your Lovelace dashboard, add the following configuration to your dashboard. Adjust the sensors and other options according to your setup:

```yaml
type: custom:ha-vpd-chart
air_text: Temp. #optional "" for Empty
Expand All @@ -102,15 +108,14 @@ sensors:
- temperature: sensor.temperature_tent_2
humidity: sensor.humidity_tent_2
vpd: sensor.vpd #optional
leaf_temperature_offset: 3 # optional and is ignored if leaf_temperature isset
name: Tent 2
vpd_phases: #optional
- upper: 0.4
className: under-transpiration
- lower: 0.4
upper: 0.8
className: early-veg
- lower: 0.8
- lower: 0.8
upper: 1.2
className: late-veg
- lower: 1.2
Expand All @@ -119,28 +124,30 @@ vpd_phases: #optional
- lower: 1.6
className: danger-zone
```
## Configuration Parameters

## Configuration Parameters

| Name | Type | Required | Default | Description |
|-----------------| ------------ | ------------ |-----------------|-----------------------------------------------------------------------------------------------------|
| type | string | **required** | | Must be `custom:ha-vpd-chart`. |
| air_text | string | optional | `Air` | The text used for temperature readings. Default is "Air". |
| rh_text | string | optional | `RH` | The text used for humidity readings. Default is "RH". |
| min_temperature | number | optional | `5` | Minimum temperature in the chart. Default is 5. |
| min_humidity | number | optional | `10` | Minimum humidity in the chart. Default is 10. |
| max_temperature | number | optional | `35` | Maximum temperature in the chart. Default is 35. |
| max_humidity | number | optional | `90` | Maximum humidity in the chart. Default is 90. |
| min_height | number | optional | `200` | Minimum height of the chart as px. Default is 200. |
| sensors | list | **required** | | A list of sensors with their temperature and humidity entity IDs, and an optional name for display. |
| vpd_phases | list | optional | See description | A list of VPD phases and their classes for visual representation. See below for defaults. |
| enable_tooltip | boolean | optional | `true` | Tooltip enabled by default. |
| is_bar_view | boolean | optional | `false` | Second view of this chart for fast information of sensors |
| enable_axes | boolean | optional | `true` | Enable Axes on the Chart |
| enable_ghostmap | boolean | optional | `true` | Enable Ghostmap on the Chart |
| enable_triangle | boolean | optional | `true` | Enable Triangle instead of Circle for tooltip marker |
| Name | Type | Required | Default | Description |
|-------------------------|---------|--------------|-----------------|-----------------------------------------------------------------------------------------------------|
| type | string | **required** | | Must be `custom:ha-vpd-chart`. |
| air_text | string | optional | `Air` | The text used for temperature readings. Default is "Air". |
| rh_text | string | optional | `RH` | The text used for humidity readings. Default is "RH". |
| min_temperature | number | optional | `5` | Minimum temperature in the chart. Default is 5. |
| min_humidity | number | optional | `10` | Minimum humidity in the chart. Default is 10. |
| max_temperature | number | optional | `35` | Maximum temperature in the chart. Default is 35. |
| max_humidity | number | optional | `90` | Maximum humidity in the chart. Default is 90. |
| min_height | number | optional | `200` | Minimum height of the chart as px. Default is 200. |
| leaf_temperature_offset | number | optional | `2` | Sets the Temperature Offset of the Leaf | |
| sensors | list | **required** | | A list of sensors with their temperature and humidity entity IDs, and an optional name for display. |
| vpd_phases | list | optional | See description | A list of VPD phases and their classes for visual representation. See below for defaults. |
| enable_tooltip | boolean | optional | `true` | Tooltip enabled by default. |
| is_bar_view | boolean | optional | `false` | Second view of this chart for fast information of sensors |
| enable_axes | boolean | optional | `true` | Enable Axes on the Chart |
| enable_ghostmap | boolean | optional | `true` | Enable Ghostmap on the Chart |
| enable_triangle | boolean | optional | `true` | Enable Triangle instead of Circle for tooltip marker |

**Default `vpd_phases` Configuration:**

- `under-transpiration`: VPD < 0.4
- `early-veg`: 0.4 ≤ VPD < 0.8
- `late-veg`: 0.8 ≤ VPD < 1.2
Expand Down
8 changes: 4 additions & 4 deletions dist/bar.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export const bar = {
this.innerHTML = `
<ha-card class="vpd-bar-view">
<style>
@import '/hacsfiles/ha-vpd-chart/bar.css'
@import '/hacsfiles/ha-vpd-chart/bar.css?v=${window.vpdChartVersion}'
</style>
<div class="vpd-card-container card-content"></div>
<div class="highlight mousePointer" style="opacity:0">
Expand Down Expand Up @@ -44,7 +44,7 @@ export const bar = {
this.config.sensors.forEach((sensor) => {
let humidity = this._hass.states[sensor.humidity].state;
let temperature = this._hass.states[sensor.temperature].state;
let leafTemperature = temperature - (sensor.leaf_temperature_offset || 2);
let leafTemperature = temperature - (this.config.leaf_temperature_offset || 2);
if (sensor.leaf_temperature !== undefined) {
leafTemperature = this._hass.states[sensor.leaf_temperature].state;
}
Expand Down Expand Up @@ -84,7 +84,7 @@ export const bar = {
this.config.sensors.forEach((sensor, index) => {
let humidity = this._hass.states[sensor.humidity].state;
let temperature = this._hass.states[sensor.temperature].state;
let leafTemperature = temperature - (sensor.leaf_temperature_offset || 2);
let leafTemperature = temperature - (this.config.leaf_temperature_offset || 2);
if (sensor.leaf_temperature !== undefined) {
leafTemperature = this._hass.states[sensor.leaf_temperature].state;
}
Expand Down Expand Up @@ -180,7 +180,7 @@ export const bar = {
temperatures.forEach((temperature, tempIndex) => {
data['sensor-'+index].push({
time: temperature.last_changed,
vpd: this.calculateVPD(parseFloat(temperature.state) - 2, parseFloat(temperature.state), parseFloat(humidities[tempIndex].state)).toFixed(2),
vpd: this.calculateVPD(parseFloat(temperature.state) - (this.config.leaf_temperature_offset || 2), parseFloat(temperature.state), parseFloat(humidities[tempIndex].state)).toFixed(2),
});
});
}
Expand Down
Loading

0 comments on commit d835632

Please sign in to comment.