Formatierungsfrage zu uiTable

[Jogi]

Hallo,
ich schätze uiTable sehr und habe mittlerweile fast alle meine Raumanzeigen damit aufgehübscht.
Leider komme ich manchmal an meine Grenzen. So auch jetzt.
Ich möchte folgende Anzeige (Anhang 1) so umgestalten, dass die beiden grünen Icons nebeneinander mittig unter der rechten Anzeige "Helligkeit" sind, bekomme das aber nicht hin.

Code Auswählen Erweitern

{
  package ui_Table;;
  $TABLE='text-align:center;;';;
  $SHOWNODEVICELINE = "JS|21.02.2022";;
  }
card([Temp.Wohnzimmer:temperature:col],"Wohnzimmer","hue_room_living",20,30,undef,undef,"°C",\&temp_hue,"1","130,,,1,",undef,undef,[Temp.Wohnzimmer:humidity:col],0,100,180,200,"%",undef,"0")|
icon_temp_hum_ring("temp_outside",[Aussentemperatur1],[Aussen:humidity],undef,undef,175)|
icon_ring2([Wetter:WindKm] > 0 ? "wind".",1,0,0,".[Wetter:WindrichtungGrad]:"no_wind",[Wetter:WindKm],0,50,120,0,"km/h",150,undef,1,[Wetter:WindboeenKm],0,50,120,0,"km/h",undef,1),
"Helligkeit",ring([Helligkeit:state],0,4000,0,120,'Lux',"150,1",undef,0)|
icon_ring ("weather_barometric_pressure",[Wetter:LuftdruckHpa],980,1047,0,120,"hPa",0,150),
icon_ring2("sani_solar",[Wetter:UV],0,10,100,30,"UV",125,undef,0,[Wetter:Solar],0,1000,100,30,"Watt/m²",undef,0)|
card([Helligkeit_Dachfenster:Lux:col],"Helligkeit","weather_sun",0,3000,20,50,"Dach",undef,"0","130,,,1,,1",undef,undef,[Helligkeit_Aussen:Lux:col],0,3000,190,120,"Aussen",\undef,"0"),
icon([Lux_Dach:state],"10px-kreis-rot","10px-kreis-gruen")|
icon([Lux_Aussen:state],"10px-kreis-rot","10px-kreis-gruen")
<

"Alina",temp_hum_ring([Alina:temperature],[Alina:humidity],14,28,120,50,50,"1,font-weight:normal","0,font-weight:normal")|
"Benjamin",temp_hum_ring([Benjamin:temperature],[Benjamin:humidity],undef,undef,120,50,50,"1,font-weight:normal","0,font-weight:normal")|
"Schlafzimmer",temp_hum_ring([Schlafzimmer:temperature],[Schlafzimmer:humidity],18,28,120,50,50,"1,font-weight:normal","0,font-weight:normal")|
"Flur EG",icon_uring('0,opacity:0.8,1,6','hue_room_hallway',[Temp_Flur_EG:Temperature],18,25,80,40,'℃',1,120)|
"Büro",icon_uring('0,opacity:0.8,1,6','scene_office',[Temperatur_Buero:Temperatur],18,25,80,40,'℃',1,120)|
"Klimaanlage",ring2([Klimaanlage:power],0,1200,150,40,"Watt",120,undef,"1,font-weight:normal;font-size:100%",[Klimaanlage:energy]/1000,20,100,0,120,"KW",undef,"2,font-weight:normal;font-size:70%")
Ich weiß nicht, wie ich den Platz unter "Helligkeit" in 2 Spalten formatiere ohne die komplette Ordnung zu zerstören, um da die beiden Icons nebeneinander zu platzieren. Untereinander würde mit einem Komma funktionieren, will ich aber nicht.
Ich könnte auch mit "<" einen komplett neuen Absatz definieren, dadurch verliere ich aber zu viel Platz. Ist natürlich kein FHEM-Thema, sondern hat wahrscheinlich eher etwas mit HTML oder/und CSS zu tun.

Gibt es eine Möglichkeit mein Vorhaben zu realisieren? Wenn "ja" wäre ich für einen Tipp dankbar, da ich mit meiner eigenen Recherche nicht zum gewünschten Ergebnis gekommen bin.

Gruß,
Jogi

[Sany]

Hi Jogi,
Du kannst die 2 Punkte einfach aneinanderhängen mit .
also

Code Auswählen Erweitern

icon([Lux_Dach:state],"10px-kreis-rot","10px-kreis-gruen").icon([Lux_Aussen:state],"10px-kreis-rot","10px-kreis-gruen")

ebenso kannst Du noch Platz dazwischen einbauen mittels &nbsp, da mehrere "Spaces" nicht als solche dargestellt werden:

Code Auswählen Erweitern

icon([Lux_Dach:state],"10px-kreis-rot","10px-kreis-gruen")."&nbsp&nbsp".icon([Lux_Aussen:state],"10px-kreis-rot","10px-kreis-gruen")
(evtl. müssen zwischen die &nbsp noch ; bin mir da gerade nicht sicher und habe kein Beispiel gefunden.)


wenn Du es doch mit Spalten machen möchtest mußt Du die Card über 2 Spalten anzeigen lassen, dann allerdings in einer Zeile drunter die Icons per | getrennt. Das geht mittels

$TD{0}{4} = "colspan='2'";

das wäre die Zelle in der ersten Zeile und 5ten Spalte, wenn ich mich nicht verzählt habe. Diese Angabe kommt in den Perlblock.

Du musst damit ein wenig rumspielen, ein paar Details stehen im uiTable Wiki: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Der_Perlblock

Viel Erfolg!


Sany

[Jogi]

Du kannst die 2 Punkte einfach aneinanderhängen mit .

Soooo einfach???
Das hätte ich nicht gedacht und auf den Punkt bin ich nicht gekommen.
Funktioniert perfekt 

Vielen Dank dafür und die ergänzenden Tipps, die ich sicherlich auch noch brauchen werde.

Gruß,
Jogi

[Sany]

mit einem Punkt kann man 2 Strings in Perl verbinden (concatenation). Wenn ich es richtig verstanden habe ist alles, was in ui_Table mit den Funktionen (z.B. icon) erzeugt wird ein String, der dann an den Browser übergeben wird. In diesem String ist html. Deshalb kann man mehrere Sachen innerhalb einer Zelle anzeigen, verknüpft mit . (Punkt)

Gruß

Sany

[Damian]

mit einem Punkt kann man 2 Strings in Perl verbinden (concatenation). Wenn ich es richtig verstanden habe ist alles, was in ui_Table mit den Funktionen (z.B. icon) erzeugt wird ein String, der dann an den Browser übergeben wird. In diesem String ist html. Deshalb kann man mehrere Sachen innerhalb einer Zelle anzeigen, verknüpft mit . (Punkt)

Gruß

Sany

Zusätzlich wird der Punkt sowie das Komma und | von DOIF ausgewertet und setzt für jede Angabe (Zelle) separat Trigger auf und registriert die Angaben mit eigener ID auf der HTML-Seite. Das hat den Vorteil, dass bei Änderungen, nicht eine ganze Zeile oder gar die ganze Tabelle neu gezeichnet werden muss, sondern nur die entsprechenden Teile (Zellen) der Tabelle.

[Jogi]

Sehr coole Sache. VIELEN Dank für die Infos.
Aber wo findet man so etwas?
Das mit dem Punkt habe ich nirgendwo gelesen. Auch das z.B das "<" einen neuen Absatz erstellt habe ich nirgendwo gelesen. Ich habe es mir aus einem der Beispiele abgeleitet.
Oder habe ich wieder nur nicht richtig gesucht oder war wieder blind?
Kommt beides leider immer wieder vor 

[Damian]

Sehr coole Sache. VIELEN Dank für die Infos.
Aber wo findet man so etwas?
Das mit dem Punkt habe ich nirgendwo gelesen. Auch das z.B das "<" einen neuen Absatz erstellt habe ich nirgendwo gelesen. Ich habe es mir aus einem der Beispiele abgeleitet.
Oder habe ich wieder nur nicht richtig gesucht oder war wieder blind?
Kommt beides leider immer wieder vor 

https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Einfache_Tabellendefinition_ohne_Funktionen

siehe grüne Infotafel zu Zellenauswertung

[Jogi]

https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Einfache_Tabellendefinition_ohne_Funktionen

siehe grüne Infotafel zu Zellenauswertung

Danke und sorry, das habe ich tatsächlich übersehen.