PixelColorFormatting Funktion
Alternativ zur PixelColorFormatter
Funktion kann eine benutzerdefinierte Formatter-Funktion erstellt werden, um die Farbe des ausgewählten Pixels anders zu formatieren. Die Funktion erhält den Farbwert des Pixels und gibt einen String zurück, der in der Infobar angezeigt wird. Das folgende Beispiel zeigt, wie eine solche Funktion angelegt wird und welche Schnittstellen diese haben muss.
![]() | Die allgemeine Verwendung von Funktionen wird in der HMI-Dokumentation erklärt. |
Nach dem Erstellen der TypeScript Funktion muss der WaitMode auf Asynchronous
umgestellt werden. Das hat zur Folge, dass der Parameter „ctx“ angelegt wird, der für die Rückgabe notwendig ist. Danach muss ein weiterer Parameter vom Typ „Array“ angelegt werden, der analog zur PixelColor-Eigenschaft des Controls den Farbwert als Array übergeben bekommt. Es ist zu beachten, dass sich der übergebene Parameter zum Zeitpunkt der Funktionsausführung aus Timing-Gründen vom Wert der entsprechenden Control-Eigenschaften unterscheiden kann.
Die Funktion muss einen Wert vom Typ String
zurückgeben, damit dieser in der Infobar angezeigt werden kann. Der Aufruf erfolgt immer, wenn sich der Wert der PixelColor
-Eigenschaft ändert und somit der String in der Infobar aktualisiert werden muss.

Im folgenden Codeblock werden beispielhaft 3 Farbwerte in rot, grün und blau zurückgegeben, sofern mindestens 3 Elemente in pixelColor vorhanden sind. Dabei werden die Werte mit 256 multipliziert, um sie in 16-Bit umzurechnen:
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);
Um eine selbst erstellte Formatter-Funktion zu benutzen, klicken Sie bei der PixelColorFormat
-Eigenschaft auf den Auswahl-Button und wählen in dem Function Editor ihre soeben erstellte Funktion aus.
