SVG-Grafiken mit dynamischen Inhalt (FHEM/01_FHEMWEB.pm; FW_makeImage)

[habeIchVergessen]

Hallo zusammen,

ich habe eine Windfahne als SVG-Grafik zusammengebastelt.
Im u.g. Beispiel müsste nur das 'transform="rotate(90 16 16)"' in 'transform="rotate(270 16 16)"' geändert werden, damit ein Ausrichtung nach Westen herauskommt. Aktuell habe ich die Grafik unter mehrenen Namen speichern müssen, damit verschiedene Richtungen angezeigt werden.

Notwendige Voraussetzung
Einfacher wäre natürlich die Ersetzung in FHEM/01_FHEMWEB.pm, SUB FW_makeImage (äquivalent zur Farbe).
Es geht auch noch ein Spur eleganter mit Java-Script (s. Beispiel Temperatur). Benötigt dann aber noch mehr Anpassungen (SVG-Grafiken müssten durchnummeriert werden; Stichwort Referenzierung in Java-Script per id-Attribut).

Beispiel Richtung Osten

Code Auswählen Erweitern


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="468pt" height="467pt" viewBox="0 0 32 32"
preserveAspectRatio="xMidYMid meet">
<metadata>
</metadata>
<defs>
        <line id="scale" x1="16" y1="1" x2="16" y2="2.5" stroke-width="0.75" />
        <line id="subscale" x1="16" y1="1.5" x2="16" y2="2" stroke-width="0.5" />
        <g id="rose" stroke-width="0.1" style="fill-opacity:0.4;stroke-opacity:0.4">
                <path d="M16,16 16,4 17.77,14.23 19.2,14.48 20.6,11.4 17.77,14.23 16,16" fill="white" />
                <path d="M16,16 28,16 17.77,14.23 17.52,12.8 20.6,11.4 17.77,14.23 16,16" fill="black" />
        </g>
</defs>
<g font-size="4" style="fill-opacity:0.75;stroke-opacity:0.75" fill="black">
        <text x="14.6" y="3.5">N</text>
        <text x="28.75" y="17.2">O</text>
        <text x="15" y="31.5">S</text>
        <text x="0" y="17.2">W</text>
</g>
<!-- rose -->
<g id="rose" style="fill-opacity:0.6;stroke-opacity:0.6" stroke="black" stroke-linecap="round" >
        <use transform="rotate( 45 16 16)" xlink:href="#scale" />
        <use transform="rotate(135 16 16)" xlink:href="#scale" />
        <use transform="rotate(225 16 16)" xlink:href="#scale" />
        <use transform="rotate(315 16 16)" xlink:href="#scale" />
        <use transform="rotate( 22.5 16 16)" xlink:href="#subscale" />
        <use transform="rotate( 67.5 16 16)" xlink:href="#subscale" />
        <use transform="rotate(112.5 16 16)" xlink:href="#subscale" />
        <use transform="rotate(157.5 16 16)" xlink:href="#subscale" />
        <use transform="rotate(202.5 16 16)" xlink:href="#subscale" />
        <use transform="rotate(247.5 16 16)" xlink:href="#subscale" />
        <use transform="rotate(292.5 16 16)" xlink:href="#subscale" />
        <use transform="rotate(337.5 16 16)" xlink:href="#subscale" />
        <use transform="rotate(  0 16 16)" xlink:href="#rose" />
        <use transform="rotate( 90 16 16)" xlink:href="#rose" />
        <use transform="rotate(180 16 16)" xlink:href="#rose" />
        <use transform="rotate(270 16 16)" xlink:href="#rose" />
</g>
<!-- needle -->
<g id="needle" stroke-linecap="round" stroke-width="1" stroke="green" style="fill-opacity:0.8;stroke-opacity:0.6" transform="rotate(90 16 16)">
        <path d="M16,23 16,3 10,26 A 15,7.5 0 0 1 16,23" fill="white" />
        <path d="M22,26 16,3 16,23 A 15,7.5 0 0 1 22,26" fill="green"/>
</g>
</svg>


Beispiel Temperatur mit Java-Script

Code Auswählen Erweitern


<svg width="32" height="32" viewbox="0 0 105 105" onload="
{
       val=25;
       id=2;
       function data(elem)
       {
             elem.setAttribute('offset', (val+20)/0.7 + '%');
             if (elem.id == 'temp1_' + id)
             {
                    color='#40FF40';
                    if (val <= 5) color='#0080FF';
                    if (val <= -5) color='#0040FF';
                    if (val <= -10) color='#0000FF';
                    if (val >= 10) color='#40FF40';
                    if (val >= 15) color='#80FF80';
                    if (val >= 25) color='#E0E000';
                    if (val >= 30) color='#FFC000';
                    if (val >= 35) color='#FF6060';
                    if (val >= 40) color='#FF0000';
                    elem.setAttribute('stop-color', color);
             }
       }
       data(evt.target.getElementById('temp1_' + id));
       data(evt.target.getElementById('temp2_' + id));

       var elem=evt.target.getElementById('text_' + id);
       elem.removeChild(elem.firstChild);
       elem.appendChild(createTextNode(val + '&deg'));
}" >
<defs>
       <!-- in Prozent -20 bis 50 °C => (Temperatur + 20) / 70 -->
       <linearGradient id="gradTemp.2" x1="0%" y1="72.5%" x2="0%" y2="4.5%">
             <stop id="temp1_2" offset="15%" stop-color="#00FF40" />
             <stop id="temp2_2" offset="15%" stop-color="#FFFFFF" />
       </linearGradient>
</defs>
<path d="M10,0 h 15 v 75 a15,15 0 1 1 -15,0 z M25,70 h -1 M25,65 h -2 M25,60 h -1 M25,55 h -5 M10,55 h 5 M25,50 h -1 M25,45 h -2 M25,40 h -1 M25,35 h -2 M25,30 h -1 M25,25 h -2 M25,20 h -1 M25,15 h -2 M25,10 h -1 M25,5 h -2" fill="url(#gradTemp.2)" stroke="black" />
<text id="text_2" x="100" y="40" style="font-size: 3em; font-weight: bold; text-anchor: end;" >&degC</text>
</svg>


[habeIchVergessen]

@pah: Bezugnehmend auf Neues Modul 70_XSLT.pm in Arbeit ist eine Anpassung des Modules FHEMWEB eventuell ein Zwischenschritt.
PS: Leider kann unter Ankündigungen nicht jeder antworten.