Probleme bei SVG Grafiken für Statusrad

[Sargon]

Hallo zusammen,

ich will auf meiner Visu ein Statusrad anzeigen das für jedes Familienmitglied, in einem der Kreissegmente, den jeweiligen aktuellen Status anzeigt. Zudem soll der Status für das Haus angezeigt werden. Siehe Beispiel aus Fhem allerdings benötige ich 5 Kreissegmente:

Statusrad.JPG
Die Idee ist die einzelnen Kreissegmente entweder als Bild oder als Bestandteil eines Fonds anzuzeigen und dann das entsprechenden Kreissegment je Status einzufärben. Ich bekomme das aber mit den .svg Dateien nicht hin die so zu formatieren damit das funktioniert. Entweder wird es überhaupt nicht angezeigt oder nicht eingefärbt.


Hier meine aktuellen SVGs (Weiß auf Weißem Grund) mein Hintergrund ist dunkel deshalb weiß:
SVG.zip

Gruß
Thomas

[Roland81]

Die SVGs werden quasi als Bild eingefügt, dahr lässt sich die Farbe nicht ändern.
Ich würde das Kreissegment in den benötigten Farben als Bild ablegen und dann über dynamische Designs das jeweilige Bild aufrufen.

[Glotzkowski]

Spannend fände ich in diesem Zusammenhang wie Du die gezeigten Stati überhaupt ermittelst?

[mywap]

Hallo Thomas,

Du musst den Stil definieren. Z.B. so:

style="stroke:#ff0000;stroke-opacity:1;fill:#ff0000;fill-opacity:1"

das #ff0000 ist der Farbwert für Rot. Einmal für die Umrandung und dann für die Füllung.

So könnte das dann insgesamt aussehen. Dein 4-5.svg

<svg id="Ebene_4" data-name="Ebene 4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600"><defs><style>.cls-1{fill:none;stroke:#fff;stroke-miterlimit:10;}</style></defs><title>4-5</title><path id="_4_" data-name="&lt;4&gt;" class="cls-1" d="M484.91,275.3l132.16-43.07A230,230,0,0,0,398.19,73.5l.12,139A91,91,0,0, 1,484.91,275.3Z"
style="stroke:#ff0000;stroke-opacity:1;fill:#ff0000;fill-opacity:1"
/></svg>

.

Du kannst dann das jeweilige Bild per dyn. Design in Abhängigkeit von einem iKO anzeigen lassen.

Hoffe das hilft.
Grüße
Frank

[Sargon]

Danke für die Antworten.

Ich bekomme es leider nicht hin.
Ich habe die SVG Konfiguration in meinem Kreissegment ausgetauscht und in Edomi importiert. Zudem die Konfiguration aus meiner Einzel Anwesenheitsanzeige kopiert. -> es funktioniert nicht.

Kreissegment.JPGDynamisch.JPGKO.JPG

Der Status des KOs ist 1 und eigentlich sollte dann das Kreissegment in Grün angezeigt werden.

[HeMichael]

wie sieht denn das dyn-desing aus?

[Sargon]

Sorry, das habe ich vergessen mit hoch zu laden.
Dynamisch.JPG

[Roland81]

Bitte korrigiert mich wenn ich falsch liege, aber ein SVG als Bild einfügen und dann in der Laufzeit zu manipulieren funktioniert nicht.
https://knx-user-forum.de/forum/proj...5-svg-in-edomi

[Sargon]

Ich hab jetzt die svg Images in einen Fond eingebunden und damit funktioniert es.

Danke

[MrIcemanLE]

Sargon hättest du Lust das ganze Mal mit ein paar Screenshots vorzustellen: Zeigt her eure Visus? Klingt nach einem interessanten Visudetail

[mywap]

Du hättest die verschieden farbigen svg hochladen müssen und dann jeweils als bild nehmen müssen. Zb. Seg4_grün.svg, Seg4_weiss.svg. Die Veränderung über Vordergrundgarbe geht nicht, wie bereits oben festgestellt.

Grüsse
Frank

[MrIcemanLE]

die verschieden farbigen svg hochladen müssen

Wenn man ein einfarbiges (z.B. rotes) svg/png hat, kann man mit der CSS-Eigenschaft "filter" sehr gut die Farben einstellen und sogar auf weiß umstellen:

filter: hue-rotate(90deg)

oder

filter: contrast(175%) brightness(3%)

oder
...

So würde man nur ein PNG benötigen und könnte dies per dyn. Design anpassen. Nur von weiß auf farbig geht nicht mit CSS.

[Sargon]

So ich habe jetzt die erste Version meines Haus Status Rades fertig. Im Moment habe ich nur die Status Abwesend, Anwesend und Schlafend. Später soll mindestens noch in Urlaub dazu kommen. Abwesend wird über das eingeloggt sein des jeweiligen Handys in der Fritzbox erkannt, was allerdings nur bei den Erwachsenen funktioniert. Wie ich das bei den Kindern mache weis ich noch nicht. Schlafend wird später (sind noch im Rohbau des Umbaus) durch einen Schalter am Bett geschaltet.

Statusrad.JPG
Das ganze ist allerdings schon ein Gebastel da die einzelnen Kreissegmente alle von Hand positioniert sind was auch für die weißen Rahmen gilt.

Statusrad_Aufbau.JPGAnwesenheit.JPG