temperatur-rlf-vpd-messgeraet
v0.1.8
Published
Temperatur, RLF und VPD Messgeraet Anzeige
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.
🌐 Offizielle Testseite: https://bylib.bbnb.link/
Neu: Das Instrument unterstützt nun vier Darstellungsmodi! Sie können zwischen der klassischen linearen Balken-Ansicht (line), der halbrunden Tacho-Ansicht (semicircle), der Drei-Anzeigen-Ansicht (threedisplay) und der neuen Multilinien-Chart-Ansicht (multilinechart) wechseln.
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. - Übergeben Sie die aktuellen Daten (
data) oder für denmultilinechartdie Verlaufsdaten (chartData) per JavaScript.
Beispiel: Standard-Modi (Live-Daten)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Climate Instrument Demo</title>
<script type="module">
import 'temperatur-rlf-vpd-messgeraet';
document.addEventListener('DOMContentLoaded', () => {
const instrument = document.getElementById('my-gauge');
instrument.config = {
temperature: { min: 15, max: 35 },
humidity: { min: 30, max: 80 },
vpd: { min: 0.4, max: 1.6 }
};
instrument.data = {
temperature: 24.52,
humidity: 55,
vpd: 1.05
};
});
</script>
</head>
<body style="background: #121212; padding: 50px; display: flex; justify-content: center;">
<climate-instrument id="my-gauge" mode="threedisplay" mirror-left="true" dashboard-title="Klima"></climate-instrument>
</body>
</html>Beispiel: Neuer Multilinien-Chart (Verlaufsdaten)
Der multilinechart Modus zeigt historische Daten in einem Liniendiagramm an, inklusive der Klimaanlagen-Temperatur (ACtemp) und den Schaltzuständen von bis zu 6 Ports (P1-P6).
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Multi-Line Chart Demo</title>
<script type="module">
import 'temperatur-rlf-vpd-messgeraet';
document.addEventListener('DOMContentLoaded', () => {
const chart = document.getElementById('my-chart');
// Beispieldaten generieren
const now = new Date();
const generateData = (count, startVal, variance) => {
return Array.from({ length: count }, (_, i) => ({
TarihSaat: new Date(now.getTime() - (count - i) * 3600000), // Stündlich rückwärts
value: startVal + (Math.random() * variance * 2 - variance)
}));
};
const generatePortData = (count) => {
return Array.from({ length: count }, (_, i) => ({
TarihSaat: new Date(now.getTime() - (count - i) * 3600000),
state: Math.random() > 0.5 ? 'ON' : 'OFF'
}));
};
// chartData setzen (wichtig: Mode muss 'multilinechart' sein)
chart.chartData = {
title: 'Historischer Verlauf NOKTA_002',
temperature: generateData(24, 25, 5),
rlf: generateData(24, 60, 10),
vpd: generateData(24, 1.2, 0.4),
ACtemp: generateData(24, 22, 1), // Klimaanlagen Ziel-Temperatur
ports: {
p1: generatePortData(24),
p2: generatePortData(24)
},
config: {
tempName: 'Temperatur K12',
rlfName: 'Luftfeuchtigkeit K12',
vpdName: 'VPD K12',
ACtempName: 'Klimaanlage Ziel', // Eigener Name für die Legende (Standard: AC Temp)
ACtempColor: 'black', // Eigene Farbe (Standard: black)
portState: { p1: true, p2: true, p3: false, p4: false, p5: false, p6: false },
portName: { p1: 'Lüfter', p2: 'Pumpe' }
}
};
});
</script>
</head>
<body style="background: #f0f0f0; padding: 50px;">
<!-- Mode auf multilinechart setzen -->
<climate-instrument id="my-chart" mode="multilinechart"></climate-instrument>
</body>
</html>Verwendung in Angular
HTML-Template
<div class="dashboard">
<!-- Live-Daten Modi -->
<climate-instrument
mode="threedisplay"
[config]="gaugeConfig"
[data]="currentData">
</climate-instrument>
<!-- Verlaufs-Chart Modus -->
<climate-instrument
mode="multilinechart"
[chartData]="historyData">
</climate-instrument>
</div>TypeScript Component
import { Component } from '@angular/core';
import { ClimateInstrumentConfig, ClimateData, ChartInputData } from 'temperatur-rlf-vpd-messgeraet';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
// Für Live-Daten
gaugeConfig: ClimateInstrumentConfig = { /* ... */ };
currentData: ClimateData = { temperature: 24.5, humidity: 55, vpd: 1.0 };
// Für Historien-Chart
historyData: ChartInputData = {
title: 'Mein Verlauf',
temperature: [ { TarihSaat: new Date(), value: 25.5 } /* ... */ ],
rlf: [ { TarihSaat: new Date(), value: 60 } /* ... */ ],
vpd: [ { TarihSaat: new Date(), value: 1.1 } /* ... */ ],
ACtemp: [ { TarihSaat: new Date(), value: 22.0 } /* ... */ ], // Optional: Klimaanlagen-Wert
ports: {
p1: [ { TarihSaat: new Date(), state: 'ON' } /* ... */ ]
},
config: {
portState: { p1: true },
ACtempColor: 'black', // Optional, Default: 'black'
ACtempName: 'AC Zielwert' // Optional, Default: 'AC Temp'
}
};
}Eigenschaften und Attribute
HTML-Attribute
mode("line" | "semicircle" | "threedisplay" | "multilinechart"): Bestimmt das Erscheinungsbild der Komponente.dashboard-title(string): Bestimmt die angezeigte Überschrift über den Instrumenten (wird immultilinechartnicht verwendet, dort nutzt manchartData.title).mirror-left/mirror-right(boolean): Spiegelt die Instrumente im"threedisplay"-Modus horizontal.
Properties (JavaScript / Angular)
config(ClimateInstrumentConfig): Konfiguration der Skalen (Min/Max/Zonen) für die Live-Modi.data(ClimateData): Aktuelle numerische Live-Werte. Zeiger animieren sich bei Änderung.chartData(ChartInputData): Nur fürmode="multilinechart". Erwartet ein Objekt mit Arrays für historische Temperatur-, RLF-, VPD-, ACtemp- und Port-Zustands-Verläufe inklusive Zeitstempeln.
Lizenz
MIT