Conversion to HMI color object

In order to use a color in the TwinCAT HMI, e.g. as a background or for other properties such as text or frames, it must be converted into an object of type TcHmi.Color. The following example shows how such a function is created and which interfaces it must have.

The general use of functions is explained in the HMI documentation.

After creating the TypeScript function, a parameter must be created. This gets the color value e.g. from the PixelColor property of the ImageControl or the ColorValue from the Color Control and must therefore be created of the type Array. It should be noted that the parameter passed may differ from the value of the corresponding control properties at the time of function execution for timing reasons.

The function must return a value of type Color, which can then be used for other properties in the HMI.

The following code sample shows the conversion of an RGB color value:

module TcHmi {
    export module Functions {
        export module Custom {
            export function StringifyColor(color: number[]): TcHmi.Color {
                if (color.length >= 3) {
                    return { color: `rgb(${color[0]}, ${color[1]}, ${color[2]})` };
                }
                throw new Error("Could not stringify color.");
            }
        }
        registerFunctionEx('StringifyColor', 'TcHmi.Functions.DevHmi', DevHmi.StringifyColor);
    }
}

To be accepted as a color object, the return value must be of type Color and must be structured as follows:

{
    color: ‘rgb(<red>, <green>, <blue>)’
}

Such a function can be used, for example, by converting the color value of a TcHmiVnColor control with the function and then setting it as the background color of another UI element.