- fixed some smaller bugs on editor

- added qol mouse crosshair on hover
mentalilll · May 22, 2024 · ca87c20 · ca87c20
1 parent b14e91a
commit ca87c20
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 5 deletions.
diff --git 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
@@ -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
@@ -10,6 +10,8 @@ export const chart = {
                     <div id="ghostmap"></div>
                     <div id="sensors"></div>
                     <div class="mouse-custom-tooltip" style="opacity: 0;"></div>
+                    <div class="horizontal-line mouse-horizontal-line" style="opacity: 0;"></div>
+                    <div class="vertical-line mouse-vertical-line" style="opacity: 0;"></div>
                 </ha-card>
             `;
             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
@@ -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 {
             <td>
                 <ha-textfield style="width:100%;" pattern="[0-9]+([.][0-9]+)?" type="number" label="Max Humidity" id="max_humidity" configvalue="max_humidity"></ha-textfield>
             </td>
-        </tr>        
+        </tr>
         <tr>
             <td>
                 <ha-textfield style="width:100%;" pattern="[0-9]+([.][0-9]+)?" type="number" label="Leaf Temperature offset" id="leaf_temperature_offset" configvalue="leaf_temperature_offset"></ha-textfield>
@@ -216,9 +219,16 @@ export class HaVpdChartEditor extends HTMLElement {
                     <label for="enable_tooltip">Enable Tooltip</label>
                 </div>
             </td>
+            <td>
+                <div class="switch-item">
+                    <input type="checkbox" id="enable_crosshair" configvalue="enable_crosshair">
+                    <label for="enable_crosshair">Enable Mousehover Crosshair</label>
+                </div>
+            </td>
         </tr>
     </table>
 </div>
+
         `;
 
         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
@@ -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 => {