FTUI version 3

meier81 · 12 Februar 2025, 16:20:41

Zitat von: meier81 am 12 Februar 2025, 15:56:27Hi euch allen,

hab bei mir ein kleines Problem mit iframes und der Aktualisierung. Ich habe bei mir von Grafana ein Chart angezeigt, wie folgt definiert:

Code Auswählen Erweitern
<ftui-grid-tile row="5" col="7" height="6" width="12"> <ftui-grid-header>Strom & Gasverbrauch</ftui-grid-header> <iframe src="http://192.168.179.100:3000/d-solo/SEmMd_zVz/ftui3?orgId=1&timezone=browser&refresh=1m&panelId=2&__feature.dashboardSceneSolo" width="100%" height="100%" frameborder="0"></iframe> </ftui-grid-tile>
Jetzt aktualisiert aber der iframe nicht, der Graph zeigt immer den Stand der letzten Aktualisierung der Seite an. Wenn ich im Browser refreshe bin ich wieder aktuell, der Graph läuft aber nicht weiter.

Gibt es für iframe auch eine interval-Funktion wie beim image oder besteht hier eine andere Möglichkeit dies zu lösen?

Danke und LG, Markus

Ich glaube ich bin eben selber drauf gestoßen, ich hatte schon öfters nach dem Problem im Internet geschaut, hab auch schon Versionen mit Scripten etc. gefunden.

Und eben bin ich auf einen Beitrag gestoßen der funktioniert so wie´s aussieht einwandfrei. Die Definition würde dann wie folgt aussehen:

Code Auswählen

<ftui-grid-tile row="5" col="7" height="6" width="12">
  <ftui-grid-header>Strom & Gasverbrauch</ftui-grid-header>
  <object data="http://192.168.179.100:3000/d-solo/SEmMd_zVz/ftui3?orgId=1&timezone=browser&refresh=1m&panelId=2&__feature.dashboardSceneSolo" width="100%" height="100%" frameborder="0"></object>
</ftui-grid-tile>

Ich muss anstatt iframe object benutzen, die Anzeige in ftui ist weiterhin korrekt nur das jetzt die Graphen aktualisiert werden.

Ich werde auf jeden Fall nochmal berichten nachdem ich das jetzt etwas länger getestet habe.

Gruß Markus

Ulm32b · 15 Februar 2025, 16:05:14

Mein FTUI2 läuft prima. Dort kenne ich mich aus.

Um mich an FTUI3 heranzutasten, habe ich es zunächst installiert. Die Beispieldatei index.html funktionierte sofort.

Als nächsten Schritt möchte ich ausgewählte Daten meines SmartHomes auf dem Smartphone darstellen. Grundlage soll die in "examples" enthaltene mobile.html sein (von der ich mir verspreche, dass sie bereits auf die Smartphoneumgebung angepasst ist). Diese Datei funktioniert jedoch nicht. Die Ausgabe beschränkt sich auf

Code Auswählen

overview Windows Temperature details Temperature 1st floor Temperature 2nd floor This footer explains the meaning of the section to the user Tab2 Tab3
Tab1 Tab2 Tab3

Weil ich noch keinen Blick für die FTUI3-Syntax entwickelt habe, sehe ich den/die Fehler im nachfolgenden Code nicht. Kann jemand helfen?

Code Auswählen

<!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
    */
    -->
  <base href="../" />
  <script src="ftui.js"></script>
  <link href="ftui.css" rel="stylesheet">
  <link href="themes/mobile-theme.css" rel="stylesheet">
  <link href="favicon.ico" rel="icon" type="image/x-icon" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <title>FTUI Mobile Example</title>
</head>

<body>

  <ftui-view>

    <ftui-view-toolbar slot="header">
      <ftui-tab-title></ftui-tab-title>
    </ftui-view-toolbar>

  <ftui-tab-view id="View1">

    <ftui-view-section>
      <ftui-label slot="header">overview</ftui-label>
    
      <ftui-view-item>
        <ftui-icon name="classic-window" color="blue" slot="start" invert></ftui-icon>
        Windows
        <ftui-label slot="end" text="closed" color="medium" placeholder></ftui-label>
      </ftui-view-item>
    
      <ftui-view-item>
        <ftui-icon name="thermometer-2" color="red" slot="start" invert></ftui-icon>
        Temperature
        <ftui-label slot="end" text="21.3" unit="°C" color="medium" placeholder></ftui-label>
      </ftui-view-item>
    
    </ftui-view-section>

    <ftui-view-section>
      <ftui-label slot="header">details</ftui-label>
    
      <ftui-view-item>
        <ftui-icon name="thermometer-2" color="orange" slot="start" invert></ftui-icon>
        Temperature 1st floor
        <ftui-label slot="end" text="20.3" unit="°C" color="medium" placeholder></ftui-label>
      </ftui-view-item>
    
      <ftui-view-item>
        <ftui-icon name="thermometer-2" color="orange" slot="start" invert></ftui-icon>
        Temperature 2nd floor
        <ftui-label slot="end" text="21.3" unit="°C" color="medium" placeholder></ftui-label>
      </ftui-view-item>
    
      <ftui-label slot="footer">This footer explains the meaning of the section to the user</ftui-label>
    </ftui-view-section>

  </ftui-tab-view>

  <ftui-tab-view id="View2">

    <ftui-cell class="size-7" height="600px">Tab2</ftui-cell>

  </ftui-tab-view>

  <ftui-tab-view id="View3">

    <ftui-cell class="size-7">Tab3</ftui-cell>

  </ftui-tab-view>

  </ftui-view>

  <footer class="row fixed border-top">
    <ftui-tab fill="clear" direction="vertical" view="View1" title="Tab1" active>
      <ftui-icon name="home"></ftui-icon>
      <label class="small">Tab1</label>
    </ftui-tab>
    <ftui-tab fill="clear" direction="vertical" view="View2" title="Tab2">
      <ftui-icon name="cog"></ftui-icon>
      <label class="small">Tab2</label>
    </ftui-tab>
    <ftui-tab fill="clear" direction="vertical" view="View3" title="Tab3">
      <ftui-icon name="clock-o"></ftui-icon>
      <label class="small">Tab3</label>
    </ftui-tab>
  </footer>

</body>

</html>

tobi01001 · 16 Februar 2025, 14:25:26

Hi,

Bei mir schaut diese Datei aus wie im Anhang und sollte als Ausgangspunkt genügen?

Du siehst nur den oben genannten Text?

Hast du die Datei irgendwo hinkopiert? Was mir auf Anhieb in den Sinn kommt:

Code Auswählen

  <base href="../" />

Die Datei bzw. darin enthaltenen Links (zu stylesheets, zu css etc.) gehen davon aus, dass du relativ von der mobile.html aus gesehen erst in einen übergeordneten Ordner wechseln musst (../). Die Zeile muss weg, wenn mobile.html da liegt wo die index.html liegt.

Die Examples ruft man über FTUI3BaseURL/examples/mobile.html auf.

Ansonsten bräuchte man schon etwas mehr Details...

Gruß,
Tobi

Ulm32b · 16 Februar 2025, 17:35:27

Zitat von: tobi01001 am 16 Februar 2025, 14:25:26[...]
Hast du die Datei irgendwo hinkopiert? Was mir auf Anhieb in den Sinn kommt:
Code Auswählen Erweitern
<base href="../" />Die Datei bzw. darin enthaltenen Links (zu stylesheets, zu css etc.) gehen davon aus, dass du relativ von der mobile.html aus gesehen erst in einen übergeordneten Ordner wechseln musst (../). Die Zeile muss weg, wenn mobile.html da liegt wo die index.html liegt.
[...]

Kaum macht man's richtig, schon funktioniert es. Ich hatte in der Tat die Beispieldateien in das Verzeichnis der index.html verschoben und dachte, das sei so vorgesehen. Jetzt liegt mir der Fehler klar vor Augen. Herzlichen Dank für den entscheidenden Hinweis.

Viele Grüße
Ulm32b

MDietrich · 16 Februar 2025, 17:41:08

Moin,
ich habe gerade versucht FTUI3 zu aktualisieren. Das Update bricht mit einer Fehlermeldung ab:

Code Auswählen

2025.02.16 17:36:53 1: UPD www/ftui/themes/mobile-ios.css
2025.02.16 17:36:53 1: open ./www/ftui/themes/mobile-ios.css failed: Permission denied, trying to restore the previous version and aborting the update

@setstate: Kannst du das bitte fixen?

Danke
Matthias

tobi01001 · 17 Februar 2025, 13:03:12

Zitat von: MDietrich am 16 Februar 2025, 17:41:08Moin,
ich habe gerade versucht FTUI3 zu aktualisieren. Das Update bricht mit einer Fehlermeldung ab:
Code Auswählen Erweitern
2025.02.16 17:36:53 1: UPD www/ftui/themes/mobile-ios.css 2025.02.16 17:36:53 1: open ./www/ftui/themes/mobile-ios.css failed: Permission denied, trying to restore the previous version and aborting the update
@setstate: Kannst du das bitte fixen?

Danke
Matthias

Liest sich das nicht eher so als könnte fhem die Datei ./www/ftui/themes/mobile-ios.css nicht überschreiben. Hast du eventuell als root oder anderer Benutzer dran geändert?
Dann müsste ein

Code Auswählen

sudo chown fhem:dialout /opt/fhem/www/ftui/themes/mobile-ios.css

dein Updateproblem lösen - sofern nicht noch andere Dateien nicht überschrieben werden können (und fhem in /opt/fhem installiert ist und als user fhem in der gruppe dialout läuft wovon ich ausgehe?)

MDietrich · 17 Februar 2025, 16:19:20

Ja, die Datei konnte nicht überschrieben werden, da sie gar nicht exixtierte - was mich total erstaunt hat. Da letzte Update vor einer Woche ist problemlos durchgelaufen...
Ich fasse das Verzeichnis nie an.
Habe jetzt händisch eine Datei mit dem Name erzeugt und die Rechte auf fhem:dialout gesetzt. Update ist durchgelaufen.
Danke für den Tip selbst mal in da Verzeichnis zu schauen.

Matthias

tobi01001 · 18 Februar 2025, 08:02:55

Da steht aber "permission denied" und nicht "file not found" - was mich erstaunt.

Zur Sicherheit würde ich mal die Berechtigungen der Verzeichnisse unter www/ftui prüfen - bei mir lief das update gerade eben problemlos durch.

Code Auswählen

2025.02.18 07:53:30 1: UPD www/ftui/themes/mobile-dark-theme.css
2025.02.18 07:53:30 1: UPD www/ftui/themes/mobile-ios.css
2025.02.18 07:53:30 1: UPD www/ftui/themes/mobile-theme.css

Zumal die Datei neu ist. In meiner produktiven ftui Instanz existiert die zumindest noch nicht.

Ulm32b · 18 Februar 2025, 21:29:17

Hallo. Ich teste gerade FTUI3 im Vergleich zu meinen FTUI2-Lösungen.
Die Bilder zeigen eine FTUI2-Seite, deren Fenster - abhängig von der Orientierung des Smartphones - übereinander oder nebeneinander dargestellt werden. Funktioniert einwandfrei.
Frage: Wie realisiere ich das mit FTUI-3?

Stonemuc · 20 Februar 2025, 09:48:04

Seit der Überarbeitung des FTUI3 auf die aktuelle Version, habe ich Probleme, dass im thermometer widget von mr-petz immer ein % Zeichen mitten im Widget angezeigt wird.
Woran kann das denn liegen? Ich finde den Fehler nicht...vor dem Update war das % auch nicht da...

Code Auswählen

<ftui-column>
						<ftui-thermostat class="size-1 bold" style="--thermostat-value-color:var(--gray10)"
         					[value]="Weatherman:wm_var_temperature"
						[humidity]="Weatherman:wm_var_humidity"
        					unit=" Â°C"
         					min="-25"
         					max="40"
         					tick="60"
         					rotation="-120"
         					movegradient="1.7"
         					is-thermometer>
						</ftui-thermostat>
                 	  			<ftui-label align-items="top" margin="1">AuÃŸentemperatur</ftui-label>
                     			</ftui-column>

meier81 · 20 Februar 2025, 21:36:21

Hi,

ich hab eben mal deine Definition bei mir eingebaut und das ist bei mir fehlerfrei. Hab auch die aktuelle Version von ftui3 drauf mit allen Änderungen und Anpassungen.

Hier die Definition von mir (bei dir sieht die unit und der label-Text komisch mit Sonderzeichen aus):

Code Auswählen

  <ftui-grid-tile row="1" col="10" height="5" width="3">
						<ftui-thermostat class="size-1 bold" style="--thermostat-value-color:var(--gray10)"
         					[value]="EG_wz_HW_Wetterstation:temperature"
						[humidity]="EG_wz_HW_Wetterstation:humidity"
        					unit="°C"
         					min="-25"
         					max="40"
         					tick="60"
         					rotation="-120"
         					movegradient="1.7"
         					is-thermometer>
						</ftui-thermostat>
                 	  			<ftui-label align-items="top" margin="1">Außentemperatur</ftui-label>
  </ftui-grid-tile>

und anbei das Bild in ftui3. Ich habe aber nach der großen Änderung in ftui3 an den Thermostatdateien was geändert, siehe hier: https://forum.fhem.de/index.php?msg=1332955

Nehme dir mal die beiden Dateien und probiere ob es dann besser ist, da war noch etwas anzupassen.

LG Markus

Stonemuc · 22 Februar 2025, 16:42:09

Mit deinen überarbeiteten Datein funktioniert es wieder ohne Prozentzeichen im Widget

meier81 · 23 Februar 2025, 21:17:00

Zitat von: Stonemuc am 22 Februar 2025, 16:42:09Mit deinen überarbeiteten Datein funktioniert es wieder ohne Prozentzeichen im Widget

Super, das freut mich. Vielleicht kann mr_petz das mal einchecken.

cruser1800 · 24 Februar 2025, 19:32:33

Ich habe heute das Update gemacht! Die Fehler mit Höhe und Weite habe ich gefunden. Aber mein circlemenü öffnet nicht mehr!

Vielleicht kann mir jemand helfen, was jetzt neu ist!

Danke

Bisher hat folgendes funktioniert!

Code Auswählen

<ftui-circlemenu direction="horizontal-right" opacity="0.3" size="normal">

            <ftui-icon name="measure_power_meter" size="1"></ftui-icon>
			  
			<ftui-tab view="Energie" direction="vertical" size="normal">
				<ftui-icon name="measure_power_meter" size="2"></ftui-icon>
				<ftui-label size="1" >Energie Main</ftui-label>
			</ftui-tab>
			<ftui-tab view="Energie1" direction="vertical" size="normal">
				<ftui-icon name="measure_power_meter" size="2"></ftui-icon>
				<ftui-label size="1">Energie 1</ftui-label>
			</ftui-tab>
			<ftui-tab view="Energie2" direction="vertical" size="normal">
				<ftui-icon name="measure_power_meter" size="2"></ftui-icon>
				<ftui-label size="1">Energie 2</ftui-label>
			</ftui-tab>				
		 </ftui-circlemenu>

PeterLustig · 25 Februar 2025, 12:56:30

Das Problem hatte ich auch. Wenn das Circlemenü in einem Cell, Row oder Column integriert ist, sind die Menüs abgeschnitten.
Es ist auch auf der Beispielseite nachvollziehbar.

Nach dem Wiederherstellen der alten cell.component.js funktioniert das Circlemenü bei mir wieder.