FTUI version 3

[meier81]

ja, das ist ein Timing-Problem. Bei jedem Contentfiles wird die Websocket-Connection und das Refresh neu angestoßen. Ich habe jetzt ein delay eingebaut, damit das nicht zu früh und zu oft passiert.

Hi setstate, hab eben mal geupdatet und die Zwischenlösung mit der Definition von torte aus der index.html wieder rausgenommen, scheint jetzt fehlerfrei zu funktionieren. Man sieht jetzt bei der Seitenaktualisierung einen kurzen Versatz beim Laden (du hast ja glaube ich 500ms eingestellt) und dann sind die Symbole alle korrekt da.

Vielen Dank schonmal.

Gruß Markus

[torte]

ja, das ist ein Timing-Problem. Bei jedem Contentfiles wird die Websocket-Connection und das Refresh neu angestoßen. Ich habe jetzt ein delay eingebaut, damit das nicht zu früh und zu oft passiert.

Hallo Setstate,

vielen Dank. läuft ! 

Viele Grüße
Torte

[meier81]

Nabend euch allen,

hab nochmal ein Problem. Ich möchte hier den Button für meinen "Schlafmodus" verwenden, dies ist eine Systemvariable im Modul HMCCU.

Folgendes habe ich bislang definiert:

Code Auswählen Erweitern

<ftui-button [(value)]="ftuitest">
<ftui-icon [name]="debmatic:Schlafmodus_Eltern | map('true:bed, false:child')"></ftui-icon>
</ftui-button>

Die Anzeige des Icons funktioniert soweit problemlos, um die Variable aber zu setzen muss ich folgendes in der Komandozeile von fhem eingeben:

Code Auswählen Erweitern

set debmatic var Schlafmodus_Eltern true

bzw. zum ausschalten

Code Auswählen Erweitern

set debmatic var Schlafmodus_Eltern false

Lässt sich das hier so einfach umsetzen und falls ja wie? Hab da erstmal keinen Plan wie ich das anstelle von ftuitest eintragen soll.

Gruß Markus

[mr_petz]

Code Auswählen Erweitern

@click="sendFhem('set debmatic var Schlafmodus_Eltern true')"
wäre eine möglichkeit...

[meier81]

Code Auswählen Erweitern

@click="sendFhem('set debmatic var Schlafmodus_Eltern true')"
wäre eine möglichkeit...

Das wäre dann aber rein als "Tastfunktion", mit der Anweisung könnte ich nicht toggeln, also hinten true/false umschalten, richtig?

[mr_petz]

oder so:

Code Auswählen Erweitern

(value)="debmatic" states="var Schlafmodus_Eltern true,var Schlafmodus_Eltern false"
und zum mappen:

Code Auswählen Erweitern

debmatic:Schlafmodus_Eltern | map('true:bed, false:child')
wenn das Reading so stimmt

[meier81]

Danke dir mal für die Antwort, glaube ich bekomme damit auch das gleiche Problem bezüglich dem Nachführen. Hier nochmal meine jetzige Definition, bis auf ne Kleinigkeit geht soweit alles:

Code Auswählen Erweitern

<ftui-button [value]="debmatic:Schlafmodus_Eltern" (value)="set debmatic var Schlafmodus_Eltern $value" states="true,false">
<ftui-icon [name]="debmatic:Schlafmodus_Eltern | map('true:bed, false:child')"></ftui-icon>
</ftui-button>

Im fhem gibt es bei mir ein Device Namens "debmatic", in diesem Device gibt es ein Reading mit dem Namen "Schlafmodus_Eltern". Dieses Reading hat den Wert "false" bzw. "true". Von daher ist das lesen ja alles ganz normaler Standard, funktioniert auch einwandfrei bei der Icon-Zuweisung von oben.
Setzen kann man dieses Reading leider nicht klassisch wie z.B. bei einem Dummy, sondern mit "set debmatic var Schlafmodus_Eltern true" bzw. auch false.
Selbst das geht mit dem Output Binding von oben, Befehl wird korrekt gesetzt.

Das einzige Problem das ich jetzt noch habe ist das irgend etwas im Input Binding klemmt, wobei die Definition ja so korrekt sein sollte, ist ja die gleiche wie für das Icon. Ich habe deshalb auch das Output Binding extra so gewählt, damit beim Befehl der state true und false gesetzt wird und bei der Rückmeldung auch true und false drinsteht. Sobald ich aber von anderer Stelle die Variable umschalte wird zwar das Icon korrekt geändert, will ich jetzt aber über den Button wieder bedienen lässt der sich zwar drücken, ich bekomme aber unten links keine Meldung das ein Befehl abgesetzt wurde. Abhilfe schafft nur ein Refresh der Seite.

Also ich bin jetzt erstmal mit meinem Latein am Ende, vielleicht hat von euch da noch jemand eine Idee.

[Sailor]

Ein herzerfrischendes "Moin" vom achtern Diek vorweg

Ich bin zur Zeit auf der Zielgeraden was die Portierung meiner ftui von v2 auf v3 betrifft.

Leider habe ich bei der Einbindung meines Video-Streams noch so meine Probleme...

Ich habe den Code

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">
</ftui-image>


So meine Probleme... Mal funktioniert es oder auch nicht.
Nach dem Neustart vom Browser funktioniert es mal  und mal wieder nicht.

Cache habe ich geloecht aber ohne Erfolg...

Kann Jemand dieses Problem reproduzieren?

Gruß
    Sailor

[Init]

Hallo zusammen,

ich habe gerade meinen ersten Gehversucht mit FTUI3 gestartet.

Ich würde gerne erstmal das Fundament für die Seite schaffen.

Die Seite soll im Wohnzimmer auf einem Tablet an der Wand mit 1280 x 800 laufen und auf unseren iPhones.

Als Basis habe ich "examples/content.html" genommen, da ich die Anordnung vom Menü in der Fußzeile gut finde.

Da ich nicht auf den Unterseiten jeweils einen Header redundant hinzufügen möchte, habe ich in der index.html einen <header> Bereich definiert.
Das klappt auch ganz gut, es fehlt nur noch die Übernahme der Raumbezeichnung im Header, aber da muss ich mich noch mit den Bindings beschäftigen.

Aufgefallen ist mir jetzt nur, dass der Scrollbereich von meinem main bis in den footer geht und dann ggf. das Ende meiner Unterseite durch den Footer überlagert wird.
Mit dem Header habe ich das Problem nicht.

Könnt ihr mal über meine index schauen und mir Anregungen geben, bevor ich mich verrenne?

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/bright-theme.css" rel="stylesheet">
  <link rel="icon" href="/fhem/ftui/images/favicon.ico" type="image/x-icon" />
  <!-- retina iPhone iOS 7 -->
  <link rel="apple-touch-icon" href="/fhem/ftui/images/snail120.png" sizes="120x120">
  <!-- retina iPad iOS 7 -->
  <link rel="apple-touch-icon" href="/fhem/ftui/images/snail152.png" sizes="152x152">
  <!-- avoid 300ms delay on click-->
  <meta name="viewport" content="width=device-width, initial-scale=0.7">
  <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>Schneckendashboard</title>
</head>
<body>
  <header >
    <ftui-row>
      <ftui-column  width="20%">Logo</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="contents/content-home.html" room="Room1"></ftui-content>
    </ftui-tab-view>
    <ftui-tab-view id="View2">
      <ftui-content file="contents/content-energy.html" room="Room2"></ftui-content>
    </ftui-tab-view>
    <ftui-tab-view id="View3">
      <ftui-content file="contents/content-garden.html" room="Room3"></ftui-content>
    </ftui-tab-view>
    <ftui-tab-view id="View4">
      <ftui-content file="contents/content-music.html" room="Room4"></ftui-content>
    </ftui-tab-view>
  </main>
  <footer class="row fixed border-top">
    <ftui-tab fill="clear" direction="vertical" view="View1" [value]="dummy1 | map('Wert1:on, .*:off')" active>
        <ftui-icon name="home1"></ftui-icon>
        <label class="small">Home</label>
      </ftui-tab>
      <ftui-tab fill="clear" direction="vertical" view="View2" [value]="dummy1 | map('Wert2:on, .*:off')">
        <ftui-icon name="weather-partly-lightning"></ftui-icon>
        <label class="small">Energie</label>
      </ftui-tab>
      <ftui-tab fill="clear" direction="vertical" view="View3" [value]="dummy1 | map('Wert3:on, .*:off')">
        <ftui-icon name="leaf"></ftui-icon>
        <label class="small">Garten</label>
      </ftui-tab>
      <ftui-tab fill="clear" direction="vertical" view="View4" [value]="dummy1 | map('Wert4:on, .*:off')">
        <ftui-icon name="music"></ftui-icon>
        <label class="small">Multimedia</label>
      </ftui-tab>
  </footer>
</body>
</html>


Die Unterseite sieht dann so aus:

Code Auswählen Erweitern

<ftui-grid base-width="70" base-height="70" margin="5" resize>
  <ftui-grid-tile row="1" col="1" height="6" width="6">
    <header></header>

      <ftui-chart title="Wärmepumpe">
        <ftui-chart-data label="Außen" log="FileLog_ALPHA_INNOTEC_SWC_60H" spec="4:ambientTemperature" color="warning"></ftui-chart-data>
        <ftui-chart-data label="Vorlauf" log="FileLog_ALPHA_INNOTEC_SWC_60H" spec="4:flowTemperature" background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)"></ftui-chart-data>
        <ftui-chart-data label="Rücklauf" log="FileLog_ALPHA_INNOTEC_SWC_60H" spec="4:returnTemperature"  color="#d63056"></ftui-chart-data>
        <ftui-chart-controls units="day, week"></ftui-chart-controls>
      </ftui-chart>
   
  </ftui-grid-tile>
  <ftui-grid-tile row="7" col="1" height="6" width="6">
      <ftui-chart title="Hauskraftwerk">
        <ftui-chart-data label="Solarleistung" log="FileLog_S10E" spec="4:Solarleistung" color="warning"></ftui-chart-data>
        <ftui-chart-data label="Hausleistung" log="FileLog_S10E" spec="4:Hausleistung" background-color="rgba(75,192,192,0.2)" color="rgba(75,192,192,1)"></ftui-chart-data>
        <ftui-chart-data label="Batterieleistung" log="FileLog_S10E" spec="4:Batterieleistung" background-color="#d6305650" color="#d63056"></ftui-chart-data>
        <ftui-chart-data label="Netzleistung" log="FileLog_S10E" spec="4:Netzleistung" color="red"></ftui-chart-data>
        <ftui-chart-controls units="day, week"></ftui-chart-controls>
      </ftui-chart>
   
  </ftui-grid-tile>
</ftui-grid>

Ich bin für alle Anregungen dankbar.

Viele Grüße
Marc

[Sailor]

Hallo Marc

Da ich nicht auf den Unterseiten jeweils einen Header redundant hinzufügen möchte, habe ich in der index.html einen <header> Bereich definiert.
Das klappt auch ganz gut, es fehlt nur noch die Übernahme der Raumbezeichnung im Header, aber da muss ich mich noch mit den Bindings beschäftigen.

Eine aehnliche Frage hatte ich auch schon gestellt:
https://forum.fhem.de/index.php/topic,115259.msg1139417.html#msg1139417

Ich habe es jetz so gemacht wie im Beispiel- index.html und dann viel mit <ftui-content> fuer jede Kachel gearbeitet.

Gruß
    Matthias

[elle]

N'abend allerseits,

ich habe hier mal eine rudimentaere <ftui-video> Komponente angefangen, da ich so etwas fuer meinen Unifi Recording Monitor brauchte.

Derzeit werden folgende Attribute (mit defaults) unterstuetzt:

Code Auswählen Erweitern


       src: '',                 // URL to video
      width: '100%',     
      height: 'auto',     
      autoplay: true,
      controls: true,
      muted: false,
      type: 'video/mp4',
      pauseonvisibilitychange: true


Einbindung - im Beispiel ohne URL, da ich die mit meiner Unifivideo Komponente fuelle - und unter Nutzung der Defaultwerte:

Code Auswählen Erweitern


<ftui-video src="" id="unifivideo-recordingplayer"></ftui-video>


Ihr findet es im Anhang, falls Ihr es gebrauchen koennt.

Da es ein HTML5 Video Tag nutzt, sollte es alle vom jew. Browser abspielbaren Formate unterstuetzen - ich habe es nur mit MP4, wie es vom Unifi Video Controller kommt, getestet.

Ich wuerde mich ueber Feedback freuen.

@setstate - falls Du es direkt in FTUI integrieren moechtest - feel free!

Viele Gruesse

Jens

P.S.: Ich war mir nicht sicher, ob ich einen eigenen Thread dafuer aufmachen sollte...

[Sailor]

Hallo Jens

Ich wuerde mich ueber Feedback freuen.

Habe es getestet.

Dein File ist in

Code Auswählen Erweitern

/opt/fhem/www/ftui/components/video/video.component.js
abgespeichert.

Code:

Code Auswählen Erweitern


<ftui-label [text]="OS_DoorBird:HistoryFilePath_{{DbUrl}}"></ftui-label>

<ftui-video
src       = "OS_DoorBird:HistoryFilePath_{{DbUrl}}"
width     = "100%"
height    = "auto"   
type      = "video/mp4"
autoplay  = "true"
controls  = "true"
muted     = "false"
pauseonvisibilitychange= "true">
</ftui-video>


Dateipfad

Code Auswählen Erweitern

/opt/fhem/www/doorbird/20210412-114252_motionsensor.mp4
ist vorhanden

Ergebnis ist leider eine Fehlermeldung

Gruß
    Sailor

[elle]

Hi Sailor,

habe gerade mal Deinen Test nachgestellt und bei mir funktioniert's wie es soll.

Code Auswählen Erweitern

/opt/fhem/www/ftui/components/video/video.component.js
abgespeichert.

Richtig.

Code Auswählen Erweitern


...


Dateipfad

Code Auswählen Erweitern

/opt/fhem/www/doorbird/20210412-114252_motionsensor.mp4
ist vorhanden

Hast Du mal nachgeschaut, ob die Rechte auf dem File so sind, dass FHEM sie lesen kann?

Und - ist der relative Pfad vom FTUI zum mp4 file wirklich der im Screenshot angezeigte?

Ergebnis ist leider eine Fehlermeldung

Mein Testcase sieht so aus:

Code Auswählen Erweitern


Internals:
   CFGFN     
   FUUID      60743375-f33f-71bd-a26e-bd92371f996c94e7
   NAME       OS_Doorbird
   NR         651826
   STATE      ???
   TYPE       dummy
   .attraggr:
   .attrminint:
   READINGS:
     2021-04-12 13:57:53   HistoryFilePath_URL ../doorbell/20210412.131956.Eingang.mp4
Attributes:


Permissions:

Code Auswählen Erweitern


root@shc:/opt/fhem/www/doorbell# ls -l
total 8412
-rwxr--r-- 1 fhem dialout 8610791 Apr 12 13:45 20210412.131956.Eingang.mp4


Testseite:

Code Auswählen Erweitern


<!DOCTYPE html>
<html>
<head>
  <script src="ftui.js"></script>
  <title>Video Test</title>
</head>
<body>
  <ftui-label [text]="OS_Doorbird:HistoryFilePath_URL"></ftui-label>
  <ftui-video [src]="OS_Doorbird:HistoryFilePath_URL"></ftui-video>
</body>
</html>


Ergebnis: Video wird in Edge, Chrome und Firefox wiedergegeben - s. Anhang.

Ansonsten koennte ich Dir noch vorschlagen, im Inspector des Browsers (Rechtsklick auf die Seite -> Inspektor), dann im Tab Network,nachzuschauen, was er vom Webserver als Antwort bekommt, wenn er versucht, Dein Video herunterzuladen (auch im Anhang zu sehen). Eventuell musst Du das Video nochmal laden.

Dort darf bei der URL Deines Videos als "Status Code:" nicht 404 oder ein 5xx Code stehen, sondern da muss 200 oder - wie hier - 206 ...

Gruss

Jens

[Init]

Eine aehnliche Frage hatte ich auch schon gestellt:
https://forum.fhem.de/index.php/topic,115259.msg1139417.html#msg1139417

Ich habe es jetz so gemacht wie im Beispiel- index.html und dann viel mit <ftui-content> fuer jede Kachel gearbeitet.

Hallo Matthias,

danke für deine Antwort. Ich habe jetzt noch ein bisschen getestet und meine index sind nun so aus:

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/mobile-theme.css" rel="stylesheet">
  <link href="themes/custom.css" rel="stylesheet">
  <link rel="icon" href="/fhem/ftui/images/favicon.ico" type="image/x-icon" />
  <!-- retina iPhone iOS 7 -->
  <link rel="apple-touch-icon" href="/fhem/ftui/images/snail120.png" sizes="120x120">
  <!-- retina iPad iOS 7 -->
  <link rel="apple-touch-icon" href="/fhem/ftui/images/snail152.png" sizes="152x152">
  <!-- avoid 300ms delay on click-->
  <meta name="viewport" content="width=device-width, initial-scale=0.8">
  <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">
</head>
<body>
  <header >
    <ftui-row>
      <ftui-column  width="20%">Logo</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="contents/content-home.html" room="Room1"></ftui-content>
    </ftui-tab-view>
    <ftui-tab-view id="View2">
      <ftui-content file="contents/content-energy.html" room="Room2"></ftui-content>
    </ftui-tab-view>
    <ftui-tab-view id="View3">
      <ftui-content file="contents/content-garden.html" room="Room3"></ftui-content>
    </ftui-tab-view>
    <ftui-tab-view id="View4">
      <ftui-content file="contents/content-music.html" room="Room4"></ftui-content>
    </ftui-tab-view>
  </main>
  <footer class="">
    <ftui-tab fill="clear" direction="vertical" view="View1" [value]="dummy1 | map('Wert1:on, .*:off')" active>
        <ftui-icon name="home1"></ftui-icon>
        <label class="small">Home</label>
      </ftui-tab>
      <ftui-tab fill="clear" direction="vertical" view="View2" [value]="dummy1 | map('Wert2:on, .*:off')">
        <ftui-icon name="weather-partly-lightning"></ftui-icon>
        <label class="small">Energie</label>
      </ftui-tab>
      <ftui-tab fill="clear" direction="vertical" view="View3" [value]="dummy1 | map('Wert3:on, .*:off')">
        <ftui-icon name="leaf"></ftui-icon>
        <label class="small">Garten</label>
      </ftui-tab>
      <ftui-tab fill="clear" direction="vertical" view="View4" [value]="dummy1 | map('Wert4:on, .*:off')">
        <ftui-icon name="music"></ftui-icon>
        <label class="small">Multimedia</label>
      </ftui-tab>
  </footer>
</body>
</html>


Ich verwende nun das mobile-theme.css und habe ein themes/custom.css hinzugefügt.

In der themes/custom.css habe ich folgenden Inhalt:

Code Auswählen Erweitern

body {
  display: flex;
  flex-direction: column;
}

header {
  bottom: 0;
  width: 100%;
  padding: 0.5em 0 0.5em 0;
  background: var(--view-footer-color);
  display: flex;
  justify-content: space-evenly;
}


Jetzt bleiben Header und Footer wie gewünscht stehen

Hast du oder jemand anderes eine Idee, wie ich "initial-scale" in <meta name="viewport"> Deviceabhängig setzen kann?

Und wo kann man am besten nachschauen, welche möglichen Attribute eine Component besitzt?

Viele Grüße
Marc

[Sailor]

Hallo Jens

habe gerade mal Deinen Test nachgestellt und bei mir funktioniert's wie es soll.

Ja, wenn man es richtig macht, funktioniert es... Komisch! 
[src]       = "OS_DoorBird:HistoryFilePath_{{DbUrl}}"

Sorry für den Aufwand.
Jetzt geht es auch bei mir...

Gruß
    Sailor