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
Habe einen Workaraound gefunden, geht das vielleicht auch anders?
<style>
svg {width:100%; height:100%; !important;}
</style>
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.
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