PixelColorFormatting function

As an alternative to the PixelColorFormatter function, a user-defined formatter function can be created to format the color of the selected pixel differently. The function gets the color value of the pixel and returns a string that is displayed in the infobar. 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, the WaitMode must be changed to Asynchronous. As a result, the parameter "ctx" is created, which is required for the return. A further parameter of the type “Array” must then be created, which receives the color value as an array in the same way as the PixelColor property of the control. 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 String so that it can be displayed in the infobar. The call is always made when the value of the PixelColor property changes and the string in the infobar therefore needs to be updated.

In the following code block, 3 color values in red, green and blue are returned as an example, provided at least 3 elements are present in pixelColor. The values are multiplied by 256 to convert them into 16 bits:

namespace TcHmi {
    export namespace Functions {
        export namespace TcHmiProject {
           export function Formatter(ctx: any, pixelColor: number[]) {
                if (pixelColor.length >= 3) {
                    ctx.success(`<span style="color:red;">${pixelColor[0] * 256}</span>, ` +
                                `<span style="color:green;">${pixelColor[1] * 256}</span>, ` +
                                `<span style="color:blue;">${pixelColor[2] * 256}</span>`);
                }
                else {
                    ctx.success('');
                }
            }
        }
    }
}
TcHmi.Functions.registerFunctionEx('Formatter', 'TcHmi.Functions.TcHmiProject', TcHmi.Functions.TcHmiProject.Formatter);

To use a formatter function you have created, click on the Select button at the PixelColorFormat property and select the function you have just created in the Function Editor.