FHEM Tablet Ui Widget für Rolladensteuerung

[lestat.le]

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:

Code Auswählen Erweitern

<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

[setstate]

Hast du das andere Icon-Set auch in deine *.html eingebunden?

Code Auswählen Erweitern


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


[lestat.le]

sieht bei mir so aus:

Code Auswählen Erweitern

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

[lestat.le]

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.

[setstate]

Das <!--     --> ist fürs "Auskommentieren" bei HTML.
Also Code der nicht wirksam ist, aber zur Info drinbleiben soll

[DocCyber]

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

[50watt]

Im Wiki 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

[chrisu667]

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

[DocCyber]

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.

[Grafkox]

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.

Code Auswählen Erweitern

<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

[onkel-tobi]

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

[Grafkox]

Hi Tobi,

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

Viele Grüße

Thorsten

[onkel-tobi]

Hi Thorsten,

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

Code Auswählen Erweitern

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

Danke & Gruß,
Tobi

[Grafkox]

Sorry, kam am Freitag nicht mehr dazu und gestern habe ich es verbimmelt.

Anbei meine eingebundenen Stylesheets:

Code Auswählen Erweitern

        <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

[onkel-tobi]

Ich hoffe damit funktioniert es.

Gruß

Thorsten

Hi,

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

Gruß,
Tobi