FTUI version 3

mr_petz · 20 Oktober 2021, 20:25:49

Zitat von: rob am 20 Oktober 2021, 13:25:40
Edit: was bin ich doof: das 'class="size-5"' vom Icon klappt auch beim Button

Oh sorry, ich dachte das hättest du schon probiert...

Zitat von: rob am 20 Oktober 2021, 13:25:40
Muss ich diesen Hinweis mitbedenken oder bezieht sich er sich allein auf background-color?

Ich lese es so, dass es "nur" bei Theme eine Rolle spielen wird...

setstate · 20 Oktober 2021, 20:57:31

Zitat von: grossmaggul am 20 Oktober 2021, 12:39:08
Mist den Anhang vergessen.

Der eine Titel hat ein ´ anstatt ein '. Das müsste man mit einem MP3-Tag Editor korrigieren, dann geht es.

Ich probiere aber noch, ob man das irgendwie Quoten oder Escapen kann

edit: gefixed

grossmaggul · 20 Oktober 2021, 22:08:11

Zitatedit: gefixed

Danke!

StephanFHEM · 20 Oktober 2021, 22:24:39

mal eine ganz andere Frage: ich habe Bilder im Verzeichnis /opt/fhem/www/arlo liegen (snapshots von einer Cam)
wenn ich die in Fully darstellen will läd er das Bild nicht weil er kein User+Password hat

Kann ich dem ftui-image irgendwie die BasicAuth-Daten mitgeben? http://user:pass@xyz.de/fhem geht nicht weil der Browser das nicht mehr unterstützt

setstate · 20 Oktober 2021, 23:05:43

BasicAuth geht nicht bei <img src="URL">

Man müsste das Bild per fetch() holen. Dort kann man User /pass mitgeben. Da wäre aber einiges umzubauen.

Wolfgang Hochweller · 20 Oktober 2021, 23:56:54

Es ist auch noch was anderes, was mit dem Server-Cache zu tun haben muss.

1. Bild : FTUI 2 : Bei einem page refresh/reload im Browser bekomme ich dieselbe Seite wieder aufgebaut.

2. Bild : FTUI 3 : Bei einem page refresh/reload bekomme ich Bild 3

yersinia · 21 Oktober 2021, 08:31:38

Zitat von: Wolfgang Hochweller am 20 Oktober 2021, 23:56:54Es ist auch noch was anderes, was mit dem Server-Cache zu tun haben muss.

Du müsstest wesentlich mehr Informationen liefern - alles andere ist stochern im Nebel. Welcher Browser und Version; Betriebssystem des Browsers; list des HTTPSRV devices für FTUI3; Auszug deiner FTUI3 index.html; hast du alle FTUI3 updates eingespielt?

Wolfgang Hochweller · 21 Oktober 2021, 11:36:38

Sicher.
- Windows 10
- Chrome, letzte Version, Firefox ist genauso
- FTUI3 up-to-date
- define FTUI3 HTTPSRV ftui3/ ./www/ftui/ FTUI3

Code Auswählen


Internals:
   CFGFN      
   DEF        ftui3/ ./www/ftui/ FTUI3
   FUUID      617132e0-f33f-775d-e89e-50d3b95ed5f14500
   NAME       FTUI3
   NR         753
   STATE      FTUI3
   TYPE       HTTPSRV
   fhem:
     directory  ./www/ftui/
     friendlyname FTUI3
     infix      ftui3/
Attributes:

- Index.html

Code Auswählen


<!DOCTYPE html>
<html>

<head>
  <!--
    /* FHEM tablet ui - FTUI */
    /**
    * UI builder framework for FHEM
    *
    * Version: 3.0.0
    *
    * Copyright (c) 2015-2021 Mario Stephan <mstephan@shared-files.de>
    * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
    * https://github.com/knowthelist/ftui
    */
    -->
  <script src="ftui.js"></script>

  <link href="ftui.css" rel="stylesheet">
  <link href="themes/ftui-theme.css" rel="stylesheet">
  <link href="favicon.ico" rel="icon" type="image/x-icon" />

  <!-- avoid 300ms delay on click-->
  <meta name="viewport" content="width=device-width">

  <meta name="mobile-web-app-capable" content="yes">
  <meta name="toast_position" content="topLeft">


  <!-- verbose level 0-4 -->
  <meta name="debug" content="0">


  <title>FTUI Home</title> 
</head>

<body>
  <ftui-grid base-width="78" base-height="70" margin="5" shape="round">

    <ftui-grid-tile row="1" col="1" height="10" width="1">
      <ftui-column>
        <ftui-tab view="View1" size="large" >
          <ftui-icon name="home1"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="View2" direction="vertical" active>
          <ftui-icon name="home1"></ftui-icon> 
        </ftui-tab>
        <ftui-tab view="View3">
          <ftui-icon name="feed"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="View4">
          <ftui-icon name="lightbulb"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="View5">
          <ftui-icon name="bath"></ftui-icon>
        </ftui-tab>
      </ftui-column>
    </ftui-grid-tile>

  
      <ftui-tab-view id="View1">
            <ftui-content file="main.html"></ftui-content>
      </ftui-tab-view>
      
      </ftui-grid>  

</body>

</html>

Wolfgang Hochweller · 21 Oktober 2021, 11:47:07

Hier noch ein Update :

Nachdem ich fuer FTUI3 ein eigenes HTTPSRV-Device definiert habe, scheint das page refresh/reload zu funktionieren.
( ob das was damit zu tun hat, weiss ich aber nicht, zum Testen habe ich den URL der index.html direkt aufgerufen)

Bleibt noch , dass nach einem page refresh immer der am Anfang als 'active' definierte Tab angezeigt wird, nicht aber das beim Refresh aktive Tab.

yersinia · 21 Oktober 2021, 13:26:00

Zitat von: Wolfgang Hochweller am 21 Oktober 2021, 11:36:38Sicher.
- Windows 10
- Chrome, letzte Version, Firefox ist genauso

Ist imho nicht genau genug - aber wahrscheinlich jetzt auch nicht mehr relevant.

Zitat von: Wolfgang Hochweller am 21 Oktober 2021, 11:47:07Nachdem ich fuer FTUI3 ein eigenes HTTPSRV-Device definiert habe, scheint das page refresh/reload zu funktionieren.
( ob das was damit zu tun hat, weiss ich aber nicht, zum Testen habe ich den URL der index.html direkt aufgerufen)

Mit der Tastenkombination lädt der Firefox die Seite komplett neu vom Server:

Zitat von: yersinia am 20 Oktober 2021, 11:19:22[Strg]+[F5] tuts bei mir auch. Imho [shift]+[F5] ebenso, ist aber nicht (mehr) dokumentiert.

Vermutlich hat dir das FTUI3 eigene HTTPSRV-Device schon geholfen.

Darüberhinaus würde sich noch die Frage stellen, wie du die HTML Dateien editierst? Per Console auf dem FHEM Server? Es kann delays geben wenn nicht direkt auf dem Server editiert&gespeichert wird.

Zitat von: Wolfgang Hochweller am 21 Oktober 2021, 11:47:07Bleibt noch , dass nach einem page refresh immer der am Anfang als 'active' definierte Tab angezeigt wird, nicht aber das beim Refresh aktive Tab.

Das ist imho das erwartete Verhalten - die index.html wird komplett neu geladen, da gibt es keine Historie wenn der Cache gelöscht worden ist.

Long story short, dein Problem scheint aber gelöst zu sein!?

Wolfgang Hochweller · 21 Oktober 2021, 14:19:29

Dateien werden direkt editiert, aber du hast recht, Problem scheint sich geloest zu haben.
Danke fuer die Muehe.

Und, ich habe das nochmal verifiziert :

Die Seite direkt zu laden, also etwa :

http://192.168.10.41:8083/fhem/www/ftui/index.html

ist keine gute Idee. Dann treten die vorher beschriebenen Probleme auf.

setstate · 21 Oktober 2021, 14:23:38

Eigentlich braucht es kein HTTPSRV. Es reicht FHEMWEB. HTTPSRV unterstützt kein Cache, was in deinem Fall vllt gerade hilft, aber im Normalbetrieb die Ladezeit verlängert.

Wolfgang Hochweller · 21 Oktober 2021, 14:27:32

Danke, das stimmt..
Ich wollte auch nur vermitteln, dass direkte Aufruf der Seite ohne FHEMWEB oder HTTPSRV keine gute Wahl war.

tomster · 22 Oktober 2021, 11:53:10

Auch auf die Gefahr hin, dass ihr mich steinigt, weil ich mit so "kosmetischem Zeugs" daherkomme, welches wohl zudem höchstens die Perfomance von FTUI3 bremst:
Mit geht mein geliebtes 'rotor-widget' ganz schmerzlich ab. *schnief*

Ich habe zwar schon probiert das "rotate1"-Beispiel aus https://codyhouse.co/gem/css-animated-headlines zu adaptieren, aber ich steige - ehrlich gesagt - überhaupt nicht durch den Aufbau von FTUI3 (mei, DAU halt). Bestehen Chancen, dass sich jemand...ähh *räusper* setstate... diesem Wunsch annehmen will?

setstate · 22 Oktober 2021, 23:45:37

Zitat von: StephanFHEM am 20 Oktober 2021, 22:24:39
mal eine ganz andere Frage: ich habe Bilder im Verzeichnis /opt/fhem/www/arlo liegen (snapshots von einer Cam)
wenn ich die in Fully darstellen will läd er das Bild nicht weil er kein User+Password hat

Kann ich dem ftui-image irgendwie die BasicAuth-Daten mitgeben? http://user:pass@xyz.de/fhem geht nicht weil der Browser das nicht mehr unterstützt

Ich habe das fetch jetzt eingebaut. Versuche es mal ungefähr so:

Code Auswählen


      <ftui-image base="http://fhem:8083/fhem/images/default/" src="black_up.png" user="fhemuser" pass="fhempass"></ftui-image>

oder so

Code Auswählen


      <ftui-image src="http://fhem:8083/fhem/images/default/black_up.png" user="fhemuser" pass="fhempass"></ftui-image>