Animating a Color Display

The property Color variables, which certain elements have, is for the color animation of the element. If you assign a variable there, then you can program color changes in the application code or configure a user input that leads to a color change.

Hexadecimal color definition

The display of color is based on the basic colors red, green and blue plus the transparency. The color value can be specified as a hexadecimal color definition in red/green/blue portions in the RGB color space. In addition, one byte is reserved for the degree of transparency.

16#TTRRGGBB

  • TT: byte for the degree of transparency
  • RR: byte for the red portion
  • GG: byte for the green portion
  • BB: byte for the blue portion

One byte is reserved for each color portion for 256 color steps from 16#FF to 16#00. 16#FF means 100% color portion, 16#00 means no color portion. The value for the degree of transparency is 16#FF for fully opaque and 16#00 for transparent.

Attention

There is a setting Activate semi-transparent drawing in the visualization manager. The leading byte of the color definition is evaluated by the visualization as a transparency value only if this setting is activated.

Configuring a visualization element for color animation

  1. Globally declare the color variables, for example dwColorElement and dwRed.

  2. Open the visualization.

  3. Select an element in the visualization editor.

    ⇒

    The view Properties opens.

  4. Configure the property Color variables ‣ Normal state ‣ Fill color with dwColorElement. An input assistant is available for this via 44e4d0c038fb479cc0a8640e01cb05cb_1c1810501108e68bc0a8640e01b2d0e8 .

  5. Configure the property Color variables ‣ Alarm state ‣ Fill color with dwRed.

  6. Program the variable dwColorElement in the application code.

    ⇒

    The element is displayed with the color that the color variable supplies. The color assignment is thus dynamic.

Global declaration of color variables:

VAR_GLOBAL
dwBlue: DWORD := 16#FF0000FF; //Blue, highly opaque
dwGreen: DWORD := 16#FF00FF00; //Green, highly opaque
dwYellow: DWORD := 16#FFFFFF00; //Yellow, highly opaque
dwGrey : DWORD :=16#88888888; //Grey, semitransparent
dwBlack : DWORD := 16#88000000; //Black, semitransparent
dwAlarm: DWORD := 16#FFFF0000;  //Red, highly opaque
END_VAR

Application code:

PROGRAM PLC_PRG
VAR
bInit : BOOL := TRUE;
bChangeColor : BOOL;
dwColorElement : DWORD;
END_VAR

dwColorElement := dwGreen;

IF bChangeColor = TRUE THEN
dwColorElement := dwYellow;
bChangeColor = FALSE;
END_IF

See also