Frage zu einer Darstellung in FTUI

[Helmi55]

Schönen Nachmittag
ich habe in meiner Poolsteuerung einen dummy für meinen Poolroboter erstellt.
Ziel ist es, wenn dieser Schalter aktiviert wird und der Pool Master auch auf on ist durch ein DOIF den Roboter um 3 Uhr morgens einzuschalten und ihn dann
bis 7 Uhr laufen zu lassen.
Jetzt habe ich in meiner FTUI einen Schalter der auf den dummy verweist. Ich sehe aber nicht den eigentlichen Aktor der den Roboter schaltet?
Ist natürlich kein muss um diesen Aktor zu sehen wäre aber ein nice to have.
Ja ich könnte einen zusätzlichen Schalter in FTUI erstellen - aber ich glaube das wird zu unübersichtlich.
Wäre da Circle Menu zu verwenden oder habt ihr einen besseren Vorschlag
Danke und Gruß
Helmut

[roman1528]

Schönen Nachmittag
ich habe in meiner Poolsteuerung einen dummy für meinen Poolroboter erstellt.
Ziel ist es, wenn dieser Schalter aktiviert wird und der Pool Master auch auf on ist durch ein DOIF den Roboter um 3 Uhr morgens einzuschalten und ihn dann
bis 7 Uhr laufen zu lassen.
Jetzt habe ich in meiner FTUI einen Schalter der auf den dummy verweist. Ich sehe aber nicht den eigentlichen Aktor der den Roboter schaltet?
Ist natürlich kein muss um diesen Aktor zu sehen wäre aber ein nice to have.
Ja ich könnte einen zusätzlichen Schalter in FTUI erstellen - aber ich glaube das wird zu unübersichtlich.
Wäre da Circle Menu zu verwenden oder habt ihr einen besseren Vorschlag
Danke und Gruß
Helmut

Moin.

Mit einem Symbol deinen Aktor auslesen und neben dem Schalter (vermutlich switch) für den Dummy darstellen.
Also in etwa so:

Code Auswählen Erweitern


<div class="inline">
     <div data-type="switch"
          data-device="ROBO_DUMMY"
          data-icon="ICON_DEINER_WAHL">
     </div>
     <div data-type="label"
          class="">Automatisch<br />robottern
     </div>
</div>
<div class="inline">
     <div data-type="symbol"
          data-device="ROBO-AKTOR"
          ..... <!-- data-get oder irgendwas, was noch wichtig ist um den Aktor auszulesen. -->
          data-icon="fa-power"
          data-on-color="green"
          data-off-color="red">
     </div>
     <div data-type="label"
          class="">Robo<br />Status
     </div>
</div>


Eventuell das zweite "<div class="inline">" noch mit "left-narrow" etwas dichter ran schieben.

Grüße^^

[Helmi55]

Hallo
ok danke - das Zauberwort ist "inline" oder?
So habe ich es jetzt hin bekommen:

Code Auswählen Erweitern

<li data-row="1" data-col="7" data-sizex="1" data-sizey="1">
        <div class="inline">
     <div data-type="switch"
          data-device="Roboter"
          data-set-on="off"
             data-set-off="on"
             data-get-on='["off","on"]'
          data-icon="fa-power"
          data-background-colors='["red","green"]'
             class="small">
     </div>
     <div data-type="label"
          class="">Automatisch<br />robottern
     </div>
</div>
<div class="inline">
     <div data-type="switch"
          data-device="Roboter_sw4"
          data-set-on="off"
             data-set-off="on"
             data-get-on='["off","on"]'
             data-icon="fa-power"
             data-background-colors='["red","green"]'
             class="small">
     </div>
     <div data-type="label"
          class="">Robo<br />Status
     </div>
</div>
</li>


Jetzt muss ich nur noch die Formatierung schaffen - hätte die anzeige gerne rechts unten und den Schalter so wie er ist links oben.

So wie von dir vorgeschlagen - mit Symbol - funktioniert es leider nicht, da wird kein Icon angezeigt.
Ich kann ja auch ein class readonly drauflegen oder?  Damit der Schalter nur view ist und nicht schaltbar??

Danke
Gruß
Helmut

[roman1528]

das Zauberwort ist "inline" oder?

inline bewirkt, dass die <div>'s nebeneinander angezeigt werden.

Jetzt muss ich nur noch die Formatierung schaffen - hätte die anzeige gerne rechts unten und den Schalter so wie er ist links oben.

Schau dir mal diesen Beitrag an und probier ein wenig rum: http://forum.fhem.de/index.php/topic,49576.msg412952.html#msg412952
So kannst du die Elemente wie in einer HTML-Tabelle anordnen... Ich selber habe mich damit noch nicht beschäftigt.

So wie von dir vorgeschlagen - mit Symbol - funktioniert es leider nicht, da wird kein Icon angezeigt.

Ich wusste ja nicht wie dein Device genau aussieht.... Natürlich geht das auch mit Symbol!

Ich habe das bei mir mal mit Dummys getestet....

Code Auswählen Erweitern


<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
<header>ROBO</header>
<div class="left">
    <div data-type="switch"
         data-device="Roboter"
data-set-on="off"
data-set-off="on"
data-get-on="off"
data-get-off="on"
data-icon="fa-power-off"
data-on-background-color="green"
data-off-background-color="red"
class="small">
</div>
<div data-type="label"
class="">Automatisch<br />robottern
</div>
</div>
<div class="top-space-3 right right-space">
<div data-type="symbol"
data-device="Roboter_sw4"
data-get-on="off"
data-get-off="on"
data-icon="fa-power-off"
data-on-color="green"
data-off-color="red"
class="small">
</div>
<div data-type="label"
class="">Robo<br />Status
</div>
</div>
</li>

Wenn du "data-get-on" als Array verwendest ist das falsch. Wenn dann musst du "data-states" nehmen. Macht bei 2 "states" aber nicht groß Sinn.
Siehe: https://github.com/knowthelist/fhem-tablet-ui#symbol-widgets
Das gleiche gilt für Switch!

Ich kann ja auch ein class readonly drauflegen oder?  Damit der Schalter nur view ist und nicht schaltbar??

Kannst du auch ja...

Grüße^^

P.S. Das mit den Icons war mein Fehler... Hatte den flaschen Namen verwendet^^

[Helmi55]

Hallo und Danke
Kannst du mir bitte noch verraten wie ich das Auto Roboter Icon (der Switch)
noch um 2oder 3 px nach rechts verschieben kann. Sonst klebt es so am linken Rand
Habe es mit text-indent:2px versucht - aber das funktioniert anscheinend nur für Texteinrückungen

Danke und nice eve
Helmut

[roman1528]

Code Auswählen Erweitern

<div class="left" style="padding-left:5px;">
    <div data-type="switch"
         data-device="Roboter"
data-set-on="off"
data-set-off="on"
data-get-on="off"
data-get-off="on"
..........USW............

Ich habe da nochmal schnell was gezaubert.... schau es dir an:

Code Auswählen Erweitern


<li data-row="2" data-col="2" data-sizex="1" data-sizey="1">
<header>ROBO</header>
<div class="row top-space">
<div class="col-1-4">
<div data-type="switch"
data-device="Roboter"
data-set-on="off"
data-set-off="on"
data-get-on="off"
data-get-off="on"
data-icon="fa-power-off"
data-on-background-color="green"
data-off-background-color="red"
class="small">
</div>
<div data-type="label"
class="">&nbsp;Auto
</div>
</div>
<div class="col-2-4">&nbsp;
</div>
</div>
<div class="row">
<div class="col-2-4">&nbsp;
</div>
<div class="col-1-4">
<div data-type="symbol"
data-device="Roboter_sw4"
data-get-on="off"
data-get-off="on"
data-icon="fa-power-off"
data-on-color="green"
data-off-color="red"
class="small">
</div>
<div data-type="label"
class="">Status
</div>
</div>
</div>
</li>


Grüße^^

[Helmi55]

Danke - so ist es perfekt
Werde mich durch deine HTML Dateien durcharbeiten.....
Learning bei doing
Nice eve
Helmut

[roman1528]

Danke

Learning bei doing

Bitte gern.

So habe ich auch mit HTML angefangen... de.selfhtml.org ist auch immer einen Blick wert. Volle HTML und CSS Referenz.

Grüße^^