FTUI version 3

[SirMarco]

Ja genau, verstanden 

Wollte eigentlich Label 3 ausblenden lassen. Mit hidden funktioniert das Bestens.
Weiss jemand warum "blink" nicht auf align-left reagiert in ftui-label Zeile 4?

Code Auswählen Erweitern


<ftui-row>
<ftui-column>
    <ftui-label class="align-left" >{{name}}</ftui-label>
    <ftui-label class="align-left" [text]="{{device}}:actifity | map('alive: Connected, dead: Disconnect')" [color]="{{device}}:actifity | map('alive: green, dead: red')"></ftui-label>
    <ftui-label class="align-left" >Letzter Verbindungserfolg:</ftui-label>
    <ftui-label class="align-left" [text]="{{device}}:connectionCheck | map('alive: Connected, dead: Disconnect')" [color]="{{device}}:actifity | map('alive: green, dead: red')" [class-name]="{{device}}:actifity | map('dead:blink')"></ftui-label>
</ftui-column>
<ftui-column>
    <ftui-label></ftui-label>
</ftui-column>
<ftui-column>
   
</ftui-column>
</ftui-row> 


[setstate]

[class-name]="" überschreibt class komplett. Das align muss mit in das map.

[octek0815]

[class-name]="" überschreibt class komplett. Das align muss mit in das map.

oder so...

Code Auswählen Erweitern


<ftui-column align-items="left">
    <ftui-label>{{name}}</ftui-label>
    <ftui-label [text]="{{device}}:actifity | map('alive: Connected, dead: Disconnect')" [color]="{{device}}:actifity | map('alive: green, dead: red')"></ftui-label>
    <ftui-label>Letzter Verbindungserfolg:</ftui-label>
    <ftui-label [text]="{{device}}:connectionCheck | map('alive: Connected, dead: Disconnect')" [color]="{{device}}:actifity | map('alive: green, dead: red')" [class-name]="{{device}}:actifity | map('dead:blink')"></ftui-label>
</ftui-column>


Grüße
Olli

[torte]

Hallo,

hab heute weather ausprobiert, die ICONs werden nicht geladen da Weather Komponente das LoadIcon der ICON Komponente mit der Url aufruft aber
in der LoadIcon Function die Variable name dann nicht gesetzt ist.
Ich meine die Zeile 67

Code Auswählen Erweitern

this.elementIcon.innerHTML = `<img src="${name}"></img>`;

kann es sein da es nicht so sein müsste

Code Auswählen Erweitern

this.elementIcon.innerHTML = `<img src="${url}"></img>`;

Danach lädt er bei mir die ICONS, bei mir PNGs

Grüße
Torte

[setstate]

danke, das war ein Fehler.

[torte]

danke auch 
kurze nachfrage: einige Wetter <IMG> Icons sind rechteckig es bräuchte ein width: 100% mach ich das am besten im CSS oder gibt es da was für?
Grüße
Torte

Edit:
Habt die Variable dann auch gefunden

Code Auswählen Erweitern

style="--icon-width: 100%;"

[Eisix]

Nutz Ihr alle nur line?

Gruß
Eisix

Kann mir immer noch keiner sagen wie ich steps im Chart hinkriege?

Gruß
Eisix

[moonsorrox]

hat jemand von euch schon eine vernünftige Rollladensteuerung zusammen bekommen bzw. auch eine schöne Ansicht.
Ich weiß gar nicht wie ich das machen soll, er nimmt meine Icons gar nicht richtig an, dass steuern eines Rollladens habe ich probiert das ist kein Problem, aber eine vernünftige Iconansicht wäre schon toll.

Ich habe natürlich auch gemerkt wieviel ich davon beutze, soll heißen ein Circlemenü brauche ich gar nicht mehr, dass wäre im Screenshot direkt neben dem Namen POSITION, denn der Rollladen macht ja alles soweit alleine.
Eigentlich reichen die Beschattungspositionen und Hoch/Runter/Stop und die Modusumschaltungen vollkommen aus.
Ich hänge mal den Screenshot ran.

[OdfFhem]

@setstate

In ftui.css fehlt bei size-5 ein r ...

[octek0815]

hat jemand von euch schon eine vernünftige Rollladensteuerung zusammen bekommen bzw. auch eine schöne Ansicht.
Ich weiß gar nicht wie ich das machen soll, er nimmt meine Icons gar nicht richtig an, dass steuern eines Rollladens habe ich probiert das ist kein Problem, aber eine vernünftige Iconansicht wäre schon toll.

Ich habe natürlich auch gemerkt wieviel ich davon beutze, soll heißen ein Circlemenü brauche ich gar nicht mehr, dass wäre im Screenshot direkt neben dem Namen POSITION, denn der Rollladen macht ja alles soweit alleine.
Eigentlich reichen die Beschattungspositionen und Hoch/Runter/Stop und die Modusumschaltungen vollkommen aus.
Ich hänge mal den Screenshot ran.

Meinst Du so in etwa?

Hier der Code für ein Rollladen:

Code Auswählen Erweitern


<ftui-row class="size-6">
<ftui-column align-items="left" style="margin-left:25px;" height="50%">
<ftui-label text="Bad unten"></ftui-label>
</ftui-column>
<ftui-column>
<ftui-row width="60%">
          <ftui-icon [name]="Badezimmer_EG_Fensterrollladen:state | map('0:_shutter_1w_l_0, 5:_shutter_1w_l_10, 10:_shutter_1w_l_20, 15:_shutter_1w_l_30, 20:_shutter_1w_l_40, 25:_shutter_1w_l_50, 30:_shutter_1w_l_60, 40:_shutter_1w_l_70, 53:_shutter_1w_l_80, 60:_shutter_1w_l_90, 70:_shutter_1w_l_100, opened:_shutter_1w_l_0, closed:_shutter_1w_l_100, Initialized:exclamation-triangle, MISSING.*:exclamation-triangle')" [color]="Badezimmer_EG_Fensterrollladen:state | map('0:white, 100:white, off:white, on:white, set.*:primary, MISSING.*:_rot1, Initialized:_rot1')" [class-name]="Badezimmer_EG_Fensterrollladen | map('set.*:spin, MISSING.*:blink, Initialized:blink')">
</ftui-icon>
                <ftui-column height="12%">
<ftui-icon class="size-0" name="sun" [color]="Badezimmer_EG_Fensterrollladen:ASC_ShuttersLastDrive | map('`shading in`:yellow, .*:gray')"></ftui-icon>
<ftui-icon [name]="Badezimmer_EG_Fensterrollladen:moving | map('up:chevron-circle-up, down:chevron-circle-down, stop:stop-circle')" [color]="Badezimmer_EG_Fensterrollladen:moving | map('up:primary, down:primary, stop:gray')"
[class-name]="Badezimmer_EG_Fensterrollladen:moving | map('up:blink size-0, down:blink size-0, stop:size-0')">
</ftui-icon>
</ftui-column>
</ftui-row>
</ftui-column>
<ftui-column style="margin-right:25px;">
<ftui-row>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen up">
<ftui-icon style="margin-top:-0.5em;" color="white" name="chevron-up"></ftui-icon>
</ftui-button>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen stop">
<ftui-icon color="white" name="minus"></ftui-icon>
</ftui-button>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen down">
<ftui-icon color="white" name="chevron-down"></ftui-icon>
</ftui-button>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen position 15">
<ftui-icon color="white" name="_shutter_1w_l_30"></ftui-icon>
</ftui-button>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen position 25">
<ftui-icon color="white" name="_shutter_1w_l_50"></ftui-icon>
</ftui-button>
<ftui-button style="margin-right:0.25em;" class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen position 45">
<ftui-icon color="white" name="_shutter_1w_l_70"></ftui-icon>
</ftui-button>
<ftui-button class="size-4" shape="circle" fill="outline" color="white" (value)="set Badezimmer_EG_Fensterrollladen getStatus">
<ftui-icon color="white" name="refresh1"></ftui-icon>
</ftui-button>
</ftui-row>
</ftui-column>
</ftui-row>


[Eisix]

@moonsorox

Ich habe alles in einem Icon aber noch mit Circlemenue, allerdings fährt eigentlich alles automatisch, somit zeigt das Icon den aktuellen Status an und wenn wirklich nötig kann man dann die Positionen anfahren.

Das ganze mit den animierten Icons von Thyraz sieht auch gut aus.

Code Auswählen Erweitern


                <ftui-column>
                        <ftui-circlemenu direction="bottom-half">
                                <ftui-icon class="size-3" [name]="Rolladen_WZ_mitte:position | map('0:fts_window_2w, 25:fts_shutter_30, 50:fts_shutter_50, 75:fts_shutter_80, 100:fts_shutter_100')"></ftui-icon>
                                <ftui-button (value)="Rolladen_WZ_mitte:position" states="opens">Auf</ftui-button>
                                <ftui-button (value)="Rolladen_WZ_mitte:position" states="25">25</ftui-button>
                                <ftui-button (value)="Rolladen_WZ_mitte:position" states="50">50</ftui-button>
                                <ftui-button (value)="Rolladen_WZ_mitte:position" states="75">75</ftui-button>
                                <ftui-button (value)="Rolladen_WZ_mitte:position" states="closes">Zu</ftui-button>
                        </ftui-circlemenu>
                        <ftui-label>Mitte</ftui-label>
                </ftui-column>



Gruß
Eisix

[grossmaggul]

Kann mir immer noch keiner sagen wie ich steps im Chart hinkriege?

Ich habe das mal "outgesourced":
https://forum.fhem.de/index.php/topic,117779.0.html

[moonsorrox]

Danke Olli und Danke Eisix

schaue mir beide Varianten mal an, hatte noch gar keinen Ansatz dazu. Den habe ich jetzt

[SirMarco]

Hallo zusammen

In der Toolbar habe ich ein label eingefügt:

Code Auswählen Erweitern

  <ftui-main>
    <ftui-view-toolbar class="fixed">
      <ftui-menu-button slot="start" align-items="left"></ftui-menu-button>
      <ftui-title  group="default" class="size-5 titleroom" slot="start"></ftui-title>
      <ftui-title slot="end">
        <ftui-tab view="content_klima" title="Klima" color="black">
        <ftui-weather class="size-1" [condition]="Controller_myProPlanta:fc0_weatherDay"></ftui-weather>
        <ftui-label [text]="netatmo_M02_00_00_06_7e_16:temperature" style="padding-left: 10px;" class="size-3"><span slot="end">°C</span></ftui-label>
      </ftui-tab>
      </ftui-title>
    </ftui-view-toolbar>
</ftui-main>


Wenn ich das label auf einer anderen Seite anzeigen lassen möchte, wird es nicht angezeigt - erst wenn ich das label in der Toolbar lösche.

Liegt das daran, das die 2. Seite ein Template ist?

Hier möchte ich es ebenfalls anzeigen lassen:
content_klima.html

Code Auswählen Erweitern

<ftui-page>
    <ftui-column align-items="left" class="tabsection">
        <ftui-title style="padding-left: 10px" class="size-4">Klima</ftui-title>
      </ftui-column>
    <ftui-view-section>                     
        <ftui-content file="template/template_klima_2er.html" name="Lounge" device="netatmo_M02_00_00_06_7e_16"></ftui-content>
    </ftui-view-section>
</ftui-page>

template_klima_2er.html

Code Auswählen Erweitern



<ftui-row>
<ftui-column>
    <ftui-label class="align-left" >{{name}}</ftui-label>
</ftui-column>
<ftui-column>
    <ftui-icon name="bars" class="size-0" popup-target="{{name}}"></ftui-icon>
</ftui-column>
<ftui-column>
    <ftui-label [text]="{{device}}:temperature" [color]="{{device}}:temperature | map('0=secondary,16=warning,30=danger')" class="size-5"><span slot="end">°C</span></ftui-label>
    <ftui-label [text]="netatmo_M02_00_00_06_7e_16:temperature" style="padding-left: 10px;" class="size-3"><span slot="end">°C</span></ftui-label>

</ftui-column>
<ftui-column>
    <ftui-label [text]="{{device}}:humidity" [color]="{{device}}:humidity | map('0=secondary,50=warning,80=primary')" class="size-5"><span slot="end">%</span></ftui-label>
</ftui-column>
</ftui-row> 
<ftui-popup id="{{name}}" timeout="0" width="400px" height="400px">
            <ftui-row>
                <ftui-chart title="{{name}}" unit="day" prefetch="21600" extend>
                    <ftui-chart-data label="Temperatur" point-radius="0" tension="0.3" fill color="#27ae60" log="DBLogging" file="history" spec="{{device}}:temperature"></ftui-chart-data>
                    <ftui-chart-data label="Luftfeuchtigkeit" point-radius="0" tension="0.3" fill color="#228ace" log="DBLogging" file="history" spec="{{device}}:humidity"></ftui-chart-data>
                    <ftui-chart-controls units="day, week"></ftui-chart-controls>
                  </ftui-chart>                           
            </ftui-row>

</ftui-popup>

Danke 

Grüsse

[moonsorrox]

wenn ich mit einem Button mehrere Geräte mit set steuern möchte kann ich das in FTUI machen oder musss ich mir in Fhem etwas basteln.?