FTUI version 3

[ToM_ToM]

Hi setstate,

ich habe jetzt festegestellt dass interval bei ftui-image mittlerweile gar nicht mehr funktioniert.


VG, Thomas

[mr_petz]

Kann ich mit der aktuellen Version nicht bestätigen...
Bsp:

Code Auswählen Erweitern


            <ftui-image id="weather" src="https://www.vvo-online.de/img/webcamimages/carolaplatz-110.jpg"
                  interval="300" nocache></ftui-image>

hier wird aller 5min ein neues Bild angezeigt wenn man im Zeitfenster der Webcam ist ...
LG mr_petz

[ToM_ToM]

Code Auswählen Erweitern

Kann ich mit der aktuellen Version nicht bestätigen...

Hey du hast Recht. Es war ein dummer Zufall dass der das Image vom DWD irgendwie 24 Stunden nicht aktualisiert hatte. Jetzt ist es wieder aktuell.
Zu den Kamerabildern bin ich jetzt mit der Netzwerkanalyse dran. Die Reloads werden gefeuert. Allerdings bekomme ich folgende Fehlermeldung:

CORS Missing Allow Origin

Hast du einen Tipp für mich?

VG, Thomas

[mr_petz]

Hi. Erster Treffer bei Goog..:
https://developer.mozilla.org/de/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin
Oder:
https://developer.mozilla.org/de/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight
LG mr_petz

[ToM_ToM]

Hi. Erster Treffer bei Goog..:

Danke, aber soweit war ich auch schon. 

In FHEM habe ich CORS auf 0 und auf 1 gestellt. Hat beides nicht geholfen.
Bei meinem Apache habe ich

Code Auswählen Erweitern

Header set Access-Control-Allow-Origin "*" hinzugefügt.

Da das Gleiche mit dem alten FTUI image funktioniert, ist meine Vermutung dass man irgendwas im Header der Website mitliefern muss.
Nur steige ich hier noch nicht ganz durch.

VG, Thomas

[mr_petz]

OK. Ich habe da auch nicht den Plan davon...
Aber könnte auch ausschlaggebend sein für Private Netze:

Mithilfe der "*"-Wildcard kann man eine Seite so konfigureren, dass Sie jeder anderen Webseite Zugriff gewährt. Dies sollte man ausschließlich für öffentliche APIs tun. Private APIs sollten niemals "*" verwenden, sondern stattdessen eine spezifische Domain oder eine Liste von Domains. Zudem funktioniert die Wildcard nur für Requests, die mit dem crossorigin-Attribut, gesetzt auf "anonymous", erstellt wurden.

Oder vielleicht fehlt der Token von fhem???
Edit: Diesen Thread kennst du schon?:
https://forum.fhem.de/index.php?topic=38764.0
LG mr_petz

[ToM_ToM]

Hi mr_petz,

das mit dem csrf token habe ich auf "none" stehen. Den Thread hatte ich mir auch schon angesehen.
Im alten FTUI gab es sowas:

Code Auswählen Erweitern

<meta name='web_device' content='WEBtablet'>

Meine fhem config dazu lautet:

Code Auswählen Erweitern


defmod WEBtablet FHEMWEB 8085 global
attr WEBtablet allowfrom localhost
attr WEBtablet csrfToken none
attr WEBtablet longpoll websocket



VG, Thomas

[blenni]

Nachdem ich seit längerem FTUI2 nutze, bin ich jetzt zufällig auf FTUI3 gestoßen - das sieht sehr gut aus, vielen Dank dafür
Bin gerade fleißig dabei mir eine neue Oberfläche zu basteln.

Jetzt stoße ich auf ein Problem, wenn ich bei meinen Rollladen Schalter einfügen will, verschiebt es das Icon nach oben. Was mache ich falsch? 

Code Auswählen Erweitern


      <!-- REIHE 4 -->
      <!-- ROLLADEN OG -->
      <ftui-grid-tile row="8" col="1" height="2" width="1" shape="round">
        <ftui-grid-header>Rollladen OG</ftui-grid-header>
        <ftui-row>
          <ftui-button (value)="Rolladen.Zentral.OG" states="open" color="current" fill="none" margin="-1em">
            <ftui-icon name="angle-up" size="2"></ftui-icon>
          </ftui-button>
          <ftui-icon [name]="Rolladen.Zentral.OG:state | map('open:window-shutter-open,closed:window-shutter')" size="5"></ftui-icon>
          <ftui-button (value)="Rolladen.Zentral.OG" states="closed" color="current" fill="none" margin="-1em">
            <ftui-icon name="angle-down" size="2"></ftui-icon>
          </ftui-button>
        </ftui-row>
        <ftui-row>
          <ftui-row width="80%" height="10%">
            <ftui-label>dummy</ftui-label>
          </ftui-row>
        </ftui-row>
      </ftui-grid-tile>

      <!-- VERGLEICH -->
      <ftui-grid-tile shape="round" row="8" col="2" height="2" width="1">
        <ftui-grid-header>Vergleich</ftui-grid-header>
        <ftui-icon name="window-shutter" size="5" ></ftui-icon>
        <ftui-row width="80%" height="10%">
          <ftui-label>dummy</ftui-label>
        </ftui-row>
      </ftui-grid-tile>


[mr_petz]

Hi blenni.
pack es einfach in eine ftui-cell.
Bsp:

Code Auswählen Erweitern


      <!-- REIHE 4 -->
      <!-- ROLLADEN OG -->
      <ftui-grid-tile row="8" col="1" height="auto" width="1" shape="round">
        <ftui-grid-header>Rollladen OG</ftui-grid-header>
        <ftui-cell>
          <ftui-row>
            <ftui-button (value)="Rolladen.Zentral.OG" states="open" color="current" fill="none" margin="-1em">
              <ftui-icon name="angle-up" size="2"></ftui-icon>
            </ftui-button>
            <ftui-icon [name]="Rolladen.Zentral.OG:state | map('open:window-shutter-open,closed:window-shutter')" size="5"></ftui-icon>
            <ftui-button (value)="Rolladen.Zentral.OG" states="closed" color="current" fill="none" margin="-1em">
              <ftui-icon name="angle-down" size="2"></ftui-icon>
            </ftui-button>
          </ftui-row>
          <ftui-row>
            <ftui-row width="80%" height="10%">
              <ftui-label>dummy</ftui-label>
            </ftui-row>
          </ftui-row>
        </ftui-cell>
      </ftui-grid-tile>

      <!-- VERGLEICH -->
      <ftui-grid-tile shape="round" row="8" col="2" height="auto" width="1">
        <ftui-grid-header>Vergleich</ftui-grid-header>
        <ftui-icon name="window-shutter" size="5" ></ftui-icon>
        <ftui-row width="80%" height="10%">
          <ftui-label>dummy</ftui-label>
        </ftui-row>
      </ftui-grid-tile>


ftui-cell ist fast immer das Allheilmittel...
ps. height="auto" ist auch von Vorteil...

Edit: alleine mit height="auto" wie oben im Beispiel sollte es auch ohne cell gehen...

[stefan-dd]

Die Formatierung will bei mir auch noch nicht so wie es soll.
Wie bekomme ich das alles zentriert?

Code Auswählen Erweitern

        <ftui-label size="3">Ankleide</ftui-label>
        <ftui-row>

          <ftui-button (value)="Rollo_OG_O_Ankleide" states="up" direction="vertical" color="current" fill="none"
                       margin="-1em">
            <ftui-icon name="angle-up" class="size-1" height="100%"></ftui-icon>
          </ftui-button>

          <ftui-icon [name]="Rollo_OG_O_Ankleide:pct | map('100: fts_shutter_100, 0: fts_shutter_10, `.*`: fts_shutter_40')"
                                  [color]="Rollo_OG_O_Ankleide:pct | map('0: green, `.*`: red')">

          <ftui-dropdown [list]="Rollo_EG_O_AZ:ftui"
                                    [value]="Rollo_OG_O_Ankleide:pct"
                                    (value)="Rollo_OG_O_Ankleide pct $value"></ftui-dropdown>
          </ftui-icon>

          <ftui-button (value)="Rollo_OG_O_Ankleide" states="down" direction="vertical" color="current" fill="none"
                       margin="-1em">
            <ftui-icon name="angle-down" class="size-1" height="100%"></ftui-icon>
          </ftui-button>

        </ftui-row>

[setstate]

Was ist denn das Ziel?

ftui-dropdown innerhalb von ftui-icon

ist das gewollt? 

[stefan-dd]

Ich dachte wegen der Ausrichtung, macht ja aber keinen Sinn.
Der Code funktioniert aber trotzdem.

[setstate]

Sollte das so aussehen?

Code Auswählen Erweitern


    <ftui-grid-tile row="3" col="4" height="1" width="1" shape="round">
      <ftui-label size="3">Ankleide</ftui-label>

      <ftui-row height="40%">

        <ftui-button states="up" direction="vertical" color="current" fill="none" margin="-1em">
          <ftui-icon name="angle-up" class="size-1"></ftui-icon>
        </ftui-button>

        <ftui-icon name="window-shutter-open" size="4"></ftui-icon>

        <ftui-button states="down" direction="vertical" color="current" fill="none" margin="-1em">
          <ftui-icon name="angle-down" class="size-1"></ftui-icon>
        </ftui-button>

      </ftui-row>

      <ftui-dropdown list=",item1,item2,item3" value="item2"></ftui-dropdown>

    </ftui-grid-tile>


[octek0815]

Hallo,

ich habe gerade ein Update gemacht und es hat mir bei allen ftui-row Zeilen mit einem height Parameter die komplette Ansicht zerhackt.
Nachdem ich die height Angabe entfernt hab ist es einigermaßen passend wieder.
Scheibar wird height nicht mehr nur auf die entsprechende ftui-row.

Kann das geprüft werden?

VG
Olli

[setstate]

ja, an ftui-row height habe ich gestern was geändert. Es war falsch implementiert und funktioniert jetzt erst, wie es sollte.
100% muss sich auf die Höhe des Containers beziehen. Das tat es vorher nicht.

Deine height-Werte, vermutlich durch Probieren ermittelt, müssten angepasst werden.