Einträge im Visualisierungsstil

Im Folgenden werden diejenigen Stileinträge beschrieben, die Sie als Nutzer kennen müssen, um das Aussehen der Visualisierung oder der Elemente zu beeinflussen.

Ein Visualisierungsstil kann grundsätzlich mit dem Visualisierungsstil-Editor bearbeitet werden. Den Editor können Sie im Visualisierungsmanager aufrufen. Wenn dort ein Stil voreingestellt ist, dann können Sie den Editor mit diesem Stil öffnen, um einen neuen (davon abgeleiteten) Stil zu erstellen. So ist es aus unserer Sicht am einfachsten einen eigenen Visualisierungsstil zu erstellen.

Gehen Sie wie folgt vor:

Wählen Sie einen Visualisierungsstil aus, der Ihrem Vorstellungen am nächsten kommt.
Verwenden Sie den Befehl Stil kopieren und bearbeiten im Visualisierungsmanager.
Wählen Sie einen leeren Ordner, bestätigen Sie den Dialog und bearbeiten Sie den Stil im Visualization Style Editor.
Der Visualisierungsstil-Ediotr erscheint. Die Stileinträge finden Sie auf der Registerkarte Stileigenschaften.
Schalten Sie den Einfügemodus mit dem Befehlsicon um.
Der Einfügemodus in der Registerkarte Stileigenschaften ist auf flach gestellt.

Wichtig

Wenn der Einfügemodus auf flach gesetzt ist, können Sie die Stileintragsnamen aus den folgenden Tabellen übernehmen.

Schriftarten

Sie können beliebig viele Schriftarten mit Namen erstellen.

Diese Schriftarten können dann in den Visualisilerungselementeigenschaften in Texteigenschaften Schriftart ausgewählt werden.

Stileintrag	Typ	Beschreibung
Font-Standard	Font	Wird in mehreren Elementen als Standardeinstellung für die Schriftart verwendet
Font-Heading	Font
Tooltip-Font	Font	>= CODESYS Visualization 4.4.0.0 Wird als Schriftart für Tooltips verwendet Hinweis: Aktuell werden nur `FontName` und `FontSize` unterstützt

Stileintrag

Typ

Beschreibung

Font-Standard

Font

Wird in mehreren Elementen als Standardeinstellung für die Schriftart verwendet

Font-Heading

Font

Tooltip-Font

Font

>= CODESYS Visualization 4.4.0.0

Wird als Schriftart für Tooltips verwendet

Hinweis: Aktuell werden nur FontName und FontSize unterstützt

Farben

Farben in RGB-Syntax:

0x<alpha><red><green><blue>

Wenn keine Beschreibung vorhanden ist, sollte der Name des Stileintrags selbsterklärend sein. Es kann eine beliebige Anzahl von Farben mit Namen erstellt werden. Diese Farben können dann ausgewählt werden, wenn in den Eigenschaften eine statische Farbkonfiguration vorgesehen ist.

Stileintrag	Typ	Beschreibung
Visualization-Background-Color	Color	Farbe für den gesamten Hintergrund der Visualisierung und zum Auffüllen in der isotropen Ansicht
Dialog-ModalBackgroundColor	Color	Halbtransparente Farbe, die verwendet wird, um den Hintergrund zu verdunkeln, wenn ein Dialog geöffnet wird
Element-Control-Color	Color	Farbe mit der ein Visualisierungselement (Schaltfläche, Tabelle, Scrollbar, etc.) gefüllt wird
Element-Control-BrightColor	Color	Farbe für Spinbox, Schieberegler, Tabelle
Element-Control-DarkColor	Color	Hintergrundfarbe für Spinbox, Schieberegler, Tabelle
Element-Frame-Color	Color	Rahmenfarbe der meisten Elemente
Element-Fill-Color	Color	Füllfarbe von Elementen (beispielsweise Textfeld)
Element-Background-Color	Color	Hintergrundfarbe für Tabelle, Alarmtable, Alarmbanner, Texteditor
Element-Alarm-Frame-Color	Color	Verwendet in Schaltfläche, Scrollbar, Textfeld, Spinbox
Element-Alarm-Fill-Color	Color	Verwendet in in Schaltfläche, Scrollbar, Textfeld, Spinbox
Element-Alarm-Color	Color	Wird benötigt für die Kompatibilität mit V3.4-Projekten
Element-Table-Grid-Color	Color	Verwendet in Tabelle
Element-Table-SelectionColor	Color	Verwendet in Tabelle
Element-GroupBox-FrameColor	Color	Verwendet in Groupbox
BasicElement-Frame-Color	Color	Verwendet in Rechteck, Polygon, Kreissektor, Line als Standardfarbe für den Rahmen
BasicElement-Fill-Color	Color	Verwendet in Rechteck, Polygon, Kreissektor, Linie als Standardfüllfarbe
BasicElement-Alarm-Frame-Color	Color	Verwendet in Rechteck, Polygon, Kreissektor und Linie als Standardalarmfarbe für den Rahmen
BasicElement-Alarm-Fill-Color	Color	Verwendet in Rechteck, Polygon, Kreissektor und Linie als Standardfüllfarbe bei Alarm
Dialog-HeaderColor	Color	Verwendet in Numpad/Keypad für die Farbe der Kopfzeile
Dialog-ButtonColor	Color	Verwendet in Numpad/Keypad für die Farbe der Schaltflächen
Dialog-BackgroundColor	Color	Verwendet in Numpad/Keypad für die Hintergrundfarbe

Farben ohne Beschreibung

In diesem Abschnitt werden die Farben für einzelne Elemente beschrieben. Wenn Sie die Farben dieser Elemente anpassen möchten, ist es am einfachsten, die Farbnamen zu setzen, den Stil zu installieren und die Wirkung auf das Element innerhalb der Visualisierung zu überprüfen.

Dieser Abschnitt enthält auch Stileinträge, die vom Namen her selbsterklärend sind.

Stileintrag	Typ
Element-Button-FontColor	Color
Element-Selection-Background-Color	Color
Element-Selection-Font-Color	Color
Progressbar-Color	Color
Progressbar-Frame-Color	Color
Element-ComboArray-Selection-Color	Color
Font-Default-Color	Color
Font-Default-BrightColor	Color
Element-Slider-ScaleColor	Color
Element-ComboBoxInteger-Selection-Color	Color
Element-Potentiometer-ScaleColor	Color
Element-Potentiometer-LabelFontColor	Color
Element-Meter-ScaleColor	Color
Element-Meter-LabelFontColor	Color
Element-Meter-ArrowColor	Color
Element-Bar-ScaleColor	Color
Element-Bar-GraphColor	Color
Dialog-ScrollbarColor	Color
Tooltip >= CODESYS Visualization 4.4.0.0
Tooltip-Font-Color	Color
Tooltip-Border-Color	Color
Tooltip-Fill-Color	Color
Visualisierungselement Registerkarten
Element-TabControl-SecondFrameColor	Color
Element-TabControl-BrightColor	Color
Visualisierungselement Histogram
Element-Histogram-Background-FirstColor	Color
Element-Histogram-Background-SecondColor	Color
Visualisierungselement Tabelle
Element-Table-ColumnHeader-Color	Color
Element-Table-Grid-Color	Color
Element-Table-Rows-FirstColor	Color
Element-Table-Rows-SecondColor	Color
Visualisierungselement Scrollbar
Element-Scrollbar-KnobColor	Color
Element-Scrollbar-BackgroundClickColor	Color
Element-Scrollbar-ScrollAreaColor	Color
Element-Scrollbar-ButtonColor	Color
Visualisierungselement Analoge Uhr
Element-Clock-CenterPoint-Color	Color
Element-Clock-Hands-HourHandColor	Color
Element-Clock-Hands-MinuteHandColor	Color
Element-Clock-Hands-SecondsHandColor	Color
Element-Clock-Lines-Color	Color
Element-Clock-Numerics-FontColor	Color
Visualisierungselement Datumsauswahl
Element-DatePicker-MainArea-SelectedDay-FrameColor	Color
Element-DatePicker-MainArea-SelectedDay-FontColor	Color
Element-DatePicker-MainArea-SelectedDay-BackColor	Color
Element-DatePicker-MainArea-OtherMonth-FrameColor	Color
Element-DatePicker-MainArea-OtherMonth-FontColor	Color
Element-DatePicker-MainArea-OtherMonth-BackColor	Color
Element-DatePicker-MainArea-HeaderDay-LineColor	Color
Element-DatePicker-MainArea-HeaderDay-FrameColor	Color
Element-DatePicker-MainArea-HeaderDay-FontColor	Color
Element-DatePicker-MainArea-HeaderDay-BackColor	Color
Element-DatePicker-MainArea-CurrMonth-FrameColor	Color
Element-DatePicker-MainArea-CurrMonth-FontColor	Color
Element-DatePicker-MainArea-CurrMonth-BackColor	Color
Element-DatePicker-MainArea-CurrentDay-FrameColor	Color
Element-DatePicker-MainArea-CurrentDay-FontColor	Color
Element-DatePicker-MainArea-CurrentDay-BackColor	Color
Element-DatePicker-MainArea-Background-FrameColor	Color
Element-DatePicker-MainArea-Background-BackColor	Color
Element-DatePicker-Header-FontColor	Color
Element-DatePicker-Header-BackgroundColor	Color
Element-DatePicker-Header-ArrowPressedColor	Color
Element-DatePicker-Header-ArrowColor	Color
Visualisierungselement Datums-/Uhrzeitauswahl
Element-DateTimePicker-SelectedCell-FrameColor	Color
Element-DateTimePicker-SelectedCell-FontColor	Color
Element-DateTimePicker-SelectedCell-BackColor	Color
Element-DateTimePicker-ElemRect-BackColor	Color
Element-DateTimePicker-Cell-FrameColor	Color
Element-DateTimePicker-Cell-FontColor	Color
Element-DateTimePicker-Cell-BackColor	Color
Element-DateTimePicker-Arrow-ArrowPressedColor	Color
Element-DateTimePicker-Arrow-ArrowColor	Color
Visualisierungselement Zeitbereichsauswahl für Trend-Element
Nur im Stil `Flat style`
Element-TimeSelector-ButtonColor	Color
Element-TimeSelector-ButtonPressedColor	Color
Element-TimeSelector-ButtonFrameColor	Color
`Flat style`, `Basic style`, `White style`
Element-TimeSelector-ButtonPressedFontColor	Color
Visualisierungselement Datumsbereichauswahl
Nur im Stil `Flat style`
Element-DateRangeSelector-ButtonColor	Color
Element-DateRangeSelector-ArrowColor	Color
Element-DateRangeSelector-KnobColor	Color
Element-DateRangeSelector-KnobMarkerColor	Color
Element-DateRangeSelector-KnobMarkerPressedColor	Color
Element-DateRangeSelector-ScrollbarBackgroundColor	Color
Element-DateRangeSelector-ScrollbarBackgroundColorHighlighted	Color
Nur im Stil `White style`
Element-DateRangeSelector-ArrowFrameColor	Color
Element-DateRangeSelector-ArrowPressedFrameColor	Color
Element-DateRangeSelector-ArrowDisabledColor	Color
Element-DateRangeSelector-ArrowDisabledFrameColor	Color
`Flat style`, `Basic style`, `White style` Außerdem `TimeRangeKnobLines Highlighted`
Element-DateRangeSelector-ArrowPressedColor	Color
Sonstige, `Basic style`, `White style`
Element-DateRangeSelector-ScrollbarBackgroundFrameColor	Color
Nur sonstige
Element-DateRangeSelector-ScrollbarBackgroundFrameColorHighlighted	Color
Element-DateRangeSelector-TimeScaleColor	Color
Element-DateRangeSelector-TimeScaleFrameColor	Color
Element-DateRangeSelector-MajorTickMarkColor	Color
Element-DateRangeSelector-MinorTickMarkColor	Color
Element-DateRangeSelector-TimeRangeBorderFrameColor	Color
Element-DateRangeSelector-TimeRangeBorderColorHighlighted	Color
Element-DateRangeSelector-ZoomOutRectangleColor	Color
Element-DateRangeSelector-RubberRectangleColor	Color
Sonstige, `Basic style`, `White style`
Element-DateRangeSelector-TimeRangeBorderFrameColorHighlighted	Color
Element-DateRangeSelector-TimeRangeBorderLinesColor	Color
Element-DateRangeSelector-TimeRangeBorderKnobColor	Color
Element-DateRangeSelector-TimeRangeBorderKnobFrameColor	Color

Bilder

Mit Bilddateien kann das Erscheinungsbild von Steuerelementen wie Zählern, Optionsfeldern, Kontrollkästchen, Lampen und Schaltern verändert werden.

Stileintrag	Typ
RadioButtonUnchecked	Image
RadioButtonChecked	Image
CheckboxUnchecked	Image
CheckboxChecked	Image

Zusätzliche Stileinträge

Stileintrag	Typ	Beschreibung
Style	STRING	Mögliche Einstellungen: `STYLE_WHITE , STYLE_BASIC, STYLE1_XP, STYLE2_W7, STYLE3_GRADIENT1_LINEAR1, STYLE4_GRADIENT2_LINEAR2, STYLE5_GRADIENT3_AXIAL1, STYLE6_GRADIENT4_AXIAL2, STYLE7_GRADIENT5_DOUBLELINEAR1, STYLE8_GRADIENT6_DOUBLELINEAR2, STYLE9_FLAT`
Textfield-Shadow	STRING	`DEEPENED, NONE, RAISED`
Text-Margin-Horizontal	DINT
Text-Margin-Vertical	DINT
Scrollbar-Background-From-Style	DINT	Für Scrollbar: `paint background with element-background-color: 0; use element-color: 1`
Element-Meter-TransparentColor	UDINT
Element-Meter-Meter90-Types	STRING	Beispiel: `Yellow\|Red\|Green\|Blue\|Gray`
Element-Meter-Meter90-Common-ScaleMovement	DINT
Element-Meter-Meter180-Types	STRING	Beispiel: `Yellow\|Red\|Green\|Blue\|Gray`
Element-Meter-Meter180-Common-ScaleMovement	DINT
Element-Meter-Meter360-Types	STRING	Beispiel: `Yellow\|Red\|Green\|Blue\|Gray`
Element-Meter-Meter360-Common-ScaleMovement	DINT
Element-BarDisplayImage-Types	STRING	Beispiel: `Yellow\|Red\|Green\|Blue\|Gray`
Element-Potentiometer-Common-ScaleLength	DINT
Element-Potentiometer-TransparentColor	UDINT
Element-Potentiometer-Potentiometer360-Types	STRING	Beispiel: `Yellow\|Red\|Green\|Blue\|Gray`
RadioButton-HorizontalAlignment	STRING	`LEFT\|HCENTER\|RIGHT`
RadioButton-VerticalAlignment	STRING	`TOP\|VCENTER\|BOTTOM`
Checkbox-HorizontalAlignment	STRING	`LEFT\|HCENTER\|RIGHT`
Checkbox-VerticalAlignment	STRING	`TOP\|VCENTER\|BOTTOM`
ComboBoxInteger-HorizontalAlignment	STRING	`LEFT\|HCENTER\|RIGHT`
ComboBoxInteger-VerticalAlignment	STRING	`TOP\|VCENTER\|BOTTOM`
ComboBoxInteger-ImageHeight	DINT
ComboBoxInteger-ImageWidth	DINT
ComboBoxInteger-ImageOffset	DINT
ComboBoxInteger-HeightRows	DINT
ComboBoxInteger-VisibleRows	DINT
SpinControl-HorizontalAlignment	STRING	`LEFT\|HCENTER\|RIGHT`
SpinControl-VerticalAlignment	STRING	`TOP\|VCENTER\|BOTTOM`
Element-Switch-TransparentColor	UDINT
Element-Switch-DipSwitch-Types	STRING	Beispiel: `Yellow\|Red\|Green\|Blue\|Gray`
Element-Switch-RockerSwitch-Types	STRING	Beispiel: `Yellow\|Red\|Green\|Blue\|Gray`
Element-Switch-RotarySwitch-Types	STRING	Beispiel: `Yellow\|Red\|Green\|Blue\|Gray`
Element-Switch-PowerSwitch-Types	STRING	Beispiel: `Yellow\|Red\|Green\|Blue\|Gray`
Element-Switch-PushSwitch-Types	STRING	Beispiel: `Yellow\|Red\|Green\|Blue\|Gray`
Element-Switch-PushSwitchLed-Types	STRING	Beispiel: `Yellow\|Red\|Green\|Blue\|Gray`
Element-Switch-PushSwitch-UsePushedImage	STRING	`TRUE\|FALSE`
Element-Switch-PushSwitchLed-UsePushedImage	STRING	`TRUE\|FALSE`
Element-Switch-PowerSwitch-UsePushedImage	STRING	`TRUE\|FALSE`
Element-Lamp-TransparentColor	UDINT
Element-Lamp-Lamp1-Types	STRING	Beispiel: `Yellow\|Red\|Green\|Blue\|Gray`
TabControl-HorizontalAlignment	STRING	`LEFT\|HCENTER\|RIGHT`
TabControl-Frame-Border	DINT
TabControl-Text-Frame-Border	DINT
GroupBox-Text-Frame-Border	DINT
Button-Image-Frame	DINT
Button-Absolut-TextOffset-Left	DINT
Button-Absolut-TextOffset-Right	DINT
Button-Absolut-TextOffset-Top	DINT
Button-Absolut-TextOffset-Bottom	DINT
Checkbox-Framesize	UDINT
RadioButton-Framesize	UDINT
RadioButton-Rowheight	UDINT
Element-ComboArray-HeightBox	DINT
TabControl-Frame-Border	DINT
TabControl-Text-Frame-Border	DINT
TabControl-TabHeight	DINT
Element-Meter-Meter90-Common-UnitOffset	DINT
Element-Meter-Meter90-Common-ScaleLength	DINT
Element-Meter-Meter90-Common-OriginOffsetFactor	DINT
Element-Meter-Meter90-Common-NeedleMovement	DINT
Element-Meter-Meter90-Common-LabelOffset	DINT
Element-Meter-Meter360-Common-UnitOffset	DINT
Element-Meter-Meter360-Common-ScaleLength	DINT
Element-Meter-Meter360-Common-OriginalOffset	DINT
Element-Meter-Meter360-Common-NeedleMovement	DINT
Element-Meter-Meter360-Common-LabelOffset	DINT
Element-Meter-Meter180-Common-UnitOffset	DINT
Element-Meter-Meter180-Common-ScaleLength	DINT
Element-Meter-Meter180-Common-OriginOffsetFactor	DINT
Element-Meter-Meter180-Common-NeedleMovement	DINT
Element-Meter-Meter180-Common-LabelOffset	DINT
Element-Potentiometer-Common-UnitOffset	DINT
Element-Potentiometer-Common-ScaleMovement	DINT
Element-Potentiometer-Common-OriginalOffset	DINT
Element-Potentiometer-Common-NeedleMovement	DINT
Element-Potentiometer-Common-LabelOffset	DINT
Dialog-UseHeaderColor	DINT	`1: True`, Farbe aus dem Farbbereich verwenden `0: False`
Visualisierungselement Analoge Uhr
Element-Clock-Positioning-HandSizeFactor	UDINT
Element-Clock-Positioning-LineMovement	UDINT
Element-Clock-Positioning-NumericMovement	UDINT
Element-Clock-Type-Fallback	STRING	Beispiel: `Gray`
Element-Clock-Types	STRING	Beispiel: `Yellow\|Red\|Green\|Blue\|Gray`
Visualisierungselement Datumsauswahl
Element-DatePicker-MainArea-SelectedDay-ShowFrame	UDINT
Element-DatePicker-MainArea-SelectedDay-ShowBack	UDINT
Element-DatePicker-MainArea-SelectedDay-RectType	UDINT
Element-DatePicker-MainArea-SelectedDay-LineWidth	UDINT
Element-DatePicker-MainArea-OtherMonth-ShowOtherM	UDINT
Element-DatePicker-MainArea-OtherMonth-ShowFrame	UDINT
Element-DatePicker-MainArea-OtherMonth-ShowBack	UDINT
Element-DatePicker-MainArea-OtherMonth-RectType	UDINT
Element-DatePicker-MainArea-OtherMonth-LineWidth	UDINT
Element-DatePicker-MainArea-HeaderDay-ShowLine	UDINT
Element-DatePicker-MainArea-HeaderDay-ShowFrame	UDINT
Element-DatePicker-MainArea-HeaderDay-ShowBack	UDINT
Element-DatePicker-MainArea-HeaderDay-RectType	UDINT
Element-DatePicker-MainArea-HeaderDay-LineWidth	UDINT
Element-DatePicker-MainArea-HeaderDay-HeaderLineWidth	UDINT
Element-DatePicker-MainArea-CurrentMonth-ShowFrame	UDINT
Element-DatePicker-MainArea-CurrentMonth-ShowBack	UDINT
Element-DatePicker-MainArea-CurrentMonth-RectType	UDINT
Element-DatePicker-MainArea-CurrentMonth-LineWidth	UDINT
Element-DatePicker-MainArea-CurrentDay-ShowFrame	UDINT
Element-DatePicker-MainArea-CurrentDay-ShowBack	UDINT
Element-DatePicker-MainArea-CurrentDay-RectType	UDINT
Element-DatePicker-MainArea-CurrentDay-LineWidth	UDINT
Element-DatePicker-MainArea-Background-ShowBack	UDINT
Element-DatePicker-Header-ShowBackground	UDINT
Element-DateTimePicker-SelectedCell-ShowFrame	UDINT
Element-DateTimePicker-SelectedCell-ShowBackground	UDINT
Element-DateTimePicker-SelectedCell-RectangleType	UDINT
Element-DateTimePicker-SelectedCell-FrameWidth	UDINT
Element-DateTimePicker-ElementRect-ShowBackground	UDINT
Element-DateTimePicker-Cell-ShowFrame	UDINT
Element-DateTimePicker-Cell-ShowBackground	UDINT
Element-DateTimePicker-Cell-RectangleType	UDINT
Element-DateTimePicker-Cell-FrameWidth	UDINT
Element-DateTimePicker-Arrow-ShowArrow	UDINT
Visualisierungselement Scrollbar
Scrollbar-Background-From-Style	DINT
Element-Scrollbar-OnlyKnob	DINT	Das neue Erscheinungsbild für den Scrollbalken (Bildlaufleiste) wurde für die folgenden Stile implementiert: `Flat style` `White style` `Basic style` Der neue Scrollbar hat dann keine Schaltflächen für den Bildlauf nach oben/unten/links/rechts. Außerdem gibt es auf dem Drehknopf keine Markierung. Der Drehknopf ist breiter/höher als der Hintergrund des Scrollbars. Die in den Eigenschaften voreingestellte Breite/Höhe der Scrollbars ergibt die Breite/Höhe des Drehknopfes. Hinweis: Das neue Erscheinungsbild kann durch die Einstellung `Element-Scrollbar-OnlyKnob` auf <> 0 im Visualisierungsstil aktiviert werden.
Element-Scrollbar-Knob-RoundRectRadius	DINT
Element-Scrollbar-Knob-FixedLength	DINT
Tooltip
Tooltip-Border-Width	UDINT
Visualisierungselement Rechteck
Visualisierungselement Abgerundetes Rechteck
Element-RoundRect-Radius	DINT	Der Radius des abgerundeten Rechtecks
Visualisierungselement Histogram
Element-Histogram-Opaque-Background	STRING	`TRUE\|FALSE`

In diesem Abschnitt:

Einträge im Visualisierungsstil

Wichtig

Schriftarten

Farben

Farben ohne Beschreibung

Bilder

Zusätzliche Stileinträge

Suchresultat