Gradients, transparency and graphics in objects

Many objects in PLC-Lab can be assigned color gradients and their own graphics. This allows the user to design them highly individually.

In this section we will show how to e.g. use color gradients in objects to make their appearance more realistic, for example. We will also show you how to adjust the opacity of the colors (and with it, the transparency). Finally we will explain how you can display your own pictures or graphics in objects.

Setting color gradients in objects

Color gradients can be used to give objects realistic appearance. For example, a rectangle can be designed with color gradients so that it looks like a metal bar. You can change the color of a geometric object in the section "Main settings -> Appearance -> Colors". There are two properties for the fill color. The property "Fill color" is the color used in the object if no operand for switching the fill color is specified or if this operand has the status '0'. In the property "Fill color status 1" the color is defined which is used when the operand has the status '1' in the property "Operand switching fill color".

Example

In the following example, the appearance of a metal bar is to be given to a rectangular object. You can do this by using a color gradient.

Follow the steps below to do this:

  1. Select the object.
  2. In the property "Fill color", call the dialog for the color and select the appropriate gradient.
  3. Select the left gradient stop and copy the color value to the clipboard.
  4. Select the right gradient stop and paste the color value from the clipboard.
  5. Insert a new gradient stop and place it in the center. Select a slightly darker color for it.

At the end, remove the border of the object by setting the line thickness to 0.

Transparency

Transparency is used, for example, to create glass effects or to superimpose objects and make the different layers visible.

Here is an example where two conveying elements are placed on top of each other. The opacity of the fill color on the upper conveying element was set to 50%. As a result, the objects below it are visible.

In the following example, the two safety doors of a drilling rig are to be shown transparently so that the devices behind them can be seen. In reality the doors are made of glass; this should also be evident in the virtual system. To do this, select the two doors first, then select the color property and change the opacity from 100% to a lower value in the color setting dialog. You can see the effects immediately.

Influence color via double word operands

As of version 2.1.0.0, the color of geometric objects (rectangles, ellipses, etc.) and of fluid objects can be influenced using a double word operand. Thereby the color of the object is influenced at status 0. The property to be assigned has the name "Operand value fill color" and is located in the "Colors" section. Each byte of the double word operand influences a different channel of the color.

Channel Byte inside the double word Meaning
Alpha HiByte-HiWord Color opacity 0: completely transparent 255: highest opacity
Red LoByte-HiWord Red portion of the color. 0: No red portion 255: Max. red portion
Green HiByte-LoWord Grenn portion of the color. 0: No green portion 255: Max. green portion
Blue LoByte-LoWord Blue portion of the color. 0: No blue portion 255: Max. blue portion

Tip:

If the double word operand is to be assembled from different byte operands or if some bytes are to be defined via constants, then a calculator object with the function "Assemble UInt32 from bytes" can be used. In this case, one byte or one constant can be specified at each of the 4 inputs. These bytes are then written into a double word operand to be specified at the result.

Example 1

In the example, the opacity of a black rectangle is to be influenced via a slider. For this purpose, the double word operand "Color" is specified at the "Operand Value Fill Color" property of the rectangle. The rectangle hides three green ellipses. These become visible as soon as the opacity of the rectangle's color decreases. Set the "ZOrder" property of the rectangle to 1 so that it hides the three green ellipses.

The double word operand was created in the IM device and has the address MD2. Thus this consists of the bytes MB2 to MB5. With MB6 the alpha channel is to be changed. The alpha channel determines the opacity of the displayed color. Thus the symbol "AlphaChannel" is defined in the symbol table in the IM device and the operand address MB6 is assigned to it.

Now a slider object is placed, its scale value is to be set to 0 to 255. The "AlphaChannel" symbol is assigned to the slider. The maximum value "255" is to be entered as the start value.

The three other bytes of the color value are not to be influenced. These can all have the value 0, because this results in a black color. To write the single bytes into the double word operand, a calculator object with the function " Assemble UInt32 from bytes" is used. At the input 1 the symbol "AlphaChannel" is to be given, the other inputs for the color channels R, G and B are preset with the constant 0. The function result is assigned to the "Color" symbol.

Thus, all necessary objects are available and the settings are made. The simulation shows the following behavior:

If the value of the slider is decreased, then the opacity of the color of the rectangle is also decreased until the circles hidden by the rectangle are visible. At the value 0 the rectangle is completely transparent.

Conclusion

The example has shown how to change the color of an object using a double word operand. With the use of the calculator object it is very easy to write the single bytes into the double word responsible for the color. Since constants can also be specified here at the individual inputs, if only certain color channels are to be influenced.

Example 2

In the example, the color of an object should change from blue to red as soon as a heater is switched on. If the heating is switched off, then the cooling process should be visible through the transition of the color red to blue. This is achieved by changing the value of the bytes for the colors red and blue within the C# script. For example, if the heating is switched on, then the value of the byte for the red color is gradually increased and at the same time the value of the byte for the blue color is decreased.

The symbols required for the example can be seen below:

The object to be heated is represented by a static rectangle. In the rectangle, the double word operand "Color" of the IM device is to be specified at the "Operand value fill color" property.

The heating itself is symbolized by a red LED, which lights up and pulsates as soon as the heating is switched on.

In the next step a calculator object is to be placed, which is to be set to the function " Assemble UInt32 from bytes". The constant "255" is specified at the first input, this constant is thus written into the alpha channel of the double word operand. So the color has always the maximum opacity. The symbol "Red" is to be specified at the second input and the symbol "Blue" at the fourth input. The third input is provided with the constant 0, because the green color is not needed. Finally, the symbol of the double word operand "Color" is to be entered at the function result.

Now the C# code which causes the color change after switching on the heater and in the cooling phase. If you are not yet familiar with the C# script in PLC-Lab, then a description can be reached under the following link: C#-Script in PLC-Lab

DateTime StartHeating;
DateTime StopHeating;
bool HeatingLastValue;

/// <summary>
/// This method is called cyclically
/// </summary>
public void Loop() {
    //          
    int red = (int) Get_IMRed();
    int blue = (int) Get_IMBlue();
    //
    if (Get_DebugHeating() && !HeatingLastValue){
        //heating is just started
        StartHeating = DateTime.Now;
    }
    if (!Get_DebugHeating() && HeatingLastValue){
        //heating is just stopped
        StopHeating = DateTime.Now;
    }
    if (Get_DebugHeating()){
        TimeSpan delay = DateTime.Now - StartHeating;
        if (delay.Milliseconds >= 50){
            StartHeating = DateTime.Now;
            if (blue > 0){
                Set_IMBlue(blue - 1);
            }
            if (red < 255){
                Set_IMRed(red + 1);
            }
        }
    }
    else {
        TimeSpan delay = DateTime.Now - StopHeating;
        if (delay.Milliseconds >= 50){
            StopHeating = DateTime.Now;
            if (blue < 255){
                Set_IMBlue(blue + 1);
            }
            if (red > 0){
                Set_IMRed(red - 1);
            }
        }
    }
    //at the beginning set to blue
    if (G.LoopCount == 1){
        Set_IMBlue(255);
    }
    // 
    HeatingLastValue = Get_DebugHeating();
}

With this, all things are prepared and the simulation is executed.

Conclusion

In the example, the two color channels red and blue of a rectangle were influenced via bytes whose value was changed in the C# script. A calculator object with the function "Assemble Uint32 from bytes" was used. In the calculator object, the inputs 1 and 3 were assigned constants, since these did not have to be changed. The result was then written into the double word operand responsible for the color.

Using graphics (JPEG, PNG, BMP, ...) in objects

You can use your own graphics in switch objects and geometric objects. To do this, select a graphics file in the sections "Main settings ->Appearance -> Images" in the properties "Image status 0" and "Image status 1". You only have to select an image at status 1 if an operand for switching the images has been specified.

Example 1

In the following example, the image of a drill is displayed in a rectangular object. One image is selected for status 0 and one mirror image for status 1.

When the motor of the drill is switched on, the two images should change. This switchover is done by means of a clock flag bit from the IM memory area of PLC-Lab (../see also "Special case clock flag byte: IMMB65534"). The bit IM.M65534.0 is used and AND-linked to the operand of the motor via a calculator object.

Now the simulation is executed as follows:

The change between the two images creates the impression that the drill is turning.

Example 2

In the next example, we use two fixed circle objects. The upper circle object was configured with one graphic each for the status '0' and the status '1' of an operand. This means that if the operand has the status '0', an image with a white arrow is displayed. For status '1', an image with a yellow arrow is displayed.

For the second circle object, a PNG graphic with a transparent background is used for the status '0'. A second graphic for status '1' is not specified because status '1' should be indicated by a different color of the object. This color is visible because the graphic has transparent areas in which the colors of the circle object can be seen.

The layout shows the following behavior in the simulation:

The example shows that when using PNG graphics with transparent areas, you can also use color switching to indicate a status change. You don't need two graphics.

Example 3

Now we will show an example in which a switch object is assigned a graphic. Again, we use a PNG graphic with transparent areas. An illuminated switch object is used, in which the graphic is specified. In addition, an operand for switching the colour is specified.

In the simulation, this appears like this:

Info

As of version 1.5.0.5 of PLC-Lab, the operand-dependent color change or the change of graphics within geometric objects is supported even if these objects are not physical objects. This means that, for example, decoration objects can also be assigned color changes or changing graphics.

Using vector graphics (XAML) in objects

Vector graphics have the advantage that they can be displayed in any size without changing their display quality. These are never displayed "pixelated".

Below an XAML graphic is displayed in a circle object and its size is changed.

You can see that the graphic is always clear, regardless of its size.

XAML files are basically XML files in which the graphics are defined. These graphics can only be used in PLC-Lab if the files comply with certain criteria.

The elements within the XAML file must be encapsulated in a viewbox:

<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="Fill"> 
    ....
    ....
</Viewbox>

Example

The following XAML snippet shows an arrow.

<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="Fill">
 <ContentControl Content="&#x279B;"/>
</Viewbox>

Where are the custom graphic files of a system project stored?

If a user-defined graphic is used in an object, this graphic file (e.g. the file with the extension .JPG or .PNG) is copied to the directory of the system project. This file must then also be specified when the system project is shared. If a system project is saved to a different location under a different name using "Save as", the user-defined graphic files used in the project are copied automatically.

If an object which displays a user-defined graphic is copied to the clipboard and pasted into another project, the user-defined graphic files are again copied automatically. It is important that the original file still exists or is accessible when you insert the object into the new project.

Included graphical symbols (bottle, crate, motor, ...)

After the installation of PLC-Lab you will find the folder PLC-Lab Editor in your documents. Here you will find sample projects and useful graphic symbols in the Items folder: Bottles, crates (high, flat), balls, etc.