Help Functions

The following help functions are used as default behavior by certain controls or to ensure interoperability with PLC data types.

BoxColorConverter

The function BoxColorConverter is listed in the category Vision. It is used as the default value for the BoxColorConversion attribute of the Color Control. It converts between the RGB and the color format specified by the format parameter.

Parameter

Data type

Description

Color

Vector4

The color value to be converted.

Reverse

Boolean

Direction of the conversion:

false: format to RGBa true: RGBa to format

Format

ColorSpace

Format for conversion:

Gray, RGB, HSV, HLS, RGBa, HSV FULL, HLS FULL, Lab, YUV, YCrCb

PixelType

ElementType

Scaling of the color values:
8-Bit (USINT),
16-Bit (UINT)

The function returns the converted color as ColorValue.

ConvertColor

The function ConvertColor is listed in the category Vision. It converts a color array between the formats Gray, RGB, RGBa, HSV, HSV FULL, and HLS, HLS FULL, Lab, YUV and YCrCb.

Parameter

Data type

Description

ctx

SelectableRequired<TcHmi.Context, 'success' | 'error'> | null

Is used internally in the HMI to receive asynchronous returns. Can be set to null when called up in JavaScript.

Color

Vector4

The color value to be converted.

SrcFormat

ColorSpace

Format of the incoming color value:

Gray, RGB, HSV, HLS, RGBa, HSV FULL, HLS FULL, Lab, YUV, YCrCb

DestFormat

ColorSpace

Format to which is converted:

Gray, RGB, HSV, HLS, RGBa, HSV FULL, HLS FULL, Lab, YUV, YCrCb

Precision

Precision

Specifies the number of decimal places to round to. Unrounded is not rounded.

SrcPixelType

ElementType

Scaling of the incoming color values:

8-Bit (USINT),
16-Bit (UINT)

DestPixelType

ElementType

Scaling of the converted color values:

8-Bit (USINT),
16-Bit (UINT)

Errors during conversion result in zero being returned. As the function is asynchronous, it returns the converted color as a future value, i.e. as Promise<ColorValue | null>.

For example, to convert the color red in RGB format to HLS format, the following function call can be used:

let rgb = [255, 0, 0];
let promise = TcHmi.Functions.Beckhoff.Vision.ConvertColor(null, rgb, "RGB", "HLS", "2 Decimals", "8-Bit (USINT)", "8-Bit (USINT)");
promise.then(hls => console.log(hls.toString()));

//console output
//0,127.5,255
//console output with DestPixelType "16-Bit (UINT)"
//0,32640,65280

In order to be able to process the future ColorValue, this can be waited for with await. Alternatively, as shown in this sample, the function then can be used to pass an anonymous function, e.g. hls. This receives the ColorValue after the conversion has been completed. The ColorValue is then output as string in the console.

PixelColorFormatter

The function PixelColorFormatter is listed in the category Formatting. It is the default value for the PixelColorFormat property of the Image Watch Control. It converts the PixelColor value into a string that can be displayed via HTML. Specifically, the color values of the individual channels are appended to each other and also highlighted in color for certain color formats:

Help Functions 1:

Parameter

Data type

Description

PixelColor

Vector4

The color value to be converted.

Format

ColorSpace

Format for conversion:

Gray, RGB, HSV, HLS, RGBa, HSV FULL, HLS FULL, Lab, YUV, YCrCb

Precision

Precision

Specifies the number of decimal places to round to. With "Unrounded" there is no rounding.

PixelType

ElementType

Scaling of the color values:

8-Bit (USINT),
16-Bit (UINT)

The function returns an HTML coded String.

ShapeValueFormatter

The function ShapeValueFormatter is listed in the category Formatting. It is the default value for the ShapeValueFormat property of the Image Watch Control. It converts the ShapeValue value into a string that can be displayed via HTML. For example, for a rectangle, the area is calculated in pixels and returned as a string:

Help Functions 2:

Parameter

Data type

Description

ShapeData

Any

The shape data to be converted.

ShapeType

ShapeType

Type of the shape passed.

The function returns an HTML coded String.

ToRotatedRectangle

The ToRotatedRectangle function is listed in the Data Conversion category. It converts a UprightRectangle to a RotatedRectangle with angle 0.

Parameter

Data type

Description

rectangle

TcVnRectangle

The rectangle to be converted.

The function returns the converted rectangle as TcVnRotatedRectangle and can be applied as follows:

let upright = {
    nWidth: 100,
    nHeight: 60,
    nX: 200,
    nY: 100,
}
let rotated = TcHmi.Functions.Beckhoff.Vision.ToRotatedRectangle(upright);
console.log(rotated);

//console output
// {
//     aCenter: [250, 130],
//     fAngle: 0,
//     stSize: { fWidth: 100, fHeight: 60 },
// }

ToUprightRectangle

The ToUprightRectangle function is listed in the Data Conversion category. It converts a RotatedRectangle to a UprightRectangle, discarding the angle.

Parameter

Data type

Description

rectangle

TcVnRotatedRectangle

The rectangle to be converted.

The function returns the converted rectangle as TcVnRectangle and can be applied as follows:

let rotated = {
    aCenter: [250, 130],
    fAngle: 0,
    stSize: { fWidth: 100, fHeight: 60 },
}
let upright = TcHmi.Functions.Beckhoff.Vision.ToUprightRectangle(rotated);
console.log(upright);

//console output
// {
//     nWidth: 100,
//     nHeight: 60,
//     nX: 200,
//     nY: 100,
// }