temperatur-rlf-vpd-messgeraet
v0.1.5
Published
Temperatur, RLF und VPD Messgeraet Anzeige
Downloads
1,380
Maintainers
byndroidReadme
Temperatur-RLF-VPD-Messgerät
Eine moderne, framework-unabhängige Web Component (<climate-instrument>) zur gleichzeitigen Anzeige von Temperatur, relativer Luftfeuchtigkeit (RLF) und VPD (Vapor Pressure Deficit).
Mit diesem Instrument lassen sich für alle drei Werte individuelle Minimum-, Maximum- sowie farbliche Zonen (Grün für Normal, Gelb für Warnungen, Rot für kritische Bereiche) definieren.
Neu: Das Instrument unterstützt nun drei Darstellungsmodi! Sie können zwischen der klassischen linearen Balken-Ansicht (line), der halbrunden Tacho-Ansicht (semicircle) und der neuen Drei-Anzeigen-Ansicht (threedisplay) wechseln. Außerdem lassen sich die Überschriften nun individuell anpassen und die Temperatur sowie der VPD-Wert werden präzise mit zwei Nachkommastellen dargestellt. Im threedisplay-Modus lassen sich zudem die beiden Viertelkreise unabhängig voneinander horizontal spiegeln.
Installation
Sobald das Paket veröffentlicht ist, kann es über npm installiert werden:
npm install temperatur-rlf-vpd-messgeraetVerwendung in einfachem HTML / Vanilla JavaScript
- Binden Sie das Skript ein.
- Fügen Sie das Tag
<climate-instrument></climate-instrument>in Ihr HTML ein. Nutzen Sie das Attributmode, um das Aussehen zu ändern, unddashboard-titlefür eine eigene Überschrift. - Übergeben Sie die Konfiguration (
config) und die aktuellen Daten (data) per JavaScript.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Climate Instrument Demo</title>
<!-- Importieren der Web Component -->
<script type="module">
import 'temperatur-rlf-vpd-messgeraet';
document.addEventListener('DOMContentLoaded', () => {
const instrument = document.getElementById('my-gauge');
// 1. Konfiguration der Skalen und farbigen Bereiche
instrument.config = {
temperature: {
min: 15, max: 35,
greenZone: { min: 22, max: 26 },
yellowZones: [{ min: 20, max: 22 }, { min: 26, max: 28 }],
redZones: [{ min: 15, max: 20 }, { min: 28, max: 35 }]
},
humidity: {
min: 30, max: 80,
greenZone: { min: 50, max: 65 },
yellowZones: [{ min: 40, max: 50 }, { min: 65, max: 70 }],
redZones: [{ min: 30, max: 40 }, { min: 70, max: 80 }]
},
vpd: {
min: 0.4, max: 1.6,
greenZone: { min: 0.8, max: 1.1 },
yellowZones: [{ min: 0.6, max: 0.8 }, { min: 1.1, max: 1.3 }],
redZones: [{ min: 0.4, max: 0.6 }, { min: 1.3, max: 1.6 }]
}
};
// 2. Aktuelle Daten setzen
instrument.data = {
temperature: 24.52,
humidity: 55,
vpd: 1.05
};
// Beispiel für dynamische Updates:
setTimeout(() => {
instrument.data = { temperature: 27.15, humidity: 48, vpd: 1.25 };
}, 3000);
// Beispiel für das Setzen der Spiegelung via JavaScript
// instrument.mirrorLeft = true;
// instrument.mirrorRight = true;
});
</script>
</head>
<body style="background: #121212; padding: 50px; display: flex; justify-content: center;">
<!-- Verwenden Sie mode="threedisplay" für die neue Drei-Anzeigen-Ansicht -->
<!-- Verwenden Sie mode="semicircle" für die halbrunde Tacho-Anzeige -->
<!-- Verwenden Sie mode="line" oder lassen Sie das Attribut weg für die klassische Balken-Anzeige -->
<!-- Mit mirror-left="true" und mirror-right="false" können Sie die Instrumente im threedisplay-Modus spiegeln -->
<climate-instrument id="my-gauge" mode="threedisplay" mirror-left="true" mirror-right="false" dashboard-title="Mein Gewächshaus Klima"></climate-instrument>
</body>
</html>Verwendung in Angular
Da es sich um eine Standard Web Component handelt, lässt sich diese problemlos in Angular-Anwendungen integrieren.
1. CUSTOM_ELEMENTS_SCHEMA aktivieren
Öffnen Sie Ihr Angular-Modul (z. B. app.module.ts oder die entsprechende Standalone-Component-Datei) und fügen Sie das Schema hinzu, damit Angular das unbekannte Tag <climate-instrument> akzeptiert:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// WICHTIG: Die Web Component importieren, damit sie sich im Browser registriert
import 'temperatur-rlf-vpd-messgeraet';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA], // <-- Hier hinzufügen
bootstrap: [AppComponent]
})
export class AppModule { }2. In der Component (TypeScript) die Daten definieren
// app.component.ts
import { Component } from '@angular/core';
// Importieren Sie die Interfaces aus der Bibliothek für Type-Safety
import { ClimateInstrumentConfig, ClimateData } from 'temperatur-rlf-vpd-messgeraet';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
gaugeConfig: ClimateInstrumentConfig = {
temperature: {
min: 15, max: 35,
greenZone: { min: 22, max: 26 },
yellowZones: [{ min: 20, max: 22 }, { min: 26, max: 28 }],
redZones: [{ min: 15, max: 20 }, { min: 28, max: 35 }]
},
humidity: { /* analog zu oben */ },
vpd: { /* analog zu oben */ }
};
currentData: ClimateData = {
temperature: 24.55,
humidity: 55,
vpd: 1.05
};
}3. Im Template (HTML) verwenden
Da config und data Properties der DOM-Node sind, verwenden Sie in Angular das Property-Binding ([prop]="value"). Die Attribute mode und dashboard-title setzen Sie als normale HTML-Attribute. Wenn Sie boolesche HTML-Attribute wie mirror-left direkt als String in Angular zuweisen (z.B. mirror-left=false), wertet das Instrument nun "false" explizit aus und deaktiviert die Spiegelung, wie man es erwartet:
<!-- app.component.html -->
<div class="dashboard">
<!-- Setzen Sie hier mode="threedisplay", mode="semicircle" oder mode="line" -->
<!-- Sie können mirror-left=false oder mirror-right=true auch direkt ohne eckige Klammern verwenden -->
<climate-instrument
mode="threedisplay"
mirror-left=false
mirror-right=true
dashboard-title="Klima Übersicht"
[config]="gaugeConfig"
[data]="currentData">
</climate-instrument>
</div>Eigenschaften und Attribute
HTML-Attribute
mode("line" | "semicircle" | "threedisplay"): Bestimmt das Erscheinungsbild der Komponente. Standard ist"line"."line": Klassische vertikale Balken."semicircle": Kombinierter halbrunder Tacho für Temperatur und RLF."threedisplay": Zwei separate Halbkreise für Temperatur und RLF sowie ein linearer Balken für VPD.
dashboard-title(string): Bestimmt die angezeigte Überschrift über den Instrumenten. Standard ist"Klima Dashboard".mirror-left(boolean/string): Spiegelt das linke Instrument (Temperatur) im"threedisplay"-Modus horizontal. Kann als<climate-instrument mirror-left="true">oder einfach<climate-instrument mirror-left>verwendet werden. Der Wert"false"wird explizit als inaktiv interpretiert.mirror-right(boolean/string): Spiegelt das rechte Instrument (Luftfeuchtigkeit) im"threedisplay"-Modus horizontal. Funktioniert identisch zumirror-left.
Properties (JavaScript / Angular)
config(ClimateInstrumentConfig): Legt das Aussehen der Skalen fest (Min/Max sowie die grünen, gelben und roten Bereiche). In der"line"-Ansicht werden diese Farben direkt gezeichnet. In der"semicircle"- und"threedisplay"-Ansicht berechnet die Komponente anhand der Min/Max-Werte den Ausschlag der Zeiger.data(ClimateData): Enthält die aktuellen numerischen Werte (temperature,humidity,vpd). Wird dieser Wert aktualisiert, animiert sich der Zeiger auf der Anzeige automatisch zur neuen Position. Temperatur und VPD werden mit zwei Nachkommastellen angezeigt, die Luftfeuchtigkeit als ganzer Wert (ohne Nachkommastellen).mirrorLeft(boolean): Entspricht dem HTML-Attributmirror-left.mirrorRight(boolean): Entspricht dem HTML-Attributmirror-right.
Lizenz
MIT