FTUI version 3

[blenni]

Ich bin gerade dabei, bei mir über ein iFrame die Laderegelung von evcc einzubinden.

Code Auswählen Erweitern

            <ftui-tab-view id="View6">
                <ftui-grid-tile row="1" col="1" height="6" width="4" shape="round">
                    <ftui-grid-header>evcc</ftui-grid-header>
                    <iframe src="http://xxx" style="overflow:hidden; border:0; width:190%; height:400%; transform:scale(0.59); transform-origin:top;" scrolling="no"></iframe>
                </ftui-grid-tile>
            </ftui-tab-view>
Allerdings wird der Frame nicht in der vollen Höhe dargestellt und abgeschnitten, egal wie ich die Höhe angebe.
Wenn ich die Grid-Tile Höhe vergrößere, dann seh ich auch mehr von evcc.

width:190% und transform:scale(0.59) nutze ich, um die Darstellung runterzuskallieren, da es mir sonst zu groß dargestellt wird.

Kann mir jemand einen Tipp geben, wie ich die volle Höhe des Grid-Tile für das iFrame ausnutzen kann?


EDIT: Ein negatives margin-bottom hilft

[XXL-Wing]

Hallo zusammen,

ich kämpfe sdeit geraumer Zeit mit der Breite der Spalten und dem Umbruch von Labels darin.
Vor allem bei der Wettervorhersage gibt es einen langen Text der echt nervt... (siehe Screenshot).

Der Umbruch funktioniert trotz gesetzter Spaltenbreite irgendwie nicht.
Code und Screenshot anbei.

Jemand eine Idee? Danke für eure Vorschläge.

lG
Mike

[juemuc]

Hallo Mike,

ich habe es wie folgt definiert:

Code Auswählen Erweitern

<!--          [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | format('eeee - DD.MM.YYYY')" color="white" class="bold" margin="-1"> -->
    <ftui-label
         [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | t=>(t.toLocaleDateString()===(new Date()).toLocaleDateString())?'Heute':ftuiHelper.dateFormat(t,'eeee - DD.MM.YYYY')" color="white" class="bold" margin="0.2">
    </ftui-label>
    <ftui-row height="25%">
      <ftui-column width="33%">
        <ftui-label
              text="morgens" size="2">
        </ftui-label>
        <ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" left="5px" style="position:relative;"
              [condition]="WetterProplanta:{{VHS_NR}}_weatherMorningIcon">
        </ftui-weather>       
        <ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp06 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')"
              [text]="WetterProplanta:{{VHS_NR}}_temp06" unit="°C">
        </ftui-label>
     </ftui-column>
     <ftui-column width="33%">
        <ftui-label
              text="Mittags" size="2">
        </ftui-label>
        <ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" left="5px" style="position:relative;"
              [condition]="WetterProplanta:{{VHS_NR}}_weatherDayIcon">
        </ftui-weather>
        <ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp12 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')"
              [text]="WetterProplanta:{{VHS_NR}}_temp12" unit="°C">
        </ftui-label>
     </ftui-column>   
     <ftui-column width="33%">
       <ftui-label
            text="Abends" size="2">
       </ftui-label>
       <ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" left="5px" style="position:relative;"
            [condition]="WetterProplanta:{{VHS_NR}}_weatherEveningIcon">
       </ftui-weather>
       <ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp18 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')"
            [text]="WetterProplanta:{{VHS_NR}}_temp18" unit="°C">
       </ftui-label>
     </ftui-column>
   </ftui-row>
   <ftui-row height="10%">
     <ftui-column height="90%" width="33%">
       <ftui-label scroll padding="1" height="5em"
            [text]="WetterProplanta:{{VHS_NR}}_weatherMorning">
       </ftui-label>
     </ftui-column>
     <ftui-column height="90%" width="33%">
       <ftui-label scroll padding="1" height="5em"
            [text]="WetterProplanta:{{VHS_NR}}_weatherDay">
       </ftui-label>
     </ftui-column>
     <ftui-column height="90%" width="33%">
       <ftui-label scroll padding="1" height="5em"
            [text]="WetterProplanta:{{VHS_NR}}_weatherEvening">
       </ftui-label>
     </ftui-column>
   </ftui-row>
   <ftui-row height="15%" margin="0.2">
     <ftui-column width="16%" >
       <ftui-label text-align="left" left="30px" style="position:relative;" margin="-0.5"
            text="Max:">
       </ftui-label>
       <ftui-label text-align="left" left="30px" style="position:relative;"
            text="Min:">
       </ftui-label>
     </ftui-column>
     <ftui-column width="10%">
       <ftui-label text-align="right" left="-35px" style="position:relative;" margin="-0.5"
            [text]="WetterProplanta:{{VHS_NR}}_tempMax" unit="°C">
       </ftui-label>
       <ftui-label text-align="right" left="-35px" style="position:relative;"
            [text]="WetterProplanta:{{VHS_NR}}_tempMin" unit="°C">
       </ftui-label>
     </ftui-column>
     <ftui-column width="16%">
       <ftui-label text-align="left" left="25px" style="position:relative;" margin="-0.5"
            text="Regen:">
       </ftui-label>
       <ftui-label text-align="left" left="25px" style="position:relative;"
            text="Sonne:">
       </ftui-label>
     </ftui-column>
     <ftui-column width="10%">
       <ftui-label text-align="right" left="-20px" style="position:relative;" margin="-0.5"
            [text]="WetterProplanta:{{VHS_NR}}_chOfRainDay" unit="%">
       </ftui-label>
       <ftui-label text-align="right" left="-20px" style="position:relative;"
            [text]="WetterProplanta:{{VHS_NR}}_sun" unit="%">
       </ftui-label>
     </ftui-column>
     <ftui-column width="16%">
       <ftui-label left="30px" style="position:relative;"
            text="UV:">
       </ftui-label>
     </ftui-column>
     <ftui-column width="10%">
       <ftui-label [color]="WetterProplanta:{{VHS_NR}}_uv | step('0:green, 3:yellow, 6:orange, 8:red, 11:violet')" left="-20px" style="position:relative;"
            [text]="WetterProplanta:{{VHS_NR}}_uv">
       </ftui-label>
     </ftui-column>
    </ftui-row>

sieht dann so aus:
Du darfst diesen Dateianhang nicht ansehen.

Viele Grüße
Jürgen

[setstate]

Ich mache das mit

 scroll und height="2em"

Das scroll-Attribute erzwingt ein "white-space: normal;", da das ftui-label per default "white-space: nowrap;" hat. Somit steht nicht mehr alles nebeneinander, sondern bricht am Leerzeichen um.
Das label auf height=2em begrenzt, weil mir der Inhalt sonst oben und unten rausgeschoben wird.

"bewölkt, vereinzelt Schauer und" anstatt "unterschiedlich bewölkt, vereinzelt Schauer und Gewitter" reicht auch.

Code Auswählen Erweitern

<ftui-label [text]="AgroWeather:fc1_weatherDay" scroll height="2em" size="2"></ftui-label>

[juemuc]

Hallo setstate,

da aktuell bei Unwetterwarnungen viel Text mitgegeben wird, wird bei mir viel abgeschnitten Formatierungsproblem

Hast Du da eine Idee?

Viele Grüße
Jürgen

[Holzhuette]

Hallo zusammen, ich bitte um Unterstützung. Die Grafik des Circlemenues verhält sich auf PC (Firefox) und iPhone tadellos.
Auf dem Tablet zeigen sich jedoch die drei Buttons aus der Achse nach rechts versetzt.
(Die Verzerrung des Zentralicons ist nur ein Späßchen des screenshots von Fully und in Wirklichkeit OK).
Wo muss ich suchen / justieren?

Grüße und Danke!
Andreas

ftui3 - aktuell
Fully - 1.55.2
Tablet - hena KL2108NBE mit Android 11
1332 x 800

[Superposchi]

Gibt es eine Pipe zum prüfen ob Readings existent sind?

[setstate]

mit der Eigenschaft "invalid" eines Readings geht das

Code Auswählen Erweitern

    <ftui-grid-tile row="7" col="7" height="2" width="3">
      <header>HIDDEN INVALID</header>

      <ftui-label [text]="dummyXY:state:invalid"></ftui-label>

      <ftui-icon name="lightning"
                 [hidden]="dummyXY:state:invalid"></ftui-icon>
    </ftui-grid-tile>


[attribute]="DEVICE:READING:PROPERTY"

DEVICE und READING ist selbsterklärend.
PROPERTY kann sein: value, time, update, invalid (default ist value und kann weggelassen werden)

value - Wert das Readings
time - Timestamp des Readings in FHEM
update - Timestamp des Updates des Readings in FTUI
invalid - wird true, wenn es das Reading in FHEM nicht mehr gibt


Wenn also "dummyXY:state:invalid" true ist, bedeutet das, das Reading gibt es nicht mehr (z.B. Warning2 gibt es heute nicht). Das kann man dann nutzen, um ein Icon oder Text auszublenden:

Code Auswählen Erweitern

[hidden]="dummyXY:state:invalid"

[bismosa]

Hallo!

Ich versuche derzeit HTML vom SolarForecast ( Wiki SolarForecast ) Device in FTUI darzustellen.

Sehr weit bin ich da leider bisher nicht gekommen. Ich habe Schwierigkeiten mit der Einbindung wie in den Beispielen mittels:

Code Auswählen Erweitern

<ftui-content [content]="du_Poolpumpe2:update | getHTML('du_Poolpumpe2')"></ftui-content>Bewusst habe ich ein Reading aus einem dummy gewählt um das erstmal zu testen.

Wenn ich so einen externen Inhalt einfüge, wird dieser im Sekundentakt neu geholt (auch ohne Änderung des Readings). Auch die anderen Bindungen werden stetig erneuert. Siehe Screenshot (getestet mit der Demo in der aktuellen Version)
Du darfst diesen Dateianhang nicht ansehen.

Das Belastet mein FHEM sehr stark (mein FHEM auf dem Raspberry 3b+ geht auf 100% CPU - Das ist ein Effekt, den ich öfter beobachten kann, wenn mehrere Webverbindungen erstellt werden)

Mache ich hier einen Fehler?

Ich habe den code der content.component.js bisher nicht verstanden. Warum wird hier ein Timeout bei "onAttributeChanged" gesetzt? Ich denke, das dies für den reload verantwortlich ist?

Insgesamt wäre es schön, wenn man zusätzlich festlegen könnte, das der externe Inhalt nur geladen wird, wenn dieser auch sichtbar ist. Ich selbst habe den Code hier noch nicht so richtig verstanden und wüsste auch keinen Ansatz um dies umzusetzen. (Auch wenn ich es beim Chart geschafft habe, da war es etwas einfacher)

Gruß
Bismosa

[bismosa]

Hallo!

Ich bin mittlerweile ein bisschen weiter gekommen. Ich bin halt auch kein Profi in JavaScript...

Datei "content.component.js":

Code Auswählen Erweitern

// remove long texts to avoid huge attr values in DOM
          setTimeout(() => {
            this.setAttribute(name, '/* ... */');
          }, 1000)
Kommentiere ich dies aus, funktioniert alles bestens. Nur beim reload der Seite wird 2x ein "get du_Poolpumpe2.html" aufgerufen.
Mir stellt sich natürlich die Frage, ob ich dann nicht etwas anderes "kaputt" mache. Ich konnte bisher aber noch keine Einschränkungen feststellen. Ich befürchte aber, das der Codeblock nicht grundlos vorhanden ist.

Dann habe ich versucht ein "laden nur wenn sichtbar" einzubauen. Dieses konnte ich in der "ftui.binding.js":

Code Auswählen Erweitern

onReadingEvent(readingData) {
    if (!this.config.input.readings[readingData.id]) {
      return;
    }
    //Neu
    if (this.element.properties){
      if (this.element.hasAttribute("onlyifvisible")){ 
        if (!(ftuiHelper.isVisible(this.element.parentElement))){
          //auch dies erzeugt ein ständiges neu Laden!!! Warum?
          //this.element.setAttribute('content', 'nicht geladen, da nicht sichtbar')
 
          //Timeout setzen, um bei erneuter Sichbarkeit zu laden:
          if (typeof this.onlyifvisibletimeoutID === "number") {
            clearTimeout(this.onlyifvisibletimeoutID);
          }
          this.onlyifvisibletimeoutID = setTimeout(() => {
            this.onReadingEvent(readingData);
          }, 1000)
          return;
        }
      }
    }
   

    const readingAttributeMap = this.config.input.readings[readingData.id].attributes;
...
Somit braucht man nur in dem Element ein "onlyifvisible" einfügen und der Inhalt wird nur geladen, wenn er auch sichtbar ist. Das entspannt das System (zumindest auf schwächerer Hardware)
Also z.B.:

Code Auswählen Erweitern

<ftui-content onlyifvisible [content]="du_test:update | getHTML('du_test')"></ftui-content>Das funktioniert dann auch z.B. im Label.

Interessant (aber auch nicht nachvollziehbar) finde ich, das wenn ein

Code Auswählen Erweitern

this.element.setAttribute('content', 'nicht geladen, da nicht sichtbar')enthalten ist, die Verbindung zu FHEM abbricht und neu erstellt wird. Deswegen ist das auch auskommentiert.

Einen eleganteren Weg dafür konnte ich bisher nicht finden. Ich habe keine Möglichkeit gefunden z.B. auf ein bestimmtes Event zu reagieren. Deswegen wird hier nun zyklisch geprüft, ob es mittlerweile sichtbar ist.

Vielleicht könnte man auch einen besseren Namen dafür verwenden...

Soll ich beides mal als Pull request einstellen? Oder ist das alles quatsch, da es nur bei mir zu diesem Effekt kommt?

Gruß
Bismosa

[setstate]

Das Problem mit dem ständigen Nachladen beim ftui-content kann ich nachstellen, indem ich das Netzwerk künstlich drossle in den Developer-Tools des Browsers. Ich schau mir das mal genauer an

[bismosa]

Das Problem mit dem ständigen Nachladen beim ftui-content kann ich nachstellen, indem ich das Netzwerk künstlich drossle in den Developer-Tools des Browsers. Ich schau mir das mal genauer an

Das klingt gut.
Kann es sein, dass es da vielleicht nur zu einem Timeout in der Verbindung kommt?

Gruß
Bismosa

[Dracolein]

Freunde, wie bekomme ich dies in FTUI3 dargestellt / eingebunden? Idealerweise würde ich es in ein Popup einpflanzen wollen

Du darfst diesen Dateianhang nicht ansehen.
Du darfst diesen Dateianhang nicht ansehen. 

[bismosa]

Schau Mal hier, das habe ich gerade erst geschafft:
https://forum.fhem.de/index.php?topic=137058.msg1316141#msg1316141

Bitte alles durchlesen. Ich hatte ohne Modifikationen größere Schwierigkeiten.

Gruß
Bismosa

[Dracolein]

Schau Mal hier, das habe ich gerade erst geschafft:
https://forum.fhem.de/index.php?topic=137058.msg1316141#msg1316141

Bitte alles durchlesen. Ich hatte ohne Modifikationen größere Schwierigkeiten.

Gruß
Bismosa

Cool, danke.
Hmm, das ist mir zuviel Modifikation, die bei Updates bei mir wieder überschrieben würde.
Vielleicht gibt es alternative Lösungen? Eigentlich ist die SolarForcast-Grafik samt Auswertung viel zu geil, um nicht von FTUI3 unterstützt zu werden