HTML Box Status Waschmaschine

da8ter · 5. Oktober 2023 um 08:51

Hallo zusammen,
Anbei meine neue Status Box für die Waschmaschine. Vielleicht hat ja jemand eine Verwendung dafür:

waschmaschine_läuft
waschmaschine_fertig
waschmaschine_fehler

Das ganze ist auf die Werte aus dem Siemens HomeConnect Modul ausgerichtet. Wer andere Statuswerte hat muss entsprechend den Code bei den IF Sachen anpassen.

Installation so wie üblich:

String Variable erstellen mit dem Profil HTMLBox
Script erstellen das am Ende den erzeugten HTML Code in die String-Variable schreibt.
Im Script alle Variablen IDs anpassen und entsprechend mit Werten befüllen
Falls nötig Schriftgrößen und Bildgrößen anpassen. Hab versucht es einigermaßen dynamisch zu halten.
Grafiken (siehe unten) in den Ordner /user/img/ kopieren
Für das PHP Script zwei Ereignisse erstellen. 1. Ereignis: Auslöser: Die Statusvariable (bei Änderung). 2. Ereignis: Zyklisch 1 Minute, weitere Bedingung: Nur wenn die Statusvariable = Läuft ist

Alle, in den nachfolgenden Beiträgen, aufgeführten Korrekturen sind hier bereits berücksichtigt!

<?php

$status = GetValueFormatted(35831);
$fortschritt = GetValue(44629);

$fertig_in_Sekunden = GetValue(23156);
$fertig_in_min = round($fertig_in_Sekunden / 60, 2);
$programm = GetValueFormatted(23430);




if ($status == "BSH.Common.EnumType.OperationState.Run") {
$wm_image = 'waschmaschine_an';
$fertig_in_min = $fertig_in_min;
$status_css = 'status-run';
}
elseif ($status == "BSH.Common.EnumType.OperationState.Finished") {
$wm_image = 'waschmaschine_aus'; 
$status_css = 'status-fertig';
$fertig_in_min = '0';
}
elseif ($status == "BSH.Common.EnumType.OperationState.Error") {
$status_css = 'status-error';
$wm_image = 'waschmaschine_aus';
}
else {
$status_css = 'status';
$wm_image = 'waschmaschine_aus';  
$fertig_in_min = '0';
}


$html = '
<style>
    .container1 {
        width: 100%;
        display: flex;
        position: relative;
        font-size: 0.8em;
    }

    .div1 {
        width: 30%;
        max-width: 250px;
        min-width: 100px;
        background: #fff;
    }

    .div1 img {
        width: 100%;
        max-height: 100%;
    }

    .div2 {
        width: 100%;
        padding: 10px 50px 10px 30px;
    }

    .fortschritt_container {
        position: relative;
        width: 100%;
        border: 0px solid #000;
        padding-bottom: 10px;
        margin-top: 20px;
    }

    .rest {
        background: #d7d6d6;
        overflow: visible;
        padding: 5px 10px;
        white-space: nowrap;
        direction: rtl;
        text-align: right;
    }

    .fortschritt {
        background: #28cdab;
        float: left;
        width: '.$fortschritt.'%;
        box-sizing: border-box;
    }

    .fortschritt_text {
        float: left;
        padding: 5px 10px;
        color: white;
        white-space: nowrap;
    }

    .status {
        color: #000;
    }

    .status-fertig,
    .status-error {
        animation: blink 1.5s infinite;
        animation-fill-mode: both;
    }

    .status-fertig {
        color: #0eb025;
    }

    .status-error {
        color: #ff0000;
    }

    @keyframes blink {
        0% {
            opacity: 0
        }

        50% {
            opacity: 1
        }

        100% {
            opacity: 0
        }
    }
</style>
</head>
<body>

<div class="container1">
    <div class="div1">
    <img src="/user/img/'.$wm_image.'.gif"/>
        </div>
    <div class="div2">
    <b>Status: </b><span class="'.$status_css.'">'.$status.'<br></span>
    <br>
    <b>Waschprogramm:</b> '.$programm.'</br>
     <div class="fortschritt_container">
            <div class="fortschritt"><span class="fortschritt_text">'.$fortschritt.'&nbsp% / '.$fertig_in_min.' min</span></div>
      <div class="rest">🏁</div>
    </div>
    </div>



    </div>
</div>
';

Setvalue(30236, $html);

Grafiken:
waschmaschine_an

Verbesserungsvorschläge sind natürlich wie immer willkommen.

Viele Grüße
Stephan

pitti · 5. Oktober 2023 um 09:23

So schnell wie Du gerade produzierst komm ich gar nicht hinterher Coole Idee!

Gruß Heiko

KaiS · 5. Oktober 2023 um 09:29

@da8ter ich hoffe das kommt noch mehr, das ist ja richtig geil!
Vielen Dank.

Hast du auch ne Grafik für nen Trockner?

Grüße,
Kai

da8ter · 5. Oktober 2023 um 09:38

Trockner steht als nächstes auf dem Programm

Ist halt schade das man unter einer HTML Box keine weiteren Elemente anzeigen kann.
Ein paar Sachen zum schalten wären schon praktisch. Jetzt muss man immer die Kachel auf Vollbild stellen und dann auf Listenansicht. Super nervig…

Gruß Stephan

KaiS · 5. Oktober 2023 um 09:40

Jap, ich hab auch gerade gedacht, wäre schön jetzt noch direkt den Switch für die Steckdose einzubauen oder.
Ich hoffe, dass da noch was von Symcon kommt, dass man Variablen in eine HTMLBox einbetten könnte oder sowas in die Richtung, ich denke danmit könnte man dann echt viel machen.

Grüße,
Kai

bumaas · 5. Oktober 2023 um 10:16

Tolle Idee. Werde ich gleich mal ausprobieren

Sollte es hier nicht GetValueString sein?

Edit:
Sehe gerade, dass du beide Werte brauchst. Unformatiert für den Vergleich und formatiert für die Ausgabe.

Bei mir ist nun nur noch der Fortschrittsbalken nicht ok.

Finde aber noch nicht raus, woran es liegt. Bei $fortschritt = 0 ist es nicht ok, bei $fortschritt = 50 ist es ok.

kris · 5. Oktober 2023 um 10:49

Wie immer sehr schön. Deine Unsetzungen sind echt klasse.

DeejayT · 5. Oktober 2023 um 10:51

@da8ter is on fire

seppm · 5. Oktober 2023 um 10:58

Klasse Idee und sehr cool gemacht!
Cheers Seppm

da8ter · 5. Oktober 2023 um 11:07

grad wenig Zeit…

ersetze mal den css Block mit dem hier:
mit dem white-space: nowrap; wird verhindert das bei Leerzeichen ein Umbruch gemacht wird…

    .fortschritt {
        background: #28cdab;
        float: left;
        padding: 5px 10px;
        color: white;
        width: '.$fortschritt.'%;
        white-space: nowrap;
    }

Gruß Stephan

bumaas · 5. Oktober 2023 um 11:20

Perfekt. Nun sieht es sauber aus.

Wenn man genau hinschaut, dann passen die Proportionen noch nicht perfekt:

Sollte bei 0% der grüne Balken nicht verschwunden sein und bei 95% noch etwas grau zu sehen sein?
Auch wandert die Fahne bei 95% nach rechts.

Aber das sind schon wirklich Feinheiten

da8ter · 5. Oktober 2023 um 11:23

das liegt am padding: 5px 10px;

wie lösen wir das denn jetzt?

für die 95% hab ich eine Lösung über das box-sizing. Dabei berücksichtigt er jetzt das Padding bei der Berechnung der Breite und Höhe:

.fortschritt {
    background: #28cdab;
    float: left;
    padding: 5px 10px;
    color: white;
    width: '.$fortschritt.'%;
    white-space: nowrap;
    box-sizing: border-box;
}

da8ter · 5. Oktober 2023 um 11:42

ok, jetzt sollte es auch bei 0% funktionieren.

folgenden CSS Block mit dem hier ersetzen:

.fortschritt {
    background: #28cdab;
    float: left;
    width: '.$fortschritt.'%;
    box-sizing: border-box;
}

folgenden CSS Block einfügen:

.fortschritt_text {
    float: left;
    padding: 5px 10px;
    color: white;
    white-space: nowrap;
}

unten im HTML Teil diese Zeile ersetzen:

  <div class="fortschritt">'.$fortschritt.'&nbsp% / '.$fertig_in_min.' min</div>

mit

 <div class="fortschritt"><span class="fortschritt_text">'.$fortschritt.'&nbsp% / '.$fertig_in_min.' min</span></div>```

ich passe auch den Code im ersten Post an...

bumaas · 5. Oktober 2023 um 11:49

Nun ist es wirklich perfekt! Besten Dank.

da8ter · 5. Oktober 2023 um 11:57

Wenn ich so drüber nachdenke könnte auch nur GetValueFormatted reichen, das könnte man in den IF Sachen ja genau so verarbeiten. Wenn aber jemand das Variablenprofil angepasst hat funktioniert es aber nicht mehr…

bumaas · 5. Oktober 2023 um 12:14

Beim Vergleich würde ich immer auf die Rohdaten gehen.

seppm · 5. Oktober 2023 um 12:25

Weiss bitte jemand wo ich den Ordner auf der Symbox finde?
Danke!
Cheers Seppm

EDIT: gefunden,
ist auf der Symbox in var/lib/symcon/user/
Da bei mir nicht vorhanden hab ich den Ordner „img“ dort angelegt und die Grafiken reinkopiert mit WinSCP.
Dann müssen die Grafiken noch so benannt werden wie Sie rel. zu Anfang des Skriptes benannte sind.

da8ter · 5. Oktober 2023 um 15:07

Extra für dich Kai: Der Wäschetrockner

waeschetrockner_an

Mangels HomeConnect Wäschetrockner musst du den Rest der HTML Box leider selbst anpassen…

Viele Grüße
Stephan

da8ter · 5. Oktober 2023 um 15:21

Jemand eine Idee wie man eine Spülmaschine abbildet und auch zu sehen ist das die läuft?

Tür zu, Tür auf ist irgendwie nicht aussagekräftig genug

Gruß
Stephan

pitti · 5. Oktober 2023 um 15:37

Bei uns leuchtet halt dann das Display