Hallo euch allen,
erstmal vorneweg, super Arbeit die hier geleistet wird, macht richtig Spaß beim anwenden und zusammenbauen :)
Hab zur Zeit folgendes Problem: Ich habe mir für meine Rollläden ein Popup gebaut, das ich dann von einer Seite aufrufen möchte. Das passt auch alles soweit und funktioniert auch, es gibt aber ein Problem mit der Darstellung. Ich habe 4 Felder definiert, 100%, 50%, 10% und 0%. Man sieht auch die 4 Felder, ich bekomme aber nur die Textanzeige für den aktuellen Wert, also der der blau eingefärbt ist. die restlichen Felder haben keine sichtbare Beschriftung. Geht man mit der Maus auf ein Feld, bekomme ich die Zahl in weißer Schrift angezeigt (siehe Screenshot Badezimmer Fenster 50%)
Hier mal die Definition in der Hauptseite (der Aufruf):
<ftui-grid-tile row="4" col="1" height="1" width="2" shape="round">
<header>Rolladen</header>
<ftui-icon name="window-shutter" popup-target="pop1"></ftui-icon>
</ftui-grid-tile>
<ftui-popup id="pop1" width="600px" height="600px" timeout="0" shape="round">
<header>Rolladen</header>
<ftui-content file="content-rolladen.html"></ftui-content>
</ftui-popup>
und hier der Inhalt der Rolladen-html:
<ftui-row>
<table style="border:0px solid grey; width:100%">
<tr>
<td>
<center>
<ftui-label>Küche Fenster</ftui-label>
</center>
</td>
<td>
<center>
<ftui-segment [(value)]="Rolladen_Kueche:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</center>
</td>
</tr>
<tr>
<td>
<center>
<ftui-label>Wohnzimmer Fenster</ftui-label>
</center>
</td>
<td>
<center>
<ftui-segment [(value)]="Rolladen_Wohnzimmer:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</center>
</td>
</tr>
<tr>
<td>
<center>
<ftui-label>Wohnzimmer Tür</ftui-label>
</center>
</td>
<td>
<center>
<ftui-segment [(value)]="Rolladen_Wohnzimmer_Tuer:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</center>
</td>
</tr>
<tr>
<td>
<center>
<ftui-label>Badezimmer Fenster</ftui-label>
</center>
</td>
<td>
<center>
<ftui-segment [(value)]="Rolladen_Badezimmer:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</center>
</td>
</tr>
<tr>
<td>
<center>
<ftui-label>Elias Fenster</ftui-label>
</center>
</td>
<td>
<center>
<ftui-segment [(value)]="Rolladen_Elias:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</center>
</td>
</tr>
<tr>
<td>
<center>
<ftui-label>Schlafzimmer Fenster</ftui-label>
</center>
</td>
<td>
<center>
<ftui-segment [(value)]="Rolladen_Schlafzimmer:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</center>
</td>
</tr>
<tr>
<td>
<center>
<ftui-label>Schlafzimmer Tür</ftui-label>
</center>
</td>
<td>
<center>
<ftui-segment [(value)]="Rolladen_Schlafzimmer_Tuer:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</center>
</td>
</tr>
<tr>
<td>
<center>
<ftui-label>Constantin Fenster</ftui-label>
</center>
</td>
<td>
<center>
<ftui-segment [(value)]="Rolladen_Constantin:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</center>
</td>
</tr>
<tr>
<td>
<center>
<ftui-label>Constantin Tür</ftui-label>
</center>
</td>
<td>
<center>
<ftui-segment [(value)]="Rolladen_Constantin_Tuer:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</center>
</td>
</tr>
<tr>
<td>
<center>
<ftui-label>Arbeitszimmer Fenster</ftui-label>
</center>
</td>
<td>
<center>
<ftui-segment [(value)]="Rolladen_Arbeitszimmer:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</center>
</td>
</tr>
</table>
</ftui-row>
Ich denke da fehlt wahrscheinlich irgendwo noch eine Zuordnung der Farbe oder des Styles, komme aber gerade nicht drauf. Hat da von euch jemand eine Idee?
Gruß Markus
P.S.: Ist das so von der Umsetzung her in Ordnung das Ganze in einer Tabelle zu machen, habe leider keine richtig funktionierende Alternative für eine saubere Anzeige hinbekommen.
Sehr schöne Idee, Segmented für Rolladen zu benutzen.
Es fehlte noch die --segments-text-color Variable im Default Theme. Habe ich jetzt eingetragen.
Btw: Nur mit <ftui-row> und <ftui-column> erreicht man das gleiche Ergebnis:
<ftui-row>
<ftui-column>
<ftui-label>Küche Fenster</ftui-label>
</ftui-column>
<ftui-column>
<ftui-segment [(value)]="Rolladen_Kueche:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-label>Wohnzimmer Fenster</ftui-label>
</ftui-column>
<ftui-column>
<ftui-segment [(value)]="Rolladen_Wohnzimmer:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-label>Wohnzimmer Tür</ftui-label>
</ftui-column>
<ftui-column>
<ftui-segment [(value)]="Rolladen_Wohnzimmer_Tuer:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-label>Badezimmer Fenster</ftui-label>
</ftui-column>
<ftui-column>
<ftui-segment [(value)]="Rolladen_Badezimmer:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-label>Elias Fenster</ftui-label>
</ftui-column>
<ftui-column>
<ftui-segment [(value)]="Rolladen_Elias:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-label>Schlafzimmer Fenster</ftui-label>
</ftui-column>
<ftui-column>
<ftui-segment [(value)]="Rolladen_Schlafzimmer:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-label>Schlafzimmer Tür</ftui-label>
</ftui-column>
<ftui-column>
<ftui-segment [(value)]="Rolladen_Schlafzimmer_Tuer:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-label>Constantin Fenster</ftui-label>
</ftui-column>
<ftui-column>
<ftui-segment [(value)]="Rolladen_Constantin:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-label>Constantin Tür</ftui-label>
</ftui-column>
<ftui-column>
<ftui-segment [(value)]="Rolladen_Constantin_Tuer:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</ftui-column>
</ftui-row>
<ftui-row>
<ftui-column>
<ftui-label>Arbeitszimmer Fenster</ftui-label>
</ftui-column>
<ftui-column>
<ftui-segment [(value)]="Rolladen_Arbeitszimmer:pct">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
<ftui-column>
</ftui-row>
Ja, dachte das mit dem Segmented wäre doch was für die Rollladensteuerung, freut mich wenn du es auch gut findest :)
Bezüglich der --segments-text-color Variable, so etwas habe ich schon vermutet, da bin ich aber nicht so durch um das herauszufinden. Aber als kurze Rückmeldung, funzt einwandfrei ;D (siehe Anhang)
Wegen der Geschichte mit <ftui-row> und <ftui-column>, ich schau heute nochmal, bin mir aber sicher ich hatte das gestern genauso gehabt, da war aber die Anzeige nicht richtig bzw. sauber von der horizontalen Ausrichtung.
Gebe dir aber nochmal Bescheid diesbezüglich.
Gruß Markus
sieht bei mir gut aus
Mit
<ftui-column align-items="right" margin="0 3em 0 0" width="40%">
<ftui-label>Küche Fenster</ftui-label>
</ftui-column>
kann man auch die Label-Spalte kleiner machen und die Labels rechts ausrichten. Sieht dann aus, wie im 2ten Screenshot
Hi setstate,
keine Ahnung was ich da gestern falsch hatte bezüglich dem Aufbau de <ftui-row> und <ftui-column>, aber ich gebe dir recht, funktioniert so einwandfrei wie du es gepostet hattest. Oftmals sitzt das Problem halt doch vor dem Monitor ;).
Auf jeden Fall vielen Dank für die Hilfe, soweit funktioniert das echt gut, du machst da echt ne super Arbeit.
Werde jetzt deine Tipps bezüglich der Ausrichtung des Textes noch probieren, sind ja aber nur Kleinigkeiten.
Super Idee, das habe ich jetzt bei mir auch so umgesetzt. Wie bekommt man das mit dem grauen Hintergrund hin?
<ftui-row>
<ftui-column>
<ftui-label>Bad</ftui-label>
</ftui-column>
<ftui-column>
<ftui-segment [(value)]="DUOFERN_40E772:position">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</ftui-column>
</ftui-row>
Da scheint bei dir die --segments-background-color nicht gesetzt worden sein oder du hast etwas an der ftui-theme.css geändert oder in einer user.css umgebogen?
--segments-background-color: var(--dark-light);
https://github.com/knowthelist/ftui/blob/master/www/ftui/themes/ftui-theme.css#L106
Könntest das segment so definieren:
<ftui-row>
<ftui-column>
<ftui-label>Bad</ftui-label>
</ftui-column>
<ftui-column>
<ftui-segment [(value)]="DUOFERN_40E772:position" style="--segments-background-color: var(--dark-light);">
<ftui-segment-button value="100">
<ftui-label>100</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>0</ftui-label>
</ftui-segment-button>
</ftui-segment>
</ftui-column>
</ftui-row>
LG
Zitat von: mr_petz am 22 Januar 2023, 17:34:43
Da scheint bei dir die --segments-background-color nicht gesetzt worden sein oder du hast etwas an der ftui-theme.css geändert oder in einer user.css umgebogen?
Nein, an den css files habe ich nichts geändert.
Das hat nicht zum Erfolg geführt:
style="--segments-background-color: var(--dark-light);"Mein header ist so definiert:
<head>
<!--
/* FHEM tablet ui - FTUI */
/**
* UI builder framework for FHEM
*
* Version: 3.0.0
*
* Copyright (c) 2015-2021 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">
<meta name="mobile-web-app-capable" content="yes">
<!--<meta name="toast_position" content="topLeft"> -->
<!-- verbose level 0-4 -->
<meta name="debug" content="0">
<title>...</title>
</head>
Die css files habe ich mal angehangen.
Oh du hast recht. dark-light gibt es nicht???
teste mal mit:
style="--segments-background-color: var(--light);"
oder:
style="--segments-background-color: #535353;"
dark-light war mal das:
--dark-light: #535353;
https://github.com/knowthelist/ftui/commit/4605a01d609bf32eaefd799b4dd17f4aafbe78ff#diff-503eb3f1aded0166f651233f5423b770c005a38390e170ffe46624118f88b296L30
LG
So ganz schön ist es noch nicht :(
Zitat von: mr_petz am 22 Januar 2023, 18:09:54
Oh du hast recht. dark-light gibt es nicht???
teste mal mit:
style="--segments-background-color: var(--light);"
oder:
style="--segments-background-color: #535353;"
dark-light war mal das:
--dark-light: #535353;
https://github.com/knowthelist/ftui/commit/4605a01d609bf32eaefd799b4dd17f4aafbe78ff#diff-503eb3f1aded0166f651233f5423b770c005a38390e170ffe46624118f88b296L30
LG
Habe noch was ergänzt...
LG
So ist's schön, vielen vielen dank!
<ftui-row>
<ftui-column>
<ftui-label>Bad</ftui-label>
</ftui-column>
<ftui-column>
<ftui-segment [(value)]="DUOFERN_40E772:position" style="--segments-background-color: #535353;">
<ftui-segment-button value="100">
<ftui-label>zu</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="50">
<ftui-label>50</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="10">
<ftui-label>10</ftui-label>
</ftui-segment-button>
<ftui-segment-button value="0">
<ftui-label>auf</ftui-label>
</ftui-segment-button>
</ftui-segment>
</ftui-column>
</ftui-row>