Structure

A function is implemented within the namespace. It is addressed within the system via this namespace. The function is registered in the framework via the framework API function "registerFunctionEx" (since version 1.12) or "registerFunction" so that it is available at runtime.

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

Basic structure of a TypeScript function using ES modules

The use of the namespace is only relevant for ES modules within the register call, as the modules themselves offer a clean encapsulation within this file.

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;
}
TcHmi.Functions.registerFunctionEx('FahrToCels', 'TcHmi.Functions.TcHmiProject40', FahrToCels);

You can find more information about JavaScript modules on a separate page.

Basic structure of a TypeScript function

namespace TcHmi {
   export namespace Functions {
      export namespace TcHmiProject41 {
         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;
         }
      }
   }
}
TcHmi.Functions.registerFunctionEx('FahrToCels', 'TcHmi.Functions.TcHmiProject40', TcHmiProject41.FahrToCels);

Basic structure of a JavaScript function (since version 1.12)

(function (/** @type {globalThis.TcHmi} */ TcHmi) {
   var Functions;
    (function (/** @type {globalThis.TcHmi.Functions} */ Functions) {
      var TcHmiProject40;
      (function (TcHmiProject40) {
         /**
          * @param {string|number} TempInFahr
          */
         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 = TcHmi.Functions || (TcHmi.Functions = {}));
})(TcHmi);
TcHmi.Functions.registerFunctionEx('FahrToCels', 'TcHmi.Functions.TcHmiProject40', TcHmiProject40.FahrToCels);

Basic structure of a JavaScript function (since 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;
   };
})(TcHmi);
// register the function in the framework
TcHmi.Functions.registerFunction('FahrToCels', FahrToCels);

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" />