The colors of an element are specified in the “Colors” properties of the element properties. There you can select either a predefined style color from the selection list or a color in the color dialog.
The “Color variables” element property is used for the color animation of the element. If you pass variables
to the properties, then you can program color changes in the application code or configure
a user input that results in a color change. A color constant or color variable in
the code has the data type DWORD and is encoded according to the RGB color space or RGBA extension.
Color definition in RGBA color space
NOTICE
The “Activate semi-transparent drawing” option is provided in the Visualization Manager. This option is enabled by default so that the “Transparency” property is available for all color definitions. With programmatic color definition, the leading byte is interpreted as an alpha channel and therefore used as the transparency value of the color. When the option is cleared, the “Transparency” property is not available and the leading byte is ignored in color literals.
Color information in the code is specified as DWORD literals. The value is in the RGBA color space and is usually shown as a hexadecimal
number. The value is coded with additive portions of red, green, and blue. It is appended
with the alpha channel which determines the transparency of the color.
Byte order of a color literal
16#<TT><RR><GG><BB> <TT> : 00 - FF // Transparency in 256 levels <RR> : 00 - FF // Red in 256 levels <GG> : 00 - FF // Green in 256 levels <BB> : 00 - FF // Blue in 256 levels
The graduation value for transparency is 16#FF for opaque and 16#00 for transparent. For each color portion, one byte is reserved for 256 color graduations
16#FF to 16#00. 16#FF means 100% color portion and 16#00 means 0% color portion.
|
|
Byte for the transparent graduation of |
|
|
Byte for the red portion of |
|
|
Byte for the green portion of |
|
|
Byte for the blue portion of |
Example
|
|
Blue, opaque |
|
|
Green, opaque |
|
|
Yellow. opaque |
|
|
Gray, semitransparent |
|
|
Black, semitransparent |
|
|
Red, opaque |
Example
Global declaration of color constants
VAR_GLOBAL CONSTANT c_dwBLUE : DWORD := 16#FF0000FF; // Highly opaque c_dwGREEN : DWORD := 16#FF00FF00; // Highly opaque c_dwYELLOW : DWORD := 16#FFFFFF00; // Highly opaque c_dwGREY : DWORD :=16#88888888; // Semitransparent c_dwBLACK : DWORD := 16#88000000; // Semitransparent c_dwRED: DWORD := 16#FFFF0000; // Highly opaque END_VAR
Animating a visualization element in color
-
Create a standard project in CODESYS.
-
Declare global color constants in the POU tree.
{attribute 'qualified_only'} VAR_GLOBAL CONSTANT gc_dwRed : DWORD := 16#FFFF0000; gc_dwGreen: DWORD := 16#FF00FF00; gc_dwYellow: DWORD := 16#FFFFFF00; gc_dwBlue: DWORD := 16#FF0000FF; // Highly opaque gc_dwBlack : DWORD := 16#88000000; // Semitransparent END_VAR -
In the device tree, declare local color variables in
PLC_PRG.VAR dwFillColor: DWORD := GVL.gc_dwGreen; dwFrameColor : DWORD := GVL.gc_dwBlack; dwAlarmColor : DWORD := GVL.gc_dwRed; END_VAR
-
Declare a control variable.
bChangeColor : BOOL;
-
Declare an input variable in
PLC_PRG.bInput : BOOL;
-
Enable the visualization editor.
-
Drag a “Rectangle” element to the visualization editor.
The “Properties” view of the element opens.
-
Configure the properties of the rectangle as follows:
-
Property “Color variables”, “Normal state”, “Filling color”:
PLC_PRG.dwFillColor -
Property “Color variables”, “Normal state”, “Frame color”:
PLC_PRG.dwFrameColor -
Property “Color variables”, “Alarm state”, “Filling color”:
PLC_PRG.dwAlarmColor -
Property “Color variables”, “Toggle color”:
<toggle/tap variable> -
Property “Input configuration”, “Toggle”, “Variable”:
PLC_PRG.bInput
-
-
Program the variables as follows:
PROGRAM PLC_PRG VAR dwFillColor: DWORD := GVL.gc_dwGreen; dwFrameColor : DWORD := GVL.gc_dwBlack; dwAlarmColor : DWORD := GVL.gc_dwRed; bChangeColor : BOOL; bInput : BOOL; END_VAR IF bChangeColor = TRUE THEN dwFillColor := GVL.gc_dwYellow; dwFrameColor := GVL.gc_dwBlue; ELSE dwFillColor:= GVL.gc_dwGreen; dwFrameColor := GVL.gc_dwBlack; END_IF
The colors are initialized at runtime. If the variable
bChangeColoris then forced toTRUE, the color display of the rectangle changes. When the rectangle is clicked in the visualization, the rectangle is displayed in alarm colors.