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.
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;
}
