FTUI version 3

presskopf · 07 Juli 2022, 15:53:32

Ich Rind - hatte ich sogar schon mal gesehen.
Ja, das ist die elegante Lösung. Hab's schon hinbekommen. Herzlichen Dank.

yersinia · 10 Juli 2022, 16:54:26

@setstate
kannst du Funktion tresholdZero so oder so ähnlich als FTUI3-Funktion übernehmen?

Zitat von: Nogga am 08 Juli 2022, 22:58:23
Für diejenigen, die meine Idee vom "Threshold" gut finden, habe ich das als Helper implementiert - danke für den Tipp yersinia!

Code Auswählen Erweitern
<head> <script> // Pipe-helper to set any Values lower than threshold to Zero const thresholdZero = value => input => Math.abs(Number(input)) <= value ? input * 0 : input; </script> <script src="ftui.js"></script>

Dann könnt Ihr per Pipe angeben, bis zu welchem Wert etwas genullt werden soll, weil irrelevant.

Ich denke, dies wäre analog zu round() etc eine weitere sinnvolle Funktion, Werte an FTUI3 Devices zu übergeben - und sollte von FTUI3 imho auch zur Verfügung gestellt werden.

h002 · 10 Juli 2022, 19:45:15

Hallo, ich bekomme meinen Kalender nicht in FTUI 3 eingebunden.

ftui ist wie folgt konfiguriert.

Code Auswählen


<!DOCTYPE html>
<html>

<head>
  <!--
    /* FHEM tablet ui - FTUI */
    /**
    * UI builder framework for FHEM
    *
    * Version: 3.0.0
    *
    * Copyright (c) 2015-2021 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 name="mobile-web-app-capable" content="yes">
  <meta name="toast_position" content="topLeft">
  <meta name="fhemweb_url" content="http://fhem.intranet:8083/fhem/">


  <!-- verbose level 0-4 -->
  <meta name="debug" content="0">
  <title>Home Dashboard</title>
</head>

<body>
  
  <ftui-grid base-width="400" base-height="400">   

      <ftui-grid-tile row="1" col="2" height="1" width="1"color="secondary" shape="round">
        <ftui-calendar view="dayGridMonth" height="90%">
          <ftui-calendar-data calendar="Calendar.Muell"></ftui-calendar-data>
        </ftui-calendar>
      </ftui-grid-tile>  
	
     
  </ftui-grid>

</body>

</html>

Der Kalender vom Type "Calendar" ist definiert und liest auch die Events aus. Aber ich bekomme keine Termin angezeigt. CalView nutze ich nicht. Was könnte das Problem sein?

Vielen Dank!

mr_petz · 10 Juli 2022, 21:22:30

Hi h002,
ab hier schon gelesen?
https://forum.fhem.de/index.php/topic,115259.msg1224109.html#msg1224109

Hier eine mögliche Lösung:
https://forum.fhem.de/index.php/topic,115259.msg1224663.html#msg1224663

LG mr_petz

h002 · 10 Juli 2022, 22:36:21

@mr_petz
Danke für den Hinweis. Ich probiere noch mal etwas rum.

Installiert habe ich ftui aus dem Rep von setstate (https://github.com/knowthelist/ftui). Auch dort besteht das Problem.

Das ist vielleicht Offtopi, aber sollte ich weiterhin auf ftui setzen oder mich lieber nach Alternativen umsehen? Folgendes ist mir wichtig:

- Übersichtliche moderne Ansicht auf einem Tablet
- Anzeige eines gemeinsamen Kalenders und ToDo Liste
- Anzeige von Abfahrten der öffentlich Verkehrsmittel
- Wetter
- Schalten von Rollläden und Lampen

ftui hat da viele tolle Dinge, mit denen ich es versuchen wollte. Sollte ich mit meinen Anforderungen weiter darauf setzen?

mr_petz · 10 Juli 2022, 22:45:25

Auf FTUI3 kannst du setzen.
Hinweis:
Das Calendar Modul für FTUI3 gibt es aber nicht bei setstate...

LG mr_petz

h002 · 11 Juli 2022, 09:39:15

Das hilft mir weiter für mein Gesamtverständnis.

Hab mich jetzt doch für deine CalView-Variante entschieden, damit ich eine schnelle Lösung hinbekomme.

Die verschiedenen GitHub Verzeichnisse hatten mich erstmal verwirrt.

https://github.com/Thyraz/ftui
https://github.com/knowthelist/ftui
https://github.com/mr-petz/ftui

Gut, dann bastel ich mal weiter

mr_petz · 11 Juli 2022, 12:22:04

Zum Verständnis.
Das repo von setstate -> https://github.com/knowthelist/ftui ist das Hauptrepo.
Von dem haben Thyraz,andere und ich eine Copy.
Hier kann es sein, dass diese nicht aktuell zum Hauptrepo sind.
Jeder Entwickler hat dann wieder seine eigen erstellte Module als Erweiterung/Ergänzung zu setstate´s...
Try it out...

LG mr_petz

h002 · 12 Juli 2022, 15:20:38

Ich habe eine Art Bilderrahmen mit Zufallsbildern in ftui3 eingebunden und wollte kurz meine Umsetzung teilen. Vielleicht hilft es jemanden weiter, da sie für mich einfach realisierbar war.

FHEM habe ich auf einem Raspberry laufen. Dort ist via Samba ein Mount zu meinen Bildern auf meinem NAS eingebunden. Mittels eines Cronjobs läuft ein kleines Shellskript, welches ein Zufallsbild ermittelt und anschließend dieses Bild als symbolischen Link unter "/opt/fhem/www/images/pic" ablegt. Das Skript läuft alle 5 Minuten. Es sucht nach jpg-Dateien, sortiert sie zufällig und nimmt dann den ersten Treffer für den symbolischen Link.

Code Auswählen


#!/bin/bash
IFS=$(echo -en "\n\b")
linkedFilename=$(find /media/nas/photo/Urlaub/ -name "*.jpg" | sort -R | tail -1)
ln -sf ${linkedFilename} /opt/fhem/www/images/pic/bild.jpg

Das Bild wird in die /opt/fhem/www/ftui/index.html wie folgt hinterlegt.

Code Auswählen


    <ftui-grid-tile row="2" col="2" height="1" width="2">
            <ftui-image base="http://fhem.intranet:8083/fhem/images/pic/" src="bild.jpg" shape="round" interval="300"
                nocache></ftui-image>
     </ftui-grid-tile>

meier81 · 20 Juli 2022, 09:10:10

Hallo euch allen,

hab hier mal wieder ein kleines Problem bezüglich meiner Anzeige vom Wetter. Da verschiebt sich die Anzeige extrem beim Wettertext "unterschiedlich bewölkt, vereinzelt Schauer und Gewitter".

Hier mal der Code der Wetterseite:

Code Auswählen


<ftui-popup id="{{callup}}" width="750px" height="400px" timeout="15" shape="round" position="top">
  <header><ftui-label [text]="NN_xx_SW_Proplanta:{{tag}}_date | toDate() | format('eeee')"></ftui-label></header>
  <ftui-row>
    <ftui-content file="content-wetter-detail.html" color="medium" fc="{{tag}}" uhrzeit="00:00 Uhr" wetter="weather00" temperatur="temp00" wind="wind00" chofrain="chOfRain00" regen="rain00" winddir="windDir00"></ftui-content>
    <ftui-content file="content-wetter-detail.html" color="dark" fc="{{tag}}" uhrzeit="03:00 Uhr" wetter="weather03" temperatur="temp03" wind="wind03" chofrain="chOfRain03" regen="rain03" winddir="windDir03"></ftui-content>
    <ftui-content file="content-wetter-detail.html" color="medium" fc="{{tag}}" uhrzeit="06:00 Uhr" wetter="weather06" temperatur="temp06" wind="wind06" chofrain="chOfRain06" regen="rain06" winddir="windDir06"></ftui-content>
    <ftui-content file="content-wetter-detail.html" color="dark" fc="{{tag}}" uhrzeit="09:00 Uhr" wetter="weather09" temperatur="temp09" wind="wind09" chofrain="chOfRain09" regen="rain09" winddir="windDir09"></ftui-content>
    <ftui-content file="content-wetter-detail.html" color="medium" fc="{{tag}}" uhrzeit="12:00 Uhr" wetter="weather12" temperatur="temp12" wind="wind12" chofrain="chOfRain12" regen="rain12" winddir="windDir12"></ftui-content>
    <ftui-content file="content-wetter-detail.html" color="dark" fc="{{tag}}" uhrzeit="15:00 Uhr" wetter="weather15" temperatur="temp15" wind="wind15" chofrain="chOfRain15" regen="rain15" winddir="windDir15"></ftui-content>
    <ftui-content file="content-wetter-detail.html" color="medium" fc="{{tag}}" uhrzeit="18:00 Uhr" wetter="weather18" temperatur="temp18" wind="wind18" chofrain="chOfRain18" regen="rain18" winddir="windDir18"></ftui-content>
    <ftui-content file="content-wetter-detail.html" color="dark" fc="{{tag}}" uhrzeit="21:00 Uhr" wetter="weather21" temperatur="temp21" wind="wind21" chofrain="chOfRain21" regen="rain21" winddir="windDir21"></ftui-content>
  </ftui-row>
</ftui-popup>

und anbei zwei Screenshots, einer mit dem besagten Fehler, der andere so wie es sein sollte.

Ich selbst stehe gerade etwas auf dem Schlauch, bin der Meinung man müsste entweder den Text mit Zeilenumbruch machen bzw. die Spaltenbreite fixieren, dann wird der Text aber abgeschnitten.

Habt ihr hier einen Tipp bzw. Lösung?

Gruß

Markus

mr_petz · 20 Juli 2022, 09:16:56

Hi Markus.
Füge einfach scroll im label hinzu.
Damit wird der text umgebrochen.
LG mr_petz

meier81 · 20 Juli 2022, 10:09:49

Zitat von: mr_petz am 20 Juli 2022, 09:16:56
Hi Markus.
Füge einfach scroll im label hinzu.
Damit wird der text umgebrochen.
LG mr_petz

Super mr_petz, das war´s! Hab dann noch ein

Code Auswählen

text-align="center" hinterhergeschoben, und schon sieht´s richtig gut aus.

Danke und LG, Markus

mrb · 20 Juli 2022, 10:49:13

Hallo allen,

ich weis normalerweise den thread lesen, aber über 150 Seiten ehrlich?

Nur mal als absoluter ftuiv3 Anfänger eine Frage das zeigt doch nicht alle bereits bestehenden Elemente an und bedarf noch deutlichen html-änderungen oder liege ich da total Falsch und habe es falsch installiert (was ja laut Github ja kaum machbar ist)?

Grüße
michael

meier81 · 20 Juli 2022, 13:09:30

Hallo Michael,

ja, dieser Thead ist mittlerweile stattlich angewachsen.

Also bezüglich dem ftui da hast du nun das "Grundgerüst" installiert, die ganzen einzelnen Objekte (Schalter, Fühler, Sensoren, etc.) musst du nun einzeln so wie du das Aussehen wünscht hier noch einfügen. Es gibt ja einige Beispiele (sind ja auch auf GitHub), aber je nachdem wie mächtig dein FHEM ist bzw. wie viele Daten du anzeigen lassen möchtest ist dies in der Tat einiges an Arbeit.

Bin auch schon seit einigen Monaten am machen und tun, aber noch lange nicht fertig

grossmaggul · 20 Juli 2022, 13:22:48

Zitatich weis normalerweise den thread lesen, aber über 150 Seiten ehrlich?

Es gibt auch eine Suchfunktion, man muss natürlich wissen was man sucht, am Anfang nicht immer ganz einfach.

Zitatdas zeigt doch nicht alle bereits bestehenden Elemente an und bedarf noch deutlichen html-änderungen oder liege ich da total Falsch

Dazu müsste man erstmal wissen, was Du alles machen willst, Vieles kann man mit FTUi3 heute schon machen ohne großartige HTML Änderungen, aber es kommt natürlich auch auf die Komplexität Deines Systems an, wie meier81 bereits schrieb.