Hauptmenü

FTUI version 3

Begonnen von Bunnu, 25 Oktober 2020, 09:25:41

Vorheriges Thema - Nächstes Thema

blenni

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

            <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:
<!--          [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
3x Sonos Play 1, 1x Sonos Arc + Sub, 1 Sonos-One, 1x Sonos Playbar
FB6690 + FB7490 mit 4x Dect 200 und 3 Dect-ULE-Thermostate,  raspberry3B+, HM Funkmodul HM-MOD-RPI-PCB, HM Klingelsensor HM-Sen-DB-PCB, HM (IP) Fensterkontakte und  Amazon Echo Dot,  piVCCU, pi OS (bookworm).

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.

<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
3x Sonos Play 1, 1x Sonos Arc + Sub, 1 Sonos-One, 1x Sonos Playbar
FB6690 + FB7490 mit 4x Dect 200 und 3 Dect-ULE-Thermostate,  raspberry3B+, HM Funkmodul HM-MOD-RPI-PCB, HM Klingelsensor HM-Sen-DB-PCB, HM (IP) Fensterkontakte und  Amazon Echo Dot,  piVCCU, pi OS (bookworm).

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

    <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:


[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:
<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
1x nanoCUL 433MHz (SlowRF Intertechno) für Fenstersensoren
1x nanoCUL 868Mhz für MAX (9x HT 1xWT)
1x ZigBee CUL
Weiteres: Squeezebox server, Kindle Display, ESP8266, Löterfahrung, ...

bismosa

Hallo!

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

Datei "content.component.js":
// 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":
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.:
<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
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
1x nanoCUL 433MHz (SlowRF Intertechno) für Fenstersensoren
1x nanoCUL 868Mhz für MAX (9x HT 1xWT)
1x ZigBee CUL
Weiteres: Squeezebox server, Kindle Display, ESP8266, Löterfahrung, ...

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

Zitat von: setstate am 03 Juli 2024, 07:42:56Das 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
1x nanoCUL 433MHz (SlowRF Intertechno) für Fenstersensoren
1x nanoCUL 868Mhz für MAX (9x HT 1xWT)
1x ZigBee CUL
Weiteres: Squeezebox server, Kindle Display, ESP8266, Löterfahrung, ...

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. 
Raspberry Pi 4 mit FHEM; FTUI Dashboard auf Asus 15,6" VT168H Touchscreen; ZigBee mit ConBee2 USB-Stick; div. Shelly 2.5; integr. Gaszähler mit ESP8266 & ESPEasy;

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
1x nanoCUL 433MHz (SlowRF Intertechno) für Fenstersensoren
1x nanoCUL 868Mhz für MAX (9x HT 1xWT)
1x ZigBee CUL
Weiteres: Squeezebox server, Kindle Display, ESP8266, Löterfahrung, ...

Dracolein

Zitat von: bismosa am 20 Juli 2024, 09:38:08Schau 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
Raspberry Pi 4 mit FHEM; FTUI Dashboard auf Asus 15,6" VT168H Touchscreen; ZigBee mit ConBee2 USB-Stick; div. Shelly 2.5; integr. Gaszähler mit ESP8266 & ESPEasy;