Animating the Tint on a Grayscale Symbol

Lets say you have chosen one of the many grayscale symbols, such as the 3-D Valve symbol from the Valves category, and you want to tint the valve green when the valve is open, red when the valve has a fault, and keep it gray when the valve is closed. Suppose you have a tag called ValveStatus, that is 0 for closed, 1 for open, and 2 for faulted.

  1. Drag the symbol onto the screen.

  2. Duplicate the symbol by selecting it and choosing Duplicate from the Edit menu, or pressing CTRL-D.

  3. Now, select the duplicate symbol, which will be above the original.

  4. Press the Union button ( images/download/attachments/6047994/image2015-5-1_9_23_0.png ) in the toolbar or find the Union item under the Shape menu.
    This will flatten the duplicated shape into a single shape.

    images/download/attachments/6048084/Union_1A.png

  5. Remove the outline by setting the Stroke Paint property to No Paint.

  6. Bind the Fill Paint property to your ValveStatus Tag.

  7. Add three entries into the number-to-color translation table:

  • 0% opaque white for 0

  • 40% opaque green for 1

  • 40% opaque red for 2

    images/download/attachments/6048084/binding_screen.png

In summary, what we did to tint the symbol was to make a flat shape that had the exact same outline as the symbol, and used semi-transparent fills to achieve a tint effect for the underlying symbol.

images/download/attachments/6047994/image2015-4-30_17_3_40.png
Understanding the tinting technique

Similar Topics ...