FTUI version 3

[mr_petz]

Hi Joe
Du musst den ftui-grid-tile fürs content mit angeben.
Bsp:
https://github.com/knowthelist/ftui/blob/master/www/ftui/index.html#L192

LG

[cotecmania]

Das geht auch nicht (siehe screenshot)
Ich will ja keinen separaten Hintergrund und die Positionierung von mehreren Elementen geht so nicht.
Das geht nur für ein einzelnes Element aber das ist ja nicht Sinn der Sache
Man könnte noch "color" auf "transparent" setzen, aber die Positionierung im SubFile geht ja trotzdem nicht ...

Code Auswählen Erweitern


    <ftui-tab-view id="Weather">
      <ftui-grid-tile row="1" col="2" height="7" width="7" shape="round" color="secondary">
       <ftui-content file="weather.html" room="Weather"></ftui-content>
     </ftui-grid-tile>
    </ftui-tab-view>


Gruss
Joe

[mr_petz]

Dann noch im content das ftui-grid mit integrieren.
Bsp.:

Code Auswählen Erweitern


      <ftui-grid-tile row="5" col="2" height="5" width="10" shape="round">
        <ftui-content file="examples/contents/content-weather.html"></ftui-content>
      </ftui-grid-tile>


Code Auswählen Erweitern


<ftui-grid base-width="80" base-height="80" color="green">
      <ftui-grid-tile row="1" col="3" height="2" width="2" shape="round" color="secondary">
        <ftui-clock format="hh:mm" size="9"></ftui-clock>
     </ftui-grid-tile>

     <ftui-grid-tile row="2" col="7" height="2" width="2" shape="round" color="primary">
          <ftui-clock format="hh:mm" size="9"></ftui-clock>
     </ftui-grid-tile>
</ftui-grid>


LG

[cotecmania]

So gehts ...
Ist nur doof dass in jedem Content dann das Grid nochmals definiert werden muss.
Wenn ich das mal ändern will muss ich in jede Datei.
Warum kann das nicht vererbt werden wenn es nicht neu definiert wird.
Wenn alles in einer Datei ist reicht ja auch EINE Definition ....

Danke
Joe

[mr_petz]

Ist leider so bei grid in grid.
https://github.com/knowthelist/ftui/blob/master/www/ftui/examples/contents/content-grid.html
Muss ja so sein, damit ein neues grid berechnet wird.

LG

Edit:
Du könntest das auch für eine Copystrecke als variable mitgeben. Bsp.:

Code Auswählen Erweitern


      <ftui-grid-tile row="5" col="2" height="3" width="10" shape="round">
        <ftui-content file="examples/contents/content-weather.html" gridstart='<ftui-grid base-width="80" base-height="80">' gridend='</ftui-grid>'></ftui-content>
      </ftui-grid-tile>

Aufruf:

Code Auswählen Erweitern


{{gridstart}}
      <ftui-grid-tile row="1" col="3" height="2" width="2" shape="round" color="secondary">
        <ftui-clock format="hh:mm" size="9"></ftui-clock>
     </ftui-grid-tile>

     <ftui-grid-tile row="2" col="7" height="2" width="2" shape="round" color="primary">
          <ftui-clock format="hh:mm" size="9"></ftui-clock>
     </ftui-grid-tile>
{{gridend}}


[darkness]

Hi.
Leider nein. War hier schon Thema. Durch das event onchange wird dies verhindert.
...
LG mr_petz

Danke. Ich konnte es lösen. Da ich mit LightScene arbeite brauchte ich nur das Attribut "followDevices" nutzen.

[mr_petz]

@curt

Ich mache mal hier weiter, da es ja ums content geht.
Du hast da was noch nicht ganz verstanden. Du erstellst ein contentfile und rufst es mehrfach auf.
Bsp.:
thermostat.html contentfile:

Code Auswählen Erweitern


<ftui-grid base-width="96" base-height="86" margin="4">

<!-- Arbeitszimmer -->

    <!-- Zeile 2 -->
<ftui-grid-tile row="2" col="2" height="4" width="7" color="my_grey3">
{{Raum}}
<ftui-label @click="{{Raum}}.open()">popup</ftui-label>
<ftui-popup id="{{Raum}}" timeout="600" width="600px" height="350px">
    <ftui-thermostat class="size-1"
      [value]="{{Thermostat}}:desired-temp"
      (value)="{{Thermostat}}:desired-temp"
      tick="30"
      min="0"
      max="30"
      movegradients="4"
      fadegradient="20"
      unit=" °C"
      has-arc-tick
      lowcolor="0,0,255">
    </ftui-thermostat>
    <ftui-button popup-close>close</ftui-button>
    <ftui-label @click="{{Raum}}.close()">Close Pop2</ftui-label>
</ftui-popup>
</ftui-grid>


und Aufruf der thermostat.html:

Code Auswählen Erweitern


      <ftui-grid-tile row="5" col="2" height="15" width="15" shape="round">
        <ftui-content file="examples/contents/thermostat.html" Raum="Arbeitszimmer1" Thermostat="Thermostat_Arbeitszimmer1"></ftui-content>
      </ftui-grid-tile>
            <ftui-grid-tile row="10" col="2" height="15" width="15" shape="round">
        <ftui-content file="examples/contents/thermostat.html" Raum="Arbeitszimmer2" Thermostat="Thermostat_Arbeitszimmer2"></ftui-content>
      </ftui-grid-tile>


und gibst im Aufruf immer den unterschiedlichen Variableninhalt an.

LG mr_petz

[darkness]

Guten Morgen,

ist es möglich ftui-segment-button auch auf zwei Werte "reagieren" zu lassen?
Beim Klick soll der Wert "gotosleep" gesetzt werden. Nach fünf Minuten wechselt mein Residents-Device auf "asleep"

Da ich dafür kein segment-Button angelegt habe, wird wieder der "home" Button aktiviert.

Mit map, dachte ich wäre das Möglich. Aber das wäre ja nur für den "get"-Wert. Der "set"-Wert müsste auf "gotosleep" stehen

Code Auswählen Erweitern

<ftui-segment-button value="gotosleep">
            <ftui-icon name="bed"></ftui-icon>
          </ftui-segment-button>

[mr_petz]

@darkness

Meinst du so in etwa?
Bsp.:

Code Auswählen Erweitern


<ftui-segment (value)="map('.*:gotosleep') | ResidentsDevice" [value]="ResidentsDevice | map('asleep:on,gotosleep:on,.*:off')">
<ftui-segment-button value="on">
            <ftui-icon name="bed"></ftui-icon>
          </ftui-segment-button>
</ftui-segment>


Für eine bessere Hilfe wären die restlichen Segmente noch zuzeigen...

LG

[cotecmania]

Hallo,

wie kann ich den Radius der Ecken verkleinern ?

Gruss
Joe

[curt]

Ich mache mal hier weiter, da es ja ums content geht.
Du hast da was noch nicht ganz verstanden. Du erstellst ein contentfile und rufst es mehrfach auf.

Der Fehler lag an anderer Stelle. Da das (Aufruf Contentfile) kaskadiert passiert, müssen die Variablen auch bei Aufruf des zweiten Contentfiles angegeben werden. Das sah ich erst in der Diskussion - herzlichen Dank!

[curt]

du könntest den Inhalt des Buttons als eigenes Element per Span oder Div definieren und dann unabhängig gestalten

Code Auswählen Erweitern

     
<ftui-button width="9em" color="orange">
    <span style="color:brown; font-weight: 900;">Huhu</span>
</ftui-button>



@setstate
Ich dachte, ich hätte es verstanden. Aber warum geht das folgende nicht?

Code Auswählen Erweitern


<ftui-button class="size-0" color="my_darkblue" fill="solid" popup-close>
   <span style="color:white; width:70px; font-size: x-large; font-weight:700;">Close</span>
</ftui-button>
[code]


[darkness]

@darkness


Für eine bessere Hilfe wären die restlichen Segmente noch zuzeigen...

LG

@mr_petz

Code Auswählen Erweitern


<ftui-grid-tile row="9" col="6" height="2" width="4">
        <header>ICH</header>
        <ftui-segment [(value)]="rr_ICH" >
          <ftui-segment-button value="home" size="large">
            <ftui-icon name="home"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="gotosleep">
            <ftui-icon name="bed"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="absent">
            <ftui-icon name="automobile"></ftui-icon>
          </ftui-segment-button>
        </ftui-segment>
      </ftui-grid-tile>

Hier wäre der gesamte Code. Wo müsste ich da was mappen?

[mr_petz]

@darkness

Du brauchst ja nur asleep zu gotosleep mappen.

Code Auswählen Erweitern


        <ftui-segment (value)="rr_ICH" [value]="rr_ICH | map('asleep:gotosleep')" >
          <ftui-segment-button value="home" size="large">
            <ftui-icon name="home"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="gotosleep">
            <ftui-icon name="bed"></ftui-icon>
          </ftui-segment-button>
          <ftui-segment-button value="absent">
            <ftui-icon name="automobile"></ftui-icon>
          </ftui-segment-button>
        </ftui-segment>


LG mr_petz

[darkness]

ah, ok. Teste ich mal. Danke

Ich hatte das erfolglos beim segment-button versucht.