diff --git a/README.md b/README.md index aac39db..7ca10ba 100644 --- a/README.md +++ b/README.md @@ -60,13 +60,11 @@ wget -O - https://get.hacs.xyz | bash - If you don't have the menu than go to `http:///config/lovelace/resources`\ and add the following:\ \ - url: `/local/community/ha-vpd-chart/ha-vpd-chart.js\`\ + url: `/local/community/ha-vpd-chart/ha-vpd-chart.js`\ type: `module` **Note:** After adding the resource, you may need to restart Home Assistant. -Follow the steps above to store the file locally and include it as a resource. - ## Usage Easy start as Chart View: @@ -115,6 +113,7 @@ enable_triangle: true #optional enable_crosshair: true #optional enable_fahrenheit: false #optional enable_zoom: true #optional +enable_show_always_informations: true #optional enable_legend: true #optional leaf_temperature_offset: 2 || input_number.leaf_offset_example #optional sensors: diff --git a/dist/chart.js b/dist/chart.js index d05a17e..1863c42 100644 --- a/dist/chart.js +++ b/dist/chart.js @@ -63,21 +63,25 @@ export const chart = { newZoomLevel = Math.round(newZoomLevel * 100) / 100; // Rundung auf 2 Dezimalstellen if (newZoomLevel !== this.zoomLevel) { this.zoomLevel = newZoomLevel; - 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.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})`; - // custom-tooltip fontsize + this.querySelectorAll('.custom-tooltip').forEach(tooltip => { tooltip.style.fontSize = `${12 / this.zoomLevel}px`; tooltip.style.padding = `${7 / this.zoomLevel}px`; + if (tooltip.querySelector('.cf-icon-svg')) { + tooltip.querySelector('.cf-icon-svg').style.width = `${13 / this.zoomLevel}px`; + tooltip.querySelector('.cf-icon-svg').style.height = `${13 / this.zoomLevel}px`; + } }); } }, @@ -89,6 +93,23 @@ export const chart = { this.addEventListener('wheel', this.handleZoom.bind(this)); this.addEventListener('mousedown', this.handleMouseDown.bind(this)); this.addEventListener('mouseup', this.handleMouseUp.bind(this)); + this.addEventListener('auxclick', (event) => { + if (event.button === 1) { + this.zoomLevel = 1; + 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})`; + this.querySelectorAll('.custom-tooltip').forEach(tooltip => { + tooltip.style.fontSize = `${12 / this.zoomLevel}px`; + tooltip.style.padding = `${7 / this.zoomLevel}px`; + if (tooltip.querySelector('.cf-icon-svg')) { + tooltip.querySelector('.cf-icon-svg').style.width = `${13 / this.zoomLevel}px`; + tooltip.querySelector('.cf-icon-svg').style.height = `${13 / this.zoomLevel}px`; + } + }); + } + }); } }, updateGhostMapPeriodically() { @@ -98,8 +119,19 @@ export const chart = { } }, - handleMouseDown() { + handleMouseDown(event) { this.isPanning = true; + + this.startX = event.clientX; + this.startY = event.clientY; + + const computedStyle = window.getComputedStyle(this.content); + const matrix = new WebKitCSSMatrix(computedStyle.transform); + + this.startLeft = matrix.m41; + this.startTop = matrix.m42; + + event.preventDefault(); }, handleMouseUp() { this.isPanning = false; @@ -122,22 +154,31 @@ export const chart = { const vpd = this.calculateVPD(leafTemperature, temperature, humidity); this.buildMouseTooltip(event, humidity, temperature, vpd); + + if (this.enable_crosshair) { + const mouseHorizontalLine = this.querySelector(`.mouse-horizontal-line`); + const mouseVerticalLine = this.querySelector(`.mouse-vertical-line`); + + mouseHorizontalLine.style.top = `${y / this.zoomLevel}px`; + mouseVerticalLine.style.left = `${x / this.zoomLevel}px`; + mouseHorizontalLine.style.opacity = '1'; + mouseVerticalLine.style.opacity = '1'; + } + + if (!this.isPanning) return; - // pan the chart with mouse drag - this.content.style.cursor = 'grabbing'; - let offsetX = event.movementX / this.zoomLevel; - let offsetY = event.movementY / this.zoomLevel; - this.content.scrollLeft -= offsetX; - this.content.scrollTop -= offsetY; + if (this.zoomLevel === 1) return; + const deltaX = event.clientX - this.startX; + const deltaY = event.clientY - this.startY; + let newLeft = this.startLeft + deltaX; + let newTop = this.startTop + deltaY; + + this.content.style.transform = `translate(${newLeft}px, ${newTop}px) scale(${this.zoomLevel})`; + this.sensordom.style.transform = `translate(${newLeft}px, ${newTop}px) scale(${this.zoomLevel})`; + this.ghostmapDom.style.transform = `translate(${newLeft}px, ${newTop}px) scale(${this.zoomLevel})`; + this.mouseTooltip.style.transform = `translate(${newLeft}px, ${newTop}px) scale(${this.zoomLevel})`; - /* - const offsetX = (event.clientX - rect.left) / this.zoomLevel; - 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`;*/ }, positionTooltip(tooltip, percentageHumidity) { const containerWidth = this.content.offsetWidth; @@ -203,6 +244,7 @@ export const chart = { const div = document.createElement('div'); div.className = `cell ${segment.className}`; div.style.backgroundColor = segment.color; + div.style.boxShadow = `0 0 0 1px ${segment.color}`; div.style.width = `${adjustedWidth}%`; rowElement.appendChild(div); @@ -360,6 +402,7 @@ export const chart = { `; sensors.innerHTML += htmlTemplate; + this.updatePointer(index, percentageHumidity, percentageTemperature, sensor.name, vpd, showHumidity, temperature); } else { this.updatePointer(index, percentageHumidity, percentageTemperature, sensor.name, vpd, showHumidity, temperature); } diff --git a/dist/ghostmap.js b/dist/ghostmap.js index 9f77cad..8e329b9 100644 --- a/dist/ghostmap.js +++ b/dist/ghostmap.js @@ -40,7 +40,7 @@ export const ghostmap = { temperatures.forEach((temperature, tempIndex) => { if (humidities[tempIndex]) { opacityFade -= fadeStep; - let humidity = (humidities[tempIndex].state - this.getLeafTemperatureOffset()); + let humidity = (humidities[tempIndex].state); const circle = this.createCircle(index, tempIndex, temperature, humidity, opacityFade); fragment.appendChild(circle); } @@ -61,7 +61,9 @@ 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.dataset.humidity = humidity; + circle.dataset.temperature = temperature.state; return circle; } diff --git a/dist/ha-vpd-chart-editor.js b/dist/ha-vpd-chart-editor.js index 2210cf5..a7f6fc6 100644 --- a/dist/ha-vpd-chart-editor.js +++ b/dist/ha-vpd-chart-editor.js @@ -132,10 +132,6 @@ export class HaVpdChartEditor extends HTMLElement { this._hass = hass; } - get _sensors() { - return this.config.sensors || []; - } - get _air_text() { return this.config.air_text || ''; } @@ -519,7 +515,7 @@ export class HaVpdChartEditor extends HTMLElement { } }); - let vpdPhases = this._vpd_phases; + let vpdPhases = this.config.vpd_phases; const sliderContainer = this.shadowRoot.querySelector('#slider-container'); let rangesArray = this.generateRangesArray(vpdPhases); diff --git a/dist/ha-vpd-chart.js b/dist/ha-vpd-chart.js index 8cfaf49..a1c328e 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.4.9"; +window.vpdChartVersion = "1.5.0"; import {methods} from './methods.js'; import {chart} from './chart.js';