Tutorial: Image Overlays

Learn how to add Image Overlays to IGSS Descriptors


With IGSS V11 the support of semi-transparent images makes it possible to customize the look of the standard descriptor types. Using alpha blending the image overlay can add gradients, highlights, shadows and cut-aways to the actual base descriptor. An image overlay for use in IGSS is basically a png image with an alpha channel defined.
This tutorial will guide you to create your very first overlay, as well as supply you with a few samples.Image Overlays Sample for IGSS

Let's get started

In IGSS Definition you can create a configuration with various base descriptors which can be used with an image overlay. These could be rectangles, ellipses, polygons, bars and pies.
In this tutorial we will keep it simple and add an image overlay to a rectangle connected to an analog object.
Rectangle Descriptor
We notice that the dimensions of our created rectangle descriptor is 125x170 pixels.

It's now time to create an image overlay for the descriptor.
For this we use the free vector based drawing tool named Inkscape.

Once you got Inkscape installed and running set the File->Document Properties : Page width and height to 125x170.
This will help us create an image where the line widths, scales and positions are placed and look as expected.

Tip: You can make a screendump of your diagram, and draw on top of it.
Just paste it into inkscape, position it, and lock it using right click: Object Properties -> Lock.

If you are new to Inkscape, don't be scared making mistakes. Hitting Ctrl-z will undo your last action.
But do save your work once in a while.

First we want to create a gradient for the Image Overlay.
Start by drawing a rectangle - we will adjust the size in a moment. First we need to remove the Stroke around it.
Right click the rectangle and select Fill and Stroke. Then remove the Stroke paint by selecting the X.
Now position the Rectangle using the input fields in the top toolbar. Set the position x,y to 0,0 and the size to 125x170.

Next up we want to use a gradient as the rectangles Fill.

Select the Linear gradient, and click Edit. As we want dark edges in the sides, we add an extra stop.
Adjust the colors and alpha/transparency levels as shown below:

Inkscape Gradient Editor

Now it is time to create a look-through or a cut-away to the objects value - making it stand out in IGSS.

We do this by drawing a rectangle on top of where we have placed the value in Definition.

This rectangle will be used to cut a hole in the existing gradient rectangle we just made.

Tip: If you want the cut-away to look a bit nice, try adding rounded corners of the rectangle (Rx & Ry in the toolbar).

Do the cut-away by selecting the gradient rectangle, hold down Shift and select the new rectangle as well.

Now select the menu: Path -> Difference. This should create a look-through in the gradient rectangle.

If you like to add scales, you can again do this using rectangles or maybe triangles.
Small duplicates of these can easily be distributed using the Object->Align and Position tools in Inkscape.
Just position the a top and the lowest tick mark, select them all and use distribute.

For the sake of the example here is how it looks (Tools used are selected):

Distribute Scale Tick Marks

Once the tick marks are positioned, you can make a look-through scale by creating small cut-aways of them. Sometimes you need to convert your scale tick marks into paths before using til Path->Difference method.

Note: If you add a scale with narrow lines they will not look perfect if the image is resized in Definition or the diagram is scaled on the end users monitor. Please also remember to compensate for border widths, when placing the tick marks.

It is possible to add scale values to your overlays. Just remember that they will need to be manually updated if the value interval of the analog object changes.

Exporting the Overlay Image
Now it is time to export the Image Overlay png file.
However if you have embedded a background image, it must be removed from the document area.
You can unlock it from Object -> Unlock All.

The export is done from the File->Export Bitmap menu. We double the size of the image, by changing the width from 125 -> 250. The reason for the increased size is that we might want to reuse the overlay in other sizes, or show it on different screen sizes. The larger image will render better in these cases.

Insert Image in IGSS
Now in Definition insert the newly created png file as an image. Use the Align Tools to size and position the image on top of the rectangle descriptor. When the descriptor is in place, it is a good idea to lock the image, making the descriptor easily selectable.

Tip: Sometimes you might want to create an overlay where you would like the Value to be visible on top of it. As the base descriptor has to be drawn below the image overlay, you can only achieve this by adding a new text descriptor to display the value and then position this in front using Ctrl+F.

Adding Image overlay to Tank

You have now completed the tutorial and created your first simple image overlay - Congratulations!

Hope the tutorial inspires you to make new image overlays. As a further inspiration you can use Google Image Search and look for meters, gauges, temperature etc.
If you create something you find could be useful for other IGSS users please share it with us. Mail the SVG, PNG file and a IGSS screenshot to IGSS Support:

DK-IGSS-support@schneider-electric.com - We will then share your work on this page.

You can find and download our current samples under Links to the left.