FTUI version 3

[octek0815]

jou habe ich auch.... sind wir schon zwei  evtl. hat Olli das auch mal schauen ob er sich meldet.
Muss noch dazu sagen der Firefox blendet es aus, aber auf meinen Android Tablets läuft es laufend

Moin zusammen,

ja bekomme ich auch, kommt aber ersten wenn ich mit den Pfeiltasten die Swiper-Karten druchblättern will.
Hab es mal nachgestellt ohne den ganzen DWD Kram.

Grüße
Olli

[octek0815]

@setstate

Ich konnte jetzt die Ursache finden.
Sobald die option "scrollbar" als Parameter angegeben ist greift hidden nicht mehr.
Dots wiederum funktioniert, hat aber ein anderes Problem. Es werden zwar nur die Swiper-Karten angezeigt die nicht mit hidden versteckt sind, aber es erden alle Punkte angezeigt (auch die der versteckten "slides".

@setstate

Komando zürück, es funktioniert weiterhin nicht, egal ob mit oder ohne scrollbar.

Habe mal die folgende Testumgebung gebaut, damit du das einfacher nachstellen kannst:

In FHEM das folgende dummy device erstellen:

Code Auswählen Erweitern


defmod test_dummy dummy

setstate test_dummy 2021-02-16 12:05:51 a_1_text1 a_1_text1
setstate test_dummy 2021-02-16 12:06:08 a_1_text2 a_1_text2
setstate test_dummy 2021-02-16 12:06:21 a_2_text1 a_2_text1
setstate test_dummy 2021-02-16 12:06:40 a_2_text2 a_2_text2
setstate test_dummy 2021-02-16 12:06:28 a_3_text1 a_3_text1
setstate test_dummy 2021-02-16 12:06:34 a_3_text2 a_3_text2
setstate test_dummy 2021-02-16 13:04:59 a_count 2


Hier der Swiper

Code Auswählen Erweitern


<ftui-swiper scrollbar auto-play interval="2">
<ftui-content [hidden]="test_dummy:a_count | map('0:true, 1:false')" file="./test_dummy_content.html" warn-number="a_1"></ftui-content>
<ftui-content [hidden]="test_dummy:a_count | map('0:true, 2:false')" file="./test_dummy_content.html" warn-number="a_2"></ftui-content>
<ftui-content [hidden]="test_dummy:a_count | map('0:true, 3:false')" file="./test_dummy_content.html" warn-number="a_3"></ftui-content>
</ftui-swiper>


Und hier die Content-Datei

Code Auswählen Erweitern


<ftui-column>
<ftui-label [text]="test_dummy:{{warn-number}}_text1"></ftui-label>
<ftui-label [text]="test_dummy:{{warn-number}}_text2"></ftui-label>
</ftui-column>


Beim FHEM dummy device ist a_count auf 1 und es werden trotzdem alle drei Swiper-Karten  angezeigt obwohl aufgrund des hidden mappings nur eine Karte angezeigt werden dürfet.
Updates vor dem 11.02. hatten diesen Fehler nicht, da funktionierte das hidden mapping.

Im ersten Bild ist a_count auf 2, es werden alle drei Karten angezeigt (siehe Länge des scrollbars) und zwischen Karte 1 und 2 hin und her gescrollt.
Im zweiten Bild ist a_count auf 3, es werden alle drei Karten angezeigt (siehe Länge des scrollbars).
Bei a_count 1 wird nicht gescrollt, aber es werden alle Karten angezeigt.

Grüße
Olli

[khk123]

Das Problem mit den Swiper-Karten, die eigentlich hidden sein sollten, habe ich auch. Und außerdem habe ich plötzlich eine Fehlermeldung.
Letzte FTUI-Update war heute. Die Recursions-Fehlermeldung ist aber schon vorher aufgetreten. Nachdem ich alle Swiper rausgenommen habe,
tritt der Fehler nicht mehr auf. Nach Aktivierung des DWD-Swipers ist die Fehlermeldung wieder da.

[mr_petz]

Geht doch alles...
Hatte nicht die ftui.binding.js nicht mit aktualisiert...
Asche über mein Haupt

geht so:

Code Auswählen Erweitern


<ftui-dropdown width="30%" [list]="Sonos_Kueche:FavouritesListAlias"
[value]="Sonos_Kueche:currentFavouriteName"
(value)="encode() | Sonos_Kueche:StartFavourite $value"
delimiter="|"></ftui-dropdown>


als auch so:

Code Auswählen Erweitern


<ftui-dropdown width="30%" [list]="Sonos_Kueche:FavouritesListAlias"
[value]="Sonos_Kueche:currentFavouriteName"
(value)="encode() | Sonos_Kueche LoadFavourite $value; set Sonos_Kueche Play"
delimiter="|"></ftui-dropdown>


Danke nochmal...

[torte]

Guten Tag,

hat jemand ein Beispiel für eine Checkbox mit unterschiedlichen Reading und Set binding?
Ich check das nicht, bei mir geht nur ein/aus aber nicht auslesen des Zustands aus FHEM.

Code Auswählen Erweitern


<ftui-checkbox [value]="{{device1}}:POWER | map('ON: on, OFF: off')" states="off,on" (value)="{{device1}}" ></ftui-checkbox>


Danke
Grüße
Torte

[khk123]

Guten Tag,

hat jemand ein Beispiel für eine Checkbox mit unterschiedlichen Reading und Set binding?
Ich check das nicht, bei mir geht nur ein/aus aber nicht auslesen des Zustands aus FHEM.

Code Auswählen Erweitern


<ftui-checkbox [value]="{{device1}}:POWER | map('ON: on, OFF: off')" states="off,on" (value)="{{device1}}" ></ftui-checkbox>


Danke
Grüße
Torte

Hi Torte,

geht bei mir mit deiner Definition problemlos. Das Device läßt sich schalten und die Checkbox erhält auch den korrekten Zustand (on oder off), wenn von einer anderen Stelle aus geschaltet wird. Egal ob map('ON: on, OFF: off') oder map('on: on, off: off'). Dein Device reagiert auch auf Kleinbuchstaben?

VG
Karlheinz

[khk123]

Ich möchte das attr eines devices auslesen. So in der Art:

Code Auswählen Erweitern


<ftui-label [text]="ftuiApp.fhemService.sendCommand('AttrVal(`"{{device}}","{{attr}}",""`)')"></ftui-label>

Aber ich habe Probleme mit den diversen Anführungszeichen oder es geht prinzipiell nicht. Oder gibt es einen eleganteren Weg?

VG
Karlheinz

[Eisix]

Hallo,

tempEnergy ist ein Attribut

Code Auswählen Erweitern


                                <ftui-label
                                        [text]="{{FBH}}:tempEnergy"
                                        [color]="{{FBH}}:tempEnergy | map('5:blue, 20:mygreen, 23:red')"
                                        class="size-4"><span slot="end">°C</span>
                                </ftui-label>


Gruß
Eisix

[khk123]

@Eisix

Danke für die schnelle Antwort. Funktioniert. Auf die einfache Idee kam ich nicht, da ich dachte, dass damit nur ein Reading ausgelesen werden kann. Wie unterscheide ich aber, wenn ein Reading und ein Attr den gleichen Namen haben? In dem Fall wird ja bevorzugt das Reading ausgelesen.

VG
Karlheinz

[roman1528]

Moin.

Ich habe noch riesige Probleme mit "Grid im Grid"

in meiner index.html habe ich ein grid:

Code Auswählen Erweitern

<ftui-grid rows="16" cols="12" resize>

in diesem befinden sich 2 fixe grid-tiles (menü (ftui-tab) und sowas wie ein header (uhrzeit, ein icon)).

in dem frei gebliebenen bereich will ich per ftui-content den inhalt laden (ftui-tab-view) welcher selbstredend in grid-optik dargestellt werden soll.

muss ich den freien bereich nun auch als grid-tile definieren und darin ftui-tab-view und dann ftui-content?

wenn ich das tue ist die darstellung völlig verschoben, kann aber das menü bedienen...

wenn ich das nicht tue, also nur ftui-tab-view ohne grid-tile, ist die darstellung genau richtig, kann aber das menü nicht mehr bedienen.

in der content_***.html habe ich wieder ein grid:

Code Auswählen Erweitern

<ftui-grid rows="16" cols="12" resize>
plus die von mir gewünschten grid-tiles natürlich an den richtigen positionen zum ersten grid.

index.html:

Code Auswählen Erweitern

<!DOCTYPE html>
<html>
<head>
<title>FHEM - Hausautomatisierung</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--
/* 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/roman-theme.css" rel="stylesheet">
<link href="home.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="0">

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('loading').style.display = 'block';
document.getElementById('shade').style.display = 'block';
});

document.addEventListener('updateDone', function() {
loading.style.display = 'none';
shade.style.display = 'none';
});
</script>

</head>

<body>

<ftui-grid rows="16" cols="12" resize>

<div id="shade" style="display: none;"></div>
<ftui-icon id="loading" name="refresh1" color="danger" class="spin" size="6"></ftui-icon>

<!-- #### LEISTE #### -->

<ftui-grid-tile row="1" col="3" height="1" width="10" shape="round" style="border-bottom: 1px solid darkorange;">
<ftui-row>
<ftui-column>
<ftui-cell>
<ftui-tab view="dwd">
<ftui-icon name="bolt" class="size-2 align-left" [color]="DWD:a_count | map('0:medium, 1:danger')"></ftui-icon>
<ftui-badge [text]="DWD:a_count" color="danger" class="size-0 align-left"></ftui-badge>
</ftui-tab>
</ftui-cell>
</ftui-column>
<ftui-column>
<ftui-cell>
</ftui-cell>
</ftui-column>
<ftui-column>
<ftui-cell>
<ftui-clock format="hh:mm" class="size-6 thin"></ftui-clock>
</ftui-cell>
</ftui-column>
<ftui-column>
<ftui-cell>
</ftui-cell>
</ftui-column>
<ftui-column>
<ftui-cell>
<ftui-icon name="clear" class="size-1 align-right" onclick="fully.exit()"></ftui-icon>
</ftui-cell>
</ftui-column>
</ftui-row>
</ftui-grid-tile>

<!-- #### MENÜ #### -->

<ftui-grid-tile row="1" col="1" height="16" width="2" shape="round">
<header>Men&uuml;</header>
<ftui-column>
<ftui-tab view="home" direction="vertical" >
<ftui-icon name="home1" class="size-0"></ftui-icon>
<ftui-label>Home</ftui-label>
</ftui-tab>
<ftui-tab view="bad" direction="vertical" active>
<ftui-icon name="shower" class="size-0"></ftui-icon>
<ftui-label>Bad</ftui-label>
</ftui-tab>
<ftui-tab view="buro" direction="vertical" >
<ftui-icon name="desktop" class="size-0"></ftui-icon>
<ftui-label>B&uuml;ro</ftui-label>
</ftui-tab>
<ftui-tab view="flur" direction="vertical" >
<ftui-icon name="hanger" class="size-0"></ftui-icon>
<ftui-label>Flur</ftui-label>
</ftui-tab>
<ftui-tab view="kuche" direction="vertical" >
<ftui-icon name="cutlery" class="size-0"></ftui-icon>
<ftui-label>K&uuml;che</ftui-label>
</ftui-tab>
<ftui-tab view="schlafen" direction="vertical" >
<ftui-icon name="bed" class="size-0"></ftui-icon>
<ftui-label>Schlafen</ftui-label>
</ftui-tab>
<ftui-tab view="wohnen" direction="vertical" >
<ftui-icon name="sofa" class="size-0"></ftui-icon>
<ftui-label>Wohnen</ftui-label>
</ftui-tab>
<ftui-tab view="draussen" direction="vertical" >
<ftui-icon name="draussen_garage" class="size-0"></ftui-icon>
<ftui-label>Drau&szlig;en</ftui-label>
<ftui-label>Garage</ftui-label>
</ftui-tab>
<ftui-tab view="solar" direction="vertical" >
<ftui-icon name="solar-panel" class="size-0"></ftui-icon>
<ftui-label>Solar</ftui-label>
</ftui-tab>
<ftui-tab view="dwd" direction="vertical" >
<ftui-icon name="bolt" class="size-0"></ftui-icon>
<ftui-label>DWD</ftui-label>
</ftui-tab>
<ftui-tab view="wetter" direction="vertical" >
<ftui-icon name="sunny-sleet-storm" class="size-0"></ftui-icon>
<ftui-label>Wetter</ftui-label>
</ftui-tab>
<ftui-tab view="info" direction="vertical" >
<ftui-icon name="info" class="size-0"></ftui-icon>
<ftui-label>Listen</ftui-label>
<ftui-label>Benzinpreise</ftui-label>
</ftui-tab>
<ftui-tab view="system" direction="vertical" >
<ftui-icon name="cogs" class="size-0"></ftui-icon>
<ftui-label>System &amp;</ftui-label>
<ftui-label>Einstellungen</ftui-label>
</ftui-tab>
</ftui-column>
</ftui-grid-tile>


<!-- #### CONTENT #### -->

<ftui-grid-tile row="2" col="3" height="15" width="10" shape="round">
<ftui-tab-view id="home">
<ftui-content file="./content_home.html" view="home"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="bad">
<ftui-content file="./content_bad.html" view="bad"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="buro">
<ftui-content file="./content_buro.html" view="buro"></ftui-content>
</ftui-tab-view>
<ftui-tab-view id="flur">
<ftui-content file="./content_flur.html" view="flur"></ftui-content>
</ftui-tab-view>
</ftui-grid-tile>
</ftui-grid>
</body>
</html>

content_bad.html: (keine namen oder privates enthalten)

Code Auswählen Erweitern

<ftui-grid rows="16" cols="12" resize>
<ftui-grid-tile row="2" col="3" height="1" width="10" shape="round" is-row>
<ftui-icon name="classic-window" [color]="bad_SC_L | map('open:danger, closed:medium')"></ftui-icon>
<ftui-label [text]="bad_WT_Weather:temperature | replace('.',',')" class="size-6 thin" [color]="bad_WT_Weather:temperature | map('0:info, 20:success, 25:warning, 30:danger')"><sup slot="end" class="size-2">&deg;C</sup></ftui-label>
<ftui-label [text]="bad_WT_Weather:humidity | replace('.',',')" class="size-6 thin" [color]="bad_WT_Weather:humidity | map('0:info, 40:success, 71:danger')"><sup slot="end" class="size-2">%</sup></ftui-label>
<ftui-icon name="classic-window" [color]="bad_SC_R | map('open:danger, closed:medium')"></ftui-icon>
</ftui-grid-tile>

<ftui-grid-tile row="3" col="3" height="3" width="10" shape="round">
<header>Heizung</header>
<ftui-segment [(value)]="bad_WT_Climate:desired-temp">
<ftui-segment-button value="off">
<ftui-icon name="frost"></ftui-icon>
<ftui-label>Aus</ftui-label>
</ftui-segment-button>

<ftui-segment-button value="15.0">
<ftui-icon name="brightness_3" class="rotate-180"></ftui-icon>
<ftui-label>15&deg;C</ftui-label>
</ftui-segment-button>

<ftui-segment-button value="18.0">
<ftui-label>18&deg;C</ftui-label>
</ftui-segment-button>

<ftui-segment-button value="20.0">
<ftui-label>20&deg;C</ftui-label>
</ftui-segment-button>

<ftui-segment-button value="22.0">
<ftui-icon name="sun2"></ftui-icon>
<ftui-label>22&deg;C</ftui-label>
</ftui-segment-button>

<ftui-segment-button value="25.0">
<ftui-label>25&deg;C</ftui-label>
</ftui-segment-button>
</ftui-segment>

<ftui-row>
<ftui-column>
<ftui-cell>
<ftui-button [(value)]="bad_WT_Climate:controlMode" states="auto,manual" [fill]="bad_WT_Climate:controlMode | map('auto|set_auto:outline, manual|set_manual:solid')" [color]="bad_WT_Climate:controlMode | map('auto|set_auto:medium, manual|set_manual:primary')" shape="circle">
<ftui-icon [name]="bad_WT_Climate:controlMode | map('auto|set_auto:oa-auto, manual|set_manual:oa-manual')" [color]="bad_WT_Climate:controlMode | map('auto:medium, set_auto|set_manual:danger, manual:')" [class-name]="bad_WT_Climate:controlMode | map('set_auto|set_manual:blink, auto|manual:')"></ftui-icon>
</ftui-button>
<ftui-label>Auto/Manuell</ftui-label>
</ftui-cell>
</ftui-column>
<ftui-column>
<ftui-cell>
<ftui-button (value)="bad_WT_Climate:controlMode" states="boost" fill="outline" color="medium" shape="circle">
<ftui-icon name="heating_boost" color="medium"></ftui-icon>
</ftui-button>
<ftui-label>Boost</ftui-label>
</ftui-cell>
</ftui-column>
</ftui-row>
</ftui-grid-tile>

<ftui-grid-tile row="6" col="3" height="2" width="10" shape="round">
<header>Rollladen</header>
<ftui-segment [(value)]="bad_rollladen:position">
<ftui-segment-button value="0">
<ftui-label>Auf</ftui-label>
</ftui-segment-button>

<ftui-segment-button value="50">
<ftui-label>75%</ftui-label>
</ftui-segment-button>

<ftui-segment-button value="55">
<ftui-label>Stop</ftui-label>
</ftui-segment-button>

<ftui-segment-button value="80">
<ftui-label>90%</ftui-label>
</ftui-segment-button>

<ftui-segment-button value="100">
<ftui-label>Zu</ftui-label>
</ftui-segment-button>
</ftui-segment>
</ftui-grid-tile>

<ftui-grid-tile row="8" col="3" height="2" width="2" shape="round">
<header>Decke</header>
<ftui-cell>
<ftui-button [(value)]="bad_licht" [fill]="bad_licht | map('off:outline, on:solid')" [color]="bad_licht | map('off:medium, on:primary')" shape="circle">
<ftui-icon [name]="bad_licht | map('off:lightbulb-off, on:lightbulb-on')" [color]="bad_licht | map('off:medium, on:')"></ftui-icon>
</ftui-button>
<ftui-label>An/Aus</ftui-label>
</ftui-cell>
</ftui-grid-tile>

<ftui-grid-tile row="8" col="11" height="2" width="2" shape="round">
<header>Spiegel</header>
<ftui-cell>
<ftui-button [(value)]="bad_spiegelschrank" [fill]="bad_spiegelschrank | map('off:outline, on:solid')" [color]="bad_spiegelschrank | map('off:medium, on:primary')" shape="circle">
<ftui-icon [name]="bad_spiegelschrank | map('off:lightbulb-off, on:lightbulb-on')" [color]="bad_spiegelschrank | map('off:medium, on:')"></ftui-icon>
</ftui-button>
<ftui-label>An/Aus</ftui-label>
</ftui-cell>
</ftui-grid-tile>

<!-- #### Batterie Bad #### -->

<ftui-grid-tile row="15" col="3" height="2" width="10" shape="round" is-row>
<header>Batteriestatus</header>
<ftui-cell>
<ftui-icon [name]="bad_SC_L:battery | map('low:battery-0, ok:battery')" [color]="bad_SC_L:battery | map('low:danger, ok:success')" [class-name]="bad_SC_L:battery | map('low:blink, ok:')"></ftui-icon>
<ftui-label class="size-0">Fenster L</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-icon [name]="bad_SC_R:battery | map('low:battery-0, ok:battery')" [color]="bad_SC_R:battery | map('low:danger, ok:success')" [class-name]="bad_SC_R:battery | map('low:blink, ok:')"></ftui-icon>
<ftui-label class="size-0">Fenster R</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-icon [name]="bad_HT:battery | map('low:battery-0, ok:battery')" [color]="bad_HT:battery | map('low:danger, ok:success')" [class-name]="bad_HT:battery | map('low:blink, ok:')"></ftui-icon>
<ftui-label class="size-0">Heizung</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-icon [name]="bad_taster:battery | map('low:battery-0, ok:battery')" [color]="bad_taster:battery | map('low:danger, ok:success')" [class-name]="bad_taster:battery | map('low:blink, ok:')"></ftui-icon>
<ftui-label class="size-0">Taster</ftui-label>
</ftui-cell>
<ftui-cell>
<ftui-icon [name]="bad_WT:battery | map('low:battery-0, ok:battery')" [color]="bad_WT:battery | map('low:danger, ok:success')" [class-name]="bad_WT:battery | map('low:blink, ok:')"></ftui-icon>
<ftui-label class="size-0">Thermostat</ftui-label>
</ftui-cell>
</ftui-grid-tile>
</ftui-grid>

Wie geht es denn nun richtig mit dem Grid im Grid? wie bekomme ich eine vernünftige und funktionierende darstellung?

Grüße^^

EDIT: habe natürlich weiter probiert....
wenn ich den z-index von Menü und dem "Header" per style-Attribut auf 1 setze dann kann ich auch die "Menüpunkte" wieder anwählen.

[torte]

Hi Torte,

geht bei mir mit deiner Definition problemlos. Das Device läßt sich schalten und die Checkbox erhält auch den korrekten Zustand (on oder off), wenn von einer anderen Stelle aus geschaltet wird. Egal ob map('ON: on, OFF: off') oder map('on: on, off: off'). Dein Device reagiert auch auf Kleinbuchstaben?

VG
Karlheinz

Hi Karlheinz,

danke! Ich hab die Checkbox jetzt mal 1:1 aus dem Content File direkt in die Index.html, Variable ersetzt und dann geht es, es geht dann aber auch die Checkbox aus dem ContentFile. WTF?? geht das bei Dir über ein ContentFile?

Danke Grüße Torte

[moonsorrox]

Moin.

Ich habe noch riesige Probleme mit "Grid im Grid"

roman hast du mal <ftui-grid responsive margin="2"> ausprobiert, ich hatte mal ganz amAnfang das Problem das sich ewig alles verschoben hat.
Ich habe nichts vernünftig hinbekommen und war schon am verzweifeln, seit ich es so einsetze funktioniert das sehr gut.

Das mit der Menübedienung allerdings kenne ich nicht...

[LuGu]

Moin.

Ich habe noch riesige Probleme mit "Grid im Grid"

in meiner index.html habe ich ein grid:

Code Auswählen Erweitern

<ftui-grid rows="16" cols="12" resize>

in der content_***.html habe ich wieder ein grid:

Code Auswählen Erweitern

<ftui-grid rows="16" cols="12" resize>
plus die von mir gewünschten grid-tiles natürlich an den richtigen positionen zum ersten grid.

Ich denke, du musst in der content_*** die in der index.html fixen row's und col's abziehen.

Code Auswählen Erweitern

<ftui-grid rows="15" cols="10" resize>

Der ftui-grid-tile muss auch in jedes ftui-tab-view rein.

Dann must du mit deinem content auch bei row=1 und col=1 beginnen.

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="1" height="1" width="10" shape="round" is-row>

Bei mir sieht es so aus und funktioniert:

index.html

Code Auswählen Erweitern


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

<!-- Inhalte -->
<!-- View1 Hauptseite -->
<ftui-tab-view id="View1">
<ftui-grid-tile row="5" col="4" height="16" width="26" shape="round">
<ftui-content file="./_content/cont_1_main.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>

<!-- View2 Dachgeschoss -->
<ftui-tab-view id="View2">
<ftui-grid-tile row="5" col="4" height="16" width="26" shape="round">
<ftui-content file="cont2_dg.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>

<!-- View3 Obergeschoss -->
<ftui-tab-view id="View3">
<ftui-grid-tile row="5" col="4" height="16" width="26" shape="round">
<ftui-content file="cont3_og.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>

<!-- View4 Erdgeschoss -->
<ftui-tab-view id="View4">
<ftui-grid-tile row="5" col="4" height="16" width="26" shape="round">
<ftui-content file="cont4_eg.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>

<!-- View5 Kellergeschoss -->
<ftui-tab-view id="View5">
<ftui-grid-tile row="5" col="4" height="16" width="26" shape="round">
<ftui-content file="cont5_kg.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>

<!-- View6 Draußen -->
<ftui-tab-view id="View6">
<ftui-grid-tile row="5" col="4" height="16" width="26" shape="round">
<ftui-content file="cont6_dr.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>

<!-- View7 Wetter -->
<ftui-tab-view id="View7">
<ftui-grid-tile row="5" col="4" height="16" width="26" shape="round">
<ftui-content file="./_content/cont_7_wetter.html"></ftui-content>
</ftui-grid-tile>
</ftui-tab-view>
</ftui-grid>


cont_7_wetter.html

Code Auswählen Erweitern


<ftui-grid base-width="40" base-height="40" margin="4">
<ftui-grid-tile row="1" col="1" height="5" width="26" shape="round">
</ftui-grid-tile>
</ftui-grid>


Ich hoffe, es hilft dir weiter.

Gruß LuGu

[khk123]

Hi Karlheinz,

danke! Ich hab die Checkbox jetzt mal 1:1 aus dem Content File direkt in die Index.html, Variable ersetzt und dann geht es, es geht dann aber auch die Checkbox aus dem ContentFile. WTF?? geht das bei Dir über ein ContentFile?

Danke Grüße Torte

Ja, geht. Hab folgende Aufrufe:

index.html:

Code Auswählen Erweitern


<ftui-tab-view id="home">
   <ftui-grid-tile row="3" col="2" height="9" width="12" color="translucent">
<ftui-content file="p_home.html"></ftui-content>
   </ftui-grid-tile>
</ftui-tab-view>


p_home.html:

Code Auswählen Erweitern


<ftui-grid-tile row="7" col="1" height="1" width="11" shape="round" color="translucent">
   <ftui-content file="inc_test.html" device1="K_Licht_links"></ftui-content>
</ftui-grid-tile>


inc_test.html:

Code Auswählen Erweitern


<ftui-checkbox [value]="{{device1}}:POWER | map('ON: on, OFF: off')" states="off,on" (value)="{{device1}}" ></ftui-checkbox>


VG
Karlheinz

[torte]

Hallo Karlheinz,

so hab das Problem wohl gefunden.

Vielen Dank für deine Dateien, das hat mir geholfen die Augen auf zu machen .
Unterschied zwischen Deinen und meinen in der Index.html hab ich noch ein Hidden verarbeitet.

Code Auswählen Erweitern


<ftui-content device1="SOO.WeihnachtsBeleuchtung.1" reading="POWER1" devicename="3D Printer" ico="lightbulb-on" [hidden]="SOO.WeihnachtsBeleuchtung.1:POWER1 | map('on:false, off:true')" file="./content/content_system_switch_status.html"></ftui-content>


Sobald das Hidden auf das selbe Reading geht wie die Checkbox zum anzeigen nutzt, zeigt die Checkbox den Status aus fhem nicht an. Nutze ich zb. für Hidden das Reading LWT dann geht alles wunderbar.

Kannst du das vielleicht mal bei Dir prüfen ob das Verhalten bei Dir auch so ist?

Danke und Grüße
Torte