FTUI version 3

Sailor · 26 Oktober 2021, 20:49:10

Zitat von: setstate am 26 Oktober 2021, 15:38:09
Beim Popup kann man jetzt position="page" setzen.

Danke, Danke!
Funzt perfekt!

Gruß
Sailor

Nachtrag:
Eine Sache ist mir noch aufgefallen. Mit position="page" sind die popups zwar wieder aus den tiles befreit, aber sie sind nicht mehr zentriert in der Mitte sondern teilweise (je nach Groesse) zur Haelfte aus dem Bildschirmrand verschwunden.
Und das obwohl die Parameter "left" und "top" gar nicht gesetzt sind.
Kann das Jemand reproduzieren?

SirMarco · 27 Oktober 2021, 16:42:57

Zitat von: Sailor am 26 Oktober 2021, 20:49:10
Nachtrag:
Eine Sache ist mir noch aufgefallen. Mit position="page" sind die popups zwar wieder aus den tiles befreit, aber sie sind nicht mehr zentriert in der Mitte sondern teilweise (je nach Groesse) zur Haelfte aus dem Bildschirmrand verschwunden.
Und das obwohl die Parameter "left" und "top" gar nicht gesetzt sind.
Kann das Jemand reproduzieren?

Ja das kann ich reproduzieren, habe noch keinen Workaround gefunden.

Grüsse

Erledigt: habe vergessen die position="page" zu setzen
Folgendes ist mir noch aufgefallen:
Wenn sich der Popup Button im unteren Teil der Seite befinden, dann wird das Popup auch im unteren Teil geöffnet und nicht zentriert auf der Page

So funktioniert es bei mir, wenn man "left" anpasst:

Code Auswählen

<ftui-popup id="{{name}}" timeout="0" width="300px" height="200px" position="page" left="15%" shape="round">
    <header>{{name}}</header>
    <ftui-row>
        <ftui-slider [(value)]="{{device}}:pct"></ftui-slider>
    </ftui-row>
</ftui-popup>

Sailor · 27 Oktober 2021, 17:45:05

Hi SirMarco

Zitat von: SirMarco am 27 Oktober 2021, 16:42:57
So funktioniert es bei mir, wenn man "left" anpasst:
Code Auswählen Erweitern
<ftui-popup id="{{name}}" timeout="0" width="300px" height="200px" position="page" left="15%" shape="round">

Darum geht es... Mann muss jedes Popup individuell justieren.
Eigentlich hätte ich erwartet, dass ohne diese left-top - Parameter die Popups wie früher zentriert mittig im Bildschirm sitzen.
Manche Popups sind ohne diese Parameter vollkommen unlesbar, da sie sich bis zu 75% außerhalb des Bildschirms befinden.

Gruß
Sailor

Wolfgang Hochweller · 27 Oktober 2021, 18:27:47

Ich habe ein Label definiert :

Code Auswählen


                <ftui-row>       
                    <ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01)" decimals="1" size="10" class="bold" color="red"></ftui-label>
                </ftui-row>
                <ftui-row>
                    <ftui-label text="Letzte Stunde Verbrauch (kWh)" size="2"  color="white" ></ftui-label>
                </ftui-row>

Das Ergebnis, siehe Bild oben links, die 1.19 .

Ein Problem mit 'decimals' ? Oder bei mir ? Bei den anderen dieser Art sieht es gut aus.

Vielleicht haengt damit auch zusammen, dass Label auch mal voll aus dem Ruder laufen, etwa

statt 1.2 erscheint 1.00000000002 oder aehnliches.

Letzteres kann ich aber nicht kontrolliert erzeugen .

yersinia · 28 Oktober 2021, 07:31:46

Noch habe ich dein Problem nicht ganz verstanden. Meinst du, dass das label dann 1.0000000000000002 anzeigt anstelle von 1.0 bzw 1.1 (es geht nicht aus dem Screenshot hervor)? Dies hätte mit der Gleitkommaberechnung zu tun imho.
Du könntest noch ein round versuchen um das abzufangen.

Code Auswählen

                <ftui-row>       
                    <ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01) | round(2)" decimals="1" size="10" class="bold" color="red"></ftui-label>
                </ftui-row>
                <ftui-row>
                    <ftui-label text="Letzte Stunde Verbrauch (kWh)" size="2"  color="white" ></ftui-label>
                </ftui-row>

PS: super das du doch kleinere Anfragen hier stellst.

Wolfgang Hochweller · 28 Oktober 2021, 08:49:33

Das ist korrekt, es taucht schon mal 1.00000002 oder aehnliches auf.

Besseres Beispiel :

Der Ausgangswert ist 197.

Code Auswählen


<ftui-label [text]="MQTT2_ams:diffVerbrauch" size="10" class="bold" color="red"></ftui-label>

zeigt 197, ok.

Code Auswählen


<ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01)" size="10" class="bold" color="red"></ftui-label>

oder divide(100) zeigt 1.97 , ok

Code Auswählen


<ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01)| round(0) " size="10" class="bold" color="red"></ftui-label>

zeigt 2, ok

Code Auswählen


 <ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01)| round(1) " size="10" class="bold" color="red"></ftui-label>

zeigt 2. Wenn die Zahl bei round die Anzahl der Nachkommastellen ist, ist es falsch. Sonst weiss ich nicht , was die Zahl bei round bedeuten koennte.

Code Auswählen


 <ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01) | round(2) " size="10" class="bold" color="red"></ftui-label>

zeigt 1.97 : falsch, sollte 1.98 sein, falls Zahl bei round = Anzahl der Nachkommastellen.

Code Auswählen


<ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01)" decimals = "1" size="10" class="bold" color="red"></ftui-label>

zeigt 1.97 : falsch

Code Auswählen


<ftui-label [text]="MQTT2_ams:diffVerbrauch | multiply(.01)  | round (2) " decimals = "1" size="10" class="bold" color="red"></ftui-label>

zeigt 1.97 : falsch

Zum Vergleich FTUI :

Code Auswählen


<div class="cell">
                            <div data-type="label" data-device="MQTT2_ams"
                                data-get="diffVerbrauch"
                                data-fix="1" data-factor=".01"
                                data-color="red"
                                data-unit="kWh" class="inline grande bold">
                            </div>
                            <div>Letzte Stunde Verbrauch</div>
                        </div>

zeigt 1.9 : ok

Fazit :

decimals tut gar nichts, es ist egal, welche Zahl ich da angebe..
round hat numerische Probleme.

Wolfgang Hochweller · 28 Oktober 2021, 10:14:12

Code Auswählen

[<ftui-chart-controls units="day, week"></ftui-chart-controls>code]

Sobald in den Controls 'day' dabei ist , wird das sofort aktiviert, alles andere braucht einen Klick, das ist auch ok.

Code Auswählen

<ftui-chart-controls units="week, year"></ftui-chart-controls>

Wenn 'day' nicht dabei ist, steht links unten das Datum und die Tagesansicht ist aktiviert. siehe Bild.
Das ist sicher so nicht gedacht.
Nach einem Klick auf 'week' oder 'year' ist alles ok.

esk · 28 Oktober 2021, 11:42:16

Bin auf der Suche nach einer Spinner componente.

Wie macht man das mit ftui3?

Danke esk

yersinia · 28 Oktober 2021, 11:44:15

Zitat von: Wolfgang Hochweller am 28 Oktober 2021, 08:49:33Das ist korrekt, es taucht schon mal 1.00000002 oder aehnliches auf.

Besseres Beispiel :
[...]
decimals tut gar nichts, es ist egal, welche Zahl ich da angebe..
round hat numerische Probleme.

Kannst du dazu bitte mal beispielhaft die Readingswerte von MQTT2_ams:diffVerbrauch posten? So ist das relativ schwierig nachzuvollziehen.
round(n) müsste mit n die Nachkommastellen sein - das weiß ich allerdings nicht genau. Das kann setstate sicher besser beschreiben.

yersinia · 28 Oktober 2021, 11:47:08

Zitat von: esk am 28 Oktober 2021, 11:42:16Bin auf der Suche nach einer Spinner componente.

Dumme Frage:w as ist ein spinner?

Sowas in der Art?
https://forum.fhem.de/index.php/topic,123084.msg1176152.html#msg1176152
https://forum.fhem.de/index.php/topic,121901.msg1165068.html#msg1165068

tomster · 28 Oktober 2021, 12:24:55

Ich denke, es ist das hier gemeint:
https://wiki.fhem.de/wiki/FTUI_Widget_Spinner

Könnte man mit dem Volume-Slider wohl auch abbilden, oder?

mr_petz · 28 Oktober 2021, 13:39:54

Spinner hin und Spinner her ..
Ein Spinner ist was zum Drehen oder was sich selbst dreht.
Ein Beispiel wäre auch eine Seitenladeanzeige(Lade-Spinner)...

Wolfgang Hochweller · 28 Oktober 2021, 13:44:29

@yersinia :

Zitat
Kannst du dazu bitte mal beispielhaft die Readingswerte von MQTT2_ams:diffVerbrauch posten? So ist das relativ schwierig nachzuvollziehen.
round(n) müsste mit n die Nachkommastellen sein - das weiß ich allerdings nicht genau. Das kann setstate sicher besser beschreiben.

Steht oben im Beispiel : Wert ist 197

Wolfgang Hochweller · 28 Oktober 2021, 14:09:56

ZitatSpinner hin und Spinner her ..
Ein Spinner ist was zum Drehen oder was sich selbst dreht.
Ein Beispiel wäre auch eine Seitenladeanzeige(Lade-Spinner)...

Ich musste erstmal checken, wieso das Spinner-Widget eigentlich Spinner heisst, aber egal.

Ich denke, wenn man sich den Temp-Stepper aus dem Beispiel vornimmt, kann man das loesen

Vielleicht sowas in der Art :

Code Auswählen

    <ftui-grid-tile row="16" col="2" height="2" width="2" shape="round">
        <ftui-row>
        <ftui-button [value]="testcount" (value)=" add(-0.5)| testcount " states="$value"  fill="">
        <ftui-icon size="-2" name="minus"></ftui-icon>
      </ftui-button>
      <ftui-label [text]="testcount"></ftui-label>
      <ftui-button [value]="testcount" (value)="add(0.5) | testcount" states="$value"  fill="">
        <ftui-icon size="-2" name="plus"></ftui-icon>
      </ftui-button>
        </ftui-row>
     </ftui-grid-tile>

Eisix · 28 Oktober 2021, 15:33:40

Hallo,

wenn ihr mit Spinner (attachment) meint, das habe ich hier schon mal gepostet, kann ich aber nochmal machen.

Gruß
Eisix