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.
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.
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....
Man kann für die Switch-Widgets Background-Icon konfigurieren, die rechteckig sind.
<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 ...
Gefunden:
War aber nur ein Versuch.
<!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> / </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> / </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> </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> </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> </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> </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>
Und noch ein aktuelleres Beispiel
<!-- 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>
Dark-blue gibt es als CSS-Theme
<link rel="stylesheet" href="css/fhem-darkblue-ui.css" />
<!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>
Hui das ist ja super!
Kommt genau in die Richtung, was mir vorschwebt!
Vielen vielen Dank für die Mühe und Codebeispiele!
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.
In das class-map mit rein
data-map-class='{"on":"white spin", "off":"gray"}'
Oder als weiteren State
data-map-class='{"on":"white", "off":"gray", "work":"red spin"}'
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 (https://wiki.fhem.de/wiki/FTUI_Widget_Symbol) und dort unter der Überschrift "
Symbol mit vier Zuständen und Animation":
<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?
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.
<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> </div>
</div>
</div>
So geht es
<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> </div>
</div>
</div>
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
Zitat von: setstate am 17 Januar 2019, 20:59:54
So geht es
<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> </div>
</div>
</div>
So funktioniert es. Danke