FTUI version 3

[TimoD]

Ich verzweifle, ich bekomme es nicht hin, dass die Beschriftungen der charts in ftui3 die Farben beim Themenwechsel korrekt ausführen. Entweder sind die Beschriftungen schwarz oder weiß je nach erstem ausgewähltem Theme.

Ich finde den Fehler nicht,... bin mir aber ziemlich sicher, dass der Fehler in der Komponente liegt.

Was mache:

Ich schalte mit:

Code Auswählen Erweitern

  <link href="ftui.css" rel="stylesheet">
    <link href="themes/bright-theme.css?v=10" rel="stylesheet" ftui-binding [disabled]="Nacht:Theme | map('dark:true, light:false') | toBool()">
<link href="themes/ftui-theme2.css" rel="stylesheet" ftui-binding [disabled]="Nacht:Theme | map('light:true, dark:false') | toBool()">
zwischen Themes um

habe es auch mit:

Code Auswählen Erweitern

<script>
  // Referenzen zu den <link>-Elementen der Themes holen
  const lightCSS = document.getElementById('lightCSS');
  const darkCSS = document.getElementById('darkCSS');

  // Funktion zum Aktivieren/Deaktivieren der Themes
  function setTheme(isDark) {
    if (isDark) {
      lightCSS.setAttribute('disabled', ''); // Light-Theme deaktivieren
      darkCSS.removeAttribute('disabled'); // Dark-Theme aktivieren
    } else {
      darkCSS.setAttribute('disabled', ''); // Dark-Theme deaktivieren
      lightCSS.removeAttribute('disabled'); // Light-Theme aktivieren
    }
    // Custom Event auslösen, damit ftui-chart sich aktualisiert
    window.dispatchEvent(new CustomEvent('themeChanged', { detail: { theme: isDark ? 'dark' : 'light' } }));
  }

  // Überprüfen, ob der Browser 'prefers-color-scheme' unterstützt
  const darkSchema = '(prefers-color-scheme: dark)';
  const isDark = window.matchMedia && window.matchMedia(darkSchema).matches;

  // Initiales Theme setzen
  setTheme(isDark);

  // Event-Listener für Änderungen an 'prefers-color-scheme'
  window.matchMedia(darkSchema).addEventListener('change', e => {
    const isDark = e.matches;
    setTheme(isDark);
  });
</script> versucht. was fürs Theme funktioniert aber ebenfalls nicht für:
  --chart-control-text-color:

Hat irgendjemand eine Lösung für das Problem?

[yersinia]

Woher hast du das Attribut disabled für den link tag? Laut W3C school gibt es dies nicht. Ich kann mir auch nicht vorstellen, dass das im DOM gewollt ist, dynamisch die geladenen CSS zu ändern, welche vor dem Seitenaufbau schon geladen worden sind. Der Browser müsste ggf die gesamte Seite neu rendern.
Darüber hinaus kann die alte CSS Definition im Browser auch immer noch gecached sein - insb wenn für den Browser nicht erkennbar ist, ob sich die Quelldatei geändert hat.

Du kannst versuchen über ein verstecktes HTML Element (font oder so) eine eigene JS aufzurufen (basierend auf einen trigger durch FTUI3), die dann den Wechsel vornimmt - in etwa wie hier beschrieben: https://www.geeksforgeeks.org/how-to-reload-css-without-reloading-the-page-using-javascript/

[TimoD]

Aber eigentlich müsste ftui3 die css Parameter doch automatisiert aktualisieren ?! Allerdings verstehe ich die Logik (korrekten) zum ändern des Stylesheet nicht.

disable habe ich aus dem Internet

[yersinia]

Aber eigentlich müsste ftui3 die css Parameter doch automatisiert aktualisieren ?!

Wahrscheinlich macht das FTUI3 auch ordentlich, das kannst du zB über die developer tools (FF) sehen.

Allerdings verstehe ich die Logik (korrekten) zum ändern des Stylesheet nicht.

Wahrscheinlich ist deine Logik gar nicht so falsch und es funktioniert auch ganz gut - aber: lädt der Browser dies auch korrekt nach? IdR (und mWn) werden derart verlinkte (aka link im head) Stylesheet Definition einmalig bei Seitenaufbau geladen (und im Cache abgelegt) und auf die HTML Elemente angewendet. Wenn du jetzt einfach die link Definition im head änderst, bewirkt dies nicht zwangsläufig ein Löschen (!) der Cache Daten und Neuladen und Anwenden (!) der (neuen) Definitionen.

Du solltest auch prüfen ob die Zuweisungen in den Themes Stylesheets (classes, ids usw) auch passen. Wenn der Style-Wechsel im Grund funktioniert, aber für einige, wenige Elemente nicht, wird der Fehler vermutlich dort zu suchen sein. Vergleiche beide Themes mal.

disable habe ich aus dem Internet

Aha, geht es auch genauer? Evtl von https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/disabled?
Welchen Browser nutzt du zum Anzeigen der FTUI Seite? Je nach Browser ist disable unterschiedlich implementiert.

[papa]

Seit dem heutigen Update haber ich folgende Fehlermeldung. Das Seitenlayout is dann komplett zerstört und die Seite nicht mehr benutzbar.

Firefox

Code Auswählen Erweitern

label.component.js:86
TypeError: this.unitSlotElement is null
Edge

Code Auswählen Erweitern

label.component.js:86
TypeError: Cannot set properties of null
(setting 'textContent')
Der vermutete Auslöser ist wahrscheinlich folgendes Konstrukt

Code Auswählen Erweitern

<ftui-label [text]="HM_0B0001:temperature" size="9" unit="°C"></ftui-label>
Ist das ein Bug im ftui3 - oder muss ich in meinem Code etwas anpassen ?

Danke für schnelle Hilfe

[grossmaggul]

Schau mal hier: https://forum.fhem.de/index.php?topic=140617.15

Es hat was mit dem Update zu tun.

[papa]

Danke - hab erst mal nen Restore gemacht. Das muss ich mir mal in Ruhe ansehen.

[nobody0472]

Hi all,

ich bin gerade dabei mir per FTUI3 ein FrontEnd zu bauen.
Nun habe ich noch ein paar FS20 Dimmer, und wollte diese mit einem ftui-slider steuern.
Das scheint aber nicht zu gehen, da es so etwas wie class="fs20" von FTUI2 nicht mehr gibt.

Hat jemand einen Tipp, wie ich den Slider auf die FS20 Werte und dann noch auf "dimxx%" bekomme?
Eine Doku dazu wäre echt gut ...

Vielen Dank im Voraus

[juemuc]

Hi,

die FTUI3-Beispiele hier hast Du schon gesehen?

Viele Grüße
Jürgen

[setstate]

Der FS20 Slider musste sich auf bestimmte Werte beschränken, oder?
Dafür könnte man die Werte vorm Versenden durch eine step() Funktion schicken.

Code Auswählen Erweitern

        <ftui-slider [value]="ftuitest" min="0" max="100"
            (value)="step('0:0, 6:6, 12:12, 18:18, 25:25, 31:31, 37:37, 43:43, 50:50, 56:56, 62:62, 68:68, 75:75, 81:81, 87:87, 93:93, 100:100') | ftuitest">
        </ftui-slider>


[nobody0472]

Hi,

die FTUI3-Beispiele hier hast Du schon gesehen?

Viele Grüße
Jürgen

Ja, die habe ich gesehen. Aber wo diese mir nun bei meinem Problem helfen sollen, verbleibt unklar. Im Speziellen ohne Erläuterung.

Aber die Idee mit dem Value und step ist schon ein Anfang. Wenn ich jetzt noch die Syntax der Zuweisung auf dimxx% gemappt bekomme, wäre dies ein Beispiel, welches mit in die Examples könnte.

Danke

[setstate]

Dann so

Code Auswählen Erweitern

<ftui-slider [value]="ftuitest | part('dim([0-9]{1,3})%')" min="0" max="100"
            (value)="step('0:0, 6:6, 12:12, 18:18, 25:25, 31:31, 37:37, 43:43, 50:50, 56:56, 62:62, 68:68, 75:75, 81:81, 87:87, 93:93, 100:100') | ftuitest dim$value%">
</ftui-slider>

[HGButte]

Hallo,

Habe heute meinen kompletten FTUI3 Code mit "grow='0'" umgebaut, nachdem an vielen Stellen das Layout nicht mehr gepasst hat nach dem letzten Update.

Um 22:00 Uhr (04.02.25) habe ich dann nochmal ein Update gefahren mit der Hoffnung, dass die zuvor generierten Fehlermeldungen verschwinden. Die Fehlermeldungen sind weg aber dafür werden jetzt auch alle meine ftui-column bzw. ftui-rows mit "grow='0'" nicht mehr angezeigt bzw. nur wenige Pixel.

Vielleicht habe ich die Funktionweise von "grow" falsch verstanden. Für Hilfe wäre ich dankbar.

[nobody0472]

Dann so

Code Auswählen Erweitern

<ftui-slider [value]="ftuitest | part('dim([0-9]{1,3})%')" min="0" max="100"
            (value)="step('0:0, 6:6, 12:12, 18:18, 25:25, 31:31, 37:37, 43:43, 50:50, 56:56, 62:62, 68:68, 75:75, 81:81, 87:87, 93:93, 100:100') | ftuitest dim$value%">
</ftui-slider>

Super, vielen Dank.
Habe dann für [value]="ftuitest | map(.....)" benutzt, um auch mit on/off zurecht zukommen. Gleiches gilt auch bei (value) hier ein 0:off ... 6:dim06%, etc.

Ist zwar etwas länger, aber läuft.

Vielen Dank.

Aber wie viele andere auch schreiben: ausprobieren dauert zu lange. Eine Doku wäre echt gut.

Danke.

[meier81]

Hi 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