FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Helmi55 am 21 Februar 2016, 16:46:43

Titel: Frage zu einer Darstellung in FTUI
Beitrag von: Helmi55 am 21 Februar 2016, 16:46:43
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
Titel: Antw:Frage zu einer Darstellung in FTUI
Beitrag von: roman1528 am 21 Februar 2016, 18:13:44
Zitat von: Helmi55 am 21 Februar 2016, 16:46:43
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:

<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^^
Titel: Antw:Frage zu einer Darstellung in FTUI
Beitrag von: Helmi55 am 21 Februar 2016, 20:07:47
Hallo
ok danke - das Zauberwort ist "inline" oder?
So habe ich es jetzt hin bekommen:
<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

Titel: Antw:Frage zu einer Darstellung in FTUI
Beitrag von: roman1528 am 22 Februar 2016, 13:40:52
Zitat von: Helmi55 am 21 Februar 2016, 20:07:47
das Zauberwort ist "inline" oder?
inline bewirkt, dass die <div>'s nebeneinander angezeigt werden.

Zitat von: Helmi55 am 21 Februar 2016, 20:07:47
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 (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.

Zitat von: Helmi55 am 21 Februar 2016, 20:07:47
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....

<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 (https://github.com/knowthelist/fhem-tablet-ui#symbol-widgets)
Das gleiche gilt für Switch!

Zitat von: Helmi55 am 21 Februar 2016, 20:07:47
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^^
Titel: Antw:Frage zu einer Darstellung in FTUI
Beitrag von: Helmi55 am 22 Februar 2016, 17:59:06
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
Titel: Antw:Frage zu einer Darstellung in FTUI
Beitrag von: roman1528 am 22 Februar 2016, 18:42:35
<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:

<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^^
Titel: Antw:Frage zu einer Darstellung in FTUI
Beitrag von: Helmi55 am 22 Februar 2016, 21:04:28
Danke - so ist es perfekt
Werde mich durch deine HTML Dateien durcharbeiten.....
Learning bei doing
Nice eve
Helmut
Titel: Antw:Frage zu einer Darstellung in FTUI
Beitrag von: roman1528 am 23 Februar 2016, 09:57:08
Zitat von: Helmi55 am 22 Februar 2016, 21:04:28
Danke

Learning bei doing

Bitte gern.

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

Grüße^^