Ankündigung

Einklappen
Keine Ankündigung bisher.

Probleme bei SVG Grafiken für Statusrad

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    Probleme bei SVG Grafiken für Statusrad

    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


    #2
    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.

    Kommentar


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

      Kommentar


        #4
        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

        Kommentar


          #5
          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.

          Kommentar


            #6
            wie sieht denn das dyn-desing aus?

            Kommentar


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

              Kommentar


                #8
                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

                Kommentar


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

                  Danke

                  Kommentar


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

                    Kommentar


                      #11
                      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

                      Kommentar


                        #12
                        Zitat von mywap Beitrag anzeigen
                        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:
                        Code:
                        filter: hue-rotate(90deg)
                        oder
                        Code:
                        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.
                        Gruß
                        Stefan

                        Kommentar


                          #13
                          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

                          Kommentar

                          Lädt...
                          X