FTUI version 3

[juemuc]

Hallo zusammen,

da ich einige "weekdaytimer" definiert habe, hatte ich unter FTUI2 auch das entsprechende Widget oft auf meinen Seiten genutzt. Unter FTUI3 habe ich hierzu allerdings nichts gefunden.
Meine FTUI2-Definition lautete wie folgt:

Code Auswählen Erweitern

                     <td>
                        <li class="top-space left-space">
                            <div id="wdtimer_ftui" data-type="wdtimer" data-device="Rollos_Ost_WT" data-language="de" data-style="square" data-savecfg="true"
                                 data-theme="dark" data-timesteps="1" data-title="Rollos Ost" data-cmdlist='{"100":"pct:100","75":"pct:75","50":"pct:50","25":"pct:25","0":"pct:0"}' data-width="700">
                                <div data-type="label" class="">Timer</div>
                            </div>
                            <div data-type="label" data-device="Rollos_Ost_WT" data-get="nextUpdate" data-pre-text=""
                                 data-hide="disabled" data-hide-on="1" data-color="green" class="inline large">
                            </div>
                            <div data-type="label" data-device="Rollos_Ost_WT" data-get="nextValue" data-unit="%"
                                 data-hide="disabled" data-hide-on="1" data-color="white" class="inline large">
                            </div>
                            <div data-type="label" data-device="Rollos_Ost_WT" data-get="disabled" data-substitution='["1","Timer ist AUS!"]'
                                 data-hide="disabled" data-hide-on="0" data-color="red" class="inline large bold">
                            </div>
                        </li>
                     </td>

Wer hat ein paar Tipps für mich

Viele Grüße
Jürgen

[mr_petz]

Hallo zusammen,

da ich einige "weekdaytimer" definiert habe, hatte ich unter FTUI2 auch das entsprechende Widget oft auf meinen Seiten genutzt. Unter FTUI3 habe ich hierzu allerdings nichts gefunden.
...

Wer richtig sucht findet meist auch was...
Suche mal hier im Thread rechts oben in der Suche nach "weekdaytimer"

LG mr_petz

[juemuc]

Wer richtig sucht findet meist auch was...
Suche mal hier im Thread rechts oben in der Suche nach "weekdaytimer"

LG mr_petz

Danke
Viele Grüße
Jürgen

[juemuc]

Hallo,
ich würde gerne ein Icon in der Farbe einer HUE-Lampe einfärben. Allerdings scheint hier eine Umsetzung zu fehlen. Wer hat einen Tipp?

Code Auswählen Erweitern

<ftui-icon color="HUEDevice11:rgb" size="3"
        [name]="HUEDevice11:onoff | map('1:lightbulb-on, 0:lightbulb')">
</ftui-icon>


[OdfFhem]

@juemuc

Code Auswählen Erweitern


   color1          red
   color2          yellow
   color3          green
   onoff           1
   rgb1            ff0000
   rgb2            #ffff00
   rgb3            00ff00


- Attribut color "versteht" CSS-Farbbezeichnungen
- Attribut rgb "versteht" RGB-Farbkodierungen - mit oder ohne #
- Verzichtet man auf [...] um das Attribut, wird der übergebene Wert 1:1 als Ergebnis verwendet - nicht der Wert vom Wert
  ... rgb="ftuitest:rgb1" ergibt: ftuitest:rgb1
  ... [rgb]="ftuitest:rgb1" ergibt: ff0000

Code Auswählen Erweitern


         <ftui-row>
           <ftui-icon [rgb]="ftuitest:rgb1" size="3" [name]="ftuitest:onoff | map('1:lightbulb-on, 0:lightbulb')"></ftui-icon>
           <ftui-icon [color]="ftuitest:color1" size="3" [name]="ftuitest:onoff | map('1:lightbulb-on, 0:lightbulb')"></ftui-icon>
         </ftui-row>

         <ftui-row>
           <ftui-icon [rgb]="ftuitest:rgb2" size="3" [name]="ftuitest:onoff | map('1:lightbulb-on, 0:lightbulb')"></ftui-icon>
           <ftui-icon [color]="ftuitest:color2" size="3" [name]="ftuitest:onoff | map('1:lightbulb-on, 0:lightbulb')"></ftui-icon>
         </ftui-row>

         <ftui-row>
           <ftui-icon [rgb]="ftuitest:rgb3" size="3" [name]="ftuitest:onoff | map('1:lightbulb-on, 0:lightbulb')"></ftui-icon>
           <ftui-icon [color]="ftuitest:color3" size="3" [name]="ftuitest:onoff | map('1:lightbulb-on, 0:lightbulb')"></ftui-icon>
         </ftui-row>


s. Screenshot

[juemuc]

Danke für die Tipps.
Ich musste nur "color" durch rgb ersetzen und schon funktioniert es 
Unabhängig davon muss ich allerdings zweimal auf den "button" der Glühbirne drücken, damit die Lampe aus geht. Einschalten geht mit einem "klick". Was ist noch falsch?

Code Auswählen Erweitern

  <ftui-grid-tile row="1" col="8" height="3" width="3">
    <header>Bettlicht</header>
    <ftui-row margin="-2" align-items="center">
      <ftui-button [(value)]="HUEDevice11" shape="circle" height="5em"  width="5em">
        <ftui-icon [rgb]="HUEDevice11:rgb" size="3"
              [name]="HUEDevice11:onoff | map('1:lightbulb-on, 0:lightbulb')">
        </ftui-icon>
      </ftui-button>
      <ftui-icon width="50%" left="150px" top="40px"
            name="paint-brush" @click="pop5.open()">
      </ftui-icon>
    </ftui-row>
    <ftui-slider
          [(value)]="HUEDevice11:pct" min="0" max="100">
    </ftui-slider>
    <ftui-label color="white" size="1" margin="-0.5"
          [text]="HUEDevice11:pct">
        </ftui-label>
</ftui-grid-tile>


Viele Grüße
Jürgen

[Timothee]

Hallo in die Runde,
für mein neues Wandtablet versuche ich grade eine schöne Oberfläche für mein Smart Home zu basteln. Hierbei gefällt mir TabletUI am besten, daher bin ich nun dran mich langsam einzuarbeiten. Die ersten Erfolge konnte ich bereits erzielen (Darstellung von Temperaturen, Wettervorhersage und Online/ Offline Status meines NAS). Ich versuche so viel wie möglich über die Beispiele und des Forums selbst zu lösen. Aktuell bin ich an der Einbindung des PinPad von @mr-petz dran. Ich möchte über die TabletUI Oberfläche mein NAS per Wake on Lan starten. Da dies nicht jeder in meinem Haushalt machen soll, möchte ich dies mit dem PinPad sicherstellen. Grundsätzlich funktioniert es schon. Ich hab jedoch noch eine Frage zur Benutzung...
Wenn man den Pin nicht weiß, wie kehre ich zur vorherigen Ansicht zurück?
Da das PinPad kein Schließen Button besitzt, gestaltet sich das zurückkehren für mich relativ umständlich. Meine aktuelle Lösung ist die, dass ich das Attribut overlay leer übergebe (overlay=""), womit die Oberfläche weiterhin bedienbar bleibt. In meinem Sidemenü habe ich den ersten Eintrag für die Startseite mit einem Button versehen, der den Dummy wieder zurücksetzt. Damit schließt sich das PinPad nun wie gewünscht. Jedoch habe ich in diesem Fall das Verhalten, dass bei Eingabe eines falschen Pins das PinPad kurz verschwindet und sich anschließend sofort wieder neu öffnet. Wenn ich das Attribut overlay jedoch weglasse, wackelt das PinPad bei einer falschen Eingabe und bleibt so lange geöffnet, bis der korrekte Pin eingegeben wurde. Am besten würde mir gefallen, wenn die Oberfläche weiterhin bedienbar bleibt bei der Anzeige des PinPad (also Attribut overlay leer übergeben) und das PinPad bei einer falschen Eingabe sichtbar bleibt und es wackelt (wie ohne overlay). Habt ihr eine Idee, wie ich das lösen könnte?


Hier noch die aktuelle Einbindung des PinPads in meiner Oberfläche:

Code Auswählen Erweitern

<ftui-pinpad
  (device)="dum_23_ShowPinPad"
  [pin]="dum_23_ShowPinPad:pin"
  shape="round"
  name="Zum Starten Pin eingeben!"
  overlay=""
  flat
  [hidden]="dum_23_ShowPinPad | map('off:true, on:false')">
</ftui-pinpad>


Viele Grüße
Tim

[juemuc]

Hallo Tim,

rufe doch das PinPad über die "Popup"-Funktion auf.

Viele Grüße
Jürgen

[Timothee]

@juemuc Vielen dank für den Tipp. Ich habe es jetzt mal fix umgesetzt und es erfüllt alle meine Wünsche

[mr_petz]

Hi Tim,
bitte die entsprechenden Threads benutzen:
https://forum.fhem.de/index.php/topic,120107.msg1145784.html#msg1145784

Da kann ich noch was einbauen für deine Situation...

LG mr_petz

[Timothee]

Noch eine Frage zum Popup... Gibt es eine Möglichkeit, das Popup nur unter bestimmten Bedingungen anzuzeigen? Ich verwende aktuell ein Icon, bei dem ich der @click-Methode mein Popup zugewiesen habe. Mein Wunsch wäre, dass das Popup nur angezeigt wird, wenn ein bestimmter Wert bzw. Ausdruck wahr ist.

Hier mein Icon-Code mit der Zuweisung der @click-Methode:

Code Auswählen Erweitern

<ftui-icon name="server" size="3" @click="pinpad.open()"></ftui-icon>

Und hier mein Popup:

Code Auswählen Erweitern

  <ftui-popup id="pinpad" width="400px" height="550px">
<header> Zum Starten Pin eingeben!</header>
<ftui-pinpad
  (device)="dum_23_PinPad_Code"
  [pin]="dum_23_PinPad_Code:pin"
  shape="round"
  name=""
  left="40px"
  top="10%"
  flat
  fully
  set="wol_1_NAS on"
  open=true>
</ftui-pinpad>
  </ftui-popup>

Vielen Dank
Tim

[mr_petz]

Mit active sollte das gehen:
https://github.com/knowthelist/ftui/blob/90c05cd5b320922ac062b7c8fe018286a0150f43/www/ftui/examples/popup.html#L105

LG

[M.Piet]

Moin,

ich bin grad beim Umzug von FTUI2 auf 3.
So nach und nach setzte ich alles um und ich mag jetzt schon FTUI3!

Ich habe mich viel belesen, aber nichts zu dem Thema Kameras an dem Synology NAS gefunden.

In FTUI2 habe ich es wie folgt umgesetzt:

Code Auswählen Erweitern

<div data-type="image" data-device="Kamera_CAM2_Hintertuer" data-get="StmKeymjpegHttp" data-size=542 class="cell"></div>

Ich habe so grad gar keinen Ansatz, wie ich das in FTUI3 umgesetzt bekomme. Habe in der Suche auch nichts hilfreiches gefunden. Ich gehe aber davon aus, dass ich nicht der erste bin und einfach nicht richtig gesucht habe.

Danke euch schon mal.


edit:
Es ist so einfach...einfacher wie ich dachte:
Ich habe mein Problem selbst gelößt:

Code Auswählen Erweitern

<ftui-image [src]="Kamera_CAM1_Haustuer:StmKeymjpegHttp" width="500px"></ftui-image>

[M.Piet]

Hmmm...jetzt habe ich doch noch eine Frage zum Thema ftui-image..

Ich möchte in Abhängigkeit von einem Reading ein Bild angezeigt bekommen.

Wenn Device:reading:on soll dieses Bild angezeigt werden:        
<<ftui-image src="/fhem/ftui3/images/Icons/chubby-cute1.gif" width="100px" </ftui-image>

Wenn aber Device:reading:off soll dieses Bild angezeigt werden:        
<<ftui-image src="/fhem/ftui3/images/Icons/chubby-cute1.gif" width="100px" </ftui-image>

Jemand eine Idee?

[juemuc]

Die musst in Abhängigkeit des Readings "mappen"

z.B. so.

Code Auswählen Erweitern

        <ftui-icon color="green" size="2" left="285px"
              path="../images/openautomation" [name]="Rollo_Wohnzimmer:state | map('pct 100:fts_roof_window_shutter_0, pct 75:fts_roof_window_shutter_03, pct 50:fts_roof_window_shutter_05,
              pct 25:fts_roof_window_shutter_07, pct 0:fts_roof_window_shutter_10, undefined:message_attention, .*:message_attention')">
        </ftui-icon>

Viele Grüße
Jürgen