Skip to main content

Animating a Color Display

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 list box or a color in the color dialog.

The Color variables element property is used for the color animation of the element. When you pass variables to the properties, 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

Important

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 a 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.

<TT>

Byte for the transparent graduation of 00-FF

<RR>

Byte for the red portion of 00-FF

<GG>

Byte for the green portion of 00-FF

<BB>

Byte for the blue portion of 00-FF

Example 10. Example
Table 2. Color literal

16#FF0000FF

Blue, opaque

16#FF00FF00

Green, opaque

16#FFFFFF00

Yellow. opaque

16#88888888

Gray, semitransparent

16#88000000

Black, semitransparent

16#FFFF0000

Red, opaque





Example 11. Example

Global declaration of color constants



Animating a visualization element in color

  1. Create a standard project in CODESYS.

  2. 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                                
  3. 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                                
  4. Declare a control variable.

    bChangeColor : BOOL;
  5. Declare an input variable in PLC_PRG.

    bInput : BOOL;
  6. Enable the visualization editor.

  7. Drag a Rectangle element to the visualization editor.

    The Properties view of the element opens.

  8. Configure the properties of the rectangle as follows:

    • Color variables, Normal state, Filling color property: PLC_PRG.dwFillColor

    • Color variables, Normal state, Frame color property: PLC_PRG.dwFrameColor

    • Color variables, Alarm state, Filling color property: PLC_PRG.dwAlarmColor

    • Color variables, Toggle color property: <toggle/tap variable>

    • Input configuration, Toggle, Variable property: PLC_PRG.bInput

  9. 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 bChangeColor is then forced to TRUE, the color display of the rectangle changes. When the rectangle is clicked in the visualization, the rectangle is displayed in alarm colors.