Einfärben von Data-icons & Labels in Abhängigkeit des Status von Sensoren

[yellowpinky]

Hallo;
Ich möchte meine data-icons der switches in Abhängigkeit des Status jener Sensoren die den open bzw. closed zustand erkennen farblich verändern bzw. selbiges auch mit dem label der darunterliegenden Beschriftung machen. Leider komme ich mit der Doku nicht so richtig zurecht und alle meine Versuche sind fehlgeschlagen.
Was habe ich geschafft -> einfärben des Symbols für den Garagenöffner, welche ich mit einem circlemenu realisiert habe.
Wo komme ich nicht weiter -> einfärben des Switches für das Einfahrtstor abhängig vom Zustand eines Sensors, Einfärben der Labels in Abhängikeit von Sensoren.... mit data-colors und data-limits bin ich da auch nicht weiter gekommen, weil diese so habe ich es verstanden nur numerische Werte annehmen dürfen 

Code Auswählen Erweitern


<li data-row="1" data-col="4" data-sizex="2" data-sizey="2">
        <header>Einfahrt</header>
                         
         <div data-type="switch" class="cell narrow top-space" data-device="A_Einfahrtstor" data-icon="fa-truck" data-set-on="on-for-timer 1" ></div>
         <div data-type="label" class="cell" data-device="A_Einfahrtstor_Status" data-substitution='["open","Einfahrtstor (Status: offen)","closed","Einfahrtstor (Status: zu)"]'></div>
               
         <div class="container">
         <div data-type="circlemenu" class="cell narrow" data-circle-radius="50" data-direction="top">
             <ul>
                <li><div data-type="symbol" data-device="A_Garagentor_Status" data-get-on='open' data-get-off='closed' data-on-color='#a90000' data-off-color='#00a900' data-off-background-color='#a90000' data-icon="fa-car"></div></li>
                <li><div data-type="push" data-device="A_GaragentorAuf" data-set-on="on-for-timer 1" data-icon="">auf</div></li>
                <li><div data-type="push" data-device="A_GaragentorZu" data-set-on="on-for-timer 1" data-icon="">ab</div></li>
             </ul>
          </div>
          </div>
         <div data-type="label" class="cell narrow" data-device="A_Garagentor_Status" data-substitution='["open","Garagentor (Status: offen)","closed","Garagentor (Status: zu)"]'></div>
     
</li>


LG
Daniel

[setstate]

data-limits, um die Vergleichswerte anzugeben, ist schon okay. Auch für Strings.

Wem es lieber ist, kann bei Strings aber auch data-states benutzen. (unter der Haube das Gleiche)

Code Auswählen Erweitern

<div data-type="label" data-device="dummy2" data-states='["open","closed"]' data-colors='["red","green"]' data-substitution='["open","Garagentor (Status: offen)","closed","Garagentor (Status: zu)"]'></div>

[yellowpinky]

Hallo setstate;

Hab ich getestet, jedoch färbt sich die Schrift nicht ein, ebenso wie bei data-limits.

Code Auswählen Erweitern


<div data-type="label" class="cell narrow" data-device="A_Garagentor_Status" data-states='["open","closed"]' data-colors='["#a90000","#00a900"]' data-substitution='["open","Garagentor (Status: offen)","closed","Garagentor (Status: zu)"]'></div>


LG
Daniel

[setstate]

sieht aber okay aus, beim mir läuft es auch. Ich habe gerade keine Idee mehr 

[yellowpinky]

Ist es möglich, das ich ein Poblem mit meinen stylesheets habe ??

Code Auswählen Erweitern


    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
    <meta name="widget_base_width" content="116">
    <meta name="widget_base_height" content="131">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
    <meta name="debug" content="0"> <!-- 1=output to console;0=no output -->

    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
    <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />

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

    <script src="/fhem/pgm2/jquery.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
    <script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
    <script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>