FTUI version 3

mr_petz · 14 Februar 2021, 23:15:18

Ich nochmal.
(Nur zum Verständnis wurde der Code angepasst.)

So funktioniert es für mich im angepassten dropdown.component.js Code:

Code Auswählen


  fillList() {
    const list = String(this.list).split(/[|]+/);
    this.selectElement.length = 0;
    list.forEach((item) => {
      const opt = document.createElement('option');
      opt.value = item.replace(/ /g,"%20");
      //opt.style.width = '200px';
      opt.innerHTML = item ;
      this.selectElement.appendChild(opt);
    });
    this.selectElement.value = this.value;
  }

Da nehme ich die FavouritesListAlias vom Sonos-Modul die so aussieht:

Code Auswählen


161FM|181.FM Energy 98|538 Dance Department|80s80s christmas (Festtag, traditionell)|Aloha Joe&apos;s Relaxation Island|Ambi Nature Radio (Sleep, Relaxation &amp; Meditation)|FFH Weihnachtsradio (Festtagsmusik)|Fritz vom rbb|HITRADIO RTL - Dresden|HouseTime FM (House)|MDR JUMP 89.0 (Adult Contemporary)|MDR SPUTNIK Club Channel|Minimal Mix Radio|Radio Dresden|Radio PSR 102.4 (Adult Contemporary)|Radio Schlagerparadies (Schlager)|Radio TEDDY|Select Radio|Weihnachtsradio (Festtagsmusik)|sunshine live|sunshine live - classics|sunshine live - house

Jetzt wird immer %20 mitgegeben als Space.
delimiter ist halt nur "|"
Und die Liste sieht wieder normal aus.

Du wirst schon wissen wie man das für alle Systeme integrieren kann

...

Gruß Thomas

Eisix · 15 Februar 2021, 15:57:54

Zitat von: Eisix am 13 Februar 2021, 17:48:58
Hallo,

habe mal wieder eine spezielle syntax Frage. Ist es möglich den Wert für das mapping aus einem Reading zu lesen?

Im konkreten Beispiel möchte ich in einem Template für meine Heizung unterschiedliche Grenzwerte benutzen. Die Readings werden pro Raum (variable FHB) als userreading erzeugt basierend auf der desired Temp.

Habe diverse Klammern und Hochkomma ausprobiert, funktioniert aber nichts. Jemand einen Tip für mich?
Code Auswählen Erweitern
<ftui-label [text]="{{SENSOR}}:CleanTemp |part (1)" [color]="{{SENSOR}}:CleanTemp |part (1) | map('[{{FBH}}:TEMPmin]:blue, [{{FBH}}:TEMPmed]:green, [{{FBH}}:TEMPmin]:red')" class="size-9 bold"> <span slot="end">°C</span> </ftui-label>

Gruß
Eisix

Als weiter Möglichkeit mein Problem zu lösen sehe ich eine Variable die ans content File übergeben wird mit einem Reading zu füllen.
Geht das irgendwie?

<ftui-content file="templates/Heizung_template.html" TEMPmin="Inhalt Eines Reading"></ftui-content>

Gruß
Eisix

setstate · 15 Februar 2021, 17:30:56

Sowas geht nicht. In FTUI 4 dann vielleicht mal

Eisix · 15 Februar 2021, 17:36:36

Zitat von: setstate am 15 Februar 2021, 17:30:56
Sowas geht nicht. In FTUI 4 dann vielleicht mal

<script> ?

khk123 · 15 Februar 2021, 18:03:04

Die Hintergrundfarbe bei einem ftui-label setzten funtioniert ja:

Code Auswählen


<ftui-label class="size-4" style="background-color: yellow;"
		[hidden]="Staumelder:{{warn-number}}_road | map('`-`:true, .*:false')"
		[text]="Staumelder:{{warn-number}}_road" 
		[color]="Staumelder:{{warn-number}}_road | map('A.*:white, .*:black')">
</ftui-label>

Aber wie kann ich die Hintergrundfarbe in Abhängikeit eines Werte verändern?
Es wäre schön, wenn es in der Art funktionieren würde:

Code Auswählen


<ftui-label class="size-4" 
		[hidden]="Staumelder:{{warn-number}}_road | map('`-`:true, .*:false')"
		[text]="Staumelder:{{warn-number}}_road" 
		[color]="Staumelder:{{warn-number}}_road | map('A.*:white, .*:black')"
                [style]="Staumelder:{{warn-number}}_road | map('A.*:background-color:blue, L.*:background-color:yellow, .*:background-color:white">

</ftui-label>

Oder gibt es eine andere Möglichkeit?

VG
Karlheinz

OdfFhem · 15 Februar 2021, 18:03:55

@mr_petz @setstate

Für Sonos in FTUI3 dachte ich, man könnte folgendes Konstrukt nutzen:

Code Auswählen


  <ftui-dropdown [list]="{{device}}:FavouritesListAlias | replace(/\|/g',';')"
    [value]="{{device}}:currentFavouriteName"
    (value)="replace(/\s/g,'.') | {{device}}:StartFavourite /$value/"></ftui-dropdown>

Kann man aber leider nicht, da das Pipe-Zeichen im Rahmen der Pipe-Nutzung eine ganz spezielle Bedeutung hat und außerhalb von Strings durch ein Komma ersetzt wird.

Daher habe ich mich entschlossen eine eigene replace-Pipe bereitzustellen. Dann ergibt sich folgendes Konstrukt:

Code Auswählen


  <ftui-dropdown [list]="{{device}}:FavouritesListAlias | replace2('[|]','g',';')"
    [value]="{{device}}:currentFavouriteName"
    (value)="replace(/\s/g,'.') | {{device}}:StartFavourite /$value/"></ftui-dropdown>

Dieses funktioniert reibungslos.

Um das dropdown-Konstrukt universeller nutzen zu können, hatte ich auch hier ein wenig rumprobiert und folgendes Konstrukt eingesetzt:

Code Auswählen


<ftui-dropdown [list]="{{device}}:FavouritesListAlias"
  [value]="{{device}}:currentFavouriteName"
  (value)="replace(/\s/,'.') | {{device}}:StartFavourite /$value/"
  delimiter="[|]"></ftui-dropdown>		
</ftui-column>

In der dropdown-Komponente war nur eine kleine Änderung notwendig.

Falls man immer nur ein Zeichen als delimiter verwenden können soll:

Code Auswählen


  delimiter: ';' 

  const list = String(this.list).split(this.delimiter);

Falls man fast beliebige Ausdrücke als delimiter verwenden können soll:

Code Auswählen


  delimiter: '[;,:]'

  const list = String(this.list).split(new RegExp(this.delimiter));

Die letzte Theorie bietet die meisten Möglichkeiten fürs dropdown-Konstrukt. Die "neue" Pipe erlaubt geringfügig mehr Möglichkeiten; evtl. kann man aber in Zusammenhang mit replace noch das Pipe-Ersetzen durch Komma unterbinden.

Vielleicht findet ja die ein oder andere Änderung ihren Weg in die Allgemeinheit ...

OdfFhem · 15 Februar 2021, 18:07:21

@khk123

Ungetestet - vermutlich muss es so aussehen:

Code Auswählen


<ftui-label class="size-4"
		[hidden]="Staumelder:{{warn-number}}_road | map('`-`:true, .*:false')"
		[text]="Staumelder:{{warn-number}}_road"
		[color]="Staumelder:{{warn-number}}_road | map('A.*:white, .*:black')"
                [style]="Staumelder:{{warn-number}}_road | map('A.*:`background-color:blue;`, L.*:`background-color:yellow;`, .*:`background-color:white;`">
</ftui-label>

khk123 · 15 Februar 2021, 18:23:08

Zitat von: OdfFhem am 15 Februar 2021, 18:07:21
@khk123

Ungetestet - vermutlich muss es so aussehen:
Code Auswählen Erweitern
[style]="Staumelder:{{warn-number}}_road | map('A.*:`background-color:blue;`, L.*:`background-color:yellow;`, .*:`background-color:white;`">

Das geht nicht. Ich bin kein HTML-Experte, aber in <ftui-label> gibt es nur die folgenden Properties:

Code Auswählen


 static get properties() {
    return {
      text: '',
      color: '',
      unit: '',
      size: -1,
      interval: 0,
      width: '',
      height: '',
    };
  }

mr_petz · 15 Februar 2021, 18:44:48

@OdfFhem

Hi, könnte man nicht als zusätzliche Option wie in FTUI2 den delimiter übergeben
und die %20 als space im Quellcode einfach mit integrieren?

Code Auswählen

opt.value = item.replace(/\s/g,"%20");
Die %20 werden doch in fhem auch als space erkannt oder?

Code Auswählen


  <ftui-dropdown [list]="{{device}}:FavouritesListAlias"
    [(value)]="Sonos_Kueche:StartFavourite"
    [delimiter]="|"</ftui-dropdown>

(k.A. ob so richtig)
so kann jeder den Trenner selber wählen?
Ich denke sonst wird das schon für den "Laien" zu viel Programmierung...??

Gruß Thomas

OdfFhem · 15 Februar 2021, 18:53:11

@khk123

Doch mal einen kleinen Test durchgeführt:

Code Auswählen


  <ftui-label [text]="{{device}}:alias"
     [style]="{{device}}:alias  | map('.*:`background-color:red;`')"></ftui-label>

Und es funktioniert.

Es muss keine speziell unterstützte Property sein. Wichtig sind die eckigen Klammern und wegen der vorkommenden Doppelpunkte die "rückwärtigen" Anführungszeichen ...

OdfFhem · 15 Februar 2021, 19:07:04

@mr_petz

Ich habe FavouritesList mit FavouritesListAlias verglichen und deshalb für den Umgang mit Sonos die sich anbietende Punkt-Ersetzung in Richtung FHEM gewählt; hat meiner Meinung nach aber nichts im Dropdown-Modul verloren ... dort sollte eher nur der Weg von FHEM nach FTUI "entschlüsselt" werden ...

setstate wird sich vielleicht das Geschehen mal näher ansehen ...

mr_petz · 15 Februar 2021, 23:22:15

@setstate und @OdfFhem

Danke für die Umsetzung!
Funktioniert so (FavouritesList mit "." als space):

Code Auswählen


		<ftui-dropdown width="30%" [list]="Sonos_Kueche:FavouritesList"	
		[value]="Sonos_Kueche:currentFavouriteName"
		(value)="Sonos_Kueche:StartFavourite /$value/"
		delimiter="|"></ftui-dropdown>

als auch so (FavouritesListAlias mit "%20" als space):

Code Auswählen


		<ftui-dropdown width="30%" [list]="Sonos_Kueche:FavouritesListAlias"	
		[value]="Sonos_Kueche:currentFavouriteName"
		(value)="replace(/\s/g,'%20') | Sonos_Kueche:StartFavourite $value"
		delimiter="|"></ftui-dropdown>

Gruß Thomas

Edit: Oder muss noch was in encode() rein? Eigendlich nicht, Oder?
Ich werde heute noch das: (value)="encode() | Sonos_Play5 StartRadio $value" testen.

khk123 · 16 Februar 2021, 00:24:16

Zitat von: OdfFhem am 15 Februar 2021, 18:53:11
@khk123

Doch mal einen kleinen Test durchgeführt:
Und es funktioniert.

Es muss keine speziell unterstützte Property sein. Wichtig sind die eckigen Klammern und wegen der vorkommenden Doppelpunkte die "rückwärtigen" Anführungszeichen ...

Entweder hatte ich doch noch einen kleinen Fehler oder es war noch etwas gecached.

Code Auswählen


<ftui-label class="streetIcon" 
	[hidden]="Staumelder:{{warn-number}}_road | map('`-`:true, .*:false')"
	[text]="Staumelder:{{warn-number}}_road" 
	[color]="Staumelder:{{warn-number}}_road | map('A.*:weiss, .*:black')"	
	[style]="Staumelder:{{warn-number}}_road | map('A.*:`background-color:#003abd;`, B.*:`background-color:#ffc505;`, .*:`background-color:#ffffff;`')">
</ftui-label>

Jetzt funktioniert es bei mir auch. Danke für die Hilfe.

VG
Karlheinz

grossmaggul · 16 Februar 2021, 11:41:12

Hallo,

ich habe den DWD Wetterwarnungsswiper von octek0815 eingebaut.
Im Moment gibt es bei uns keine Wetterwarnungen, nun bekomme ich die unten angehängte Fehlermeldung.

gm

moonsorrox · 16 Februar 2021, 12:50:52

Zitat von: grossmaggul am 16 Februar 2021, 11:41:12
Hallo,

ich habe den DWD Wetterwarnungsswiper von octek0815 eingebaut.
Im Moment gibt es bei uns keine Wetterwarnungen, nun bekomme ich die unten angehängte Fehlermeldung.

gm

jou habe ich auch.... sind wir schon zwei

evtl. hat Olli das auch mal schauen ob er sich meldet.
~~Muss noch dazu sagen der Firefox blendet es aus,~~ aber auf meinen Android Tablets läuft es laufend
Der FF macht es doch dauert aber wohl immer ne Weile..