Benutzerdefiniertes Farbformat

Als weiteres Beispiel der Color Control Konfiguration wird ein RGB-Farbformat mit einem Wertebereich zwischen 0 und 1 betrachtet. Um dies in dem Color Control darzustellen, müssen die Kanäle im ColorChannel Attribut als float und mit einem maxValue von 1 eingestellt werden.

Die Werte des ColorChannels Attributs können per Skript wie folgt geschrieben werden:

[
  {
    "color": {
      "color": "rgba(255, 0, 0, 1)"
    },
    "float": true,
    "maxValue": 1.0
  },
  {
    "color": {
      "color": "rgba(0, 255, 0, 1)"
    },
    "float": true,
    "maxValue": 1.0
  },
  {
    "color": {
      "color": "rgba(0, 0, 255, 1)"
    },
    "float": true,
    "maxValue": 1.0
  }
]

ColorBoxFormatting Funktion

Damit die Farb-Box trotz des veränderten Wertebereich die richtige Farbe anzeigt, muss das BoxColorConversion Attribut angepasst werden. Anders als bei den Standard-Konvertierungen existiert hierfür keine vorgefertigte Funktion. Stattdessen ist die Erstellung einer eigenen Funktion notwendig. Das folgende Beispiel zeigt, wie eine solche Funktion für den oben genannten Anwendungsfall 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 müssen zwei Parameter angelegt werden. Der erste bekommt den zu konvertierenden Farbwert übergeben und muss daher vom Typ TcHmi.Controls.Beckhoff.Vision.Vector4 angelegt werden. Der zweite Parameter gibt die Konvertierungsrichtung an und muss als Boolean angelegt werden. Mit True werden die Werte nach RGB konvertiert und mit False von RGB zurück in das benutzerdefinierte Farbformat. Es ist zu beachten, dass sich diese übergebenen Parameter zum Zeitpunkt der Funktionsausführung aus Timing-Gründen von den Werten der entsprechenden Control-Eigenschaften unterscheiden können.

Die Funktion muss einen Wert vom Typ TcHmi.Controls.Beckhoff.Vision.TcHmiVnColor.ColorValue zurückgeben, der dann in der Farb-Box angezeigt wird.

Im folgenden Codebeispiel wird die Skalierung der Farbwerte angepasst. Wenn der Parameter reverse = false ist, werden die Farbwerte vom Control im benutzerdefinierten Format an die Funktion übergeben. Das Farbformat muss dann in RGB(a) konvertiert werden, um in der ColorBox angezeigt werden zu können. Die übergebenen Farbwerte im Parameter „color“ sind immer vierkanalig. Wenn keine transparente Farbe in der ColorBox angezeigt werden soll, müssen die zurückgegebenen Farbwerte dreikanalig sein. Alternativ kann auch der vierte Kanal auf 255 gesetzt werden.

Wenn der Parameter reverse = true ist, werden Farbwerte vom Farbauswahl-Dialog im Format RGBa an die Funktion übergeben. Das Farbformat muss dann in das benutzerdefinierte Farbformat konvertiert werden. Der vierte Kanal wird aus den Farbwerten des Controls übernommen, weil der Farbauswahl-Dialog keine Transparenz unterstützt.

module TcHmi {
    export module Functions {
        export module TcHmiProject {
            export function ConvertRGB(ctx: any, color: any, reverse: any) {
                // Important: color has 4 channels. If the ColorBox should be RGB, return a 3 channel color or set the fourth channel (a) to 255
                if (!reverse) {
                    ctx.success(color.slice(0, 3).map((value: number) => value * 255));
                }
                else {
                    ctx.success(color.slice(0, 3).map((value: number) => value / 255));
                }
            }
        }
    }
}
TcHmi.Functions.registerFunctionEx('ConvertRGB', 'TcHmi.Functions.TcHmiProject', TcHmi.Functions.TcHmiProject.ConvertRGB);

Damit ist gewährleistet, dass die Farb-Box die richtige Farbe anzeigt und dass ein manuelles Ändern der Farbe in der Farb-Box zu korrekten Farbwerten führt.