FHEM Tablet Ui Widget für Rolladensteuerung

[Petrosilius Zwackelmann]

Ich hoffe damit funktioniert es.

Danke Grafkox
bei mir sind die Icons jetzt da!
Gruß Manuel

[Badflex]

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

[Noxus]

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.

[Badflex]

Danke. klappt.

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

[kvo1]

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 

[Badflex]

Nein, nein ist schon beides richtig klein geschrieben:)

[Tobias]

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

[kvo1]

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

[Tobias]

bitte gern, bitte gleich

Code Auswählen Erweitern

            <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

[onkel-tobi]

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

[Tobias]

Das ist eine templatedefinition. Die parameter (par_???) werden in der eigentlichen Seite dem Template übergeben. Lies mal im Repo-Readme

[tndx]

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:

Code Auswählen Erweitern


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

[KarlFHEM]

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

[jorge]

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. 

[australien]

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"

Code Auswählen Erweitern



<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

Code Auswählen Erweitern


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