FTUI version 3

[Risiko]

Vielleicht weil hinter dem Farbcode bzw. überall am Ende ein ';' fehlt ?

[Sailor]

Hi Risiko

So jetzt mein Problem 
badge (und wahrscheinlich auch label) stellen keine '0' (Null) dar.
1. Kann das jemand bestätigen?

Kann ich bestätigen. Ist aber auch bei ftui v2 schon so gewesen.
Ist also kein Bug sondern ein Feature.

Gruß
    Sailor

[mr_petz]

So jetzt mein Problem 

badge (und wahrscheinlich auch label) stellen keine '0' (Null) dar.
Auch eine Ersetzung mit replace(/^0$/,'0')" (html code) geht nicht.

1. Kann das jemand bestätigen?
2. hat jemand eine Lösungsidee? - meine Lsg. replace(/^0$/,'O')" (Ersetzung mit Buchstaben O) gefällt mir nicht so wirklich.

Wahrscheinlich liegt es hieran!?

Code Auswählen Erweitern


:host(.is-empty) { display: none; }


Kann nur das badge bestätigen.
Du kannst aber eine Leerstelle vor die 0 setzen, dann wird die im badge angezeigt...:

Code Auswählen Erweitern


                        <ftui-badge color="danger"
[text]="test:test | map('neu:` 0`,alt:``')"
[hidden]="test:test | map('neu:false, alt:true')">
</ftui-badge>

Beispiel eines map.

Im Label gehts bei mir auch so...

Code Auswählen Erweitern

<ftui-label text="0">0</ftui-label>
hier werden beide Nullen angezeigt. Liegt dann am Reading oder wie es Verarbeitet wird.
Nein geht auch aus dem reading raus bsp.:

Code Auswählen Erweitern

<ftui-label [text]="test1"></ftui-label> hier ist state 0

[Sailor]

Vielleicht weil hinter dem Farbcode bzw. überall am Ende ein ';' fehlt ?

Jetzt wir "orange" schwarz und "violet" wird unsichtbar... 

Gruß
    Sailor

[mr_petz]

Mir wäre im Moment ein Medialist Widget wichtiger.

Hat setstate jetzt schon gebaut...
LG

[grossmaggul]

Oh, fein, werde ich mir gleich mal zu Gemüte führen, danke setstate!

Gerade mal kurz angetestet funktioniert leider nicht, zumindest nicht mit squeezebox, wahrscheinlich mache ich mal wieder was falsch.

Code Auswählen Erweitern

<ftui-medialist [list]="wz.krachnase_air:ftuiMedialist"
                            [track]="wz.krachnase_air:currentTitle"
                            (track)="setreading wz.krachnase_air:currentTitle">
</ftui-medialist>

Die Liste in <ftuiMedialist> sieht so aus:

Code Auswählen Erweitern

{"Artist":"Earth, Wind & Fire","Title":"Sing A Song","Album":"The Best Of","Time":"203","File":"file:///media/nas/music/Earth,%20Wind%20&%20Fire/The%20Best%20Of/10%20Sing%20A%20Song.mp3","Track":"10","Cover":"http://192.168.1.12:9000/music/d628949a/cover_50x50_o"},{"Artist":"Earth, Wind & Fire","Title":"Got To Get You Into My Life","Album":"The Best Of","Time":"243","File":"file:///media/nas/music/Earth,%20Wind%20&%20Fire/The%20Best%20Of/01%20Got%20To%20Get%20You%20Into%20My%20Life.mp3","Track":"1","Cover":"http://192.168.1.12:9000/music/d628949a/cover_50x50_o"},...

[setstate]

Die zwei Farben habe ich auch noch hinzugefügt

siehe Beispiel hier: https://knowthelist.github.io/ftui/www/ftui/examples/colors.html

[mr_petz]

Die Liste in <ftuiMedialist> sieht so aus:

Code Auswählen Erweitern

{"Artist":"Earth, Wind & Fire","Title":"Sing A Song","Album":"The Best Of","Time":"203","File":"file:///media/nas/music/Earth,%20Wind%20&%20Fire/The%20Best%20Of/10%20Sing%20A%20Song.mp3","Track":"10","Cover":"http://192.168.1.12:9000/music/d628949a/cover_50x50_o"},{"Artist":"Earth, Wind & Fire","Title":"Got To Get You Into My Life","Album":"The Best Of","Time":"243","File":"file:///media/nas/music/Earth,%20Wind%20&%20Fire/The%20Best%20Of/01%20Got%20To%20Get%20You%20Into%20My%20Life.mp3","Track":"1","Cover":"http://192.168.1.12:9000/music/d628949a/cover_50x50_o"},...

Probiere Deine Liste in dieser Form aus:

Code Auswählen Erweitern

[{"Artist":"Earth, Wind & Fire","Title":"Sing A Song","Album":"The Best Of","Time":"203","File":"file:///media/nas/music/Earth,%20Wind%20&%20Fire/The%20Best%20Of/10%20Sing%20A%20Song.mp3","Track":"10","Cover":"http://192.168.1.12:9000/music/d628949a/cover_50x50_o"},{"Artist":"Earth, Wind & Fire","Title":"Got To Get You Into My Life","Album":"The Best Of","Time":"243","File":"file:///media/nas/music/Earth,%20Wind%20&%20Fire/The%20Best%20Of/01%20Got%20To%20Get%20You%20Into%20My%20Life.mp3","Track":"1","Cover":"http://192.168.1.12:9000/music/d628949a/cover_50x50_o"}]
Dir fehlen die [] Klammern...
Gruß

Edit:
@setstate
Du hast glaube das Album nicht mit in die fillList reingenommen...
(soll keine Kritik sondern ein Hinweis sein!)

[grossmaggul]

Probiere Deine Liste in dieser Form aus:

Die Liste wird von squeezebox im Reading "ftuiMedialist" bereitgestellt, die kann ich nicht ändern.

Mir ist noch aufgefallen, daß die ftui Oberfläche nicht mehr bündig in der oberen linken Ecke sitzt sondern jetzt oben und links etwas eingerückt ist, soll das so?


Kommando zurück, beim Update ist wohl irgendwas schief gelaufen.:-/

[setstate]

Schau ich mir an, ob man das flexibler machen kann.

Wegen der Abstände: hast du das letzte Update? Bei den Margins musste ich gestern noch was nach-korrigieren.

[grossmaggul]

Wegen der Abstände: hast du das letzte Update?

Nein, hatte ich wohl nicht.

[Sailor]

Hi setstate

Die zwei Farben habe ich auch noch hinzugefügt
siehe Beispiel hier: https://knowthelist.github.io/ftui/www/ftui/examples/colors.html

Ick könnt dir knutschen! 

Gruß
    Sailor

[grossmaggul]

Das Anzeigen der Medialiste funktioniert, nur das Auswählen eines Titels funktioniert nicht recht. Beim Klicken auf einen Eintrag werden mehrere Titel ausgewählt und die Werte die übergeben werden ergeben auch irgendwie keinen Sinn.

[meier81]

Guten Abend,

hab eine Frage an euch bezüglich eines kleinen "Schönheitsproblems" meiner Seite. Ich bekomme es nicht hin das die Content-Seite an der unten Kante gleich wie das Menü abschließt, die Content-Seite wird da etwas abgeschnitten. Habe schon einiges probiert, finde aber die richtige "Schraube" nicht. Hab euch mal einen Screenshot des Problems angefügt und zudem die Definitionen der html-Dateien.

Ihr könnt das Problem an der Unterkante des Schlafmodus-Grids sehen.

index.html:

Code Auswählen Erweitern

<!DOCTYPE html>
<html>

<head>
  <!--
    /* FHEM tablet ui - FTUI */
    /**
    * UI builder framework for FHEM
    *
    * Version: 3.0.0
    *
    * Copyright (c) 2015-2020 Mario Stephan <mstephan@shared-files.de>
    * Under MIT License (http://www.opensource.org/licenses/mit-license.php)
    * https://github.com/knowthelist/ftui
    */
    -->
  <script src="ftui.js"></script>

  <link href="ftui.css" rel="stylesheet">
  <link href="themes/ftui-theme.css" rel="stylesheet">
  <link href="favicon.ico" rel="icon" type="image/x-icon" />

  <!-- avoid 300ms delay on click-->
  <meta name="viewport" content="width=device-width">

  <!-- when serving the page with other web servers, e.g. lighttpd -->
  <!-- <meta name="fhemweb_url" content="http://fhem.local:8083/fhem/"> -->

  <!-- verbose level 0-4 -->
  <meta name="debug" content="2">

  <title>FHEM - Hausautomatisierung</title>
</head>

<body>

  <ftui-grid base-width="150" base-height="150">

    <ftui-grid-tile row="1" col="1" height="5" width="1" shape="round">
  <header>Menü</header>
      <ftui-column>
        <ftui-tab view="View1" direction="vertical" active>
          <ftui-icon name="home1"></ftui-icon>
          <ftui-label>Home</ftui-label>
        </ftui-tab>
        <ftui-tab view="View2" direction="vertical">
          <ftui-icon name="music"></ftui-icon>
          <ftui-label>Music</ftui-label>
        </ftui-tab>
        <ftui-tab view="View3" direction="vertical">
          <ftui-icon name="feed"></ftui-icon>
          <ftui-label>Feed</ftui-label>
        </ftui-tab>
        <ftui-tab view="View4" direction="vertical">
          <ftui-icon name="lightbulb"></ftui-icon>
          <ftui-label>Licht</ftui-label>
        </ftui-tab>
        <ftui-tab view="View5" direction="vertical">
          <ftui-icon name="bath"></ftui-icon>
          <ftui-label>Bad</ftui-label>
        </ftui-tab>
        <ftui-tab view="View6" direction="vertical">
          <ftui-icon name="road"></ftui-icon>
          <ftui-label>Verkehr</ftui-label>
        </ftui-tab>
        <ftui-tab view="View7" direction="vertical">
          <ftui-icon name="camera"></ftui-icon>
          <ftui-label>Kamera</ftui-label>
        </ftui-tab>
      </ftui-column>
    </ftui-grid-tile>

    <ftui-tab-view id="View1">
      <ftui-grid-tile row="1" col="2" height="5" width="9">
          <ftui-content file="content-home.html"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>

    <ftui-tab-view id="View2">
      <ftui-grid-tile row="1" col="2" height="5" width="9">
        <ftui-content file="content-heizung.html"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>

    <ftui-tab-view id="View3">
      <ftui-grid-tile row="1" col="2" height="5" width="9">
        <ftui-content file="content-energie.html"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>

    <ftui-tab-view id="View4">
      <ftui-grid-tile row="1" col="2" height="5" width="9">
        <ftui-content file="examples/contents/content-rows.html"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>

    <ftui-tab-view id="View5">
      <ftui-grid-tile row="1" col="2" height="5" width="9">
        <ftui-content file="examples/contents/content-grid.html"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>

    <ftui-tab-view id="View6">
      <ftui-grid-tile row="1" col="2" height="5" width="9">
        <ftui-content file="examples/contents/content-components.html"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>

    <ftui-tab-view id="View7">
      <ftui-grid-tile row="1" col="2" height="5" width="9">
        <ftui-content file="examples/contents/content-components2.html"></ftui-content>
      </ftui-grid-tile>
    </ftui-tab-view>

  </ftui-grid>

</body>

</html>

content-home.html:

Code Auswählen Erweitern

<ftui-grid base-width="70" base-height="150">

  <ftui-grid-tile row="1" col="1" height="1" width="3" shape="round">
    <header>Datum + Uhrzeit</header>
    <ftui-clock format="hh:mm:ss" class="size-6"></ftui-clock>
    <ftui-clock format="eeee" class="size-3"></ftui-clock>
    <ftui-clock format="DD.MM.YYYY" class="size-3"></ftui-clock>
  </ftui-grid-tile>

  <ftui-grid-tile row="1" col="4" height="1" width="3" shape="round">
    <header>Rollladen</header>
    <ftui-row>
      <ftui-column>
        <ftui-circlemenu keep-open>

          <ftui-button shape="circle" fill="outline" color="light">
            <ftui-label class="big" [text]="Rolladen_Wohnzimmer:pct"></ftui-label>
          </ftui-button>

          <ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer:pct" states='100'
                       [color]="Rolladen_Wohnzimmer:pct | map('`100`: primary, .*: light')">
            <span class="big">100</span>
          </ftui-button>

          <ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer:pct" states='50'
                       [color]="Rolladen_Wohnzimmer:pct | map('´50´: primary, .*: light')">
            <span class="big">50</span>
          </ftui-button>

          <ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer:pct" states='10'
                       [color]="Rolladen_Wohnzimmer:pct | map('´10´: primary, .*: light')">
            <span class="big">10</span>
          </ftui-button>

          <ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer:pct" states='0'
                       [color]="Rolladen_Wohnzimmer:pct | map('´0´: primary, .*: light')">
            <span class="big">0</span>
          </ftui-button>

        </ftui-circlemenu>
        <ftui-label>Fenster</ftui-label>
      </ftui-column>

      <ftui-column>
        <ftui-circlemenu keep-open style="height:3em">

          <ftui-button shape="circle" fill="outline" color="light">
            <ftui-label class="big" [text]="Rolladen_Wohnzimmer_Tuer:pct"></ftui-label>
          </ftui-button>

          <ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer_Tuer:pct" states='100'
                       [color]="Rolladen_Wohnzimmer_Tuer:pct | map('`100`: primary, .*: light')">
            <span class="big">100</span>
          </ftui-button>

          <ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer_Tuer:pct" states='50'
                       [color]="Rolladen_Wohnzimmer_Tuer:pct | map('´50´: primary, .*: light')">
            <span class="big">50</span>
          </ftui-button>

          <ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer_Tuer:pct" states='10'
                       [color]="Rolladen_Wohnzimmer_Tuer:pct | map('´10´: primary, .*: light')">
            <span class="big">10</span>
          </ftui-button>

          <ftui-button shape="circle" fill="outline" (value)="Rolladen_Wohnzimmer_Tuer:pct" states='0'
                       [color]="Rolladen_Wohnzimmer_Tuer:pct | map('´0´: primary, .*: light')">
            <span class="big">0</span>
          </ftui-button>

        </ftui-circlemenu>
        <ftui-label>Tür</ftui-label>
      </ftui-column>
    </ftui-row>
  </ftui-grid-tile>

  <ftui-grid-tile row="1" col="7" height="2" width="12" shape="round">
    <header>Wettervorhersage</header>
    <ftui-content file="content-weather.html"></ftui-content>
  </ftui-grid-tile>

  <ftui-grid-tile row="2" col="1" height="1" width="6" shape="round">
    <header>Müll</header>
    <ftui-row>
      <ftui-column>
        <ftui-icon name="trash" color="black" [class-name]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:hop,1:')"></ftui-icon>
        <ftui-badge [text]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:Heute, 1:Morgen')"
                    [color]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:red, 1:yellow')"
                    [hidden]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:false, 1:false, 2:true')" class="size-0">
        </ftui-badge> <!-- Heute und Morgen -->
        <ftui-badge [text]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days"
                    [hidden]="Abfall:Abfallkalender_RestmuellinBadDuerkheim_days | map('0:true, 1:true, 2:false')" class="size-0">
        </ftui-badge> <!-- alles groesser 1 -->
      </ftui-column>

      <ftui-column>
        <ftui-icon name="trash" color="yellow" [class-name]="Abfall:Abfallkalender_GelberSackinBadDuerkheim_days | map('0:hop,1:')"></ftui-icon>
        <ftui-badge [text]="Abfall:Abfallkalender_GelberSackinBadDuerkheim_days | map('0:Heute, 1:Morgen')"
                    [color]="Abfall:Abfallkalender_GelberSackinBadDuerkheim_days | map('0:red, 1:yellow')"
                    [hidden]="Abfall:Abfallkalender_GelberSackinBadDuerkheim_days | map('0:false, 1:false, 2:true')" class="size-0">
        </ftui-badge> <!-- Heute und Morgen -->
        <ftui-badge [text]="Abfall:Abfallkalender_GelberSackinBadDuerkheim_days"
                    [hidden]="Abfall:Abfallkalender_GelberSackinBadDuerkheim_days | map('0:true, 1:true, 2:false')" class="size-0">
        </ftui-badge> <!-- alles groesser 1 -->
      </ftui-column>

      <ftui-column>
        <ftui-icon name="trash" color="blue" [class-name]="Abfall:Abfallkalender_PapierinBadDuerkheim_days | map('0:hop,1:')"></ftui-icon>
        <ftui-badge [text]="Abfall:Abfallkalender_PapierinBadDuerkheim_days | map('0:Heute, 1:Morgen')"
                    [color]="Abfall:Abfallkalender_PapierinBadDuerkheim_days | map('0:red, 1:yellow')"
                    [hidden]="Abfall:Abfallkalender_PapierinBadDuerkheim_days | map('0:false, 1:false, 2:true')" class="size-0">
        </ftui-badge> <!-- Heute und Morgen -->
        <ftui-badge [text]="Abfall:Abfallkalender_PapierinBadDuerkheim_days"
                    [hidden]="Abfall:Abfallkalender_PapierinBadDuerkheim_days | map('0:true, 1:true, 2:false')" class="size-0">
        </ftui-badge> <!-- alles groesser 1 -->
      </ftui-column>

      <ftui-column>
        <ftui-icon name="trash" color="green" [class-name]="Abfall:Abfallkalender_BioinBadDuerkheim_days | map('0:hop,1:')"></ftui-icon>
        <ftui-badge [text]="Abfall:Abfallkalender_BioinBadDuerkheim_days | map('0:Heute, 1:Morgen')"
                    [color]="Abfall:Abfallkalender_BioinBadDuerkheim_days | map('0:red, 1:yellow')"
                    [hidden]="Abfall:Abfallkalender_BioinBadDuerkheim_days | map('0:false, 1:false, 2:true')" class="size-0">
        </ftui-badge> <!-- Heute und Morgen -->
        <ftui-badge [text]="Abfall:Abfallkalender_BioinBadDuerkheim_days"
                    [hidden]="Abfall:Abfallkalender_BioinBadDuerkheim_days | map('0:true, 1:true, 2:false')" class="size-0">
        </ftui-badge> <!-- alles groesser 1 -->
      </ftui-column>

      <ftui-column>
        <ftui-icon name="trash" color="red" [class-name]="Abfall:Abfallkalender_ProblemmuellinBadDuerkheim_days | map('0:hop,1:')"></ftui-icon>
        <ftui-badge [text]="Abfall:Abfallkalender_ProblemmuellinBadDuerkheim_days | map('0:Heute, 1:Morgen')"
                    [color]="Abfall:Abfallkalender_ProblemmuellinBadDuerkheim_days | map('0:red, 1:yellow')"
                    [hidden]="Abfall:Abfallkalender_ProblemmuellinBadDuerkheim_days | map('0:false, 1:false, 2:true')" class="size-0">
        </ftui-badge> <!-- Heute und Morgen -->
        <ftui-badge [text]="Abfall:Abfallkalender_ProblemmuellinBadDuerkheim_days"
                    [hidden]="Abfall:Abfallkalender_ProblemmuellinBadDuerkheim_days | map('0:true, 1:true, 2:false')" class="size-0">
        </ftui-badge> <!-- alles groesser 1 -->
      </ftui-column>
    </ftui-row>
  </ftui-grid-tile>

  <ftui-grid-tile row="3" col="1" height="1" width="5" shape="round">
    <header>Raumfühler</header>
    <ftui-row>
      <ftui-column>
        <ftui-label class="size-7" [text]="Fuehler_Wohnzimmer:temperature"
                    [color]="Fuehler_Wohnzimmer:temperature | map('0:blue, 24:yellow, 26:red')"><span class="size-0" slot="end">°C</span>
        </ftui-label>
        <ftui-label class="size-0">Temperatur</ftui-label>
      </ftui-column>

      <ftui-column>
        <ftui-label class="size-7" [text]="Fuehler_Wohnzimmer:humidity"
                    [color]="Fuehler_Wohnzimmer:humidity | map('0:blue, 60:yellow, 65:red')"><span class="size-0" slot="end">%</span>
        </ftui-label>
        <ftui-label class="size-0">Feuchte</ftui-label>
      </ftui-column>

      <ftui-column>
        <ftui-label class="size-7" [text]="Fuehler_Wohnzimmer:dewpoint"
                    [color]="Fuehler_Wohnzimmer:dewpoint | map('0:blue, 10:yellow, 12:red')"><span class="size-0" slot="end">°C</span>
        </ftui-label>
        <ftui-label class="size-0">Taupunkt</ftui-label>
      </ftui-column>
    </ftui-row>
  </ftui-grid-tile>

  <ftui-grid-tile row="3" col="13" height="2" width="6" shape="round">
    <header>Raumfühler</header>
    <ftui-content file="content-fuehler.html"></ftui-content>
  </ftui-grid-tile>

  <ftui-grid-tile row="4" col="1" height="1" width="2" shape="round">
    <header>Rolladen</header>
    <ftui-icon class="size-5" name="window-shutter" popup-target="pop1"></ftui-icon>
  </ftui-grid-tile>

  <ftui-popup id="pop1" width="500px" height="600px" timeout="0" shape="round">
    <header>Rolladen</header>
    <ftui-content file="content-rolladen.html"></ftui-content>
  </ftui-popup>

  <ftui-grid-tile row="4" col="3" height="1" width="2" shape="round">
    <header>Waschmaschine</header>
    <ftui-icon class="size-5" name="washing-machine"
               [color]="di_Waschmaschine | map('on: green, off: light')">
    </ftui-icon>
  </ftui-grid-tile>

  <ftui-grid-tile row="4" col="5" height="1" width="2" shape="round">
    <header>Trockner</header>
    <ftui-icon class="size-5" name="tumble-dryer"
               [color]="di_Trockner | map('on: green, off: light')">
    </ftui-icon>
  </ftui-grid-tile>

  <ftui-grid-tile row="4" col="7" height="1" width="2" shape="round">
    <header>Anrufbeantworter</header>
    <ftui-row>
      <ftui-column>
        <ftui-icon class="size-5" name="phone" [color]="FritzBox7590:tam1_newMsg | map('0:light,1:yellow')"></ftui-icon>
        <ftui-badge [text]="FritzBox7590:tam1_newMsg"
                    [hidden]="FritzBox7590:tam1_newMsg | map('0:true, 1:false')" class="size-0">
        </ftui-badge>
      </ftui-column>
    </ftui-row>
  </ftui-grid-tile>

  <ftui-grid-tile row="5" col="1" height="1" width="4" shape="round">
    <header>Schlafmodus</header>
    <ftui-row>
      <ftui-column>
        <ftui-button (value)="set debmatic var Schlafmodus_Eltern true"
                     [hidden]="debmatic:Schlafmodus_Eltern | map('true:true, false:false')">
          <ftui-icon name="child"></ftui-icon>
        </ftui-button>
        <ftui-button (value)="set debmatic var Schlafmodus_Eltern false"
                     [hidden]="debmatic:Schlafmodus_Eltern | map('false:true, true:false')">
          <ftui-icon name="bed"></ftui-icon>
        </ftui-button>
        <ftui-label class="size-0">Eltern</ftui-label>
      </ftui-column>

      <ftui-column>
        <ftui-button (value)="set debmatic var Schlafmodus_Elias true"
                     [hidden]="debmatic:Schlafmodus_Elias | map('true:true, false:false')">
          <ftui-icon name="child"></ftui-icon>
        </ftui-button>
        <ftui-button (value)="set debmatic var Schlafmodus_Elias false"
                     [hidden]="debmatic:Schlafmodus_Elias | map('false:true, true:false')">
          <ftui-icon name="bed"></ftui-icon>
        </ftui-button>
        <ftui-label class="size-0">Elias</ftui-label>
      </ftui-column>

      <ftui-column>
        <ftui-button (value)="set debmatic var Schlafmodus_Constantin true"
                     [hidden]="debmatic:Schlafmodus_Constantin | map('true:true, false:false')">
          <ftui-icon name="child"></ftui-icon>
        </ftui-button>
        <ftui-button (value)="set debmatic var Schlafmodus_Constantin false"
                     [hidden]="debmatic:Schlafmodus_Constantin | map('false:true, true:false')">
          <ftui-icon name="bed"></ftui-icon>
        </ftui-button>
        <ftui-label class="size-0">Constantin</ftui-label>
      </ftui-column>
    </ftui-row>
  </ftui-grid-tile>

  <ftui-grid-tile row="5" col="5" height="1" width="2" shape="round">
    <header>Licht</header>
    <ftui-button [(value)]="Steckdose_Sideboard">
      <ftui-icon [name]="Steckdose_Sideboard | map('.*on:lightbulb-on, .*off:lightbulb-off')"></ftui-icon>
    </ftui-button>
    <ftui-label class="size-0">Sideboard</ftui-label>
  </ftui-grid-tile>

</ftui-grid>


Zudem wäre noch meine Frage wie ich die Seite komplett in den Browser einpassen kann, also noch etwas nach rechts und etwas nach unten vergrößern.

Mercy mal, Gruß Markus

[setstate]

Das ist zweimal das gleiche File angefügt. Es fehlt die content-home.html