Hallo zusammen,
nachfolgend eine erste Testversion der HTMLBox Kachel für den go-e Charger (Kann auch für andere Wallboxen eingesetzt werden) Seid bitte gnädig mit mir, für mich sind das Übungen um meine Programmierskills etwas aufzubessern…
Version 0.1
Version 0.2
- Dezimalzahlen werden auf 2 Stellen nach dem Komma gerundet
- Icon und Texte gerade ausgerichtet
Schritt 1: Anleitung im Script lesen!
Schritt 2: Momentan müssen noch bei den Spezialschaltern der Schalter „ServerSecurity“ deaktiviert werden sonst funktioniert die API Verbindung aus der HTML Box nicht!
Die Box läuft über den Websocket und die RPC-Api. Die Daten werden also ohne Reload nahezu in Echtzeit aktualisiert. Das Bild ist animiert.
Für den go-e Charger werden Bilder mitgeliefert. Die Animation der LEDs ist komplett in CSS realisiert und sollte entsprechend Ressourcenschonend laufen.
Momentan werden folgende Anzeigen unterstützt:
- Aus: LED aus
- Ladekabel eingesteckt: LED aus
- Warten auf Fahrzeug: LED leuchten blau in eingestellter Ladeleistung
- Lädt: 1-phasig und 3-phasig, die Schweiflänge passt sich der jeweiligen Ladeleistung an.
- Fertig: LED leuchten grün
- Fehler: LED blinken rot
Optional:
- SOC als Balken
- SOC Zielwert
Beide Anzeigen können ausgeblendet werden. Da diese Daten nicht von der Wallbox bereitgestellt werden muss jeder selbst schauen woher er diese Daten bekommt. API zum Auto etc…
Zum aus- und einblenden der SOC Anzeigen müssen zwei Bool-Variablen angelegt werden. (Siehe Anleitung im Skript. Eine Logik wann der SOC angezeigt werden soll und wie sich das z.B. mit mehreren Autos verhält muss vom Nutzer selbst bereitgestellt werden.
Verwendung für andere Wallboxen:
Eine Anpassung auf andere Wallboxen ist relativ einfach möglich. So lange die Variablen-Typen und die gelieferten Werte stimmen sehe ich hier keine Probleme. Die Bilder am besten in der gleichen Größe und Seitenverhältnis anlegen.
Todos:
- Anzeige von zeitgesteuertem Laden
- Anzeige von Laden für X Kilometer
- Anzeige Börsenstromladen
- Feintuning LED Anzeige
Viel Spaß beim Testen und gebt bitte Feedback ob alles läuft oder wo ihr noch verbesserungspotential seht.
Bilder: go_e_Bilder.zip (17,3 KB)
<?php
/*
Anleitung:
Vorbereitung:
- Die Wallbox Bilder müssen im entsprechenden Pfad abgelegt werden.
- Es muss ein Fernzugriffs-Passwort gesetzt sein
- Es muss ein Webfront-Passwort gesetzt sein
- Alle hier verwendeten Variablen müssen irgendwo im Webfront verwendet werden, sonst hat der Webfront Websocket keinen Zugriff auf diese Variablen.
Am einfachsten ist es, im Webfront eine Kategorie anzulegen. In diese Kategorie erstellt ihr Links zu allen Variablen oder Instanzen, die die Variablen enthalten.
Die Kategorie kann über "Objekt bearbeiten" auf Unsichtbar und deaktiviert gestellt werden. (gibt es hier für eine elegantere Lösung? Bitte im Forum posten.)
- Im nächsten Schritt müssen alle Variablen-IDs im $config Array eingetragen werden.
Icon:
Für die Icon verwende ich Font Awesome. Bitte auf der Webseite kostenlos Anmelden und unter https://fontawesome.com/start sich den "Kit embed code" schicken lassen.
Der sollte wie folgt aussehen:
<script src="https://kit.fontawesome.com/xxxxxxxxxxxx.js" crossorigin="anonymous"></script>
Die URL bitte hier eintragen:
*/
$fontawesomeurl = "https://kit.fontawesome.com/xxxxxxxxxxxxxxxxxx.js";
// SOC Anzeige
// Da die SOC Werte nicht vom Charger bereitgestellt werden muss jeder selbst schauen woher er diese Daten bekommet. API zum Auto etc.
// Für beide Werte wird der Prozentwert OHNE Prozentzeichen erwartet. (Integer oder Float)
// Die SOC-Anzeige kann dynamisch ein- und ausgeblendet werden. Eine entsprechende Logik muss vom Anwender bereitgestellt werden. Wann, bei welchem Auto etc...
// Wenn ein dynamisches ein- und ausblenden gewünscht ist bitte zwei Bool-Variablen anlegen und nachfolgend die Variablen IDs im config Array eintragen (wb_soc_ziel_switch und wb_soc_switch).
// Wenn SOC oder SOC-Zielwert dauerhaft deaktiviert werden sollen muss im nachfolgenden $config Array als VariablenID eine 1 eingetragen werden. (bei wb_soc_ziel und wb_soc)
// und die beiden Bool-Variablen werden auf false gesetzt.
// Hier die entsprechende Variablen-ID eintragen. (Der angegebene Ident ist der vom go-e charger Modul)
$config = array(
'wb_status' => 31610, //Status-Variable (Ident: status)
'wb_leistung_zum_auto' => 25320, //Leistung zum Auto in kWh (Ident: powerToCarToal)
'wb_energie_vorgang' => 19933, // Abgegebene Energier im aktuellen Ladevorgang (Ident: energyLoadCycle)
'wb_energie_gesamt' => 51887, // Gesamt geladene Energie (Ident:energyTotal)
'wb_fehler' => 22730, // Fehlermeldung (Ident: error)
'wb_genutzte_phasen' => 14288, // 1-phasig oder 3-phasig Laden (true = 1-phasig, false=3-phasig) (Ident: singlePhaseCharging)
'wb_max_ladeleistung' => 17540, // Maximal mögliche Ladeleistung (Ident:availableSupplyEnergy)
'wb_kabel' => 14666, // Ladeleistung die das verwendete Ladekabel unterstützt (Ident: cableCapability)
'wb_zugangskontrolle' => 13581, // Zugangskontroll (Ident: accessControl)
'wb_verriegelung' => 37832, //Verriegelungs-Einstellung (Ident: CableUnlockMode)
'wb_soc_ziel' => 13666, // Ziel-SOC (wenn dauerhaft deaktiviert, hier 1 eintragen)
'wb_soc' => 22927 , // SOC (wenn dauerhaft deaktiviert, hier 1 eintragen)
'wb_soc_zielwert_switch' => 29443, // SOC-Zielwert, Bool-Variable (true = anzeigen, false = ausblenden)
'wb_soc_switch' => 59101 //Aktueller SOC, Bool-Variable (true = anzeigen, false = ausblenden)
);
// Zugangsdaten für den Webfront Websocket und die JSON RPC API
$username = "max.mustermann@mail.com"; // E-Mailadresse
$wf_password = "xxx"; // Webfront Passwort
$fern_password = "xxx"; // Fernzugriff Passwort
$serverAddressLocal = "192.168.0.134"; // IP-Adresse vom Symcon-Rechner
$serverAddressConnect = "lisf86f87wfw9fmew9ezfw98fz9we8fzw98.ipmagic.de"; // IP Symcon Connect Adresse in diesem Format: lisf86f87wfw9fmew9ezfw98fz9we8fzw98.ipmagic.de
$port = "3777";
$webfront_id = "11891"; // ID der Webfront Instanz
//Pfad für die Bilder
$image_pfad = "user/img/wallbox/"; //ohne führenden /
//Wenn du eigene Bilder verwenden möchtest bitte hier die LED Animation für den Go-E Charger deaktivieren. (an=inline, aus=none)
$led_animation_switch = "inline";
// Status definieren
// WB Status
// Es wird ein Integer-Wert zwischen 0 und 9 erwartet. Je Wert können Text, Farbe und ein Bild definiert werden.
$wb_status_text_0 = "Statustext"; // Integer 0
$wb_status_color_0 = ""; // Integer 0 Farbe
$wb_status_image_0 = "go_e_template.webp"; // Integer 0 Bild
$wb_status_text_1 = "Bereit"; // Integer 1
$wb_status_color_1 = ""; // Integer 1 Farbe
$wb_status_image_1 = "go_e_template.webp"; // Integer 1 Bild
$wb_status_text_2 = "Fahrzeug lädt"; // Integer 2
$wb_status_color_2 = ""; // Integer 2 Farbe
$wb_status_image_2 = "go_e_template.webp"; // Integer 2 Bild
$wb_status_text_3 = "Warte auf Fahrzeug"; // Integer 3
$wb_status_color_3 = ""; // Integer 3 Farbe
$wb_status_image_3 = "go_e_template.webp"; // Integer 3 Bild
$wb_status_text_4 = "Ladung beendet"; // Integer 4
$wb_status_color_4 = ""; // Integer 4 Farbe
$wb_status_image_4 = "go_e_template.webp"; // Integer 4 Bild
$wb_status_text_5 = "Statustext"; // Integer 5
$wb_status_color_5 = ""; // Integer 5 Farbe
$wb_status_image_5 = "go_e_template.webp"; // Integer 5 Bild
$wb_status_text_6 = "Statustext"; // Integer 6
$wb_status_color_6 = ""; // Integer 6 Farbe
$wb_status_image_6 = "go_e_template.webp"; // Integer 6 Bild
$wb_status_text_7 = "Statustext"; // Integer 7
$wb_status_color_7 = ""; // Integer 7 Farbe
$wb_status_image_7 = "go_e_template.webp"; // Integer 7 Bild
$wb_status_text_8 = "Statustext"; // Integer 8
$wb_status_color_8 = ""; // Integer 8 Farbe
$wb_status_image_8 = "go_e_template.webp"; // Integer 8 Bild
$wb_status_text_9 = "Statustext"; // Integer 9
$wb_status_color_9 = ""; // Integer 9 Farbe
$wb_status_image_9 = "go_e_template.webp"; // Integer 9 Bild
//Kabelleistungsfähigkeit
$wb_kabel_0 = 'kein Kabel'; // Integer 0, Wenn Wert nicht 0 dann Bild vom Ladekabel einblenden
$wb_kabel_1 = '1A'; // Integer 1
$wb_kabel_2 = '2A'; // Integer 2
$wb_kabel_3 = '3A'; // Integer 3
$wb_kabel_4 = '4A'; // Integer 4
$wb_kabel_5 = '5A'; // Integer 5
$wb_kabel_6 = '6A'; // Integer 6
$wb_kabel_7 = '7A'; // Integer 7
$wb_kabel_8 = '8A'; // Integer 8
$wb_kabel_9 = '9A'; // Integer 9
$wb_kabel_10 = '10A'; // Integer 10
$wb_kabel_11 = '11A'; // Integer 11
$wb_kabel_12 = '12A'; // Integer 12
$wb_kabel_13 = '13A'; // Integer 13
$wb_kabel_14 = '14A'; // Integer 14
$wb_kabel_15 = '15A'; // Integer 15
$wb_kabel_16 = '16A'; // Integer 16
$wb_kabel_17 = '17A'; // Integer 17
$wb_kabel_18 = '18A'; // Integer 18
$wb_kabel_19 = '19A'; // Integer 19
$wb_kabel_20 = '20A'; // Integer 20
$wb_kabel_21 = '21A'; // Integer 21
$wb_kabel_22 = '22A'; // Integer 22
$wb_kabel_23 = '23A'; // Integer 23
$wb_kabel_24 = '24A'; // Integer 24
$wb_kabel_25 = '25A'; // Integer 25
$wb_kabel_26 = '26A'; // Integer 26
$wb_kabel_27 = '27A'; // Integer 27
$wb_kabel_28 = '28A'; // Integer 28
$wb_kabel_29 = '29A'; // Integer 29
$wb_kabel_30 = '30A'; // Integer 30
$wb_kabel_31 = '31A'; // Integer 31
$wb_kabel_32 = '32A'; // Integer 32
//Zugangskontrolle
$wb_zugang_0 = 'frei zugänglich'; // Integer 0
$wb_zugang_1 = 'RFID Identifizierung'; // Integer 1
$wb_zugang_2 = 'Strompreis / automatisch'; // Integer 2
$wb_zugang_3 = 'Statustext'; // Integer 3
$wb_zugang_4 = 'Statustext'; // Integer 4
$wb_zugang_5 = 'Statustext'; // Integer 5
$wb_zugang_6 = 'Statustext'; // Integer 6
$wb_zugang_7 = 'Statustext'; // Integer 7
$wb_zugang_8 = 'Statustext'; // Integer 8
$wb_zugang_9 = 'Statustext'; // Integer 9
//Verriegelung
$wb_verriegelung_0 = 'verriegelt, wenn Auto angeschlossen'; // Integer 0
$wb_verriegelung_1 = 'am Ladeende entriegeln'; // Integer 1
$wb_verriegelung_2 = 'immer verriegelt'; // Integer 2
$wb_verriegelung_3 = 'Warte auf Fahrzeug'; // Integer 3
$wb_verriegelung_4 = 'Ladung beendet'; // Integer 4
$wb_verriegelung_5 = 'Statustext'; // Integer 5
$wb_verriegelung_6 = 'Statustext'; // Integer 6
$wb_verriegelung_7 = 'Statustext'; // Integer 7
$wb_verriegelung_8 = 'Statustext'; // Integer 8
$wb_verriegelung_9 = 'Statustext'; // Integer 9
//Fehler
$wb_fehler_0 = 'Kein Fehler'; // Integer 0
$wb_fehler_1 = 'FI Schutzschalter'; // Integer 1
$wb_fehler_2 = 'Statustext'; // Integer 2
$wb_fehler_3 = 'Fehler an Phase'; // Integer 3
$wb_fehler_4 = 'Statustext'; // Integer 4
$wb_fehler_5 = 'Statustext'; // Integer 5
$wb_fehler_6 = 'Statustext'; // Integer 6
$wb_fehler_7 = 'Statustext'; // Integer 7
$wb_fehler_8 = 'Keine Erdung'; // Integer 8
$wb_fehler_9 = 'Statustext'; // Integer 9
$wb_fehler_10 = 'Interner Fehler'; // Integer 10
//Layouteinstellungen
//Schriftgrößen
$fontsize_main = "0.9em"; //Allgemeine Schriftgröße
$fontsize_chart = "0.9em"; //Schriftgröße Diagrammbalken
$fontsize_infos = "0.9em"; //Schriftgröße Jaz, Cop etc...
//Icon Farbe
$icon_color = "#26d4b9";
//Schriftfarbe Diagrammbalken
$font_color_chart = "#fff";
//Farbe Balken Ladeleistung
$chart_color_leistung_1 = "#28cdab"; //Farbverlauf Farbe 1
$chart_color_leistung_2 = "#208a74"; //Farbverlauf Farbe 2
//Farbe Balken SOC
$chart_color_soc_1 = "#0054ff"; //Farbverlauf Farbe 1
$chart_color_soc_2 = "#44a4f5"; //Farbverlauf Farbe 2
//Animation Statusbalken
$verlauf_animation = "gradient_leistung 10s infinite"; //Deaktivieren="none", Aktivieren = "gradient_leistung 10s infinite" (über die 10s kann die geschwindigkeit angepasst werden)
//Farbe LED beim Laden
$led_color_charge = "#05d9f5";
//Farbe LED Fehler
$led_color_error = "#ff0000";
//Farbe LED fertig
$led_color_fertig = "#00d43f";
//Bildgröße bzw. Spaltenbreite Layout (Linke Spalte=Bild, Rechte Spalte=Infobereich) Breite in Prozent.
$breite_bild = "20%";
$breite_infobereich = "80%";
// Ab hier nichts mehr ändern! AUSSER DIE ID DER HTML-BOX VARIABLE IN DER LETZTEN ZEILE!
//#####################################################################################################################
// Alle Variablen IDs kommmasepariert ausgeben.
// Filtere Werte, die gleich 0 sind, aus dem Array
$config = array_filter($config, function($value) {
return $value !== 0;
});
// Füge die verbleibenden Werte zu einem String zusammen
$alle_ids = implode(', ', $config);
$html = '
<!DOCTYPE html>
<html lang="de">
<head>
<script src="'. $fontawesomeurl .'" crossorigin="anonymous"></script>
<style>
:root {
--soc: calc(var(--' . $config['wb_soc'] .') * 1%);
--soc_ziel: calc((100 - var(--' . $config['wb_soc_ziel'] .')) * 1%);
--max_ladeleistung: var(--'. $config['wb_max_ladeleistung'] .');
--kabel: none;
--error_animation: none;
--error_color: red;
--ladeleistung_prozent_round: calc(var(--'. $config['wb_leistung_zum_auto'] .') / var(--max_ladeleistung) * 100%);
--led_color: #0fff;
/* Werte für Farbverlauf für 1-phasiges Laden */
--led_1p_1_position: calc(95% - (var(--'. $config['wb_leistung_zum_auto'] .') * 4%));
/* Werte für Farbverlauf für 3-phasiges Laden */
--led_3p_1_position: calc(30% - (var(--'. $config['wb_leistung_zum_auto'] .') * 2%));
--led_3p_2_position: calc(60% - (var(--'. $config['wb_leistung_zum_auto'] .') * 2%));
--led_3p_3_position: calc(95% - (var(--'. $config['wb_leistung_zum_auto'] .') * 2%));
}
body {
margin: 0;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 20px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.main_container {
width: 100%;
display: flex;
flex-wrap: nowrap;
position: relative;
font-size: '.$fontsize_main.';
box-sizing: border-box;
}
.div1 {
width: '. $breite_bild .';
height: 100%;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
.image1 {
width: 100%;
box-sizing: border-box;
position: relative;
}
.image1 img {
width: 100%;
height: auto;
display: block;
}
.image2 {
width: 100%;
position: absolute;
top: 0;
left: 0;
color: white;
z-index: 1; /* Damit image2 über image1 angezeigt wird */
display: var(--kabel);
}
.image2 img {
width: 100%; /* Bilder in image1 auf 100% Breite von div1 skalieren */
height: auto;
display: block;
}
.led_animation_centered {
width: 70%;
aspect-ratio: 1 / 1;
position: absolute;
top: 73%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -10;
display: '. $led_animation_switch .';
}
.led_animation_1p {
width: 100%;
aspect-ratio: 1 / 1;
background-image: conic-gradient(from 0deg, #fff var(--led_1p_1_position), '. $led_color_charge .' 98%, #fff);
background-size: 100% 100%;
border-radius: 50%;
animation-name: rotate;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
.led_animation_3p {
width: 100%;
aspect-ratio: 1 / 1;
background-image: conic-gradient(from 0deg, #fff var(--led_3p_1_position), '. $led_color_charge .' 33%, #fff 34%, #fff var(--led_3p_2_position), '. $led_color_charge .' 63%, #fff 64%, #fff var(--led_3p_3_position), '. $led_color_charge .' 99%, #fff 100%);
background-size: 100% 100%;
border-radius: 50%;
animation-name: rotate;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.led_animation_error {
width: 100%;
aspect-ratio: 1 / 1;
background-color: '. $led_color_error .';
border-radius: 50%;
animation: blinker 1s linear infinite;
}
.led_animation_fertig {
width: 100%;
aspect-ratio: 1 / 1;
background-color: '. $led_color_fertig .';
border-radius: 50%;
}
.led_animation_warten {
width: 100%;
aspect-ratio: 1 / 1;
background-image: conic-gradient(from 0deg, #fff 0%, #fff var(--led_1p_1_position),'. $led_color_charge .' var(--led_1p_1_position), '. $led_color_charge .' 98%, #fff);
background-size: 100% 100%;
border-radius: 50%;
animation: blinker 1s linear infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
.led_animation_aus {
width: 100%;
aspect-ratio: 1 / 1;
background-color: white;
border-radius: 50%;
}
.div2 {
width: '. $breite_infobereich .';
padding: 5px 5px 5px 2.5%;
margin: 0px 0px 0px 2.5%;
box-sizing: border-box;
border-radius: 0px;
border-left: 1px dotted #28cdab;
}
.balkendiagramm {
width: 100%;
display: flex;
position: relative;
margin-bottom: 2%;
margin-top: 2%;
box-sizing: border-box;
}
.balkendiagramm_soc {
width: 100%;
display: var(--soc_switch_css);
position: relative;
margin-bottom: 2%;
margin-top: 2%;
box-sizing: border-box;
}
.balken_links_leistung,
.balken_rechts_leistung,
.balken_links_soc,
.balken_rechts_soc
{
height: calc(var(--div-height) + var(--div-height) /5);
border-radius: calc(var(--div-height) / 4) 0px 0px calc(var(--div-height) / 4);
font-size: '.$fontsize_chart.';
transition: width 2s;
transition-timing-function: ease;
}
@keyframes gradient_leistung {
0% {
background-position: 0 0;
}
100% {
background-position: -200% 0;
}
}
.balken_links_leistung {
width: var(--ladeleistung_prozent_round);
background: repeating-linear-gradient(to right, '.$chart_color_leistung_1.' 0%, '.$chart_color_leistung_2.' 50%, '.$chart_color_leistung_1.' 100%);
background-size: 200% auto;
background-position: 0 100%;
animation: '.$verlauf_animation.';
animation-fill-mode: forwards;
animation-timing-function: linear;
}
.balken_links_soc {
width: var(--soc);
background: repeating-linear-gradient(to right, '.$chart_color_soc_1.' 0%, '.$chart_color_soc_2.' 50%, '.$chart_color_soc_1.' 100%);
background-size: 200% auto;
background-position: 0 100%;
animation: '.$verlauf_animation.';
animation-fill-mode: forwards;
animation-timing-function: linear;
}
.balken_links_text {
position: absolute;
top: 50%;
left: 2%;
transform: translate(-0%, -50%);
color: '.$font_color_chart.';
z-index: 2;
padding: 3px;
}
.balken_soc_text_rechts {
display: var(--soc_zielwert_switch_css);
justify-content: right; /* Horizontal zentriert */
align-items: center; /* Vertikal zentriert */
height: 90%;
position: absolute;
top: 50%;
right: var(--soc_ziel);
transform: translate(-0%, -50%);
color: '.$font_color_chart.';
z-index: 3;
padding: 0px;
border-right: 2px solid black;
}
.phasen {
}
.balken_rechts {
width: 100%;
border-radius: calc(var(--div-height) / 4) calc(var(--div-height) / 4);
background: linear-gradient(to right, rgba(135, 135, 135, 0.6) 0%, rgba(135, 135, 135, 0.2) 100%);
overflow: hidden;
}
.status_0 {
color: '.$wb_status_color_0.';
}
.status_1 {
color: '.$wb_status_color_1.';
}
.status_2, {
color: '.$wb_status_color_2.';
}
.status_3 {
color: '.$wb_status_color_3.';
}
.status_4 {
color: '.$wb_status_color_4.';
}
.status_5 {
color: '.$wb_status_color_5.';
}
.status_6 {
color: '.$wb_status_color_6.';
}
.status_7 {
color: '.$wb_status_color_7.';
}
.status_8 {
color: '.$wb_status_color_8.';
}
.status_9 {
color: '.$wb_status_color_9.';
}
.status-error {
animation: var(--error_animation);
animation-fill-mode: both;
color: var(--error_color), currentColor;
}
.error_animation {
animation: var(--error_animation);
animation-fill-mode: both;
color: var(--error_color);
}
@keyframes blink {
0% {
opacity: 0
}
50% {
opacity: 1
}
100% {
opacity: 0
}
}
.container_daten {
display: flex;
flex-wrap: nowrap;
width: 100%;
font-size: '.$fontsize_infos.';
}
.daten_links {
margin-right: 20px;
border: 0px solid #000;
}
.daten_rechts {
border: 0px solid #000;
}
.icon {
color: '.$icon_color.';
}
th, td {
padding: 0px 0px 0px 5px;
text-align: left;
border: none;
font-size: '.$fontsize_infos.';
}
</style>
</head>
<body>
<div class="main_container">
<div id="div1" class="div1">
<div class="image1" id="image1"><div class="led_animation_centered"><div class="" id="led_animation"></div></div><img id="wb_image" src="/'.$image_pfad.''.$wb_status_image_0.'"/></div>
<div class="image2" id="image2"><img src="/user/img/wallbox/go_e_ladekabel.webp"></div>
</div>
<div class="div2">
<b>Status: </b><span id="' . $config['wb_status'] . '"></span><br>
<div class="balkendiagramm">
<div class="balken_rechts">
<div class="balken_links_leistung">
<span class="balken_links_text"><b>Leistung: </b> <span id="' . $config['wb_leistung_zum_auto'] . '">0</span> KW</span>
</div>
</div>
</div>
<div class="balkendiagramm_soc">
<div class="balken_rechts">
<div class="balken_links_soc">
<span class="balken_links_text"><b>SOC: </b> <span id="' . $config['wb_soc'] . '">0</span> %</span>
<div class="balken_soc_text_rechts"><b>Ladeziel </b></div>
</div>
</div>
</div>
<div class="container_daten">
<table>
<tr>
<td><i class="fa-solid fa-bolt fa-sm icon"></i> <br></td>
<td>Geladen:</td>
<td>Aktuell: <span id="' . $config['wb_energie_vorgang'] . '"></span> kWh, Gesamt: <span id="' . $config['wb_energie_gesamt'] . '"></span> kWh</td>
</tr>
<tr>
<td><i class="fa-solid fa-bars fa-sm icon"></i></td>
<td>Phasen:</td>
<td><span class="phasen" id="' . $config['wb_genutzte_phasen'] . '"></span></td>
</tr>
<tr>
<td><i class="fa-solid fa-lock fa-sm icon"></i></td>
<td>Verriegelung:</td>
<td><span id="'. $config['wb_verriegelung'] .'"></span></td>
</tr>
<tr>
<td><i class="fa-solid fa-plug fa-sm icon"></i></td>
<td>Ladekabel:</td>
<td><span id="' . $config['wb_kabel'] . '"></span></td>
</tr>
<tr>
<td><i class="fa-solid fa-key fa-sm icon"></i></td>
<td>Zugang:</td>
<td><span id="' . $config['wb_zugangskontrolle'] . '"></span></td>
</tr>
<tr>
<td><i class="fa-solid fa-triangle-exclamation fa-sm icon"></i></td>
<td>Fehler</td>
<td><span class="status-error" id="' . $config['wb_fehler'] .'"></span></td>
</tr>
</table>
</div> </div>
<script type="text/javascript">
var spanElement = document.querySelector(\'.balken_links_text\');
var root = document.documentElement;
var spanHeight = spanElement.clientHeight;
root.style.setProperty(\'--div-height\', spanHeight + \'px\');
</script>
<script type="text/javascript" charset="UTF-8">
let status_phasen = true;
let status_status = 1;
let status_error = 0;
var baseURL = document.baseURI;
var username = \''.$username.'\';
var wf_password = \''.$wf_password.'\';
var fern_password = \''.$fern_password.'\';
var serverAddressLocal = \''.$serverAddressLocal.'\';
var serverAddressConnect = \''.$serverAddressConnect.'\';
var serverPort = \''.$port.'\';
var variableIDs = ['. $alle_ids .'];
var wfid = \''.$webfront_id.'\';
// Create basic authentication string
var credentials = btoa(username + \':\' + fern_password);
// Function to handle JSON-RPC requests
const handleJSONRPCRequest = async (rpcURL, request) => {
try {
const response = await fetch(rpcURL, {
method: \'POST\',
headers: {
\'Authorization\': \'Basic \' + credentials,
\'Content-Type\': \'application/json\',
},
body: JSON.stringify(request),
});
if (response.ok) {
const data = await response.json();
return data;
} else {
console.error(\'Fehler bei der Anfrage: \' + response.statusText);
return null;
}
} catch (error) {
console.error(\'Fehler bei der Anfrage: \' + error.message);
return null;
}
};
// Main function to process JSON-RPC requests
const processJSONRPCRequests = async () => {
var rpcURL;
if (baseURL.includes(\'ipmagic.de\')) {
rpcURL = \'https://\' + serverAddressConnect + \'/api/\';
} else {
rpcURL = \'http://\' + serverAddressLocal + \':\' + serverPort + \'/api/\';
}
// Process JSON-RPC requests
for (let index = 0; index < variableIDs.length; index++) {
const variableID = variableIDs[index];
// Define your JSON-RPC request
const request = {
jsonrpc: \'2.0\',
method: \'GetValue\',
params: [variableID],
id: index + 1,
};
// Handle the JSON-RPC request
const data = await handleJSONRPCRequest(rpcURL, request);
if (data) {
// Data processing logic here
var value = data.result;
if (value.toString().includes(\'.\')) {
// Round the value to two decimal places
value = parseFloat(value).toFixed(2);
}
var divElement = document.getElementById(variableID.toString());
//CSS Variablen nur Schreiben wenn
var cssVariableName = \'--\' + variableID;
var root = document.documentElement;
root.style.setProperty(cssVariableName, value);
if (divElement) {
// Status 2
if (variableID === '. $config['wb_status'] .') {
status_status = value;
var statusMapping = {
0: { text: \''.$wb_status_text_0.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_0.'\' },
1: { text: \''.$wb_status_text_1.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_1.'\' },
2: { text: \''.$wb_status_text_2.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_2.'\' },
3: { text: \''.$wb_status_text_3.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_3.'\' },
4: { text: \''.$wb_status_text_4.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_4.'\' },
5: { text: \''.$wb_status_text_5.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_5.'\' },
6: { text: \''.$wb_status_text_6.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_6.'\' },
7: { text: \''.$wb_status_text_7.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_7.'\' },
8: { text: \''.$wb_status_text_8.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_8.'\' },
9: { text: \''.$wb_status_text_9.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_9.'\' },
};
if (statusMapping[value]) {
divElement.innerHTML = \'<span class="status_\' + value + \'">\' + statusMapping[value].text + \'</span>\';
var wb_image = document.getElementById("wb_image");
wb_image.src = statusMapping[value].image;
}
}
//Ladeleistung zum Auto
else if (variableID === ' . $config['wb_leistung_zum_auto'] . ') {
var divElement = document.getElementById(\'' . $config['wb_leistung_zum_auto'] . '\');
divElement.innerHTML = \'<span>\' + value + \'</span>\';
}
// Verriegelung
else if (variableID === '. $config['wb_verriegelung'] .') {
var statusMapping = {
0: { text: \''. $wb_verriegelung_0 .'\' },
1: { text: \''. $wb_verriegelung_1 .'\' },
2: { text: \''. $wb_verriegelung_2 .'\' },
3: { text: \''. $wb_verriegelung_3 .'\' },
4: { text: \''. $wb_verriegelung_4 .'\' },
5: { text: \''. $wb_verriegelung_5 .'\' },
6: { text: \''. $wb_verriegelung_6 .'\' },
7: { text: \''. $wb_verriegelung_7 .'\' },
8: { text: \''. $wb_verriegelung_8 .'\' },
9: { text: \''. $wb_verriegelung_9 .'\' },
};
if (statusMapping[value]) {
divElement.innerHTML = \'<span class="status_\' + value + \'">\' + statusMapping[value].text + \'</span>\';
}
}
// Kabel
else if (variableID === '. $config['wb_kabel'] .') {
var statusMapping = {
0: { text: \''. $wb_kabel_0 .'\' },
1: { text: \''. $wb_kabel_1 .'\' },
2: { text: \''. $wb_kabel_2 .'\' },
3: { text: \''. $wb_kabel_3 .'\' },
4: { text: \''. $wb_kabel_4 .'\' },
5: { text: \''. $wb_kabel_5 .'\' },
6: { text: \''. $wb_kabel_6 .'\' },
7: { text: \''. $wb_kabel_7 .'\' },
8: { text: \''. $wb_kabel_8 .'\' },
9: { text: \''. $wb_kabel_9 .'\' },
10: { text: \''. $wb_kabel_10 .'\' },
11: { text: \''. $wb_kabel_11 .'\' },
12: { text: \''. $wb_kabel_12 .'\' },
13: { text: \''. $wb_kabel_13 .'\' },
14: { text: \''. $wb_kabel_14 .'\' },
15: { text: \''. $wb_kabel_15 .'\' },
16: { text: \''. $wb_kabel_16 .'\' },
17: { text: \''. $wb_kabel_17 .'\' },
18: { text: \''. $wb_kabel_18 .'\' },
19: { text: \''. $wb_kabel_19 .'\' },
20: { text: \''. $wb_kabel_20 .'\' },
21: { text: \''. $wb_kabel_21 .'\' },
22: { text: \''. $wb_kabel_22 .'\' },
23: { text: \''. $wb_kabel_23 .'\' },
24: { text: \''. $wb_kabel_24 .'\' },
25: { text: \''. $wb_kabel_25 .'\' },
26: { text: \''. $wb_kabel_26 .'\' },
27: { text: \''. $wb_kabel_27 .'\' },
28: { text: \''. $wb_kabel_28 .'\' },
29: { text: \''. $wb_kabel_29 .'\' },
30: { text: \''. $wb_kabel_30 .'\' },
31: { text: \''. $wb_kabel_31 .'\' },
32: { text: \''. $wb_kabel_32 .'\' },
};
if (statusMapping[value]) {
divElement.innerHTML = \'<span class="status_\' + value + \'">\' + statusMapping[value].text + \'</span>\';
if (value !== 0) {
root.style.setProperty(\'--kabel\', \'inline\');
} else {
root.style.setProperty(\'--kabel\', \'none\');
}
}
}
// Zugang
else if (variableID === '. $config['wb_zugangskontrolle'] .') {
var statusMapping = {
0: { text: \''. $wb_zugang_0 .'\' },
1: { text: \''. $wb_zugang_1 .'\' },
2: { text: \''. $wb_zugang_2 .'\' },
3: { text: \''. $wb_zugang_3 .'\' },
4: { text: \''. $wb_zugang_4 .'\' },
5: { text: \''. $wb_zugang_5 .'\' },
6: { text: \''. $wb_zugang_6 .'\' },
7: { text: \''. $wb_zugang_7 .'\' },
8: { text: \''. $wb_zugang_8 .'\' },
9: { text: \''. $wb_zugang_9 .'\' },
};
if (statusMapping[value]) {
divElement.innerHTML = \'<span class="status_\' + value + \'">\' + statusMapping[value].text + \'</span>\';
}
}
//Fehler
else if (variableID === ' . $config['wb_fehler'] . ') {
var divElement = document.getElementById(\'' . $config['wb_fehler'] . '\');
status_error = value;
var statusMapping = {
0: { text: \''. $wb_fehler_0 .'\' },
1: { text: \''. $wb_fehler_1 .'\' },
2: { text: \''. $wb_fehler_2 .'\' },
3: { text: \''. $wb_fehler_3 .'\' },
4: { text: \''. $wb_fehler_4 .'\' },
5: { text: \''. $wb_fehler_5 .'\' },
6: { text: \''. $wb_fehler_6 .'\' },
7: { text: \''. $wb_fehler_7 .'\' },
8: { text: \''. $wb_fehler_8 .'\' },
9: { text: \''. $wb_fehler_9 .'\' },
10: { text: \''. $wb_fehler_10 .'\' },
};
if (statusMapping[value]) {
divElement.innerHTML = \'<span>\' + statusMapping[value].text + \'</span>\';
if (value !== 0) {
root.style.setProperty(\'--error_animation\', \'blink 1.5s infinite\');
root.style.setProperty(\'--error_color\', \'red\');
} else {
root.style.setProperty(\'--error_animation\', \'none\');
root.style.setProperty(\'--error_color\', \'#000000\');
}
}
}
else if (variableID === '. $config['wb_genutzte_phasen'] .') {
status_phasen = value;
var valueHtml;
if (value === false) {
valueHtml = \'<i class="fa-solid fa-circle fa-sm icon"></i> <i class="fa-solid fa-circle fa-sm icon"></i> <i class="fa-solid fa-circle fa-sm icon"></i>\';
} else if (value === true) {
valueHtml = \'<i class="fa-solid fa-circle fa-sm icon"></i> <i class="fa-regular fa-circle fa-sm icon"></i> <i class="fa-regular fa-circle fa-sm icon"></i>\';
}
divElement.innerHTML = valueHtml;
} else {
divElement.innerHTML = value;
}
} else {
// SOC Anzeige
if (variableID === '. $config['wb_soc_switch'] .') {
if (value === true) {
root.style.setProperty(\'--soc_switch_css\', \'flex\');
} else {
root.style.setProperty(\'--soc_switch_css\', \'none\');
}
console.log(\'variableID\');
}
// SOC-Zielwert Anzeige
else if (variableID === '. $config['wb_soc_zielwert_switch'] .') {
if (value === true) {
root.style.setProperty(\'--soc_zielwert_switch_css\', \'flex\');
} else {
root.style.setProperty(\'--soc_zielwert_switch_css\', \'none\');
}
console.log(\'Soc-Zielwert\');
}
}
}
}
};
processJSONRPCRequests();
var websocketURL = baseURL.includes(\'ipmagic.de\')
? \'wss://\' + serverAddressConnect + \'/wfc/\' + wfid + \'/api/\'
: \'ws://\' + serverAddressLocal + \':\' + serverPort + \'/wfc/\' + wfid + \'/api/\';
var connection = new WebSocket(websocketURL, [encodeURIComponent(btoa(\'webfront:\' + wf_password))]);
connection.onopen = function (event) {
console.log(\'WebSocket-Verbindung geöffnet.\');
};
function processWebSocketMessage(event) {
var data = JSON.parse(event.data);
var senderID = data.SenderID;
if (numericValue.toString().includes(\'.\')) {
// Round the value to two decimal places
numericValue = parseFloat(numericValue).toFixed(2);
}
var cssVariableName = \'--\' + senderID;
var root = document.documentElement;
if(getComputedStyle(root).getPropertyValue(cssVariableName)){
root.style.setProperty(cssVariableName, numericValue);
}
// Phasen
if (senderID === ' . $config['wb_genutzte_phasen'] . ') {
status_phasen = numericValue;
var valueHtml;
if (numericValue == false) {
valueHtml = \'<i class="fa-solid fa-circle fa-sm icon"></i> <i class="fa-solid fa-circle fa-sm icon"></i> <i class="fa-solid fa-circle fa-sm icon"></i>\';
}
else if (numericValue == true) {
valueHtml = \'<i class="fa-solid fa-circle fa-sm icon"></i> <i class="fa-regular fa-circle fa-sm icon"></i> <i class="fa-regular fa-circle fa-sm icon"></i>\';
}
var resultDiv = document.getElementById(\'' . $config['wb_genutzte_phasen'] . '\');
resultDiv.innerHTML = valueHtml;
}
//Status
else if (senderID === ' . $config['wb_status'] . ') {
status_status = numericValue;
var divElement = document.getElementById(\'' . $config['wb_status'] . '\');
var statusMapping = {
0: { text: \''.$wb_status_text_0.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_0.'\' },
1: { text: \''.$wb_status_text_1.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_1.'\' },
2: { text: \''.$wb_status_text_2.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_2.'\' },
3: { text: \''.$wb_status_text_3.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_3.'\' },
4: { text: \''.$wb_status_text_4.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_4.'\' },
5: { text: \''.$wb_status_text_5.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_5.'\' },
6: { text: \''.$wb_status_text_6.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_6.'\' },
7: { text: \''.$wb_status_text_7.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_7.'\' },
8: { text: \''.$wb_status_text_8.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_8.'\' },
9: { text: \''.$wb_status_text_9.'\', image: baseURL + \''.$image_pfad.''.$wb_status_image_9.'\' },
};
if (statusMapping[numericValue]) {
divElement.innerHTML = \'<span class="status_\' + numericValue + \'">\' + statusMapping[numericValue].text + \'</span>\';
var wb_image = document.getElementById("wb_image");
wb_image.src = statusMapping[numericValue].image;
}
}
//Ladeleistung zum Auto
else if (senderID === ' . $config['wb_leistung_zum_auto'] . ') {
var divElement = document.getElementById(\'' . $config['wb_leistung_zum_auto'] . '\');
if (numericValue < 0.2) {
}else if (numericValue >= 0.3 && numericValue < 1.57) {
} else if (numericValue >= 1.57 && numericValue < 3.14) {
} else if (numericValue >= 3.14 && numericValue < 4.71) {
} else if (numericValue >= 4.71 && numericValue < 6.28) {
} else if (numericValue >= 6.28 && numericValue < 7.85) {
} else if (numericValue >= 7.85 && numericValue < 9.42) {
} else if (numericValue >= 9.42 && numericValue < 23) {
}
else{
}
divElement.innerHTML = \'<span>\' + numericValue + \'</span>\';
}
//Verriegelung
else if (senderID === ' . $config['wb_verriegelung'] . ') {
var divElement = document.getElementById(\'' . $config['wb_verriegelung'] . '\');
var statusMapping = {
0: { text: \''. $wb_verriegelung_0 .'\' },
1: { text: \''. $wb_verriegelung_1 .'\' },
2: { text: \''. $wb_verriegelung_2 .'\' },
3: { text: \''. $wb_verriegelung_3 .'\' },
4: { text: \''. $wb_verriegelung_4 .'\' },
5: { text: \''. $wb_verriegelung_5 .'\' },
6: { text: \''. $wb_verriegelung_6 .'\' },
7: { text: \''. $wb_verriegelung_7 .'\' },
8: { text: \''. $wb_verriegelung_8 .'\' },
9: { text: \''. $wb_verriegelung_9 .'\' },
};
if (statusMapping[numericValue]) {
divElement.innerHTML = \'<span class="status_\' + numericValue + \'">\' + statusMapping[numericValue].text + \'</span>\';
}
}
//Fehler
else if (senderID === ' . $config['wb_fehler'] . ') {
status_error = numericValue;
var divElement = document.getElementById(\'' . $config['wb_fehler'] . '\');
var statusMapping = {
0: { text: \''. $wb_fehler_0 .'\' },
1: { text: \''. $wb_fehler_1 .'\' },
2: { text: \''. $wb_fehler_2 .'\' },
3: { text: \''. $wb_fehler_3 .'\' },
4: { text: \''. $wb_fehler_4 .'\' },
5: { text: \''. $wb_fehler_5 .'\' },
6: { text: \''. $wb_fehler_6 .'\' },
7: { text: \''. $wb_fehler_7 .'\' },
8: { text: \''. $wb_fehler_8 .'\' },
9: { text: \''. $wb_fehler_9 .'\' },
10: { text: \''. $wb_fehler_10 .'\' },
};
if (statusMapping[numericValue]) {
divElement.innerHTML = \'<span>\' + statusMapping[numericValue].text + \'</span>\';
if (numericValue !== 0) {
root.style.setProperty(\'--error_animation\', \'blink 1.5s infinite\');
root.style.setProperty(\'--error_color\', \'red\');
} else {
root.style.setProperty(\'--error_animation\', \'none\');
root.style.setProperty(\'--error_color\', \'#000000\');
}
}
}
//Kabel
else if (senderID === ' . $config['wb_kabel'] . ') {
var divElement = document.getElementById(\'' . $config['wb_kabel'] . '\');
var statusMapping = {
0: { text: \''. $wb_kabel_0 .'\' },
1: { text: \''. $wb_kabel_1 .'\' },
2: { text: \''. $wb_kabel_2 .'\' },
3: { text: \''. $wb_kabel_3 .'\' },
4: { text: \''. $wb_kabel_4 .'\' },
5: { text: \''. $wb_kabel_5 .'\' },
6: { text: \''. $wb_kabel_6 .'\' },
7: { text: \''. $wb_kabel_7 .'\' },
8: { text: \''. $wb_kabel_8 .'\' },
9: { text: \''. $wb_kabel_9 .'\' },
10: { text: \''. $wb_kabel_10 .'\' },
11: { text: \''. $wb_kabel_11 .'\' },
12: { text: \''. $wb_kabel_12 .'\' },
13: { text: \''. $wb_kabel_13 .'\' },
14: { text: \''. $wb_kabel_14 .'\' },
15: { text: \''. $wb_kabel_15 .'\' },
16: { text: \''. $wb_kabel_16 .'\' },
17: { text: \''. $wb_kabel_17 .'\' },
18: { text: \''. $wb_kabel_18 .'\' },
19: { text: \''. $wb_kabel_19 .'\' },
20: { text: \''. $wb_kabel_20 .'\' },
21: { text: \''. $wb_kabel_21 .'\' },
22: { text: \''. $wb_kabel_22 .'\' },
23: { text: \''. $wb_kabel_23 .'\' },
24: { text: \''. $wb_kabel_24 .'\' },
25: { text: \''. $wb_kabel_25 .'\' },
26: { text: \''. $wb_kabel_26 .'\' },
27: { text: \''. $wb_kabel_27 .'\' },
28: { text: \''. $wb_kabel_28 .'\' },
29: { text: \''. $wb_kabel_29 .'\' },
30: { text: \''. $wb_kabel_30 .'\' },
31: { text: \''. $wb_kabel_31 .'\' },
32: { text: \''. $wb_kabel_32 .'\' },
};
if (statusMapping[numericValue]) {
divElement.innerHTML = \'<span class="status_\' + numericValue + \'">\' + statusMapping[numericValue].text + \'</span>\';
if (numericValue !== 0) {
root.style.setProperty(\'--kabel\', \'inline\');
} else {
root.style.setProperty(\'--kabel\', \'none\');
}
}
}
// SOC Anzeige
else if (senderID === '. $config['wb_soc_switch'] .') {
if (numericValue == true) {
root.style.setProperty(\'--soc_switch_css\', \'flex\');
} else {
root.style.setProperty(\'--soc_switch_css\', \'none\');
}
}
// SOC-Zielwert Anzeige
else if (senderID === '. $config['wb_soc_zielwert_switch'] .') {
if (numericValue == true) {
root.style.setProperty(\'--soc_zielwert_switch_css\', \'flex\');
} else {
root.style.setProperty(\'--soc_zielwert_switch_css\', \'none\');
}
}
else if (senderID === ' . $config['wb_zugangskontrolle'] . ') {
var divElement = document.getElementById(\'' . $config['wb_zugangskontrolle'] . '\');
var statusMapping = {
0: { text: \''. $wb_zugang_0 .'\' },
1: { text: \''. $wb_zugang_1 .'\' },
2: { text: \''. $wb_zugang_2 .'\' },
3: { text: \''. $wb_zugang_3 .'\' },
4: { text: \''. $wb_zugang_4 .'\' },
5: { text: \''. $wb_zugang_5 .'\' },
6: { text: \''. $wb_zugang_6 .'\' },
7: { text: \''. $wb_zugang_7 .'\' },
8: { text: \''. $wb_zugang_8 .'\' },
9: { text: \''. $wb_zugang_9 .'\' },
};
if (statusMapping[numericValue]) {
divElement.innerHTML = \'<span class="status_\' + numericValue + \'">\' + statusMapping[numericValue].text + \'</span>\';
}
}
//SOC
else if (senderID === ' . $config['wb_soc'] . ') {
var divElement = document.getElementById(\'' . $config['wb_soc'] . '\');
divElement.innerHTML = numericValue;
}
else{
// var divElement = document.getElementById(SenderID);
//divElement.innerHTML = value;
}
//Setzen der passenden LED Animation
var animationDiv = document.getElementById("led_animation");
if(status_error !== 0){ //Wenn Fehler dann Animation auf Fehleranimation setzen
//CSS class löschen und Alarm class setzen
animationDiv.classList = [];
animationDiv.classList.add("led_animation_error");
}
else if (status_status == 1 && status_error == 0){ //Wenn Value 2 (Laden) dann Ladeanimation setzen
//CSS class löschen und Lade class setzen
animationDiv.classList = [];
animationDiv.classList.add("led_animation_aus");
}
else if (status_status == 2 && status_error == 0){ //Wenn Value 2 (Laden) dann Ladeanimation setzen
//CSS class löschen und Lade class setzen
if (status_phasen == false){ //Class für 3-phasiges Laden setzen
animationDiv.classList = [];
animationDiv.classList.add("led_animation_3p");
}
else
{
animationDiv.classList = [];
animationDiv.classList.add("led_animation_1p");
}
}
else if (status_status == 4 && status_error == 0){ //Wenn Value 2 (Laden) dann Ladeanimation setzen
//CSS class löschen und Lade class setzen
animationDiv.classList = [];
animationDiv.classList.add("led_animation_fertig");
}
else if (status_status == 3 && status_error == 0){ //Wenn Value 2 (Laden) dann Ladeanimation setzen
//CSS class löschen und Lade class setzen
animationDiv.classList = [];
animationDiv.classList.add("led_animation_warten");
}
else {
}
}
// Wenn eine Nachricht empfangen wird
connection.onmessage = processWebSocketMessage;
// Wenn ein Fehler auftritt
connection.onerror = function(event) {
console.error(\'WebSocket-Fehler: \' + event);
};
// Wenn die Verbindung geschlossen wird
connection.onclose = function(event) {
console.log(\'WebSocket-Verbindung geschlossen.\');
};
</script></body></html>';
//HTML Code in Stringvariable der HTMLBox schreiben
Setvalue(38978, $html);
Viele Grüße
Stephan
