FTUI version 3

[setstate]

Das stimmt, aber ich nutze zum Navigieren fast nur Icons und dann klebt das > direkt neben dem Icon und sieht  etwas unschön aus.

Ich könnte ja noch ein arrow="false" einbauen. Dann kann man steuern.

[OdfFhem]

@torte

Eine Reihe von Beispielen für ago bzw. till stehen in examples/label.html

Eine von mir gern verwendete Variante sieht so aus:

Code Auswählen Erweitern


<ftui-label [text]="device:READING:time | toDate() | ago() | timeFormat('[ dd+hh:mm:ss ]')"></ftui-label>


[Peter68]

Ich könnte ja noch ein arrow="false" einbauen. Dann kann man steuern.

Das wäre genial !!! Vielen vielen Dank

LG Peter

[SirMarco]

Hallo zusammen

Weiss grad nicht weiter, irgendwie habe ich das noch nicht ganz verstanden. Wie kann ich die Breite einer <ftui-column> steuern?
Ist der Text von ersten Label zu lang, wird es zweizeilig, obwohl genügend Platz vorhanden ist.

Code Auswählen Erweitern


<ftui-row>
<ftui-column width="250px">
    <ftui-label class="align-left">{{name}}</ftui-label>
    <ftui-label class="align-left" [text]="{{device}}:state" [color]="{{device}}:state | map('on: green, dim.*: green, .*: red')"></ftui-label>
</ftui-column>
<ftui-column>
    <ftui-label></ftui-label>
</ftui-column>
<ftui-column>
   
</ftui-column>
<ftui-column>
    <ftui-button class="align-right" shape="circle"
    [value]="{{device}} | map('on|dim.*: on, off|0: off')"
    (value)="{{device}}"
    [fill]="{{device}}:state | map('off: outline, unreachable: outline, dim.*: solid, on: solid')">
    <ftui-icon name="lightbulb"></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>


Grüsse

[torte]

@OdfFhem

Danke!! hab irgendwie Tomaten auf den Augen hatte .time statt :time  so gehts.
Bin mir nicht sicher aber bei den Examples/label.html -> ago geht keins.

Code Auswählen Erweitern

<ftui-label [text]="ftuitest:dateTime4ago"></ftui-label>
Die sind alle mit dateTime4ago ? Aber egalo!

Bei FTUI2 gabs in dem Zusammenhang mit (zb.)Ago data-refresh="xx" um nach xx Sekunden neu zu berechnen gibt es sowas auch schon?

Grüße
Torte

[setstate]

Hallo zusammen

Weiss grad nicht weiter, irgendwie habe ich das noch nicht ganz verstanden. Wie kann ich die Breite einer <ftui-column> steuern?
Ist der Text von ersten Label zu lang, wird es zweizeilig, obwohl genügend Platz vorhanden ist.

Code Auswählen Erweitern


<ftui-row>
<ftui-column width="250px">
    <ftui-label class="align-left">{{name}}</ftui-label>
    <ftui-label class="align-left" [text]="{{device}}:state" [color]="{{device}}:state | map('on: green, dim.*: green, .*: red')"></ftui-label>
</ftui-column>
<ftui-column>
    <ftui-label></ftui-label>
</ftui-column>
<ftui-column>
   
</ftui-column>
<ftui-column>
    <ftui-button class="align-right" shape="circle"
    [value]="{{device}} | map('on|dim.*: on, off|0: off')"
    (value)="{{device}}"
    [fill]="{{device}}:state | map('off: outline, unreachable: outline, dim.*: solid, on: solid')">
    <ftui-icon name="lightbulb"></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>


Grüsse

Das ist mir noch gar nicht aufgefallen, dass das nicht geht ...

ist jetzt gefixed.

[moonsorrox]

Formatierungsfrage zu zwei Icons und einem Knob, ich bekomme es nicht hin wenn ich eine <row> habe mit 3 column das diese alle in der Mitte zentriert sind der knob sitz immer tiefer, evtl. könnte ich mit einem margin-top arbeiten, aber vlt. habe ich etwas übersehen.
siehe Screenshot code hänge ich ran.. Farben sind nur zur Anschauung da drin damit ich es genau sehe

Code Auswählen Erweitern

<!-- PopUp - Modus Markise - START -->
<ftui-popup id="popup-modus_markise" timeout="40" width="400px" height="150px" shape="round">
<header class="size-2">=== Modus Markise & Temperatur ===</header>
<ftui-row height="5%"><ftui-label class="size-2" color="white"></ftui-label></ftui-row>

<ftui-row width="60%" height="">
<ftui-column width="30%">
<ftui-button fill="clear" (value)="du_Modus_Markise" states="FHEM"
  [color]="du_Modus_Markise:state | map('FHEM:MediumSpringGreen')">
<ftui-icon class="size-2" path="../images/openautomation"
[name]="du_Modus_Markise:state | map('FHEM:fts_sunblind, .*:fts_sunblind')"
[color]="du_Modus_Markise:state | map('FHEM:MediumSpringGreen, .*:white')">
</ftui-icon>
</ftui-button>
<ftui-label class="size-0" color="white">Fhem</ftui-label>
</ftui-column>
<ftui-column width="30%" color="green">
<ftui-button fill="clear" (value)="du_Modus_Markise" states="Aus"
[color]="du_Modus_Markise:state | map('Aus:yellow')">
<ftui-icon class="size-2" path="../images/openautomation"
[name]="du_Modus_Markise:state | map('Aus:time_manual_mode, .*:time_manual_mode')"
[color]="du_Modus_Markise:state | map('Aus:yellow, .*:white')">
</ftui-icon>
</ftui-button>
<ftui-label class="size-0" color="white">Aus</ftui-label>
</ftui-column>

<ftui-column width="40%" color="dark">
<ftui-knob [(value)]="du_Temperatur_Markise" has-arc="2" type="scale" has-value-text="" value="5" min="17" max="30" offset-y="20" stroke-width="11" debounce="200" value-size="1.2em" unit-size="1.1em" has-scale="5" has-needle=""
   [color]="du_Temperatur_Markise | map('17:lightgreen, 22:crimson')" unit="°C" start-angle="-210" end-angle="30" height="100" width="100">
</ftui-knob>

<ftui-label class="size-0" color="white">Temperatur</ftui-label>
</ftui-column>
</ftui-row>
</ftui-popup>
<!-- PopUp - Modus Markise - ENDE -->

[OdfFhem]

Bei FTUI2 gabs in dem Zusammenhang mit (zb.)Ago data-refresh="xx" um nach xx Sekunden neu zu berechnen gibt es sowas auch schon?

@setstate

Dieses Feature hatte ich ja auch schon mal angemerkt. Ich habe mittlerweile ein wenig experimentiert und würde dieses Problem lösen können - momentan leider festverdrahtet. Ich weiss (noch) nicht, wie man in einer Komponente an die benötigte ReadingId herankommt? Mir ist bislang die notwendige Funktion bekannt, aber sowohl DEVICE als auch READING vollkommen unbekannt ...

Gibt es dafür einen gangbaren, allgemeinen Weg ?

[moonsorrox]

ich habe mir das jetzt mal mit margin-top ein wenig hin gewurschtelt, aber evtl. fehlt ja da tatsächlich ne Anpassung...

[setstate]

so vielleicht

column: align-items="top"
knob: offset-y="10" height="80"

Code Auswählen Erweitern


      <ftui-column width="40%" color="dark" align-items="top">
        <ftui-knob style="border: 1px solid red;" [(value)]="du_Temperatur_Markise" has-arc="2" type="scale" has-value-text="" value="5" min="17" max="30" offset-y="10" height="80" stroke-width="11" debounce="200" value-size="1.2em" unit-size="1.1em" has-scale="5" has-needle=""
               [color]="du_Temperatur_Markise | map('17:lightgreen, 22:crimson')" unit="°C" start-angle="-210" end-angle="30" height="100" width="100">
        </ftui-knob>
       
        <ftui-label style="border: 1px solid red;" class="size-0" color="white">Temperatur</ftui-label>
      </ftui-column>


[grossmaggul]

Ja, so ein knob ist ein widerspenstiges Ding, aber mit offset-y bekommt man ihn einigermaßen gebändigt.
Apropos knob, schön fände ich, wenn man in der Mitte beliebige Werte anzeigen lassen könnte.

[moonsorrox]

so vielleicht

column: align-items="top"
knob: offset-y="10" height="80"

das werde ich mir morgen auf jeden Fall mal in Ruhe anschauen, ich habe es nur kurz eingebaut und es sieht sehr gut aus... aber ich möchte auch verstehen was da umgesetzt wurde da ich einige Parameter von Knob noch gar nicht kenne.

Danke setstate

[setstate]

@setstate

Dieses Feature hatte ich ja auch schon mal angemerkt. Ich habe mittlerweile ein wenig experimentiert und würde dieses Problem lösen können - momentan leider festverdrahtet. Ich weiss (noch) nicht, wie man in einer Komponente an die benötigte ReadingId herankommt? Mir ist bislang die notwendige Funktion bekannt, aber sowohl DEVICE als auch READING vollkommen unbekannt ...

Gibt es dafür einen gangbaren, allgemeinen Weg ?

ja, das ist echt nicht sehr einfach.
Man muss die ReadingId zum Attribut aus den Bindings raussuchen und dann die alten Daten des Readings nochmal publizieren.
Läuft bei mir schon. Mache ich noch schick und lade es hoch.

Edit: ist jetzt drin: interval="x" x in Sekunden

Code Auswählen Erweitern


    <ftui-grid-tile row="4" col="1" height="1" width="1">
      <header>AUTO REFRESH</header>
      <ftui-label
          [text]="AussenTemp:temperature | toInt()"
          unit="°C">
      </ftui-label>
      <ftui-label
          [text]="AussenTemp:temperature:time | toDate() | ago() | timeFormat('mm:ss')"
          [color]="AussenTemp:temperature:time | toDate() | ago() | timeFormat('%MMMMMM') | map('0: blue, 4: warning, 5: alert')"
          unit="&hairsp;min"
          interval="10">
      </ftui-label>
    </ftui-grid-tile>


[octek0815]

ja, über style geht das.

https://www.w3schools.com/css/tryit.asp?filename=trycss_dim_height_percent

Ich könnte ja versuchen, den Wert height des ftui-image auf den style anzuwenden, anstatt auf das height des img.

@setstate

Hast Du hier schonmal nachschauen können ob das umsetzbar ist?

[moonsorrox]

Hallo setstate ich habe heute mal das neuste Update eingespielt und nun hat es mir ein wenig die Struktur zuerhauen, evtl. muss ich etwas anpassen oder es sind andere Fehler.
vielleicht habe ich Fehler gemacht beim erstellen..!!! aber es hat bis heute morgen funktioniert. ich weiß jetzt nicht wo ich ansetzen muss
Ich beschreibe es mal so, ich hatte bis gestern die ganzen popups ausgelagert in der Form

Code Auswählen Erweitern

<ftui-tab-view id="View3">

<!-- PopUp - Modus & Zeiten Wohnzimmer - ausgelagert -->
<ftui-content file="content-popup-rollladen_wz.html"></ftui-content>

<!-- PopUp - Modus & Zeiten Schlafzimmer - ausgelagert -->
<ftui-content file="content-popup-rollladen_sz.html"></ftui-content>

<!-- PopUp - Modus & Zeiten Gästezimmer - ausgelagert -->
<ftui-content file="content-popup-rollladen_ga.html"></ftui-content>

<!-- PopUp - Modus & Zeiten Büro - ausgelagert -->
<ftui-content file="content-popup-rollladen_bu.html"></ftui-content>

<!-- PopUp - Modus & Zeiten Markise - ausgelagert -->
<ftui-content file="content-popup-markise.html"></ftui-content>

</ftui-tab-view>

Dei Popups selber hat es auch komplett zerhauen, vllt muss ich was ändern ich stelle mal ein Popup stellvertretend für alle hier ein. (screenshot
Die Zeiten in dem Popup bitte nicht beachten da habe ich noch keine Zuordnung zu Fhem, aber die Modusumstellungen für Fhem, Beschattung und Aus haben funktioniert, aber es hat mir das gesamte Layout nach oben und unten auseinander gezogen über die Popup Begrenzung hinaus und der Header ist komplett weg..

Code Auswählen Erweitern

<!-- PopUp - Modus & Zeiten Schlafzimmer - START -->
<ftui-popup id="popup-modus_sz" timeout="40" width="500px" height="230px" shape="round">
<header class="size-2">=== Rollladen Modus & Zeiten Schlafzimmer ===</header>
<ftui-row height="5%"><ftui-label class="size-2" color="white"></ftui-label></ftui-row>

<ftui-row width="60%" height="40%">
<ftui-column align-items="top" width="33%">
<ftui-button fill="clear" (value)="du_RolloSZmodus" states="FHEM"
  [color]="du_RolloSZmodus:state | map('FHEM:MediumSpringGreen')">
<ftui-icon class="size-1" path="../images/openautomation"
[name]="du_RolloSZmodus:state | map('FHEM:fts_shutter_automatic, .*:fts_shutter_automatic')"
[color]="du_RolloSZmodus:state | map('FHEM:MediumSpringGreen, .*:white')">
</ftui-icon>
</ftui-button>
<ftui-label class="size-0" color="white">Fhem</ftui-label>
</ftui-column>
<ftui-column align-items="top" width="33%">
<ftui-button fill="clear" (value)="du_RolloSZmodus" states="Beschattung"
[color]="du_RolloSZmodus:state | map('Beschattung:royalblue1')">
<ftui-icon class="size-1" path="../images/openautomation"
[name]="du_RolloSZmodus:state | map('Beschattung:fts_shutter_down, .*:fts_shutter_down')"
[color]="du_RolloSZmodus:state | map('Beschattung:royalblue1, .*:white')">
</ftui-icon>
</ftui-button>
<ftui-label class="size-0" color="white">Beschattung</ftui-label>
</ftui-column>
<ftui-column align-items="top" width="33%">
<ftui-button fill="clear" (value)="du_RolloSZmodus" states="Aus"
[color]="du_RolloSZmodus:state | map('Aus:yellow')">
<ftui-icon class="size-1" path="../images/openautomation"
[name]="du_RolloSZmodus:state | map('Aus:fts_shutter_manual, .*:fts_shutter_manual')"
[color]="du_RolloSZmodus:state | map('Aus:yellow, .*:white')">
</ftui-icon>
</ftui-button>
<ftui-label class="size-0" color="white">Aus</ftui-label>
</ftui-column>
</ftui-row>

<ftui-column width="80%" height="25%">
<ftui-row color="darkblue" shape="round1">
<ftui-column width="40%">
<ftui-row>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white"
[value]="du_RolloZeitSZ_hoch:Stunde"
(value)="add(1) | du_RolloZeitSZ_hoch:Stunde" states="$value">
<ftui-icon color="royalblue1" name="chevron-up"></ftui-icon>
</ftui-button>
<ftui-label class="size-2" color="white" [text]="du_RolloZeitSZ_hoch:Stunde"></ftui-label>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white"
[value]="du_RolloZeitSZ_hoch:Stunde"
(value)="add(-1) | du_RolloZeitSZ_hoch:Stunde" states="$value">
<ftui-icon color="crimson" name="chevron-down"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>

<ftui-column width="40%">
<ftui-row>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white"
[value]="du_RolloZeitSZ_hoch:Minute"
(value)="add(5) | du_RolloZeitSZ_hoch:Minute" states="$value">
<ftui-icon color="royalblue1" name="chevron-up"></ftui-icon>
</ftui-button>
<ftui-label class="size-2" color="white" [text]="du_RolloZeitSZ_hoch:Minute"></ftui-label>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white"
[value]="du_RolloZeitSZ_hoch:Minute"
(value)="add(-5) | du_RolloZeitSZ_hoch:Minute" states="$value">
<ftui-icon color="crimson" name="chevron-down"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>

<ftui-row>
<ftui-label class="size-2" color="MediumSpringGreen">Öffnen - WochenTag</ftui-label>
</ftui-row>
</ftui-column>

<ftui-row height="10%"><ftui-label class="size-2" color="white"></ftui-label></ftui-row>

<ftui-column width="80%" height="25%">
<ftui-row color="darkblue">
<ftui-column width="40%">
<ftui-row>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white"
[value]="du_RolloZeitSZ_hoch_WoE:setreading"
(value)=""setreading:Stunde {$value-1}">
<ftui-icon color="royalblue1" name="chevron-up"></ftui-icon>
</ftui-button>
<ftui-label class="size-2" color="royalblue1" [text]="du_RolloZeitSZ_hoch_WoE:Stunde"></ftui-label>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white" (value)="set du_RolloZeitSZ_hoch_WoE ">
<ftui-icon color="crimson" name="chevron-down"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
<ftui-column width="40%">
<ftui-row>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white" (value)="set du_RolloZeitSZ_hoch_WoE Minute">
<ftui-icon color="royalblue1" name="chevron-up"></ftui-icon>
</ftui-button>
<ftui-label [text]="du_RolloZeitSZ_hoch_WoE:Minute"></ftui-label>
<ftui-button class="size-0" style="margin-right:0.25em;" shape="round" fill="outline" color="white" (value)="set du_RolloZeitSZ_hoch_WoE ">
<ftui-icon color="crimson" name="chevron-down"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-label class="size-2" color="MediumSpringGreen">Öffnen - WochenEnde</ftui-label>
</ftui-row>
</ftui-column>

<ftui-row height="5%"><ftui-label class="size-2" color="white"></ftui-label></ftui-row>
</ftui-popup>
<!-- PopUp - Modus & Zeiten Schlafzimmer - ENDE -->