76_SolarForecast - Informationen/Ideen zu Weiterentwicklung und Support

[schwatter]

Meine Lösung für meine Powerflow/ Energyflow ist jetzt folgende:

Code Auswählen Erweitern

    use URI::Escape;
 
    foreach my $entry (@icons) {
        my ($icon_raw, $id, $fill, $should_process) = @$entry;
        next unless $should_process && $icon_raw;
        my $raw = $icon_raw;
        my $icon;

        if ($raw =~ s/:fhem$//) {
            $icon = FW_makeImage("$raw\@$fill");
            next unless defined $icon && $icon ne '';
            if ($icon =~ /<svg[^>]*>/) {
                my $svg_tag = $&;
                $svg_tag =~ s/\bwidth\s*=\s*"[^"]*"//i;
                $svg_tag =~ s/\bheight\s*=\s*"[^"]*"//i;
                my ($x,$y,$w,$h) = (0,0,100,100);
                if ($svg_tag =~ /viewBox\s*=\s*"([\d\.\-]+)\s+([\d\.\-]+)\s+([\d\.\-]+)\s+([\d\.\-]+)"/i) {
                    ($x,$y,$w,$h) = ($1,$2,$3,$4);
                } else {
                    $svg_tag =~ s/<svg\b/<svg viewBox="0 0 100 100"/i;
                }
                my $scale = 20 / ($w > $h ? $w : $h);
                my $offset_x = (20 - $w * $scale) / 2 - $x * $scale + 2;
                my $offset_y = (20 - $h * $scale) / 2 - $y * $scale + 2;
                $svg_tag =~ s/<svg\b/<svg class="icon"/ unless $svg_tag =~ /class=/;
                $svg_tag =~ s/<svg\b/<svg width="20" height="20"/i;
                $icon =~ s{<svg[^>]*>}{$svg_tag};
                $icon =~ s{(<svg[^>]*>)}{$1<g transform="translate($offset_x,$offset_y) scale($scale)">}i;
                $icon =~ s{</svg>}{</g></svg>}i;

                # --- alle <path> einfärben ---
                $icon =~ s/<path(?![^>]*fill)/<path fill="$fill"/g;
            }
        } else {
            $icon = uri_unescape($raw);
            $icon =~ s/fill="[^"]*"/fill="$fill"/g;
            $icon =~ s/<path(?![^>]*fill)/<path fill="$fill"/g;
            next unless defined $icon;
        }

        my $inner = "";
        if ($icon =~ m{<svg[^>]*>(.*)</svg>}s) {
            $inner = $1;
        } else {
            $inner = $icon;
        }

        $svg =~ s{<g id="$id"([^>]*)>}{<g id="informId_ringSVG:$id"$1>$inner};
    }

Damit kann ich FhemSVG skalieren und einfärben, sowie SVG Data-URL verwursten.
Vielleicht hilft das. Mal sehen ob es dabei bleibt, vielleicht gibt es auch eine
Lösung einfach per CSS.

Gruß schwatter

[DS_Starter]

Danke dir! Schaue ich mir an wie das bei mir reinpasst.

LG