FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: eburkon am 14 Oktober 2015, 21:36:01

Titel: FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: eburkon am 14 Oktober 2015, 21:36:01
Servus Miteinander,

Und noch eine Frage. Ich bin auf der Suche nach einem gut bedienbaren Widget für die Rolladensteuerung.
Eigentlich dachte ich am ehesten an sowas Wie das Dimmer Widget allerdings habe ich es a) nicht hinbekommen
Und b) finde ich es etwas fummelig.

Ein Slider braucht mihr zu viel Platz. Jemand ne Idee?

Gruss
   Ekkehard
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: ChrisK am 14 Oktober 2015, 21:56:03
Ich habe für die Rollos ein circlemenu eingebaut:
            <div data-type="circlemenu" class="cell circlemenu" data-direction="right-half" data-circle-radius="90">
              <ul class="menu">
                <li class="circleborder"><div data-type="label"
                         data-limits='["0|off","[12]*[0-9]","[34][0-9]","[56][0-9]","[78][0-9]","([9][0-9]|100|on)"]'
                         data-colors='["#FFFFFF","#666666","#999999","#BBBBBB","#DDDDDD","#FFFFFF"]'
                         data-device='ba_rollo2'
                         data-background-icon="fa-wrench"></div>
                </li>
                <li><div data-type="push"
                         data-cmd="set"
                         data-device="ba_rollo2"
                         data-set="on"
                         data-icon="">auf</div></li>
                <li><div data-type="push"
                         data-cmd="set"
                         data-device="ba_rollo2"
                         data-set="75"
                         data-icon="">75</div></li>
                <li><div data-type="push"
                         data-cmd="set"
                         data-device="ba_rollo2"
                         data-set="50"
                         data-icon="">50</div></li>
                <li><div data-type="push"
                         data-cmd="set"
                         data-device="ba_rollo2"
                         data-set="25"
                         data-icon="">25</div></li>
                <li><div data-type="push"
                         data-cmd="set"
                         data-device="ba_rollo2"
                         data-set="off"
                         data-icon="">zu</div></li>
              </ul>
            </div>

Ist zwar nicht für jeden passend, uns reichen aber "zu", 25%, 50%, 75% und "auf".
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: eburkon am 14 Oktober 2015, 23:15:46
Das circlemenue ist eine Option.
Kriegt man es auch hin, dass das Icon
In etwa den Stand des Rollos hinbekommt?

Gruss
   Ekkehard
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: skuggy am 15 Oktober 2015, 07:34:15
Hallo Ekkehard,

vielleicht ist diese Lösung was für dich.

http://forum.fhem.de/index.php/topic,34233.msg330879.html#msg330879  (http://forum.fhem.de/index.php/topic,34233.msg330879.html#msg330879)

Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: viegener am 15 Oktober 2015, 23:43:26
Hallo Ekkehard,
ich habe dazu einen slider mit 3 Buttons für meine Somfy-Rolläden verwendet (siehe unten im Bild)
Das ist recht intuitiv bei der Statusanzeige und auch nicht fummelig, benötigt aber etwas Platz.

Details sind hier: http://forum.fhem.de/index.php/topic,34233.msg301873.html#msg301873 (http://forum.fhem.de/index.php/topic,34233.msg301873.html#msg301873)

Gruss,
Johannes
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: eburkon am 20 Oktober 2015, 14:13:58
Hallo Miteinander,

ich hab jetzt mal das circlemenu probiert. Soweit so gut. Allerdings scheint es so zu sein,
dass man mit dem data-type push nicht mehrere Stati in Form verschiedener Icons darstellen kann.

Ich hab das jetzt mal so probiert. Scheint aber nicht zu funktionieren.

     <div data-type="circlemenu" class="cell circlemenu">
              <ul>
                <li><div data-type="push"
                         data-device="EIB_1500"
                         data-icons='["oa-fts_shutter_10","oa-fts_shutter_20","oa-fts_shutter_40","oa-fts_shutter_60","oa-fts_shutter_80","oa-fts_shutter_100"]'
                         data-get-on='["[0-1]\\.[0-9]","[2-3]\\.[0-9]","[4-5]\\.[0-9]","[6-7]\\.[0-9]","[8-9]\\.[0-9]","100"]'
                         data-background-icon=" "></div></li>
                <li><div data-type="push" data-device="EIB_1500" data-set="EIB_1500 0" data-icon="">0</div></li>
                <li><div data-type="push" data-device="EIB_1500" data-set="EIB_1500 20" data-icon="">20</div></li>
                <li><div data-type="push" data-device="EIB_1500" data-set="EIB_1500 40" data-icon="">40</div></li>
                <li><div data-type="push" data-device="EIB_1500" data-set="EIB_1500 60" data-icon="">60</div></li>
                <li><div data-type="push" data-device="EIB_1500" data-set="EIB_1500 80" data-icon="">80</div></li>
                <li><div data-type="push" data-device="EIB_1500" data-set="EIB_1500 100" data-icon="">100</div></li>
              </ul>
          </div>


Geht das grundsätzlich nicht oder bin ich wieder mal zu blind.

Gruss
    Ekkehard
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: setstate am 20 Oktober 2015, 16:20:24
Hallo Ekkehard,

Push kann nur senden, nicht auf Status reagieren

Aber mit einem Symbol sollte es klappen.
http://forum.fhem.de/index.php/topic,34233.msg336980/topicseen.html#msg336980
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: hank40 am 04 Februar 2016, 20:57:47
Hallo,

ich nutze FHEM auf einer Fritzbox 7390 und versuche mich derzeit an dem Tablet UI. Schalter konnte ich bereits erfolgreich einbinden, aber mit den Rolläden stehe ich auf Kriegsfuss.

Ich habe den Slider und auch das Circle-Menü versucht, aber keines davon funktioniert, d.h. der Rolladen bewegt sich nicht. Hier der Code für den Slider:
<li data-row="2" data-col="1" data-sizex="1" data-sizey="3">
     <header>Wohnzimmer rechts</header>
       <div class="left cell">
         <div data-type="label" class="">&nbsp;</div>
           <div data-type="slider" data-device="eg_wz_RolloRechts" data-get="STATE" data-min="0"  data-max="100" data-on='(on|closed|down)' data-off='(open|off)' data-value=true  class="mini negated" >  </div>
           <div class="triplebox-v small top-space-2x">
             <div data-type="push" data-device="eg_wz_RolloRechts" data-icon="fa-chevron-up" data-background-icon="fa-square-o" data-set="off" class=""> </div>
             <div data-type="push" data-device="eg_wz_RolloRechts" data-icon="fa-minus" data-background-icon="fa-square-o" data-set="stop" class=""> </div>
             <div data-type="push" data-device="eg_wz_RolloRechts" data-icon="fa-chevron-down" data-background-icon="fa-square-o" data-set="on" class=""> </div>
           </div>
       </div>
   </li>


Und der Code für den Circle:
<li data-row="4" data-col="4" data-sizex="1" data-sizey="3">
     <header>Wohnzimmer rechts2</header>
       <div data-type="circlemenu" class="cell circlemenu" data-direction="right-half" data-circle-radius="90">
                 <ul class="menu">
                   <li class="circleborder"><div data-type="label"
                            data-limits='["0|off","[12]*[0-9]","[34][0-9]","[56][0-9]","[78][0-9]","([9][0-9]|100|on)"]'
                            data-colors='["#FFFFFF","#666666","#999999","#BBBBBB","#DDDDDD","#FFFFFF"]'
                            data-device='eg_wz_RolloRechts'
                            data-background-icon="fa-wrench"></div>
                   </li>
                   <li><div data-type="push"
                            data-cmd="set"
                            data-device="eg_wz_RolloRechts"
                            data-set="on"
                            data-icon="">auf</div></li>
                   <li><div data-type="push"
                            data-cmd="set"
                            data-device="eg_wz_RolloRechts"
                            data-set="75"
                            data-icon="">75</div></li>
                   <li><div data-type="push"
                            data-cmd="set"
                            data-device="eg_wz_RolloRechts"
                            data-set="50"
                            data-icon="">50</div></li>
                   <li><div data-type="push"
                            data-cmd="set"
                            data-device="eg_wz_RolloRechts"
                            data-set="25"
                            data-icon="">25</div></li>
                   <li><div data-type="push"
                            data-cmd="set"
                            data-device="eg_wz_RolloRechts"
                            data-set="off"
                            data-icon="">zu</div></li>
                 </ul>
               </div>
    </li>


Hab ich irgendetwas nicht bedacht?

Viele Grüße, Peter
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: setstate am 04 Februar 2016, 21:04:52
Hallo Peter,

welchen Befehl benötigt FHEM, um den Rolladen zu bewegen? Jetzt sendet dieser Code z.B.
set eg_wz_RolloRechts 40

Wenn man das weiß, kann man die Parameter darauf abstimmen
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: hank40 am 04 Februar 2016, 21:22:08
Vielen Dank für Deine schnelle Antwort.

Ich weiß nicht, ob ich Deine Frage richtig verstanden habe: wenn ich jetzt im FHEM den Rollo hochfahre, steht im FHEM-Logfile:
2016.02.04 21:19:58 3: FS20 set eg_wz_RolloRechts on

War es das, was Du meintest?
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: hank40 am 04 Februar 2016, 21:57:00
Habe was gefunden: in diesem Beitrag http://forum.fhem.de/index.php/topic,46057.msg378428.html#msg378428 (http://forum.fhem.de/index.php/topic,46057.msg378428.html#msg378428) steht, wenn man aus "data-set" "data-set-on" macht, geht es. Und das hat jetzt funktioniert  ;)
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 04 Februar 2016, 22:49:46
Hi,
ich habe auch gerade an dem Thema rumgebastelt. Allerdings habe ich momentan den Fokus auf der Visualisierung. Ich habe mir dazu folgendes gebaut:

<div data-type="symbol" class="big narrow" data-device="dg_sz_Rollladen" 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-circle">
</div>

Das zeigt dann ein kleines Fenster mit einem Rollladen an, dessen Stellung so ungefähr der Realität entspricht.
Siehe Anhang...
Vielleicht noch nicht ganz so künstlerisch wertvoll, aber für mich passt das besser als data-type="level".
Gruß,
   Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: kvo1 am 04 Februar 2016, 23:56:07
Hallo Thorsten,
Danke für den Ansatz, bin auch noch auf der Suche nach DER Lösung.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: hank40 am 05 Februar 2016, 00:41:57
Zitat von: Thorsten Pferdekaemper am 04 Februar 2016, 22:49:46
Hi,
ich habe auch gerade an dem Thema rumgebastelt. Allerdings habe ich momentan den Fokus auf der Visualisierung. Ich habe mir dazu folgendes gebaut:

<div data-type="symbol" class="big narrow" data-device="dg_sz_Rollladen" 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-circle">
</div>

Das zeigt dann ein kleines Fenster mit einem Rollladen an, dessen Stellung so ungefähr der Realität entspricht.
Siehe Anhang...
Vielleicht noch nicht ganz so künstlerisch wertvoll, aber für mich passt das besser als data-type="level".
Gruß,
   Thorsten

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

Viele Grüße, Peter
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: dennis_n am 05 Februar 2016, 09:02:09
Hi,

also bei ist alles auf ZWAVE Basis.
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.
Klappt wunderbar und auch meine Frau hat es sofort verstanden ;-)

(Nicht auf verschobene HWR Bezeichnung schauen. Ich weiß dass die etwas höher sitzt und muss es noch korrigieren).

Gruss
Dennis

Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 05 Februar 2016, 10:29:21
Zitat von: hank40 am 05 Februar 2016, 00:41:57
Hi Thorsten, darf ich fragen, welche Aktoren du zur Steuerung Deiner Rolläden nutzt?
Klar. Homematic Wired HMW_LC_Bl1_DR.
Gruß,
   Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 05 Februar 2016, 10:32:59
Zitat von: dennis_n am 05 Februar 2016, 09:02:09Fü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
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: farion am 05 Februar 2016, 22:45:51
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
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Ban-ya am 15 Februar 2016, 20:12:27
Zitat von: Thorsten Pferdekaemper am 04 Februar 2016, 22:49:46
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
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 15 Februar 2016, 20:33:24
Zitat von: Ban-ya am 15 Februar 2016, 20:12:27Ein 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:

   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
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Ban-ya am 15 Februar 2016, 21:26:48
Danke, ich probiere es gleich aus  :)
Einer wird es wohl verkehrt herum gemacht haben  ;)
Gruß, Uwe

Nachtrag:

Es funktioniert  :)  ich habe jetzt
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.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: kvo1 am 15 Februar 2016, 21:32:19
Hallo Thorsten,

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

klaus
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Haecksler am 15 Februar 2016, 21:46:55
Ich habe eine Kombination aus Slider und Circlemenue, die Standardbedingung wird über das Circlemenue gemacht, dann ist der Slider nur eine zusätzliche Visualisierung.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Ban-ya am 15 Februar 2016, 22:01:53
Bei mir sieht es so aus:

<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  :)
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Ban-ya am 15 Februar 2016, 22:05:40
Zitat von: Haecksler am 15 Februar 2016, 21:46:55
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
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Haecksler am 15 Februar 2016, 22:09:39
Zitat von: Ban-ya am 15 Februar 2016, 22:05:40
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.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Ban-ya am 15 Februar 2016, 22:12:13
Ist ja eigentlich logisch. Nächstes mal denke ich etwas länger über meine Fragen nach ...
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 15 Februar 2016, 22:48:50
Zitat von: kvo1 am 15 Februar 2016, 21:32:19das ist ja bisher nur die Visualisierung, wie schaut den Deine Bedienung / Steuerung aus ?
Hi,
also das beste, was ich bisher habe, sieht so aus:

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

Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: kvo1 am 15 Februar 2016, 23:07:46
Zitatalso 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)  ;)
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Ban-ya am 16 Februar 2016, 08:40:25
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
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Jens_B am 16 Februar 2016, 09:02:13
Ich hänge mich hier mal dran, da ich mich auch gerade daran versuche.
Mein Code sieht so aus:
<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.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: lullebammel am 16 Februar 2016, 09:59:26
@Haecksler

Zitat von: Haecksler am 15 Februar 2016, 21:46:55
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  8)

Das wäre super!
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 16 Februar 2016, 18:37:06
Zitat von: Jens_B am 16 Februar 2016, 09:02:13
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
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Haecksler am 16 Februar 2016, 21:43:26
Zitat von: lullebammel am 16 Februar 2016, 09:59:26
@Haecksler

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

Das wäre super!

Hier der gewünschte Code:
<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
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: setstate am 16 Februar 2016, 22:13:14
es geht mit
       <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
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Ban-ya am 16 Februar 2016, 22:14:55
Zitat von: Thorsten Pferdekaemper am 15 Februar 2016, 22:48:50
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 ... :'(
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 16 Februar 2016, 22:21:45
Zitat von: Ban-ya am 16 Februar 2016, 22:14:55
Schade, mir leider nicht. Ich weiß nicht, wie ich das zum laufen bringe ... :'(
Naja, Du nimmst den HTML-Teil, also das:

<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
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Ban-ya am 17 Februar 2016, 08:51:48
Danke, für Deine schnelle Antwort.
Ich hatte es auch (fast) so gemacht. Bei Deinem Beispiel war aber noch ein
function rollladen_detail($device, $title) {
echo '

davor. Und so ging es dann erst mal nicht  :'(
Gruß, Uwe
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Jens_B am 17 Februar 2016, 12:09:52
Zitat
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.

Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 17 Februar 2016, 12:13:49
Zitat von: Jens_B am 17 Februar 2016, 12:09:52
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
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Jens_B am 17 Februar 2016, 12:26:38
Hallo Thorsten,
mit level habe ich es erst probiert. Hatte keine Auswirkung...
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.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 17 Februar 2016, 12:27:56
Zitat von: Jens_B am 17 Februar 2016, 12:26:38
Hallo Thorsten,
mit level habe ich es erst probiert. Hatte keine Auswirkung...
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.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Jens_B am 17 Februar 2016, 13:21:45
Dachte ich auch, aber es erscheint kurz immer "set_80" zum Beispiel, wenn ich denn Rollladen auf 80% fahre.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Ban-ya am 17 Februar 2016, 17:24:26
Zitat von: Thorsten Pferdekaemper am 16 Februar 2016, 22:21:45
...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
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 17 Februar 2016, 17:34:30
Zitat von: Jens_B am 17 Februar 2016, 13:21:45
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?
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 17 Februar 2016, 17:35:58
Zitat von: Ban-ya am 17 Februar 2016, 17:24:26
Die Prozentauswahl sendet keinen Befehl ab  :'(
Sorry, bin noch am lernen mit der Syntax
Danke, für Deine Hilfe
Es kann sein, dass da auch noch "\" drin sind. Such mal danach und mach die alle raus.
Gruß,
   Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Ban-ya am 17 Februar 2016, 20:41:03
Danke, dass Du mir so unermüdlich hilfst.
Ich habe (leider) kein "\" mehr entdeckt.

hier mal mein kompletter Code:

<li data-row="4" data-col="4" data-sizex="4" data-sizey="3">
<header>TEST-CONTAINER</header>
<table>
<tr>
<td>
<div data-type="symbol" class="cell bigger left" 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="#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="Az.Rolladen" data-icon="fa-chevron-up" data-background-icon="fa-square-o" data-set-on="on" class=""> </div>
<div data-type="push" data-device="Az.Rolladen" data-icon="fa-minus" data-background-icon="fa-square-o" data-set-on="stop" class=""> </div>
<div data-type="push" data-device="Az.Rolladen" data-icon="fa-chevron-down" data-background-icon="fa-square-o" data-set-on="off" class=""> </div>
</div>
</td>
<td>
          <div data-type="select" data-device="Az.Rolladen'" 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="Az.Rolladen"   
          data-style="round"
          data-theme="dark"
          data-title="Rollladen Arbeitszimmer"
          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>


Vielleicht kannst Du den Fehler entdecken?
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 17 Februar 2016, 22:21:33
Hi,
vielleicht stört der Tick (') nach Az.Rolladen:

<div data-type="select" data-device="Az.Rolladen'" data-items='["0","10","

Gruß,
   Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Ban-ya am 17 Februar 2016, 22:44:45
Hallo Torsten, was so ein kleiner Tick ausmacht ...
Jetzt funzt es  :)
Danke, für Deine Mühe. Nun muss ich nur noch die Richtung umdrehen, weil wir ja umgekehrt die Motoren  angeklemmt haben  :)
Später kommt dann meine Frage zur Zeitsteuerung  ;)
Gute Nacht, für heute.
Gruß Uwe
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: kvo1 am 17 Februar 2016, 23:35:23
Hi Thorsten,

habe das mal mit einem dummy nachgebaut.
Funktioniert auch nur das Symbol ändert sich nicht. Wenn ich den symbolteil in einem anderen Beispiel ohne <table> verwende dann tut´s  :-[

@Ban-ya , ändert sich bei Dir das Symbol ?

ZitatSpäter kommt dann meine Frage zur Zeitsteuerung  ;)
jeppp , da würde mich auch interessieren  ;)
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 17 Februar 2016, 23:38:34
Zitat von: kvo1 am 17 Februar 2016, 23:35:23habe das mal mit einem dummy nachgebaut.
Funktioniert auch nur das Symbol ändert sich nicht. Wenn ich den symbolteil in einem anderen Beispiel ohne <table> verwende dann tut´s  :-[
Ich mache das auch gerade mit Dummys. Es ist dabei wesentlich, dass man nicht state als Reading nimmt, sondern so etwas wie level. Gib Deinem Dummy mal ein User Reading:

userReadings
level { ReadingsVal("sz_Rollladen","state",0) }

...und nimm dann als data-get "level".
Zumindest war das bei mir das Problem mit dem Symbol.
Gruß,
   Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Ban-ya am 18 Februar 2016, 08:03:37
Zitat von: kvo1 am 17 Februar 2016, 23:35:23
@Ban-ya , ändert sich bei Dir das Symbol ?

Ja, alles bestens  :)
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Jens_B am 18 Februar 2016, 11:24:03
Zitat von: Thorsten Pferdekaemper am 17 Februar 2016, 17:34:30
Im Reading "level"? Das ist seltsam. Ist das ein Funk-Aktor oder Wired?

Homematic Funkaktor HM-LC-BL1PBU-FM

Gruß
Jens
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: kvo1 am 18 Februar 2016, 11:50:02
Hallo Jens / Thorsten,

@jens , ich habe die gleichen!

Richtig muss das dann aber so ausschauen..    Set deinrollo pct 70    Für 70% auf
100 ist bei mir ganz oben

Der Wert steht in drei Readings ... state, level und pct

Gruss
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Jens_B am 18 Februar 2016, 11:59:26
Zitat von: kvo1 am 18 Februar 2016, 11:50:02
Hallo Jens / Thorsten,

@jens , ich habe die gleichen!

Richtig muss das dann aber so ausschauen..    Set deinrollo pct 70    Für 70% auf
100 ist bei mir ganz oben

Der Wert steht in drei Readings ... state, level und pct

Gruss

Ja. Die Werte stehen ja auch in den readings, aber beim ausführen der Befehle steht kurzzeitig in den readings set_ vor dem Befehl .
Ich kann das hier ganz gut in der logdatei des jeweiligen aktors sehen.
Das steht dann :
ROLLLADEN_SZ_LINKS level: set_20

Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Jens_B am 18 Februar 2016, 12:17:56
Ich hab es glaube ich: ich muss Data-Part= Für den Regex nehmen und nicht Substitution .

Nach meinem Verständnis müsste der Regex so aussehen: (^[set_]+)
Heißt für mich "nimm alles was nicht set_ ist"?
Wenn ich dann nicht Level sondern STATE prüfe habe ich sogar on/off als Anzeige :-)(oder auf/zu)

Gruß
Jens


Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 18 Februar 2016, 15:42:05
Zitat von: Jens_B am 18 Februar 2016, 11:59:26
Ja. Die Werte stehen ja auch in den readings, aber beim ausführen der Befehle steht kurzzeitig in den readings set_ vor dem Befehl .
Ich kann das hier ganz gut in der logdatei des jeweiligen aktors sehen.
Das steht dann :
ROLLLADEN_SZ_LINKS level: set_20
Hi,
mit HM-Wired wäre das nicht passiert. SCNR...
Vielleicht solltest Du das auch mal im HM-Bereich posten. Meiner Meinung nach ist das Verhalten nicht ganz so toll.
So etwas ist für state ja ok, aber die anderen Readings sollten schon die Werte passend zum Wertebereich haben.
Gruß,
   Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: kvo1 am 18 Februar 2016, 16:16:15
Zitat von: Thorsten Pferdekaemper am 17 Februar 2016, 23:38:34
Ich mache das auch gerade mit Dummys. Es ist dabei wesentlich, dass man nicht state als Reading nimmt, sondern so etwas wie level. Gib Deinem Dummy mal ein User Reading:

userReadings
level { ReadingsVal("sz_Rollladen","state",0) }

...und nimm dann als data-get "level".
Zumindest war das bei mir das Problem mit dem Symbol.
Gruß,
   Thorsten
Hi Thorsten,

das war´s  ;)  , Danke !

kvo1
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Ban-ya am 18 Februar 2016, 20:02:30
ich habe auch diese: Homematic Funkaktor HM-LC-BL1PBU-FM
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: kvo1 am 18 Februar 2016, 20:22:33
jetzt wäre halt die Einstellung an der Reihe ...
Meine Idee ist dabei, wenn man das "edit_settings"-ICON anklickt öffnet sich ein popup für die Einstellung der Betriebsart (hier habe ich
mir 3 Möglichkeiten eingebaut FHEM / ASTRO / HAND) und die Einstellung der verschiedenen Zeiten (Woche hoch) , (Wochenende hoch) , (runter),
das halt mit der timerfunktion (weekdaytimer).

Das mit der  Betriebsart würde ich so lösen ...

<div class="cell wider">
          <div data-type="label" class="inline wider">Rollo_AZ</div>
          <div data-type="select" data-device="RolloModTimeAZ" data-items='["FHEM","ASTRO","HAND"]' data-get="Modus" data-set="Modus" class="cell w2x" ></div>
</div>


oder so....

<div data-type="switch"
        data-device="RolloModTimeAZ"
data-get="Modus"
        data-set="Modus"
data-set-states='["ASTRO","HAND","FHEM"]'
        data-states='["FHEM","ASTRO","HAND"]'
        data-icons='["oa-fts_shutter_automatic","oa-fts_shutter_down","oa-fts_shutter_manual"]'
        data-colors='["white","white","white"]'
        data-background-colors='["green","cornflowerblue","red"]'
       class="bigger top-space"></div>


Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Jens_B am 19 Februar 2016, 09:15:50
Zitat von: Thorsten Pferdekaemper am 18 Februar 2016, 15:42:05
Hi,
mit HM-Wired wäre das nicht passiert. SCNR...
Vielleicht solltest Du das auch mal im HM-Bereich posten. Meiner Meinung nach ist das Verhalten nicht ganz so toll.
So etwas ist für state ja ok, aber die anderen Readings sollten schon die Werte passend zum Wertebereich haben.
Gruß,
   Thorsten

Ich könnte das dort posten, aber es kann ja keiner ändern ;-). Die Rückmeldung kommt ja so vom Autor, in dem Augenblick wo er den Befehl empfangen hat.

Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 19 Februar 2016, 10:07:34
Zitat von: Jens_B am 19 Februar 2016, 09:15:50
Ich könnte das dort posten, aber es kann ja keiner ändern ;-). Die Rückmeldung kommt ja so vom Autor, in dem Augenblick wo er den Befehl empfangen hat.
Du meinst wahrscheinlich Aktor. Der Autor des Moduls kann da sehr wohl was tun. Die Geräte senden ja kein "set_-irgendwas". Auf eine Nachricht senden die nur ein ACK, möglicherweise verbunden mit dem aktuellen Wert. Was FHEM dann daraus macht ist Sache des Modulautors (martinp876).
Ich denke sogar, dass Martin das "set_..." da sofort reinschreibt, wenn er die Nachricht an das Modul sendet. D.h. das hat mit der Antwort des Geräts ganz und gar nichts zu tun. Wahrscheinlich kann man sogar das Gerät vom Strom trennen und FHEM schreibt immer noch "set_..." rein.
Richtiger fände ich es, wenn das "set_..." nur im Reading state stehen würde, aber nicht in "level" bzw. "pct". Das liegt sehr wohl in Martins Hand.
Gruß,
   Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Jens_B am 19 Februar 2016, 10:21:46
Hallo Thorsten,

Ja ich meinte Aktor ;-). Blöde Korrektur auf dem iPad.;-)
Ok, ich dachte das wäre die Rückmeldung des Aktors selber.

Gruss
Jens
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Frank13 am 22 Februar 2016, 20:48:45
Hallo allerseits!

Ich versuche mich auch gerade an meinem ersten Rolladen. Die grundlegende Steuerung funktioniert soweit erstmal, nur die Visualisierung haut nicht hin - die Data-Icons (oa-fts_shutter_90 etc.) werden nicht angezeigt. Muß ich dafür noch irgendwas installieren oder wo könnte der Fehler liegen?

Viele Grüße

Frank
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 22 Februar 2016, 21:09:32
Zitat von: Frank13 am 22 Februar 2016, 20:48:45Ich versuche mich auch gerade an meinem ersten Rolladen. Die grundlegende Steuerung funktioniert soweit erstmal, nur die Visualisierung haut nicht hin - die Data-Icons (oa-fts_shutter_90 etc.) werden nicht angezeigt. Muß ich dafür noch irgendwas installieren oder wo könnte der Fehler liegen?
Hi,
hast Du das hier drinstehen?

<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />

Gruß,
   Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: kvo1 am 22 Februar 2016, 21:15:14
Thorsten war schneller !   

Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen.

   <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
   <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Frank13 am 22 Februar 2016, 21:16:25
Zitat von: Thorsten Pferdekaemper am 22 Februar 2016, 21:09:32
Hi,
hast Du das hier drinstehen?

<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />

Gruß,
   Thorsten

Hi!

NATÜRLICH ............ nicht.............   Danke!

Ist heute irgendwie der Wurm drin bei mir...

Viele Grüße

Frank
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: jemu75 am 22 Februar 2016, 21:59:08
Hallo an alle "Rolladenbauer"  :)

habe mich vor einiger Zeit auch mit passenden Widgets für meine Rolladen-Aktoren rumgequält.
Bei mir sind es letztlich die ganz normalen Slider in Verbindung mit PopUp's geworden.
Ich greife ausschließlich auf die Icon's von "font awsome" zurück.
Anbei ein Screenshot zum Ideen holen.  :)
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 22 Februar 2016, 22:37:27
Zitat von: jemu75 am 22 Februar 2016, 21:59:08Anbei ein Screenshot zum Ideen holen.  :)
Könntest Du mal das Coding für Dein Menue zeigen und die "hoch/runter" Buttons? Ich meine die, bei denen z.B. "manual" im Screenshot steht.
Danke&Gruß,
   Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: jemu75 am 22 Februar 2016, 22:45:31
Anbei der Code. Es handelt sich nur um das template für den Rolladen, welches ich in meine "seiten.html" eingebunden habe.


<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI -->
<!-- Widget für Homematic Jalousieaktor HM-LC-Bl1PBU-FM -->
</head>
<body>
<header>var_name</header>
<div data-type="label" data-device="var_device1" data-get="pct" data-unit="%" class="top-space big thin"></div>

<div data-type="popup" data-height="190px" data-width="250px">
<div data-type="link" data-color="grey" data-border-color="grey" data-icon="fa-sort" class="top-space round">
auf / ab
</div>
<div class="dialog">
<header>Jalousie var_name</header>
<div class="top-space inline">
<div data-type="switch"
data-device="var_device1"
data-get="pct"
data-get-on="25"
data-get-off="((?!25).)*"
data-set="pct"
data-set-on="25"
data-set-off="25"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-minus">
</div>
<div class="mini">25%</div>
</div>
<div class="top-space inline">
<div data-type="switch"
data-device="var_device1"
data-get="pct"
data-get-on="50"
data-get-off="((?!50).)*"
data-set="pct"
data-set-on="50"
data-set-off="50"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-bars">
</div>
<div class="mini">50%</div>
</div>
<div class="top-space inline">
<div data-type="switch"
data-device="var_device1"
data-get="pct"
data-get-on="75"
data-get-off="((?!75).)*"
data-set="pct"
data-set-on="75"
data-set-off="75"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-align-justify">
</div>
<div class="mini">75%</div>
</div>
<div class="newline"></div>
<div class="top-space inline">
<div data-type="switch"
data-device="var_device1"
data-get="pct"
data-get-on="0"
data-get-off="((?!0).)*"
data-set="pct"
data-set-on="0"
data-set-off="0"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-down">
</div>
<div class="mini">zu</div>
</div>
<div class="top-space inline">
<div data-type="switch"
data-device="var_device1"
data-get="pct"
data-get-on="100"
data-get-off="((?!100).)*"
data-set="pct"
data-set-on="100"
data-set-off="100"
data-on-color="white"
data-on-background-color="green"
data-icon="fa-chevron-up">
</div>
<div class="mini">auf</div>
</div>
</div>
</div>
</div>

<div data-type="slider" data-device="var_device1" data-get="pct" data-set="pct" data-height="113" class="top-space"></div>

<div data-type="symbol" data-device="var_device1" data-get="pct" data-states='[0,1]' data-colors='["red","green"]'  data-icon="fa-align-justify" class="small right"></div>
</body>
</html>
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: jemu75 am 22 Februar 2016, 22:48:05
Und hier noch die template-Datei für das Menü.  :)


<!DOCTYPE html>
<html>
<head>
<!-- FHEM Tablet UI -->
<!-- Widget für Menü -->
</head>
<body>
<header>Men&uuml;</header>
<div data-type="link" data-color="grey" data-border-color="grey" data-url="test.html" data-icon="fa-home" class="top-space round">Home</div>
<div data-type="link" data-color="grey" data-border-color="grey" data-url="page_EG.html" data-icon="fa-bars" class="top-space round">EG</div>
<div data-type="link" data-color="grey" data-border-color="grey" data-url="page_OG.html" data-icon="fa-bars" class="top-space round">OG</div>
<div data-type="link" data-color="grey" data-border-color="grey" data-url="page_Chart.html" data-icon="fa-bar-chart" class="top-space round">Klima</div>
<div data-type="link" data-color="grey" data-border-color="grey" data-url="page_System.html" data-icon="fa-cog" class="top-space round">System</div>
</body>
</html>

Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 22 Februar 2016, 23:06:32
Danke!
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: HoTi am 13 Juni 2016, 15:35:12
Zitat von: Thorsten Pferdekaemper am 15 Februar 2016, 22:48:50
Hi,
also das beste, was ich bisher habe, sieht so aus:

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

@Thorsten,
erst mal vielen Dank dafür. Ich habe es auch an laufen gebracht (erstmal ohne weekdaytimer).

@all
Ich verzweifel aber gleich warum mir für 0% und 100% kein ICON angezeigt wird.
Kann mir vielleicht jemand helfen? Es wird nur ein orangenes Kästchen angezeigt.

<li data-row="2" data-col="1" data-sizex="3" data-sizey="2" class="halbTransparent">
<header>TEST-CONTAINER</header>
<table>
<tr>
<td>
<div data-type="symbol" class="cell bigger left" data-device="TestRollo" data-get="position"
data-icons='["oa-fts_shutter","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_window_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="TestRollo" data-icon="fa-chevron-up" data-background-icon="fa-square-o" data-off-color="#2A2A2A" data-off-background-color="#2A2A2A" data-set-on="open" class=""> </div>
<div data-type="push" data-device="TestRollo" data-icon="fa-minus" data-background-icon="fa-square-o" data-off-color="#2A2A2A" data-off-background-color="#2A2A2A" data-set-on="stop" class=""> </div>
<div data-type="push" data-device="TestRollo" data-icon="fa-chevron-down" data-background-icon="fa-square-o" data-off-color="#2A2A2A" data-off-background-color="#2A2A2A" data-set-on="closed" class=""> </div>
</div>
</td>
<td>
<div data-type="select" data-device="TestRollo" data-items='["position 0","position 10","position 20","position 30","position 40","position 50","position 60","position 70","position 80","position 90","position 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="TestRollo"   
data-style="round"
data-theme="dark"
data-title="Rollladen Arbeitszimmer"
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="#B28F00">
</div>
</div>
</td>
</tr>
</table>
    </li>

Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 13 Juni 2016, 18:29:09
Zitat von: HoTi am 13 Juni 2016, 15:35:12
Ich verzweifel aber gleich warum mir für 0% und 100% kein ICON angezeigt wird.
Kann mir vielleicht jemand helfen? Es wird nur ein orangenes Kästchen angezeigt.
Wahrscheinlich weil's kein oa-fts_shutter und kein oa-fts_window_100 gibt. Versuch's mal mit oa-fts_window_2w fuer 0% und oa-fts_shutter_100 fuer 100%.
Gruss,
   Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: HoTi am 14 Juni 2016, 07:09:34
Oh man, was habe ich da gerstern nur zu viel rumgespielt :-(

Danke dir!!
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: lestat.le am 14 Juni 2016, 22:19:34
Herzliche Grüße in die Runde,

ich habe mir aus den vielen tollen Anregungen eine eigene Kombi aus CircleMenü und Tastern (Hoch,Stop,Runter) gebaut. Allerdings möchte ich noch die Position der Rollos anzeigen lassen.
Dazu habe ich mir den Code von Torsten genommen. Leider habe ich auch nur ein orangenen Kreis und keine Icons. Ich habe Gurtwickler von Rademacher. Dort ist das "data-get" meiner Meinung nach "position". Deshalb habe ich es wie folgt angepasst:

<li data-row="2" data-col="7" data-sizex="1" data-sizey="3">
<header class="headerTransparent">ROLLADEN</header>
<div data-type="symbol" class="big narrow" data-device="RolloEltern" data-get="position"
       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-circle">
</div>
</li>


Hat jemand eine Idee wo es hängt? Hab schon ne Weile probiert aber komm nicht dahinter.

Viele Grüße
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: setstate am 15 Juni 2016, 00:09:32
Hast du das andere Icon-Set auch in deine *.html eingebunden?


<link rel="stylesheet" href="lib/openautomation.css" />
<link rel="stylesheet" href="lib/fhemSVG.css" />


Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: lestat.le am 15 Juni 2016, 08:26:02
sieht bei mir so aus:

<!-- <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" /> -->
        <!-- <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" /> -->



Was macht das "!--" ?
Ich hatte auch schon probiert die Icons von Fhem zu nutzen. In Fhem nutze ich dafür z.B. "fts_shutter_50", also ohne "oa-" davor. Brachte auch keinen Effekt.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: lestat.le am 15 Juni 2016, 08:30:39
ich habe nun die Zeichen für den Eintrag entfernt und dann klappt es auch.

Ganz herzlichen Dank.
Da wäre ich um Ewigkeit nicht drauf gekommen.

Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: setstate am 15 Juni 2016, 08:37:48
Das <!--     --> ist fürs "Auskommentieren" bei HTML.
Also Code der nicht wirksam ist, aber zur Info drinbleiben soll
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: DocCyber am 19 Juni 2016, 15:28:14
Hallo FHM-isten

ich habe auch den Code von Th. Pferdekämper verwendet.

Die Installation innerhalb von FHEM hat geklappt (abgesehen von den oa-Icons, die trotz Einbindung der entsprechenden css in der index.html nicht zu sehen sind.)
Allerdings, und das ist wichtiger, wird das Zeitwahl-Fenster nicht angezeigt wird.
Möglicherweise liegt das daran, dass wdtimer auf datetimepicker aufbaut, und damit habe ich beim Ausprobieren auch Probleme festgestellt.
Folgende Dateien habe ich:
unter /opt/fhem/www/tablet_eval/js
   widget_datetimepicker.js
   widget_wdtimer.js
unter /opt/fhem/www/tablet_eval/lib
   jquery.datetimepicker.css
   jquery.datetimepicker.js
   jquery.datetimepicker.min.js unter

Kann es sein, dass die Probleme mit wdtimer tatsächlich mit datetimepicker zusammenhängen?
Liegen die richtigen Dateien an den richtigen Stellen?

Ich suche mir schon seit Tagen einen Wolf und komme nicht weiter und bin daher für jedwede Hilfe dankbar.

(Ich sollte vllt noch anmerken, dass ich mit Tablet-UI 2.2 (eval) arbeite.)
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: 50watt am 12 August 2016, 11:54:43
Im Wiki (http://www.fhemwiki.de/wiki/FTUI_Snippets#Rollladen_Circle_Menu) gibt es nun auch ein Beispiel für die Rollladensteuerung eines EnOcean Rollladen-Device (Eltako FSB61) mit einem Circle Menu, dass
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: chrisu667 am 15 August 2016, 14:44:40
Hallo, vielen Dank erstmal an alle die hier so tolle Arbeit leisten.

Ich habe folgendes Problem, ich möchte meine Rolladen folgendermaßen steuern.

Ich möchte alle Rollladen mit je einem Schalter(Button oder switch) zu einem Structure dynamisch hinzufügen(addstruct,delstruct) oder wegnehmen und dieses Structure mit nur einem rauf-stop-runter symbol steuern.
Sprich ich drücke zb.: die Küche das BadEG Esszimmer und dann das rauf symbol.

Kann mir da jemand helfen wie ich das mache ?

Vielen Dank im voraus

chrisu667
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: DocCyber am 24 August 2016, 16:21:11
Falls es jemanden interessiert... Ich habe es so gemacht, wie in den Anhängen zu sehen.
Ich steuere das mit HM-Rolladenaktoren Typ HM-LC-BL1-FM, die optional auch noch manuell zu bedienen sind.
Die Zeitautomatik mache ich über 'at'-Dummys.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Grafkox am 01 September 2016, 22:57:41
Hallo zusammen,

zunächst vielen vielen Dank für die wahnsinnig tollen Ideen und die hervorragende Arbeit die in TabletUI einfließt.
Selbst meine Frau ist inzwischen vom Aussehen und von der Bedienung meines einstigen "Hirngespinstes" begeistert.

Daher möchte ich auch meine Lösung von der Rolladensteuerrung präsentieren, die eine Mischung aus mehreren hier vorgestellten Lösungen ist und Einzug in das Layout FTUI 1.x - Mobile von Roman (dauch Dir ein dickes Lob und Danke) gehalten hat.

<li class="halbTransparent border-left border-right" data-row="3" data-col="1" data-sizex="4" data-sizey="3">
<header class="headerTransparent">ROLLOS</header>
<div class="top-space inline">
<div data-type="label">Fenster</div>
<div class="container">
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="Rollo_BD_Fenster"
data-get="exact"
data-states='["0","10","20","30","40","50","60","70","80","100","200"]'
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-colors='["green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","yellow","green"]'
></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="stop"
data-icon="oa-audio_stop"
data-off-color="red"
data-on-color="red"></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="off"
data-icon="fa-angle-up"
data-off-color="green"
data-on-color="green"></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="100"
data-icon="oa-fts_shutter_90"
data-off-color="yellow"
data-on-color="yellow"></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="80"
data-icon=""><FONT SIZE=3>80%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="60"
data-icon=""><FONT SIZE=3>60%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="40"
data-icon=""><FONT SIZE=3>40%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="20"
data-icon=""><FONT SIZE=3>20%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="on"
data-icon="fa-angle-down"
data-off-color="green"
data-on-color="green"></div></li>
</ul>
</div>
</div>
</div>

</li>


Ich spiele noch mit dem Gedanken, die Funktion zu erweitern, weiß aber nicht, ob es die gewünschte Funktion in FHEM oder FTUI gibt:
Bei einfachem Klick öffnet sich das o.a. Circlemenü, wenn man aber den "Knopf" länger gedrückt hält (sagen wir 3-5 sek.) öffnet sich ein Popup mit Weekdaytimer um die "Fahrzeiten" des geklickten Rollos einzustellen.
Absolut nice to have wäre dann noch ein zusätzliches Uhrsymbol im Icon analog "warn", um anzuzeigen, dass bei dem Rollo programmierte "Fahrzeiten" eingestellt sind.
Geht das?

Viele Grüße

Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: onkel-tobi am 11 November 2016, 17:08:33
Hallo zusammen,

habe mal Thorsten's Code bei mir ausprobiert, aber ich bekomme das Rollo nicht als Rollo angezeigt.
Alles andere (hoch, runter) wird angezeigt.

Scheint also an den oa-fts icons zu hängen. Ich meine ich hätte da schon mal was ausprobiert und auch kein Icon angezeigt bekommen.
openautomation.css habe ich aber eingebunden.

Hat noch jemand eine Idee?

Danke & Gruß,
Tobi
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Grafkox am 11 November 2016, 18:04:36
Hi Tobi,

bin im Moment noch unterwegs, kann aber nachher mal die Styles posten,  die ich eingebunden habe.

Viele Grüße

Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: onkel-tobi am 11 November 2016, 19:51:05
Hi Thorsten,

dass wäre super.
Denn die openautomation.css habe ich eingebunden...

<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />

Danke & Gruß,
Tobi
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Grafkox am 13 November 2016, 11:22:17
Sorry, kam am Freitag nicht mehr dazu und gestern habe ich es verbimmelt.

Anbei meine eingebundenen Stylesheets:

        <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/fhemSVG.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/fonts/roman/style.css" />
<link rel="stylesheet" href="/fhem/tablet/fonts/material/style.css" />
        <link rel="stylesheet" href="/fhem/mobile/css/fhem-tablet-ui-user_mobile.css" />


Ich hoffe damit funktioniert es.

Gruß

Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: onkel-tobi am 16 November 2016, 20:53:55
Zitat von: Grafkox am 13 November 2016, 11:22:17
Ich hoffe damit funktioniert es.

Gruß

Thorsten

Hi,

leider nein. Es bleibt dabei, dass die oa-fts images nciht angezeigt werden...

Gruß,
Tobi
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Petrosilius Zwackelmann am 17 Dezember 2016, 00:58:31
ZitatIch hoffe damit funktioniert es.

Danke Grafkox
bei mir sind die Icons jetzt da!
Gruß Manuel
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Badflex am 01 Januar 2017, 20:12:42
Hallo, habe ein Homematic Rollladen Aktor.
Wie muss ich den einbinden das ich circlemenü den aktuellen Status sehen kann.
Ich sehe nämlich auch keine Icons. Die css Dateien sind eingebunden.
Danke
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Noxus am 03 Januar 2017, 14:38:03
Zitat von: Badflex am 01 Januar 2017, 20:12:42
Hallo, habe ein Homematic Rollladen Aktor.
Wie muss ich den einbinden das ich circlemenü den aktuellen Status sehen kann.
Ich sehe nämlich auch keine Icons. Die css Dateien sind eingebunden.
Danke

Bei Homematic musst Du natürlich das "data-get" entsprechend anpassen.
Ich habe hier auf "state" verwiesen data-get="state"
Die Prozentangeben waren dann auch noch einmal Spiegelverkehrt.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Badflex am 03 Januar 2017, 22:23:56
Danke. klappt.

Jetzt hab ich noch eine frage.
Woran liegt es das fts_shutter_100 angezeigt wird, aber fts_Shutter_1w_100 nicht?
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: kvo1 am 04 Januar 2017, 01:17:49
Zitat von: Badflex am 03 Januar 2017, 22:23:56
Danke. klappt.

Jetzt hab ich noch eine frage.
Woran liegt es das fts_shutter_100 angezeigt wird, aber fts_Shutter_1w_100 nicht?

vl. an der Groß- Kleinschreibung  :)
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Badflex am 04 Januar 2017, 07:13:00
Nein, nein ist schon beides richtig klein geschrieben:)
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Tobias am 04 Januar 2017, 08:08:23
Ich habe pro Raum ein Gridster Element, incl einem KOmbinierten Rollanden/Fensterstatus Element.
Die BackgroundFarbe zeigt den Fensterstatus an (grün/gelb/rot für Zu/geklappt/offen). Das Rolladenicon selbst den Status des Rolladens. Im CircleMenü habe ich folgende Buttons:
- Zufahren
- Fahren auf Position "Lüftung" -> ca 17% auf
- Fahren auf Position  "Beschattung" -> ca 30%-40% auf
- Automatik
- Manuellbetrieb
- Auffahren
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: kvo1 am 14 Januar 2017, 18:17:46
Zitat von: Tobias am 04 Januar 2017, 08:08:23
Ich habe pro Raum ein Gridster Element, incl einem KOmbinierten Rollanden/Fensterstatus Element.
Die BackgroundFarbe zeigt den Fensterstatus an (grün/gelb/rot für Zu/geklappt/offen). Das Rolladenicon selbst den Status des Rolladens. Im CircleMenü habe ich folgende Buttons:
- Zufahren
- Fahren auf Position "Lüftung" -> ca 17% auf
- Fahren auf Position  "Beschattung" -> ca 30%-40% auf
- Automatik
- Manuellbetrieb
- Auffahren

Hi Tobias,
würdest Du den code teilen ?

danke
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Tobias am 14 Januar 2017, 20:06:03
bitte gern, bitte gleich
            <div class="bold inline medium" data-type="label"
              data-get="level"
              data-device="par_RL_dev"
              data-fix="0"
              data-unit="%"
              data-colors='["#B28F00"]'
              data-limits='["0"]'>
            </div>
            <div data-type="circlemenu" data-direction="bottom-half" data-circle-radius="120" data-item-diameter="67"
               style="font-size:130%;">
              <ul>
                <li>
                   <div data-type="symbol" data-device="par_RL_dev" 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-states='["0","10","20","30","40","50","60","70","80","90","100"]'
                       data-on-color="#2A2A2A"
                       data-on-background-color="par_SC_dev:par_SC_color"
                       data-off-background-color="par_SC_dev:par_SC_color"
                       data-background-icon="fa-circle">
                   </div>
                </li>
                <li> <div data-type="push" data-device="par_RL_dev" data-icon="oa-fts_shutter_up" data-set-on="on"></div></li>
                <li> <div data-type="push" data-device="par_RL_dev" data-icon="oa-fts_window_1w_tilt"  data-set-on="Lueftung"></div></li>
                <li> <div data-type="push" data-device="par_RL_auto" data-icon="oa-fts_shutter_automatic"  data-set-on="automatic"></div></li>
                <li> <div data-type="push" data-device="par_RL_auto" data-icon="oa-fts_shutter_manual"  data-set-on="manual"></div></li>
                <li> <div data-type="push" data-device="par_RL_dev" data-icon="oa-fts_sunblind" data-set-on="Beschatten"></div></li>
                <li> <div data-type="push" data-device="par_RL_dev" data-icon="oa-fts_shutter_down" data-set-on="off"></div></li>
              </ul>
            </div>


Automatik/Manuell ist aber in FHEM noch nicht implementiert. Aktuell gibts nur Manuellbetrieb ;)
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: onkel-tobi am 28 Januar 2017, 13:09:28
Hi Tobias,

vielen Dank dafür, dass funktioniert bei mir, hier werden jetzt auch die Icons korrekt geladen.
Allerdings habe ich noch eine Frage:
Wo/wie wird "par_SC_color" definiert? Das ist mir hier gerade unklar.

Danke & Gruß,
Tobi
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Tobias am 28 Januar 2017, 14:18:10
Das ist eine templatedefinition. Die parameter (par_???) werden in der eigentlichen Seite dem Template übergeben. Lies mal im Repo-Readme
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: tndx am 02 Februar 2017, 20:36:37
Zitat von: Thorsten Pferdekaemper am 15 Februar 2016, 22:48:50
also das beste, was ich bisher habe, sieht so aus:

Ich habe mich, ohne Thorstens Lösung zu sehen, am Ende für eine ähnliche Lösung entschieden, s. Bild, oben links. alllerdings kriege ich es nicht hin, die Widgetsgruppe wie andere Widgets darstellen zu lassen. Entweder es sieht so aus, wie auf dem Bild, oder die Widgetsgruppe wird zerrissen, s. 2.Bild.

Hier der Code von dem 1.Bild:


<li data-row="1" data-col="2" data-sizey="1" data-sizex="3">
    <header>Küche</header>
<div class="sheet">
<div class="row">
<div class="cell">
<div class="row">
<div class="col-50 big"
data-type="symbol"
data-device="Kueche_Rollo"
data-icons='["oa-fts_shutter_100","oa-fts_shutter_10"]'
data-background-icon="fa-circle"
data-states='["runter","hoch"]'
data-background-color="#505050"
data-color="#2A2A2A"
title="Küchen-Rollo">
</div>
<div class="col-50 tiny triplebox-v">
<div data-type="push"
data-device="Kueche_Rollo"
data-icon="fa-chevron-up"
data-background-icon="fa-square-o"
data-set-on="hoch"
title="hoch">
</div>
<div data-type="push"
data-device="Kueche_Rollo"
data-icon="fa-stop"
data-background-icon="fa-square-o"
data-set-on="stop"
title="stop">
</div>
<div data-type="push"
data-device="Kueche_Rollo"
data-icon="fa-chevron-down"
data-background-icon="fa-square-o"
data-set-on="runter"
title="runter">
</div>
</div>
</div>
</div>
<div class="cell big"
data-type="symbol"
data-device="Kueche_Fenster"
data-icons='["oa-fts_window_2w", "oa-fts_window_2w_open_l", "oa-fts_window_2w_tilt_l"]'
data-background-icon="fa-circle"
data-states='["closed","open", "tilted"]'
data-background-color="#505050"
data-color="#2A2A2A"
title="Küchenfenster">
</div>
<div class="cell big"
data-type="symbol"
data-device="Kueche_DAH"
data-icon="oa-vent_ventilation"
data-background-icon="fa-circle"
data-states='["an","aus"]'
data-background-color="#505050"
data-colors='["#2A2A2A","#2A2A2A"]'
title="Dunstabzugshaube">
</div>
</div>
</div>
</li>
<li data-row="2" data-col="2" data-sizey="1" data-sizex="3">
    <header>Wohnzimmer</header>
<div class="sheet">
<div class="row">
<div data-type="symbol"
data-device="WZ_Rollo_links"
data-icons='["oa-fts_shutter_100","oa-fts_shutter_10"]'
data-background-icon="fa-circle"
data-states='["runter","hoch"]'
data-background-color="#505050"
data-color="#2A2A2A"
title="Wohnzimmer-Rollo links"
class="cell big top-space">
</div>
<div data-type="symbol"
data-device="WZ_Rollo_rechts"
data-icons='["oa-fts_shutter_100","oa-fts_shutter_10"]'
data-background-icon="fa-circle"
data-states='["runter","hoch"]'
data-background-color="#505050"
data-color="#2A2A2A"
title="Wohnzimmer-Rollo rechts"
class="cell big top-space">
</div>
<div data-type="symbol"
data-device="WZ_Rollo_Terrassentuer"
data-icons='["oa-fts_shutter_100","oa-fts_shutter_10"]'
data-background-icon="fa-circle"
data-states='["runter","hoch"]'
data-background-color="#505050"
data-color="#2A2A2A"
title="Wohnzimmer-Rollo Terrassentür"
class="cell big top-space">
</div>
</div>
</div>
</li>


Hat jemand einen Tip für mich, wie ich das ohne Rückfall auf <table> hinbekomme? Wenn es mit weniger Layout-divs geht, hätte ich nichts dagegen... Mit css kenne ich mich leider gar nicht aus.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: KarlFHEM am 09 August 2017, 18:00:36
Hallo, habe das Problem das ich nichts über die Aktoren von FS20 gefunden habe. Der FS20RSU gibt auch kein Zustände zurück,
also kann ich kein "30 %" machen.

Bitte hilft mir: wie würde der Widgets/Code aussehen für RollladenXYZ hoch/runter/5 sekunden runter (das ist die Beschattung)

Hilfe
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: jorge am 01 September 2017, 10:12:25
Zitat von: DocCyber am 24 August 2016, 16:21:11
Falls es jemanden interessiert... Ich habe es so gemacht, wie in den Anhängen zu sehen.
Ich steuere das mit HM-Rolladenaktoren Typ HM-LC-BL1-FM, die optional auch noch manuell zu bedienen sind.
Die Zeitautomatik mache ich über 'at'-Dummys.
Schalte meine Rolladen und Raffstores auch über HM-Aktoren. Lt. Screenshots genau das, was ich suche.
Leider wird außer der Überschrift nichts angezeigt. Liegts vielleicht an daran: "Wichtig ist, die id ^^^ anzugeben"...
Ich arbeite mit den Grundeinstellungen aus der demo_ftui. html. 
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: australien am 12 September 2017, 10:53:56
ich habe mir die Codezeilen von @Tobias in ein Template geschrieben und wollte diese für die einzelnen Rollos aufrufen.

Leider geht dadurch die Formatierung mit gridster verloren und alles befindet sich auf der gleichen Stelle und nicht auf  data-row="2" data-col="2"



<li class="halbTransparent border-left border-right" data-row="2" data-col="2" data-sizex="2" data-sizey="2">
<header class="headerTransparent">ROLLOS</header>
<div class="top-space inline">
        <div data-type="label">Fenster</div>
<li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_EssZimmer_Fenster"}'></li>
     
<div data-type="label">Tür</div>
                <li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_EssZimmer_Tuer"}'></li>
                   
            <div data-type="label">Bad</div>
                <li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_Bad"}'></li>
                         
            <div data-type="label">Kueche_SW</div>
            <li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_Kueche_SW"}'></li>
               
</div> 
</li>


template

<!-- Rollo Statusanzeige -->
<!-- par01:Rollo   -->

<div class="container">
    <div data-type="circlemenu" class="cell circlemenu">
        <ul class="menu">
            <li>
                <div data-type="symbol"
                     data-device="par01"
                     data-get="exact"
                     data-states='["0","10","20","30","40","50","60","70","80","100","200"]'
                     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-colors='["green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","yellow","green"]'>
                 </div>
             </li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="stop"
                      data-icon="oa-audio_stop"                                 
                      data-off-color="red"
                      data-on-color="red"></div></li>                                                                   
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="off"
                      data-icon="fa-angle-up"
                      data-off-color="green"
                      data-on-color="green"></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="100"
                      data-icon="oa-fts_shutter_90"
                      data-off-color="yellow"
                      data-on-color="yellow"></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="80"
                      data-icon=""><FONT SIZE=3>80%</FONT></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="60"
                      data-icon=""><FONT SIZE=3>60%</FONT></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="40"
                      data-icon=""><FONT SIZE=3>40%</FONT></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="20"
                      data-icon=""><FONT SIZE=3>20%</FONT></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="on"
                      data-icon="fa-angle-down"
                      data-off-color="green"
                      data-on-color="green"></div></li>
             </ul>
</div>
</div>



Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Grafkox am 12 September 2017, 11:10:05
Hi,

müssen das Label und das template nicht auch nochmal zusammen in ein <div> gepackt werden?

Zumindest ist es bei mir so (ohne Template).
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: australien am 12 September 2017, 11:17:44
ist das nicht bei <div class="top-space inline"> der fall?


<li class="halbTransparent border-left border-right" data-row="2" data-col="2" data-sizex="2" data-sizey="2">
<header class="headerTransparent">ROLLOS</header>
<div class="top-space inline">
                <div data-type="label">Fenster</div>
<li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_EssZimmer_Fenster"}'></li>
     
<div data-type="label">Tür</div>
                                <li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_EssZimmer_Tuer"}'></li>
                   
                        <div data-type="label">Bad</div>
                               <li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_Bad"}'></li>
                         
                        <div data-type="label">Kueche_SW</div>
                           <li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_Kueche_SW"}'></li>
               
</div> 
</li>
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Grafkox am 12 September 2017, 11:27:35
Damit gruppierst du zunächst ja nur alles unter Rollos.

versuche vielleicht mal Folgendes:


<li class="halbTransparent border-left border-right" data-row="2" data-col="2" data-sizex="2" data-sizey="2">
<header class="headerTransparent">ROLLOS</header>
<div class="top-space inline">
                <div>
                         <div data-type="label">Fenster</div>
<li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_EssZimmer_Fenster"}'></li>
                       </div>
<div>
                         <div data-type="label">Tür</div>
                                <li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_EssZimmer_Tuer"}'></li>
                        </div>
                         <div>
                        <div data-type="label">Bad</div>
                               <li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_Bad"}'></li>
                        </div>
                        <div>
                        <div data-type="label">Kueche_SW</div>
                           <li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_Kueche_SW"}'></li>
                        </div>
</div> 
</li>


Kann erst heute Abend schauen wie es genau bei mir ist, ggf. hat bis dahin ja jemand eine valide Info ;)
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: australien am 12 September 2017, 11:39:01
danke für deine Hilfe, leider hat es nichts gebracht.
Warte aber gerne wenn du mir helfen kannst :)

mit deinem Vorschlag schaut es bei mir so aus, siehe screenshot

Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: australien am 14 September 2017, 15:30:12
kann mir da bitte jemand helfen?

danke
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Grafkox am 15 September 2017, 19:43:11
Sorry, doch leider erst heute dazu gekommen.

ich habe es so für drei nebeneinanderliegende Rollos, allerdings ohne die Templates:
<li class="halbTransparent border-left border-right" data-row="3" data-col="1" data-sizex="4" data-sizey="2">
<header class="headerTransparent">ROLLOS</header>
<div class="top-space inline">
<div data-type="label">Terrasse li</div>
<div class="container">
<div data-type="circlemenu" class="cell circlemenu">
<ul>
<li><div data-type="symbol"
data-device="Rollo_WZ_Terasse_links"
data-get="exact"
data-states='["0","10","20","30","40","50","60","70","80","100","200"]'
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-colors='["green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","yellow","green"]'
></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_links"
data-set-on="stop"
data-icon="oa-audio_stop"
data-off-color="red"
data-on-color="red"></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_links"
data-set-on="off"
data-icon="fa-angle-up"
data-off-color="green"
data-on-color="green"></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_links"
data-set-on="100"
data-icon="oa-fts_shutter_90"
data-off-color="yellow"
data-on-color="yellow"></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_links"
data-set-on="80"
data-icon=""><FONT SIZE=3>80%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_links"
data-set-on="60"
data-icon=""><FONT SIZE=3>60%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_links"
data-set-on="40"
data-icon=""><FONT SIZE=3>40%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_links"
data-set-on="20"
data-icon=""><FONT SIZE=3>20%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_links"
data-set-on="on"
data-icon="fa-angle-down"
data-off-color="green"
data-on-color="green"></div></li>
</ul>
</div>
</div>
</div>
<div class="top-space inline">
<div data-type="label">Terrasse re</div>
<div class="container">
<div data-type="circlemenu" class="cell circlemenu">
<ul>
<li><div data-type="symbol"
data-device="Rollo_WZ_Terasse_rechts"
data-get="exact"
data-states='["0","10","20","30","40","50","60","70","80","100","200"]'
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-colors='["green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","yellow","green"]'
></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_rechts"
data-set-on="stop"
data-icon="oa-audio_stop"
data-off-color="red"
data-on-color="red"></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_rechts"
data-set-on="off"
data-icon="fa-angle-up"
data-off-color="green"
data-on-color="green"></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_rechts"
data-set-on="100"
data-icon="oa-fts_shutter_90"
data-off-color="yellow"
data-on-color="yellow"></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_rechts"
data-set-on="80"
data-icon=""><FONT SIZE=3>80%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_rechts"
data-set-on="60"
data-icon=""><FONT SIZE=3>60%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_rechts"
data-set-on="40"
data-icon=""><FONT SIZE=3>40%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_rechts"
data-set-on="20"
data-icon=""><FONT SIZE=3>20%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Terasse_rechts"
data-set-on="on"
data-icon="fa-angle-down"
data-off-color="green"
data-on-color="green"></div></li>
</ul>
</div>
</div>
</div>
<div class="top-space inline">
<div data-type="label">Fenster</div>
<div class="container">
<div data-type="circlemenu" class="cell circlemenu">
<ul>
<li><div data-type="symbol"
data-device="Rollo_WZ_Fenster"
data-get="exact"
data-states='["0","10","20","30","40","50","60","70","80","100","200"]'
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-colors='["green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","yellow","green"]'
></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Fenster"
data-set-on="stop"
data-icon="oa-audio_stop"
data-off-color="red"
data-on-color="red"></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Fenster"
data-set-on="off"
data-icon="fa-angle-up"
data-off-color="green"
data-on-color="green"></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Fenster"
data-set-on="100"
data-icon="oa-fts_shutter_90"
data-off-color="yellow"
data-on-color="yellow"></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Fenster"
data-set-on="80"
data-icon=""><FONT SIZE=3>80%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Fenster"
data-set-on="60"
data-icon=""><FONT SIZE=3>60%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Fenster"
data-set-on="40"
data-icon=""><FONT SIZE=3>40%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Fenster"
data-set-on="20"
data-icon=""><FONT SIZE=3>20%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_WZ_Fenster"
data-set-on="on"
data-icon="fa-angle-down"
data-off-color="green"
data-on-color="green"></div></li>
</ul>
</div>
</div>
</div>
</li>


Hoffe es hilft dir weiter
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Grafkox am 15 September 2017, 19:51:48
Auf Deinen Code angewendet (nur die Row col etc anpassen):

<li class="halbTransparent border-left border-right" data-row="3" data-col="1" data-sizex="4" data-sizey="2">
<header class="headerTransparent">ROLLOS</header>
<div class="top-space inline">
<div data-type="label">Fenster</div>
<li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_EssZimmer_Fenster"}'></li>
</div>
<div class="top-space inline">
<div data-type="label">Tür</div>
                <li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_EssZimmer_Tuer"}'></li>
</div>
<div class="top-space inline">
                <div data-type="label">Bad</div>
                <li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_Bad"}'></li>
</div>
<div class="top-space inline">
                <div data-type="label">Kueche_SW</div>
            <li data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_Kueche_SW"}'></li>
</div>
</li>


habe es nicht gegengetestet, wenn es funktioniert, würde ich mich über eine Rückmeldung freuen, dann könnte ich das ggf. bei mir auch umsetzen und müsste bei Anpassungen immer nur ein Template anpassen, anstatt 11 unterschiedliche Rollos

Gruß

Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: australien am 18 September 2017, 22:03:39
hat leider länger gedauert, die Zeit ;)

das Ganze bringt leider auch nicht den gewünschten Erfolg, die Texte stehen wie formatiert, die CircleMenues leider immer nur links oben.

bezüglich Templates, deswegen würde ich es auch lieber damit machen und dafür sollten sie ja da sein.

gibt es noch andere Ideen zu dem Problem?
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: australien am 21 September 2017, 09:23:00
so, gestern kam der Durchbruch!

Ein interner Reset meiner Gedanken brachte den Erfolg, eigentlich ganz einfach. Man nehme die <li> Tags und ersetzt diese mit <div>.

2 Stück,
- einmal ein CircleMenu zum Steuern und Anzeigen der Rollo und
- einmal die Statusausgabe des Rollos

so werden die Templates aufgerufen

<div class="gridster">
    <ul>
    <div>
    <li class="halbTransparent border-left border-right" data-row="1" data-col="1" data-sizex="2" data-sizey="2">
    <header class="headerTransparent">ROLLOS</header>   
        <div class="top-space inline">
                       
            <div data-type="label">EZ Fenster</div>
            <div data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_EssZimmer_Fenster"}'></div>
                 
            <div data-type="label">rollo_Wohnzimmer_Tuer_3R</div>
            <div data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_Wohnzimmer_Tuer_3R"}'></div>
                               
            <div data-type="label">Bad</div>
            <div data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_Bad"}'></div>
                               
            <div data-type="label">Kücke SW</div>
            <div data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_Kueche_SW"}'></div>
        </div>
    </li>
    </div>

     
    <li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
    <header class="headerTransparent">status</header>
    <div data-type="label">EZ_Fenster</div>
        <div data-template="Templates/RolloStatus.html" data-parameter='{"par01":"rollo_EssZimmer_Fenster"}'></div>
   
        <div data-type="label">rollo_Wohnzimmer_Tuer_3R</div>
    <div data-template="Templates/RolloStatus.html" data-parameter='{"par01":"rollo_Wohnzimmer_Tuer_3R"}'></div>
       
        <div data-type="label">Bad</div>
        <div data-template="Templates/RolloStatus.html" data-parameter='{"par01":"rollo_Bad"}'></div>
   
        <div data-type="label">Küche_SW</div>
    <div data-template="Templates/RolloStatus.html" data-parameter='{"par01":"rollo_Kueche_SW"}'></div>
    </li>
 
    </ul>
</div>


Template: RolloSchalter.html

<!-- Rollo StatusSchalter -->
<!--
par01:Rollo
-->
<div class="container">
   <div data-type="circlemenu" class="cell circlemenu">
        <ul class="menu">
            <li>
                <div data-type="symbol"
                     data-device="par01"
                     data-get="exact"
                     data-states='["0","10","20","30","40","50","60","70","80","100","200"]'
                     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-colors='["green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","yellow","green"]'
                 </div>
             </li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="stop"
                      data-icon="oa-audio_stop"                                 
                      data-off-color="red"
                      data-on-color="red"></div></li>                                                                   
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="off"
                      data-icon="fa-angle-up"
                      data-off-color="green"
                      data-on-color="green"></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="100"
                      data-icon="oa-fts_shutter_90"
                      data-off-color="yellow"
                      data-on-color="yellow"></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="80"
                      data-icon=""><FONT SIZE=3>80%</FONT></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="60"
                      data-icon=""><FONT SIZE=3>60%</FONT></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="40"
                      data-icon=""><FONT SIZE=3>40%</FONT></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="20"
                      data-icon=""><FONT SIZE=3>20%</FONT></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="on"
                      data-icon="fa-angle-down"
                      data-off-color="green"
                      data-on-color="green"></div></li>
             </ul>
</div>
  </div>



Template: RolloStatus.html

<!-- Rollo Statusanzeige -->
<!-- par01:device
-->

<div data-type="symbol" class="big narrow" data-device="par01" data-get="state"
               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","oa-fts_shutter_100"]'
               data-get-on='["open","10","20","30","40","50","60","70","80","90","100","closed"]' data-on-color="#2A2A2A"
               data-on-background-color="#aa6900" data-background-icon="fa-circle">
</div>

Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: HeimBaer am 11 November 2017, 19:44:41
Zitat von: Thorsten Pferdekaemper am 04 Februar 2016, 22:49:46
Hi,
ich habe auch gerade an dem Thema rumgebastelt. Allerdings habe ich momentan den Fokus auf der Visualisierung. Ich habe mir dazu folgendes gebaut:

<div data-type="symbol" class="big narrow" data-device="dg_sz_Rollladen" 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-circle">
</div>

Das zeigt dann ein kleines Fenster mit einem Rollladen an, dessen Stellung so ungefähr der Realität entspricht.
Siehe Anhang...
Vielleicht noch nicht ganz so künstlerisch wertvoll, aber für mich passt das besser als data-type="level".
Gruß,
   Thorsten

Hi,

vielen Dank, Thorsten, für die prima und einfache Rollo-Visualisierung!
Hier noch ein Vorschlag, wie man es wie bei einer typische "1-Tasten-Rollo-Steuerung" (Ab-Stop-Auf-Stop-...) zum Leben erweckt und so eine platzsparende Visualisierung und alltagstaugliche Steuerung hat:

<div data-type="switch" data-device="ROLLODEVICE" data-get="level" data-fhem-cmd='{rollo_ButtonOnStopOffStop("ROLLODEVICE");;}'
    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_1w"]'
    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>           

(Achtung: Die Rollo-Device-Werte (und daher die Icon-Reihenfolge) sind bei mir wg. HomeMatic-Rollos genau umgedreht wie bei Thorsten. )

Der Hauptunterschied ist also nur das hinzugefügte "data-fhem-cmd" und dazu folgender Perl-Code in einem eigenen .pm:

### einzelnes Rollo mit einer einzelnen Taste komplett steuern
sub
rollo_ButtonOnStopOffStop($)
{
my $device = shift;

#merkt sich die zuletzt gewählte Richtung in einer globalen data-Variable
my $dir = $data{"{$device}_dir"} || "up";
if ($dir eq "") { $dir="up"; }

    #checke wie lange die letzte Meldung her ist. Wenn es lange(>30Sek.) her ist, dann ignoriere die gemerkte Richtung und fahre vormittags nach oben, sonst nach unten :-)
    my $letzteDeviceTime = time_str2num( InternalVal($device,"protLastRcv","2000-01-01 00:00:00") );
    if (jetzt_num() - $letzteDeviceTime > 30) {
    my $hour = int(strftime("%H",localtime(time)));
    if ($hour>3 and $hour<12) { $dir="down"; }
    else { $dir="up"; }
    }

if ( ReadingsVal($device,"motor","nix") =~ "stop:.*" ) {
my $val = Value($device);
if ( $val eq "on" or ($dir eq "up" and $val ne "off") ) {
$data{"{$device}_dir"}="down";
fhem("set $device off");
return 1;
}
#else:
$data{"{$device}_dir"}="up";
fhem("set $device on");
return 2;
}
#else:
    fhem("set $device stop");
return 0;
}

sub
jetzt_num()
{
    my ($sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$isdst) = localtime(time);
    return mktime($sec, $min, $hour, $mday, $mon, $year, 0, 0, -1);
}

(Anm.: Ist vielleicht nicht das sauberste, in $data etwas dauerhaft abzulegen (nämlich die zuletzt gedrückte Richtung), aber der Wert ist ja nicht dauerhaft wichtig.  ;) )

Diesen Code verwende ich auch von physischen Tastern aus, an Stellen wo an der Wand nur noch ein Taster frei war (statt einem Taster für rauf und einen anderen für runter).

Vielleicht hilft es jemandem!
Christian/Heimbär
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: en-trust am 16 Februar 2018, 08:22:38
Ich habe meine Anzeige auch mal etwas verändert und noch ein warn eingebunden der den Stand der Jalousie anzeigt.

<div data-type="symbol" class="large warn shadow semiblue" data-device="SZ.Jalousie.Rechts" data-warn="pct" 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-colors='["#1eb446","#32a054","green","green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050"]' data-background-icon="none" data-on-background-color="semiblue" data-off-background-color="semiblue">                                                                                      
</div></td><td>                                                                                         
<div data-type="select" data-device="SZ.Jalousie.Rechts" data-items='["0","25","50","75","100"]' data-alias='["Zu","25%","50%","75%","Auf"]' data-get="level" data-set="" class="">                                                                                 
</div>


Das klappt auch soweit außer die Jalousie steht au 0 (also zu) oder 100 (offen). Bei 100 zeigt er mir ein Ausrufezeichen obwohl level und pct bei 100 stehen...

Internals:
   CFGFN      ./FHEM/fhem_activeactors.cfg
   DEF        49DA45
   IODev      myCUL
   LASTInputDev myCUL
   MSGCNT     7
   NAME       SZ.Jalousie.Rechts
   NOTIFYDEV  global
   NR         207
   STATE      hoch
   TYPE       CUL_HM
   lastMsg    No:8B - t:10 s:49DA45 d:F11034 0601C800
   myCUL_MSGCNT 7
   myCUL_RAWMSG A0D8BA41049DA45F110340601C800::-82:myCUL:
   myCUL_RSSI -82
   myCUL_TIME 2018-02-16 07:31:44
   protCmdDel 1
   protLastRcv 2018-02-16 07:31:44
   protResnd  3 last_at:2018-02-15 18:13:41
   protResndFail 1 last_at:2018-02-15 18:13:45
   protSnd    10 last_at:2018-02-16 07:31:44
   protState  CMDs_done
   rssi_at_myCUL lst:-82 avg:-78 cnt:7 max:-71 min:-87
   rssi_myCUL cnt:5 max:-70 min:-84 lst:-80 avg:-79
   Helper:
     DBLOG:
       state:
         logdb:
           TIME       1518762704.33157
           VALUE      on
   READINGS:
     2018-02-16 07:31:21   CommandAccepted yes
     2017-07-14 13:26:41   D-firmware      2.8
     2017-07-14 13:26:41   D-serialNr      NEQ0076387
     2018-02-03 17:16:12   PairedTo        0xF11034
     2017-09-09 22:45:10   R-driveDown     23.1 s
     2017-07-21 07:44:37   R-driveTurn     0.5 s
     2017-09-09 22:45:10   R-driveUp       24 s
     2017-07-21 07:44:36   R-pairCentral   0xF11034
     2017-07-21 07:44:37   R-powerUpAction off
     2017-07-21 07:44:37   R-sign          off
     2018-02-03 17:16:12   RegL_00.        02:01 0A:F1 0B:10 0C:34 15:FF 18:00 00:00
     2018-02-03 17:16:13   RegL_01.        08:00 09:00 0A:00 0B:00 0C:E7 0D:00 0E:F0 0F:05 10:00  30:06 57:24 56:00 00:00
     2018-02-16 07:31:44   deviceMsg       on (to myVCCU)
     2018-02-16 07:31:44   level           100
     2018-02-16 07:31:44   motor           stop:on
     2018-02-16 07:31:44   pct             100
     2018-01-04 19:16:26   powerOn         2018-01-04 19:16:26
     2018-02-16 07:31:44   recentStateType info
     2018-02-16 07:31:44   state           on
     2018-02-16 07:31:44   statePosition   0
     2018-02-16 07:31:44   timedOn         off
   helper:
     HM_CMDNR   139
     cSnd       01F1103449DA45010E,11F1103449DA450201C8
     dlvlCmd    ++A011F1103449DA450201C8
     mId        006A
     regLst     ,0,1,3p
     rxType     1
     supp_Pair_Rep 0
     dir:
       cur        stop
       rct        up
     expert:
       def        1
       det        0
       raw        1
       tpl        0
     io:
       lstRecType 10
       newChn     +49DA45,00,00,00
       nextSend   1518762704.32053
       nxtSndMcnt 8B
       rxt        0
       tgtDly     88
       vccu       myVCCU
       lRcTm:
         myCUL      322079776
         tnms       491765097
       p:
         49DA45
         00
         00
         00
       prefIO:
         myCUL
     mRssi:
       mNo        8B
       io:
         myCUL:
           -80
           -80
     prt:
       bErr       0
       sProc      0
       rspWait:
     q:
       qReqConf   
       qReqStat   
     role:
       chn        1
       dev        1
     rpt:
       IO         myCUL
       flg        A
       ts         1518762704.24034
       ack:
         HASH(0x54a6ef8)
         8B8002F1103449DA4500
     rssi:
       at_myCUL:
         avg        -78
         cnt        7
         lst        -82
         max        -71
         min        -87
       myCUL:
         avg        -79
         cnt        5
         lst        -80
         max        -70
         min        -84
     tmpl:
Attributes:
   IODev      myCUL
   IOgrp      myVCCU:myCUL
   autoReadReg 4_reqStatus
   comment    1-fach Schaltaktor fuer Schlafzimmer-Jalousie (Rechts)
   devStateIcon auf:fts_shutter_10 zu:fts_shutter_100 *:fts_shutter_50
   event-on-change-reading state
   eventMap   on:hoch off:runter stop:stop
   expert     2_raw
   firmware   2.8
   group      Aktoren
   icon       fts_shutter_automatic
   model      HM-LC-Bl1PBU-FM
   peerIDs    00000000,
   room       CUL_HM,Schlafzimmer
   serialNr   NEQ0076387
   subType    blindActuator
   userReadings statePosition {if(ReadingsVal($name,"state","0") eq "up" or ReadingsVal($name,"state","0") eq "down" or ReadingsVal($name,"state","0") eq "closed" or ReadingsVal($name,"state","0") eq "open_ack") {ReadingsVal($name,"state",0)} else {ReadingsVal($name,"position",0)};}
   webCmd     statusRequest:toggleDir:pct:on:off:up:down:stop


Bei Null zeigt er gar kein warn.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: setstate am 16 Februar 2018, 08:50:35
Wenn bei 100 ein ! kommt, hast du noch eine ältere Version. Jetzt können mehr als zweistellige Zahlen angezeigt werden. Null wird nicht angezeigt. Ist normal bei einer warn Funktion. 0 = keine Items
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: en-trust am 16 Februar 2018, 10:13:55
Ich habe zum warn noch data-warn-off und data-warn-on gefunden. Damit kann man das warn wohl für bestimmte Fälle aussteuern.

https://wiki.fhem.de/wiki/FTUI_Widget_Switch (https://wiki.fhem.de/wiki/FTUI_Widget_Switch)

Allerdings ein data-warn-off = "0|100" bringt Ausrufezeichen und für die restlichen dann gar kein warn mehr.

Aber wieso ältere Version? Ich update regelmäßig fhem
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: holzwurm83 am 01 April 2018, 20:02:31
Hallo zusammen,

ich habe mir hier von euch einige anregungen geholt für meine Jalousien. Jetzt komme ich nur mit der Darstellung des Rollo-Icons nicht klar. Zu = Offen und andersrum.  Das läuft leider genau verkehrt rum. Ich habe die Werte schon getauscht nur hat das leider nichts gebracht.

Hier mal die ganze Box.

<li data-row="6" data-col="1" data-sizex="2" data-sizey="3">
    <header>Jalousie</header>
<div class="sheet">
<div class="row">
<div class="cell">
<div class="row">
<div data-type="popup" data-height="300px" data-width="250px" data-mode="fade">
<div class="col-50 normal "
data-type="symbol"
data-device="Rol_WZ_OST"
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">
</div>
<div class="dialog">
<header>Jalousie Ost</header>
<div class="">
<div data-type="volume" data-device="Rol_WZ_OST" data-min="0" data-max="100" data-get="level" data-set="level" data-tickstep='4' class="dim-tick big top-space"></div>
<div data-type="label" class="centered top-narrow" >Lamellenstellung</div>
</div>
</div>
</div>
<div class="col-50 tiny triplebox-v left-space-1x top-space-3x" >
<div data-type="push"
data-device="Rol_WZ_OST"
data-icon="fa-chevron-up"
data-background-icon="fa-square-o"
data-set-on="up">
</div>
<div data-type="push"
data-device="Rol_WZ_OST"
data-icon="fa-stop"
data-background-icon="fa-square-o"
data-set-on="stop">
</div>
<div data-type="push"
data-device="Rol_WZ_OST"
data-icon="fa-chevron-down"
data-background-icon="fa-square-o"
data-set-on="down">
</div>
</div>
</div>
</div>
<div class="cell">
<div class="row">
<div data-type="popup" data-height="300px" data-width="250px" data-mode="fade">
<div class="col-50 normal "
data-type="symbol"
data-device="Rol_WZ_SUED"
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">
</div>
<div class="dialog">
<header>Jalousie Süd</header>
<div class="">
<div data-type="volume" data-device="Rol_WZ_SUED" data-min="0" data-max="100" data-get="level" data-set="level" data-tickstep='4' class="dim-tick big top-space"></div>
<div data-type="label" class="centered top-narrow" >Lamellenstellung</div>
</div>
</div>
</div> <div class="col-50 tiny triplebox-v left-space-1x top-space-3x" >
<div data-type="push"
data-device="Rol_WZ_SUED"
data-icon="fa-chevron-up"
data-background-icon="fa-square-o"
data-set-on="up">
</div>
<div data-type="push"
data-device="Rol_WZ_SUED"
data-icon="fa-stop"
data-background-icon="fa-square-o"
data-set-on="stop">
</div>
<div data-type="push"
data-device="Rol_WZ_SUED"
data-icon="fa-chevron-down"
data-background-icon="fa-square-o"
data-set-on="down">
</div>
</div>
</div>
</div>
</div>
</div>

           </li>


Ist bestimmt nur eine Kleinigkeit, aber ich sehe diese wohl mit dem Brett vorm Kopf gerade nicht. :)
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: harald654 am 15 September 2018, 21:21:56
Hallo,
ich würde gerne auch die sehr schöne Darstellung von Thorsten Pferdekaemper verwenden,
allerdings bekomme ich meine Rolladenstellung als "dim xx" angezeigt, wodurch folgendes nicht funktioniert:
<div data-type="symbol" class="big narrow" data-device="ZWave_SWITCH_MULTILEVEL_24" data-get="STATE"
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='["dim 0","dim 10","dim 20","dim 30","dim 40","dim 50","dim 60","dim 70","dim 80","dim 90","dim 100"]' data-on-color="#2A2A2A"
data-on-background-color="#aa6900">
</div>

und nur durch Angabe jedes einzelnen Zustand funktioniert die Anzeige:
<div class="col bigger readonly" data-type="symbol"  data-device="ZWave_SWITCH_MULTILEVEL_24" data-get="state"
data-icons='["oa-fts_window_2w","oa-fts_window_2w","oa-fts_window_2w","oa-fts_window_2w","oa-fts_window_2w","oa-fts_window_2w",
"oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_10","oa-fts_shutter_10",
"oa-fts_shutter_20","oa-fts_shutter_20","oa-fts_shutter_20","oa-fts_shutter_20","oa-fts_shutter_20","oa-fts_shutter_20","oa-fts_shutter_20","oa-fts_shutter_20","oa-fts_shutter_20","oa-fts_shutter_20",
"oa-fts_shutter_30","oa-fts_shutter_30","oa-fts_shutter_30","oa-fts_shutter_30","oa-fts_shutter_30","oa-fts_shutter_30","oa-fts_shutter_30","oa-fts_shutter_30","oa-fts_shutter_30","oa-fts_shutter_30",
"oa-fts_shutter_40","oa-fts_shutter_40","oa-fts_shutter_40","oa-fts_shutter_40","oa-fts_shutter_40","oa-fts_shutter_40","oa-fts_shutter_40","oa-fts_shutter_40","oa-fts_shutter_40","oa-fts_shutter_40",
"oa-fts_shutter_50","oa-fts_shutter_50","oa-fts_shutter_50","oa-fts_shutter_50","oa-fts_shutter_50","oa-fts_shutter_50","oa-fts_shutter_50","oa-fts_shutter_50","oa-fts_shutter_50","oa-fts_shutter_50",
"oa-fts_shutter_60","oa-fts_shutter_60","oa-fts_shutter_60","oa-fts_shutter_60","oa-fts_shutter_60","oa-fts_shutter_60","oa-fts_shutter_60","oa-fts_shutter_60","oa-fts_shutter_60","oa-fts_shutter_60",
"oa-fts_shutter_70","oa-fts_shutter_70","oa-fts_shutter_70","oa-fts_shutter_70","oa-fts_shutter_70","oa-fts_shutter_70","oa-fts_shutter_70","oa-fts_shutter_70","oa-fts_shutter_70","oa-fts_shutter_70",
"oa-fts_shutter_80","oa-fts_shutter_80","oa-fts_shutter_80","oa-fts_shutter_80","oa-fts_shutter_80","oa-fts_shutter_80","oa-fts_shutter_80","oa-fts_shutter_80","oa-fts_shutter_80","oa-fts_shutter_80",
"oa-fts_shutter_90","oa-fts_shutter_90","oa-fts_shutter_90","oa-fts_shutter_90","oa-fts_shutter_90","oa-fts_shutter_90","oa-fts_shutter_90","oa-fts_shutter_90","oa-fts_shutter_90","oa-fts_shutter_90",
"oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_shutter_100","oa-fts_shutter_100"]'      
data-get-on='["dim 96","dim 97","dim 98","dim 99","dim 100","on", 
"dim 86","dim 87","dim 88","dim 89","dim 90","dim 91","dim 92","dim 93","dim 94","dim 95",
"dim 76","dim 77","dim 78","dim 79","dim 80","dim 81","dim 82","dim 83","dim 84","dim 85",
"dim 66","dim 67","dim 68","dim 69","dim 70","dim 71","dim 72","dim 73","dim 74","dim 75",
"dim 56","dim 57","dim 58","dim 59","dim 60","dim 61","dim 62","dim 63","dim 64","dim 65",
"dim 46","dim 47","dim 48","dim 49","dim 50","dim 51","dim 52","dim 53","dim 54","dim 55",
"dim 36","dim 37","dim 38","dim 39","dim 40","dim 41","dim 42","dim 44","dim 44","dim 45",
"dim 26","dim 27","dim 28","dim 29","dim 30","dim 31","dim 32","dim 33","dim 34","dim 35",
"dim 16","dim 17","dim 18","dim 19","dim 20","dim 21","dim 22","dim 23","dim 24","dim 25",
"dim 6","dim 7","dim 8","dim 9","dim 10","dim 11","dim 12","dim 13","dim 14","dim 15",
"off","dim 0","dim 1","dim 2","dim 3","dim 4","dim 5"]' 
data-on-color="gray" data-on-background-color="#2A2A2A">
</div>


Was jedoch sehr umständlich ist und den Code schwer lesbar macht. Jemand ne Idee wie ich dies vereinfachen könnte?
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 15 September 2018, 21:47:14
Zitat von: harald654 am 15 September 2018, 21:21:56
Was jedoch sehr umständlich ist und den Code schwer lesbar macht. Jemand ne Idee wie ich dies vereinfachen könnte?
Ja:
1. Ein userReading basteln, dass das "dim" weglässt.
2. FUIP verwenden. (Das userReading brauchst Du trotzdem.)
Gruß,
   Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: harald654 am 15 September 2018, 23:44:54
Danke für die schnelle Antwort,

hab es, wie von dir Vorgeschlagen, mit einem UserReading hinbekommen :)
Die Lösung hat zwar eigentlich nichts mit Tablet Ui zu tun, aber der Vollständigkeit halber poste ich es dennoch mal hier:
attr ZWave_SWITCH_MULTILEVEL_24 userReadings rollostate:reportedState.* {substr((ReadingsVal("ZWave_SWITCH_MULTILEVEL_24","reportedState","")),4)}
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: der Bernhard am 19 November 2018, 12:58:04
Hallo,

ich habe den Code von Thorsten ein bisschen angepasst und würde jetzt noch gerne im symbol die statusänderung übergeben. Sprich ich fahre die Rollos runter und wenn es unten angekommen ist soll das icon wechseln. Das tut FTUI aber nur wenn ich die Seite aktualisiere. Kann man das irgendwie mitgeben?

Danke. Gruß Bernhard


<html>
<body>
  <div class="page" id="raffstores_etage_alle">
    <div class="gridster">
      <ul>
        <li data-row="2" data-col="2" data-sizex="2" data-sizey="2">
          <table>
            <tr>
              <td>
                <div style="position:absolute; left:0; margin-top:10px; width:90px;" data-type="symbol" class="bigger" data-device="RS_Wohnzimmer" data-get="state" data-icons='["oa-fts_window_2w","oa-fts_shutter_100"]' data-get-on='["on","off"]' data-on-color="orange" data-off-color="#2a2a2a" data-background-icon="fa-square" data-background-color="#505050"></div>
                <div style="position:absolute; left:0; right:0; margin-top:120px; width:90px;" data-type="label" class="normal darker">Wohnzimmer</div>
              </td>
              <td>
                <div style="position:absolute; top:0; margin-left:90px;" class="triplebox-v left">
                  <div data-type="push" data-device="RS_Wohnzimmer" data-get="state" data-icon="fa-chevron-circle-up" data-background-icon="" data-set-on="on" class="big"> </div>
                  <div data-type="push" data-device="RS_Wohnzimmer" data-get="state" data-icon="fa-minus-square" data-background-icon="" data-set-on="stop" class="big top-narrow"> </div>
                  <div data-type="push" data-device="RS_Wohnzimmer" data-get="state" data-icon="fa-chevron-circle-down" data-background-icon="" data-set-on="off" class="big top-narrow"> </div>
                </div>
              </td>
            </tr>
          </table>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: tunguskar am 19 November 2018, 21:53:14
Ich habe mir auch mal eine Vorlage kopiert und als Template angepasst. Leider bekommt das Circlemenu keine Rückmeldung von dem ROLLO Modul.

Problem ist folgendes. Das ROLLO Modul liefert eigentlich die richtigen Zustände mit "state". Das Circlmenu-Icon zeigt aber immer die gelbe Farbe auch wenn der ROLLO auf state open oder half oder closed ist.

Weiterhin sind die Hintergründe der ausgeklappten Knöpfe nicht rund sondern eher mehr oval. Ist das normal?

Meine Modul schaut so aus:
<!DOCTYPE html>
<html>
<head>
<!-- Template für ROLLO Device -->
</head>
<body>
<div class="row">
<div class="bold inline medium" data-type="label"
data-colors='["#B28F00"]'>var_label
</div>
<div class="bold inline medium" data-type="label"
data-get="pct"
data-device="var_device"
data-unit="%"
data-colors='["#B28F00"]'>
</div>
<div data-type="circlemenu" data-direction="bottom-half" data-circle-radius="100" data-item-diameter="67">
<ul>
<li>
<div data-type="symbol" data-device="var_device" data-get="STATE"
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_shutter_100","oa-fts_shutter_0","oa-fts_shutter_50"]'
data-states='["drive-up","drive-down","closed","open","half"]'
data-get-on='["drive-up","drive-down"]'
date-get-off='["closed","open","half"]'
data-on-color="#E6FF57"
data-on-background-color="#E6FF57"
data-off-color="#808080"
data-off-background-color="#A6BF17"
data-background-icon="fa-circle-thin">
</div>
</li>
<li> <div data-type="push" data-device="var_device" data-icon="oa-fts_shutter_up" data-set-on="open"></div></li>
<li> <div data-type="push" data-device="var_device" data-icon="oa-fts_shutter_manual"  data-set-on="stop"></div></li>
<li> <div data-type="push" data-device="var_device" data-icon="oa-fts_shutter" data-set-on="half"></div></li>
<li> <div data-type="push" data-device="var_device" data-icon="oa-fts_shutter_down" data-set-on="closed"></div></li>
</ul>
</div>
</div>
</body>
</html>
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Stonemuc am 24 Juni 2019, 20:06:22
Zitat von: australien am 21 September 2017, 09:23:00
so, gestern kam der Durchbruch!

Ein interner Reset meiner Gedanken brachte den Erfolg, eigentlich ganz einfach. Man nehme die <li> Tags und ersetzt diese mit <div>.

2 Stück,
- einmal ein CircleMenu zum Steuern und Anzeigen der Rollo und
- einmal die Statusausgabe des Rollos

so werden die Templates aufgerufen

<div class="gridster">
    <ul>
    <div>
    <li class="halbTransparent border-left border-right" data-row="1" data-col="1" data-sizex="2" data-sizey="2">
    <header class="headerTransparent">ROLLOS</header>   
        <div class="top-space inline">
                       
            <div data-type="label">EZ Fenster</div>
            <div data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_EssZimmer_Fenster"}'></div>
                 
            <div data-type="label">rollo_Wohnzimmer_Tuer_3R</div>
            <div data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_Wohnzimmer_Tuer_3R"}'></div>
                               
            <div data-type="label">Bad</div>
            <div data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_Bad"}'></div>
                               
            <div data-type="label">Kücke SW</div>
            <div data-template="Templates/RolloSchalter.html" data-parameter='{"par01":"rollo_Kueche_SW"}'></div>
        </div>
    </li>
    </div>

     
    <li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
    <header class="headerTransparent">status</header>
    <div data-type="label">EZ_Fenster</div>
        <div data-template="Templates/RolloStatus.html" data-parameter='{"par01":"rollo_EssZimmer_Fenster"}'></div>
   
        <div data-type="label">rollo_Wohnzimmer_Tuer_3R</div>
    <div data-template="Templates/RolloStatus.html" data-parameter='{"par01":"rollo_Wohnzimmer_Tuer_3R"}'></div>
       
        <div data-type="label">Bad</div>
        <div data-template="Templates/RolloStatus.html" data-parameter='{"par01":"rollo_Bad"}'></div>
   
        <div data-type="label">Küche_SW</div>
    <div data-template="Templates/RolloStatus.html" data-parameter='{"par01":"rollo_Kueche_SW"}'></div>
    </li>
 
    </ul>
</div>


Template: RolloSchalter.html

<!-- Rollo StatusSchalter -->
<!--
par01:Rollo
-->
<div class="container">
   <div data-type="circlemenu" class="cell circlemenu">
        <ul class="menu">
            <li>
                <div data-type="symbol"
                     data-device="par01"
                     data-get="exact"
                     data-states='["0","10","20","30","40","50","60","70","80","100","200"]'
                     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-colors='["green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","yellow","green"]'
                 </div>
             </li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="stop"
                      data-icon="oa-audio_stop"                                 
                      data-off-color="red"
                      data-on-color="red"></div></li>                                                                   
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="off"
                      data-icon="fa-angle-up"
                      data-off-color="green"
                      data-on-color="green"></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="100"
                      data-icon="oa-fts_shutter_90"
                      data-off-color="yellow"
                      data-on-color="yellow"></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="80"
                      data-icon=""><FONT SIZE=3>80%</FONT></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="60"
                      data-icon=""><FONT SIZE=3>60%</FONT></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="40"
                      data-icon=""><FONT SIZE=3>40%</FONT></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="20"
                      data-icon=""><FONT SIZE=3>20%</FONT></div></li>
             <li><div data-type="push"
                      data-device="par01"
                      data-set-on="on"
                      data-icon="fa-angle-down"
                      data-off-color="green"
                      data-on-color="green"></div></li>
             </ul>
</div>
  </div>



Template: RolloStatus.html

<!-- Rollo Statusanzeige -->
<!-- par01:device
-->

<div data-type="symbol" class="big narrow" data-device="par01" data-get="state"
               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","oa-fts_shutter_100"]'
               data-get-on='["open","10","20","30","40","50","60","70","80","90","100","closed"]' data-on-color="#2A2A2A"
               data-on-background-color="#aa6900" data-background-icon="fa-circle">
</div>


Bei mir wird das mit der Visualisierung nichts. Was mach ich da nur falsch? Bei mir ist das alles sehr seltsam untereinander...
ist das richtig, dass ich bei Aufruf der Visualisierung ein <div> setzen muss?
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: crazysky am 12 Juli 2019, 23:01:34
Hallo,
ich möchte mit meinem vermutlich kleinen Problem den "Problemlösungsfluss" der anderen, die gerade hier aktiv sind, eigentlich nicht unterbrechen.
Aber irgendwann muss ich ja mal schreiben :-P

Ich habe mich an Thorstens Lösung vom 15 Februar 2016, 22:48:50 (https://forum.fhem.de/index.php/topic,42266.msg410879.html#msg410879)  orientiert.
Ich habe bei meinen Rolladen nur hoch runter stopp. Der Timer funktioniert auch. jedoch wird das Konfigurations-Popup irgendwie über den ganzen Bildschirm in der Breite angezeigt. Außerdem ist unterhalb der Bedienelemente diese Feld zum Code eingeben  :o  das soll dort natürlich nicht sein.

<div
                           data-type="wdtimer"
                           data-device="dg_wz_RollladenTimer"
                           data-style="round"
                           data-theme="dark"
                           data-title="Rolladen Büro"
                       data-sortcmdlist="MANUELL"
                           data-cmdlist='{"u":"u","d":"d"}'
                         >
                        <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>


Desweiteren kommen beim Aufrufen von TabletUI zwei kleine Fehlermeldungen am unteren Bildschirmrand, die zwar wieder verschwinden, aber auf irgendeine Schweinerei hindeuten und lästig sind.
Leider bin ich der Programmiersprachen nicht wirklich mächtig und bastel mehr zusammen als dass ich produktiv produziere.
Ich habe mal die zwei Phänomene als Screenshots in den Anhang gepackt. Vielleicht kann ja jemand helfen.

Vielen Dank.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Thorsten Pferdekaemper am 13 Juli 2019, 14:53:59
Zitat von: crazysky am 12 Juli 2019, 23:01:34
ich möchte mit meinem vermutlich kleinen Problem den "Problemlösungsfluss" der anderen, die gerade hier aktiv sind, eigentlich nicht unterbrechen.
Aber irgendwann muss ich ja mal schreiben :-P
Das "wann" ist nicht so das Problem, eher das "wo". In so einem Fall sollte man meiner Meinung nach einen neuen Thread aufmachen.

Zitat
Ich habe mich an Thorstens Lösung vom 15 Februar 2016, 22:48:50 (https://forum.fhem.de/index.php/topic,42266.msg410879.html#msg410879)  orientiert.
Ich habe bei meinen Rolladen nur hoch runter stopp. Der Timer funktioniert auch. jedoch wird das Konfigurations-Popup irgendwie über den ganzen Bildschirm in der Breite angezeigt. Außerdem ist unterhalb der Bedienelemente diese Feld zum Code eingeben  :o  das soll dort natürlich nicht sein.
Ich hatte mit dem wdtimer-Widget auch so meine Problemchen, weswegen ich für FUIP eine eigene Version gebaut habe. Also am besten FUIP verwenden...

Zitat
Desweiteren kommen beim Aufrufen von TabletUI zwei kleine Fehlermeldungen am unteren Bildschirmrand, die zwar wieder verschwinden, aber auf irgendeine Schweinerei hindeuten und lästig sind.
Da ist wohl codemirror nicht installiert. Das hat soweit ich weiß was mit der Coding-Zeile zu tun, die Du ja sowieso nicht willst.

Wie gesagt: Probier mal FUIP oder vielleicht funktioniert auch das fuip_wdtimer-Widget irgendwie ohne FUIP.

Gruß,
   Thorsten
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: D3ltorohd am 03 August 2019, 15:58:16
Ich hänge mich hier auch mal mit an. Ich versuche mich auch gerade daran, mit einem CircleMenu meine Rollos zu steuern. Soweit klappt das auch schon, nur stimmt irgendwie die Pos nicht mit der Mitte des Rollo Icons überein. Was kann ich hier tun um dieses zu verschieben. Hab das Icon mal größer gemacht, da es sonst zu klein ist. Aber das scheint dann das CircleMenu zu verschieben.

Hier der Code ::
<li data-row="1" data-col="3" data-sizex="1" data-sizey="1">
                <header>Eingang/Treppe</header>
                <div class="sheet">
                    <div class="row">
                        <div class="cell">
<div data-type="symbol" data-device="Haustuer_Sensor" data-states='["open","close"]' data-icons='["oa-fts_door_open blink warn","oa-fts_door"]' data-colors='["red","green"]' class="narrow tall"></div>
                            <div class="top-narrow-4x  darker small">Haustür</div>
</div>
    <div class="container" >
    <div data-type="circlemenu" class="cell circlemenu">
<!--<div data-type="circlemenu" class="cell circlemenu" data-direction="right-half" data-circle-radius="90">-->
<ul class="menu">
<li><div data-type="symbol"
data-device="Treppe"
data-get="pct"
data-get-on='["up","down","open","closed","0","10","20","30","40","50","60","70","80","90","100"]'
data-icons='["oa-fts_shutter_up","oa-fts_shutter_down","oa-fts_window_2w","oa-fts_shutter_100","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-colors='["grey","grey","yellow","green","green","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05","#ebbd05"]'
class="bigger"></div></li>
<li><div data-type="push" data-device="Treppe" data-set-on="stop" data-icon="fa-angle-stop"></div></li>
<li><div data-type="push" data-device="Treppe" data-set-on="pct 0" data-icon="fa-angle-down"></div></li>
<li><div data-type="push" data-device="Treppe" data-set-on="pct 80" data-icon="">80</div></li>
<li><div data-type="push" data-device="Treppe" data-set-on="pct 60" data-icon="">60</div></li>
<li><div data-type="push" data-device="Treppe" data-set-on="pct 40" data-icon="">40</div></li>
<li><div data-type="push" data-device="Treppe" data-set-on="pct 20" data-icon="">20</div></li>
<li><div data-type="push" data-device="Treppe" data-set-on="pct 100" data-icon="fa-angle-up"></div></li>
</ul>
<div class="top-space-3x left-space right-narrow-4x darker small">Rollo</div>
</div>
   </div>
                    </div>
                </div>
            </li>


So sieht's dann aus, siehe screen.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: FHA am 05 Mai 2020, 23:08:10
@crazysky

Für crazysky's Problem ist folgendes zu tun:
Die Ziele
<link rel="sylesheet" href="/fhem/www/codemirror/codemirror/codemirror.css" />
ist in die Index.html einzutragen.
Codemirror muss installiert sein.

LG
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Mirko_2013 am 26 Mai 2020, 21:20:18
Zitat von: Ban-ya am 15 Februar 2016, 21:26:48
Danke, ich probiere es gleich aus  :)
Einer wird es wohl verkehrt herum gemacht haben  ;)
Gruß, Uwe

Nachtrag:

Es funktioniert  :)  ich habe jetzt
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.

Hallo zusammen,

Das Thema ist zwar schon eine weile her, aber ich möchte dennoch nochmal darauf zurückkommen.
Ich Versuche zur Zeit auch meine Rolladensteuerungvia FTUI zu Visualisieren.
Allerdings habe ich das Problem, das das Symbol für den Rolladen nur als grauer Punkt angezeigt wird.
Könnt Ihr mir einen Tip geben, wie man die oa Symbole angezeigt bekommt.
FTUI ist auf dem aktuelen Stand.

Danke und Gruß
Mirko
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: yersinia am 27 Mai 2020, 11:15:02
Zitat von: Mirko_2013 am 26 Mai 2020, 21:20:18Allerdings habe ich das Problem, das das Symbol für den Rolladen nur als grauer Punkt angezeigt wird.
Könnt Ihr mir einen Tip geben, wie man die oa Symbole angezeigt bekommt.
openautomation css ist eingebunden?
Ohne Code-Auszüge der betroffenen Widgets ist Hilfe schwer.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Mirko_2013 am 27 Mai 2020, 12:15:37
Ja Entschuldigung.

Die "openautomation.css" habe ich in der Index.html eingebunden.
Hier alle meine "Stylesheets":

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


Der Aufruf für den Rolladen ist wie folgt in Anlehnung von "Ban-ya":


<header class="headerTransparent">ROLLADEN</header>

        <div    data-type="symbol"
                        class="big narrow"
                        data-device="Rolladen01"
                        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>



Gruß
Mirko
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: yersinia am 27 Mai 2020, 12:32:40
Laut wiki (https://wiki.fhem.de/wiki/FTUI_Widget_Symbol#Einstellung_bei_mehreren_Werten) funktioniert data-get-on nur bei zwei Werten, du müsstest data-states stattdessen verwenden. Dies gilt ebenso für data-on-color (data-colors), data-on-background-color (data-background-colors) und data-background-icon (data-background-icons).
<header class="headerTransparent">ROLLADEN</header>
        <div data-type="symbol"
               class="big narrow"
               data-device="Rolladen01"
               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-states='["0","10","20","30","40","50","60","70","80","90","100"]'
               data-colors='["#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000","#000000"]'
               data-background-colors='["#6ab3f7","#6ab3f7","#6ab3f7","#6ab3f7","#6ab3f7","#6ab3f7","#6ab3f7","#6ab3f7","#6ab3f7","#6ab3f7","#6ab3f7"]'
               data-background-icons='["fa-square","fa-square","fa-square","fa-square","fa-square","fa-square","fa-square","fa-square","fa-square","fa-square","fa-square"]'>
        </div>


EDIT - der Vollständigkeit-halber würde ich bei den <link> noch den media_type (https://www.w3schools.com/tags/att_link_type.asp) mitgeben - und oa, fhemSVG und ftui gibt es auch als min.css (kann ladezeiten sparen):
        <link rel="stylesheet" href="lib/jquery.gridster.min.css" type="text/css" />
        <link rel="stylesheet" href="css/fhem-tablet-ui.min.css" type="text/css" />
        <link rel="stylesheet" href="css/fhem-tablet-ui-wdtimer.css" type="text/css" />
        <link rel="stylesheet" href="lib/font-awesome.min.css" type="text/css" />
        <link rel="stylesheet" href="lib/jquery.toast.min.css" type="text/css" />
        <link rel="stylesheet" href="lib/fhemSVG.min.css" type="text/css" />
        <link rel="stylesheet" href="lib/openautomation.min.css" type="text/css" />
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Mirko_2013 am 27 Mai 2020, 12:49:23
Danke, damit wird das icon jetzt angezeigt, allerdings wird nicht das entsprechende ICON gezeigt je nach Öffnung des Rolladens..
Ich werde wohl das WIKI etwas genauer lesen müssen.

Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: yersinia am 27 Mai 2020, 12:58:50
Zitat von: Mirko_2013 am 27 Mai 2020, 12:49:23allerdings wird nicht das entsprechende ICON gezeigt je nach Öffnung des Rolladens..
Schau mal:
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-states='["0","10","20","30","40","50","60","70","80","90","100"]'

Bei level = 0 wird das Icon oa-fts_shutter_100, bei 10 oa-fts_shutter_90, bei 20 oa-fts_shutter_80 usw. angezeigt. Möglicherweise ist das vertauscht und du musst die icons umsortieren.
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-states='["0","10","20","30","40","50","60","70","80","90","100"]'
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Mirko_2013 am 27 Mai 2020, 13:02:11
Nein, es wird immer nur das erste Icon angezeigt was in dem Array steht unabhängig von Status des Rolladens.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: yersinia am 27 Mai 2020, 13:07:08
device und reading sind korrekt?
data-device="Rolladen01"
data-get="level"

Edit: und es gibt auch ein Event wenn sich das Reading ändert?
Titel: FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Mirko_2013 am 27 Mai 2020, 13:19:32
Ja, anbei der Auszug aus dem Logfile.



2020-05-27_13:10:57 Rolladen01 timedOn: off
2020-05-27_13:11:21 Rolladen01 commState: CMDs_done
2020-05-27_13:11:21 Rolladen01 deviceMsg: off (to VCCU)
2020-05-27_13:11:21 Rolladen01 level: 0
2020-05-27_13:11:21 Rolladen01 motor: stop:off
2020-05-27_13:11:21 Rolladen01 pct: 0
2020-05-27_13:11:21 Rolladen01 off
2020-05-27_13:11:21 Rolladen01 timedOn: off



Das gleiche gilt auch für alle anderen ,,Arrays".
Egal welcher Level der Rolladen hat es bleibt auch immer die gleiche Farbe ( ich habe mal testweise unterschiedliche eingetragen).
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: yersinia am 27 Mai 2020, 14:07:54
Kurios. Alles was ich mir noch Vorstellen kann ist das entweder FTUI das nicht mitbekommt (Stichpunkt long/shortpoll (https://wiki.fhem.de/wiki/FHEM_Tablet_UI#Verbindung_zu_FHEM)) oder das FHEM bzw der Rolladen die Events zu selten senden oder level ist ungeeignet. :(
Der Widget-Code sieht augenscheinlich gut aus.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: Mirko_2013 am 27 Mai 2020, 14:28:19
Problem gefunden.
Es hatte sich ein "-" zuviel bei "data-states=" eingeschlichen.

Danke für die Hilfe jetzt klappt es.
Titel: Antw:FHEM Tablet Ui Widget für Rolladensteuerung
Beitrag von: satprofi am 06 Januar 2022, 12:18:13
Zitat von: Grafkox am 01 September 2016, 22:57:41
Hallo zusammen,

zunächst vielen vielen Dank für die wahnsinnig tollen Ideen und die hervorragende Arbeit die in TabletUI einfließt.
Selbst meine Frau ist inzwischen vom Aussehen und von der Bedienung meines einstigen "Hirngespinstes" begeistert.

Daher möchte ich auch meine Lösung von der Rolladensteuerrung präsentieren, die eine Mischung aus mehreren hier vorgestellten Lösungen ist und Einzug in das Layout FTUI 1.x - Mobile von Roman (dauch Dir ein dickes Lob und Danke) gehalten hat.

<li class="halbTransparent border-left border-right" data-row="3" data-col="1" data-sizex="4" data-sizey="3">
<header class="headerTransparent">ROLLOS</header>
<div class="top-space inline">
<div data-type="label">Fenster</div>
<div class="container">
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="symbol"
data-device="Rollo_BD_Fenster"
data-get="exact"
data-states='["0","10","20","30","40","50","60","70","80","100","200"]'
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-colors='["green","#505050","#505050","#505050","#505050","#505050","#505050","#505050","#505050","yellow","green"]'
></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="stop"
data-icon="oa-audio_stop"
data-off-color="red"
data-on-color="red"></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="off"
data-icon="fa-angle-up"
data-off-color="green"
data-on-color="green"></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="100"
data-icon="oa-fts_shutter_90"
data-off-color="yellow"
data-on-color="yellow"></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="80"
data-icon=""><FONT SIZE=3>80%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="60"
data-icon=""><FONT SIZE=3>60%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="40"
data-icon=""><FONT SIZE=3>40%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="20"
data-icon=""><FONT SIZE=3>20%</FONT></div></li>
<li><div data-type="push"
data-device="Rollo_BD_Fenster"
data-set-on="on"
data-icon="fa-angle-down"
data-off-color="green"
data-on-color="green"></div></li>
</ul>
</div>
</div>
</div>

</li>


Ich spiele noch mit dem Gedanken, die Funktion zu erweitern, weiß aber nicht, ob es die gewünschte Funktion in FHEM oder FTUI gibt:
Bei einfachem Klick öffnet sich das o.a. Circlemenü, wenn man aber den "Knopf" länger gedrückt hält (sagen wir 3-5 sek.) öffnet sich ein Popup mit Weekdaytimer um die "Fahrzeiten" des geklickten Rollos einzustellen.
Absolut nice to have wäre dann noch ein zusätzliches Uhrsymbol im Icon analog "warn", um anzuzeigen, dass bei dem Rollo programmierte "Fahrzeiten" eingestellt sind.
Geht das?

Viele Grüße

Thorsten

Hallo.
Grabe den Thread nochmal aus, möchte meine Rolladen über FTUI steuern.
Habe das obige script genommen, soweit so gut.
aber irgendein icon überlagert die gewünschten icons.
kann mir wer auf die sprünge helfen?