FTUI version 3

[Init]

hab eine Frage an euch bezüglich eines kleinen "Schönheitsproblems" meiner Seite. Ich bekomme es nicht hin das die Content-Seite an der unten Kante gleich wie das Menü abschließt, die Content-Seite wird da etwas abgeschnitten. Habe schon einiges probiert, finde aber die richtige "Schraube" nicht. Hab euch mal einen Screenshot des Problems angefügt und zudem die Definitionen der html-Dateien.

Hallo Markus,

ich hatte ein ähnliches Problem und hatte meine Lösung hier https://forum.fhem.de/index.php/topic,115259.msg1148545.html#msg1148545beschrieben.

Vieleicht hilft das bei dir auch.

VG
Marc

[meier81]

Das ist zweimal das gleiche File angefügt. Es fehlt die content-home.html

Habe ich angepasst, ist jetzt das richtige File, siehe Post #1288.

[meier81]

Hallo Markus,

ich hatte ein ähnliches Problem und hatte meine Lösung hier https://forum.fhem.de/index.php/topic,115259.msg1148545.html#msg1148545beschrieben.

Vieleicht hilft das bei dir auch.

VG
Marc

Hallo Marc,

hab mir eben mal deine Variante angeschaut und zum Test mal eingespielt, sieht auch super aus. Habe für mich mal ein paar Sachen wie die Farben etc. angepasst, ich auch eine schöne Lösung.

Eine Frage hätte ich an dich noch, hast du das mit dem Seitennamen oben in der Mitte des Headers laufen? So wie in deinem Beitrag beschrieben funktioniert das bei mir nämlich nicht.

Gruß Markus

[grossmaggul]

Ich spiele gerade mit der Medialist rum, folgendes Konstrukt erzeugt eine Medialist:

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="6" height="8" width="5" shape="round" class="semitransparent">
                <header>Medialist</header>
                <ftui-medialist [list]="bz.yamaha_air:ftuiMedialist"
                            [track]="bz.yamaha_air:track"
                            (track)="set bz.yamaha_air:track">
                </ftui-medialist>
     

        </ftui-grid-tile>

Das funktioniert soweit, nur das Anwählen einzelner Tracks funktioniert nicht wirklich.

Ich habe mal eine kleine Testplaylist erstellt, die von Fhem squeezebox im Reading "ftuiMedialist" folgendermaßen aussieht:

Code Auswählen Erweitern

[{"Artist":"Beatsteaks","Title":"Summer","Album":"Living Targets","Time":"206","File":"file:///media/nas/music/Beatsteaks/Living%20Targets/01%20Summer.mp3","Track":"1","Cover":"http://192.168.1.12:9000/music/0bfb13ba/cover_50x50_o"},{"Artist":"Canned Heat","Title":"On The Road Again","Album":"Boogie with Canned Heat","Time":"203","File":"file:///media/nas/music/Canned%20Heat/Boogie%20with%20Canned%20Heat/03%20On%20The%20Road%20Again.mp3","Track":"3","Cover":"http://192.168.1.12:9000/music/ccf35309/cover_50x50_o"},{"Artist":"David Lee Roth","Title":"California Girls","Album":"Crazy From The Heat","Time":"170","File":"file:///media/nas/music/David%20Lee%20Roth/Crazy%20From%20The%20Heat/03%20California%20Girls.mp3","Track":"3","Cover":"http://192.168.1.12:9000/music/c25eac12/cover_50x50_o"},{"Artist":"Emerson, Lake & Palmer","Title":"Lucky Man","Album":"Emerson, Lake & Palmer","Time":"270","File":"file:///media/nas/music/Emerson,%20Lake%20&%20Palmer/Emerson,%20Lake%20&%20Palmer/08%20Lucky%20Man.mp3","Track":"8","Cover":"http://192.168.1.12:9000/music/c0735cbc/cover_50x50_o"},{"Artist":"Gary Moore","Title":"Parisienne walkways","Album":"Ballads & Blues 1982-1994","Time":"407","File":"file:///media/nas/music/Gary%20Moore/Ballads%20&%20Blues%201982-1994/04%20Parisienne%20walkways.mp3","Track":"4","Cover":"http://192.168.1.12:9000/music/1b1a7e46/cover_50x50_o"},{"Artist":"Madness","Title":"Baggy Trousers","Album":"Divine Madness","Time":"159","File":"file:///media/nas/music/Madness/Divine%20Madness/05%20Baggy%20Trousers.mp3","Track":"5","Cover":"http://192.168.1.12:9000/music/0fdf0b81/cover_50x50_o"},{"Artist":"The Brian Setzer Orchestra","Title":"The Dirty Boogie","Album":"The Dirty Boogie","Time":"193","File":"file:///media/nas/music/The%20Brian%20Setzer%20Orchestra/The%20Dirty%20Boogie/02%20The%20Dirty%20Boogie.mp3","Track":"2","Cover":"http://192.168.1.12:9000/music/b59c6a53/cover_50x50_o"},{"Artist":"Toy Dolls","Title":"We're Mad","Album":"A Far Out Disc","Time":"297","File":"file:///media/nas/music/Toy%20Dolls/A%20Far%20Out%20Disc/13%20We%27re%20Mad.mp3","Track":"13","Cover":"http://192.168.1.12:9000/music/c68dfece/cover_50x50_o"}]

Wenn ich auf den ersten Eintrag in ftui klicke wird Tack Eins abgespielt, soweit ist das ja auch richtig, klicke ich dann aber auf Track 2, wird Track 3 abgespielt, ich drösele das mal etwas auf, vielleicht hilft es ja.

Geklickt      Abgespielt
Track 1.      Track 1
Track 2.      Track 3
Track 3.      Track 3
Track 4.      Track 8
Track 5.      Track 4
Track 6.      Track 5
Track 7.      Track 2
Track 8.      Track 5 (Toast zeigt aber Track 13)

Hinzu kommt, daß beim Anwählen von Track 2 sowohl Track 2, als auch Tack 3 angewählt dargestellt werden.


gm

[mr_petz]

@ grossmaggul

Hast du auch noch mehr Tracks die höher als Tracknummer 9 sind?
Ist nur zum Testen ob da auch der falsche Track abgespielt wird!
Vielleicht hängt es an der Zahl??? k.A.? Nur so ein Gedanke...

[grossmaggul]

Ich habe es auch mit Listen, die wesentlich mehr Einträge hatten ausprobiert, da konnte ich aber nicht mehr nachvollziehen was da wo hin gesprungen ist.
Da wählt man den ersten Eintrag in der Liste und es wird irgendwo weit hinten in die Liste gesprungen, die Zahl die Toast anzeigt ist aber auch falsch.

Läuft das denn bei irgendjemandem so wie es soll?

[Eisix]

Habe ein ähnliches Verhalten wie bei grossmaggul.

Gruß
Eisix

[meier81]

Guten Morgen,

hab mal wieder etwas weiter gebastelt und habe gerade folgendes Problem: Ich würde gerne in meinem header den Raumnamen anzeigen, hab ihn folgendermaßen zugewiesen:

Code Auswählen Erweitern

    <ftui-tab-view id="View1">
      <ftui-content file="content-home.html" room="Room1"></ftui-content>
    </ftui-tab-view>

und dann folgendermaßen abgefragt:

Code Auswählen Erweitern

      <ftui-column>{{room}}</ftui-column>

Wenn ich die Abfrage des Raumnamens in der content-home.html mache funktioniert das auch einwandfrei, ich würde die Abfrage ja aber gerne für den header benutzen der ja in der index.html angegeben ist, dort funktioniert es aber nicht.
Gibt es da die Möglichkeit das so zu benutzten?

Der Vollständigkeit halber hier meine gesamte index.html:

Code Auswählen Erweitern

<!DOCTYPE html>
<html>

<head>
  <!--
    /* FHEM tablet ui - FTUI */
    /**
    * UI builder framework for FHEM
    *
    * Version: 3.0.0
    *
    * Copyright (c) 2015-2020 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="themes/custom.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, initial-scale=0.95">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">

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

  <title>FHEM - Hausautomatisierung</title>
</head>

<body>
  <header>
    <ftui-row>
      <ftui-column width="20%"><ftui-clock format="hh:mm:ss" class="size-3" color="warning"></ftui-clock></ftui-column>
      <ftui-column>{{room}}</ftui-column>
      <ftui-column width="20%"><ftui-clock format="eeee, DD.MMMM YYYY" class="size-3" color="warning"></ftui-clock></ftui-column>
    </ftui-row>
  </header>

  <main>
    <ftui-tab-view id="View1">
      <ftui-content file="content-home.html" room="Room1"></ftui-content>
    </ftui-tab-view>
    <ftui-tab-view id="View2">
      <ftui-content file="content-energie.html" room="Room2"></ftui-content>
    </ftui-tab-view>
    <ftui-tab-view id="View3">
      <ftui-content file="content-heizung.html" room="Room3"></ftui-content>
    </ftui-tab-view>
    <ftui-tab-view id="View4">
      <ftui-content file="content-heizung.html" room="Room4"></ftui-content>
    </ftui-tab-view>
  </main>

  <footer>
    <ftui-tab view="View1" direction="vertical" active>
      <ftui-icon name="home1"></ftui-icon>
      <label class="small">Home</label>
    </ftui-tab>
    <ftui-tab view="View2" direction="vertical">
      <ftui-icon name="weather-partly-lightning"></ftui-icon>
      <label class="small">Energie</label>
    </ftui-tab>
    <ftui-tab view="View3" direction="vertical">
      <ftui-icon name="leaf"></ftui-icon>
      <label class="small">Garten</label>
    </ftui-tab>
    <ftui-tab view="View4" direction="vertical">
      <ftui-icon name="music"></ftui-icon>
      <label class="small">Multimedia</label>
    </ftui-tab>
  </footer>

</body>

</html>

[Init]

Hallo Markus,

leider habe ich aus Zeitmangel noch keine Lösung gesucht, da ich momentan die Prio auf andere Dinge gelegt habe, um eine für mich 100% Basis zu haben.

Aktuell suche ich nach einer Möglichkeit, dass tui-grid-tile die Seite in der Breite mit den Containern immer komplett füllt.
Mit native flex ist das ja möglich. Fraglich ist nur, wie ich das anständig in FTUI eingebunden bekomme.

Und mit @media würde ich gerne abhängig von der Auflösung die Container anders anordnen, damit ich die Seite auf Smartphone, Tablet und PC-Browser optimal angepasst ist.

Viele Grüße
Marc

[pingus]

Hallo

Wenn ich das richtig sehe, dann ist im index.html ein </div> zuviel? Das wäre dann entweder in Zeile 92 oder 97 auf github. Mit meinem gefährlichen Halbwissen würde ich jetzt Zeile 97 durch </ftui-column> ersetzen.

Code Auswählen Erweitern

      <ftui-grid-tile row="3" col="4" height="2" width="3" shape="round">
        <ftui-column>
          <div class="row h-40">
            <ftui-label>Humidity</ftui-label>
            <ftui-label class="size-7" [text]="THSensorWZ:humidity">
              <span slot="end" class="size-0">%</span>
            </ftui-label>
          </div>
          <ftui-chart class="row" width="150px" height="75px">
            <ftui-chart-data fill log="FileLog_THSensorWZ" spec="4:THSensorWZ.humidity"
                             [update]="THSensorWZ:state:time"></ftui-chart-data>
          </ftui-chart>
          </div>
      </ftui-grid-tile>

[Sailor]

Ein herzerfrischendes Moin vomn achtern Diek

Ich habe mein Control Panel ist soweit fertig und auf dem 27" TouchScreen integriert.
Siehe Anlage (Wetterseite)

Bei 4 Punkten hoffe ich aber noch eure Hilfe bzw. setstate's flinke Finger:

1) DoorBird Stream laesst sich nur im ftui nicht anzeigen. Zweimal hatte es geklappt aber nach 3 Reloads war der Stream wieder weg.
   Im Fhem selber mit Weblink bzw. direkt in der Adresszeile eingegeben funktioniert es von Anfang an ohne ohne Probleme.

Code Auswählen Erweitern

   
<ftui-image src      = "http://192.168.178.66/bha-api/video.cgi?http-user=Username%26http-password=Geheim!"
height       = "150px"
width        = "200px"
shape        = "round"
popup-target = "frontdoorcam"
interval     = "5">
</ftui-image>


2) Es gibt kein ftui3-Modul fuer OpenStreetMap mit PoI.
   Im ftui2 gab es https://wiki.fhem.de/wiki/FTUI_Widget_Maps

3) Gegenwaertig habe ich noch keine Wege gefunden, einen Reload - Button bzw. einen ferngesteuerter Reload durchzufuehren.
   Diesen brauch man aber nach einen Fhem - Restart, da hierbei die websocket - Verbindung unterbrochen wird.
   Eine F5 - Taste steht nicht zur verfuegung, da an dem Control Panel keine Tastatur angebunden ist.

4) Der "popup-close" - button im Popup 2 welches aus einem Popup 1 aufgerufen wird schliesst nicht nur Popup2 sondern auch Popup1 geschlossen.
   Besser waere die Option die id mit anzugeben. z.B.: <ftui-button color="danger" popup-close id="PopupName">Close</ftui-button>


Danke fuer Eure Hilfe
   Gruss
       Sailor

[mr_petz]

3) Gegenwaertig habe ich noch keine Wege gefunden, einen Reload - Button bzw. einen ferngesteuerter Reload durchzufuehren.
   Diesen brauch man aber nach einen Fhem - Restart, da hierbei die websocket - Verbindung unterbrochen wird.
   Eine F5 - Taste steht nicht zur verfuegung, da an dem Control Panel keine Tastatur angebunden ist.

Hi, als Übergangslösung:

Code Auswählen Erweitern


<button onclick="javascript:window.location.reload(true);">Reload</button>

kannst du ja noch stylen per css...
oder so:

Code Auswählen Erweitern


<ftui-label class="size-1" @click="javascript:window.location.reload(true);">Reload</ftui-label>
<ftui-button class="size-1" @click="javascript:window.location.reload(true);">Reload</ftui-button>
<ftui-icon class="size-1" name="refresh1" @click="javascript:window.location.reload(true);"></ftui-icon>

Gruß

[Sailor]

Hallo Mr. Petz

Hi, als Übergangslösung:
kannst du ja noch stylen per css...

Danke

Habe ich ins ftui uebernommen:

Code Auswählen Erweitern


<ftui-button fill    = "solid"
class       = "size-3"
shape       = "circle"
states      = "">
<ftui-icon
name         = "refresh"
color        = "white"
class        = "size-2"
onclick      = "javascript:window.location.reload(true);">
</ftui-icon>
</ftui-button>


Gruss
    Sailor

[setstate]

Hallo

Wenn ich das richtig sehe, dann ist im index.html ein </div> zuviel? Das wäre dann entweder in Zeile 92 oder 97 auf github. Mit meinem gefährlichen Halbwissen würde ich jetzt Zeile 97 durch </ftui-column> ersetzen.

ja, da hast du Recht. Danke. Erstaunlich, wie tolerant der Browser das abtut. Ich habe es nicht nicht bemerkt. Ich werde mir mal einen html-Linter installieren

[OdfFhem]

@Sailor

2) Es gibt kein ftui3-Modul fuer OpenStreetMap mit PoI.

Ich selbst nutze eine bislang "kleine" Modul-Variante zur Kartendarstellung.
Kannst Du etwas genauer - mit Beispiel-Tag - beschreiben, was Du darstellen möchtest ?