Structure

A function is implemented within the TcHmi namespace. Implementation outside the namespace is not possible, since otherwise the function would not be available in the TwinCAT HMI framework. The function is registered in the framework via the framework API function "registerFunctionEx" (from version 1.12) or "registerFunction" so that it is available at runtime.

The following example implements the conversion of a temperature from Fahrenheit to Celsius and returns the calling point.

Base structure of a TypeScript function

module TcHmi {
   export module Functions {
      export module TcHmiProject40 {
         export function FahrToCels(TempInFahr: number | string) {
            // variable for the return value
            var value = TempInFahr;

            // check the type of the parameter
            if (typeof TempInFahr === 'number') {
               // parameter is already a number

               // convert the parameter value to Celsius
               value = ((TempInFahr - 32) * (5 / 9));
            } else if (typeof TempInFahr === 'string') {
               // parameter is a string

               // convert the parameter type and the parameter value
               value = ((parseFloat(TempInFahr) - 32) * (5 / 9));
            }

            // return the converted parameter
            return value;
         }
      }
      registerFunctionEx('FahrToCels', 'TcHmi.Functions.TcHmiProject40', TcHmiProject40.FahrToCels);
   }
}

Base structure of a JavaScript function (from version 1.12)

(function (/** @type {globalThis.TcHmi} */ TcHmi) {
   var Functions;
    (function (/** @type {globalThis.TcHmi.Functions} */ Functions) {
      var TcHmiProject40;
      (function (TcHmiProject40) {
         function FahrToCels(TempInFahr) {
            // variable for the return value
            var value = TempInFahr;

            // check the type of the parameter
            if (typeof TempInFahr === 'number') {

               // parameter is already a number

               // convert the parameter value to celsius
               value = ((TempInFahr - 32) * (5 / 9));
            }else if (typeof TempInFahr === 'string') {
               // parameter is a string

               // convert the parameter type and the parameter value
               value = ((parseFloat(TempInFahr) - 32) * (5 / 9));
            }

            // return the converted parameter
            return value;
         }
         TcHmiProject40.FahrToCels = FahrToCels;
      })(TcHmiProject40 = Functions.TcHmiProject40 || (Functions.TcHmiProject40 = {}));
      Functions.registerFunctionEx('FahrToCels', 'TcHmi.Functions.TcHmiProject40', TcHmiProject40.FahrToCels);
   })(Functions = TcHmi.Functions || (TcHmi.Functions = {}));
})(TcHmi);

Base structure of a JavaScript function (from version 1.8)

// required namespace TcHmi
(function (/** @type {globalThis.TcHmi} */ TcHmi) {
   // name and parameters of the function defined in json
   var FahrToCels = function (TempInFahr) {
      // variable for the return value
      var value = TempInFahr;

      // check the type of the parameter
      if (typeof TempInFahr === 'number') {
         // parameter is already a number

         // convert the parameter value to celsius
         value = ((TempInFahr - 32) * (5 / 9));
      } 
      else if (typeof TempInFahr === 'string') {
         // parameter is a string

         // convert the parameter type and the parameter value
         value = ((parseFloat(TempInFahr) - 32) * (5 / 9));
      }

      // return the converted parameter
      return value;
   };

   // register the function in the framework
   TcHmi.Functions.registerFunction('FahrToCels', FahrToCels);
})(TcHmi);

References to the framework and jQuery within the function's JavaScript file are created to enhance IntelliSense support. This is not necessary with TypeScript.

// TcHmi Version 1.12
/// <reference path="../Packages/Beckhoff.TwinCAT.HMI.Framework.12.742.1/runtimes/native1.12-tchmi/TcHmi.d.ts" />

// TcHmi Version 1.8
// Provider for a best effort Intellisense of Visual Studio 2017/2019.
/// <reference path="C:\TwinCAT\Functions\TE2000-HMI-Engineering\Infrastructure\TcHmiFramework\Latest\Lib\jquery.d.ts" />
/// <reference path="C:\TwinCAT\Functions\TE2000-HMI-Engineering\Infrastructure\TcHmiFramework\Latest\TcHmi.d.ts" />
/// <reference path="C:\TwinCAT\Functions\TE2000-HMI-Engineering\Infrastructure\TcHmiFramework\Latest\Controls\System\TcHmiControl\Source.d.ts" />

// Provider for a best effort Intellisense of Visual Studio 2013/2015.
/// <reference path="C:\TwinCAT\Functions\TE2000-HMI-Engineering\Infrastructure\TcHmiFramework\Latest\Lib\jquery\jquery.js" />
/// <reference path="C:\TwinCAT\Functions\TE2000-HMI-Engineering\Infrastructure\TcHmiFramework\Latest\TcHmi.js" />