FTUI version 3

[mr_petz]

@mr_petz:
OK, danke für die Info und den Link.
Wäre toll, wenn es die von mir angesprochene Funktionalität geben würde.

Gruß
eurofinder

Ich habe mal zum testen eine einfache Übergangslösung...
Ob die gut, sinnvoll oder in allen Lagen passt und funktioniert weis ich nicht.
In meinen Test´s ging es immer. Es wurden danach auch die Readings gelesen...
Hier wird nachdem die Seite komplett geladen ist die innerHTML ausgetauscht/replaced. Ist so ähnlich wie im Content (hier wird der Inhalt des file replaced).
Es muss ein komplettes html inkl. body sein. Alles andere geht ja über content-file.
Zahlen können nicht als Attribute angegeben werden und das script muss am besten in den head.
Wenn das hier von @setstate nicht gewünscht wird, dann lösche ich diesen Beitrag!
@OdfFhem könnte da vielleicht auch mal drüber schauen...

Bsp.:

Code Auswählen Erweitern


im ftui-tab
        <ftui-tab view="View1" direction="vertical" active device1="dummy">
          <ftui-icon name="home1"></ftui-icon>
          <ftui-label>Home</ftui-label>
        </ftui-tab>

und im ftui-tab-view:

    <ftui-tab-view id="View1">
      <ftui-grid-tile row="1" col="2" height="5" width="19">
        <header>{{device1}}</header>
          <ftui-label [text]="{{device1}}" class="size-5 align-left"></ftui-label>
      </ftui-grid-tile>
    </ftui-tab-view>

Hier wird device1 ersetzt durch den definierten Namen. Man muss natürlich jetzt eindeutige ID´s vergeben! Wenn welche doppelt gesetzt sind, wird das zuerst gelesene genommen! Groß/Kleinschreibung ist auch egal. Wenn DEVICE1 wird auch device1 oder Device1 gesetzt!

Code Auswählen Erweitern


<script>
  document.onreadystatechange = () => {
    if (document.readyState === 'complete') {
      setVariable();
    }
  };

  function setVariable() {
    const rawText = document.body.innerHTML;
    const solvedContent = String(rawText).replace(/\{\{([^}]+)\}\}/g, variable => {
      return document.body.querySelector('['+variable.slice(2, -2)+']').getAttribute(variable.slice(2, -2)) || '';
    });
    document.body.innerHTML = solvedContent;
  }
</script>


alternativ das ans Ende vor dem </body>:

Code Auswählen Erweitern


<script>
  setVariable();
  function setVariable() {
    const rawText = document.body.innerHTML;
    const solvedContent = String(rawText).replace(/\{\{([^}]+)\}\}/g, variable => {
      return document.body.querySelector('['+variable.slice(2, -2)+']').getAttribute(variable.slice(2, -2)) || '';
    });
    document.body.innerHTML = solvedContent;
  }
</script>

Teste es mal und sag Bescheid ob ok oder nicht...

LG mr_petz

[docolli]

Ich habe inzwischen eine relative große FTUI index.html, da ich mein GUI per <ftui-tab> bzw. <ftui-tab-view> in einzelne Tabs aufgeteilt habe. Zwischen die einzelnen <ftui-tab-view> Tags habe ich jeweils die für mich passenden <ftui-grid-tile> samt ihrem Inhalt platziert.
Jetzt möchte ich das Ganze durch Auslagerung in einzelne Dateien besser strukturieren, leider komme ich mit <ftui-content> innerhalb der <ftui-tab-view> nicht zum Ziel.

Code Auswählen Erweitern


<ftui-grid base-width="85" base-height="79" margin="5">

<ftui-grid-tile row="1" col="1" height="6" width="1">
  <ftui-column>
<ftui-tab view="Home" direction="vertical" active>
  <ftui-icon name="home"></ftui-icon>
  <ftui-label>Übersicht</ftui-label>
</ftui-tab>
<ftui-tab view="Strom" direction="vertical" active>
  <ftui-icon name="battery"></ftui-icon>
  <ftui-label>Strom</ftui-label>
</ftui-tab>
<ftui-tab view="Auto" direction="vertical">
  <ftui-icon name="automobile"></ftui-icon>
  <ftui-label>Auto</ftui-label>
</ftui-tab>
<ftui-tab view="Wasser" direction="vertical">
  <ftui-icon name="shower"></ftui-icon>
  <ftui-label>Wasser</ftui-label>
</ftui-tab>
<ftui-tab view="Heizung" direction="vertical">
  <ftui-icon name="thermometer1"></ftui-icon>
  <ftui-label>Heizung</ftui-label>       
</ftui-tab>
<ftui-tab view="Garten" direction="vertical">
  <ftui-icon name="tree"></ftui-icon>
  <ftui-label>Garten</ftui-label>
</ftui-tab>
<ftui-tab view="View5" direction="vertical">
  <ftui-icon name="home"></ftui-icon>
  <ftui-label>Innenräume</ftui-label>
  </ftui-tab>
  </ftui-column>
</ftui-grid-tile>


<ftui-tab-view id="Home">
<ftui-content file="view_home.html"></ftui-content>
</ftui-tab-view>

<ftui-tab-view id="Strom">
<ftui-content file="view_strom.html"></ftui-content>
</ftui-tab-view>

...

</ftui-grid>



Ich habe den Code zwischen <ftui-tab-view> in eine extra Datei kopiert und in der index-Datei durch <ftui-content> ersetzt, leider passt dann das Grid-Layout gar nicht mehr. Die einzelnen grid-tiles sind einfach untereinander platziert und nutzen die gesamte Breite des viewport aus.

Ergänze ich die externe Datei mit der grid Definition <ftui-grid base-width="85" base-height="79" margin="5"> .... </ftui-grid>, so passt das Layout wieder. ABER: Dann funktioniert die Tab-View Steuerung nicht mehr. Beim Klick auf ein Tab-Icon passiert nichts.

Hat mir jemand einen Tipp, wie man Tab-View und ftui-content sinnvoll kombinieren kann, dass es funktioniert?

EDIT: Hab es selber geschafft, dank der Frage von Eisix und seinem Beispielcode. Problem bei mir war, dass ich das <ftui-content> noch in ein <ftui-grid-tile> packen musste. Ausserdem musste ich auf die Reihenfolge der Elemente im Code achten. Diese bestimmt die Position im Z-Stapel und bei mir hat sich damit ein grid Element "oberhalb" des Tab-View Menu befunden, somit waren die Links "dahinter" und nicht mehr erreichbar.

[juemuc]

@juemuc

Ich habe mal meinen wdtimer einwenig angepasst.
Jetzt kannst du deine sunrise/sunset- timer einlesen und die Wochentage setzen oder neue Standardtimer hinzufügen.
Du kannst aber noch keine neuen sunrise/sunset- timer erstellen. Löschen ja.
Neue Version zum testen ist Online bei mir.

LG mr_petz

Super. Ich werde gleich testen und berichten.
Viele Grüße
Jürgen

[Eisix]

Hallo,

ich habe ein Problem mit <video> wenn ich <ftui-content> nutze. Ohne content-file wird das Video abgespielt (tab-view Main), mit (tab-view Main1) schlägt es fehl. Habe mal alles andere weg genommen und eine Teststellung gebaut. Lediglich hls.js muss installiert werden.

test4.html

Code Auswählen Erweitern


<!DOCTYPE html>
<html>

<head>
        <script src="ftui.js"></script>
        <link href="ftui.css" rel="stylesheet">
        <link href="favicon.ico" rel="icon" type="image/x-icon" />
        <meta name='debug' content='0'>
        <meta name='toast_position' content='topCenter'>

        <script src="./node_modules/hls.js/dist/hls.js"></script>

        <title>FTUI 3.0 MediaPad</title>
</head>

<body>
<ftui-grid base-width="69" base-height="48" margin="1">
        <ftui-grid-tile row="1" col="1" height="17" width="1">
                <ftui-column>
                        <ftui-cell class="my-top-40">
                                <ftui-row>
                                        <div class="size-0">FTUI : 3</div>
                                </ftui-row>
                                <ftui-label [text]="REFRESH" class="size-0"></ftui-label>
                        </ftui-cell>
                        <ftui-tab view="Main" active><ftui-icon class="size-2 my-top-30" name="home1"></ftui-icon></ftui-tab>
                        <ftui-tab view="Main1" active><ftui-icon class="size-2 my-top-30" name="home1"></ftui-icon></ftui-tab>
                        <div class="fixed-bottom">
                                <ftui-column>
                                        <ftui-clock format="eeee" class=""></ftui-clock>
                                        <ftui-clock format="DD.MM.YYYY" class=""></ftui-clock>
                                        <ftui-clock format="hh:mm" class=""></ftui-clock>
                                </ftui-column>
                        </div>
                </ftui-column>
        </ftui-grid-tile>

        <ftui-tab-view id="Main">
                <ftui-grid-tile row="1" col="2" height="17" width="18" class="">
<ftui-row>
<ftui-cell>
        <ftui-icon class="size-1"
                [name]="Klingel:state | map('.*:bell-o')"
@click="popup_Klingel1.open()"
></ftui-icon>
<ftui-label>Klingel</ftui-label>
</ftui-cell>
</ftui-row>
</ftui-grid-title>
</ftui-tab-view>

        <ftui-tab-view id="Main1">
                <ftui-grid-tile row="1" col="2" height="17" width="18" class="">
                        <ftui-content file="test4.1.html"></ftui-content>
                </ftui-grid-tile>
        </ftui-tab-view>
</ftui-grid>

<ftui-popup id="popup_Klingel1" [active]="Klingel:state | map('on: true, off: false')" height="480px" width="640px" position="page" timeout="120">
        <video id="video2" controls width="100%" height="100%" </video>
    <script>
      var video = document.getElementById('video2');
      if (Hls.isSupported()) {
        var hls = new Hls({
          debug: true,
        });
        hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
        hls.attachMedia(video2);
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
          video.muted = true;
          video.play();
        });
      }
    </script>
</ftui-popup>

</body>
</html>


test4.1.html

Code Auswählen Erweitern


<ftui-grid base-width="69" base-height="48" margin="1">               
        <ftui-grid-tile row="1" col="11" height="2" width="1" class="mybgimage">
                <header>T&uuml;r</header>
                <ftui-content file="test4.1.1.html"></ftui-content>
        </ftui-grid-tile>
</ftui-grid>


test4.1.1.html

Code Auswählen Erweitern


<ftui-row>
<ftui-cell>
        <ftui-icon class="size-1"
                [name]="Klingel:state | map('.*:bell-o')"
@click="popup_Klingel.open()"
></ftui-icon>
<ftui-label>Klingel</ftui-label>
</ftui-cell>
</ftui-row>

<ftui-popup id="popup_Klingel" [active]="Klingel:state | map('on: true, off: false')" height="480px" width="640px" position="page" timeout="120">
        <video id="video4" controls width="100%" height="100%" </video>
    <script>
      var video = document.getElementById('video4');
      if (Hls.isSupported()) {
        var hls = new Hls({
          debug: true,
        });
        hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8');
        hls.attachMedia(video2);
        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
          video.muted = true;
          video.play();
        });
      }
    </script>
</ftui-popup>

Hat jemand eine Idee?

Habe die Loesung gefunden, das popup muss in den body der test4.html.

Gruss
Eisix

[juemuc]

@juemuc

Neue Version zum testen ist Online bei mir.

LG mr_petz

Hallo mr_petz,

auch wenn ich die Datei mit "sudo wget https://github.com/mr-petz/ftui/blob/weekdaytimerset/www/ftui/components/timerset/timerset.component.js" herunterlade, sieht die Datei komisch aus und hat fast 500k. Was mache ich falsch?

Viele Grüße
Jürgen

[juemuc]

Hallo,
ich benötige noch etwas Unterstützung im Bereich der Formatierung. Kann ich unter FTUI3 auch Rahmen ziehen wie in FTUI2 (s. Screenshots) Wie bekomme ich unter FTUI3 die ersten beiden Zeilen auf der linken Seite beim FHEM-Monitor in eine "Umrandung".

Code Auswählen Erweitern

  <ftui-grid-tile row="1" col="11" height="4" width="7">
    <header>RASPBERRY PI 3</header>
    <ftui-row>
      <ftui-column>
        <ftui-label color="white" size="3"
              text="uptime">
        </ftui-label>
        <ftui-label color="white" size="3"
              text="letzter reboot">
        </ftui-label>
        <ftui-label color="white" size="3"
              text="Temperatur">
        </ftui-label>
      </ftui-column>
      <ftui-column margin="2">
        <ftui-label color="white" size="3"
              [text]="pi_Sys:uptime_text">
        </ftui-label>
        <ftui-label color="white" size="3"
              [text]="pi_Sys:starttime_text">
        </ftui-label>
        <ftui-label color="white" size="3"
              [text]="pi_Sys:cpu_temp">
        </ftui-label>
      </ftui-column>
    </ftui-row>
  </ftui-grid-tile>

  <ftui-grid-tile row="5" col="11" height="4" width="7">
    <header>FHEM-Monitor</header>
    <ftui-row>
      <ftui-column>
<!--        <ftui-column align-items="center"> -->
          <ftui-label color="white" size="3" align-item="center"
                text="FHEM-uptime">
          </ftui-label>
          <ftui-label color="white" size="1"
                [text]="pi_Sys:fhemuptime_text">
          </ftui-label>
<!--        </ftui-column> -->
        <ftui-label color="white" size="3"
              text="FHEM-Updates">
        </ftui-label>
        <ftui-label color="white" size="3"
              text="FHEM backup">
        </ftui-label>
      </ftui-column>
      <ftui-column margin="2">
        <ftui-button [(value)]="xx" shape="circle" height="4em"  width="4em" color="orange">
          <ftui-icon color="black" size="2"
                path="../images/fhemSVG" name="system_fhem_reboot">
          </ftui-icon>
        </ftui-button>
        <ftui-button [(value)]="xx" shape="circle" height="4em"  width="4em" color="orange">
          <ftui-icon color="black" size="2"
                path="../images/fhemSVG" name="system_fhem_update">
          </ftui-icon>
        </ftui-button>
        <ftui-button [(value)]="xx" shape="circle" height="4em"  width="4em" color="orange">
          <ftui-icon color="black" size="2"
                path="../images/fhemSVG" name="system_backup">
          </ftui-icon>
        </ftui-button>
      </ftui-column>
    </ftui-row>
  </ftui-grid-tile>


Viele Grüße
Jürgen

[softwear]

Der FTUI-Slider passt nach einem automatischen Update seiner Skala nicht den value-Balken mit an. Erst wenn ein verknüpftes Reading aktualisiert wird, updatet mit dem value auch der Balken. Das automatische Update, welches ausgelöst wird, liegt in einem dem Slider nachfolgenden Button, der per [hidden] verborgen wird. Heißt, der Slider erhält mehr Platz und nutzt diesen bezüglich der Skala, ohne jedoch die Länge seiner value-Darstellung dem anzupassen.

Ist das verständlich? Ich packe vorsichtshalber den Code meines panels dazu:

Code Auswählen Erweitern

<ftui-row margin="0">
  <!-- desired_value und auto/manuell -->
  <ftui-column width="18%" direction="vertical">
    <ftui-row height="20%" margin="0">
      <ftui-label size="small"
                  text="{{deviceTH}}"
                  color="gray"></ftui-label>
    </ftui-row>
    <ftui-row height="70%" margin="0">
      <!-- Automatik control auto/manual über pairSet-dummy -->
      <ftui-button fill="none" readonly>
        <ftui-icon size="-1" path="../images/openautomation" name="time_automatic" margin="0.2" color="gray"></ftui-icon>
      </ftui-button>
    </ftui-row>
  </ftui-column>
  <!-- Titel und Slider -->
  <ftui-column>
    <ftui-row height="20%" margin="-1">
     <ftui-label size="2" text="{{panelTitle}}"></ftui-label>
    </ftui-row>
    <ftui-row height="70%" margin="-0.4" padding="0">
      <ftui-slider [(value)]="{{tempSensor}}:temperature" color="cold-hot" min="{{sliderMin}}" max="{{sliderMax}}" tick="{{sliderTick}}" wide-tick="{{sliderWideTick}}" has-ruler handle="none" readonly></slider>           
    </ftui-row>
  </ftui-column>
  <!-- Heizungsbutton ir_down -->
  <ftui-column width="18%" direction="vertical">
    <ftui-row height="20%" margin="0">
      <ftui-label [text]="{{tempSensor}}:temperature" unit="°C" has-unit></ftui-label>
    </ftui-row>
    <ftui-row height="70%" margin="0">
      <!-- Button wird ausgeblendet, wenn device ein dumdum ist -->
      <ftui-button [(value)]="{{device}}" states='toggle' fill="none" [hidden]="{{device}} | map('`on|off`:false,`.*`:true')">
        <ftui-icon size="0" path="../images/fhemSVG" name="ir_down" margin="0.2"
                   [color]="{{deviceSwitch}} | map('on:red,off:primary,`.*`:gray')"></ftui-icon>
      </ftui-button>
      <!-- Button wird ausgeblendet, wenn device verfügbar/schaltbar ist -->
      <ftui-button [value]="{{device}}" fill="none" readonly [hidden]="{{device}} | map('`on|off`:true,`.*`:false')">
        <ftui-icon size="0" path="../images/fhemSVG" name="ir_down" margin="0.2"
                   [color]="{{deviceSwitch}} | map('on:orange,`.*`:gray')"></ftui-icon>
      </ftui-button>
    </ftui-row>
  </ftui-column>

</ftui-row>


Nochmal in Bildern angehängt (falsch heißt direkt nach dem Zeichnen, richtig nach dem ersten Reading-Update).

Habe ich eine Option, zu irgendeiner Zeit ein Update des Sliders zu triggern? Oder sollte ich mich um die Umgestaltung des Panels kümmern? Vielen Dank bereits für eure Vorschläge!

[softwear]

Ich habe jetzt die Sache wieder vereinfacht und den zweiten Button rausgeworfen, sodass keine Größenänderung mehr stattfindet. Stattdessen [readonly] beim Button gemapt, sodass er nicht mehr schalten kann. Der Slider stimmt, ist lesbarerer Code. Muss ich mal testen, wie ich die zweite Farbe für einen andersartigen Schalter über den Status 'on' bereitstellen kann.

[softwear]

Ok, gelöst, noch buttonOffColor eingeführt als Notlösung. Danke, dass ich drüber schreiben dürfte. Hilft auch bereits manchmal. Aber ist es nun ein Bug des Sliders, so wie es aussieht?

[Eisix]

@juemuc

Code Auswählen Erweitern


<ftui-column>
<ftui-row>
<table style="border:1px solid grey; height:95%; width:95%">
        <tr>
                <td style="border:2px solid grey;"><center><div class="inline"><big>FHEM uptime<br></big></div>
                    <ftui-label class="size-1" [text]="sysmon:fhemuptime_text"></ftui-label>
                        </td>
                        <td style="border:2px solid grey;">
<center>
        <ftui-button class="size-2" shape="circle" color="orange" fill="solid">
                <ftui-icon class="size-1" name="system_fhem_reboot" color="white"
@click="popup_reboot.open()"
                ></ftui-icon>
        </ftui-button>
</center>
                        </td>
</tr>
                <tr>
                        <td style="border:2px solid grey;"><center><div class="inline"><big>FHEM update</big></div>
                        </td>
                        <td style="border:2px solid grey;">
                                <center>
                                <ftui-button class="size-2" shape="circle" color="orange" fill="solid">
                                        <ftui-icon class="size-1" name="system_fhem_update" color="white"
@click="popup_update.open()"
                                        ></ftui-icon>
<ftui-badge color="danger" [text]="UPDATE:ALL">
                                </ftui-button>
                                </center>
                        </td>
                </tr>
                <tr>
                        <td style="border:2px solid grey;"><center><div class="inline"><big>FHEM rollback</big></div>
                        </td>
                        <td style="border:2px solid grey;">
                                <center>
                                <ftui-button class="size-2" shape="circle" color="orange" fill="solid">
                                        <ftui-icon class="size-1" name="control_arrow_turn_left" color="white"
@click="popup_rollback.open()"
                                        ></ftui-icon>
                                </ftui-button>
                                </center>
                        </td>
                </tr>
                <tr>
                        <td style="border:2px solid grey;"><center><div class="inline"><big>FHEM backup</big></div>
                        </td>
                        <td style="border:2px solid grey;">
                                <center>
                                <ftui-button class="size-2" shape="circle" color="orange" fill="solid">
                                        <ftui-icon class="size-1" name="system_backup" color="white"
@click="popup_backup.open()"
                                        ></ftui-icon>
                                </ftui-button>
                                </center>
                        </td>
                </tr>
</table>
</ftui-row>
</ftui-column>


Kannst weiter Table benutzen z.B.

Gruß
Eisix

[juemuc]

Hallo Eisix,

danke für die Info. Das hat geholfen.

Viele Grüße
Jürgen

[Superposchi]

Ich wollte mich bei Gelegenheit mal mit FTUI3 beschäftigen. Bisher läuft mein Frontend mit FTUI2.
Worauf muss ich beim Umstieg achten? Es muss ja so wie ich es verstehe alles neu geschrieben werden, da es nicht abwärts kompatibel ist und der Code sich durch HTML5 stark unterscheidet.

Wie lade ich die Dateien vom Github runter?
Ich finde nirgendwo einen download-Button?

[OdfFhem]

Wie lade ich die Dateien vom Github runter?
Ich finde nirgendwo einen download-Button?

Es gibt verschiedene Links zum Einstieg - einer davon wäre https://wiki.fhem.de/wiki/FHEM_Tablet_UI_v3.

Für Installation/Update stehen dort die gebräuchlichen Schritte ... analog zu FTUI2.

Alternativ könnte man natürlich auch selbst eine ZIP-Datei herunterladen ... der zugehörige Button ist aber z.B. bei einem Tablet im Portrait-Modus nicht (immer) zugänglich ... normalerweise neben "Go to file".

[M.Piet]

Moin,
ich habe ein Popup der Türklingel.
Es geht auf, wenn jemand auf die Türklingel drückt. Es verschwindet aber sofort. Außer man hällt gedrückt.
Das timeout="60" scheint nur zu greifen, solange auch die Quelle den entsprechenden Status "on" hat.
Muss ich noch was hinzufügen, damit das Popup aufbleibt, auch wenn der state wieder auf "off" wechselt?

Danke schon mal für die Hilfe.

Code Auswählen Erweitern

<ftui-popup id="pop2.tuerklingel.OG" [active]="HMW_IO_12_Sw14_DR_NEQ0308160_15:state | map('on: true, off: false')" timeout="60" width="1240px" height="815px">
<header>CAM 1 Haustür</header>
<ftui-row>
<ftui-column>
<ftui-image [src]="Kamera_CAM1_Haustuer:StmKeymjpegHttp" width="990px"></ftui-image>
</ftui-column>
<ftui-column>
<ftui-cell>
<ftui-image src="./images/diverses/familyguy_door.gif" ></ftui-image>
</ftui-cell>
<ftui-cell>
<ftui-button popup-close>close</ftui-button>
</ftui-cell>
</ftui-column>
</ftui-row>
</ftui-popup>

[Eisix]

@M.Piet

Probier mal mit Position wie in meinem Beispiel weiter oben.

Code Auswählen Erweitern



<ftui-popup id="popup_Klingel" [active]="Klingel:state | map('on: true, off: false')" height="480px" width="640px" position="page" timeout="120">



Gruß
Eisix