Autor Thema: SVG-Grafiken mit dynamischen Inhalt (FHEM/01_FHEMWEB.pm; FW_makeImage)  (Gelesen 1186 mal)

Offline habeIchVergessen

  • Sr. Member
  • ****
  • Beiträge: 755
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
<?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
<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>

Offline habeIchVergessen

  • Sr. Member
  • ****
  • Beiträge: 755
@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.