Skip to content

Commit

Permalink
added: ghost for ghostmap frozen view, you can disable that feature i…
Browse files Browse the repository at this point in the history 
…f you dont need it.

reworked some calculation stuff, fixed some bugs, and added better error handling.
  • Loading branch information
@mentalilll
mentalilll committed Jul 31, 2024
1 parent 109032e commit 0ff6e15
Show file tree
Hide file tree
Showing 9 changed files with 153 additions and 69 deletions.
54 changes: 28 additions & 26 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@

![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)
![HaVpdChart Image](https://github.com/mentalilll/ha-vpd-chart/blob/main/assets/bar_view.png?raw=true)

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

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

`HaVpdChart` is a custom card component for Home Assistant that allows for visual representations of VPD (Vapour Pressure Deficit) based on temperature and humidity sensors. It's ideal for monitoring environmental conditions in tents or rooms.

Expand Down Expand Up @@ -103,7 +105,7 @@ enable_triangle: false #optional
enable_crosshair: true #optional
enable_fahrenheit: false #optional
enable_zoom: false #optional
leaf_temperature_offset: 2 #optional
leaf_temperature_offset: 2 || input_number.leaf_offset_example #optional
sensors:
- temperature: sensor.temperature_2
humidity: sensor.humidity_2
Expand Down Expand Up @@ -139,29 +141,29 @@ calculateVPD: |2-

## 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". |
| kpa_text | string | optional | `kPa` | The text used for kPa readings. Default is "kPa". |
| 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 |
| enable_crosshair | boolean | optional | `true` | Enable MouseHover Crosshair |
| enable_fahrenheit | boolean | optional | `false` | Enable Fahrenheit instead of Celsius |
| enable_zoom | boolean | optional | `false` | Enable zoom function for chart |
| calculateVPD | string | optional | See description | Custom function to calculate VPD. |
| 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". |
| kpa_text | string | optional | `kPa` | The text used for kPa readings. Default is "kPa". |
| 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\|string | optional | `2`\|`input_number.leaf_offset_example` | 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 |
| enable_crosshair | boolean | optional | `true` | Enable MouseHover Crosshair |
| enable_fahrenheit | boolean | optional | `false` | Enable Fahrenheit instead of Celsius |
| enable_zoom | boolean | optional | `false` | Enable zoom function for chart |
| calculateVPD | string | optional | See description | Custom function to calculate VPD. |

**Default `vpd_phases` Configuration:**

Expand Down
Binary file modified assets/image.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/settings.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions dist/bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,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 - (this.config.leaf_temperature_offset || 2);
let leafTemperature = temperature - this.getLeafTemperatureOffset();
if (sensor.leaf_temperature !== undefined) {
if (this._hass.states[sensor.leaf_temperature] !== undefined) {
leafTemperature = this._hass.states[sensor.leaf_temperature].state;
Expand Down Expand Up @@ -86,7 +86,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 - (this.config.leaf_temperature_offset || 2);
let leafTemperature = temperature - this.getLeafTemperatureOffset();
if (sensor.leaf_temperature !== undefined) {
leafTemperature = this._hass.states[sensor.leaf_temperature].state;
}
Expand Down Expand Up @@ -183,7 +183,7 @@ export const bar = {
if (humidities[tempIndex]) {
data['sensor-' + index].push({
time: temperature.last_changed,
vpd: this.calculateVPD(this.toFixedNumber(temperature.state) - (this.config.leaf_temperature_offset || 2), this.toFixedNumber(temperature.state), this.toFixedNumber(humidities[tempIndex].state)).toFixed(2),
vpd: this.calculateVPD(this.toFixedNumber(temperature.state) - this.getLeafTemperatureOffset(), this.toFixedNumber(temperature.state), this.toFixedNumber(humidities[tempIndex].state)).toFixed(2),
});
}
});
Expand Down
31 changes: 24 additions & 7 deletions dist/chart.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {

.vpd-chart-view .highlight {
position: absolute;
z-index: 3;
z-index: 2;
cursor: pointer;
width: 10px;
height: 10px;
Expand All @@ -66,10 +66,6 @@ ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {
transform: translate(-50%);
}

.vpd-chart-view .highlight:hover {
z-index: 4;
}

.vpd-chart-view .vertical-line {
top: 0;
bottom: 0;
Expand Down Expand Up @@ -130,7 +126,7 @@ ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {
font-size: 12px;
line-height: 1.2;
position: absolute;
z-index: 2;
z-index: 3;
}

.vpd-chart-view .mouse-custom-tooltip {
Expand Down Expand Up @@ -261,12 +257,17 @@ ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {

.vpd-chart-view #sensors .sensor-triangle {
width: 16px !important;
height: 0 !important;
height: 16px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
z-index: 3;
}

.vpd-chart-view #sensors .sensor-pointer {
z-index: 3;
}

.vpd-chart-view #sensors .sensor-triangle:after {
Expand All @@ -281,4 +282,20 @@ ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {
content: " ";
font-size: 0;
line-height: 0;
}

.vpd-chart-view .ghostmapClick {
display: inline-block;
vertical-align: text-bottom;
cursor: pointer;
pointer-events: all;
fill: #ffffff;
}

.vpd-chart-view .ghostmapClick:hover {
fill: #00aa00;
}

.vpd-chart-view .ghostmapClick:active, .vpd-chart-view .ghostmapClick.active {
fill: #00ff00;
}
Loading

0 comments on commit 0ff6e15

Please sign in to comment.