[FTUI3] Frage Tabelle

[M.Piet]

Hallo Zusammen,

ich möchte eine Betriebsstundenübersicht von 3 Heizquellen machen (nicht wundern, Öl und Solar ist in Fhem noch nicht eingerichtet).

Ich habe das entsprechend mit "row" und "column" aufgebaut (siehe Code). Ich denke aber, dass ich das grundlegend falsch gemacht habe, weil sonst hätte ich die kleinen Probleme nicht.

Ich habe nun aber 2 Fragen bzw. Probleme dazu.

Problem 1:
Ich habe die colums mit color="darkblue" und color="darkgray verschieden einfärben wollen. Dies hat aber keine Auswirkung (wie im Screenshot zu sehen).

Problem 2:
Wie man sieht, ist die erste Spalte von der Höhe ein wenig anders als die Folgespalten. Ich bin grad ratlos, wie ich das exakt alles auf eine Linie bekomme. Ich denke mal das ich vom Grund auf die Tabellen falsch aufgebaut habe.

Vielen Dank schon mal.

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="9" height="5" width="5">
<header>Betriebsstunden Übersicht</header>

  <ftui-row>
<ftui-column color="darkgray">
  <ftui-label text=""></ftui-label>
  <ftui-icon name="clock-o"></ftui-icon>
  <ftui-label text="Betrieb"></ftui-label>
  <ftui-label text="Heute"></ftui-label>
  <ftui-label text="Gestern"></ftui-label>
  <ftui-label text="akt. Monat"></ftui-label>
  <ftui-label text="letz. Monat"></ftui-label>
  <ftui-label text="akt. Jahr"></ftui-label>
  <ftui-label text="letz. Jahr"></ftui-label>
</ftui-column>

<ftui-column align-items= color="darkblue">
  <ftui-label text="Holzvergaser"></ftui-label>
  <ftui-icon name="power-off" [color]="HMW_Sen_SC_12_DR_OEQ0863464_04 | map('Holzvergaser aus:red,Holzvergaser in Betrieb:green')" [class-name]="HMW_Sen_SC_12_DR_OEQ0863464_04 | map('Holzvergaser in Betrieb:spin size-3,present:')"></ftui-icon>
  <ftui-label [text]="CN.Holzvergaser:pulseTimePerDay | round(0,50)"></ftui-label>
  <ftui-label [text]="CN.Holzvergaser:appOpHoursPerDay | round(0,50)"></ftui-label>  
  <ftui-label [text]="CN.Holzvergaser:appOpHoursPerMonthTemp | round(0,50)"></ftui-label>  
  <ftui-label [text]="CN.Holzvergaser:appOpHoursPerMonth | round(0,50)"></ftui-label>
  <ftui-label [text]="CN.Holzvergaser:appOpHoursPerYearTemp | round(0,50)"></ftui-label>    
  <ftui-label [text]="CN.Holzvergaser:appOpHoursPerYear | round(0,50)"></ftui-label>
</ftui-column>

<ftui-column align-items= color="darkgray">
  <ftui-label text="Ölheizung"></ftui-label>
  <ftui-icon name="power-off" [color]="HMW_Sen_SC_12_DR_OEQ0863464_04 | map('Holzvergaser aus:green,Holzvergaser in Betrieb:red')" [class-name]="HMW_Sen_SC_12_DR_OEQ0863464_04 | map('Holzvergaser aus:spin ,present:')"></ftui-icon>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
</ftui-column>

<ftui-column align-items= color="darkblue">
  <ftui-label text="Solarthermie"></ftui-label>
  <ftui-icon name="power-off" [color]="HMW_Sen_SC_12_DR_OEQ0863464_04 | map('Holzvergaser aus:green,Holzvergaser in Betrieb:red')" [class-name]="HMW_Sen_SC_12_DR_OEQ0863464_04 | map('Holzvergaser aus:spin ,present:')"></ftui-icon>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
</ftui-column>
   </ftui-row>
</ftui-grid-tile>


[OdfFhem]

*** 1
Gibt es die vordefinierten Farben darkgray bzw. darkblue ?
Probier mal testweise mit gray und blue ...

*** 2
Die erste Spalte hat zu viele Elemente ... 9 statt 8 ...

[M.Piet]

Hey OldFhem,

**1
Die sollte es geben. Die Farben sind aus einer Wetteranzeige, wurde von einem anderem User mit FRUI3 so umgesetzt.
Ich habe trotzdem Testweise gray und blue probiert. Keine Besserung.

**2
Du hast recht....Zählen kann ich nicht...
OK ich habe das nun angeglichen. Ich habe jetzt exakt die gleiche Zeilenanzahl.
Trotzdem ist es aber nicht auf einer Linie.
edit: ich kann weiter nicht zählen. Ich teste erstmal was...
edit 2: nachdem ich nun endlich richtig gezählt habe, passt es auch

Code Auswählen Erweitern

<ftui-grid-tile row="1" col="9" height="5" width="5">
<header>Betriebsstunden Übersicht</header>

  <ftui-row>
<ftui-column color="darkgray">
  <ftui-label text=""></ftui-label>
  <ftui-label text="Heute"></ftui-label>
  <ftui-label text="Gestern"></ftui-label>
  <ftui-label text="akt. Monat"></ftui-label>
  <ftui-label text="letz. Monat"></ftui-label>
  <ftui-label text="akt. Jahr"></ftui-label>
  <ftui-label text="letz. Jahr"></ftui-label>
</ftui-column>

<ftui-column align-items= color="gray">
  <ftui-label text="Holzvergaser"></ftui-label>
  <ftui-icon name="power-off" [color]="HMW_Sen_SC_12_DR_OEQ0863464_04 | map('Holzvergaser aus:red,Holzvergaser in Betrieb:green')" [class-name]="HMW_Sen_SC_12_DR_OEQ0863464_04 | map('Holzvergaser in Betrieb:spin ,present:')"></ftui-icon>
  <ftui-label [text]="CN.Holzvergaser:pulseTimePerDay | round(0,50)"></ftui-label>
  <ftui-label [text]="CN.Holzvergaser:appOpHoursPerDay | round(0,50)"></ftui-label>  
  <ftui-label [text]="CN.Holzvergaser:appOpHoursPerMonthTemp | round(0,50)"></ftui-label>  
  <ftui-label [text]="CN.Holzvergaser:appOpHoursPerMonth | round(0,50)"></ftui-label>
  <ftui-label [text]="CN.Holzvergaser:appOpHoursPerYearTemp | round(0,50)"></ftui-label>    
  <ftui-label [text]="CN.Holzvergaser:appOpHoursPerYear | round(0,50)"></ftui-label>
</ftui-column>

<ftui-column align-items= color="blue">
  <ftui-label text="Ölheizung"></ftui-label>
  <ftui-icon name="power-off" [color]="HMW_Sen_SC_12_DR_OEQ0863464_04 | map('Holzvergaser aus:green,Holzvergaser in Betrieb:red')" [class-name]="HMW_Sen_SC_12_DR_OEQ0863464_04 | map('Holzvergaser aus:spin ,present:')"></ftui-icon>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
</ftui-column>

<ftui-column align-items= color="darkblue">
  <ftui-label text="Solarthermie"></ftui-label>
  <ftui-icon name="power-off" [color]="HMW_Sen_SC_12_DR_OEQ0863464_04 | map('Holzvergaser aus:green,Holzvergaser in Betrieb:red')" [class-name]="HMW_Sen_SC_12_DR_OEQ0863464_04 | map('Holzvergaser aus:spin ,present:')"></ftui-icon>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
  <ftui-label text="später"></ftui-label>
</ftui-column>
   </ftui-row>
</ftui-grid-tile>

[OdfFhem]

Ein "=" ohne angehängten Wert (zer)stört ...

Code Auswählen Erweitern


align-items= color="gray"


s. Screenshot

Code Auswählen Erweitern


<ftui-column align-items color="yellow">
<ftui-column align-items color="green">


[M.Piet]

Ein "=" ohne angehängten Wert (zer)stört ...

Ich wollte damit eine leere Zeile haben, damit auch beiden Seiten die gleiche Anzahl ist. Ich habe nun einfach was reinegschrieben.

Zu den Farben: du bist mein Held! Vielen Dank! So geht es!

Dazu eine letzte Frage: kann man die Hintergrundfarbe auch in Abhängigkeit eines Readings machen? Mal angenommen um ein Ereignis besonders vorzugeben?

[OdfFhem]

Das geht wie üblich über das beliebte mapping ... z.B. für abwechselnde Einfärbung bzgl. eines Readings "ftuitest:onoff":

Code Auswählen Erweitern


  <ftui-column [color]="ftuitest:onoff | map('0:yellow, 1:green')">
  <ftui-column [color]="ftuitest:onoff | map('1:yellow, 0:green')">


s. Screenshot

[M.Piet]

Perfekt! Vielen Dank für die Hilfe!

[M.Piet]

Hallo Zusammen,

ich poste das mal hier rein, weil es quasi ähnlich wie mein erstes Problem ist.

Ich habe die Anruferliste eingebaut.

Wenn in der dritten Spalte der Name zu lang ist, verschiebt sich dahinter alles nach rechts. Das sieht sehr unschön aus (siehe Screenshot).
Habe schon ein wenig rumexperimentiert, komme aber nicht so richtig weiter.
Kann ich Inhalte der Zellen nicht abschneiden lassen, damit dahinter sich nicht alles verrückt?

Code Auswählen Erweitern

<div style="display: table; margin-left:5px;">
<div style="display: table-row;">
<ftui-content file="content/template_FritzBoxCallListEntry.html" t_device="CallList" t_number="1"></ftui-content>
</div>
<div style="display: table-row;" class="my-alternate-row-color">
<ftui-content file="content/template_FritzBoxCallListEntry.html" t_device="CallList" t_number="2"></ftui-content>
</div>
<div style="display: table-row;">
<ftui-content file="content/template_FritzBoxCallListEntry.html" t_device="CallList" t_number="3"></ftui-content>
</div>
<div style="display: table-row;" class="my-alternate-row-color">
<ftui-content file="content/template_FritzBoxCallListEntry.html" t_device="CallList" t_number="4"></ftui-content>
</div>
</div>

template_FritzBoxCallListEntry.html ist angehangen, falls nötig. Denke aber nicht das es an dem File liegt.

Danke schon mal.

[mr_petz]

@M.Piet
War erst Thema. Schau dir mal das an:
https://forum.fhem.de/index.php/topic,115259.msg1258157.html#msg1258157
Hier werden die Reihen prozentual aufgeteilt. Es wird da von 100% Breite ausgegangen. Somit hast du eine feste Einteilung.

LG

Edit:
Bei einer Überlänge könntest du mit:

Code Auswählen Erweitern


style="overflow:hidden" align-items="left"

in den ftui-row´s Abhilfe schaffen...