Skip to content

Commit

Permalink
added: ghostmap click lets ghostmap stay now, click again to hide
Browse files Browse the repository at this point in the history 
fix: for trying define property
fix: for fireEvent
  • Loading branch information
@mentalilll
mentalilll committed Jul 31, 2024
1 parent 0e71eaa commit 109032e
Show file tree
Hide file tree
Showing 3 changed files with 45 additions and 35 deletions.
21 changes: 15 additions & 6 deletions dist/chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ export const chart = {
}
},

handleMouseDown(event) {
handleMouseDown() {
this.isPanning = true;
},
handleMouseUp() {
Expand Down Expand Up @@ -351,11 +351,18 @@ export const chart = {
if (!pointer.isConnected) {
pointer.addEventListener('mouseover', this.showSensorDetails.bind(this, index));
pointer.addEventListener('mouseleave', this.hideSensorDetails.bind(this, index));
pointer.addEventListener('click', this.toggleSensorDetails.bind(this, index));
}

return {pointer, horizontalLine, verticalLine, tooltip};
},

toggleSensorDetails(index) {
this.clickedTooltip = !this.clickedTooltip;
if (this.clickedTooltip) {
this.hideSensorDetails(index);
} else {
this.showSensorDetails(index);
}
},
showSensorDetails(index) {
this.querySelectorAll(`.history-circle-${index}`).forEach(circle => circle.style.display = 'block');
this.querySelectorAll('.custom-tooltip').forEach(tooltip => {
Expand All @@ -373,9 +380,11 @@ export const chart = {
});
},
hideSensorDetails(index) {
this.querySelectorAll(`.history-circle-${index}`).forEach(circle => circle.style.display = 'none');
this.querySelectorAll('.custom-tooltip, .horizontal-line, .vertical-line, .sensor-pointer').forEach(el => el.style.display = 'block');
this.querySelectorAll('.custom-tooltip').forEach(tooltip => tooltip.style.opacity = '1');
if (!this.clickedTooltip) {
this.querySelectorAll(`.history-circle-${index}`).forEach(circle => circle.style.display = 'none');
this.querySelectorAll('.custom-tooltip, .horizontal-line, .vertical-line, .sensor-pointer').forEach(el => el.style.display = 'block');
this.querySelectorAll('.custom-tooltip').forEach(tooltip => tooltip.style.opacity = '1');
}
},
buildMouseTooltip(target, targetHumidity = null, targetTemperature = null, targetVpd = null) {
const humidity = targetHumidity?.toFixed(1) || parseFloat(target.getAttribute('data-rh')).toFixed(1);
Expand Down
56 changes: 28 additions & 28 deletions dist/ha-vpd-chart-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,8 +137,9 @@ export class HaVpdChartEditor extends HTMLElement {

handleValueChange = (ev) => {
const target = ev.target;
const configValue = target.getAttribute('configvalue');
const configValue = target.getAttribute('data-configvalue');
let value = target.type === 'checkbox' ? target.checked : target.value;

if (typeof value === 'string' && !isNaN(value)) {
value = this.toFixedNumber(value);
}
Expand All @@ -154,8 +155,14 @@ export class HaVpdChartEditor extends HTMLElement {
if (value === "off") {
value = false;
}
if (this._config[configValue] !== value) {
this._config[configValue] = value;

if (Object.isExtensible(this._config)) {
if (this._config[configValue] !== value) {
this._config[configValue] = value;
fireEvent(this, 'config-changed', {config: this._config});
}
} else {
this._config = {...this._config, [configValue]: value};
fireEvent(this, 'config-changed', {config: this._config});
}
}
Expand Down Expand Up @@ -200,42 +207,42 @@ export class HaVpdChartEditor extends HTMLElement {
<table>
<tr>
<td>
<ha-textfield style="width:100%;" label="Air Text" id="air_text" configvalue="air_text"></ha-textfield>
<ha-textfield style="width:100%;" label="Air Text" id="air_text" data-configvalue="air_text"></ha-textfield>
</td>
<td>
<ha-textfield style="width:100%;" label="RH Text" id="rh_text" configvalue="rh_text"></ha-textfield>
<ha-textfield style="width:100%;" label="RH Text" id="rh_text" data-configvalue="rh_text"></ha-textfield>
</td>
</tr>
<tr>
<td>
<ha-textfield style="width:100%;" label="kPa Text" id="kpa_text" configvalue="kpa_text"></ha-textfield>
<ha-textfield style="width:100%;" label="kPa Text" id="kpa_text" data-configvalue="kpa_text"></ha-textfield>
</td>
<td>
<ha-textfield style="width:100%;" pattern="[0-9]+([.][0-9]+)?" type="number" label="Min Height of Table" id="min_height" configvalue="min_height"></ha-textfield>
<ha-textfield style="width:100%;" pattern="[0-9]+([.][0-9]+)?" type="number" label="Min Height of Table" id="min_height" data-configvalue="min_height"></ha-textfield>
</td>
</tr>
<tr>
<td>
<ha-textfield style="width:100%;" pattern="[0-9]+([.][0-9]+)?" type="number" label="Min Temperature" id="min_temperature" configvalue="min_temperature"></ha-textfield>
<ha-textfield style="width:100%;" pattern="[0-9]+([.][0-9]+)?" type="number" label="Min Temperature" id="min_temperature" data-configvalue="min_temperature"></ha-textfield>
</td>
<td>
<ha-textfield style="width:100%;" pattern="[0-9]+([.][0-9]+)?" type="number" label="Max Temperature" id="max_temperature" configvalue="max_temperature"></ha-textfield>
<ha-textfield style="width:100%;" pattern="[0-9]+([.][0-9]+)?" type="number" label="Max Temperature" id="max_temperature" data-configvalue="max_temperature"></ha-textfield>
</td>
</tr>
<tr>
<td>
<ha-textfield style="width:100%;" pattern="[0-9]+([.][0-9]+)?" type="number" label="Min Humidity" id="min_humidity" configvalue="min_humidity"></ha-textfield>
<ha-textfield style="width:100%;" pattern="[0-9]+([.][0-9]+)?" type="number" label="Min Humidity" id="min_humidity" data-configvalue="min_humidity"></ha-textfield>
</td>
<td>
<ha-textfield style="width:100%;" pattern="[0-9]+([.][0-9]+)?" type="number" label="Max Humidity" id="max_humidity" configvalue="max_humidity"></ha-textfield>
<ha-textfield style="width:100%;" pattern="[0-9]+([.][0-9]+)?" type="number" label="Max Humidity" id="max_humidity" data-configvalue="max_humidity"></ha-textfield>
</td>
</tr>
<tr>
<td>
<ha-textfield style="width:100%;" type="number" label="Leaf Temperature offset" id="leaf_temperature_offset" configvalue="leaf_temperature_offset"></ha-textfield>
<ha-textfield style="width:100%;" type="number" label="Leaf Temperature offset" id="leaf_temperature_offset" data-configvalue="leaf_temperature_offset"></ha-textfield>
</td>
<td>
<ha-textfield style="width:100%;" pattern="[0-9]+([.][0-9]+)?" type="number" label="Ghostmap Hours" id="ghostmap_hours" configvalue="ghostmap_hours"></ha-textfield>
<ha-textfield style="width:100%;" pattern="[0-9]+([.][0-9]+)?" type="number" label="Ghostmap Hours" id="ghostmap_hours" data-configvalue="ghostmap_hours"></ha-textfield>
</td>
</tr>
</table>
Expand All @@ -248,55 +255,55 @@ export class HaVpdChartEditor extends HTMLElement {
<tr>
<td>
<label>
<input type="checkbox" id="is_bar_view" configvalue="is_bar_view">
<input type="checkbox" id="is_bar_view" data-configvalue="is_bar_view">
Bar View
</label>
</td>
<td>
<label>
<input type="checkbox" id="enable_axes" configvalue="enable_axes">
<input type="checkbox" id="enable_axes" data-configvalue="enable_axes">
Enable Axes
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" id="enable_ghostmap" configvalue="enable_ghostmap">
<input type="checkbox" id="enable_ghostmap" data-configvalue="enable_ghostmap">
Enable Ghostmap
</label>
</td>
<td>
<label>
<input type="checkbox" id="enable_triangle" configvalue="enable_triangle">
<input type="checkbox" id="enable_triangle" data-configvalue="enable_triangle">
Enable Triangle
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" id="enable_tooltip" configvalue="enable_tooltip">
<input type="checkbox" id="enable_tooltip" data-configvalue="enable_tooltip">
Enable Tooltip
</label>
</td>
<td>
<label>
<input type="checkbox" id="enable_crosshair" configvalue="enable_crosshair">
<input type="checkbox" id="enable_crosshair" data-configvalue="enable_crosshair">
Enable Mousehover Crosshair
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" id="enable_fahrenheit" configvalue="enable_fahrenheit">
<input type="checkbox" id="enable_fahrenheit" data-configvalue="enable_fahrenheit">
Enable Fahrenheit
</label>
</td>
<td>
<label>
<input type="checkbox" id="enable_zoom" configvalue="enable_zoom">
<input type="checkbox" id="enable_zoom" data-data-configvalue="enable_zoom">
Enable Zoom
</label>
</td>
Expand Down Expand Up @@ -369,14 +376,7 @@ export class HaVpdChartEditor extends HTMLElement {
}
});

const minVPD = this.toFixedNumber(this.calculateVPD(this._max_temperature - this._leaf_temperature_offset, this._max_temperature, this._max_humidity));
const maxVPD = this.toFixedNumber(this.calculateVPD(this._max_temperature - this._leaf_temperature_offset, this._max_temperature, this._min_humidity));

let vpdPhases = this._vpd_phases;
vpdPhases[0].lower = this.toFixedNumber(minVPD);
vpdPhases[vpdPhases.length - 1].upper = maxVPD;

this.vpd_phases = vpdPhases;
const sliderContainer = this.shadowRoot.querySelector('#slider-container');

let rangesArray = this.generateRangesArray(vpdPhases);
Expand Down
3 changes: 2 additions & 1 deletion dist/ha-vpd-chart.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// Set version for the card
window.vpdChartVersion = "1.3.9";
window.vpdChartVersion = "1.4.0";

import {methods} from './methods.js';
import {chart} from './chart.js';
Expand Down Expand Up @@ -56,6 +56,7 @@ class HaVpdChart extends HTMLElement {
this.configMemory = {};
this.ghostmap_hours = 24;
this.unit_temperature = DEFAULT_UNIT_TEMPERATURE;
this.clickedTooltip = false;
}

static get properties() {
Expand Down

0 comments on commit 109032e

Please sign in to comment.