ShapeValueFormatting function

As an alternative to the ShapeValueFormatter function, a custom formatter function can be created to display other shape information 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, two parameters must be created. The first one gets the Shape description passed in the same way as the ShapeData property, as it can be retrieved from the control. This parameter must be created as type Any. The second parameter is passed the shape type analogous to the ShapeType property. This parameter must be specified as type TcHmi.Controls.Beckhoff.Vision.ShapeType. It should be noted that these passed parameters may differ from the values of the corresponding control properties at the time of function execution for timing reasons.

The function must return a value of type String, which is then displayed in the infobar. The function is called whenever the shape description changes and thus the string in the infobar needs to be updated.

In the following code sample, the width and height are returned if the objects are included in the shape data:

namespace TcHmi {
    export namespace Functions {
        export namespace TcHmiProject {
            export function Formatter(shapeData: any, shapeType: any) {
                if (shapeData.stSize != null && shapeData.stSize.fWidth != null &&
                    shapeData.stSize.fHeight != null) {
                    return 'w: ' + shapeData.stSize.fWidth.toFixed(0) + ' h: ' +
                        shapeData.stSize.fHeight.toFixed(0);
                }
                else {
                    return '';
                }
            }
        }
    }
}
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 ShapeValueFormat property and select the function you have just created in the Function Editor.