FTUI version 3

[mr_petz]

Meinst du so?:

Code Auswählen Erweitern


<ftui-label [text]="Wetter_ProPlanta:fc0_temp06" class="size-7 thin"><span class="size-1" slot="unit">°C</span></ftui-label>

oder:

Code Auswählen Erweitern


<ftui-label [text]="Wetter_ProPlanta:fc0_temp06" class="size-7 thin"><span class="size-1" slot="end">°C</span></ftui-label>


lg

Edit Code angepasst...

[setstate]

Hallo zusammen,

auch auf die Gefahr hin dass ich nerve... noch eine Frage

gibt es auch innerhalb eines beliebigen Grid Elements (Row, Column, Cell,..) eine Möglichkeit mit Variablen zu arbeiten, die dann in den eingeschlossenen Elementen genutzt werden können ?
(Ausnahme: content, dort funktioniert das bereits prima) ?

also zB

Code Auswählen Erweitern

<ftui-cell device="meindevice" ....>
  <ftui-label [text]="{meindevice}...>

Vielen Dank und Grüße
Ralph.

Nein, das geht nicht.

[Dracolein]

Gibts eine Möglichkeit das "Knob"-Element als reines Anzeigeelement zu nutzen in Form eines runden Kuchens (gibts ja schon in den Beispielen --> 360°), womit man den Wert eines Readings zwischen 0% und 100% darstellen kann?
(Nachteil am Knob: ich müsste die Gesamtgröße reduzieren können, was damit leider nicht zu klappen scheint)

Oder gibts eventuell eine gänzliche Alternative?

Beispiel als Bild im Anhang

[vaulie]

Das geht jetzt. Das Icon/Text muss innerhalb eines Images liegen:

Code Auswählen Erweitern


<ftui-image>
   <ftui-icon left="60%" top="50%"></ftui-icon>
</ftui-image>
[ ..]

Hi, vielen Dank für die direkte Integration und überhaupt der Version 3 insgesamt!
Das macht den Code bestimmt übersichtlicher, ich hatte das nämlich vorher zB. so gelöst:

Code Auswählen Erweitern


<ftui-icon [name]="..." [color]="..."
     style="position:absolute; top:60px; left:560px;" >
</ftui-icon>
Den Floorplan habe ich als Hintergrundbild zum grid-tile definiert:

Code Auswählen Erweitern


<ftui-grid-tile row="1" col="6" height="2" width="8" shape="round"
style="background:#333333 url('../images/Zentrale/DG.png') no-repeat; background-position:120px -60px; background-size:280px;>[\code]

Das Ergebnis sieht bei mir so aus wie im Anhang ;-)
Vorher habe ich immer nur FLOORPLAN genutzt und FTUI2 übersprungen, aber das Circle-Menu hat mich zum Umstieg bewogen und ich habe es noch nicht bereut :)

[setstate]

Sowas kann man aktuell mit dem ftui-knob realisieren

Code Auswählen Erweitern


      <ftui-knob [(value)]="dummy1" type="scale" start-angle="0" end-angle="359" ticks="60" stroke-width="10" width="120" color="danger" value-size="2em" unit="%" has-value-text></ftui-knob>


[Dracolein]

Sowas kann man aktuell mit dem ftui-knob realisieren

Code Auswählen Erweitern


      <ftui-knob [(value)]="dummy1" type="scale" start-angle="0" end-angle="359" ticks="60" stroke-width="10" width="120" color="danger" value-size="2em" unit="%" has-value-text></ftui-knob>


Diverse Parameter haben mir weitergeholfen, danke. Jetzt scheitere ich an der perfekten Ausrichtung, anbei Code & Foto (hatte alles durchprobiert mit/ohne cell / Column / width / height...)
Geht da noch etwas? Es wirkt, als sei das Element im unsichtbaren Bereich größer...

Code Auswählen Erweitern


<!-- Energie -->
<ftui-grid-tile row="4" col="9" height="5" width="4">
   <header>PV-Anlage / Strombedarf</header>
    <ftui-row height="30px">
         <ftui-icon path="fa-svg/solid" name="solar-panel" size="-1" color="orange"></ftui-icon>
         <ftui-label [text]="SMATripower6:SPOT_PACTOT | fix(0)"  class="size-4"
                     [color]="SMATripower6:SPOT_PACTOT | step('1: green, 1500: orange, 3500: yellow')">
                     <span class="size-0" slot="unit">W</span></ftui-label>
         <ftui-label>Autarkie:</ftui-label>
    </ftui-row>
    <ftui-row height="40px">
        <ftui-icon path="../images/openautomation" name="control_arrow_down_right" size="-2" color="red"></ftui-icon>
        <ftui-label [text]="HomeManager:SMAEM3011845853_Bezug_Wirkleistung | fix(0)" class="size-4"
                     [color]="HomeManager:SMAEM3011845853_Bezug_Wirkleistung | step('1: light, 1500: orange, 3500: red')">
                     <span class="size-0" slot="unit">W</span></ftui-label>
        <ftui-knob [value]="PVVorschau:Current_AutarkyRate | part(1)" start-angle="-90" end-angle="269" width="50" color="green" stroke-width="6"></ftui-knob>
    </ftui-row>
    <ftui-row height="30px">
         <ftui-icon path="../images/openautomation" name="control_arrow_up_right" size="-2" color="green"></ftui-icon>
         <ftui-label [text]="HomeManager:SMAEM3011845853_Einspeisung_Wirkleistung | fix(0)" class="size-4"
                     [color]="HomeManager:SMAEM3011845853_Einspeisung_Wirkleistung | step('1: green, 500: green, 1000: green')">
                     <span class="size-0" slot="unit">W</span></ftui-label>
         <ftui-label>Eigenverbr.:</ftui-label>
     </ftui-row>   
     <ftui-row height="40px">
         <ftui-icon path="fa-svg/solid" name="home" size="-1" color="light"></ftui-icon>
         <ftui-label [text]="Gesamtverbrauch:state | fix(0)" class="size-4"
                     [color]="Gesamtverbrauch:state | step('1: light, 500: light, 1000: light')">
                     <span class="size-0" slot="unit">W</span></ftui-label>
         <ftui-knob [value]="PVVorschau:Current_SelfConsumptionRate | part(1)" start-angle="-90" end-angle="269" width="50" color="green" stroke-width="6"></ftui-knob>
      </ftui-row>     

     <ftui-chart height="120px" width="100%" popup-target="pvleistung">
         <ftui-chart-data log="Log_PVLeistung" spec="4:SMATripower6.SPOT_PACTOT"
             fill background-color="#ffcc0050" color="#ffcc00" point-radius="0"></ftui-chart-data> 
         <ftui-chart-data log="Log_PVLeistung" spec="4:HomeManager.SMAEM3011845853_Einspeisung_Wirkleistung"
             fill background-color="#00cc3350" color="#00cc33" point-radius="0"></ftui-chart-data>
     </ftui-chart>
</ftui-grid-tile>


[setstate]

du musst den offset-y verändern. Der liegt default bei offset-y="20", damit die Standard-Nachuntenoffen-Halbkreise mittig wirken. Wenn man einen Vollkreis macht, sollte man offset-y="0" setzen. Das ist in den Knob-Examples auch zu sehen.

[Sailor]

Hi Mr Petz

@Sailor
Ich habe auch mal versucht das nachzustellen.
Image in Image geht zur Zeit bei mir nur so wie hier im Beispiel:

Brillant! Danke!

Gruß
    Sailor

[setstate]

Image in image sollte jetzt auch wir Icon funktionieren

[Sailor]

Moin setstate

Image in image sollte jetzt auch wir Icon funktionieren

Klappt fast...

Folgender Code

Code Auswählen Erweitern


<ftui-image src    = "./images/GroundPlan.png"
height = "100%"
top    = "5%"
left   = "5%">

   <ftui-image left="45%" top="34%" width="10%" height="08%" [src]="GR_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`,  off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
   <ftui-image left="10%" top="12%" width="10%" height="08%" [src]="BR_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`,  off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
   <ftui-image left="48%" top="17%" width="10%" height="08%" [src]="CE_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`,  off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
   <ftui-image left="48%" top="06%" width="10%" height="08%" [src]="CW_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`,  off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
   <ftui-image left="40%" top="49%" width="10%" height="08%" [src]="CH_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`,  off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
   <ftui-image left="77%" top="57%" width="10%" height="08%" [src]="CR_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`,  off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
   <ftui-image left="28%" top="12%" width="10%" height="08%" [src]="HW_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`,  off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
   <ftui-image left="12%" top="36%" width="10%" height="08%" [src]="TR_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`,  off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
   <ftui-image left="11%" top="52%" width="10%" height="08%" [src]="TR_SmokeDetector_Indicator | map('on:`./images/icoSmokeDetectorOn.gif`,  off:`./images/icoSmokeDetectorOff.gif`, lowBatt:`./images/icoSmokeDetectorLowBatt.gif`')"></ftui-image>
</ftui-image>


Sorgt fuer folgendes Bild (Siehe Anhang.

Mann kann erkennen, dass der Rauchmelder von links nach rechts immer kleiner wird. 

Gruß
    Sailor

[Dracolein]

Frage zur Performanceoptimierung, da meine index.html inzwischen fast die 2.000 Zeilen sprengt und die Ladezeiten am Raspi wieder deutlich länger geworden sind (wobei nach dem Laden immerhin alles sehr performant läuft!), würde es helfen, wenn ich diverse Codeschnipsel in externe html-Seiten mittels <ftui-content file="dingsbums.html"></ftui-content> auslagere?
Falls ja, gehe ich davon aus, dass diese externe html-Datei ausschließlich und 1:1 den ausgeschnittenen Codeschnipsel enthalten darf, und nichts anderes, richtig?

Danke für Eure Meinung.

[Sailor]

Moin Draco

Frage zur Performanceoptimierung, da meine index.html inzwischen fast die 2.000 Zeilen sprengt und die Ladezeiten am Raspi wieder deutlich länger geworden sind (wobei nach dem Laden immerhin alles sehr performant läuft!), würde es helfen, wenn ich diverse Codeschnipsel in externe html-Seiten mittels <ftui-content file="dingsbums.html"></ftui-content> auslagere?
Falls ja, gehe ich davon aus, dass diese externe html-Datei ausschließlich und 1:1 den ausgeschnittenen Codeschnipsel enthalten darf, und nichts anderes, richtig?
Danke für Eure Meinung.

Aus Gründen der Übersichtlichkeit habe ich ganz intensiv Gebrauch von <ftui-content gemacht.
Die Performance verändert sich meiner Erfahrung nach nicht. Weder zum Positiven noch zum Negativen.

Allerdings hat die Verwendung der <ftui-content - Dateien einen kleinen Nachteil während der Entwicklungsphase:
Während bei einer reinen index.html - Geschichte die F5 - Taste des Browsers reicht um alles neu zu laden, muss man bei der Implementierung von <ftui-content - Verweisen vorher den gesamten Browser Cache leeren, da diese Seiten sonst aus dem Cache geholt werden und noch den alten Stand haben.

Dennoch bin ich von der Verwendung der <ftui-content - Verweise überzeugt.

Wenn du es gaaaanz formell machen willst (wie ich) dann kopierst du vor jeder html - Datei den Kommentar - Kopf mit den Copyright - Bestimmungen aus der index.html.

Gruß
    Sailor

[Dracolein]

Wie läuft das technisch im Hintergrund dann ab? Wird der Inhalt der html-Seiten mit ausgelagertem Content auch sofort beim Laden der index.html mitgeladen, oder erst bei Aufruf des Elements?

[h3llsp4wn]

@setstate:
Habe im segmentbutton das Problem beim Binding, dass er erst nach einem Klick/einer Aktion auf der Seite den korrekten Index bzw. Treffer findet. Es wird zwar beim onConnected das update getriggert, aber zu dem Zeitpunkt ist this.value noch leer. Erst nach der Aktion ist der Wert dann gefüllt und die Segmente "springen" an die richtige Stelle zurück? Das ist natürlich etwas doof, wenn man sich auf den Homestatus verlassen möchte 



Cheers,

h3ll

[kafi]

Hallo Zuammen,

ich versuche mich gerade im Umbau von V2 auf V3.
Aktuell scheitere ich bei Anzeigen für Readings aus Geräten, sei es "Meter" oder "Knob".
Was mache ich falsch?

Code Auswählen Erweitern

<ftui-grid-tile row="7" col="10" height="4" width="7">
       
  <ftui-meter [value]="Heizung:ENERGY_Power" min="0" max="1000"> </ftui-meter>
  <ftui-label [text]="Heizung:ENERGY_Power" size="2"></ftui-label>
   
   
    <ftui-knob [value]="Heizung:ENERGY_Power"></ftui-knob>

Das Meter schießt - mit Range bis 1000 - über das Tile hinaus, obwohl der Wert bei 335 liegt.
Der Knob bringt gar nichts zur Anzeige.