Skip to content

Commit

Permalink
feat: Implement MultiRange Slider
Browse files Browse the repository at this point in the history 
feat: Improve VPD Calculation
feat: Implement VPD Phases Editor GUI
feat: Implement VPD Phases Editor GUI Validation
feat: Implement VPD Phases Editor GUI Error Handling
feat: Implement VPD Phases Editor GUI Scaling
feat: Implement VPD Phases Formula GUI Editor (Create your own Formula!)
feat: Implement VPD Phases Editor GUI Localization
feat: Implement VPD Phases Editor GUI Easy Phase Handling
fix: Bug Fixes
fix: Performance issues

maybe there are some issues. if you are not happy with this version. just use 1.2.6 till 1.3.0 is stable :)
  • Loading branch information
@mentalilll
mentalilll committed May 26, 2024
1 parent a00088c commit 34a096d
Show file tree
Hide file tree
Showing 8 changed files with 809 additions and 70 deletions.
14 changes: 12 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,8 +111,13 @@ sensors:
vpd: sensor.vpd #optional
name: Tent 2
vpd_phases: #optional
- upper: 0.4
- upper: 0.0
className: gray-danger-zone
color: #999999
- lower: 0.0
upper: 0.4
className: under-transpiration
color: #0000FF
- lower: 0.4
upper: 0.8
className: early-veg
Expand All @@ -124,6 +129,10 @@ vpd_phases: #optional
className: mid-late-flower
- lower: 1.6
className: danger-zone
calculateVPD: |2-
const VPleaf = 610.7 * Math.exp(17.27 * Tleaf / (Tleaf + 237.3)) / 1000;
const VPair = 610.7 * Math.exp(17.27 * Tair / (Tair + 237.3)) / 1000 * RH / 100;
return VPleaf - VPair;
```

## Configuration Parameters
Expand All @@ -147,7 +156,8 @@ 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 |
| enable_crosshair | boolean | optional | `true` | Enable MouseHover Crosshair |
| calculateVPD | string | optional | See description | Custom function to calculate VPD. |

**Default `vpd_phases` Configuration:**

Expand Down
27 changes: 13 additions & 14 deletions dist/bar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,13 +123,13 @@ export const bar = {
const scaleX = width / (sensorData.length - 1);
const scaleY = height / (maxY - minY);

var previousX;
var previousY;
let previousX;
let previousY;

sensorData.forEach((data, index) => {
const x = index * scaleX + padding;
const y = padding + height - (parseFloat(data.vpd) - minY) * scaleY;
var color = this.getColorForVpd(parseFloat(data.vpd));
const color = this.getColorForVpd(parseFloat(data.vpd));

ctx.beginPath();
ctx.moveTo(x, y);
Expand All @@ -156,17 +156,16 @@ export const bar = {
});
},
getColorForVpd(vpd) {
const colorMap = {
'gray-danger-zone': '#999999',
'under-transpiration': '#1a6c9c',
'early-veg': '#22ab9c',
'late-veg': '#9cc55b',
'mid-late-flower': '#e7c12b',
'danger-zone': '#ce4234',
};


return colorMap[this.getPhaseClass(vpd)];
for (const phase of this.vpd_phases) {
if (phase.upper === undefined) {
if (vpd >= phase.lower) {
return phase.color;
}
} else if (vpd <= phase.upper && (!phase.lower || vpd >= phase.lower)) {
return phase.color;
}
}
return '';
},
async renderMiniHistory(sensor) {

Expand Down
70 changes: 46 additions & 24 deletions dist/chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,31 @@ export const chart = {
`;
this.content = this.querySelector("div.vpd-card-container");
const table = this.buildTable();
this.content.appendChild(table);
if (this.enable_axes) {
this.addGridLines();
if (!table.isConnected) {
this.content.appendChild(table);
this.content.addEventListener('mouseover', this.handleMouseOver.bind(this));
this.addEventListener('mouseleave', this.handleMouseLeave.bind(this));
}
if (this.enable_ghostmap) {
this.updateGhostMap();
setInterval(() => this.updateGhostMap(), 3600000); // Update every hour
}
} else {
this.refreshTable();
}


this.content.addEventListener('mouseover', this.handleMouseOver.bind(this));
this.addEventListener('mouseleave', this.handleMouseLeave.bind(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`;
}

if (this.enable_ghostmap) {
this.updateGhostMap();
setInterval(() => this.updateGhostMap(), 3600000); // Update every hour
}


this.buildTooltip();
},
buildTable() {
Expand All @@ -42,61 +49,76 @@ export const chart = {
let vpdMatrix = this.createVPDMatrix(this.min_temperature, this.max_temperature, this.steps_temperature, this.max_humidity, this.min_humidity, this.steps_humidity);
const maxHumidity = this.max_humidity;
const stepsHumidity = this.steps_humidity;

const fragment = document.createDocumentFragment();
vpdMatrix.forEach(row => {
const rowElement = document.createElement('div');
rowElement.className = 'vpd-row';

let segments = [];
let currentClass = null;
let startIndex = 0;

// Collect segments and their widths
row.forEach((cell, index) => {
if (currentClass === null) {
currentClass = cell.className;
startIndex = index;
} else if (cell.className !== currentClass) {
const segmentWidth = (index - startIndex) * stepsHumidity * 100 / maxHumidity;
segments.push({ className: currentClass, width: segmentWidth });
let customColor = this.getColorByClassName(currentClass);
segments.push({ className: currentClass, width: segmentWidth, color: customColor });

currentClass = cell.className;
startIndex = index;
}
});

// Add the last segment
if (startIndex < row.length) {
const segmentWidth = (row.length - startIndex) * stepsHumidity * 100 / maxHumidity;
segments.push({ className: currentClass, width: segmentWidth });
let customColor = this.getColorByClassName(currentClass);
segments.push({ className: currentClass, width: segmentWidth, color: customColor });
}

// Calculate total width and adjust segments
const totalWidth = segments.reduce((sum, segment) => sum + segment.width, 0);
const widthAdjustmentFactor = 100 / totalWidth;

segments.forEach(segment => {
const adjustedWidth = (segment.width * widthAdjustmentFactor).toFixed(2);
const div = document.createElement('div');
div.className = `cell ${segment.className}`;
div.style.backgroundColor = segment.color;
div.style.width = `${adjustedWidth}%`;

rowElement.appendChild(div);
});

container.appendChild(rowElement);
fragment.appendChild(rowElement);
});

container.appendChild(fragment);

return container;
},
refreshTable() {
if(this.shouldUpdate()) {
const table = this.buildTable();
this.content.replaceChildren(table);
}
},
addGridLines() {
const grid = document.createElement('div');
const grid = this.querySelector('.vpd-grid') || document.createElement('div');
grid.className = 'vpd-grid';

this.addHorizontalGridLines(grid);
this.addVerticalGridLines(grid);

this.content.appendChild(grid);
if(!grid.isConnected) {
this.addHorizontalGridLines(grid);
this.addVerticalGridLines(grid);
this.content.appendChild(grid);
}
},
removeGridLines() {
const grid = this.querySelector('.vpd-grid');
if (grid) {
grid.remove();
}
},

addHorizontalGridLines(grid) {
const temperatureSteps = 7;
for (let i = 0; i <= temperatureSteps; i++) {
Expand Down
Loading

0 comments on commit 34a096d

Please sign in to comment.