[Geklärt]Modul erzeugt SVG, Darstellung ist zu klein

Begonnen von LuBeDa, 09 September 2017, 16:50:58

Vorheriges Thema - Nächstes Thema

LuBeDa

Hallo,

ich arbeite gerade an einem Modul, das in der normalen Weboberfläche eine größere SVG anzeigen soll. Ich habe es mit der Google Chart API versucht, aber auch mit highcharts.
Also unabhängig von der verwendeten Bibliothek wird meine SVG immer sehr klein angezeigt.

Ich denke es liegt an diesem Eintrag in der /fhem/pgm2/style.css

/* ==============     SVG      ============== */
svg      { height:32px; width:32px; fill:#1c7efb; vertical-align:middle; margin:2px 0; }

Wie kann ich diese Skalierung umgehen? Der EMBED Weg kommt für ein Modul nicht in Frage, glaube ich.

Gibt es Ideen oder Hinweise was ich noch machen könnte.

Mein TEST Code eingebunden als Weblink. Die SVG wird erzeugt aber zu klein dargestellt.

sub BuienradarasSVG($) {
return <<'END_MESSAGE';
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="Buienradar"></div>
<script>
Highcharts.chart('Buienradar', {
    chart: {
        type: 'column',
        background: "green",
        className: "icon"
    },
    title: {
        text: 'Niederschlag'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Population',
        data: [
            ['Istanbul', 14.2],
            ['Karachi', 14.0],
            ['Mumbai', 12.5],
            ['Moscow', 12.1],
            ['São Paulo', 11.8],
            ['Beijing', 11.7],
            ['Guangzhou', 11.1],
            ['Delhi', 11.1],
            ['Shenzhen', 10.5],
            ['Seoul', 10.4],
            ['Jakarta', 10.0],
            ['Kinshasa', 9.3],
            ['Tianjin', 9.3],
            ['Tokyo', 9.0],
            ['Cairo', 8.9],
            ['Shanghai', 23.7],
            ['Lagos', 16.1]
        ],
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#3388FF',
            align: 'right',
            format: '{point.y:.1f}', // one decimal
            y: 10, // 10 pixels down from the top
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    }]
});
</script>
END_MESSAGE
}



Screenshot: siehe Anhang

LuBeDa

#1
Habe einen Workaraound gefunden, geht das vielleicht auch anders?


<style>
svg {width:100%; height:100%; !important;}
</style>


rudolfkoenig

Eigentlich muesste man alle FHEM-SVG-Icons rueckwirkend mit einer CSS-Klasse versehen, und die Groessenangabe im style.css ueber diese Klasse machen.

Ich wuerde deinem SVG eine Klasse geben, und den CSS Regel in deinem Workaround mit svg.Klasse spezifizieren.
Damit ist !important nicht noetig, und erlaubt es einem externen CSS mit !important oder detaillierteren CSS-Regel deine Parameter zu ueberschreiben.

LuBeDa

Hallo,
das mit den speziellen Style für die SVG-Icons würde ich gerne als Feature Request für die 5.9er formulieren.

Bei Highcharts kann man eine ID für die erzeugte SVG vergeben und bekommt es damit hin. Mein Favorit ist aber momentan die Google Charts API. Damit kann man die erzeugte SVG in eine inline-PNG-Datei wandeln. Das ist derzeit die cleverste Variante.

Jetzt kümmere ich mich mal um ein FTUI-Widget.

Dann werde ich wahrscheinlich mein Modul veröffentlichen.


Ludger