FTUI version 3

[ToM_ToM]

Hey, kann mir jemand beim Segment-Button für den Homestatus helfen?

Ich versuche das was in FTUI2 funktioniert, zu FTUI3 zu portieren. Jedoch finde ich nicht ganz raus welche Angaben der Segment Button in welcher Form benötigt.

FTUI 2

Code Auswählen Erweitern


<div data-type="homestatus" data-device='Homestatus'
data-get-on='["Home","Sleep","Away","Holiday", "Work"]'
data-alias='["Daheim","Schlafen","Abwesend","Urlaub", "Arbeit"]'
data-icons='["fa-home","fa-bed","fa-car","fa-suitcase", "fa-desktop"]'
data-version='residents'
class="narrow bigger">
</div>



FTUI 3

Code Auswählen Erweitern


<ftui-segment id="segmentHomeState" [value]="Homestatus" class="size-2">
<ftui-segment-button (value)="Homestatus.Home">
<ftui-icon name="home1"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Sleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="absent">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
</ftui-segment>


VG, Thomas

[khk123]

Hi Thomas,

bei "[(value)]" dein gewünschtes Device eintragen und bei "value=" den Wert des Devices.

Code Auswählen Erweitern


<ftui-segment id="segmentHomeState" [(value)]="HomeStatus1" class="size-2">
<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>


In den FTUI-Examples findest du auch entsprechende Beispiele.

Viele Grüße
Karlheinz

[ToM_ToM]

Hi Karlheinz,

die Examples hatte ich mir angesehen und das auch entsprechend nachgebaut, aber leider funktioniert das Ganze nicht.

Anbei nochmal mein FHEM Device und mein FTUI3 Code-Schnipsel:

Code Auswählen Erweitern


Internals:
   FUUID      5c4434b4-f33f-762f-7e0a-886e914ef8498f9e
   FVERSION   98_dummy.pm:0.206650/2019-12-06
   NAME       Homestatus
   NR         361
   STATE      Work
   TYPE       dummy
   READINGS:
     2021-02-10 13:25:01   state           Work
Attributes:
   room       Allgemein
   setList    Home Away Work Holiday Sleep


Code Auswählen Erweitern


<ftui-grid-tile row="19" col="1" height="2" width="5">
<ftui-segment id="segmentHomeState" ([value])="Homestatus" class="size-2">
<ftui-segment-button value="Home">
<ftui-icon name="home1"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Sleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Away">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Holiday">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
</ftui-segment>
</ftui-grid-tile>


VG, Thomas

[khk123]

Schick mal die Definitionen deines Homestatuss-Devices.

Gruß
Karlheinz

[ToM_ToM]

Schick mal die Definitionen deines Homestatuss-Devices.

Code Auswählen Erweitern


defmod Homestatus dummy
attr Homestatus DbLogExclude .*
attr Homestatus room Allgemein
attr Homestatus setList Home Away Work Holiday Sleep

setstate Homestatus Work
setstate Homestatus 2021-02-10 13:25:01 state Work


[Eisix]

Hallo,

nochmal konkret die Frage die ich habe, kann ich zwei readings in einem button benutzen?

<ftui-button
     [value]="{{FBH}}:status"
     (value)="setreading {{FBH}} status $value" states="auto,man,frost,off" shape="circle" fill="solid"
     [color]="{{FBH}}:actorState | map('on:orange, off:grey')">
                                <ftui-icon class="size-2"
                                        [name]="{{FBH}}:status | map('man:sani_heating_manual, auto:sani_heating_automatic, frost:snowflake-o, off:general_aus')"
                                        [color]="{{FBH}}:status | map('man:blue, auto:mygreen, frost:yellow, off:white')"
                                ></ftui-icon>
</ftui-button>

Ist das grundsätzlich nicht möglich oder habe ich einen Syntaxfehler?

Gruß
Eisix

[setstate]

Das geht. Probier doch mal ohne ftui-content.

[khk123]

Funktioniert mit den folgenden Definitionen bei mir einwandfrei. Hab beide Richtungen getestet. Zustand in FHEM geändert, wird korrekt in FTUI angezeigt und auch umgekehrt.
Falls es bei dir nicht funktioniert, evtl. mal FTUI updaten?

Code Auswählen Erweitern


defmod HomeStatus2 dummy
attr HomeStatus2 DbLogExclude .*
attr HomeStatus2 room Allgemein
attr HomeStatus2 setList Home Away Work Holiday Sleep

Code Auswählen Erweitern


<ftui-segment id="segmentHomeState" [(value)]="HomeStatus2" class="size-2">
<ftui-segment-button value="Home">
<ftui-icon name="home1"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Away">
<ftui-icon name="road"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Work">
<ftui-icon name="wrench"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Holiday">
<ftui-icon name="plane"></ftui-icon>
</ftui-segment-button>
<ftui-segment-button value="Sleep">
<ftui-icon name="bed"></ftui-icon>
</ftui-segment-button>
</ftui-segment>

Gruß
Karlheinz

[Eisix]

Mit den Farben primary, secondary, .. geht es mit und ohne content file so wie es aussieht.

Code Auswählen Erweitern


                        <ftui-button [value]="FBH_A:status" (value)="setreading FBH_A status $value" states="auto,man,frost,off" shape="circle" fill="solid" class="size-3"
                                [color]="FBH_A:actorState | map('on:third, off:primary')">
                                <ftui-icon class="size-2"
                                        [name]="FBH_A:status | map('man:sani_heating_manual, auto:sani_heating_automatic, frost:snowflake-o, off:general_aus')"
                                        [color]="FBH_A:status | map('man:blue, auto:mygreen, frost:yellow, off:white')"
                                ></ftui-icon>
                        </ftui-button>



Gruß
Eisix

[khk123]

Hi octek0815,

mir gefällt deine Thermostat-Anzeige. Hab aber ein paar Formatierungs-Probleme dies nachzubauen. Würdest du mal deine Definitionen auflisten, wenn ich höflich darum bitte? 

VG
Karlheinz

[octek0815]

Hi octek0815,

mir gefällt deine Thermostat-Anzeige. Hab aber ein paar Formatierungs-Probleme dies nachzubauen. Würdest du mal deine Definitionen auflisten, wenn ich höflich darum bitte? 

VG
Karlheinz

Moin Karlheinz,

klar kann ich dir (euch das zur Verfügung stellen)...

Grundgerüst für eine Zeile...

Code Auswählen Erweitern


<ftui-row>
<ftui-column class="_size-standard">
<ftui-row align-items="left" height="50%">
<ftui-label text="Raum" class="bold"></ftui-label>
</ftui-row>
<ftui-row align-items="left">
<ftui-label text="Bad oben"></ftui-label>
</ftui-row>
</ftui-column>
<ftui-column class="_size-standard">
<ftui-row height="50%">
<ftui-label text="Solltemp." class="bold"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-content file="./_contents/tablet-flur/content-heizung-thermostate-content-solltemp.html" device="Badezimmer_OG_Heizung_Clima"></ftui-content>
</ftui-row>
</ftui-column>
<ftui-column class="_size-standard">
<ftui-row height="50%">
<ftui-label text="Temp." class="bold"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-label [text]="Badezimmer_OG_TempRH_Sensor:temperature | fix(1)"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-row>
</ftui-column>
<ftui-column width="3%">
</ftui-column>
<ftui-column class="_size-standard">
<ftui-row height="50%">
<ftui-label text="Ventil(e)" class="bold"></ftui-label>
</ftui-row>
<ftui-row width="125%">
<ftui-column>
<ftui-slider class="_size-0punkt5em" [value]="Badezimmer_OG_Heizung_Clima:ValvePosition" min="0" max="100" handle="none" has-ruler readonly></ftui-slider>
<ftui-label style="margin-top:-1.1em;" class="_size-0punkt75em" [text]="Badezimmer_OG_Heizung_Clima:ValvePosition"><span slot="end" class="_UnitStyle">%</span></ftui-label>
</ftui-column>
</ftui-row>
</ftui-column>
<ftui-column width="3%">
</ftui-column>
<ftui-column class="_size-standard">
<ftui-row height="50%">
<ftui-label text="Modus" class="bold"></ftui-label>
</ftui-row>
<ftui-row>
<ftui-content file="./_contents/tablet-flur/content-heizung-thermostate-content-modus.html" device="Badezimmer_OG_Heizung_Clima"></ftui-content>
</ftui-row>
</ftui-column>
</ftui-row>


content-heizung-thermostate-content-solltemp.html...

Code Auswählen Erweitern


<ftui-column>
<ftui-row class="_spinner">
<ftui-column>
<ftui-button [value]="{{device}}:desired-temp"
(value)="add(-0.5) | {{device}}:desired-temp" states="$value" fill="">
<ftui-icon class="_size-0punkt5em" name="minus" color="blue"></ftui-icon>
</ftui-button>
</ftui-column>
<ftui-column style="width:25%;">
<ftui-label [text]="{{device}}:desired-temp | fix(1)" style="margin-left:0.2em;" class="bold"><span slot="end" class="_UnitStyle">&deg;C</span></ftui-label>
</ftui-column>
<ftui-column>
<ftui-button [value]="{{device}}:desired-temp"
(value)="add(0.5) | {{device}}:desired-temp" states="$value" fill="">
<ftui-icon class="_size-0punkt5em" name="plus" color="red"></ftui-icon>
</ftui-button>
</ftui-column>
</ftui-row>
</ftui-column>


content-heizung-thermostate-content-modus.html

Code Auswählen Erweitern


<ftui-row [hidden]="{{device}}:controlMode | map('set_auto:true, set_manual:true, set_boost:true, auto:false, boost:false, manual:false')">
<ftui-button style="margin-right:0.25em;" class="_size-2punkt25vh" shape="circle" [fill]="{{device}}:controlMode | map('.*auto:solid, .*manual:outline, .*boost:outline')"
[color]="{{device}}:controlMode | map('.*auto:primary, .*manual:white, .*boost:white')"
(value)="set {{device}}:controlMode auto">
<ftui-icon color="white" name="_heating_automatic"
[class-name]="{{device}}:controlMode | map('set_auto:blink')"></ftui-icon>
</ftui-button>
<ftui-button class="_size-2punkt25vh" shape="circle" [fill]="{{device}}:controlMode | map('.*auto:outline, .*manual:solid, .*boost:outline')"
[color]="{{device}}:controlMode | map('.*auto:white, .*manual:primary, .*boost:white')"
(value)="set {{device}}:controlMode manual">
<ftui-icon color="white" name="_heating_manual"
[class-name]="{{device}}:controlMode | map('set_manual:blink')"></ftui-icon>
</ftui-button>
<ftui-button style="margin-left:0.25em;" class="_size-2punkt25vh" shape="circle" [fill]="{{device}}:controlMode | map('.*auto:outline, .*manual:outline, .*boost:solid')"
[color]="{{device}}:controlMode | map('.*auto:white, .*manual:white, .*boost:primary')"
(value)="set {{device}}:controlMode boost">
<ftui-icon color="white" name="_heating_boost"
[class-name]="{{device}}:controlMode | map('set_boost:blink')"></ftui-icon>
</ftui-button>
</ftui-row>
<ftui-row [hidden]="{{device}}:controlMode | map('set_auto:false, set_manual:false, set_boost:false, auto:true, boost:true, manual:true')">
<ftui-icon class="_size-2punkt25vh spin" color="primary" name="cog"></ftui-icon>
<ftui-icon class="_size-2punkt25vh spin" color="primary" name="cog"></ftui-icon>
<ftui-icon class="_size-2punkt25vh spin" color="primary" name="cog"></ftui-icon>
</ftui-row>


CSS Klassen...

Code Auswählen Erweitern


._UnitStyle {
  margin-left: 0.2em;
  font-size: 0.5em;
}

._size-standard {
  font-size: 2.9vh;
}

._size-0punkt5em {
  font-size: 0.5em;
}

._size-0punkt75em {
  font-size: 0.75em;
}

._size-2punkt25vh {
  font-size: 2.25vh;
}

._spinner {
  background-color: #696969;
  border-radius: 1.5em;
  width: 80%;
  height: 2.25em;
}



Bei Fragen einfach melden...

Viele Grüße
Olli

[ToM_ToM]

Funktioniert mit den folgenden Definitionen bei mir einwandfrei.

Danke Karlheinz. Wenn

Code Auswählen Erweitern

[(value)]="Homestatus" schreibe, geht's bei mir auch. Hatte das vorher vertauscht gehabt. Also so:

Code Auswählen Erweitern

([value])="Homestatus" Doofer Fehler. 

VG, Thomas

[setstate]

Danke Karlheinz. Wenn

Code Auswählen Erweitern

[(value)]="Homestatus" schreibe, geht's bei mir auch. Hatte das vorher vertauscht gehabt. Also so:

Code Auswählen Erweitern

([value])="Homestatus" Doofer Fehler. 

VG, Thomas

Man kann sich das leicht merken:

"BANANA IN A BOX"

[] = box
() = banana.
[()] = banana in a box 😃

[khk123]

Danke Karlheinz. Wenn

Code Auswählen Erweitern

[(value)]="Homestatus" schreibe, geht's bei mir auch. Hatte das vorher vertauscht gehabt. Also so:

Code Auswählen Erweitern

([value])="Homestatus" Doofer Fehler. 

VG, Thomas

Ooops, das habe ich auch übersehen. Aber schön, wenn wir es gemeinsam lösen konnten. 

Gruß
Karlheinz

[khk123]

Moin Karlheinz,

klar kann ich dir (euch das zur Verfügung stellen)...

Bei Fragen einfach melden...

Viele Grüße
Olli

Vielen Dank für deine Anregungen! 

Gruß
Karlheinz