FTUI version 3

setstate · 07 Januar 2021, 17:55:56

Zitat von: RalfPit am 07 Januar 2021, 17:50:21
Genau das mache ich seit Tagen und bin begeistert.
Zu meinem Problem habe ich jedoch in github und im Forum kein Beispiel gefunden.

Wenn ich die index.html oder tab.html aufrufe werden die Unterseiten angezeigt,
gehe ich aber eine Stufe tiefer, funktioniert das nicht mehr.

LG Ralf

Da die Beispielsseiten in einem Subfolder sind, habe ich diesen Tag im Header

Code Auswählen

<base href="../" />

Wenn du eine Seite, die du aus Examples kopiert hast, neben der index.html im Main-Verzeichnis haben willst, musst du diese Zeile rauslöschen

RalfPit · 07 Januar 2021, 18:03:22

Zitat von: setstate am 07 Januar 2021, 17:55:56
Da die Beispielsseiten in einem Subfolder sind, habe ich diesen Tag im Header

Code Auswählen Erweitern
<base href="../" />

Wenn du eine Seite, die du aus Examples kopiert hast, neben der index.html im Main-Verzeichnis haben willst, musst du diese Zeile rauslöschen

Habe ich gemacht, mit diesem Eintrag wird nichts angezeigt.

LG Ralf

LuGu · 07 Januar 2021, 18:32:30

@setstate beim controls_ftui.txt hat sich ein Fehler eingeschlichen, der zum Abruch des Updates führt.

Code Auswählen


UPD www/ftui/icons/lightbulb-on-outline.svg
UPD www/ftui/icons/lightbulb-outline.svg

Grüße
LuGu

setstate · 07 Januar 2021, 18:35:33

Danke, ist korrigiert

RalfPit · 07 Januar 2021, 18:37:31

Zitat von: setstate am 07 Januar 2021, 17:55:56
Da die Beispielsseiten in einem Subfolder sind, habe ich diesen Tag im Header

Code Auswählen Erweitern
<base href="../" />

Wenn du eine Seite, die du aus Examples kopiert hast, neben der index.html im Main-Verzeichnis haben willst, musst du diese Zeile rauslöschen

Das habe ich gemacht, hier meine Beispielseiten, beide liegen im Hauptverzeichnis

meine 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-2020 Mario Stephan <mstephan@shared-files.de>
    * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
    * https://github.com/knowthelist/ftui
    */
    -->
  <base href="./" />
  <script src="ftui.js"></script>
  <link href="ftui.css" rel="stylesheet">
  <link href="themes/bright-theme.css" rel="stylesheet">
  <link href="favicon.ico" rel="icon" type="image/x-icon" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <title>FTUI Mobile Example</title>
</head>

<body>

  <ftui-tab-view id="View1">

    <div class="cell huge">Tab1</div>

  </ftui-tab-view>

  <ftui-tab-view id="View2">

    <ftui-content file="tab.html"></ftui-content>

  </ftui-tab-view>


  <footer class="row fixed border-top">
    <ftui-tab fill="clear" direction="vertical" view="View1" active>
      <ftui-icon name="home1"></ftui-icon>
      <label class="small">Tab1</label>
    </ftui-tab>
    <ftui-tab fill="clear" direction="vertical" view="View2">
      <ftui-icon name="cog"></ftui-icon>
      <label class="small">Tab2</label>
    </ftui-tab>
  </footer>

</body>

</html>

meine tab.html

Code Auswählen

<!DOCTYPE html>
<html>

<body>

  <ftui-grid>

    <ftui-grid-tile row="1" col="1" height="5" width="1">
      <ftui-column>
	  
        <ftui-tab view="tab1" active>
          <ftui-icon name="home1"></ftui-icon>
        </ftui-tab>
        <ftui-tab view="tab2">
          <ftui-icon name="music"></ftui-icon>
        </ftui-tab>
        
      </ftui-column>
    </ftui-grid-tile>

    <ftui-tab-view id="tab1">
      <ftui-grid-tile row="1" col="2" height="5" width="9">
        <div class="size-10">Tab1</div>
      </ftui-grid-tile>
    </ftui-tab-view>

    <ftui-tab-view id="tab2">
      <ftui-grid-tile row="1" col="2" height="5" width="9" color="green">
        <ftui-content file="examples/contents/content-grid.html" placeholder="huhu"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>
  </ftui-grid>

</body>

</html>

Die Seite mit Tab1 und die Seite mit examples/contents/content-grid.html werden nicht angezeigt.

LG und Danke für eure Hilfe

eppi · 07 Januar 2021, 18:47:25

Zitat von: RalfPit am 07 Januar 2021, 18:37:31
Die Seite mit Tab1 und die Seite mit examples/contents/content-grid.html werden nicht angezeigt.
LG und Danke für eure Hilfe

Ich habe mir auch ein paar Seite mit dem Mobile Menu gebaut. Um Änderungen anzuzeigen, nützt bei mir (Firefox) nichts die Seite neu zu laden. Ich musste die Seite im Privat-Browsermode starten, dann war es ersichtlich... Hast du das mal probiert?

RalfPit · 07 Januar 2021, 19:16:57

Zitat von: eppi am 07 Januar 2021, 18:47:25
Ich habe mir auch ein paar Seite mit dem Mobile Menu gebaut. Um Änderungen anzuzeigen, nützt bei mir (Firefox) nichts die Seite neu zu laden. Ich musste die Seite im Privat-Browsermode starten, dann war es ersichtlich... Hast du das mal probiert?

Das hilft mir nicht.
In der Version 2 habe ich alle Verschachtelungen mit pagebutton gelöst.

yersinia · 08 Januar 2021, 08:39:18

Zitat von: setstate am 06 Januar 2021, 13:03:30
Zitat von: yersinia am 06 Januar 2021, 11:30:05Und wie kann ich mit <ftui-clock> denn sowas ausgeben: "Mittwoch, 6. Januar 2021"? Mit
Code Auswählen Erweitern
<ftui-clock format="eeee, DD.MM.YYYY" class="size-3"></ftui-clock>
bekomm ich "Mittwoch, 06.01.2021" - FTUI2.x hatte als format "eeee, j. F Y" welches hier aber nicht funktioniert.
Habe ich jetzt hinzugefügt

Code Auswählen Erweitern
<ftui-clock format="eeee, DD.MMMM YYYY" class="size-5"></ftui-clock>

Es funktioniert, aber MMMM gibt für Heute Februar zurück. ^^
(Ja, Systemzeiten FHEm/Browser-OS sind korrekt)

Kann es sein, dass die CSS Klasse spin nicht mehr funktioniert? Genausowenig hop. Oder ist das nur nicht implementiert? blink klappt perfekt.

Apropos, für alle, die es noch nicht mitbekommen haben: die neue Update-URL ist jetzt:
https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt

Damit geht auch ein

Code Auswählen

update add https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt
um FTUI3 mit dem regulärem FHEM update Prozess durchzuführen.

octek0815 · 08 Januar 2021, 08:48:56

Zitat von: setstate am 06 Januar 2021, 16:55:56
Nicht so richtig. Muss ich mir mal anschauen

Moin,

geht das mit einem Icon im Badge schon?
Wenn ja wie?

VG
Olli

yersinia · 08 Januar 2021, 08:56:41

Zitat von: octek0815 am 08 Januar 2021, 08:48:56geht das mit einem Icon im Badge schon?
Wenn ja wie?

Si, Sir! Bsp:

Code Auswählen

<ftui-badge text="&nbsp;" color="clear">
                  <ftui-icon name="battery-0"
                        color="warning"
                        class="size-0">
                  </ftui-icon>
</ftui-badge>

(Allerdings ist der text hier noch leer (  erzeugt ein Leerzeichen).
(EDIT: typo, '>' vergessen)

@setstate: wird es CSS Klassen für Rotation (rotate-90, rotate-180, rotate-270) oder spiegeln (vertical/horizontal) der SVGs geben (nicht animiert wie bei spin)?

grossmaggul · 08 Januar 2021, 08:58:53

ZitatKann es sein, dass die CSS Klasse spin nicht mehr funktioniert? Genausowenig hop. Oder ist das nur nicht implementiert? blink klappt perfekt.

Meinst Du allgemein oder bei bestimmten Elementen?
Zumindest bei mir funktioniert sowohl spin als auch hop in dem u.a Beispiel

Code Auswählen


<!-- Frost -->
<ftui-column>
        <ftui-icon  [name]="proplanta:fc0_frost | map('1:snowflake-o, 0:')"
                                    [color]="proplanta:fc0_frost | map('1:primary, 0:')"
                                    [class-name]="proplanta:fc0_frost | map('1:spin,0:')">
        </ftui-icon>
</ftui-column>

yersinia · 08 Januar 2021, 09:05:27

Zitat von: grossmaggul am 08 Januar 2021, 08:58:53Meinst Du allgemein oder bei bestimmten Elementen?
Zumindest bei mir funktioniert sowohl spin als auch hop in dem u.a Beispiel

mmmh, dann scheine ich das eventuell im map falsch zu verwenden:

Code Auswählen

           <ftui-icon [name]="WaMa_Watt:state | map('0=washing-machine-off, 1=washing-machine')" path="mdt-svg"
                [color]="WaMa_Watt:state | map('0=light, 1=green, 5=warning, 10=danger')"
                [class-name]="WaMa_Watt:state | map('0=size-2, 5=size-2 blink, 10=size-2 spin')">
           </ftui-icon>

Oder wäre es so korrekt:

Code Auswählen

[class-name]="WaMa_Watt:state | map('0=`size-2`, 5=`size-2 blink`, 10=`size-2 spin`')">

grossmaggul · 08 Januar 2021, 09:13:42

ZitatOder wäre es so korrekt:

Ja.

octek0815 · 08 Januar 2021, 09:28:41

Zitat von: yersinia am 08 Januar 2021, 08:56:41
Si, Sir! Bsp:
Code Auswählen Erweitern
<ftui-badge text=" " color="clear" <ftui-icon name="battery-0" color="warning" class="size-0"> </ftui-icon> </ftui-badge>
(Allerdings ist der text hier noch leer (  erzeugt ein Leerzeichen).

Seltsam, gestern in etwa genau so eingerichtet und ohne funktion.
Heute erneut, und nun funktioniert es.
Habe aber text=" " rein getan, dann wird auch nur das Icon angezeigt.

Danke und Grüße
Olli

@setstate: wird es CSS Klassen für Rotation (rotate-90, rotate-180, rotate-270) oder spiegeln (vertical/horizontal) der SVGs geben (nicht animiert wie bei spin)?

yersinia · 08 Januar 2021, 09:33:12

Läuft auch nicht. Allerdings läuft auch ein

Code Auswählen

class="size-2 spin"
nicht.
Ich sehe auch gerade, dass die CSS Klasse .spin nicht referenziert wird obwohl sie in der ftui.css definiert ist. Ich werde mal den Browser neu starten.

EDIT: scheint ein Browser-Problem zu sein bei mir, die Klasse wird geladen, aber der FF (84.0.1) interpretiert das auf meiner FTUI3x Seite nicht. Auf anderen (nicht-FTUI-)Seiten funktioniert spin allerdings.