FTUI version 3

[Adimarantis]

Die Lösung ist zwar irgendwo abgeschrieben, aber klappt gut.
Da ich zwei Tonnen abbilden muss, mit ftui-content in extra Datei

Code: [Auswählen]

<ftui-grid-tile row="1" col="4" height="3" width="3">
  <header>Tonnen</header>
    <ftui-row>
<ftui-content file="abfall.html" Reading="Papier" Farbe="my-green" Icon="trash"></ftui-content>
  <ftui-content file="abfall.html" Reading="Restmuell" Farbe="gray" Icon="trash"></ftui-content>
</ftui-row>
      </ftui-grid-tile>

[mkriegl]

Danke für den Tipp mit ftui-badge. Genau das habe ich gesucht. Zur ersten Frage aber:

- Warum hüpft die Tonne auch beim Reading 11, ich bin davon ausgegangen, dass ich diesen Wert mit `.*` ausschließe

[class-name]="myAbfall:Papiertonne | map('`0|1`:hop,`.*`:')"

[mr_petz]

Schau hier. Mit step ist es besser:
https://forum.fhem.de/index.php/topic,117545.msg1246296.html#msg1246296

LG

[Adimarantis]

Farbproblem mit ftui-meter:

Ich habe bei ftui-meter das Problem, dass der Balken manchmal grau in grau dargestellt wird. Man kann also die Größe des Balkens schon erahnen - gezeichnet wird er - aber eben nicht mit der entsprechenden Farbe:

Code: [Auswählen]

<ftui-meter [value]="HM_Sen_Wa_Od:level" [color]="HM_Sen_Wa_Od:level | step('80:primary, 60:warning, 30:alert')" min="0" max="100" >
</ftui-meter>
Das passiert unabhängig vom Wert. Schaut erst gut aus, dann neu laden und plötzlich grau. Mach ich was falsch oder ist das ein Bug?

[mr_petz]

Wenn du kein min und max mitgiebst, dann scheint es zu funktionieren:

Code: [Auswählen]

<ftui-meter [value]="HM_Sen_Wa_Od:level" [color]="HM_Sen_Wa_Od:level | step('30:alert, 60:warning, 80:primary')">
</ftui-meter>

Standard ist im meter min=0 und max=100

LG

Edit:
Man darf kein min="0" angeben sonst geht es nicht.
Mit min="-1" geht es....
also min>0 oder min<0 angeben...

[Adimarantis]

Danke. Scheint zu klappen. Dann aber wohl trotzdem ein Bug...
Sollte ich das auf github melden?

[mr_petz]

Kannst du machen, aber @setstate liest hier eigentlich immer mit....

LG

[setstate]

ich bin schon seit Tagen auf der Suche nach den Gründen für das komische Verhalten beim ftui-meter. Besonders bei mir auf einem Android Tablet. Ich dachte schon, das verursachte die css Animation. Irgendwas passt aber immer nicht nicht.

[mkriegl]

Weiß jemand an was es liegen kann, dass die Icons als "undefined" angegeben werden, wenn man den Link mit user:password öffnet? Ich starte mein Display im Kiosk Modus und dem Link:

http://user:password@192.168.xxx.xxx:xxxx/fhem/ftui/index.html

Angezeigt werden nur die PNGs beim Wetter, nicht aber die internen oder über "path" verwendeten openautomation SVGs
Öffne ich die Seite normal muss ich im Popup Benutzer und Passwort angeben und die Icons werden wie üblich angezeigt.

Oft starte ich das Display jetzt nicht neu, dass ich die Zugangsdaten angeben muss, hat mich aber doch verwundert

[mr_petz]

http://user:pass@ wird von Browsern nicht mehr unterstützt.
Vielleicht hilft dir das:
BasicAuthExpiry
https://mayach.de/fhem-eingeloggt-bleiben-basicauthexpiry/

LG

[Medel]

Wie schafft man es die Beschriftung eines unsichtbaren Buttons unten anzuzeigen, also näher zu den zugehörigen Steuerelementen. Die Beschriftung ist der Schalter um die Automatik Ein- oder Auszuschalten.
Im Anhang ein Bildauszug. Hier mein Code aus dem Template:

Code: [Auswählen]

<ftui-cell height="12%">
  <ftui-row align-item="bottom">
    <ftui-button fill=""
      (value)="{{device}}:auto toggle"
      [color]="{{device}}:Automatik | map('on: green, off: red')">{{name}}
    </ftui-button>
  </ftui-row>
  <ftui-row>
    <ftui-button (value)="{{device}}" states="auf" direction="vertical" color="current" fill="none">
      <ftui-icon name="angle-up" class="size-50%" height="90%"></ftui-icon>
    </ftui-button>
    <ftui-icon [name]="{{device}}:Status | map('0%:window-shutter-open, 50%:window-shutter-open, 100%:window-shutter')"
      [color]="{{device}}:Status | step('0: green, 50: yellow, 100: green')">
    </ftui-icon>
    <ftui-button (value)="{{device}}" states="zu" direction="vertical" color="current" fill="none">
      <ftui-icon name="angle-down" class="size-50%" height="90%"></ftui-icon>
    </ftui-button>
 </ftui-row>
</ftui-cell>


[mr_petz]

ich bin schon seit Tagen auf der Suche nach den Gründen für das komische Verhalten beim ftui-meter. Besonders bei mir auf einem Android Tablet. Ich dachte schon, das verursachte die css Animation. Irgendwas passt aber immer nicht nicht.

Ich habe auch mal bissl gespielt. Das liegt wohl doch an der 0.4s in der transition. Nimmt man nur die 0.4s raus oder schreibt stattdessen 0s geht es.
Oder wird [color] zu spät (0.4s) übergeben??? Es reicht ja schon in der Browserconsole das aus- und anschalten der mask und dann wird auch der color gesetzt... und es scheint ja nur bei gesetzten min="0" sich so zu verhalten...
Gibt es alternativen für das linear transitition?

LG

[setstate]

@Medel: Das geht aktuell nicht. Button kann aktuell nur "size", da wird aber die Schrift auch mit kleiner. Ich müsste dem Button noch ein "height" Attribute spendieren, dann würde das gehen. ich schaue mal ...

Code: [Auswählen]

<ftui-button fill="" margin="0 0 -1em 0"
oder in pixel

Code: [Auswählen]

<ftui-button fill="" margin="0 0 -10px 0"

[mr_petz]

@setstate

Wenn du in der updateBar() das als Zwischenlösung angibst:

Code: [Auswählen]

this.bar.style[direction] = value===0 ? (value + 0.1) + '%': value + '%';
dann geht es sofort.
Es scheint vielleicht transition mit width=0% im bar ein Problem zu haben wenn value beim initialisieren den Wert 0 hat???
Und wie gesagt, mit min="-1" geht es auch sofort (ohne der Änderung)...

LG

Edit:
Oder es liegt an deiner scale() Berechnung...
Wenn ich da so definiere:

Code: [Auswählen]

const value = scale(limitedValue, this.min, this.max, 0.1, 100);
geht es auch...

Wenn du magst kann ich dir den meter zu transform:translate umbauen.. Bsp:
https://codepen.io/mcraiganthony/pen/waaeWO
Hier funktioniert es sofort auch bei wert 0...

OK habs mal gemacht (unsortiert..):

Code: [Auswählen]

.progress-bar {
  border-radius: var(--meter-border-radius, 1em);
  overflow: hidden;
  transform: translateZ(0);
  height: 1em;
  transition: all 400ms ease-out;
  background: var(--meter-bar-color, var(--color-base, #20639b));
  position:relative;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
hier brauchst du eigentlich auch kein ::before mehr...

Achso.. und allen noch einen schönen 1.Advent

[Adimarantis]

Ebenfalls einen schönen 1. Advent.

Ich hätte da noch ein Thema mit ftui-knob.
Das nutze ich um den aktuellen Stromverbrauch des Hauses zu visualisieren. Damit da jetzt eine einigermassen sinnvolle Darstellung erfolgt, wollte ich "max" auf 3000 Watt begrenzen.
Nur leider steht dann bei einem größeren Verbrauch (wenn halt mal kurzfristig mehr zusammenkommt) eben auch genau 3000 als Zahl dort. Ich habe bei mir schon Peaks von 10000 Watt gehabt (Waschmaschinen+Spülmaschine+Ofen+Herdplatten - kommt vor...). Bei max=10000 wird aber die graphische Darstellung sinnfrei.

Ich würde es jetzt passender finden, wenn die Zahl immer die Realität wiederspiegeln würde, auch wenn die graphische Darstellung am Maximum angekommen ist.
Meinungen?