Blaue, eckige Buttons????

Begonnen von frankreed, 16 Januar 2019, 18:15:55

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

frankreed

16 Januar 2019, 18:15:55 Letzte Bearbeitung: 16 Januar 2019, 18:41:03 von frankreed
Hallo,

sorry ich bin beim FTUI absoluter Noob.

Die runden Buttons sind ja schön, aber kann man die irgendwie auch eckig machen?
Wo muss ich da was in welcher CSS ändern bzw. neu definieren? Irgendwo muss ja stehen, dass ein Kreis gezeichnet werden muss. Wenn man das gegen "zeichne ein Quadrat" ändern könnte. Nur wo?

Die Traumlösung wäre, wenn man das im Button-Style sogar einstellen könnte, welche Form der Knopf haben soll.....

Vielen Dank für Eure Hilfe.

Ach ja: Hintergrund der Frage ist der, dass ich zumindest die Buttons  ähnlich wie bei Openhab Habpanel haben möchte. Und nur wegen der Optik möchte ich nicht umsteigen, da ich ein FHEM-Fan bin.


grossmaggul

#1
16 Januar 2019, 18:45:22
Soweit ich weiß sind die Buttons Icons und werden nicht durch CSS "gezeichnet", Du mußt Dir nur ein entprechendes Icon raussuchen oder eben selber erstellen.
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

frankreed

#2
16 Januar 2019, 18:50:38
Dann habe ich die Funktionsweise nicht verstanden...
Ich kann den Buttons ja Icons zuweisen. Wenn die Buttons Icons wären hieße das (nach meiner beschränkten Logik) ich würde einem Icon ein Icon zuweisen....

setstate

#3
16 Januar 2019, 19:58:37
Man kann für die Switch-Widgets Background-Icon konfigurieren, die rechteckig sind.

Code Auswählen

<li data-row="1" data-col="1" data-sizey="2" data-sizex="2" >
      <div class="smallicon" data-type="switch" data-device="dummy1" data-color="white" data-size="130" data-on-background-color="blue" data-background-icon="fa-square" data-icon="fa-wifi"></div>
</li>


Das sind dann kleine Buttons.
Dein Screenshot sieht eher danach aus, als ob die ganze Gridster-Kachel ein Button ist. Dann kann man auch machen. Suche ich raus ...

setstate

#4
16 Januar 2019, 20:05:48
Gefunden:

War aber nur ein Versuch.

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)
     *
     * Example for a FTUI dashboard
     */
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="gridster_resize" content="0">
    <meta name='gridster_min_width' content='100'>
    <meta name='gridster_min_height' content='100'>

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

    <style>
        .grande .label-comma {
            font-size: 40%;
        }
       
        .grande .label-unit,
        .grande .label-aftercomma {
            font-size: 40%;
            left: -4px;
            top: 8px;
            position: relative;
            vertical-align: text-top;
        }
       
        #hum {
            top: 15px;
            position: relative;
            vertical-align: text-top;
        }
       
        a {
            color: #eeeeee !important;
        }
    </style>

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

<body>
    <div class="gridster">
        <ul>
            <li data-row="1" data-col="1" data-sizey="1" data-sizex="2">
                <!-- CLOCK -->
                <div class="sheet bg-blue">
                    <div class="row-30">
                        <div class="cell big bottom-align" data-type="clock" data-format="d.n.Y"></div>
                    </div>
                    <div class="row-70">
                        <div class="cell great bold" data-type="clock" data-format="H:i"></div>
                    </div>
                </div>
            </li>
            <li data-row="1" data-col="3" data-sizey="1" data-sizex="1">
                <!-- FENSTER -->
                <div class="display" data-type="html" data-class="AlleFenster:STATE" data-map-class='{"closed":"bg-green", ".*":"bg-red"}'>
                    <div class="display-topcenter top-space"><div class="big">Fenster</div></div>
                    <div class="display-center fa fa-4x ftui-window"></div>
                    <div class="display-bottomleft bottom-space left-space" data-type="label"
                         data-substitution='["alle Fenster sind geschlossen.","alles geschlossen","FensterRechts|FensterLeft|Fenster","<br>","noch offen",""]'
                         data-get="AllWindows:text"></div>
                    <div class="display-bottomright small" data-type="push" data-url="details_windows.html" data-color="#ffffff55" data-icon="fa-info-circle" data-background-icon=""></div>
                </div>
            </li>
            <li data-row="1" data-col="4" data-sizey="1" data-sizex="1">
                <!-- HERD -->
                <div class="display" data-type="html" data-class="HerdSummeStromwert:STATE" data-map-class='{"6[1-2]\\d.\\d\\d\\smA":"bg-green", ".*":"bg-red"}'>
                    <div class="display-topcenter top-space"><div class="big">Herd</div></div>
                    <div class="display-center fa fa-4x fa-utensils"></div>
                    <div class="display-bottomleft bottom-space left-space" data-type="label"
                         data-get="HerdSummeStromwert:STATE"></div>
                </div>
            </li>
            <li data-row="1" data-col="5" data-sizey="1" data-sizex="1">
                <!-- TUER -->
                <div class="display" data-type="html" data-class="EingangstuerRiegel:STATE" data-map-class='{"closed":"bg-green", ".*":"bg-red"}'>
                    <div class="display-topcenter top-space"><div class="big">Tür</div></div>
                    <div class="display-center fa fa-4x ftui-door"></div>
                    <div class="display-bottomright  bottom-space right-space fa fa-2x fa-lock" data-class="EingangstuerRiegel:STATE" data-map-class='{"closed":"hide", ".*":""}'></div>
                </div>
            </li>
            <li data-row="1" data-col="6" data-sizey="1" data-sizex="2">
                <!-- HOMESTATUS -->
                <div class="sheet bg-blue">
                    <div class="row-30">
                        <div class="cell big bottom-align">Current Mode</div>
                    </div>
                    <div class="row-70">
                        <div class="cell great bold" data-type="html" data-content="HomeStatus:STATE" data-map-content='{"1":"HOME", "2":"SLEEP","3":"AWAY","4":"HOLIDAY"}'></div>
                    </div>
                </div>
            </li>
            <li data-row="2" data-col="1" data-sizey="2" data-sizex="2">
                <!-- WEATHER -->
                <div class="sheet bg-blue">
                    <div class="row">
                        <div class="cell big">Today</div>
                    </div>
                    <div class="row">
                        <div class="cell w-80">
                            <div class="hbox items-space-around">
                                <div class="bigger" data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay"></div>
                                <div class="great bold" data-type="label" data-device="AgroWeather" data-get="temperature" data-unit="°C"></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell w-80 big">
                            <div class="hbox items-space-around">
                                <div class="hbox col-50">
                                    <div data-type="label" data-device="AgroWeather" data-get="fc0_tempMin" data-post-text="°"></div>
                                    <div>&nbsp;/&nbsp;</div>
                                    <div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-post-text="°"></div>
                                </div>
                                <div class="hbox col-50">
                                    <i class="fa fa-fw fa-umbrella"></i>
                                    <div class="" data-type="label" data-device="AgroWeather" data-get="fc0_chOfRainDay" data-unit="%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell w-80">
                            <div class="cell horizontalLine ">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="cell big">Tomorrow</div>
                    </div>
                    <div class="row">
                        <div class="cell w-80 big">
                            <div class="hbox w-80 items-space-around">
                                <div class="tiny right-space" data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay"></div>
                                <div class="hbox col-50">
                                    <div data-type="label" data-device="AgroWeather" data-get="fc1_tempMin" data-unit="°"></div>
                                    <div>&nbsp;/&nbsp;</div>
                                    <div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="°"></div>
                                </div>
                                <div class="hbox col-50">
                                    <i class="fa fa-fw fa-umbrella"></i>
                                    <div data-type="label" data-device="AgroWeather" data-get="fc1_chOfRainDay" data-unit="%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="2" data-col="3" data-sizey="1" data-sizex="1">
                <!-- LAMP -->
                <div class="sheet big" data-type="html" data-clicked="dummy1:STATE" data-map-clicked='{"bg-gray":"off", "bg-green":"on"}' data-class="dummy1:STATE" data-map-class='{"on":"bg-green", "off":"bg-gray"}'>
                    <div class="row">
                        <div class="cell">Lamp</div>
                    </div>
                    <div class="row"><i class="cell fa fa-2x fa-lightbulb-o"></i></div>
                    <div class="row">
                        <div class="cell plain" data-type="spinner" data-device="ftuitest" data-background-color="transparent" data-width="inherit" data-height="auto"></div>
                    </div>
                </div>
            </li>
            <li data-row="2" data-col="4" data-sizey="1" data-sizex="1">
                <!-- LAMP -->
                <div class="sheet big" data-type="html" data-clicked="PowerAV_Sw:STATE" data-map-clicked='{"bg-gray":"off", "bg-green":"on"}' data-class="PowerAV_Sw:STATE" data-map-class='{"on":"bg-green", "off":"bg-gray"}'>
                    <div class="row">
                        <div class="cell">Schrank</div>
                    </div>
                    <div class="row"><i class="cell fa fa-2x fa-lightbulb-o"></i></div>
                    <div class="row">
                        <div class="cell plain" data-type="spinner" data-device="ftuitest" data-background-color="transparent" data-width="inherit" data-height="auto"></div>
                    </div>
                </div>
            </li>
            <li data-row="2" data-col="5" data-sizey="1" data-sizex="1">
                <!-- LAMP -->
                <div class="sheet big" data-type="html" data-clicked="PowerAV_Sw:STATE" data-map-clicked='{"bg-gray":"off", "bg-green":"on"}' data-class="PowerAV_Sw:STATE" data-map-class='{"on":"bg-green", "off":"bg-gray"}'>
                    <div class="row">
                        <div class="cell">Table</div>
                    </div>
                    <div class="row"><i class="cell fa fa-2x fa-lightbulb-o"></i></div>
                    <div class="row">
                        <div>&nbsp;&nbsp;</div>
                    </div>
                </div>
            </li>
            <li data-row="2" data-col="6" data-sizey="1" data-sizex="2">
                <!-- TEMPS -->
                <div class="sheet bg-blue">
                    <div class="row-30">
                        <div class="cell big">Apartment</div>
                    </div>
                    <div class="row-70">
                        <div class="cell w-80">
                            <div class="hbox items-space-around">
                                <div class="grande" data-type="label" data-device="THSensorWZ" data-get="temperature" data-unit="°C"></div>
                                <div class="">
                                    <div class="tall" id="hum" data-type="label" data-device="THSensorWZ" data-get="humidity" data-unit="%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="3" data-col="3" data-sizey="1" data-sizex="1">
                <!-- KITCHEN -->
                <div class="sheet big" data-type="html" data-clicked="HerdLicht_Sw:STATE" data-map-clicked='{"bg-gray":"off", "bg-green":"on"}' data-class="HerdLicht_Sw:STATE" data-map-class='{"on":"bg-green", "off":"bg-gray"}'>
                    <div class="row">
                        <div class="cell">Kitchen</div>
                    </div>
                    <div class="row"><i class="cell fa fa-2x fa-lightbulb-o"></i></div>
                    <div class="row">
                        <div>&nbsp;&nbsp;</div>
                    </div>
                </div>
            </li>
            <li data-row="3" data-col="4" data-sizey="1" data-sizex="1">
                <!-- GALLERY -->
                <div class="sheet big" data-type="html" data-clicked="GalerieLicht:STATE" data-map-clicked='{"bg-gray":"off", "bg-green":"on"}' data-class="GalerieLicht:STATE" data-map-class='{"on":"bg-green", "off":"bg-gray"}'>
                    <div class="row">
                        <div class="cell">Gallery</div>
                    </div>
                    <div class="row"><i class="cell fa fa-2x fa-lightbulb-o"></i></div>
                    <div class="row">
                        <div>&nbsp;&nbsp;</div>
                    </div>
                </div>
            </li>
            <li data-row="3" data-col="5" data-sizey="1" data-sizex="1">
                <!-- GARDEN -->
                <div class="sheet big" data-type="html" data-clicked="GartenLicht:STATE" data-map-clicked='{"bg-gray":"off", "bg-green":"on"}' data-class="GartenLicht:STATE" data-map-class='{"on":"bg-green", "off":"bg-gray"}'>
                    <div class="row">
                        <div class="cell">Garden</div>
                    </div>
                    <div class="row"><i class="cell fa fa-2x fa-lightbulb-o"></i></div>
                    <div class="row">
                        <div>&nbsp;&nbsp;</div>
                    </div>
                </div>
            </li>
            <li data-row="3" data-col="6" data-sizey="1" data-sizex="1">
                <!-- DOOR -->
                <div class="sheet bg-blue">
                    <div class="row-30">
                        <div class="cell big bottom-align">FrontDoor</div>
                    </div>
                    <div class="row-70">
                        <i class="fa great cell" data-type="html" data-class="Eingangstuer:STATE" data-map-class='{"open":"fa-expand", "closed":"fa-compress"}'></i>
                    </div>
                </div>
            </li>
            <li data-row="3" data-col="7" data-sizey="1" data-sizex="1">
                <!-- DOOR -->
                <div class="sheet bg-blue">
                    <div class="row-30">
                        <div class="cell big bottom-align">BackDoor</div>
                    </div>
                    <div class="row-70">
                        <i class="fa great cell" data-type="html" data-class="TerrassenTuer:STATE" data-map-class='{"open":"fa-expand", "closed":"fa-compress"}'></i>
                    </div>
                </div>
            </li>
            <li data-row="4" data-col="1" data-sizey="1" data-sizex="1">
                <!-- ME -->
                <div class="sheet big bg-lightgray">
                    <div class="row-30">
                        <div class="cell bottom-align">Living Room</div>
                    </div>
                    <div class="row-70">
                        <i class="cell fa fa-2x fa-music"></i>
                    </div>
                </div>
            </li>
            <li data-row="4" data-col="2" data-sizey="1" data-sizex="1">
                <!-- LINK -->
                <a class="sheet big bg-gray" href="index.html">
                    <div class="row-30">
                        <div class="cell bottom-align">Bedroom</div>
                    </div>
                    <div class="row-70">
                        <i class="cell fa fa-2x fa-bed"></i>
                    </div>
                </a>
            </li>
            <li data-row="4" data-col="3" data-sizey="1" data-sizex="1">
                <!-- LINK -->
                <a class="sheet big bg-gray" href="cams.html">
                    <div class="row-30">
                        <div class="cell bottom-align">Cameras</div>
                    </div>
                    <div class="row-70">
                        <i class="cell fa fa-2x fa-video-camera"></i>
                    </div>
                </a>
            </li>
            <li data-row="4" data-col="4" data-sizey="1" data-sizex="1">
                <!-- SOUND -->
            </li>
            <li data-row="4" data-col="5" data-sizey="1" data-sizex="1">
                <!-- SAT -->
                <div class="sheet big" data-type="html" data-clicked="SatReceiver:power" data-map-clicked='{"bg-gray":"off", "bg-green":"on"}' data-class="SatReceiver:power" data-map-class='{"on":"bg-green", "off":"bg-gray"}'>
                    <div class="row-30">
                        <div class="cell">SAT</div>
                    </div>
                    <div class="row-40"><i class="cell fa fa-2x fa-power-off"></i></div>
                    <div class="row-30 normal">
                        <div class="sheet">
                            <div class="row">
                                <i class="cell-25 fa fa-step-backward" data-type="html" data-clicked="SatReceiver:STATE" data-map-clicked='{".*":"channelDown"}'></i>
                                <div class="cell-50 truncate" data-type="html" data-content="SatReceiver:channel"></div>
                                <i class="cell-25 fa fa-step-forward inline" data-type="html" data-clicked="SatReceiver:STATE" data-map-clicked='{".*":"channelUp"}'></i>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="4" data-col="6" data-sizey="1" data-sizex="1">
                <!-- BadRadio -->
                <div class="sheet big" data-type="html" data-clicked="BadRadio:STATE" data-map-clicked='{"bg-gray":"off", "bg-green":"on"}' data-class="BadRadio:STATE" data-map-class='{"on":"bg-green", "off":"bg-gray"}'>
                    <div class="row-30">
                        <div class="cell">BAD</div>
                    </div>
                    <div class="row-40"><i class="cell fa fa-2x fa-power-off"></i></div>
                    <div class="row-30 normal">
                        <div class="sheet">
                            <div class="row">
                                <i class="cell-25 fa fa-step-backward" data-type="html" data-clicked="WebRadio:STATE" data-map-clicked='{".*":"Prev"}'></i>
                                <div class="cell-50 truncate" data-type="html" data-content="WebRadio:STATE">radio</div>
                                <i class="cell-25 fa fa-step-forward inline" data-type="html" data-clicked="WebRadio:STATE" data-map-clicked='{".*":"Next"}'></i>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li data-row="4" data-col="7" data-sizey="1" data-sizex="1">
                <!-- SOUND -->
                <div class="sheet big" data-type="html" data-clicked="AvReceiver:power" data-map-clicked='{"bg-gray":"off", "bg-green":"on"}' data-class="AvReceiver:power" data-map-class='{"on":"bg-green", "off":"bg-gray"}'>
                    <div class="row">
                        <div class="cell">RADIO</div>
                    </div>
                    <div class="row"><i class="cell fa fa-2x fa-power-off"></i></div>
                    <div class="row">
                        <div class="cell plain" data-type="spinner" data-device="AvReceiver" data-get="volume" data-set="volume" data-background-color="transparent" data-width="inherit" data-height="auto"></div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</body>

</html>

setstate

#5
16 Januar 2019, 20:16:25
Und noch ein aktuelleres Beispiel

Code Auswählen

<!-- FENSTER -->
<li data-row="1" data-col="7" data-sizey="2" data-sizex="2">
    <div class="display" data-type="html" data-class="AlleFenster:STATE" data-map-class='{"closed":"bg-green", ".*":"bg-red"}'>
        <div class="display-topcenter top-space"><div class="big">Fenster</div></div>
        <div class="display-center fa fa-4x ftui-window"></div>
        <div class="display-bottomleft bottom-space left-space" data-type="label"
             data-substitution='["alle Fenster sind geschlossen.","alles geschlossen","Kinderzimmer","Kind","FensterRechts","RechtsFenster","FensterLinks","LinksFenster", "Fenster","<br>","noch offen",""]'
             data-get="AllWindows:text"></div>
    </div>
</li>

setstate

#6
16 Januar 2019, 21:53:27
Dark-blue gibt es als CSS-Theme

Code Auswählen
<link rel="stylesheet" href="css/fhem-darkblue-ui.css" />

Code Auswählen

<!DOCTYPE html>
<html>

<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/fhem-darkblue-ui.css" />
    <script src="js/fhem-tablet-ui.min.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 -->
            </li>
            <li data-row="1" data-col="4" data-sizey="2" data-sizex="2">
                <!-- LAMP -->
                <div class="vbox items-center big" data-type="html"
                     data-clicked="dummy1:STATE"
                     data-map-clicked='{"gray":"off", "white":"on"}'
                     data-class="dummy1:STATE"
                     data-map-class='{"on":"white", "off":"gray"}'>
       
                    <div class="fa fa-3x fa-lightbulb"
                             data-type="classchanger"
                             data-get="dummy1:STATE"
                             data-on-class="bold"
                             data-off-class="thin"></div>
                    <div class="big" data-type="label" data-get="dummy1:STATE"></div>
                   
                    </div>
         
            </li>
            <li data-row="1" data-col="10" data-sizey="4" data-sizex="3">
                <header>EXAMPLE3</header>
                <!-- place your widget here -->
            </li>
            <li data-row="5" data-col="1" data-sizey="3" data-sizex="3">
                <header>EXAMPLE4</header>
                <!-- place your widget here -->
            </li>
            <li data-row="5" data-col="4" data-sizey="2" data-sizex="2">

            </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>

frankreed

#7
17 Januar 2019, 08:53:38
Hui das ist ja super!
Kommt genau in die Richtung, was mir vorschwebt!
Vielen vielen Dank für die Mühe und Codebeispiele!

majorshark

#8
17 Januar 2019, 15:50:45
Ich habe jetzt mal angefangen eine neue Oberfläche mit diesen Beispielen aufzusetzen. Das funktioniert soweit ganz gut.

Eine Frage habe ich dazu. Wie kann man ein Symbol je nach state rotieren lassen (fa-spin) oder nicht.
Grüße aus Dewitz

VM auf Synology DS718+ mit FHEM 5.9 auf Debian 9.5/32-Bit (stretch)
Nächster Leipziger Stammtisch:

setstate

#9
17 Januar 2019, 16:16:36
In das class-map mit rein

Code Auswählen


      data-map-class='{"on":"white spin", "off":"gray"}'



Oder als weiteren State

Code Auswählen


      data-map-class='{"on":"white", "off":"gray", "work":"red spin"}'

Ulm32b

#10
17 Januar 2019, 16:33:45 Letzte Bearbeitung: 17 Januar 2019, 17:29:30 von Ulm32b
Zitat von: majorshark am 17 Januar 2019, 15:50:45
Eine Frage habe ich dazu. Wie kann man ein Symbol je nach state rotieren lassen (fa-spin) oder nicht.

...

In das class-map mit rein ...
Oder als weiteren State ...

Einen etwas anderen Weg (mittels data-states) beschriebt die Doku: https://wiki.fhem.de/wiki/FTUI_Widget_Symbol und dort unter der Überschrift "Symbol mit vier Zuständen und Animation":
Code Auswählen
<div
     data-type="symbol"
     data-device="Garage"
     data-states='["oben","unten","lauf","angehalten","Fehler"]'
     data-icons='["oa-fts_garage_door_10","oa-fts_garage_door_100","fa-cog fa-spin","oa-fts_garage_door_40","fa-bug"]'
     data-colors='["GoldenRod","SeaGreen","Crimson","Crimson","Crimson"]'></div>


@setstate: Wenn da nichts an mir vorbeigegangen ist, gibt es mindestens 2 neue (?) Sachen, die noch nicht dokumentiert sind:

  • class=smallicon
  • data-map-class
Könntest Du bitte mal kurz erklären, wie das anzuwenden ist und für welche Widgets es gilt?

majorshark

#11
17 Januar 2019, 17:16:32 Letzte Bearbeitung: 17 Januar 2019, 18:30:54 von majorshark
Grazie. Probiere ich aus. So ähnlich hatte ich es schon lief aber nicht. Das Icon war nicht zu sehen.

Edit:
So habe ich schon drin und funzt nicht. :-( Das Symbol wird einfach nicht angezeigt. Irgend ein Weißes Kästchen dreht sich aber im Kreis. fa-cog ist aber schon vorhanden weil es bei anderen statischen Symbolen angezeigt wird.

Code Auswählen

<div class="sheet big" data-type="html" data-clicked="Steckdose:STATE" data-map-clicked='{"bg-gray":"off", "bg-green":"on"}' data-class="Steckdose:STATE" data-map-class='{"on":"bg-green", "off":"bg-gray"}'>             
<div class="row">
<div class="cell">Spühler</div>
        </div>
        <div class="row" data-type="html" data-clicked="Steckdose:STATE" data-class="Steckdose:STATE" data-map-class='{"on":"white fa-cog fa-spin", "off":"bg-gray"}'></div>
<div class="row">
        <div>&nbsp;&nbsp;</div>
         </div>
</div>
Grüße aus Dewitz

VM auf Synology DS718+ mit FHEM 5.9 auf Debian 9.5/32-Bit (stretch)
Nächster Leipziger Stammtisch:

setstate

#12
17 Januar 2019, 20:59:54
So geht es
Code Auswählen


<div class="sheet big" data-type="html" data-class="dummy1:STATE" data-map-class='{"on":"bg-green", "off":"bg-gray"}'>             
<div class="row">
<div class="cell">Spühler</div>
        </div>
        <div class="row">
              <div class="fa fa-4x fa-cog " data-type="html" data-clicked="dummy1:STATE" data-class="dummy1:STATE" data-map-class='{"on":"white fa-spin", "off":"bg-gray"}'></div>
        </div>
<div class="row">
        <div>&nbsp;&nbsp;</div>
         </div>
</div>

setstate

#13
17 Januar 2019, 22:37:07
Zitat von: Ulm32b am 17 Januar 2019, 16:33:45

@setstate: Wenn da nichts an mir vorbeigegangen ist, gibt es mindestens 2 neue (?) Sachen, die noch nicht dokumentiert sind:

  • class=smallicon
  • data-map-class
Könntest Du bitte mal kurz erklären, wie das anzuwenden ist und für welche Widgets es gilt?

ich glaube, das HTML Widget habe ich noch nicht vorgestellt. Ist eigentlich auch noch nie fertig geworden, aber ich nutze es schon so, wie es gerade ist.

data-type="html"
data-clicked="Steckdose:STATE"            an welches Device:Reading wird gesendet beim Click Event
data-map-clicked='{"bg-gray":"off", "bg-green":"on"}'   was wird beim Click gesendet: wenn class="bg-gray" vorliegt dann "off", wenn class="bg-green" dann on

data-class="Steckdose:STATE"                      durch welches Device:Reading wird class verändert
data-map-class='{"on":"bg-green", "off":"bg-gray"}'.    Was verändert class wie: wenn das Reading "on" ist, dann setze class="bg-green", wenn "off" dann bg-gray, usw.

- es gehören immer data-<attr> und data-map-<attr> zusammen
- data-map-* ist immer ein Object mit Key:Value (kein Array)
- zur Nutzung als Button, müssen die classes unter  data-clicked und data-class zusammenpassen: "on" > "bg-green" < "on" und "off" > "bg-gray" < "off"


Es gibt insgesamt folgende Inputs:
- data-checked (für attribute "checked"
- data-content (für innerHTML: <div>content</div> )
- data-value  (für <INPUT type='text'>, <INPUT type='range'>, <SELECT>)
- data-class

entsprechende Maps:
- data-map-checked
- data-map-content
- data-map-class

Outputs:
- data-changed
- data-clicked

entsprechende Maps:
- data-map-changed
- data-map-clicked

majorshark

#14
20 Januar 2019, 12:45:14
Zitat von: setstate am 17 Januar 2019, 20:59:54
So geht es
Code Auswählen


<div class="sheet big" data-type="html" data-class="dummy1:STATE" data-map-class='{"on":"bg-green", "off":"bg-gray"}'>             
<div class="row">
<div class="cell">Spühler</div>
        </div>
        <div class="row">
              <div class="fa fa-4x fa-cog " data-type="html" data-clicked="dummy1:STATE" data-class="dummy1:STATE" data-map-class='{"on":"white fa-spin", "off":"bg-gray"}'></div>
        </div>
<div class="row">
        <div>&nbsp;&nbsp;</div>
         </div>
</div>




So funktioniert es. Danke
Grüße aus Dewitz

VM auf Synology DS718+ mit FHEM 5.9 auf Debian 9.5/32-Bit (stretch)
Nächster Leipziger Stammtisch:
Drucken
Nach oben Seiten1
Benutzer-Aktionen