FTUI version 3

Sailor · 20 Juli 2021, 10:17:50

Hallo zusammen

Zitat von: mr_petz am 19 Juli 2021, 09:26:49
Ich denke schon, aber jetzt ist "Sommerpause (Sommerloch)".

Genau - In diesem Sinne: Einen schönen Urlaub alle zusammen! Wir sehen uns im September wieder!

Gruß
Sailor

sinus61 · 30 Juli 2021, 08:49:58

Hab gerade auch mal angefangen mit FTUI3, funktioniert eigentlich alles ganz gut.

Ein Problem hab ich aber, vorher gab es für Labels die class "autohide", da wurde der Text ausgeblendet wen das Reading nicht mehr vorhanden war. autohide gibt es jetzt nciht mehr, aber hat da jemand eine Lösung?

Die Readings für Unwetterwarnungen aus dem DWD Modul werden halt einfach gelöscht und in FTUI bleibt der Text dann bis man die Seite mal aktualisiert. Ich könnte dann höchstens aus FHEM ein Reload der Seite anstossen.

yersinia · 30 Juli 2021, 09:15:41

Ja, das geht mit dem Attribut hidden. Für DWD in etwa so (ungetestet):

Code Auswählen

<ftui-label [text]="DWD_DEVICE:a_0_eventDesc"
  [hidden]="DWD_DEVICE:a_count | map('0:true, .*:false')"
  class=""></ftui-label>

Bezgl DWD kannst du dir auch diese Lösungen anschauen:
Lösung von octek0815 in den Posts #938 und #939
[FTUI 3] DWD Warnungen des DWD-Opendata Moduls anzeigen

sinus61 · 30 Juli 2021, 13:38:01

Ah, danke. Hatte gerade überlegt wie das mit Map gehen könnte wenn das Reading ja weg ist, aber klar auf a_count geht das natürlich.

Gerade getestet, genau muss es so aussehen:

Code Auswählen


<ftui-label [text]="DWD_DEVICE:a_0_eventDesc"
  [hidden]="DWD_DEVICE:a_count | map('0:true, 1:false')"
  class=""></ftui-label>

freddykr · 03 August 2021, 09:04:27

Weiß jemand, warum der ausgeschriebene Monat beim "Clock-Modul" nicht funktioniert? Die ersten vier Buchstaben sind ok, dann kommen die aktuellen Sekunden und dann geht es weiter.
Bei vier Buchstaben war noch alles ok.

Angehängt ein Screenshot der Beispielseite (nachdem ich den "Long" Teil freigelegt habe)

Code Auswählen

<!DOCTYPE html>
<html>

<head>
  <!--
    /* FHEM tablet ui - FTUI */
    /**
    * UI builder framework for FHEM
    *
    * Version: 3.0.0
    *
    * Copyright (c) 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/ftui-theme.css" rel="stylesheet">
  <link href="favicon.ico" rel="icon" type="image/x-icon" />


  <title>FTUI Example Clock</title>
</head>

<body>

  <ftui-grid base-width="150" base-height="150">

    <ftui-grid-tile row="1" col="1" height="1" width="1">
      <header>DEFAULT</header>

        <ftui-clock></ftui-clock>
      
    </ftui-grid-tile>

    <ftui-grid-tile row="1" col="2" height="1" width="1">
      <header>FHEM TIME</header>

        <ftui-clock is-fhem-time></ftui-clock>

    </ftui-grid-tile>

    <ftui-grid-tile row="1" col="3" height="1" width="1">
      <header>Format</header>

        <ftui-clock format="eeee" class="size7"></ftui-clock>
        <ftui-clock format="hh:mm" class="size-8"></ftui-clock>
      
    </ftui-grid-tile>

    <ftui-grid-tile row="1" col="4" height="1" width="2">
      <header>LONG</header>

        <ftui-clock format="eeee, DD.MMMM YYYY" class="size-5" color="warning"></ftui-clock>
      
    </ftui-grid-tile>

    <ftui-grid-tile row="1" col="4" height="1" width="2">
      <header>SHORT</header>

      <ftui-clock format="DD.MM.YY" class="size-1"></ftui-clock>
      
    </ftui-grid-tile>


  </ftui-grid>

</body>

</html>

yersinia · 03 August 2021, 09:44:03

Ja, das liegt an dem Sekunden replacement in der ftui.helper.js. Analog zum März/Mai-Problem kannst du dies umgehen durch unicode; ersetze Zeile 185 durch diese:

Code Auswählen

  const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];

Und der Vollständigkeit halber, Zeilen 185+186:

Code Auswählen

  const months_de = ['Januar', 'Februar', 'M&auml;rz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

freddykr · 03 August 2021, 10:04:22

Zitat von: yersinia am 03 August 2021, 09:44:03
Ja, das liegt an dem Sekunden replacement in der ftui.helper.js. Analog zum März/Mai-Problem kannst du dies umgehen durch unicode; ersetze Zeile 185 durch diese:
Code Auswählen Erweitern
const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];

Und der Vollständigkeit halber, Zeilen 185+186:
Code Auswählen Erweitern
const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']; const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

Danke. Jetzt geht es.

freddykr · 08 August 2021, 11:01:54

Fall es jemanden interessiert: Hier die Lösung zum Problem mit der nicht funktionierenden Medialiste in Verbindung mit SB_Player Devices:

https://forum.fhem.de/index.php/topic,17667.msg1169608.html#msg1169608

stefanru · 12 August 2021, 10:36:09

Hi,

sorry ich muss leider auch noch mal zum example/menu.html fragen.

Finde das mit dem 3 Strich Menü super, leider funktioniert es bei mir nicht.
Ich sehe zwar die Seite kann das Menü aber nicht öffnen. Also ein Klick auf die 3 Striche öffnet nichts.
Es passiert einfach garnichts.

Ich benutze Chrome und habe es sowohl auf dem Desktop als auch auf dem Handy versucht.

In der Development Console des Browsers sehe ich beim laden der Seite:
{"message":"The message port closed before a response was received."}
in toolbarContentscript.js

Hat es damit etwas zu tun?

Gruß,
Stefan

grossmaggul · 15 August 2021, 17:44:05

Nochmal zum Thema "medialist", die scheint Probleme mit Unterstrichen in Dateinamen zu haben. Zumindest werden bei mir Medienlisten, die einen Dateinamen mit Unterstrich enthalten in FTUI3 gar nicht angezeigt.
In iTunes/Music werden Unterstriche bei Backticks erzeugt, z.B. I´m. Aber auch Doppelpunkte in Liednamen erzeugen Unterstriche.

Sailor · 20 August 2021, 18:31:52

Hallo Thyraz

Zitat von: Thyraz am 19 November 2020, 15:55:40
Hab mal eine frühe Version einer Kalender Komponente die gern getestet werden darf.

Eingebunden wird das Ganze dann so:
Code Auswählen Erweitern
<ftui-calendar view="listWeek" height="500px"> <ftui-calendar-data calendar="iCloud" color="primary"></ftui-calendar-data> <ftui-calendar-data calendar="Abfall" color="brown"></ftui-calendar-data> </ftui-calendar>

Zum Testen braucht man von hier: https://github.com/Thyraz/ftui
- /components/calendar/
- /modules/fullcalendar/

Habe soeben den Goggle - Kalender von 3 unserer Familienmitglieder erfolgreich importiert.

Dank für dieses Modul/Komponente!

Dabei ist mir folgendes aufgefallen bzw. habe ich folgende Fragen:

a) Wenn sich der Calendar in fhem neu einliest und dabei neue Termine herunterlädt, wird das leider nicht automatisch im ftui angezeigt.
Man muss erst ein reload (F5) vornehmen.

b) Wenn ich die Termine aller Mitglieder tabellarisch nebeneinander darstellen will kann ich das nur mit

Code Auswählen


<table width="100%" border="0">
	<tr>
		<td style="width: 25%; vertical-align:top">
			Papa
		</td>

		<td style="width: 25%; vertical-align:top">
			Sohn
		</td>
		
		<td style="width: 25%; vertical-align:top">
			Tochter
		</td>	
	<tr>
	
	<tr>
		<td style="width: 25%; vertical-align:top">
			<ftui-calendar view="listMonth" height="90%" calendar-title-font-size="16">
				<ftui-calendar-data calendar="UI_Calendar_Papa" 	color="red">	</ftui-calendar-data>
			</ftui-calendar>  
		</td>

		<td style="width: 25%; vertical-align:top">
			<ftui-calendar view="listMonth" height="90%" calendar-title-font-size="16">
				<ftui-calendar-data calendar="UI_Calendar_Sohn" 	color="green">	</ftui-calendar-data>
			</ftui-calendar>  
		</td>
		
		<td style="width: 25%; vertical-align:top">
			<ftui-calendar view="listMonth" height="90%" calendar-title-font-size="16">
				<ftui-calendar-data calendar="UI_Calendar_Tochter" 	color="blue">	</ftui-calendar-data>
			</ftui-calendar>  
		</td>
	</tr>
</table>

Leider sind hierbei die Sprünge der "leeren" Tage nebeneinander nicht so schön.
Kann man das Modul dazu zwingen jeden Tag aufzulisten, auch wenn keine Einträge vorhanden sind und dabei die Zahl der Einträge auf beispielsweise 3 fixiert?

c) Wie kann man in den Monaten blättern (Pfeil nach links/rechts)?

d) Kann man das Alias-Attribut des Calendar-Device als automatische Überschrift verwenden?

Gruß
Sailor

yersinia · 04 September 2021, 19:59:17

Zitat von: yersinia am 03 August 2021, 09:44:03
Ja, das liegt an dem Sekunden replacement in der ftui.helper.js. Analog zum März/Mai-Problem kannst du dies umgehen durch unicode; ersetze Zeile 185 durch diese:
Code Auswählen Erweitern
const months_de = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];

Und für September, November und Dezember:

Code Auswählen

  const months_de = ['Januar', 'Februar', 'M&auml;rz', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'Dece%#109;ber'];

curt · 13 September 2021, 04:11:27

Zwischenfrage:
Gibt es eine (deutschsprachige) Doku zu FTUI version 3? Im Wiki scheint es nichts zu geben - oder bin ich blind?

Anders gefragt:
Wie fängt man am besten an, wie habt ihr angefangen?

P.S: https://forum.fhem.de/index.php/topic,34233.0.html - erster Beitrag gelesen. Aber wie fängt man real an, wo liest man konkret Beispiele?

grossmaggul · 13 September 2021, 08:03:48

Den Beitrag, den Du verlinkt hast bezieht sich auf FTUI 2.
Alles was es an Doku und Beispielen zu FTUI3 gibt, findest Du hier: https://github.com/knowthelist/ftui

Smiley1981 · 13 September 2021, 21:13:42

Ich habe festgestellt, dass cmdalias die über FTUI 3 per Button ausgeführt werden sollen irgendwie nicht funktionieren.

FTUI 3

Code Auswählen

<ftui-button (value)="AlleRollos" states="Hoch" shape="circle" fill="outline" color="gray">
              <ftui-icon name="arrow-up" type="svg" color="gray"></ftui-icon>
            </ftui-button>

mit FTUI 2 stellte das kein Problem dar.
Der Befehl set AlleRollos Hoch funktioniert auch sonst ohne Probleme in FHEMWEB.

Mache ich etwas falsch, oder irgendwelche hat jemand Ideen was ich anders machen muss?