FHEM Tablet Ui Widget für Rolladensteuerung

[Thorsten Pferdekaemper]

Hi Thorsten, darf ich fragen, welche Aktoren du zur Steuerung Deiner Rolläden nutzt?

Klar. Homematic Wired HMW_LC_Bl1_DR.
Gruß,
   Thorsten

[Thorsten Pferdekaemper]

Für meine Rolläden nutze ich das Circlemenu.

Damit kann ich dann bestimmte Positionen des Rolladens direkt anfahren.

Die Farbe des Pfeils zeigt den aktuellen Zustand des Rolladens, der Pfeil selbst zeigt die nächste Aktion an.
In meinem Beispiel sieht man, dass HWR geöffnet ist und Esszimmer z.B. geschlossen ist.
Wenn ich jetzt auf HWR drücke, öffnet sich das Circlemenu und ich kann die Lüftungsposition anfahren.

Das würde ich gerne mit meinen Rollladen-Bildchen vereinigen. Könntest Du mal Dein Coding dazu hier einstellen?
Danke&Gruß,
   Thorsten

[farion]

Also ich habe da auch viel rumprobiert ... bin am Ende bei Pulldowns gelandet. Das ist nicht das Hübscheste, aber für uns das Praktikabelste. Sliden ist anstrengend finde ich.

Gruss Frieder

[Ban-ya]

Hi,
ich habe auch gerade an dem Thema rumgebastelt. Allerdings habe ich momentan den Fokus auf der Visualisierung. Ich habe mir dazu folgendes gebaut:

Hallo Thorsten,
Deine Lösung gefällt mir sehr gut. Ich habe sie sofort nachgebaut 
Ein Problem habe ich aber: Wenn mein Rollo oben ist, wird das Icon mit geschlossenem Rollo angezeigt und wenn das Rollo unten ist, das Icon mit dem offenen Rollo 
Wo könnte mein Problem liegen? Ich bin da noch Lernender

[Thorsten Pferdekaemper]

Ein Problem habe ich aber: Wenn mein Rollo oben ist, wird das Icon mit geschlossenem Rollo angezeigt und wenn das Rollo unten ist, das Icon mit dem offenen Rollo 
Wo könnte mein Problem liegen? Ich bin da noch Lernender

Das kommt etwas darauf an, wie herum der Rollo angeschlossen ist. Möglicherweise habe ich es auch verkehrt herum gemacht.
Hier wird definiert, welche Icons jeweils angezeigt werden:

Code Auswählen Erweitern


   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"]'

...einfach die Reihenfolge der Icons umkehren. ...also mit dem oa-fts_shutter_100 anfangen und mit oa-fts_window_2w aufhören.
Gruß,
   Thorsten

[Ban-ya]

Danke, ich probiere es gleich aus 
Einer wird es wohl verkehrt herum gemacht haben 
Gruß, Uwe

Nachtrag:

Es funktioniert    ich habe jetzt

Code Auswählen Erweitern

data-icons='["oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","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"]'
verwendet.
Jetzt muss ich nur noch herausbekommen, wie ich den Abstand zwischen Header und dem Icon und zwischen Icon und dem "Auf"-Button vergrößern kann.

Jetzt bin ich um einiges weiter gekommen. Danke.

[kvo1]

Hallo Thorsten,

das ist ja bisher nur die Visualisierung, wie schaut den Deine Bedienung / Steuerung aus ?

klaus

[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.

[Ban-ya]

Bei mir sieht es so aus:

Code Auswählen Erweitern

<li data-row="2" data-col="2" data-sizex="1" data-sizey="3">
<header class="headerTransparent">ROLLADEN</header>

<div data-type="symbol"
class="big narrow"
data-device="Az.Rolladen"
data-get="level"
data-icons='["oa-fts_shutter_100","oa-fts_shutter_90","oa-fts_shutter_80","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="#000000"
        data-on-background-color="#6ab3f7"
        data-background-icon="fa-square">
</div>

<div></div>
<div>
    <div data-type="switch" data-device="Az.Rolladen"
      data-get-on="100|[89][0-9]" data-get-off="!on"
      data-set-on="100" data-set-off=""
      data-icon="fa-angle-double-up" data-background-icon="fa-square" ></div>
    <div data-type="label" class="inline w1x">Auf</div>
</div>
<div>
    <div data-type="push" data-device="Az.Rolladen"
      data-set-on="stop" data-off-color="#2A2A2A"
      data-icon="fa-ellipsis-h" data-background-icon="fa-square"></div>
    <div data-type="label" class="inline w1x">Stop</div>
</div>
<div>
    <div data-type="switch" data-device="Az.Rolladen"
      data-get-on="[0-9]" data-get-off="!on"
      data-set-on="0" data-set-off=""
      data-icon="fa-angle-double-down" data-background-icon="fa-square"></div>
    <div data-type="label" class="inline w1x">Zu</div>
</div>
</li>

Das Bild dazu ist weiter oben schon zu sehen 

[Ban-ya]

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

Läuft der Slider so einigermaßen in "Echtzeit" mit ?

Gruß
Uwe

[Haecksler]

Läuft der Slider so einigermaßen in "Echtzeit" mit ?

Gruß
Uwe

Nein, der Slider nimmt erst die Position ein wenn der Aktor wieder die ist Lage meldet.

[Ban-ya]

Ist ja eigentlich logisch. Nächstes mal denke ich etwas länger über meine Fragen nach ...

[Thorsten Pferdekaemper]

das ist ja bisher nur die Visualisierung, wie schaut den Deine Bedienung / Steuerung aus ?

Hi,
also das beste, was ich bisher habe, sieht so aus:

Code Auswählen Erweitern


function rollladen_detail($device, $title) {
echo '
<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> ';
};

Das ist zwar PHP, aber ich denke, dass es auch so klar wird.
Das Widget für die Timer-Steuerung ist von hier: http://forum.fhem.de/index.php/topic,48106.0.html
Gruß,
   Thorsten

[kvo1]

also das beste, was ich bisher habe, sieht so aus:

und das sieht schon mal sehr sehr gut aus , so in etwas habe ich mir das auch vorgestellt (bin noch am Ideen sammeln) 

[Ban-ya]

Das ist das Beste, was ich bisher so gesehen habe !
Bei vielen Demoseiten hatte ich schon den Eindruck, keiner steuert Rollladen 
Ich muss ja auch an den WAF denken 
Das werde ich heute Abend gleich mal testen. Die Timersteuerung ist toll.
Gruß
Uwe