FTUI version 3

mr_petz · 11 Februar 2021, 12:09:07

@setstate, @all

Entweder habe ich ein Denkfehler oder habe den SegmentedButton mit Binding nicht verstanden.
Ich wollte meine Betriebsmodi darüber steuern und anzeigen lassen. Hier im Test off, on und auto.
Es werden aber nicht die richtigen einzelnen segment-button- icons angezeigt. die set Befehle gehen alle. Das Blaue Feld switcht auch nicht mit um wenn ich aus fhem oder Alexa schalte. Irgendwas will nicht. Er will auch immer ein on bzw auto.svg, obwohl ich ja die richtigen Icons angegeben habe.

Code Auswählen


 	<ftui-segment id="setVaillantState" [(value)]="MQTT2_ebusd:Heizmodus" class="size-2">
		<ftui-segment-button value="off">
			<ftui-icon 
				[value]="MQTT2_ebusd:Mode_hcmode1_value" 
				[name]="MQTT2_ebusd:Mode_hcmode1_value | map('off|set_off:aus_mode')" 
				[color]="MQTT2_ebusd:Mode_hcmode1_value | map('off:black')">
			</ftui-icon>
		</ftui-segment-button>
		<ftui-segment-button value="on">
			<ftui-icon 
				[value]="MQTT2_ebusd:Mode_hcmode1_value" 
				[name]="MQTT2_ebusd:Mode_hcmode1_value | map('on|set_on:an_mode')" 
				[color]="MQTT2_ebusd:Mode_hcmode1_value | map('on:red')">
			</ftui-icon>
		</ftui-segment-button>
		<ftui-segment-button value="auto">
			<ftui-icon 
				[value]="MQTT2_ebusd:Mode_hcmode1_value" 
				[name]="MQTT2_ebusd:Mode_hcmode1_value | map('auto|set_auto:auto_mode')" 
				[color]="MQTT2_ebusd:Mode_hcmode1_value | map('auto:blue')">
			</ftui-icon>
		</ftui-segment-button>
		<ftui-segment-button value="4">
			<ftui-icon name="plane"></ftui-icon>
		</ftui-segment-button>
    </ftui-segment>

Heizmodus=setBefehle
Mode_hcmode1_value=Reading

Geht das so nicht?
Danke für nen Tip.

mfg Thomas

octek0815 · 11 Februar 2021, 12:18:23

Zitat von: mr_petz am 11 Februar 2021, 12:09:07
@setstate, @all

Entweder habe ich ein Denkfehler oder habe den SegmentedButton mit Binding nicht verstanden.
Ich wollte meine Betriebsmodi darüber steuern und anzeigen lassen. Hier im Test off, on und auto.
Es werden aber nicht die richtigen einzelnen segment-button- icons angezeigt. die set Befehle gehen alle. Das Blaue Feld switcht auch nicht mit um wenn ich aus fhem oder Alexa schalte. Irgendwas will nicht. Er will auch immer ein on bzw auto.svg, obwohl ich ja die richtigen Icons angegeben habe.
Code Auswählen Erweitern
<ftui-segment id="setVaillantState" [(value)]="MQTT2_ebusd:Heizmodus" class="size-2"> <ftui-segment-button value="off"> <ftui-icon [value]="MQTT2_ebusd:Mode_hcmode1_value" [name]="MQTT2_ebusd:Mode_hcmode1_value | map('off|set_off:aus_mode')" [color]="MQTT2_ebusd:Mode_hcmode1_value | map('off:black')"> </ftui-icon> </ftui-segment-button> <ftui-segment-button value="on"> <ftui-icon [value]="MQTT2_ebusd:Mode_hcmode1_value" [name]="MQTT2_ebusd:Mode_hcmode1_value | map('on|set_on:an_mode')" [color]="MQTT2_ebusd:Mode_hcmode1_value | map('on:red')"> </ftui-icon> </ftui-segment-button> <ftui-segment-button value="auto"> <ftui-icon [value]="MQTT2_ebusd:Mode_hcmode1_value" [name]="MQTT2_ebusd:Mode_hcmode1_value | map('auto|set_auto:auto_mode')" [color]="MQTT2_ebusd:Mode_hcmode1_value | map('auto:blue')"> </ftui-icon> </ftui-segment-button> <ftui-segment-button value="4"> <ftui-icon name="plane"></ftui-icon> </ftui-segment-button> </ftui-segment>
Heizmodus=setBefehle
Mode_hcmode1_value=Reading

Geht das so nicht?
Danke für nen Tip.

mfg Thomas

Hallo Thomas,

du musst bei den einzelnen Segments die Icons fest definieren, siehe Example von setstate...

Code Auswählen


      <ftui-segment [(value)]="ftuitest">
        <ftui-segment-button value="1">
          <ftui-icon name="home1"></ftui-icon>
        </ftui-segment-button>
        <ftui-segment-button value="2">
          <ftui-icon name="bed"></ftui-icon>
        </ftui-segment-button>
        <ftui-segment-button value="3">
          <ftui-icon name="road"></ftui-icon>
        </ftui-segment-button>
        <ftui-segment-button value="4">
          <ftui-icon name="plane"></ftui-icon>
        </ftui-segment-button>
      </ftui-segment>

Grüße
Olli

octek0815 · 11 Februar 2021, 12:29:47

Zitat von: octek0815 am 11 Februar 2021, 12:18:23
Hallo Thomas,

du musst bei den einzelnen Segments die Icons fest definieren, siehe Example von setstate...
Dein Device und Reading "MQTT2_ebusd:Mode_hcmode1_value" liefert ja ein Wert und wenn du mappst und kein passende Mapping da ist versucht ftui dann das Icon entsprechend dem gelieferten Rückgabewert anzuzeigen.
In deinem Fall (im Bild) "auto". Da es das Icon scheinbar nicht findet wird der Fehler angezeigt.

Code Auswählen Erweitern
<ftui-segment [(value)]="ftuitest"> <ftui-segment-button value="1"> <ftui-icon name="home1"></ftui-icon> </ftui-segment-button> <ftui-segment-button value="2"> <ftui-icon name="bed"></ftui-icon> </ftui-segment-button> <ftui-segment-button value="3"> <ftui-icon name="road"></ftui-icon> </ftui-segment-button> <ftui-segment-button value="4"> <ftui-icon name="plane"></ftui-icon> </ftui-segment-button> </ftui-segment>

Grüße
Olli

mr_petz · 11 Februar 2021, 13:29:41

ich versteh´s trotzdem nicht.

Ich muss ja einerseits den set Befehl angeben und andererseits das Reading.
wie muss ich dann hier das Icon angeben?

Code Auswählen


			<ftui-icon
				[value]="MQTT2_ebusd:Mode_hcmode1_value"
				[name]="MQTT2_ebusd:Mode_hcmode1_value | map('off|set_off:aus_mode')"
				[color]="MQTT2_ebusd:Mode_hcmode1_value | map('off:black')">
			</ftui-icon>

Ich habe ja das Icon angegeben:
[name]="MQTT2_ebusd:Mode_hcmode1_value | map('off|set_off:aus_mode')"

muss ich das dann so schreiben?

Code Auswählen


name="MQTT2_ebusd:Mode_hcmode1_value off|set_off:aus_mode"

Ich habe keine Ahnung sorry???

mr_petz · 11 Februar 2021, 13:41:22

OK so geht es:

name="auto_mode"

nur das der Blaue Balken sich nicht automatisch verschiebt.

octek0815 · 11 Februar 2021, 13:43:49

Zitat von: mr_petz am 11 Februar 2021, 13:29:41
ich versteh´s trotzdem nicht.
Ich muss ja einerseits den set Befehl angeben und andererseits das Reading.
wie muss ich dann hier das Icon angeben?
Code Auswählen Erweitern
<ftui-icon [value]="MQTT2_ebusd:Mode_hcmode1_value" [name]="MQTT2_ebusd:Mode_hcmode1_value | map('off|set_off:aus_mode')" [color]="MQTT2_ebusd:Mode_hcmode1_value | map('off:black')"> </ftui-icon>
Ich habe ja das Icon angegeben:
[name]="MQTT2_ebusd:Mode_hcmode1_value | map('off|set_off:aus_mode')"

muss ich das dann so schreiben?
Code Auswählen Erweitern
name="MQTT2_ebusd:Mode_hcmode1_value off|set_off:aus_mode"
Ich habe keine Ahnung sorry???

Bei ftui-icon ist "name" der Icon-Name.
In deinem Fall würde es dann so aussehen...

Code Auswählen


<ftui-segment id="setVaillantState" [(value)]="MQTT2_ebusd:Heizmodus" class="size-2">
	<ftui-segment-button value="off">
		<ftui-icon name="aus_mode"></ftui-icon>
	</ftui-segment-button>
	<ftui-segment-button value="on">
		<ftui-icon name="an_mode"></ftui-icon>
	</ftui-segment-button>
	<ftui-segment-button value="auto">
		<ftui-icon name="auto_mode"></ftui-icon>
	</ftui-segment-button>
</ftui-segment>

Deine gewünschten Farben solltest Du dann in CSS definieren.
Wenn Du in die ftui-theme.css in themes schaust, findest du den passenden Bereich:

Code Auswählen


  --segments-background-color: var(--medium-color);
  --segments-separator-color: var(--dark-color);
  --segments-selection-color: var(--primary-color);
  --segments-selection-contrast-color: var(--primary-contrast-color);
  --segments-hover-color: var(--light-color);

Diese kann Du entweder in einer eigenen Theme definieren oder in deiner index.html im body Bereich mit style.

Grüße
Olli

mr_petz · 11 Februar 2021, 13:50:28

Danke dir Olli.
Jetzt muss sich doch der Blaue Balken mit zum entsprechenden Status bewegen oder?

octek0815 · 11 Februar 2021, 14:58:10

Zitat von: mr_petz am 11 Februar 2021, 13:50:28
Danke dir Olli.
Jetzt muss sich doch der Blaue Balken mit zum entsprechenden Status bewegen oder?

Ich habe das gerade mit einem Dummy nachgebaut und es funktioniert.
Um zu helfen muss man wissen was Mode_hcmode1_value und was Heizmodus sind.
Und wie wird das Device gesteuert?

mr_petz · 11 Februar 2021, 15:58:14

Zitat von: octek0815 am 11 Februar 2021, 14:58:10
Ich habe das gerade mit einem Dummy nachgebaut und es funktioniert.
Um zu helfen muss man wissen was Mode_hcmode1_value und was Heizmodus sind.
Und wie wird das Device gesteuert?

Hatte ich oben schon geschrieben:

Heizmodus=set Befehle
Mode_hcmode1_value=Reading

Und was meinst du mit Device gesteuert?

Edit:
die Farben wechseln zum entsprechenden segment-button. nur der Blaue darüber nicht. Hier nochmal der Codeausschnitt von off:

Code Auswählen


  	<ftui-segment id="setVaillantState" [(value)]="MQTT2_ebusd:Heizmodus" class="size-2" shape="round">
		<ftui-segment-button value="off">
			<ftui-icon 
				[value]="MQTT2_ebusd:Mode_hcmode1_value | map('off:off')" 
				name="aus_mode" 
				[color]="MQTT2_ebusd:Mode_hcmode1_value | map('off:black')">
			</ftui-icon>
		</ftui-segment-button>

setstate · 11 Februar 2021, 17:11:14

@mr_petz
hör doch mal auf, immer die icon-color manipulieren zu wollen, dass macht ftui-segment für dich. ftui-segment setzt den blauen Block über das Feld, was dem Value entspricht.

Wenn für den ftui-segment über deinen MQTT2_ebusd:Heizmodus der value 'off' reinkommt, wir der blaue Block über das Segment mit dem value = 'off' geschoben. Die Icons oder der Text innerhalb des Segments sind statisch und haben keine [...]

octek0815 · 11 Februar 2021, 17:31:45

Zitat von: mr_petz am 11 Februar 2021, 15:58:14
Hatte ich oben schon geschrieben:

Heizmodus=set Befehle
Mode_hcmode1_value=Reading

Und was meinst du mit Device gesteuert?

Edit:
die Farben wechseln zum entsprechenden segment-button. nur der Blaue darüber nicht. Hier nochmal der Codeausschnitt von off:
Code Auswählen Erweitern
<ftui-segment id="setVaillantState" [(value)]="MQTT2_ebusd:Heizmodus" class="size-2" shape="round"> <ftui-segment-button value="off"> <ftui-icon [value]="MQTT2_ebusd:Mode_hcmode1_value | map('off:off')" name="aus_mode" [color]="MQTT2_ebusd:Mode_hcmode1_value | map('off:black')"> </ftui-icon> </ftui-segment-button>

So ich habe es nun nochmal nachgebaut und jetzt habe ich es verstanden.
Korrigiere mich wenn ich falsch liege.

Ein set MQTT2_ebusd Heizmodus auto in FHEM ändert den Heizmodus deiner Vaillant Heizung in den Automatikmodus und dabei wird das Reading Mode_hcmode1_value dann auf den Wert auto gesetzt?

Dann muss dein Code so aussehen...

Code Auswählen


	<ftui-segment id="setVaillantState" [value]="MQTT2_ebusd:Mode_hcmode1_value" (value)="MQTT2_ebusd:Heizmodus" class="size-2">
		<ftui-segment-button value="off">
			<ftui-icon
				[value]="MQTT2_ebusd:Mode_hcmode1_value"
				name="aus_mode"
				[color]="MQTT2_ebusd:Mode_hcmode1_value | map('off:black')">
			</ftui-icon>
		</ftui-segment-button>
		<ftui-segment-button value="on">
			<ftui-icon
				[value]="MQTT2_ebusd:Mode_hcmode1_value"
				name="an_mode"
				[color]="MQTT2_ebusd:Mode_hcmode1_value | map('on:red')">
			</ftui-icon>
		</ftui-segment-button>
		<ftui-segment-button value="auto">
			<ftui-icon
				[value]="MQTT2_ebusd:Mode_hcmode1_value"
				name="auto_mode"
				[color]="MQTT2_ebusd:Mode_hcmode1_value | map('auto:blue')">
			</ftui-icon>
		</ftui-segment-button>
    </ftui-segment>

"BANANA IN A BOX" geht in diesem Fall nicht...

Grüße
Olli

setstate · 11 Februar 2021, 17:39:20

Aber Icon hat gar kein value Parameter. Und warum soll Color bei Icon geändert werden?

mr_petz · 11 Februar 2021, 17:43:04

Danke Olli so geht es. ich hatte auch schon mit den Klammern gespielt, aber ohne Erfolg...
Der blaue Block wird nur nicht nach einem Reload der Seite an die riechtige Stelle gesetzt. Erst nach einem Event...

Gruß Thomas

mr_petz · 11 Februar 2021, 17:45:08

Zitat von: setstate am 11 Februar 2021, 17:39:20
Aber Icon hat gar kein value Parameter. Und warum soll Color bei Icon geändert werden?

Ich weiss ja das dafür der blaue Balken da ist, aber ich wollte testen was geht...

octek0815 · 11 Februar 2021, 17:48:24

@setstate

Ist es möglich Icon mit Badge im Swiper zu nutzen. Habs nicht hinbekommen...
Mochte meine obere Statusleiste entschlacken (den Abfall Bereich).

Meine Idee war die Vier Icons in ein Automatik-Swiper zu packen.

Hier der Code...

Code Auswählen


	<ftui-column>
		<ftui-row>
			<ftui-swiper id="abfall" auto-play interval="2">
				<ftui-content id="abfall_1" file="./_contents/tablet-flur/content-obere-leiste-content-abfall.html" abfall="urBlau" farbe="_blau1"></ftui-content>
				<ftui-content id="abfall_2" file="./_contents/tablet-flur/content-obere-leiste-content-abfall.html" abfall="urBraun" farbe="_braun1"></ftui-content>
				<ftui-content id="abfall_3" file="./_contents/tablet-flur/content-obere-leiste-content-abfall.html" abfall="urGelb" farbe="yellow"></ftui-content>
				<ftui-content id="abfall_4" file="./_contents/tablet-flur/content-obere-leiste-content-abfall.html" abfall="urSchwarz" farbe="_grau1"></ftui-content>
			</ftui-swiper>
		</ftui-row>
	</ftui-column>

content-obere-leiste-content-abfall.html

Code Auswählen


<ftui-row>
	<ftui-icon [name]="System_Abfall:{{abfall}} | map('0:_abfalltonne_auf, 1:_abfalltonne_zu')" color="{{farbe}}" [class-name]="System_Abfall:{{abfall}} | map('0:spin, 1:hop, 2:')"></ftui-icon>
	<ftui-badge style="margin-top:-2%;" [color]="System_Abfall:{{abfall}} | map('0=_rot1, 1=_rot1, 2=_orange1, 3=gray')" [text]="System_Abfall:{{abfall}}" [hidden]="System_Abfall:{{abfall}} | map('0:true, 1:false')"></ftui-badge>
	<ftui-badge style="margin-top:-2%;" [color]="System_Abfall:{{abfall}} | map('0=_rot1, 1=_rot1, 2=_orange1, 3=gray')" 
		[text]="System_Abfall:{{abfall}} | map('0:!')" 
		[hidden]="System_Abfall:{{abfall}} | map(' 0:false, 1:true')">
	</ftui-badge>
</ftui-row>

Leider sind die Badges nicht alle im Swiper und "swipen" auch nicht mit dem Icon.
Und es ist so Breit wie alle Icons zusammen.

Eine Idee, oder zu aufwändig?

Anbei ein Bild des Abfalls ohne Swiper und mit Swiper um das Problem zu sehen.