CheckBox and ComboBox

By this sample application, we can set 2 variables (Run mode a boolean variable and another one machine selected an integer) in the PLC by 2 different ways.

=>By using the JavaScript framework provided by the TwinCAT HMI (Left side).

=>By using the extension framework provided by the TwinCAT HMI engineering

=>We can also provide how to make combo box list dynamically (in another example listed below)

=> Create a simple PLC program 

=> Create another HMI project in the same solution

=> Add a ComboBox  and CheckBox in the UI and link some data to the PLC variable

=> Make 3 content page (each will have a indication which page it is for example showing content0, content1 and so on)

=> If we make the content page by copying existing page then we shall have an issue as shown in this sample.

If you run the application, you notice that those PLC variables are updated  but UI does not update as we expect. The mistake we did that we copied the content. If we copy the contents then actually we are copying the ID of the contents. If we edit in the new page then it means we are editing also in the original page. 

Tips 01:   Don’t copy contents or if you do then remember this problem.

Tips 02: When we want to select one of the item at the beginning , we can do it during .onAttachedEvent, as shown in the example

If we press on the Loadmodule  button then it will load the extension module and this will provide an option to write or update the same variable as we did by using the JavaScript.

Configure the app by TwinCAT JavaScript framework

If we see that PLC program is running and in the UI if we click on the run mode it will change the runMode value in the PLC to true  or false.

Configure the app by the extension module:

=> Configure the Checkbox

 

=> Configure the Combobox

 

Updating Combo Box index dynamically by extension

Combo box can be updated by loading or changing the source data dynamically generated in the extension module. The following figure shows how to update the content of srcData. Left side edit box shows how many item we insert in the combo box.

We can set the SrcData field at least in two different way

=> Set the SrcData to some valid JSON test directly, we can build the JSON string dynamically as shown in the following image. With the following setting the index will be 1, 2 and 3. The JSON string [“1”, “2”, “3”] can be built by any means.

=> Set the SrcData to some valid JSON text by extension, we can build the JSON string dynamically as shown in the following image.

Part of ServerExtensionCSharp1.Config.json

    "ComboString": {
      "readValue": {
        "allOf": [
          {
            "$ref": "tchmi:general#/definitions/String"
          },
          {
            "readOnly": true
          }
        ]
      },
      "hidden": false
    },
    "ComboIndex": {
      "readValue": {
        "$ref": "tchmi:general#/definitions/Integer"
      },
      "hidden": false
    },

Actual function where we make the srcData for Combobox and the number of items in the extension class

        private ErrorValue ComboString(Command command)
        {
            command.ReadValue = _data.ComboString;
            command.ExtensionResult = ExtensionErrorValue.HMI_EXT_SUCCESS;
            return ErrorValue.HMI_SUCCESS;
        }
        private ErrorValue ComboIndex(Command command)
        {
            if (command.WriteValue.IsSet && command.WriteValue.Type == TcHmiSrv.ValueType.ValueType_Int)
            {
                _data.ComboIndex = command.WriteValue;                
                List<string> authors = new List<string>();
                for (int i = 0; i < _data.ComboIndex; i++)
                {
                    authors.Add((i + 1).ToString());
                }
                _data.ComboString = JsonConvert.SerializeObject(authors);
            }
            command.ReadValue = _data.ComboIndex;
            command.ExtensionResult = ExtensionErrorValue.HMI_EXT_SUCCESS;
            return ErrorValue.HMI_SUCCESS;
        }