Skip to content

Commit

Permalink
added: middle mouse click to reset zoom scale
Browse files Browse the repository at this point in the history 
added: drag and drop instead of panning
fixed: ghostmap offset was wrong
fixed: zoom stripe background bug
  • Loading branch information
@mentalilll
mentalilll committed Aug 18, 2024
1 parent d5b003d commit 9074afd
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 32 deletions.
5 changes: 2 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,11 @@ wget -O - https://get.hacs.xyz | bash -
If you don't have the menu than go to `http://<your_homeassistant_instance:8123>/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:
Expand Down Expand Up @@ -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:
Expand Down
85 changes: 64 additions & 21 deletions dist/chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`;
}
});
}
},
Expand All @@ -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() {
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -360,6 +402,7 @@ export const chart = {
</div>
`;
sensors.innerHTML += htmlTemplate;
this.updatePointer(index, percentageHumidity, percentageTemperature, sensor.name, vpd, showHumidity, temperature);
} else {
this.updatePointer(index, percentageHumidity, percentageTemperature, sensor.name, vpd, showHumidity, temperature);
}
Expand Down
6 changes: 4 additions & 2 deletions dist/ghostmap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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;
}
Expand Down
6 changes: 1 addition & 5 deletions dist/ha-vpd-chart-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 || '';
}
Expand Down Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 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.4.9";
window.vpdChartVersion = "1.5.0";

import {methods} from './methods.js';
import {chart} from './chart.js';
Expand Down

0 comments on commit 9074afd

Please sign in to comment.