FHEM Tablet Ui Widget für Rolladensteuerung

[Jens_B]

Ich hänge mich hier mal dran, da ich mich auch gerade daran versuche.
Mein Code sieht so aus:

Code Auswählen Erweitern

<li data-row="1" data-col="3" data-sizex="2" data-sizey="1">
        <header>SCHLAFZIMMER</header>
        <div class="inline">
        <div data-type="symbol" class="right-space-2x" data-device="ROLLLADEN_SZ_LINKS" data-get="level"
       data-icons='["oa-fts_shutter_90","oa-fts_shutter_80","oa-fts_shutter_70","oa-fts_shutter_60","oa-fts_shutter_50",
            "oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20",
        "oa-fts_shutter_10","oa-fts_window_2w"]'
       data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]' data-on-color="#2A2A2A"
       data-on-background-color="#aa6900" data-background-icon="fa-circle">
        </div>
        <div data-type="symbol" class="left-space-2x" data-device="ROLLLADEN_SZ_RECHTS" data-get="level"
       data-icons='["oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_70","oa-fts_shutter_70","oa-fts_shutter_60",
            "oa-fts_shutter_50","oa-fts_shutter_40","oa-fts_shutter_30","oa-fts_shutter_20",
        "oa-fts_shutter_10","oa-fts_window_2w"]'
       data-get-on='["0","10","20","30","40","50","60","70","80","90","100"]' data-on-color="#2A2A2A"
       data-on-background-color="#aa6900" data-background-icon="fa-circle">
        </div>
      </div>
        <div data-type="slider" class="horizontal" data-device="ROLLLADEN_SZ_LINKS" data-min="0" data-max="100"></div>
        <div data-type="slider" data-device="ROLLLADEN_SZ_RECHTS" data-min="0" data-max="100" class="horizontal"></div>
</li>

Auf de FTUI sieht es aus wie auf dem Bild, ich bekomme es einfach nicht hin, die Slider nebeneinander zu legen... Inline geht nicht.

[lullebammel]

@Haecksler

Ich habe eine Kombination aus Slider und Circlemenue, die Standardbedingung wird über das Circlemenue gemacht, dann ist der Slider nur eine zusätzliche Visualisierung.

Könntest du bitte deinen HTML Code dafür zur Verfügung stellen.
Genau so möchte ich es auch haben 

Das wäre super!

[Thorsten Pferdekaemper]

Auf de FTUI sieht es aus wie auf dem Bild, ich bekomme es einfach nicht hin, die Slider nebeneinander zu legen... Inline geht nicht.

Hi,
ich habe mich damit auch eine Weile herumgequält, um am Ende dann doch wieder <table> zu verwenden.
Gruß,
   Thorsten

[Haecksler]

@Haecksler

Könntest du bitte deinen HTML Code dafür zur Verfügung stellen.
Genau so möchte ich es auch haben 

Das wäre super!

Hier der gewünschte Code:

Code Auswählen Erweitern

<div data-type="label" class="cell wider">Schlafzimmer</div>
<div data-type="slider" data-device="Jalousie" data-get="STATE" data-min="0"  data-max="100" data-off='(ZU|0)' data-on='(AUF|100)' data-value=true  data-height="200" class="cell wider"></div>
<div data-type="circlemenu" data-direction="right-half" data-circle-radius="90" data-item-diameter="67" class="circlemenu right-space top-space-3x" style="font-size:130%">
    <ul class="menu">
<li> <div data-type="push" data-icon="fa-bars"></div></li>
          <li> <div data-type="push" data-device="Jalousie" data-icon="fa-angle-double-up" data-set-on="AUF"></div></li>
  <li> <div data-type="push" data-device="Jalousie" data-icon="fa-angle-up"  data-set-on="up 2"></div></li>
          <li> <div data-type="push" data-device="Jalousie" data-icon="fa-minus"  data-set-on="STOP"></div></li>
  <li> <div data-type="push" data-device="Jalousie" data-icon="fa-angle-down" data-set-on="down 2"></div></li>
          <li> <div data-type="push" data-device="Jalousie" data-icon="fa-angle-double-down" data-set-on="ZU"></div></li>
    </ul>
</div>

Gruß,
Stefan

[setstate]

es geht mit

Code Auswählen Erweitern


       <div data-type="slider" data-device="ROLLLADEN_SZ_LINKS" data-min="0" data-max="100" data-width="110" class="horizontal inline narrow"></div>
        <div data-type="slider" data-device="ROLLLADEN_SZ_RECHTS" data-min="0" data-max="100" data-width="110" class="horizontal inline narrow"></div>



dann sind die slider nebeneinander
durch den kleinen Gridster Container (data-sizex="2") ist für die Standard Slider nicht genügend Platz für Nebeneinander. Deshalb muss noch das data-width="110" und das class="narrow" hinzu

[Ban-ya]

Das ist zwar PHP, aber ich denke, dass es auch so klar wird.

Schade, mir leider nicht. Ich weiß nicht, wie ich das zum laufen bringe ...

[Thorsten Pferdekaemper]

Schade, mir leider nicht. Ich weiß nicht, wie ich das zum laufen bringe ...

Naja, Du nimmst den HTML-Teil, also das:

Code Auswählen Erweitern


<table>
<tr>
<td>
<div data-type="symbol" class="cell bigger left" data-device="'.$device.'" data-get="level"
    data-icons=\'["oa-fts_window_2w","oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_30","oa-fts_shutter_40",
"oa-fts_shutter_50","oa-fts_shutter_60","oa-fts_shutter_70","oa-fts_shutter_80",
"oa-fts_shutter_90","oa-fts_shutter_100"]\'
    data-get-on=\'["0","10","20","30","40","50","60","70","80","90","100"]\' data-on-color="#2A2A2A"
data-on-background-color="#aa6900" data-background-icon="fa-square">
</div>
</td>
<td> 
<div class="triplebox-v left" >
<div data-type="push" data-device="'.$device.'" data-icon="fa-chevron-up" data-background-icon="fa-square-o" data-set-on="off" class=""> </div>
<div data-type="push" data-device="'.$device.'" data-icon="fa-minus" data-background-icon="fa-square-o" data-set-on="stop" class=""> </div>
<div data-type="push" data-device="'.$device.'" data-icon="fa-chevron-down" data-background-icon="fa-square-o" data-set-on="on" class=""> </div>
</div>
</td>
<td>
          <div data-type="select" data-device="'.$device.'" data-items=\'["0","10","20","30","40","50","60","70","80","90","100"]\'
       data-alias=\'["Auf","10%","20%","30%","40%","50%","60%","70%","80%","90%","Zu"]\' data-get="" data-set="" class="cell" ></div>
</td>
</tr>
<tr>
<td>
<div style="position:absolute; bottom:0; right:0;"
          data-type="wdtimer"
          data-device="'.$device.'Timer"   
          data-style="round"
          data-theme="dark"
          data-title="Rollladen '.$title.'" 
          data-cmdlist=\'{"Auf":"0","Zu":"100","10%":"10","20%":"20","30%":"30","40%":"40","50%":"50","60%":"60","70%":"70","80%":"80","90%":"90"}\'
        >
       <div data-type="button" class="cell small readonly" data-icon="oa-edit_settings" data-background-icon="fa-square-o"
        data-on-color="#505050" data-on-background-color="#505050">
</div>
        </div>
</td>
</tr>
</table>

...und ersetzt jedesmal '.$device.' durch den Namen des Rollladenaktors. Einmal ist dann noch '.$title.' durch z.B. den Namen des Raums zu ersetzen.
Das ganze packst Du dann in eins der <li>-Elemente des FTUI. Es sollte mindestens Größe 2x2 haben.
Gruß,
   Thorsten

[Ban-ya]

Danke, für Deine schnelle Antwort.
Ich hatte es auch (fast) so gemacht. Bei Deinem Beispiel war aber noch ein

Code Auswählen Erweitern

function rollladen_detail($device, $title) {
echo '
davor. Und so ging es dann erst mal nicht 
Gruß, Uwe

[Jens_B]

durch den kleinen Gridster Container (data-sizex="2") ist für die Standard Slider nicht genügend Platz für Nebeneinander. Deshalb muss noch das data-width="110" und das class="narrow" hinzu

Ja danke. klappt .
@thorsten: ja, mit html table Attribut klappt es auch. Danke.
Jetzt würde ich gern noch ein Label machen, welches den Status des Rollladen anzeigt. das klappt auch soweit, allerdings ist beim schalten immer das typische "set_" zu sehen.(Homematic Device). Wenn ich mit data-Substitution="[^set_]+"als Regex arbeite hat das keinen Einfluss.
Verstehe ich das mit dem Data Substitution falsch?

Btw, auch "\d+" filtert mir nicht nur die Zahlen raus in der Anzeige.

[Thorsten Pferdekaemper]

Jetzt würde ich gern noch ein Label machen, welches den Status des Rollladen anzeigt. das klappt auch soweit, allerdings ist beim schalten immer das typische "set_" zu sehen.(Homematic Device). Wenn ich mit data-Substitution="[^set_]+"als Regex arbeite hat das keinen Einfluss.
Verstehe ich das mit dem Data Substitution falsch?

Wenn Du ein Homematic-Device hast, dann solltest Du besser das Reading "level" nehmen und nicht "state".
Gruß,
   Thorsten

[Jens_B]

Hallo Thorsten,
mit level habe ich es erst probiert. Hatte keine Auswirkung...

Code Auswählen Erweitern

div data-type="label" data-device="ROLLLADEN_SZ_LINKS" data-get="level" data-substitution="[d\]+" class="narrow small"</div>

Vielleicht verstehe ich das mit data-substitution auch falsch.

[Thorsten Pferdekaemper]

Hallo Thorsten,
mit level habe ich es erst probiert. Hatte keine Auswirkung...

Code Auswählen Erweitern

div data-type="label" data-device="ROLLLADEN_SZ_LINKS" data-get="level" data-substitution="[d\]+" class="narrow small"</div>

Vielleicht verstehe ich das mit data-substitution auch falsch.

Lass das mit der data-substitution doch einfach weg. Level hat sowieso nur genau das, was Du brauchst.

[Jens_B]

Dachte ich auch, aber es erscheint kurz immer "set_80" zum Beispiel, wenn ich denn Rollladen auf 80% fahre.

[Ban-ya]

...und ersetzt jedesmal '.$device.' durch den Namen des Rollladenaktors. Einmal ist dann noch '.$title.' durch z.B. den Namen des Raums zu ersetzen.
Das ganze packst Du dann in eins der <li>-Elemente des FTUI. Es sollte mindestens Größe 2x2 haben.
Gruß,
   Thorsten

Das habe ich jetzt gemacht, ging aber immer noch nicht so richtig.
Ich habe dann noch die Backslash entfernt, nun gehts 
aber ...
Die Prozentauswahl sendet keinen Befehl ab 
Sorry, bin noch am lernen mit der Syntax
Danke, für Deine Hilfe

[Thorsten Pferdekaemper]

Dachte ich auch, aber es erscheint kurz immer "set_80" zum Beispiel, wenn ich denn Rollladen auf 80% fahre.

Im Reading "level"? Das ist seltsam. Ist das ein Funk-Aktor oder Wired?