Hintergrundfarbe ändern anhand Dummy State

Begonnen von thinman, 15 November 2017, 14:18:39

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

thinman

15 November 2017, 14:18:39
Hallo Allerseits,

ich würde gern eine kleine Ecke an mein Oberfläche (1x1 Grid) abhängig von einem Dummy anders einfärben.
Ich habe überlegt dafür das Classchanger Widget zu nehmen aber ich weiß es nicht wie ich damit die Hintergrundfarbe ändern kann.
Konkret geht es darum, dass wenn mein Anwesenheits-dummy auf 1 geschaltet wird, soll am FTUI Oberfläche eine kleine Quadrat eingefärbt sein.
Ich möchte keine extra Anzeige oder Label, nur eine kleine Fläche (wie ein Mini-LED).
Eine andere Idee wäre ein Image Widget zu nehmen mit 2 verschiedene Bilder.

Habt Ihr ein Idee wie ich das am besten/elegantesten lösen könnte?
Die Fläche müsste auch auf die Änderung der Dummy ohne weitere Interaktion reagieren können. (Beim Image Widget weiß ich nicht wie ich das bewerkstelligen könnte.)

Grüße
Steve

setstate

#1
15 November 2017, 15:49:03
Classchanger ja, off-class 'bg-red' und on-class 'bg-green'
Das div, was vom classchanger umklammert wird, muss aber mindestens ein Leerzeichen haben, damit es vom Browser gemalt wird. Man könnte auch gleich eine CSS class anlegen, wo man die LED designt
min-height, max-height, color, border-radius usw. und schon sieht es wie eine LED aus.

Müsste ich mal was probieren zuhause.

setstate

#2
15 November 2017, 17:44:40 Letzte Bearbeitung: 15 November 2017, 17:47:39 von setstate
test_classchanger_led.html

Code Auswählen

<!DOCTYPE html>
<html>

<head>
    <!--
     /* FHEM tablet ui */
     /*
     * UI builder framework for FHEM
     *
     * Version: 2.6.*
     * URL: https://github.com/knowthelist/fhem-tablet-ui
     *
     * Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de>
     * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
     *
     * - create a new folder named 'tablet' in /<fhem-path>/www
     * - copy all files incl. sub folders into /<fhem-path>/www/tablet
     * - add 'define TABLETUI HTTPSRV ftui ./www/tablet Tablet' in fhem.cfg
     * - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/
     */
    -->
    <link rel="icon" href="favicon.ico" type="image/x-icon" />

    <!-- define your personal style here, it wont be overwritten  -->
    <!-- link rel="stylesheet" href="css/fhem-tablet-ui-user.css" / -->

    <script src="js/fhem-tablet-ui.js" defer></script>

    <title>FHEM-Tablet-UI</title>
</head>

<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizey="4" data-sizex="3">
                <header>EXAMPLE1</header>
                <!-- place your widget here -->
                <div class="center">
                    <div data-type="classchanger" data-device="ftuitest" data-off-class="bg-red" data-on-class="bg-green" class="led square"></div>
                </div>
            </li>
            <li data-row="1" data-col="4" data-sizey="4" data-sizex="6">
                <header>BACKGROUND</header>
                <!-- place your widget here -->
                <div data-type="classchanger" data-device="ftuitest" data-off-class="bg-red" data-on-class="bg-green"></div>
            </li>
            <li data-row="1" data-col="10" data-sizey="4" data-sizex="3">
                <header>Round LED</header>
                <!-- place your widget here -->
                <div class="center">
                    <div data-type="classchanger" data-device="ftuitest" data-off-class="bg-red" data-on-class="bg-green" class="led round"></div>
                </div>
            </li>
            <li data-row="5" data-col="1" data-sizey="3" data-sizex="3">
                <header>Set Values</header>
                <!-- place your widget here -->
                <div class="hbox">
                    <div class="vbox">
                        <div data-type="push" data-device="ftuitest" data-set-on="on"></div>
                        <div>on</div>
                    </div>
                    <div class="vbox">
                        <div data-type="push" data-device="ftuitest" data-set-on="off"></div>
                        <div>off</div>
                    </div>
                    <div class="vbox">
                        <div data-type="label" data-device="ftuitest" class="bigger"></div>
                    </div>
                </div>
            </li>
            <li data-row="5" data-col="4" data-sizey="3" data-sizex="6">
                <header>Sizes</header>
                <!-- place your widget here -->
                <div class="hbox items-space-around">
                    <div data-type="classchanger" data-device="ftuitest" data-off-class="bg-red" data-on-class="bg-green" class="led square mini"></div>
                    <div data-type="classchanger" data-device="ftuitest" data-off-class="bg-red" data-on-class="bg-green" class="led square"></div>
                    <div data-type="classchanger" data-device="ftuitest" data-off-class="bg-red" data-on-class="bg-green" class="led square large"></div>
                    <div data-type="classchanger" data-device="ftuitest" data-off-class="bg-red" data-on-class="bg-green" class="led square big"></div>
                </div>
            </li>
            <li data-row="5" data-col="10" data-sizey="3" data-sizex="3">
                <header>EXAMPLE6</header>
                <!-- place your widget here -->
            </li>
        </ul>
    </div>
</body>

</html>



Ein Update der CSS ist dafür aber nötig

thinman

#3
16 November 2017, 07:02:24
Große Klasse! Vielen Dank.  :)
Damit lassen sich sehr elegante Statusanzeigen machen. TOP!


Drucken
Nach oben Seiten1
Benutzer-Aktionen