Skip to content

Commit

Permalink
added: tooltip addition text on hover
Browse files Browse the repository at this point in the history 
added: tooltip on click = freeze ghostmap
added: show calculated or sensor RH on tooltip (each sensor) (because of calculation the shown position don't need to be the actual sensor value!)
added: sensor legend
added: Button Show Chart
added: fontscale while zoom
added: zoomlevel to 3
changed: some options are now default true and need to be deactivated (to show all features on startup)
fixed: disable tooltip
fixed: hover bugs
fixed: freeze ghostmap bug
fixed: bar bugs
removed: Ghost icon and made tooltip clickable
  • Loading branch information
@mentalilll
mentalilll committed Aug 6, 2024
1 parent cd2c044 commit c294972
Show file tree
Hide file tree
Showing 11 changed files with 384 additions and 122 deletions.
10 changes: 6 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,10 +101,11 @@ is_bar_view: false #optional
enable_tooltip: true #optional
enable_axes: true #optional
enable_ghostmap: true #optional
enable_triangle: false #optional
enable_triangle: true #optional
enable_crosshair: true #optional
enable_fahrenheit: false #optional
enable_zoom: false #optional
enable_zoom: true #optional
enable_legend: true #optional
leaf_temperature_offset: 2 || input_number.leaf_offset_example #optional
sensors:
- temperature: sensor.temperature_2
Expand Down Expand Up @@ -156,13 +157,14 @@ calculateVPD: |2-
| 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 |
| is_bar_view | boolean | optional | `true` | Enable Bar 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 |
| enable_zoom | boolean | optional | `true` | Enable zoom function for chart |
| enable_legend | boolean | optional | `true` | Enable Legend 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 modified 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.
59 changes: 40 additions & 19 deletions dist/bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,20 +18,33 @@ export const bar = {
`;
this.content = this.querySelector("div.card-content");
if (this._hass) {
let vpd = 0;

this.config.sensors.forEach((sensor) => {
let humidity = this._hass.states[sensor.humidity].state;
let temperature = this._hass.states[sensor.temperature].state;
const humidity = parseFloat(this._hass.states[sensor.humidity].state);
const temperature = parseFloat(this._hass.states[sensor.temperature].state);
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;
}
leafTemperature = parseFloat(this._hass.states[sensor.leaf_temperature].state);
}
let vpd;
if (sensor.vpd !== undefined) {
vpd = this._hass.states[sensor.vpd].state;
vpd = parseFloat(this._hass.states[sensor.vpd].state);
} else {
vpd = this.calculateVPD(this.toFixedNumber(leafTemperature), this.toFixedNumber(temperature), this.toFixedNumber(humidity)).toFixed(2);
vpd = this.calculateVPD(leafTemperature, temperature, humidity).toFixed(2);
}
const min_vpd = this.calculateVPD(temperature - 2, temperature, this.max_humidity);
const max_vpd = this.calculateVPD(temperature - 2, temperature, this.min_humidity);
const relativeVpd = vpd - min_vpd;

const totalVpdRange = max_vpd - min_vpd;
const percentageVpd = (relativeVpd / totalVpdRange) * 100;

const totalHumidityRange = this.max_humidity - this.min_humidity;

let showHumidity = humidity;
let calculatedHumidity = (this.max_humidity - (percentageVpd * totalHumidityRange / 100)).toFixed(1);
if (sensor.show_calculated_rh === true) {
showHumidity = calculatedHumidity;
}

let card = this.content.querySelector(`ha-card[data-sensor="${sensor.name}"]`);
Expand All @@ -46,7 +59,7 @@ export const bar = {
html += `<span class="vpd-title">${sensor.name}</span>`;
}
html += `<span class="vpd-value">${vpd} ${this.kpa_text || ''}</span>`;
html += `<span class="vpd-rh">${humidity}%</span>`;
html += `<span class="vpd-rh">${showHumidity}%</span>`;
html += `<span class="vpd-temp">${temperature} ${this.unit_temperature}</span>`;
html += `<span style="background: ${this.getColorForVpd(vpd)}" class="vpd-state ${this.getPhaseClass(vpd)}"><span>${this.getPhaseClass(vpd)}</span></span>`;
html += `<span class="vpd-history" style="float:right;"><canvas></canvas></span>`;
Expand All @@ -56,7 +69,6 @@ export const bar = {
});
}
}
console.log()
this.updateBars();
this.updateVPDLegend();

Expand All @@ -83,25 +95,34 @@ export const bar = {
}
},
updateBars() {
let vpd = 0;
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.getLeafTemperatureOffset();
const humidity = this.toFixedNumber(this._hass.states[sensor.humidity].state, 1);
const temperature = this.toFixedNumber(this._hass.states[sensor.temperature].state, 1);
let leafTemperature = this.toFixedNumber(temperature - this.getLeafTemperatureOffset());
if (sensor.leaf_temperature !== undefined) {
leafTemperature = this._hass.states[sensor.leaf_temperature].state;
leafTemperature = this.toFixedNumber(this._hass.states[sensor.leaf_temperature].state);
}
let vpd;
if (sensor.vpd !== undefined) {
vpd = this._hass.states[sensor.vpd].state;
vpd = this.toFixedNumber(this._hass.states[sensor.vpd].state);
} else {
vpd = this.calculateVPD(this.toFixedNumber(leafTemperature), this.toFixedNumber(temperature), this.toFixedNumber(humidity)).toFixed(2);
vpd = this.calculateVPD(leafTemperature, temperature, humidity).toFixed(2);
}

let showHumidity = humidity;
if (sensor.show_calculated_rh === true) {
showHumidity = this.calculateRH(temperature - 2, temperature, vpd).toFixed(1);
}
let sensorName = sensor.name;
if (sensorName === undefined) {
sensorName = 'Sensor ' + (index + 1);
}
let card = this.content.querySelector(`ha-card[data-sensor="${sensor.name}"]`);
// get the bar from card
let bar = card.querySelector('.bar');
bar.querySelector('.vpd-title').innerText = sensor.name;
bar.querySelector('.vpd-title').innerText = sensorName;
bar.querySelector('.vpd-value').innerText = `${vpd} ${this.kpa_text}`;
bar.querySelector('.vpd-rh').innerText = `${humidity}%`;
bar.querySelector('.vpd-rh').innerText = `${showHumidity}%`;
bar.querySelector('.vpd-temp').innerText = `${temperature}${this.unit_temperature}`;
bar.querySelector('.vpd-state span').innerText = this.getPhaseClass(vpd);
bar.querySelector('.vpd-state').style.background = this.getColorForVpd(vpd);
Expand Down
54 changes: 49 additions & 5 deletions dist/chart.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {
ha-card {
overflow: hidden;
}

div.vpd-chart-view, div.vpd-chart-view .vpd-card-container {
height: 100%;
width: 100%;
min-height: 50px;
Expand Down Expand Up @@ -62,7 +66,6 @@ ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {
}

.vpd-chart-view .custom-tooltip {
pointer-events: none;
transform: translate(-50%);
}

Expand Down Expand Up @@ -225,11 +228,20 @@ ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {
.vpd-chart-view .custom-tooltip span {
padding-left: 5px;
padding-right: 5px;
border-right: 1px solid #999999;
border-left: 1px solid #999999;
}

.vpd-chart-view .custom-tooltip span:last-child {
border-right: 0;
.vpd-chart-view .custom-tooltip span:first-child {
border-left: 0;
}

.vpd-chart-view .custom-tooltip.active {
background-color: #000000;
background-color: hsla(0, 0%, 20%, 0.9);
border-top: 3px solid #ffffff;
/* box shadow top */
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
color: #ffffff;
}

.vpd-chart-view .temperature-axis-label {
Expand All @@ -251,8 +263,13 @@ ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {
pointer-events: none;
}

.vpd-chart-view #sensors {
pointer-events: all;
}

.vpd-chart-view #sensors .custom-tooltip {
margin-bottom: 9px;
cursor: pointer;
}

.vpd-chart-view #sensors .sensor-triangle {
Expand Down Expand Up @@ -298,4 +315,31 @@ ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {

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

.vpd-chart-view .tooltipAdditionalInformations {
display: none;
}

.vpd-chart-view .vpd-legend {
display: block;
position: absolute;
width: 99%;
bottom: 10px;
z-index: 3;
}

.vpd-chart-view .vpd-legend .sensor-legend {
justify-content: center;
align-items: center;
padding: 5px;
float: right;
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
font-size: 10px;
border-radius: 3px;
z-index: 3;
display: inline;
cursor: pointer;
margin-right: 5px;
}
Loading

0 comments on commit c294972

Please sign in to comment.