FTUI version 3

[coolice]

@setstate

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

Grüße
Olli

PS: Gerade umgebaut: Funktioniert perfekt!

Hey Olli, würdest Du mir das Icon ganz oben rechts zur Verfügung stellen?

[moonsorrox]

Ich hatte das Icon als svg. Schon im Internet gefunden, aber bei mir wird es nicht angezeigt... war ja in der Unwetterzentrale im FTUI 2 enthalten.

[coolice]

Frohe Weihnachten, kann mir jemand sagen, wie ich rechts den Spinner und den Button weiter auseinander bekomme ?

Code Auswählen Erweitern

<ftui-grid-tile row="9" col="12" height="3" width="8" shape="round">
  <ftui-label>TEMPERATUR</ftui-label>
  <ftui-row>
    <ftui-column>
      <table width="100%">
        <tr>
          <td width="40%">
            <ftui-cell>
              <ftui-knob [(value)]="OG.wz.TH_Climate:measured-temp"
                         [color]="OG.wz.TH_Climate:measured-temp | map('18:blue,22:green,23:warning,25:danger')"
                         width="150" height="100" offset-y="15" type="arc" min="18" max="26" unit="°C" readonly has-value-text>
                       </ftui-knob>
                       <ftui-label>IST TEMP</ftui-label>
                     </ftui-cell>
                   </td>
                   <td width="20%">
                     <ftui-cell>
                       <ftui-knob [(value)]="OG.wz.TH_Climate:desired-temp"
                                  [color]="OG.wz.TH_Climate:desired-temp | map('18:blue,22:green,23:warning,25:danger')"
                                  width="150" height="100" offset-y="15" type="arc" min="18" max="26" unit="°C" readonly has-value-text>
                                </ftui-knob>
                                <ftui-label>SOLL TEMP</ftui-label>
                              </ftui-cell>
                            </ftui-column>
                          </td>
                          <td width="60%">
                            <ftui-column>
                            <ftui-row class="myspinner">
                              <ftui-cell>
                                <ftui-button [value]="OG.wz.TH_Climate:desired-temp"
                                             (value)="add(-0.5) | OG.wz.TH_Climate:desired-temp"
                                             states="$value"
                                             fill="">
                                             <ftui-icon class="size-1"
                                             name="minus"
                                             color="blue"></ftui-icon>
                                           </ftui-button>
                                         </ftui-cell>
                                        <ftui-cell>
                                          <ftui-label [text]="OG.wz.TH_Climate:desired-temp"
                                                      [color]="OG.wz.TH_Climate:desired-temp | map('5:blue, 20:mygreen, 23:red')"
                                                      class="size-6">
                                                    </ftui-label>
                                                  </ftui-cell>
                                                  <ftui-cell>
                                                    <ftui-button [value]="OG.wz.TH_Climate:desired-temp"
                                                                 (value)="add(0.5) | OG.wz.TH_Climate:desired-temp"
                                                                 states="$value"
                                                                 fill="">
                                                                 <ftui-icon class="size-1"
                                                                            name="plus"
                                                                            color="red"></ftui-icon>
                                                                          </ftui-button>
                                                                        </ftui-cell>
                                                                      </ftui-row>
                                                                      <ftui-button color="dark"
                                                                                   (value)="OG.wz.TH_Climate:controlMode" states="manual, auto">
                                                                                   <ftui-icon class="size-2" [name]="OG.wz.TH_Climate:controlMode  | map('manual: sani_heating_manual, auto: sani_heating_automatic')">
                                                                                </ftui-icon>
                                                                              </ftui-button>
                                                                            </ftui-column>
                                                                            </td>
                                                                          </tr>
                                                                        </table>
                                                                      </ftui-row>


</ftui-grid-tile>


[setstate]

<table> sollte man nur für richtige Tabellen benutzen, für Messwertlisten zum Beispiel. Aber niemals für das Seitenlayout.

Dir brauchst nur eine ftui-row und darin 3 ftui-columns. Die letzte column bekommt dann ein width="40%", um breiter zu sein.

[coolice]

<table> sollte man nur für richtige Tabellen benutzen, für Messwertlisten zum Beispiel. Aber niemals für das Seitenlayout.

Dir brauchst nur eine ftui-row und darin 3 ftui-columns. Die letzte column bekommt dann ein width="40%", um breiter zu sein.

Ah ok. Wusste ich nicht. Hab es so geändert

Code Auswählen Erweitern

<ftui-grid-tile row="9" col="12" height="3" width="8" shape="round">
    <ftui-label>TEMPERATUR</ftui-label>
    <ftui-row>
      <ftui-column>
        <ftui-knob [(value)]="OG.wz.TH_Climate:measured-temp"
                   [color]="OG.wz.TH_Climate:measured-temp | map('18:blue,22:green,23:warning,25:danger')"
                    width="150" height="100" offset-y="15" type="arc" min="18" max="26" unit="°C" readonly has-value-text>
                  </ftui-knob>
                  <ftui-label>IST TEMP</ftui-label>
                </ftui-column>
                <ftui-column>
                  <ftui-knob [(value)]="OG.wz.TH_Climate:desired-temp"
                              [color]="OG.wz.TH_Climate:desired-temp | map('18:blue,22:green,23:warning,25:danger')"
                              width="150" height="100" offset-y="15" type="arc" min="18" max="26" unit="°C" readonly has-value-text>
                            </ftui-knob>
                            <ftui-label>SOLL TEMP</ftui-label>
                          </ftui-column>
      <ftui-column class="myspinner" width="40%">
        <ftui-button [value]="OG.wz.TH_Climate:desired-temp"
                      (value)="add(-0.5) | OG.wz.TH_Climate:desired-temp"
                      states="$value" fill="">
                      <ftui-icon class="size-1"
                      name="minus" color="blue"></ftui-icon>
                    </ftui-button>
                    <ftui-label [text]="OG.wz.TH_Climate:desired-temp"
                                [color]="OG.wz.TH_Climate:desired-temp | map('5:blue, 20:mygreen, 23:red')"
                                class="size-6">
                              </ftui-label>
                              <ftui-button [value]="OG.wz.TH_Climate:desired-temp"
                                            (value)="add(0.5) | OG.wz.TH_Climate:desired-temp"
                                            states="$value" fill="">
                                            <ftui-icon class="size-1"
                                            name="plus" color="red"></ftui-icon>
                                          </ftui-button>
        <ftui-button color="dark"
        (value)="OG.wz.TH_Climate:controlMode" states="manual, auto">
        <ftui-icon class="size-2" [name]="OG.wz.TH_Climate:controlMode  | map('manual: sani_heating_manual, auto: sani_heating_automatic')">
        </ftui-icon>
      </ftui-button>
    </ftui-column>
</ftui-row>
</ftui-grid-tile> Verrätst Du mir wie ich das Spinner waagerecht bekomme, spricht plus und minus recht und links. Temp mittig.

[grossmaggul]

Verrätst Du mir wie ich das Spinner waagerecht bekomme, spricht plus und minus recht und links. Temp mittig.

Hat setstate doch oben geschrieben.
"Dir brauchst nur eine ftui-row und darin 3 ftui-columns. Die letzte column bekommt dann ein width="40%", um breiter zu sein."

Ich glaube, so langsam ist es an der Zeit den Thread mal aufzusplitten, in Userfragen und Entwicklerprobleme, wird sonst ein wenig unübersichtlich.

[coolice]

Hat setstate doch oben geschrieben.
"Dir brauchst nur eine ftui-row und darin 3 ftui-columns. Die letzte column bekommt dann ein width="40%", um breiter zu sein."

Ich glaube, so langsam ist es an der Zeit den Thread mal aufzusplitten, in Userfragen und Entwicklerprobleme, wird sonst ein wenig unübersichtlich.

Hab ich

[setstate]

Ein ftui-column positioniert alle Childelemente untereinander. Bei nur einen Child ist das easy: genau in der Mitte. Bei der Spinner-Imitation (eine eigenes Element dafür werde ich noch bauen) sind dann auch alle Unterteile untereinander. Man müsste diese wieder einen ftui-row Container einbetten, damit sie wieder nebeneinander sind.

[grossmaggul]

Hab ich

Die Umsetzung kann ich aber bei Deinem Code nicht entdecken.

[Eisix]

Hallo,

hoffe Ihr hattet alle erholsame Tage. Habe heute mit Colorpicker experimentiert, dabei bin ich auf ein Problem mit der Hex-Werte Übergabe gestoßen.
Das Widget erzeugt

Code Auswählen Erweitern


set Strip rgb #ffffff


der Espled Controller erwartet

Code Auswählen Erweitern


set Strip rgb ffffff


Also ohne #

Wie habt Ihr das gelöst?

Gruß
Eisix

[LuGu]

Hallo zusammen,
ich habe Probleme mit dem ftui-button. Man kann damit Schalten und auch den Status sehen. Immer wenn die Seite neu geladen wurde ist der erste Klick "set xyz on" und der nächste Klick "set xyz off". Das Ganze ist unabhängig vom Status. D.h. wenn von einer anderen Stelle ON geschaltet wurde ist der erste Klick auf den Button trotzdem ein "set xyz on".
Wie habt ihr das gelöst, das beim Satus ON immer ein "set xyz off" kommt und beim Status OFF immer ein "set xyz of" kommt.

Code Auswählen Erweitern


<ftui-button shape="circle" size="large"
            [(value)]="Gast-WLAN"
            [fill]="Gast-WLAN | map('off: outline, on: solid')">
   <ftui-icon name="wifi1"></ftui-icon>
</ftui-button>


Man kann das aus meiner Sicht Fehlverhalten auch auf der https://knowthelist.github.io/ftui/examples/button.html nachvollziehen.
Wenn man einem Button ftuitest auf on setzt und dann einen anderen Button benutzt, der mit ftuitest verknüpft ist kommt trotzdem ein "set ftuitest on" obwohl ftuitest ja schon on ist.

In der Hoffnung auf hilfreiche Tipps
Gruß LuGu

[setstate]

Oh, ja. Da ist beim letzten "+1" Update ein bug rein gekommen. Muss ich checken, was man dagegen machen kann.

Done! Ist jetzt gefixed

[moonsorrox]

Ich glaube, so langsam ist es an der Zeit den Thread mal aufzusplitten, in Userfragen und Entwicklerprobleme, wird sonst ein wenig unübersichtlich.

würde ich auch begrüßen..!
wir lassen den Thread hier zum schreiben und @setstate macht einen neuen in dem nur er schreiben kann, wenn es etwas neues zur Entwicklung von FTUI 3 gibt...!

[setstate]

Hallo,

hoffe Ihr hattet alle erholsame Tage. Habe heute mit Colorpicker experimentiert, dabei bin ich auf ein Problem mit der Hex-Werte Übergabe gestoßen.
Das Widget erzeugt

Code Auswählen Erweitern


set Strip rgb #ffffff



So wie bei den Examples gemacht funktioniert es nicht?

Code Auswählen Erweitern


(hex)="replace('#','') | HUEDevice6:rgb"

der Espled Controller erwartet

Code Auswählen Erweitern


set Strip rgb ffffff


Also ohne #

Wie habt Ihr das gelöst?

Gruß
Eisix

[octek0815]

Moin,

kann man bei den Charts die Schriftgröße ändern?

Grüße
Olli