HTML Box Status Waschmaschine

Ich habe gar keinen mit Home Connect. :smiley:
Ich habe einen ganz Alten und mache das nur mit einer Messsteckdose. :smiley:
Bei der Waschmaschine übrigens auch. :smiley:

Grüße,
Kai

Ich habe aber in der Küche alles mit Home Connect, da kann ich helfen. :smiley:

Grüße,
Kai

Wer sich jetzt beim lesen wundert wo @KaiS den die Spülmaschine hat, wenn nicht in der Küche…

Er meinte den Trockner. Das sieht man im Forum immer nur wenn man schaut auf welchen Beitrag geantwortet wurde.
BTT:
Meine Spüli ist teilintegriert, somit Display an → läuft oder wartet auf Start (dann blinkt die Starttaste). Display aus → fertig/aus.

Aber wie stellt man jetzt vollintegrierte Geräte dar? Die haben ja nix außer die Projektion auf den Boden bzw. die Bedienung in der Tür.
Michael

es gibt so kleine Gifs die eigentlich Sprinkler darstellen. Das könnte man bei Betrieb vorne auf der Maschine erscheinen lassen. Weiss aber nicht ob man ein Maschinen-Gif dann mit einem animierten GIF zusammenbringt in ein kombiniertes animiertes GIF.

Mal auf die Schnelle 2 so Dinger.
Bodenregner grün
Bodenregner

Cheers Seppm

Ich weiss nicht warum ich bei den 2 bildern automatisch an leisure suit larry denken muss :face_with_hand_over_mouth:

3 „Gefällt mir“

ich auch nicht ehrlich gesagt da die scheinbar an mir vorbei gingen :slight_smile:
Aber immer gut wenn man Erinnerungen weckt (ok, meistens :wink: )

Sehr geil,…

Muss nur noch Waschmaschine oder so kaputt gehen :joy::joy:

Gibt doch so Demogeräte bei Mediamarkt und co.
Da könnte man Fotos machen,… :joy:
Gruß
Stephen

1 „Gefällt mir“

Wenn dann sollte alles im gleichen Design sein. Also immer das Gerät von vorne. TipTop!
Bräuchte das nur für die Miele Geräte :slight_smile:

Oh, ich habe ja auch einen Bosch SideybySide. Da würde ja nur Tür auf / Tür zu Sinn machen, wenn überhaupt :slight_smile:

Ich habe den Thread mal in die neue Kategorie „Kacheln“ verschoben, hier wollen wir die Anleitungen für Kacheln sammeln. :slight_smile:

Grüße,
Kai

1 „Gefällt mir“

Da ich keine Smarte Waschmaschine oder Tumbler habe, habe ich die html-Boxen mal auf den Fertig-Melder von IP-Symcon angepasst…

Hier die Bilder von @da8ter welche ins \user\img Verzeichnis kopiert werden müssen:
Bilder.zip (1,2 MB)

Hier der angepasste Code für die Waschmaschine:

<?php

$status = GetValue(32151); // Variable des Fertigmelder Moduls

// Erstellen einer Zuordnungstabelle von Statuswerten zu Text und Bildern
$status_mapping = array(
    1 => array('text' => 'Laufend', 'image' => 'waschmaschine_an'),
    2 => array('text' => 'Fertig', 'image' => 'waschmaschine_aus'),
    0 => array('text' => 'Aus', 'image' => 'waschmaschine_aus'),
    // Fügen Sie weitere Status-Texte und -Bilder hinzu, wenn nötig
);

if (isset($status_mapping[$status])) {
    $status_info = $status_mapping[$status];
    $status_text = $status_info['text'];
    $wm_image = $status_info['image'];
    $status_css = ($status === 1) ? 'status-run' : 'status-fertig';
} else {
    $status_text = 'Fertig';
    $wm_image = 'waschmaschine_aus';
    $status_css = 'status-fertig';
}

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

    .div1 {
        width: 100%;
        max-width: 550px;
        min-width: 200px;
        background: #fff;
        text-align: center; /* Text in der Mitte des Bildes ausrichten */
    }

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

    .status {
        text-align: center; /* Text in der Mitte ausrichten */
        margin-top: 10px; /* Abstand von oben hinzufügen */
    }

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

    .status-run {
        color: #ff0000; /* Textfarbe rot, wenn "Laufend" */
    }

    .status-fertig {
        color: #0eb025; /* Textfarbe grün, wenn "Fertig" */
    }

    @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/' . $wm_image . '.gif"/>
        <div class="status ' . $status_css . '"><b>' . $status_text . '</b></div>
    </div>
</div>

</body>
</html>
';

SetValue(46647, $html);

Hier der angepasste Code für den Tumbler

<?php

$status = GetValue(25269); // Variable des Fertigmelder Moduls

// Erstellen einer Zuordnungstabelle von Statuswerten zu Text und Bildern
$status_mapping = array(
    1 => array('text' => 'Laufend', 'image' => 'tumbler_an'),
    2 => array('text' => 'Fertig', 'image' => 'tumbler_aus'),
    0 => array('text' => 'Aus', 'image' => 'tumbler_aus'),
    // Fügen Sie weitere Status-Texte und -Bilder hinzu, wenn nötig
);

if (isset($status_mapping[$status])) {
    $status_info = $status_mapping[$status];
    $status_text = $status_info['text'];
    $wm_image = $status_info['image'];
    $status_css = ($status === 1) ? 'status-run' : 'status-fertig';
} else {
    $status_text = 'Unbekannter Status';
    $wm_image = 'tumbler_aus';
    $status_css = 'status-fertig';
}

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

    .div1 {
        width: 100%;
        max-width: 550px;
        min-width: 200px;
        background: #fff;
        text-align: center; /* Text in der Mitte des Bildes ausrichten */
    }

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

    .status {
        text-align: center; /* Text in der Mitte ausrichten */
        margin-top: 10px; /* Abstand von oben hinzufügen */
    }

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

    .status-run {
        color: #ff0000; /* Textfarbe rot, wenn "Laufend" */
    }

    .status-fertig {
        color: #0eb025; /* Textfarbe grün, wenn "Fertig" */
    }

    @keyframes blink {
        0% {
            opacity: 0
        }
        50% {
            opacity: 1
        }
        100% {
            opacity: 0
        }
    }
</style>
</head>
<body>

<div class="container1">
    <div class="div1">
        <img src="/user/img/tb/' . $wm_image . '.gif"/>
        <div class="status ' . $status_css . '"><b>' . $status_text . '</b></div>
    </div>
</div>

</body>
</html>
';

SetValue(39738, $html);

4 „Gefällt mir“

Sehr gute Idee!
Hab öfter Geräte die nicht smart sind, aber über Wirkleistungsmesser weiss ich wann die in Betrieb sind und merke wenn sie fertig sind (direkt in KNX geht also auch). Über das Symcon Modul macht natürlich auch Sinn!
Danke und Gruss Seppm