FTUI version 3

[coolice]

Ich habe bei dem "altem" FTUI meine LightScene Szenen mit einem switch gesteuert. Wie mache ich das jetzt bei FTUI3 ?

[moonsorrox]

Ich habe bei dem "altem" FTUI meine LightScene Szenen mit einem switch gesteuert. Wie mache ich das jetzt bei FTUI3 ?

wenn du einen Button meinst womit du schlaten möchtest, dann so

Code Auswählen Erweitern

<ftui-button [(value)]="WZ_Schrank" fill="clear">
<ftui-icon class="size-2" [name]="WZ_Schrank:state | map('off:lightbulb-outline, on:lightbulb-on-outline')" [color]="WZ_Schrank:state | map('off:white, on:crimson')"></ftui-icon>
</ftui-button>

so als kleines Beispiel, richtig einfügen in deine Struktur mußt du es natürlich noch.
Oder meinstest du etwas anderes.?

[coolice]

Der Befehl den die Lightscen braucht ist ,,set LightSchen scene Licht_gemuetlich. Wenn ich das mit einem Button mache lautet der Befehl ,,set Lightscene Licht_gemuetlich.

[moonsorrox]

@setstate
ich wollte mal fragen ob es zu dem jetzigen Zeitpunkt schon möglich ist ein Popup zu erstellen in welchem ich meine eigenen Hintergrundicons nutzen kann.
Voraussetzung ist allerdings auch das ich die "oa-icons" schon einsetzen kann.

Ich hänge mal ein Screenshot ran wie mein PopUp mit FTUI 2 aussah
Die Icons in grün da ist das jeweilige Gerät "Aus/off und die Icons in Rot da ist das jeweilige Gerät on/Ein, dann habe ich noch Blaue und gelbe für sogenannten Status
Ich hatte diese so eingebunden in FTUI 2, hier nur das Beispiel für das Wohnzimmer:

Code Auswählen Erweitern

<div class="hbox" style="margin-top:0px;">
<div class="card"><div style="color:crimson; font-size:130%;">WOHNZIMMER</div></div>
<div class="card"><div data-type="switch" data-device="WZ_Schrank" data-get="state" data-set-on="on" data-set-off="off" data-icon="oa-light_cabinet" data-background-icon="fa-square-o" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Schrank & Vitrine</div>
</div>
<div class="card"><div data-type="switch" data-device="WZ_Lampe_TV" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_led_stripe" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>TV Tisch</div>
</div>
<div class="card"><div data-type="switch" data-device="WZ_Stehlampe" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_floor_lamp" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
<div style="margin-top:10px; font-size:100%;">Gruppe<br>Stehlampe</div>
</div>
<div class="card"><div data-type="switch" data-device="WZ_Licht_Weihnachten_Sw" data-set-on="Ein" data-set-off="Aus" data-icon="oa-light_led_stripe" data-states='["Ein","Aus"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
<div style="margin-top:10px; font-size:100%;">Beleuchtung<br>Licht Bogen</div>
</div>
<div class="card"><div data-type="switch" data-device="WZ_Marantz" data-get="state" data-set-on="on" data-set-off="off" data-icon="oa-audio_volume_high" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
<div style="margin-top:10px; font-size:100%;">Marantz<br>NR 1506</div>
</div>
<div class="card"><div data-type="switch" data-device="WZ_TVBildschirm" data-get="state" data-set-on="on" data-set-off="off" data-icon="oa-it_television" data-states='["on","off"]' data-background-icons='["red-box","green-box"]' data-off-color="lightgreen" data-on-color="#DC143C"></div>
<div style="margin-top:10px; font-size:100%;">Hisense<br>TV</div>
</div>
<div class="card"><div style="margin-top:15px; font-size:160%;" data-type="label" data-device="Temperatur_Wohnzimmer" data-get="temperature" data-limits='[-73,19,25]' data-colors='["#6699FF","#00FA9A","#FF0000"]' data-unit=" °C" data-fix="1"></div>
<div style="margin-top:10px; font-size:110%;">Temperatur<br>Wohnzimmer</div>
</div>
<div class="card"><div style="color:crimson; font-size:130%;">WOHNZIMMER</div></div>       
</div>

Im Moment stehe ich da noch auf dem Schlauch ob das überhaupt möglich ist.
Schreenshot ist vom PopUp vorher

[Eisix]

Popup und Oa-icons geht. Du kannst alles mögliche an Icons mit path einbinden oder in den icons Ordner kopieren.

Gruß
Eisix

[moonsorrox]

Popup und Oa-icons geht. Du kannst alles mögliche an Icons mit path einbinden oder in den icons Ordner kopieren.

Gruß
Eisix

mit den Wetter Icons habe ich hinbekommen, vielen Dank nochmal dafür.

Ich denke wenn ich das per css Datei mache, muss ich nicht jedesmal als Pfad machen, oder.
Ich hatte ein Beispiel von setstate gefunden, das sah so aus

Code Auswählen Erweitern

<ftui-icon class="size-2" path="../images/openautomation" name="it_wifi" color="crimson" id="ftui-icon-9" type="svg" rgb=""></ftui-icon>
das sind aber nur die beiden Beispiel Icons drin, die er auch bei github hat

wenn ich jetzt da noch mein Hintergrund Icon und das "oa-icon" und dazu einen Button haben möchte, da stehe ich mometan echt im Wald 
Ich habe heute Abend unzählige Versuche gehabt, ich glaube ich brauch eine Pause ich habe nicht mehr hinbekommen.
Ich habe das an einem Beispiel mit meiner Ladestation probiert... einschalten geht aber nichtmehr ausschalten 

das war mein kläglicher Versuch, er schaltet vom Icon her auch, aber tatsächlich das Gerät nicht.

Code Auswählen Erweitern

<ftui-button [(value)]="Ladestation_Samsung:state" fill="outline" shape="circle" states="on,off" color="primary" size="normal" direction="horizontal" value="off">
<ftui-icon [name]="Ladestation_Samsung:state | map('on:lightbulb-on, off:lightbulb-off')" id="ftui-icon-8" type="svg" path="icons" name="" color="" rgb=""></ftui-icon>
</ftui-button>

[Eisix]

Hallo,

hier mal ein komplexeres Beispiel

Code Auswählen Erweitern


        <ftui-circlemenu direction="top-half">
                <ftui-icon class="size-3"
                        path="../images/openautomation"
                        [name]="Luefter:state | map('auto:vent_ventilation_level_automatic, man:vent_ventilation_level_manual_m, off:power-off')"
                        [color]="Luefter:state  | map('auto:green, man:green, off:green')"
                ></ftui-icon>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter off;set Steuerung.Luefter checkall">
                                <ftui-icon name="power-off" color="green"></ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 1">
                                <ftui-icon class="size-5" color="green">1</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 2">
                                <ftui-icon class="size-5" color="green">2</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 3">
                                <ftui-icon class="size-5" color="green">3</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter man;setreading Luefter stufe 4">
                                <ftui-icon class="size-5" color="green">4</ftui-icon>
                        </ftui-button>
                        <ftui-button class="size-3" shape="circle" color="secondary" fill="solid" (value)="set Luefter auto; set Steuerung.Luefter checkall">
                                <ftui-icon class="size-2"
                                        path="../images/openautomation"
                                        name="vent_ventilation_level_automatic"
                                        color="green"
                                ></ftui-icon>
                        </ftui-button>
        </ftui-circlemenu>
        <ftui-badge
                backgroundcolor="secondary"
                [text]="Luefter:stufe">
        </ftui-badge>


Wenn du die OA Icons in den ftui icons Pfad kopierst geht es auch ohne path. Generell werden manche Icons noch nicht ganz korrekt angezeigt (z.B.:Icon_Fisch) aber da habe ich noch keine Ursache gefunden.

Gruß
Eisix

[Eisix]

Der Befehl den die Lightscen braucht ist ,,set LightSchen scene Licht_gemuetlich. Wenn ich das mit einem Button mache lautet der Befehl ,,set Lightscene Licht_gemuetlich.

Das hier ist aus den Beispielen

Code Auswählen Erweitern


        <ftui-button fill="outline" shape="circle"
          [value]="Sonos_Kueche:transportState | map('PLAYING: play, PAUSED_PLAYBACK|STOPPED: pause')"
          (value)="Sonos_Kueche" states="play, pause">
          <ftui-icon [name]="Sonos_Kueche:transportState  | map('PLAYING: stop, PAUSED_PLAYBACK|STOPPED: play');
              Sonos_Kueche:state | map('play: stop, pause: play')">
          </ftui-icon>
        </ftui-button>


sollte der gleiche Fall wie bei deinen Szenen sein.

Gruß
Eisix

[tomster]

Jetz muss ich mich auch Mal hier reinhängen...
Was ich bislang gesehen habe "jefällt mir" und ist ziemlichvzackig auf meinem Tablet!

[coolice]

Das hier ist aus den Beispielen

Code Auswählen Erweitern


        <ftui-button fill="outline" shape="circle"
          [value]="Sonos_Kueche:transportState | map('PLAYING: play, PAUSED_PLAYBACK|STOPPED: pause')"
          (value)="Sonos_Kueche" states="play, pause">
          <ftui-icon [name]="Sonos_Kueche:transportState  | map('PLAYING: stop, PAUSED_PLAYBACK|STOPPED: play');
              Sonos_Kueche:state | map('play: stop, pause: play')">
          </ftui-icon>
        </ftui-button>


sollte der gleiche Fall wie bei deinen Szenen sein.

Gruß
Eisix

Funktioniert. Danke

[moonsorrox]

Eine Formatierungsfrage, wenn ich ein einem Grid tile mehre Meldungen als Statusmitteilungen habe die ich einblende weil sie "aktiv" oder "on" sind, und es sind andere [hidden] dann teilen sich die aktiven Geräte die Höhe.
Wie erreiche ich das die angezeigten alle nach oben rutschen.? In FTUI 2 funktionierte das mit top-narrow, aber das greift hier nicht.

Als Beispiele mal 5 Reihen untereinander, sind aber viel mehr bei mir

Code Auswählen Erweitern


<ftui-grid-tile>
<ftui-row>[hidden]inhalt1</ftui-row>
<ftui-row>[hidden]inhalt2</ftui-row>
<ftui-row>[hidden]inhalt3</ftui-row>
<ftui-row>[hidden]inhalt4</ftui-row>
<ftui-row>[hidden]inhalt5</ftui-row>
</ftui-grid-tile>


[setstate]

Bzgl. spinner widget
Habe noch etwas gebastelt

Code Auswählen Erweitern


                        <ftui-row shape="round" class="myspinner">
                        <ftui-cell>
                                <ftui-button [value]="Heizung.Status_WZ:TempMan"
                                             (value)="set Heizung.Status_WZ:TempMan {$value-0.5}"
                                fill="">
                                        <ftui-icon class="size-1"
                                                [name]="Heizung.Status_WZ:TempMan | map('.*:minus')"
                                                [color]="Heizung.Status_WZ:TempMan | map('.*:blue')"
                                        ></ftui-icon>
                                </ftui-button>
                        </ftui-cell>
                        <ftui-cell>
                                <ftui-label
                                        [text]="Heizung.Status_WZ:TempMan"
                                        [color]="Heizung.Status_WZ:TempMan | map('5:blue, 20:mygreen, 23:red')"
                                        class="size-4">
                                </ftui-label>
                        </ftui-cell>
                        <ftui-cell>
                                <ftui-button [value]="Heizung.Status_WZ:TempMan"
                                             (value)="set Heizung.Status_WZ:TempMan {$value+0.5}"
                                        fill="">
                                        <ftui-icon class="size-1"
                                                [name]="Heizung.Status_WZ:TempMan | map('.*:plus')"
                                                [color]="Heizung.Status_WZ:TempMan | map('.*:red')"
                                        ></ftui-icon>
                                </ftui-button>
                        </ftui-cell>
                        </ftui-row>


myspinner custom css

Code Auswählen Erweitern


.myspinner {
  background-color: #d1d1e0;
  border-radius: 25px;
  width: 200px;
  height: 50px;
}


Wenn mich jetzt noch einer mit der Funktionalität erleuchtet würde mir das reichen 

Gruß
Eisix

nach einem kleinen Umbau geht es jetzt so:

Code Auswählen Erweitern


      <ftui-row class="myspinner">
        <ftui-cell>
          <ftui-button [value]="dummy2"
                       (value)="add(-0.5) | dummy2"
                       states="$value"
                       fill="">
            <ftui-icon class="size-1"
                       name="minus"
                       color="blue"></ftui-icon>
          </ftui-button>
        </ftui-cell>
        <ftui-cell>
          <ftui-label
                      [text]="dummy2"
                      [color]="dummy2 | map('5:blue, 20:mygreen, 23:red')"
                      class="size-4">
          </ftui-label>
        </ftui-cell>
        <ftui-cell>
          <ftui-button [value]="dummy2"
                       (value)="add(0.5) | dummy2"
                       states="$value"
                       fill="">
            <ftui-icon class="size-1"
                       name="plus"
                       color="red"></ftui-icon>
          </ftui-button>
        </ftui-cell>
      </ftui-row>


Aber das ganze ein eigene Komponente zu packen, werde ich noch tun

[octek0815]

nach einem kleinen Umbau geht es jetzt so:

Code Auswählen Erweitern


      <ftui-row class="myspinner">
        <ftui-cell>
          <ftui-button [value]="dummy2"
                       (value)="add(-0.5) | dummy2"
                       states="$value"
                       fill="">
            <ftui-icon class="size-1"
                       name="minus"
                       color="blue"></ftui-icon>
          </ftui-button>
        </ftui-cell>
        <ftui-cell>
          <ftui-label
                      [text]="dummy2"
                      [color]="dummy2 | map('5:blue, 20:mygreen, 23:red')"
                      class="size-4">
          </ftui-label>
        </ftui-cell>
        <ftui-cell>
          <ftui-button [value]="dummy2"
                       (value)="add(0.5) | dummy2"
                       states="$value"
                       fill="">
            <ftui-icon class="size-1"
                       name="plus"
                       color="red"></ftui-icon>
          </ftui-button>
        </ftui-cell>
      </ftui-row>


Aber das ganze ein eigene Komponente zu packen, werde ich noch tun

@setstate

Besten Dank, dann kann ich nun die Funktionalität nun einbauen...

Grüße
Olli

PS: Gerade umgebaut: Funktioniert perfekt!

[setstate]

Eine Formatierungsfrage, wenn ich ein einem Grid tile mehre Meldungen als Statusmitteilungen habe die ich einblende weil sie "aktiv" oder "on" sind, und es sind andere [hidden] dann teilen sich die aktiven Geräte die Höhe.
Wie erreiche ich das die angezeigten alle nach oben rutschen.? In FTUI 2 funktionierte das mit top-narrow, aber das greift hier nicht.

Als Beispiele mal 5 Reihen untereinander, sind aber viel mehr bei mir

Code Auswählen Erweitern


<ftui-grid-tile>
<ftui-row>[hidden]inhalt1</ftui-row>
<ftui-row>[hidden]inhalt2</ftui-row>
<ftui-row>[hidden]inhalt3</ftui-row>
<ftui-row>[hidden]inhalt4</ftui-row>
<ftui-row>[hidden]inhalt5</ftui-row>
</ftui-grid-tile>


Ich musste noch etwas Kleines ändern, aber grundsätzlich könnte man das so umsetzen:
Man muss die Rows in der Höhe begrenzen, damit man sie zusammenschieben kann

Code Auswählen Erweitern


      <ftui-row height="10%">


und dann die Items im Column Container mit align-items="top" dekorieren.

Code Auswählen Erweitern

<ftui-column align-items="top">

Zusammen beispielhaft ungefähr so:

Code Auswählen Erweitern


    <ftui-grid-tile row="8" col="5" height="10" width="3">
      <ftui-button [(value)]="dummy1">dummy1</ftui-button>
      <ftui-button [(value)]="dummy2">dummy2</ftui-button>
      <ftui-button [(value)]="dummy3">dummy3</ftui-button>
      <ftui-button [(value)]="dummy4">dummy4</ftui-button>
    </ftui-grid-tile>

    <ftui-grid-tile row="8" col="9" height="10" width="3">
      <ftui-column align-items="top">
        <ftui-row [hidden]="dummy1 | map('on:false')" color="warning" height="10%">
          <ftui-label>dummy1</ftui-label>
        </ftui-row>
        <ftui-row [hidden]="dummy2 | map('on:false')" color="danger" height="10%">
          <ftui-label>dummy2</ftui-label>
        </ftui-row>
        <ftui-row [hidden]="dummy3 | map('on:false')" color="ok" height="10%">
          <ftui-label>dummy3</ftui-label>
        </ftui-row>
        <ftui-row [hidden]="dummy4 | map('on:false')" height="10%">
          <ftui-label>dummy4</ftui-label>
        </ftui-row>
      </ftui-column>
    </ftui-grid-tile>


[moonsorrox]

ich weiß nicht ob ich es an der richtigen Stelle eingesetzt habe, warum..?
Ich sage mal solange es genügen Geräte sind werden die nach oben geschoben, aber wenn es dann nur noch 3 oder 1 Geräte sind, die aktiv sind, teilen die sich das gesamte grid wieder auf.
Vorher war das mit top-narrow so das auch nur einer allein ganz oben stand.

Hier mal 3 Beispiele wie ich das gelöst habe, evtl. habe ich es nicht richtig gemacht.?

Code Auswählen Erweitern


<ftui-grid-tile row="11" col="12" height="11" width="9" class="semitransparent3d">
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<ftui-row [hidden]="WegLampe_Sw_01:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="WegLampe_Sw_01:state | map ('on: Beleuchtung Weg vorn & Schuppen')"
[color]="WegLampe_Sw_01:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_wall_1" [color]="WegLampe_Sw_01:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Weg hinten ==== -->
<ftui-row [hidden]="WegLampe_Sw_02:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="WegLampe_Sw_02:state | map ('on: Beleuchtung Weg hinten')"
[color]="WegLampe_Sw_02:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_uplight" [color]="WegLampe_Sw_02:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Garten ==== -->
<ftui-row [hidden]="AU_Garten:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="AU_Garten:state | map ('on: Beleuchtung Garten')"
[color]="AU_Garten:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_uplight" [color]="AU_Garten:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
<!-- ==== Beleuchtung Terrasse ==== -->
<ftui-row [hidden]="NI3_LichtTerrasse:state | map('on: false, off: true')" align-items="top" height="10%">
<ftui-column class="size-2" align-items="left" margin="1" width="90%">
<ftui-label [text]="NI3_LichtTerrasse:state | map ('on: Beleuchtung Terrasse')"
[color]="NI3_LichtTerrasse:state | map('on: white')"></ftui-label>
</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">
<ftui-icon name="light_outdoor" [color]="NI3_LichtTerrasse:state | map('off: white, on: crimson')" path="../images/openautomation"></ftui-icon>
</ftui-column>
</ftui-row>
</ftui-grid-tile>