fix: RH % calculation

fix: ghostmap zoom bug fix: ghostmap hours fade calculation to show all dots fix: vpd phase bug after using gui editor and some refactoring
mentalilll · Jul 30, 2024 · 131337e · 131337e
1 parent 4670f96
commit 131337e
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 62 deletions.
diff --git a/dist/chart.css b/dist/chart.css
@@ -246,7 +246,7 @@ ha-card.vpd-chart-view, ha-card.vpd-chart-view .vpd-card-container {
     top: 20px; /* Adjust to position outside the chart */
 }
 
-.vpd-chart-view #sensors, .vpd-chart-view #ghostmap {
+.vpd-chart-view #sensors, .vpd-chart-view #ghostmap, .vpd-chart-view #mouse-tooltip {
     width: 100%;
     height: 100%;
     position: absolute;

diff --git a/dist/chart.js b/dist/chart.js
@@ -1,57 +1,53 @@
 export const chart = {
+    initializeChart() {
+        this.zoomLevel = 1;
+        this.minZoom = 1;
+        this.maxZoom = 2;
+        this.innerHTML = `
+        <ha-card class="vpd-chart-view">
+            <style>
+                @import '/hacsfiles/ha-vpd-chart/chart.css?v=${window.vpdChartVersion}'
+            </style>
+            <div id="vpd-card-container" class="vpd-card-container"></div>
+            <div id="ghostmap"></div>
+            <div id="sensors"></div>
+            <div class="mouse-custom-tooltip" style="opacity: 0;"></div>
+            <div id="mouse-tooltip">
+                <div class="horizontal-line mouse-horizontal-line" style="opacity: 0;"></div>
+                <div class="vertical-line mouse-vertical-line" style="opacity: 0;"></div>
+            </div>
+        </ha-card>
+    `;
+        this.content = this.querySelector("div.vpd-card-container");
+        this.sensordom = this.querySelector("div#sensors");
+        this.ghostmapDom = this.querySelector("div#ghostmap");
+        this.mouseTooltip = this.querySelector("div#mouse-tooltip");
+    },
     buildChart() {
         if (!this.content) {
-            this.zoomLevel = 1;
-            this.minZoom = 1;
-            this.maxZoom = 2;
-            this.innerHTML = `
-                <ha-card class="vpd-chart-view">
-                    <style>
-                        @import '/hacsfiles/ha-vpd-chart/chart.css?v=${window.vpdChartVersion}'
-                    </style>
-                    <div id="vpd-card-container" class="vpd-card-container"></div>
-                    <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");
-            this.sensordom = this.querySelector("div#sensors");
+            this.initializeChart.call(this);
             const table = this.buildTable();
             if (!table.isConnected) {
                 this.content.appendChild(table);
-                this.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
-                this.addEventListener('mousemove', this.handleMouseMove.bind(this));
-
-                if (this.enable_zoom) {
-                    this.addEventListener('wheel', this.handleZoom.bind(this));
-                    this.addEventListener('mousedown', this.handleMouseDown.bind(this));
-                    this.addEventListener('mouseup', this.handleMouseUp.bind(this));
-                }
-
-            }
-            if (this.enable_ghostmap) {
-                this.updateGhostMap();
-                setInterval(() => this.updateGhostMap(), 3600000); // Update every hour
+                this.setupEventListeners.call(this);
             }
-
+            this.updateGhostMapPeriodically.call(this);
         } else {
-            this.refreshTable();
+            this.refreshTable.call(this);
         }
 
         if (this.enable_axes) {
             this.addGridLines();
         } else {
             this.removeGridLines();
         }
+
         if (this.min_height > 0) {
             this.content.style.minHeight = `${this.min_height}px`;
             this.querySelector("div.vpd-container").style.minHeight = `${this.min_height}px`;
         }
-        this.buildTooltip();
 
+        this.buildTooltip();
     },
     handleZoom(event) {
         event.preventDefault();
@@ -67,12 +63,33 @@ export const chart = {
             if (zoomDirection > 0) {
                 this.content.style.transformOrigin = `${offsetX}px ${offsetY}px`;
                 this.sensordom.style.transformOrigin = `${offsetX}px ${offsetY}px`;
+                this.ghostmapDom.style.transformOrigin = `${offsetX}px ${offsetY}px`;
+                this.mouseTooltip.style.transformOrigin = `${offsetX}px ${offsetY}px`;
             }
 
             this.content.style.transform = `scale(${this.zoomLevel})`;
             this.sensordom.style.transform = `scale(${this.zoomLevel})`;
+            this.ghostmapDom.style.transform = `scale(${this.zoomLevel})`;
+            this.mouseTooltip.style.transform = `scale(${this.zoomLevel})`;
         }
     },
+
+    setupEventListeners() {
+        this.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
+        this.addEventListener('mousemove', this.handleMouseMove.bind(this));
+        if (this.enable_zoom) {
+            this.addEventListener('wheel', this.handleZoom.bind(this));
+            this.addEventListener('mousedown', this.handleMouseDown.bind(this));
+            this.addEventListener('mouseup', this.handleMouseUp.bind(this));
+        }
+    },
+    updateGhostMapPeriodically() {
+        if (this.enable_ghostmap) {
+            this.updateGhostMap();
+            setInterval(() => this.updateGhostMap(), 3600000); // Update every hour
+        }
+    },
+
     handleMouseDown(event) {
         this.isPanning = true;
     },
@@ -103,6 +120,8 @@ export const chart = {
         const offsetY = (event.clientY - rect.top) / this.zoomLevel;
         this.content.style.transformOrigin = `${offsetX}px ${offsetY}px`;
         this.sensordom.style.transformOrigin = `${offsetX}px ${offsetY}px`;
+        this.ghostmapDom.style.transformOrigin = `${offsetX}px ${offsetY}px`;
+        this.mouseTooltip.style.transformOrigin = `${offsetX}px ${offsetY}px`;
     },
     buildTable() {
         const container = document.createElement('div');
@@ -275,7 +294,10 @@ export const chart = {
                 const totalTemperatureRange = this.max_temperature - this.min_temperature;
                 const percentageTemperature = (relativeTemperature / totalTemperatureRange) * 100;
 
-                const pointerElements = this.createPointer(index, percentageVpd, percentageTemperature, sensor.name, vpd, humidity, temperature);
+                const totalHumidityRange = this.max_humidity - this.min_humidity;
+
+                const currentHumidity = (this.max_humidity - (percentageVpd * totalHumidityRange / 100)).toFixed(1);
+                const pointerElements = this.createPointer(index, percentageVpd, percentageTemperature, sensor.name, vpd, currentHumidity, temperature);
 
                 // Check and append only if elements are Nodes
                 if (pointerElements.pointer instanceof Node) {
@@ -293,7 +315,6 @@ export const chart = {
             }
         });
     },
-
     createPointer(index, percentageHumidity, percentageTemperature, sensorName, vpd, humidity, temperature) {
         const pointer = this.querySelector(`.sensor-pointer[data-index="${index}"]`) || document.createElement('div');
         pointer.setAttribute('data-index', index.toString());

diff --git a/dist/ghostmap.js b/dist/ghostmap.js
@@ -36,21 +36,22 @@ export const ghostmap = {
 
     processSensorData(fragment, temperatures, humidities, index) {
         let opacityFade = 1;
+        let fadeStep = (1 / (temperatures.length - 1)).toFixed(2);
         temperatures.forEach((temperature, tempIndex) => {
             if (humidities[tempIndex]) {
-                opacityFade -= 0.05;
+                opacityFade -= fadeStep;
                 const circle = this.createCircle(index, tempIndex, temperature, humidities[tempIndex].state, opacityFade);
                 fragment.appendChild(circle);
             }
         });
     },
 
     createCircle(index, tempIndex, temperature, humidity, opacityFade) {
-        const relativeHumidity = this.max_humidity - humidity;
+        const relativeHumidity = this.max_humidity - (humidity * this.zoomLevel);
         const totalHumidityRange = this.max_humidity - this.min_humidity;
         const percentageHumidity = (relativeHumidity / totalHumidityRange) * 100;
 
-        const relativeTemperature = temperature.state - this.min_temperature;
+        const relativeTemperature = (temperature.state * this.zoomLevel) - this.min_temperature;
         const totalTemperatureRange = this.max_temperature - this.min_temperature;
         const percentageTemperature = (relativeTemperature / totalTemperatureRange) * 100;
 
@@ -59,7 +60,7 @@ export const ghostmap = {
         circle.style.left = `${percentageHumidity}%`;
         circle.style.bottom = `${100 - percentageTemperature}%`;
         circle.style.opacity = opacityFade;
-        circle.style.boxShadow = `0 0 25px 5px rgba(255, 255, 255, ${opacityFade})`;
+        //  circle.style.boxShadow = `0 0 25px 5px rgba(255, 255, 255, ${opacityFade})`;
 
         return circle;
     }

diff --git a/dist/ha-vpd-chart-editor.js b/dist/ha-vpd-chart-editor.js
@@ -4,7 +4,14 @@ export const fireEvent = (node, type, detail = {}, options = {}) => {
         cancelable: Boolean(options.cancelable),
         composed: options.composed === undefined ? true : options.composed,
     });
-
+    if (detail.config.vpd_phases !== undefined) {
+        if (detail.config.vpd_phases[0] !== undefined) {
+            detail.config.vpd_phases[0].lower = undefined;
+        }
+        if (detail.config.vpd_phases[detail.config.vpd_phases.length - 1] !== undefined) {
+            detail.config.vpd_phases[detail.config.vpd_phases.length - 1].upper = undefined;
+        }
+    }
     event.detail = detail;
     node.dispatchEvent(event);
     return event;
@@ -51,7 +58,7 @@ export class HaVpdChartEditor extends HTMLElement {
 
     get _vpd_phases() {
         return this._config.vpd_phases !== undefined ? this._config.vpd_phases : [
-            {lower: -0.6, upper: 0, className: 'gray-danger-zone', color: '#999999'},
+            {upper: 0, className: 'gray-danger-zone', color: '#999999'},
             {lower: 0, upper: 0.4, className: 'under-transpiration', color: '#1a6c9c'},
             {lower: 0.4, upper: 0.8, className: 'early-veg', color: '#22ab9c'},
             {lower: 0.8, upper: 1.2, className: 'late-veg', color: '#9cc55b'},

diff --git a/dist/ha-vpd-chart.js b/dist/ha-vpd-chart.js
@@ -1,15 +1,29 @@
 // Set version for the card
-window.vpdChartVersion = "1.3.7";
+window.vpdChartVersion = "1.3.8";
 
 import {methods} from './methods.js';
 import {chart} from './chart.js';
 import {bar} from './bar.js';
 import {ghostmap} from './ghostmap.js';
 import {HaVpdChartEditor} from './ha-vpd-chart-editor.js';
 
+const DEFAULT_UNIT_TEMPERATURE = '°C';
+const FAHRENHEIT_UNIT_TEMPERATURE = '°F';
+const CONFIG_KEYS = [
+    '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_crosshair', 'enable_fahrenheit', 'ghostmap_hours',
+    'unit_temperature', 'enable_zoom'
+];
+
 class HaVpdChart extends HTMLElement {
     constructor() {
         super();
+        this.initializeDefaults();
+    }
+
+    initializeDefaults() {
         this.vpd_phases = [
             {lower: -0.6, upper: 0, className: 'gray-danger-zone', color: '#999999'},
             {lower: 0, upper: 0.4, className: 'under-transpiration', color: '#1a6c9c'},
@@ -41,8 +55,7 @@ class HaVpdChart extends HTMLElement {
         this.updateRunning = false;
         this.configMemory = {};
         this.ghostmap_hours = 24;
-        this.unit_temperature = '°C';
-
+        this.unit_temperature = DEFAULT_UNIT_TEMPERATURE;
     }
 
     static get properties() {
@@ -77,36 +90,30 @@ class HaVpdChart extends HTMLElement {
 
     set hass(hass) {
         this._hass = hass;
+        this.updateChartView();
+        this.updateTemperatureUnit();
+    }
+
+    updateChartView() {
         this.is_bar_view ? this.buildBarChart() : this.buildChart();
+    }
 
-        if (this.config.enable_fahrenheit) {
-            this.unit_temperature = '°F';
-        } else {
-            this.unit_temperature = '°C';
-        }
+    updateTemperatureUnit() {
+        this.unit_temperature = this.config.enable_fahrenheit ? FAHRENHEIT_UNIT_TEMPERATURE : DEFAULT_UNIT_TEMPERATURE;
     }
 
     static getConfigElement() {
         return document.createElement("ha-vpd-chart-editor");
     }
 
-    // if config updated
     setConfig(config) {
         this.config = config;
 
         if (!config.sensors) {
             throw new Error('You need to define sensors');
         }
 
-        const configKeys = [
-            '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_crosshair', 'enable_fahrenheit', 'ghostmap_hours',
-            'unit_temperature', 'enable_zoom'
-        ];
-
-        configKeys.forEach(key => {
+        CONFIG_KEYS.forEach(key => {
             if (key in config) {
                 this[key] = config[key];
             }
@@ -135,4 +142,4 @@ window.customCards.push({
 });
 console.groupCollapsed(`%c HA-VPD-CHART v${window.vpdChartVersion} Installed`, "color: green; background: black; font-weight: bold;");
 console.log('Readme: ', 'https://github.com/mentalilll/ha-vpd-chart');
-console.groupEnd();
+console.groupEnd();