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
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".
Das circlemenue ist eine Option.
Kriegt man es auch hin, dass das Icon
In etwa den Stand des Rollos hinbekommt?
Gruss
Ekkehard
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)
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
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
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
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=""> </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
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
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?
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 ;)
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
Hallo Thorsten,
Danke für den Ansatz, bin auch noch auf der Suche nach DER Lösung.
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
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
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
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
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
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
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
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 Thorsten,
das ist ja bisher nur die Visualisierung, wie schaut den Deine Bedienung / Steuerung aus ?
klaus
Ich habe eine Kombination aus Slider und Circlemenue, die Standardbedingung wird über das Circlemenue gemacht, dann ist der Slider nur eine zusätzliche Visualisierung.
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 :)
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
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.
Ist ja eigentlich logisch. Nächstes mal denke ich etwas länger über meine Fragen nach ...
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
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) ;)
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
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.
@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!
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
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
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
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 ... :'(
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
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
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.
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
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.
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.
Dachte ich auch, aber es erscheint kurz immer "set_80" zum Beispiel, wenn ich denn Rollladen auf 80% fahre.
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
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?
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
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?
Hi,
vielleicht stört der Tick (') nach Az.Rolladen:
<div data-type="select" data-device="Az.Rolladen'" data-items='["0","10","
Gruß,
Thorsten
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
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 ;)
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
Zitat von: kvo1 am 17 Februar 2016, 23:35:23
@Ban-ya , ändert sich bei Dir das Symbol ?
Ja, alles bestens :)
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
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
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
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
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
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
ich habe auch diese: Homematic Funkaktor HM-LC-BL1PBU-FM
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>
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.
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 A
ktor. 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
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
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
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
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" />
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
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. :)
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
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>
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ü</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>
Danke!
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>
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
Oh man, was habe ich da gerstern nur zu viel rumgespielt :-(
Danke dir!!
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
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" />
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.
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.
Das <!-- --> ist fürs "Auskommentieren" bei HTML.
Also Code der nicht wirksam ist, aber zur Info drinbleiben soll
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.)
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
- den Status des Rollladens als Icon anzeigt
- bestätigt offen (grün, offener Rollladen)
- bestätigt geschlossen(grün, geschlossener Rollladen)
- der Rolladen steht zwischen offen und geschlossen
- graues Rollladensymbol abhängig von der Rollladenposition (0-100)
- Rollladen bewegt sich nach oben (gelb, Rolladen mit Pfeil nach oben)
- Rollladen bewegt sich nach unten (gelb, Rolladen mit Pfeil nach unten)
- Buttons für die Bedienung des Rollladens anbietet
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
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.
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 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
Hi Tobi,
bin im Moment noch unterwegs, kann aber nachher mal die Styles posten, die ich eingebunden habe.
Viele Grüße
Thorsten
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
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
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
ZitatIch hoffe damit funktioniert es.
Danke Grafkox
bei mir sind die Icons jetzt da!
Gruß Manuel
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
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.
Danke. klappt.
Jetzt hab ich noch eine frage.
Woran liegt es das fts_shutter_100 angezeigt wird, aber fts_Shutter_1w_100 nicht?
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 :)
Nein, nein ist schon beides richtig klein geschrieben:)
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
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
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 ;)
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
Das ist eine templatedefinition. Die parameter (par_???) werden in der eigentlichen Seite dem Template übergeben. Lies mal im Repo-Readme
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.
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
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.
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>
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).
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>
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 ;)
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
kann mir da bitte jemand helfen?
danke
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
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
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?
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>
<!-- 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>
<!-- 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>
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>
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);
}
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
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.
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
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
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. :)
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?
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
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)}
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>
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>
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?
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.
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
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.
@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
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
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.
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
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" />
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.
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"]'
Nein, es wird immer nur das erste Icon angezeigt was in dem Array steht unabhängig von Status des Rolladens.
device und reading sind korrekt?
data-device="Rolladen01"
data-get="level"
Edit: und es gibt auch ein Event wenn sich das Reading ändert?
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).
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.
Problem gefunden.
Es hatte sich ein "-" zuviel bei "data-states=" eingeschlichen.
Danke für die Hilfe jetzt klappt es.
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?