FTUI version 3

[Eisix]

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

[setstate]

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

Gruß
Eisix

schaue ich mir an, sollte nicht viel sein

[moonsorrox]

@moonsorrox

Hatte die kleinklima Icons eingebunden als nur .svg unterstützt wurde. Sie liegen aber nur als .png vor und ich habe sie in .svg konvertiert. Somit dürfte einfaches kopieren nicht reichen. Also entweder icons auch konvertieren und in den Pfad

./icons/weather/kleinklima/

oder die weather.map.js entsprechend anpassen. Png sollte mittlerweile auch funktionieren.

Gruß
Eisix

Ok, also ich muss sie mir ja erst einmal runterladen und das was ich gefunden habe ist auf der Seite bei kleinklima, aber da sind immer nur die aktuellen des Tages drauf.
Die ich gefunden habe das sind alles png da hast du absolut recht, aber so richtig habe ich noch nicht gefunden wie ich den Pfad eintragen muss..
Aber ich mache jetzt erst mal Pause habe den ganzen Tag gebastelt.. 

[moonsorrox]

was ich irgendwie gar nicht hinbekomme ist so etwas wie es in der Version 2 der "classchanger" gemacht hat.
Eine Frage vorher wie kann ich in meiner reneftui.css Datei einfügen das die oa-Icons verwendet werden können."
Das könnte man ja irgendwo auch für die Zukunft hinterlegen, denn vorher war das möglich, denn die Icons hier sind doch nicht so der Hit, es fehlt mir zuviel.!?

Das heißt:
In einer Spalte ein Text, also das neue Label und in der zweiten Spalte ein Icon und das eben 10 oder mehr untereinander.

dabei ist mir aufgefallen das in dem Fall das zugehörige Icon sehr groß dargestellt wird und der Text davor sehr klein und dadurch ergeben sich Höhenunterschiede welche das gesamte Layout verschiebt. Ich habe mir in dem Fall ein <ftui-grid-tile> gebaut welches eben untereinander eine viel Zahl an devices darstellen kann und eben wenn aktiv das Zeile zu sehen ist ist und wenn inaktiv alles komplett weg ist.
Dann noch dazu, da die Icon SPalte ja recht wenig Platz braucht, kann ich die Breite der Spalte klein halten und dafür die 1.Spalte größer da hier der Text länger sein..
Mit "width" habe ich es nicht geschafft. 

Ich hänge mal den Code Versuch ran

Code Auswählen Erweitern

<ftui-grid-tile row="11" col="12" height="11" class="">
  <ftui-row>

<ftui-column class="size-2" align-items="left" margin="1">
<ftui-label [text]="WegLampe_Sw_01:state | map ('on:Beleuchtung Weg vorn & Schuppen')"
[color]="WegLampe_Sw_01:state | map('on:white')"></ftui-label>
<ftui-label [text]="Uhrzeit:state | map('on:Schlafzimmer Uhr')"</ftui-label>
<ftui-label [text]="BU_4CH:POWER1 | map('on:Büro - LED Leiste Tisch')"</ftui-label>
<!--ftui-label text="4"></ftui-label>
<ftui-label text="5"></ftui-label>
<ftui-label text="6"></ftui-label>
<ftui-label text="7"></ftui-label>
<ftui-label text="8"></ftui-label>
<ftui-label text="9"></ftui-label>
<ftui-label text="10"></ftui-label-->
            </ftui-column>

<ftui-column align-items="right" margin="1">
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<ftui-icon name="home1" [hidden]="WegLampe_Sw_01:state | map('on:false, off:true')"
[color]="WegLampe_Sw_01:state | map('off:white, on:crimson')"></ftui-icon>
<!-- ==== Schlafzimmer Uhr ==== -->
<ftui-icon name="clock-o" [hidden]="Uhrzeit:state | map('on:false, off:true')"
  [color]="Uhrzeit:state | map('off:white, on:crimson')"></ftui-icon>
<!-- ==== Beleuchtung Büro LED Leiste Tisch ==== -->
<ftui-icon name="lightbulb-on" [hidden]="BU_4CH:POWER1 | map('on:false, off:true')"
   [color]="BU_4CH:POWER1 | map('off:white, on:crimson')"></ftui-icon>
<!--ftui-label text="14"></ftui-label>
<ftui-label text="15"></ftui-label>
<ftui-label text="16"></ftui-label>
<ftui-label text="17"></ftui-label>
<ftui-label text="18"></ftui-label>
<ftui-label text="19"></ftui-label>
<ftui-label text="20"></ftui-label-->
</ftui-column>               
 
</ftui-row>
</ftui-grid-tile>

[setstate]

Code Auswählen Erweitern


<ftui-column class="size-2" align-items="left" margin="1" width="90%">

</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">

</ftui-column>


Aber wenn du Icons aus und einblendest und die Texte davor nicht, würde ich beide in eine Row stecken, sonst verschiebt sich alles. Die Spalten werden immer gleichmässig verteilt gefüllt.

[SirMarco]

Hallo zusammen

In meinem Reading habe ich ein "/", das schein mit ftui-icon nicht zu funktionieren:

Code Auswählen Erweitern

<ftui-icon [color]="EG_WOH_Controller_HomeCinemaAudio:input | map('Sat/Cbl: green, .*: dark')" name="arrow-circle-o-right"></ftui-icon>

Geht "/" allgemein nicht bei Javascript als "Wert"? Konnte mir erstmal mit

Code Auswählen Erweitern

map('Sat.*: green,......
helfen


Grüsse

[octek0815]

Hallo zusammen

In meinem Reading habe ich ein "/", das schein mit ftui-icon nicht zu funktionieren:

Code Auswählen Erweitern

<ftui-icon [color]="EG_WOH_Controller_HomeCinemaAudio:input | map('Sat/Cbl: green, .*: dark')" name="arrow-circle-o-right"></ftui-icon>

Geht "/" allgemein nicht bei Javascript als "Wert"? Konnte mir erstmal mit

Code Auswählen Erweitern

map('Sat.*: green,......
helfen


Grüsse

Moin,

wenn du dieses "`" darum machst sollte es klappen...

Code Auswählen Erweitern


map('`Sat/Cbl`: green, .*: dark')"


Grüße
Olli

[moonsorrox]

Code Auswählen Erweitern


<ftui-column class="size-2" align-items="left" margin="1" width="90%">

</ftui-column>
<ftui-column align-items="right" margin="1" width="10%">

</ftui-column>


Aber wenn du Icons aus und einblendest und die Texte davor nicht, würde ich beide in eine Row stecken, sonst verschiebt sich alles. Die Spalten werden immer gleichmässig verteilt gefüllt.

das kam evtl. nicht so rüber, aber doch ich möchte immer das Icon und auch den Text ausblenden, ich brauche ja keine Anzeige wenn nichts an oder aktiviert ist, also soll schon Text und Icon weg.. bei Status "off" oder auch manchmal "OFF" oder "closed" je nach dem was gerade im state oder bei Sonoff auch "POWER1" usw.

EDIT:// hier mal ein Beispiel (sieh Screenshot
ich habe 3 Geräte, davon ist das 1. und 3. Gerät jeweils ein und in der Mitte ist es aus. der Code sieht folegndermassen aus, ich verstehe es nicht warum solch ein durcheinander angezeigt wird. Das home1 Zeichen ist nur zur Probe drin, dass gehört aber zum ersten Status Wegbeleuchtung
Was habe ich falsch gemacht.?
Ich bekomme sie auch nicht an den oberen Rand, dann würde es wohl auch besser aussehen.
Später werden es ja mehr Geräte, aber ich möchte erst mal begreifen warum, es so angezeigt wird.

Code Auswählen Erweitern

<ftui-grid-tile row="11" col="12" height="11" width="9" class="semitransparent3d">
  <ftui-row>

<ftui-column class="size-2 top-narrow" 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-label [text]="Uhrzeit:state | map('on: Schlafzimmer Uhr')"
[color]="Uhrzeit:state | map('on: white')"></ftui-label>

<ftui-label [text]="BU_4CH:POWER1 | map('on: Büro - LED Leiste Tisch')"
[color]="BU_4CH:POWER1 | map('on: white')"></ftui-label>

<!--ftui-label text="4"></ftui-label>
<ftui-label text="5"></ftui-label>
<ftui-label text="6"></ftui-label>
<ftui-label text="7"></ftui-label>
<ftui-label text="8"></ftui-label>
<ftui-label text="9"></ftui-label>
<ftui-label text="10"></ftui-label-->
            </ftui-column>

<ftui-column class="top-narrow" align-items="center" width="10%">
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<ftui-icon name="home1" [hidden]="WegLampe_Sw_01:state | map('on: false, off: true')"
[color]="WegLampe_Sw_01:state | map('off: white, on: crimson')"></ftui-icon>
<!-- ==== Schlafzimmer Uhr ==== -->
<ftui-icon name="clock-o" [hidden]="Uhrzeit:state | map('on: false, off: true')"
  [color]="Uhrzeit:state | map('off: white, on: crimson')"></ftui-icon>
 
<!-- ==== Beleuchtung Büro LED Leiste Tisch ==== -->
<ftui-icon name="lightbulb-on" [hidden]="BU_4CH:POWER1 | map('on: false, off: true')"
   [color]="BU_4CH:POWER1 | map('off: white, on: crimson')"></ftui-icon>

<!--ftui-label text="14"></ftui-label>
<ftui-label text="15"></ftui-label>
<ftui-label text="16"></ftui-label>
<ftui-label text="17"></ftui-label>
<ftui-label text="18"></ftui-label>
<ftui-label text="19"></ftui-label>
<ftui-label text="20"></ftui-label-->
</ftui-column>
 
</ftui-row>
</ftui-grid-tile>

[octek0815]

das kam evtl. nicht so rüber, aber doch ich möchte immer das Icon und auch den Text ausblenden, ich brauche ja keine Anzeige wenn nichts an oder aktiviert ist, also soll schon Text und Icon weg.. bei Status "off" oder auch manchmal "OFF" oder "closed" je nach dem was gerade im state oder bei Sonoff auch "POWER1" usw.

EDIT:// hier mal ein Beispiel (sieh Screenshot
ich habe 3 Geräte, davon ist das 1. und 3. Gerät jeweils ein und in der Mitte ist es aus. der Code sieht folegndermassen aus, ich verstehe es nicht warum solch ein durcheinander angezeigt wird. Das home1 Zeichen ist nur zur Probe drin, dass gehört aber zum ersten Status Wegbeleuchtung
Was habe ich falsch gemacht.?
Ich bekomme sie auch nicht an den oberen Rand, dann würde es wohl auch besser aussehen.
Später werden es ja mehr Geräte, aber ich möchte erst mal begreifen warum, es so angezeigt wird.

Code Auswählen Erweitern

<ftui-grid-tile row="11" col="12" height="11" width="9" class="semitransparent3d">
  <ftui-row>

<ftui-column class="size-2 top-narrow" 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-label [text]="Uhrzeit:state | map('on: Schlafzimmer Uhr')"
[color]="Uhrzeit:state | map('on: white')"></ftui-label>

<ftui-label [text]="BU_4CH:POWER1 | map('on: Büro - LED Leiste Tisch')"
[color]="BU_4CH:POWER1 | map('on: white')"></ftui-label>

<!--ftui-label text="4"></ftui-label>
<ftui-label text="5"></ftui-label>
<ftui-label text="6"></ftui-label>
<ftui-label text="7"></ftui-label>
<ftui-label text="8"></ftui-label>
<ftui-label text="9"></ftui-label>
<ftui-label text="10"></ftui-label-->
            </ftui-column>

<ftui-column class="top-narrow" align-items="center" width="10%">
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<ftui-icon name="home1" [hidden]="WegLampe_Sw_01:state | map('on: false, off: true')"
[color]="WegLampe_Sw_01:state | map('off: white, on: crimson')"></ftui-icon>
<!-- ==== Schlafzimmer Uhr ==== -->
<ftui-icon name="clock-o" [hidden]="Uhrzeit:state | map('on: false, off: true')"
  [color]="Uhrzeit:state | map('off: white, on: crimson')"></ftui-icon>
 
<!-- ==== Beleuchtung Büro LED Leiste Tisch ==== -->
<ftui-icon name="lightbulb-on" [hidden]="BU_4CH:POWER1 | map('on: false, off: true')"
   [color]="BU_4CH:POWER1 | map('off: white, on: crimson')"></ftui-icon>

<!--ftui-label text="14"></ftui-label>
<ftui-label text="15"></ftui-label>
<ftui-label text="16"></ftui-label>
<ftui-label text="17"></ftui-label>
<ftui-label text="18"></ftui-label>
<ftui-label text="19"></ftui-label>
<ftui-label text="20"></ftui-label-->
</ftui-column>
 
</ftui-row>
</ftui-grid-tile>

Ich würde das so machen...

Code Auswählen Erweitern


<ftui-grid-tile row="11" col="12" height="11" width="9" class="semitransparent3d">
  <ftui-row [hidden]="WegLampe_Sw_01:state | map('on: false, off: true')">
<ftui-column class="size-2 top-narrow" 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 class="top-narrow" align-items="center" width="10%">
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<ftui-icon name="home1" [color]="WegLampe_Sw_01:state | map('off: white, on: crimson')"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="Uhrzeit:state | map('on: false, off: true')">
<ftui-column class="size-2 top-narrow" align-items="left" margin="1" width="90%">
<ftui-label [text]="Uhrzeit:state | map('on: Schlafzimmer Uhr')"
[color]="Uhrzeit:state | map('on: white')"></ftui-label>
            </ftui-column>
<ftui-column class="top-narrow" align-items="center" width="10%">
<!-- ==== Schlafzimmer Uhr ==== -->
<ftui-icon name="clock-o" [color]="Uhrzeit:state | map('off: white, on: crimson')"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="BU_4CH:POWER1 | map('on: false, off: true')">
<ftui-column class="size-2 top-narrow" align-items="left" margin="1" width="90%">
<ftui-label [text]="BU_4CH:POWER1 | map('on: Büro - LED Leiste Tisch')"
[color]="BU_4CH:POWER1 | map('on: white')"></ftui-label>
            </ftui-column>
<ftui-column class="top-narrow" align-items="center" width="10%">
<!-- ==== Beleuchtung Büro LED Leiste Tisch ==== -->
<ftui-icon name="lightbulb-on" [color]="BU_4CH:POWER1 | map('off: white, on: crimson')"></ftui-icon>
</ftui-column>
</ftui-row>
</ftui-grid-tile>


[moonsorrox]

Ich würde das so machen...

Code Auswählen Erweitern


<ftui-grid-tile row="11" col="12" height="11" width="9" class="semitransparent3d">
  <ftui-row [hidden]="WegLampe_Sw_01:state | map('on: false, off: true')">
<ftui-column class="size-2 top-narrow" 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 class="top-narrow" align-items="center" width="10%">
<!-- ==== Beleuchtung Weg vorn & Schuppen ==== -->
<ftui-icon name="home1" [color]="WegLampe_Sw_01:state | map('off: white, on: crimson')"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="Uhrzeit:state | map('on: false, off: true')">
<ftui-column class="size-2 top-narrow" align-items="left" margin="1" width="90%">
<ftui-label [text]="Uhrzeit:state | map('on: Schlafzimmer Uhr')"
[color]="Uhrzeit:state | map('on: white')"></ftui-label>
            </ftui-column>
<ftui-column class="top-narrow" align-items="center" width="10%">
<!-- ==== Schlafzimmer Uhr ==== -->
<ftui-icon name="clock-o" [color]="Uhrzeit:state | map('off: white, on: crimson')"></ftui-icon>
</ftui-column>
</ftui-row>
<ftui-row [hidden]="BU_4CH:POWER1 | map('on: false, off: true')">
<ftui-column class="size-2 top-narrow" align-items="left" margin="1" width="90%">
<ftui-label [text]="BU_4CH:POWER1 | map('on: Büro - LED Leiste Tisch')"
[color]="BU_4CH:POWER1 | map('on: white')"></ftui-label>
            </ftui-column>
<ftui-column class="top-narrow" align-items="center" width="10%">
<!-- ==== Beleuchtung Büro LED Leiste Tisch ==== -->
<ftui-icon name="lightbulb-on" [color]="BU_4CH:POWER1 | map('off: white, on: crimson')"></ftui-icon>
</ftui-column>
</ftui-row>
</ftui-grid-tile>


ja super Olli, dass funktioniert hervorragend, manchmal sieht man echt nicht durch 
Das einzige Problem ist eben noch das die Anzeige nicht direkt oben ist... aber ich denke das ist eine Formatierungssache, da kann @setstate etwas zu sagen... denn top-narrow greift hier nicht... hatte ich zum testen drin, aber muss wohl jetzt anders heißen...

[coolice]

Hallo, könnte mir einer zeigen wie ich meine IP Kamera einbinde. In FTUI hatte ich das so gelöst.

Code Auswählen Erweitern

<li data-row="2" data-col="1" data-sizey="3" data-sizex="5"> <!-- data-row="Zeile" data-col="Spalte" data-sizex="Breite der Box" data-sizey="Tiefe der Box"  -->
  <header>TOR</header>
<div data-type="image"
       data-url="http://IP:PORT/cgi-bin/hi3510/mjpegstream.cgi?-chn=11&-usr=BENUTZERt&-pwd=PASSWORT"
       data-size="100%"
       class="nocache"></div>
</li>

Danke und weihnachtliche Grüße

[coolice]

Habs schon. Danke

Code Auswählen Erweitern

<ftui-grid-tile row="3" col="2" height="4" width="6" shape="round">
            <ftui-image
                 base="http://IP:PORT/cgi-bin/hi3510/mjpegstream.cgi?-chn=11&-usr=BENUTZER&-pwd=PASSWORT"
                 height="250"
                 width="400"
                 nocache="false">
               </ftui-image>
            </ftui-grid-tile>

[moonsorrox]

Habs schon. Danke

schreibs gern hier rein, ist für alle späteren Suchenden von Vorteil...

[grossmaggul]

Ich weiß nicht ob das überhaupt hier rein passt, denn wenn ich mir den Code von coolice ansehe, hat das mit FTUI3 nicht so allzuviel zu tun, oder?

[coolice]

Ich weiß nicht ob das überhaupt hier rein passt, denn wenn ich mir den Code von coolice ansehe, hat das mit FTUI3 nicht so allzuviel zu tun, oder?

War auch mein Code aus der Vorgängerversion. Wollte diese in FTUI3 umsetzen.