Pages

Drehbares Balkendiagramm（Rotating Bargraph）

Das Rotating Bargraph ist ein dynamisches Anzeige-Widget, das die Eigenschaften eines herkömmlichen Balkendiagramms mit einer Rotationsfunktion kombiniert.
Neben der Darstellung eines Werts über einen Balken enthält es ein rotateGroup-Element, das sich entsprechend dem aktuellen Wert dreht – ideal für Anwendungen wie Kompassanzeigen, Azimut-Indikatoren oder Schiffsinstrumente.

Übersicht

Wie das klassische Custom Bargraph zeigt das Rotating Bargraph Echtzeitdaten in Form eines Balkens, ergänzt um Werte, Einheiten und Schwellen.
Durch die zusätzliche Rotationsfunktion können Winkel- oder Richtungswerte anschaulich visualisiert werden.

Hauptfunktionen

Rotierende Darstellung

  • Enthält ein rotateGroup-SVG-Element, das sich entsprechend dem Live-Wert dreht
  • Optimal für Richtungsdaten wie Kompasskurs, Windrichtung oder Radarwinkel

Balkenanzeige

  • Zeigt einen horizontalen oder vertikalen Balken entsprechend des aktuellen Werts
  • Unterstützt Schwellenwerte, Alarme und Zwischenmarkierungen

Live-Datenbindung

  • Anbindung an Datenquellen wie CODESYS oder MQTT
  • Rotation und Balken können an denselben oder verschiedene Variablen gebunden werden

Numerische Anzeige & Einheit

  • Optionale Anzeige des aktuellen Werts mit Einheit (z. B. °, N, RPM)
  • Ergänzt visuelle Darstellung um exakte Zahleninformation

Benutzerdefinierte Gestaltung

  • Farbschema, Beschriftungen und Stil vollständig anpassbar
  • Unterstützt metrische und symbolische Daten gleichermaßen

Einsatzszenarien

  • Beispiel: Anzeige von Kursrichtung, Ruderlage oder Windrichtung

Industrielle Überwachung

  • Beispiel: Anzeige von Drehpositionen mechanischer Bauteile wie Ventile oder Drehteller

Orientierungsrückmeldung

  • Beispiel: Winkelrückmeldung aus Gyroskopen oder Kompasssensoren visualisieren

SVG ID Referenztabelle

[img_1]

Nutze die folgenden SVG-IDs zur Zuordnung von Variablen im Rotating Bargraph:

# Element SVG ID
1 Balkenpfad [code_block_2]
2 Balkenfüllung [code_block_3]
3 Thumb / Zeiger [code_block_4]
4 Rotationsursprung (Gruppe) rotateGroup

Codebeispiel（Code Snippet Example）

[code_block_6]
rotateGroup