KnobConfig

Für die Darstellung des Sliders lässt sich eine andere Grafik wählen.

Es muss der Pfad der Bilddatei sowie die Anzeigegröße des Bildes angegeben werden. Weiterhin kann der Versatz des "Ankerpunktes" festgelegt werden. So kann das Bild korrekt bezüglich des Wertebalkens positioniert werden.

Beachten Sie, dass eine SVG-Datei einen eigenen Viewport öffnet und daher im Normalfall das Seitenverhältnis nicht verändert werden kann.

Auch teiltransparente Bilder im PNG und SVG Format werden unterstützt. Bei Pixelgrafiken (PNG, JPG) ist zu beachten, dass die Attribute KnobColor und KnobArrowsColor keine Auswirkungen haben. Wird ein SVG genutzt, kann die Farbdefinition greifen, wenn das SVG entsprechend vorbereitet wird.

Beim Laden wird folgende Zeichenersetzung im SVG durchgeführt:

• {KnobColorStroke} wird bei gesetzter KnobColor ersetzt durch "stroke:" gefolgt von der KnobColor als CSS Farbe, ansonsten entfernt
• {KnobColorFill} wird bei gesetzter KnobColor ersetzt durch "fill:" gefolgt von der KnobColor als CSS Farbe, ansonsten entfernt
• {KnobColorGradientDefinition} wird, wenn KnobColor eine LinearGradientColor ist, ersetzt durch ein passendes SVG <linearGradient> Element als String, ansonsten entfernt
• {KnobArrowsColorStroke} wird bei gesetzter KnobArrowsColor ersetzt durch "stroke:" gefolgt von der KnobArrowsColor als CSS Farbe, ansonsten entfernt
• {KnobArrowsColorFill} wird bei gesetzter KnobArrowsColor ersetzt durch "fill:" gefolgt von der KnobArrowsColor als CSS Farbe, ansonsten entfernt
• {KnobArrowsColorGradientDefinition} wird, wenn KnobArrowsColor eine LinearGradientColor ist, ersetzt durch ein passendes SVG <linearGradient> Element als String, ansonsten entfernt

Beispiel SVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="40" height="40">
    <defs>{KnobColorGradientDefinition}</defs>
    <circle r="18px" cx="20px" cy="20px"
        style="stroke-width:3px;{KnobColorFill}{KnobArrowsColorStroke}"></circle>
    <path d="M 18 11 L 16 11 L 7 20 L 16 29 L 18 29 L 18 27 L 11 20 L 18 13 Z"
        style="stroke:none;{KnobArrowsColorFill}"></path>
    <path d="M 22 13 L 24 11 L 33 20 L 24 29 L 22 29 L 22 27 L 29 20 L 22 13 Z"
    style="stroke:none;{KnobArrowsColorFill}"></path>
</svg>

Schema: tchmi:framework#/definitions/KnobDefinition

Herkunft: Radial Gauge

Verfügbar ab Version 1.10