Autor Thema: [Geklärt]Modul erzeugt SVG, Darstellung ist zu klein  (Gelesen 226 mal)

Offline LuBeDa

  • Jr. Member
  • **
  • Beiträge: 99
[Geklärt]Modul erzeugt SVG, Darstellung ist zu klein
« am: 09 September 2017, 16:50:58 »
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
« Letzte Änderung: 10 September 2017, 14:12:24 von LuBeDa »

Offline LuBeDa

  • Jr. Member
  • **
  • Beiträge: 99
Antw:Modul erzeugt SVG, Darstellung ist zu klein
« Antwort #1 am: 09 September 2017, 18:53:56 »
Habe einen Workaraound gefunden, geht das vielleicht auch anders?

<style>
svg {width:100%; height:100%; !important;}
</style>
« Letzte Änderung: 09 September 2017, 19:04:29 von LuBeDa »

Offline rudolfkoenig

  • Administrator
  • Hero Member
  • *****
  • Beiträge: 17267
Antw:Modul erzeugt SVG, Darstellung ist zu klein
« Antwort #2 am: 10 September 2017, 11:03:47 »
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.

Offline LuBeDa

  • Jr. Member
  • **
  • Beiträge: 99
Antw:Modul erzeugt SVG, Darstellung ist zu klein
« Antwort #3 am: 10 September 2017, 14:11:57 »
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

 

decade-submarginal