neue svg-Funktionen: icon_ring, icon_bar, cylinder_bars, icon_ring2

[Damian]

Könnte man den vielleicht auch von der Farbe / Transparenz her ändern oder konfigurierbar machen, bzw. per CSS Stil setzen? Auf hellem Hintergrund sehen die dunklen Ringe eher suboptimal aus. Bei den Icons ist mir außerdem aufgefallen, dass manche unten abgeschnitten sind und teilweise nicht zentriert (z.B. beim Thermometer). Hier ein Beispiel:

Code Auswählen Erweitern


{
ui_Table::icon_ring("temp_temperature",ReadingsNum($name,"temperature",0),-35,35,240,0,"°C",1,160) .
ui_Table::icon_ring("weather_humidity",ReadingsNum($name,"humidity",0),0,100,60,180,"%",0,160) .
ui_Table::icon_ring("weather_wind_speed",ReadingsNum($name,"wind_speed_ms",0),0,50,180,0,"m/s",1,160) .
ui_Table::icon_ring("weather_barometric_pressure",ReadingsNum($name,"pressure",0),950,1050,180,0,"hPa",0,160)
}


Ich habe da mal mit verschiedenen Styles experimentiert und versucht danach die Transparenz geschickt festzulegen. Besser kommen die Symbole auf dunklen Hintergründen zur Geltung. Wenn man die Transparanz erhöht oder den Hintergrund aufhellt, dann sind bestimmte Farben kaum erkennbar.

[Damian]

Ah, da hast Du aber genau hingeschaut. In der Tat gibt es da noch zwei Unsauberkeiten: Ich benutzte # $Id: 98_DOIF.pm 23740 2021-02-14 11:23:37Z Damian $ und habe einen Restart gemacht.

• Danach stelle ich zwei Dinge fest: Erstens sind der dritte und vierte Ring kleiner (da habe ich die Skalierung auf 110 mal rausgenommen). Hatte die auf etwa gleiche Größe durch Skalierung "getrimmt".
  
• Der Hintergrund|Transparenz wird unterschiedlich behandelt. Habe mal f18 auf hellen Modus gestellt (siehe Screenshot)

Hier Die Definition der der 8 Ringe:

Code Auswählen Erweitern

## Heizung
"DI_Brenner"|"  "|"DI_RLA"|"DI_Warmwasser"|"DI_FBH_Betrieb"|"DI_Solarthermie"|" "|"Speicher unten"
icon_temp_ring((([Switch_Heizkeller:Brenner]) eq "ON"?"sani_boiler_temp\@red":([SW_03_Heizpumpe]) eq "on"?"sani_pump\@red":""),[T_Heizung:temperature:d1],[Vorlauf:state],[Vorlauf:state]+25,110)|
ring2([T_Vorlauf:temperature],30,90,undef,undef,"°VL",120,\&temp_hue,1,[T_Ruecklauf:temperature],30,90,undef,undef,"°RL",\&temp_hue,1)|
icon_temp_ring(([SW_01_RL_Anhebung] eq "off"?"":"sani_return_temp\@red"),[T_RL_Anhebung:temperature:d1],10,80)|
icon_temp_ring(([SW_02_WW_Pumpe] eq "off"?"":"sani_water_cold\@red,1.1,-1,4"),[T_Warmwasser:temperature:d1],30,60)|
icon_temp_ring(([SW_04_FBH_Pumpe] eq "off"?"":"sani_floor_heating\@red"),[TF_Galerie:temperature:d1],[RR_Galerie]-15,[RR_Galerie]+5,110)|
## Solarthermie
icon_temp_ring((([DI_Solarthermie:state]) eq "Warmwasser"?"sani_water_tap\@green":([DI_Solarthermie:state]) eq "RLA"?"sani_heating\@green":""),[T_Kollektor:temperature:d1],-10,120)|
ring2([T_VL_Kollektor:temperature],10,120,undef,undef,"°VL",120,\&temp_hue,1,[T_RL_Kollektor:temperature],10,120,undef,undef,"°RL",\&temp_hue,1)|
ring2([T_Solarspeicher_1:temperature],10,60,undef,undef,"°WW",120,\&temp_hue,1,[T_Solarspeicher_2:temperature],10,100,undef,undef,"°RLA",\&temp_hue,1)

(Fußbodenheizung ist inzwischen aus)

Christian

Die Skalierung hat sich etwas geändert, jetzt sind alle Ringe bei 100 % gleich groß.

Bei dir fehlt offenbar immer der graue Hintergrund bei Ringen mit Icons. Verschiebe deine Definition in einen neuen Raum und schaue mal ob das Problem noch besteht. Es könnte auch ein Browser-Problem sein. Ich habe das Problem nicht.

[cwagner]

Also: Die Größen sind jetzt auch bei mir einheitlich und die Hintergründe sind in einem frisch kreierten Raum "Damian" solange auch einheitlich (also NICHT grau), solange ich nicht mit

Code Auswählen Erweitern

$SHOWNODEVICELINE = "Aktuell|Damian"; die Device-Zeile ausblende. Dann haben die ring2 einen anders gefärbten Hintergrund.

Reproduziert mit Edge, Edge-Chrome und mit Google-Chrome

[Damian]

Also: Die Größen sind jetzt auch bei mir einheitlich und die Hintergründe sind in einem frisch kreierten Raum "Damian" solange auch einheitlich (also NICHT grau), solange ich nicht mit

Code Auswählen Erweitern

$SHOWNODEVICELINE = "Aktuell|Damian"; die Device-Zeile ausblende. Dann haben die ring2 einen anders gefärbten Hintergrund.

Reproduziert mit Edge, Edge-Chrome und mit Google-Chrome

Dann stimmt bei dir etwas nicht, denn der graue Hintergrund wird immer gezeichnet.

[Damian]

Ich habe da mal mit verschiedenen Styles experimentiert und versucht danach die Transparenz geschickt festzulegen. Besser kommen die Symbole auf dunklen Hintergründen zur Geltung. Wenn man die Transparanz erhöht oder den Hintergrund aufhellt, dann sind bestimmte Farben kaum erkennbar.

Wenn ich den grauen Außenring ein Pixel größer zeichnen lasse, dann lässt sich der farbige Ring auf weißem Hintergrund etwas besser erkennen.

[cwagner]

Dann stimmt bei dir etwas nicht, denn der graue Hintergrund wird immer gezeichnet.

habe jetzt die gesamten Einträge von f18 weggeworden, den Raum weggeworfen, einen weiteren angelegtt eine weitere FHEMWEB-Instanz gemacht, den default-Style von FHEM genommen. Ich komme immer wieder zum Ergebnis:

icon_temp_ring verliert seinen grauen Hintergrund immer dann, wenn ich $SHOWNODEVICELINE in der uiTable für einen Raum festlege.
OHNE: Wie von Dir beschrieben
MIT:    sind die icon-temp-rings ohne Hintergrund.

Es macht auch keinen Unterschied, ob ich die Ringe in einer geraden oder ungeraden (dunkelgrauer, schwarzer Hintergrund) platziere.

Wenn ich den grauen Außenring ein Pixel größer zeichnen lasse, dann lässt sich der farbige Ring auf weißem Hintergrund etwas besser erkennen.

Ja, mir war die jüngste Verschlankung auch etwas zu elegant geraten

[Damian]

habe jetzt die gesamten Einträge von f18 weggeworden, den Raum weggeworfen, einen weiteren angelegtt eine weitere FHEMWEB-Instanz gemacht, den default-Style von FHEM genommen. Ich komme immer wieder zum Ergebnis:

icon_temp_ring verliert seinen grauen Hintergrund immer dann, wenn ich $SHOWNODEVICELINE in der uiTable für einen Raum festlege.
OHNE: Wie von Dir beschrieben
MIT:    sind die icon-temp-rings ohne Hintergrund.

Es macht auch keinen Unterschied, ob ich die Ringe in einer geraden oder ungeraden (dunkelgrauer, schwarzer Hintergrund) platziere.

Tja, bei mir leider nicht reproduzierbar

Beispiel:

Code Auswählen Erweitern

defmod Umwelt DOIF ##
attr Umwelt group Aktuell
attr Umwelt room Status,test9
attr Umwelt sortby 01
attr Umwelt uiTable {package ui_Table;;\
  $SHOWNOSTATE=1;;\
  $SHOWNODEVICELINE = "test9|test4";; \
}\
icon_ring ("fuel",[Tankstelle:Diesel],1.10,1.30,120,0,"€",2)|\
temp_hum_ring([Aussensensor:temperature],[Aussensensor:humidity],undef,undef,100)|\
icon_ring ("air",[ESPEasy_Eingang_CO2:PPM],400,1200,120,0,"ppm",0)|\
icon_ring ("Zisterne",([Wasserzisterne]/3.4),0,100,0,120,"%",0)|\
icon_ring ("measure_water_meter",[Wasserverbrauch:heute],0,600,120,0,"l",0)

Ob im Status-Raum oder im test9-Raum, der Hintergrund ist immer da - getestet mit der eingecheckten Version von heute.

[cwagner]

Aber nun kann ich es nachvollziehen. Danke, dass Du Dein Listing eingefügt hattest.

Ergänze ich meine Definition nämlich noch mit $SHOWNOSTATE=1;, dann habe ich vollständige Kreise. Damit verliere ich zwar die neu gelernte Statusanzeige im Heizungsraum mit ring im DevStateIcon. Aber das ist das kleine Übel. $SHOWNODEVICELINE = "Aktuell"; war also nicht signifikant.

Eine weitere Beobachtung brachte mich zum Ziel: Die Hintergründe und die grauen Ringe gehen dann immer noch verloren beim Update der Ringe solange das Attribut  devStateIcon {ui_Table::temp_ring(ReadingsVal("T_Heizung","temperature",0))} gesetzt ist.

Lösche ich dieses Attribut, dann löpt et, wie der Rheinländer so sächt.

Vielen Dank für Deine Geduld

Christian

[xenos1984]

Ich habe da mal mit verschiedenen Styles experimentiert und versucht danach die Transparenz geschickt festzulegen. Besser kommen die Symbole auf dunklen Hintergründen zur Geltung. Wenn man die Transparanz erhöht oder den Hintergrund aufhellt, dann sind bestimmte Farben kaum erkennbar.

Das stimmt allerdings - wenn man helle Farben für Schrift und Icons benutzt. (Ich habe sonst eher dunkle Icons auf hellem Grund im Einsatz.) Ich probiere mal weiter damit herum.

Bezüglich des Icons: Lässt sich das vielleicht automatisch zentrieren / passend skalieren? Oder muss man das bei Bedarf zwangsläufig von Hand machen?

Apropos, die beiden Symbole air und Zisterne (ohne Füllung / Zahlenangabe) sind nicht standardmäßig enthalten, oder? Woher kommen denn die?

[Damian]

Bald kann ich keine Ringe mehr sehen

Ich habe eine neue Version gerade eingecheckt. Ringe sind einheitlich und als Kompromiss 3 Pixel dick, Der graue Randring ist 4 Pixel dick. Damit sollte es besser auf hellem Hintergrund zu sehen sein. Wahrscheinlich sind die bar-Funktionen für einen hellen Hintergrund besser geeignet.

@xenos1984

Wenn ein Icon nicht hineinpasst, dann ist sein Hintergrund größer als das Icon selbst. Das lässt sich über Skalierung und Position anpassen, siehe Doku: https://wiki.fhem.de/wiki/DOIF/uiTable_Schnelleinstieg#Farbskalierte_Feuchtigkeitsanzeige_mit_Hilfe_der_SVG-Funktionen_icon_hum_ring.2Ficon_hum_mring

Fehlende Icons sind selbstgebastelt.

@cwagner

Da hast du wohl eine Kombination erwischt. Offenbar wird durch das Ausblenden der Statuszeile, auch die zuvor gemachte Definition des Ringes über devStatIcon ausgeblendet - das ist ungünstig. Vielleicht finde ich zukünftig eine Lösung dafür.

[Damian]

Ich habe mir die Skalierung der Icons noch mal angeschaut. Es liegt nicht am Hintergrund, sondern an der definierten Größe des Icons. Das Icon wird im Ring in ein Rechteck mit 22x22 Pixeln skaliert. Dazu wird mit viewBox eine Größe definiert. Diese müsste mit der originalen Größe des Icons übereinstimmen, die aber an der Stelle nicht bekannt ist. Die Frage nach der automatischen Skalierung habe ich schon mal hier gestellt:

https://forum.fhem.de/index.php/topic,118329.msg1127687.html#msg1127687

leider ohne Antwort.

Deswegen habe ich den Skalierungsfaktor definiert. Eine automatische Anpassung wäre natürlich besser.

[cwagner]

Bald kann ich keine Ringe mehr sehen

@cwagner
Da hast du wohl eine Kombination erwischt. Offenbar wird durch das Ausblenden der Statuszeile, auch die zuvor gemachte Definition des Ringes über devStatIcon ausgeblendet - das ist ungünstig. Vielleicht finde ich zukünftig eine Lösung dafür.

Mit den Ringen kann ich verstehen: Dieses Projekt erreicht inzwischen Dimensionen, die meist ganze Teams beschäftigen.

Und "meine" Kombination ist ja schon wirklich gemein. Schön, dass es aufgeklärt ist. Ich denke, mit dieser Nebenwirkung kann man leben. Sie ist ja nun bekannt.

Ich wage es kaum zu fragen: In Deinem Beispiel mit der Thermostat-Regelung: Baust Du Doppel-Ringe, die auch "setten" können? Das wäre nämlich aus meiner Sicht die ideale Vollendung: Ein Doppelring, der den Istwert in einem Raum zeigt und gleichzeitig setter für den Sollwert ist, der meine "fetten" Ringe auf Basis von HKnob ablösen könnte? Er zeigte gleichzeitig auch die Differenz zum Wunschwert.

Christian

[Damian]

Mit den Ringen kann ich verstehen: Dieses Projekt erreicht inzwischen Dimensionen, die meist ganze Teams beschäftigen.

Und "meine" Kombination ist ja schon wirklich gemein. Schön, dass es aufgeklärt ist. Ich denke, mit dieser Nebenwirkung kann man leben. Sie ist ja nun bekannt.

Ich wage es kaum zu fragen: In Deinem Beispiel mit der Thermostat-Regelung: Baust Du Doppel-Ringe, die auch "setten" können? Das wäre nämlich aus meiner Sicht die ideale Vollendung: Ein Doppelring, der den Istwert in einem Raum zeigt und gleichzeitig setter für den Sollwert ist, der meine "fetten" Ringe auf Basis von HKnob ablösen könnte? Er zeigte gleichzeitig auch die Differenz zum Wunschwert.

Christian

SVG-Funktionen-Widgets zum Setzen von Werten gibt es noch nicht. Sie dienen lediglich der Anzeige. Ich habe zwar damit angefangen und auch schon erfolgreich einen Ring aus Perl in Javascript übersetzt, aber dann nicht mehr die Geduld aufgebracht es zu Ende zu programmieren.

Naja, nachdem ich mir nun Perl durch FHEM angeeignet habe, werde ich mir wohl durch FHEM auch noch Javascript beibringen müssen - man lernt eben nie aus

SVG-Widgets stehen zumindest auf meiner todo-Liste

[cwagner]

SVG-Widgets stehen zumindest auf meiner todo-Liste

Das freut mich! Bis dahin gehe ich schon mal den ersten Schritt. 1. Doppelring ist nix besonders, Temp/Hum, der 2. Doppelring gibt die Differenz zum Sollwert (12 Uhr wäre, "es passt"; aktuell ist der Raum wärmer als gewünscht) und als zweiten Wert die Öffnung des Ventils (aktuell 1%) und der dritte ist mein fetter Setter für manuellen Override der Planwerte aus dem DI_Clima-Control.

Christian

[jkriegl]

Den Tabellenhintergrund kann ich ändern. Ist es auch möchlich die Farbe im Inneren z.B. eines rings zu ändern - also nicht nur schwarz?