FTUI version 3

[grossmaggul]

Danke Dir!
Für Fehleranalyse bin ich leider zu kompetenzlos.

[mr_petz]

Danke Dir!
Für Fehleranalyse bin ich leider zu kompetenzlos.

Tu nicht so...
Du bist doch hier ein Kind der ersten Stunde....
LG

[grossmaggul]

Naja, aber außer Fehlermeldung und ein, zwei Tipps kann ich nicht viel dazu beitragen.

Du bist doch hier ein Kind der ersten Stunde....

Jo, aber eher das schwarze Schaf der Familie.

[mr_petz]

schwarzes Schaf der Familie ist gut

Zum Thema. Für setstate habe ich mal eine kurze Sequenze zum verhalten aufgenommen.
Seite wird erst geladen und nach kurzer Zeit switcht die Seite wieder auf loading.
Siehe Anhang.

LG mr_petz

Edit: Der Test war auf meiner DemoSeite unter Chrome.
Ich konnte bei mir das Verhalten abstellen. Es war ein <ul> Eintrag der Readingslist von der SonosFavouritesRG. Diesen hatte ich komplett da stehen. Nach dem löschen der <ul> blieb die Seite hell!
Um genauer zu sein habe ich die 3 Einträge in der <ul> herausgefunden die bei mir Schuld sind (zumindest wenn die raus sind):

Code Auswählen Erweitern


<li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://192.168.0.214:1400/getaa?s=1&amp;u=x-sonosapi-stream%3Atunein%253a56140%3Fsid%3D303%26amp%3Bflags%3D8224%26amp%3Bsn%3D2); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.Sonos_Kueche%3Dset%20Sonos_Kueche%20StartFavourite%20sunshine%2520live%2520-%2520house')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://192.168.0.214:1400/getaa?s=1&amp;u=x-sonosapi-stream%3Atunein%253a5619%3Fsid%3D303%26amp%3Bflags%3D8224%26amp%3Bsn%3D2); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.Sonos_Kueche%3Dset%20Sonos_Kueche%20StartFavourite%20ENERGY%2520Sachsen')"></div></li><li style="list-style-type: none; display: inline;"><div style="display: inline-block; border: solid 1px lightgray; margin: 3px; width: 70px; height: 70px; background-image: url(http://192.168.0.214:1400/getaa?s=1&amp;u=x-sonosapi-stream%3Atunein%253a25179%3Fsid%3D303%26amp%3Bflags%3D8224%26amp%3Bsn%3D2); background-repeat: no-repeat; background-size: contain; background-position: center center;" onclick="FW_cmd('/fhem?XHR=1&amp;cmd.Sonos_Kueche%3Dset%20Sonos_Kueche%20StartFavourite%20SacTownRadio')"></div></li>

Ich weis aber nicht an was es da liegt...
Es liegt vermutlich an den background-image url´s. Die scheinen nicht erreichbar zu sein oder fehlerhaft und somit lädt ftui nicht durch???
Die background-images werden in der Konsole unter Network mit status 200 angezeigt und im preview auch. Woran liegt es dann???

[stefan-dd]

Wie kann man unter ftui-dropdown die Farben anpassen?
Man sieht keine Auswahlmöglichkeit.

Code Auswählen Erweitern

<ftui-dropdown nochevron class="size-2" list="aus,auto,reduziert,komfort" [value]="Heizung_modus:state" (value)="Heizung_modus $value"></ftui-dropdown>

[setstate]

Dropdown benutzt bis jetzt nur ganz einfache <select> <option> HTML Tags. Diese lassen sich nicht per Style verändern. Das Style ist abhängig vom Browser. Man müsste eine andere Dropdown-Komponente bauen, die alles selbst erzeugt und styled.

[grossmaggul]

Um dem Problem mit dem dunklen Bildschirm auf den Grund zu gehen, habe ich erstmal nur die neue ftui.js herüberkopiert und konnte, wie schon stefan-dd anmerkte, herausbekommen, daß das "Problem" wohl nur an dieser Datei liegt.

Da wurde dieser Teil mit einer if Abfrage entfernt:

Code Auswählen Erweitern

// initially loading the page
// or navigating to the page from another page in the same window or tab
window.addEventListener('pageshow', () => {
  if (typeof window.ftuiApp === 'undefined') {
    // load FTUI
    main();
  } else {
    window.ftuiApp.setOnline();
  }
});

und main(); wanderte ans Ende.

Füge ich die if Anfrage wieder ein und entferne am Ende main() läuft's wieder.
Leider habe ich keinerlei Javascriptkenntnisse und kann daher auch nicht erkennen was das Problem dabei ist, aber irgendwer kann es bestimmt.

[mr_petz]

Dropdown benutzt bis jetzt nur ganz einfache <select> <option> HTML Tags. Diese lassen sich nicht per Style verändern. Das Style ist abhängig vom Browser. Man müsste eine andere Dropdown-Komponente bauen, die alles selbst erzeugt und styled.

Stimmt nicht ganz
Die Textfarbe kann er im ftui-dropdown anpassen:

Code Auswählen Erweitern


    <ftui-dropdown class="size-2" style="--text-color:var(--primary-color);"
    nochevron
    list="aus,auto,reduziert,komfort"
    [value]="Heizung_modus:state"
    (value)="Heizung_modus $value">
    </ftui-dropdown>


LG mr_petz

Edit: Bordercolor auch Bsp.: --border-color:var(--primary-color)

[yersinia]

Dropdown benutzt bis jetzt nur ganz einfache <select> <option> HTML Tags. Diese lassen sich nicht per Style verändern. Das Style ist abhängig vom Browser. Man müsste eine andere Dropdown-Komponente bauen, die alles selbst erzeugt und styled.

Wat? Imho müsste das mit CSS(3) durchaus gehen, ebenso mit dem HTML-Standard.
https://www.clickstorm.de/blog/dropdown-css3/
https://www.sliderrevolution.com/resources/css-select-styles/
https://de.w3docs.com/snippets/css/wie-kann-man-eine-select-box-drop-down-nur-mit-css-erstellen.html

[setstate]

Dann muss ich das relativieren. Unter Mac OS bleibt die <option> Liste immer gleich gestylt. Zumindest im Safari und Chromium. Firefox reagiert auf Farbvorgaben und benötigt auch Anpassungen, um die Lesbarkeit zu verbessern. -> mache ich noch
Unter Windows ist es stylebarer, Android habe ich noch nicht getestet.

[yersinia]

Vermutlich eine gewollte Vorgabe seitens Apple, damit Webseiten das Design des Betriebssystem nicht stören. Eye-candy halt.
Möglicherweise kann das schon mit einem -webkit-appearance: none; abgestellt werden.

Code Auswählen Erweitern

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: none;
}
select::-ms-expand {
  display: none;
}
https://www.clickstorm.de/blog/dropdown-css3/

[mr_petz]

Ich würde mal hier eine Demo zum Thema Dropdown posten.
Die ist rein css basierend.
Hier kann ja jeder testen ob so ein gestyltes Dropdown bei seinem Browser und OS gehen würde:
https://codepen.io/raubaca/pen/VejpQP
und
https://codepen.io/raubaca/pen/bGWmZje

LG mr_petz

Edit: unter Android bleibt der background der options dunkelgrau bei den Demos und es werden immer die Android-Option angezeigt.
Hier bei der Demo unter JS wird es Farbig und Android nimmt nicht seine Optionsliste:
https://jsfiddle.net/palak6041/Lg84fayz/6

[moonsorrox]

wenn ich wüßte was man mit diesen links machen kann würde ich es testen., aber kein Plan von 

[mr_petz]

wenn ich wüßte was man mit diesen links machen kann würde ich es testen., aber kein Plan von 

Wenn alles geladen ist, erscheint in einem Fenster (ersten beiden ganz unten und 3. rechts unten) ein Dropdown. Das einfach benutzen und schauen ob es bei dir gestylet angezeigt wird oder nicht.
Ich weis nicht ob die Infos setstate was nützen. Für alle Plattformen (Browser/OS) wird es rein mit css nichts werden. Es wird nicht ohne Javascript gehen.
Android nimmt meistens immer seine eigene Option-Ansicht und IOS bestimmt auch...
LG

Edit: Nur zur info:
Das ftui-dropdown ist bei mir unter Android mit Fully bg=weiß und text=schwarz, mit Android und WallPanel bg=schwarz und text=weiß im darkmode sonst wie Fully! Es wird hier nicht das Android-Options genommen.

[moonsorrox]

ich habe gerade ein Update mit meinem Zweitsytem gefahren und muss sagen es ist jetzt alles OK.
Ich werde mal schauen ob es auch beim Produktivsystem auch funktioniert.

Es könnte sein das setstate schon etwas gefixt hat..?!
EDIT:// nein es geht doch noch nicht...!!!