FTUI version 3

[setstate]

Hallo,

ich hab jetzt seit einiger Zeit ein altes Ipad3 an der Wand, jetzt wollte ich FTUI 3 testen, aber siehe da, alle Geräte und Browser spielen mit, das Ipad aber nicht mehr. Nichtmal die verlinkten Examples funktionieren. Javascript-Problem? Wird es jetzt Zeit, das Ipad in Rente zu schicken?

Grüße
Piccer

ja, das ist zu alt. Dessen Safari kennt viele der ES6 Features noch nicht. Manche sogar erst ab Version 11.

https://caniuse.com/?search=es6

Nachtrag: ich sehe gerade, bei einem neueren iPad (Gen.6) geht es auch nicht. Ich untersuche das nochmal.
Nach-Nachtrag: Nach Update auf iOS 14.2 geht alles.

[OdfFhem]

@setstate

Vielen Dank für die runden Ecken.

Ist zusätzlich noch folgende Änderung möglich?

Code Auswählen Erweitern


34c34
<           <span class="close">&times;</span>
---
>           <span class="close"><slot name="close">&times;</slot></span>



P.S.: Ich war echt überrascht, dass ich "};" eingeschleust hatte ...

[grossmaggul]

Eine Frage zur Formatierung, ich habe mittels diesem Code:

Code Auswählen Erweitern

<ftui-grid-tile row="7" col="9" height="2" width="2" shape="round" class="semitransparent">
            <ftui-row>
               
                <ftui-label text="Thermostat"></ftui-label>
             
                <ftui-label [text]="wz.thermostat:temperature" unit="°C"></ftui-label>
               
                <ftui-icon [name]="wz.thermostat:battery | map('low:battery-1,ok:battery')"
                           [color]="wz.thermostat:battery | map('low:danger,ok:green')"></ftui-icon>
                   
            </ftui-row>
            <ftui-row>
               
                <ftui-label text="Radiator"></ftui-label>
               
                <ftui-label [text]="wz.radiator:temperature" unit="°C"></ftui-label>
               
                <ftui-icon [name]="wz.radiator:battery | map('low:battery-1,ok:battery')"
                           [color]="wz.radiator:battery | map('low:danger,ok:green')"></ftui-icon>
               
            </ftui-row>
            <ftui-row>
               
                <ftui-label text="Heizkörper"></ftui-label>
                   
                <ftui-label [text]="wz.heizkoerper_Clima:measured-temp" unit="°C"></ftui-label>
               
                <ftui-icon [name]="wz.heizkoerper:batteryLevel | map('1.8:battery-0, 2.0:battery-1, 2.3:battery-2, 2.5:battery-3, 2.8:battery')"
                           [color]="wz.heizkoerper:batteryLevel | map('1.8:danger, 2.0:warning, 2.3:success, 2.5:secondary, 2.8:green')">
                </ftui-icon>
               
            </ftui-row>
</ftui-grid-tile>

das unten angehängte Tile gebaut, kann ich den Text und auch die Icons irgendwie linksbündig ausrichten?

[setstate]

Da du eine bündige Ausrichtung von untereinander angeordneten Elementen brauchst, würde ich diese in eine gemeinsame Column setzten.

Anstatt:
row
row
row

dann:
row
column. column column

Code Auswählen Erweitern


    <ftui-grid-tile row="4" col="3" height="2" width="2" shape="round">

      <ftui-row>
        <ftui-column align-items="left" margin="2">

          <ftui-label text="Thermostat"></ftui-label>
          <ftui-label text="Radiator"></ftui-label>
          <ftui-label text="Heizkörper"></ftui-label>

        </ftui-column>
        <ftui-column>

          <ftui-label [text]="ftuitest" unit="°C"></ftui-label>
          <ftui-label [text]="ftuitest" unit="°C"></ftui-label>
          <ftui-label [text]="ftuitest" unit="°C"></ftui-label>

        </ftui-column>
        <ftui-column position="left" margin="2" height="95%">

          <ftui-icon [name]="ftuitest| map('0:battery-1,1:battery')"
                     [color]="ftuitest| map('0:danger,1:green')"></ftui-icon>

          <ftui-icon [name]="ftuitest| map('0:battery-1,1:battery')"
                     [color]="ftuitest| map('0:danger,1:green')"></ftui-icon>

          <ftui-icon [name]="ftuitest| map('0:battery-0, 2.0:battery-1, 2.3:battery-2, 2.5:battery-3, 2.8:battery')"
                     [color]="ftuitest| map('0:danger, 2.0:warning, 2.3:success, 2.5:secondary, 2.8:green')">
          </ftui-icon>

        </ftui-column>
      </ftui-row>
    </ftui-grid-tile>


Die ganze Ausrichtungsgeschichte ist, wie gesagt, noch eine Baustelle, aber ich habe jetzt schnell mal align-items und margin hinzugefügt, damit dein Fall funktioniert.

[grossmaggul]

Oh, super, danke!!

[setstate]

Das mit dem Grid im Grid bekomme ich nicht gebacken. Das "Master" Grid ist in der index.html definiert und das "Sub" Grid ist in einer content.html definiert. Dieses Grid wird aber ignoriert und der Inhalt wird irgendwo angezeigt, aber nicht dort, wo es hin soll. Durch Größenveränderung des Browser-Fenster kann man den Inhalt der content.html verschieben. Die nachgeladene html scheint ihren "Nullpunkt" irgendwo anders zu haben und nicht links oben, bzw. es gibt noch einen Offset / Multiplikator.
Wenn man in der content.html das Grid weg läßt, wird der Inhalt mittig in der vorgesehenen Fläche angezeigt.

Gibt es Ideen was ich falsch mache?

Das Problem ist jetzt gelöst. Es fehlt der Trigger zu Neuberechnen des Grids, wenn etwas nachgeladen wurde.

[setstate]

Ist zusätzlich noch folgende Änderung möglich?

Code Auswählen Erweitern


34c34
<           <span class="close">&times;</span>
---
>           <span class="close"><slot name="close">&times;</slot></span>


Done

P.S.: Ich war echt überrascht, dass ich "};" eingeschleust hatte ...

? Wo? Was habe ich verpasst?

[SirMarco]

ich versuche das gerade ohne zusätzlich Lib nachzubauen.

Freue mich schon drauf, da ich FTUI zu 90% auf mobilen Geräten nutze. in Deiner css habe ich etwas gefunden zu einem Menu, aber schaffe das nicht zum einbauen.
Es geht unter 480px einfach nicht auf

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="favicon.ico" rel="icon" type="image/x-icon" />

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

  <!-- when serving the page with other web servers, e.g. lighttpd -->
  <meta name="fhemweb_url" content="http://192.168.2.15:8001/fhem/">

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

  <title>FTUI Demo</title>
</head>

<body>
  <nav class="menu">
    <div class="menu-trigger"></div>
    <header class="white">Slideout Demo</header>
    <ul>

    </ul>
  </nav>
<main id="panel" class="">
  <header id="header-nav" class="fixed row">

  </header>

</main>
</body>
</html>

aus deiner ftui.css

Code Auswählen Erweitern

@media screen and (max-width: 480px) {
  .menu ~ main>.page {
    padding-left: 0px;
  }
  .menu {
    width: 230px !important;
    box-shadow: 0 0 0 100em rgba(0, 0, 0, 0);
    transform: translate3d(-230px, 0, 0);
    -webkit-transform: translate3d(-230px, 0, 0);
    transition: all 0.3s ease-in-out;
  }
  .menu .menu-trigger {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 100%;
    background: #1D1F20;
  }
  .menu .menu-trigger:before, .menu .menu-trigger:after {
    content: '';
    width: 50%;
    height: 2px;
    background: #fff;
    border-radius: 10px;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    -webkit-transform: translate3d(-50%, -50%, 0);
  }
  .menu .menu-trigger:after {
    top: 55%;
    transform: translate3d(-50%, -50%, 0);
    -webkit-transform: translate3d(-50%, -50%, 0);
  }
  .menu.show {
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.6);
  }
}

[setstate]

Das sind Reste aus der Version 2. Das fliegt bald raus

[grossmaggul]

Wäre es wohl möglich das "popup_target" auch noch in <ftui-image> einzubauen?
Oh, sorry, geht ja schon, hatte einen Tippfehler.

Mir ist aber nochwas anderes eingefallen, wäre es möglich beim Slider eine Skala einzubauen oder geht das schon?

[Eisix]

@setstate

Durch die Änderung der Grid handlings der contentfiles werden popups jetzt nur noch innerhalb des grid-tile geöffnet und nicht bezogen auf das globale Grid.

Gruß
Eisix

[grossmaggul]

Kurze Frage, kann man beim knob die Größe des "Valuetextes" beeinflussen?

[setstate]

Kurze Frage, kann man beim knob die Größe des "Valuetextes" beeinflussen?

nein, noch nicht. Ich bin mir auch noch nicht sicher, ob mal das als css Variable anbieten sollte

--knob-value-text-size,
--knob-scale-text-size,

oder als Attribute

Code Auswählen Erweitern

<ftui-knob [(value)]="dummy1" type="scale" has-value-text value-text-size="1em"></ftui-knob>

[grossmaggul]

Schwierige Frage, aber konsistenter fände ich es, wenn man es über class="size-x" angeben könnte, wie bei "label".

Und dann hat sich eben noch eine Frage für mich ergeben, beim Mediaplayer habe ich ja einen Fortschrittsbalken, der auch die Dauer des Songs anzeigt. Zur Zeit allerdings nur in Sekunden. Gibt es eine Möglichkeit, das in Minuten umrechnen zu lassen?

[SirMarco]

Es gibt jetzt auch ftui-content

Code Auswählen Erweitern

<ftui-content file="examples/contents/content-view1.html" room="Room1"></ftui-content>

Im Template-File kann man auch Platzhalter mit doppelter geschweifter Klammer verbauen, die im ftui-content als beliebiges Attribute
angegeben werden können.

Code Auswählen Erweitern

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

Hallo zusammen

Verstehe ich das Richtig, das auch device Namen übergeben werden können?
Wenn ja, mag mir jemand ein Beispiel machen?

Besten Dank

Grüsse