From ca87c20faa0f3f658d46d0cc8fe7c65b63df6baf Mon Sep 17 00:00:00 2001 From: mentalilll Date: Wed, 22 May 2024 22:08:25 +0200 Subject: [PATCH] - fixed some smaller bugs on editor - added qol mouse crosshair on hover --- README.md | 2 ++ dist/chart.css | 7 ++++++- dist/chart.js | 32 ++++++++++++++++++++++++++++++++ dist/ha-vpd-chart-editor.js | 16 ++++++++++++++-- dist/ha-vpd-chart.js | 8 ++++++-- 5 files changed, 60 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f1a6be2..610a5b2 100644 --- a/README.md +++ b/README.md @@ -100,6 +100,7 @@ enable_tooltip: true #optional enable_axes: true #optional enable_ghostmap: true #optional enable_triangle: false #optional +enable_crosshair: true #optional sensors: - temperature: sensor.temperature_2 humidity: sensor.humidity_2 @@ -146,6 +147,7 @@ vpd_phases: #optional | 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 | **Default `vpd_phases` Configuration:** diff --git a/dist/chart.css b/dist/chart.css index 06421cf..9000110 100644 --- a/dist/chart.css +++ b/dist/chart.css @@ -30,7 +30,12 @@ ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container { background-color: #1a6c9c; } - +.vpd-card-container, .mouse-horizontal-line, .mouse-vertical-line { + cursor:crosshair; +} +.mouse-horizontal-line, .mouse-vertical-line { + pointer-events: none; +} .vpd-chart-view table { width: 100%; height: 100% !important; diff --git a/dist/chart.js b/dist/chart.js index b5d6235..eea8206 100644 --- a/dist/chart.js +++ b/dist/chart.js @@ -10,6 +10,8 @@ export const chart = {
+
+
`; this.content = this.querySelector("div.vpd-card-container"); @@ -151,12 +153,18 @@ export const chart = { handleMouseLeave() { const banner = this.querySelector('.mouse-custom-tooltip'); + const verticalLine = this.querySelector('.mouse-vertical-line'); + const horizontalLine = this.querySelector('.mouse-horizontal-line'); const fadeOut = setInterval(() => { if (!banner.style.opacity) { banner.style.opacity = 1; + verticalLine.style.opacity = 1; + horizontalLine.style.opacity = 1; } if (banner.style.opacity > 0) { banner.style.opacity -= 0.1; + verticalLine.style.opacity -= 0.1; + horizontalLine.style.opacity -= 0.1; } else { clearInterval(fadeOut); } @@ -272,5 +280,29 @@ export const chart = { const tooltip = this.querySelector('.mouse-custom-tooltip'); tooltip.innerHTML = `${this.kpa_text ? this.kpa_text + ':' : ''} ${vpd} | ${this.rh_text ? this.rh_text + ':' : ''} ${humidity}% | ${this.air_text ? this.air_text + ':' : ''} ${temperature}°C | ${target.classList[1]}`; tooltip.style.opacity = '1'; + if (this.enable_crosshair) { + let mouseHorizontalLine = this.querySelector(`.mouse-horizontal-line`) || document.createElement('div'); + mouseHorizontalLine.className = `horizontal-line mouse-horizontal-line`; + + let mouseVerticalLine = this.querySelector(`.mouse-vertical-line`) || document.createElement('div'); + mouseVerticalLine.className = `vertical-line mouse-vertical-line`; + + let container = this.querySelector('.vpd-card-container'); + + const moveHandler = (event) => { + const {clientX, clientY} = event; + // offset from vpd card container + const rect = container.getBoundingClientRect(); + const x = clientX - rect.left; + const y = clientY - rect.top; + + mouseHorizontalLine.style.top = `${y}px`; + mouseVerticalLine.style.left = `${x}px`; + mouseVerticalLine.style.opacity = `1`; + mouseHorizontalLine.style.opacity = `1`; + + }; + target.addEventListener('mousemove', moveHandler); + } }, }; diff --git a/dist/ha-vpd-chart-editor.js b/dist/ha-vpd-chart-editor.js index b878e5e..f0bb08f 100644 --- a/dist/ha-vpd-chart-editor.js +++ b/dist/ha-vpd-chart-editor.js @@ -60,7 +60,7 @@ export class HaVpdChartEditor extends HTMLElement { return this._config.min_height !== undefined ? this._config.min_height : 200; } get _leaf_temperature_offset() { - return this._config.leaf_temperature_offset !== undefined ? this._config.leaf_temperature_offset : 200; + return this._config.leaf_temperature_offset !== undefined ? this._config.leaf_temperature_offset : 2; } get _is_bar_view() { @@ -78,6 +78,9 @@ export class HaVpdChartEditor extends HTMLElement { get _enable_triangle() { return this._config.enable_triangle || false; } + get _enable_crosshair() { + return this._config.enable_crosshair || true; + } get _enable_tooltip() { return this._config.enable_tooltip !== undefined ? this._config.enable_tooltip : false; @@ -168,7 +171,7 @@ export class HaVpdChartEditor extends HTMLElement { - + @@ -216,9 +219,16 @@ export class HaVpdChartEditor extends HTMLElement { + +
+ + +
+ + `; this.shadowRoot.querySelectorAll('ha-textfield, ha-checkbox, label, input').forEach(input => { @@ -242,6 +252,7 @@ export class HaVpdChartEditor extends HTMLElement { const enableAxes = this.shadowRoot.querySelector('#enable_axes'); const enableGhostmap = this.shadowRoot.querySelector('#enable_ghostmap'); const enableTriangle = this.shadowRoot.querySelector('#enable_triangle'); + const enableCrosshair = this.shadowRoot.querySelector('#enable_crosshair'); const enableTooltip = this.shadowRoot.querySelector('#enable_tooltip'); @@ -259,6 +270,7 @@ export class HaVpdChartEditor extends HTMLElement { if (enableAxes) enableAxes.checked = this._enable_axes; if (enableGhostmap) enableGhostmap.checked = this._enable_ghostmap; if (enableTriangle) enableTriangle.checked = this._enable_triangle; + if (enableCrosshair) enableCrosshair.checked = this._enable_crosshair; if (enableTooltip) enableTooltip.checked = this._enable_tooltip; } diff --git a/dist/ha-vpd-chart.js b/dist/ha-vpd-chart.js index b0621f5..619808b 100644 --- a/dist/ha-vpd-chart.js +++ b/dist/ha-vpd-chart.js @@ -1,5 +1,5 @@ // Set version for the card -window.vpdChartVersion = "1.2.4"; +window.vpdChartVersion = "1.2.5"; import {methods} from './methods.js'; import {chart} from './chart.js'; @@ -17,6 +17,7 @@ class HaVpdChart extends HTMLElement { max_temperature: {type: Number}, min_humidity: {type: Number}, max_humidity: {type: Number}, + leaf_temperature_offset: {type: Number}, min_height: {type: Number}, vpd_phases: {type: Array}, air_text: {type: String}, @@ -27,6 +28,7 @@ class HaVpdChart extends HTMLElement { enable_axes: {type: Boolean}, enable_ghostmap: {type: Boolean}, enable_triangle: {type: Boolean}, + enable_crosshair: {type: Boolean}, }; } static getConfigElement() { @@ -49,6 +51,7 @@ class HaVpdChart extends HTMLElement { this.min_humidity = 10; this.max_humidity = 90; this.min_height = 200; + this.leaf_temperature_offset = 2; this.steps_temperature = .1; this.steps_humidity = .1; this.enable_tooltip = true; @@ -58,6 +61,7 @@ class HaVpdChart extends HTMLElement { this.enable_axes = true; this.enable_ghostmap = true; this.enable_triangle = false; + this.enable_crosshair = false; this.updateRunning = false; } @@ -76,7 +80,7 @@ class HaVpdChart extends HTMLElement { 'vpd_phases', 'sensors', 'air_text', 'rh_text', 'kpa_text', 'min_temperature', 'max_temperature', 'min_humidity', 'max_humidity', 'min_height', 'is_bar_view', 'enable_axes', 'enable_ghostmap', 'enable_triangle', - 'enable_tooltip' + 'enable_tooltip', 'enable_crosshair' ]; configKeys.forEach(key => {