HMI Localization

Our software is mainly HMI that means it can run any countries, so we need to support different language. There is very good built-in language support by the TwinCAT HMI framework.

There are few ways to add language support in TwinCAT HMI. 

=> If the project is relatively small then we can add those strings manually to the project one by one.

=>If the project is too big then we should build the localized string in a CSV file or in an excel file. We can import those strings directly to the HMI project. 

 We shall cover both ways.

Whenever we create an HMI project in Visual Studio, by default 2 languages are supplied, are German and the English language. We shall add two more languages to our sample application, french and Hindi.

We shall build an application with a couple of buttons (one will be Start and the other will be Stop), a combo box for selecting language, and a text block that will display a textual description of the selected language. 

The initial GUI looks like the following. So if you want to follow with me, start a project in Visual Studio and create a user interface like the following screenshot.

So there are 4 strings (Start, Stop, Select, and a string to describe that a language has been selected) that will be translated into four different languages, English, German, French, and Hindi.

JavaScript API that can be used to check the language-related settings. We can create a JavaScript function or embedded JavaScript function. Let’s try to use some embedded code.

=> Select the Desktop.view then F4 (View | Property Window), this will bring the property windows. In the property window, select event icon (bolt icon)

JavaScript API that can be used to check the language-related settings. We can create a JavaScript function or embedded JavaScript function. Let’s try to use some embedded code.

=> Select the Desktop.view then F4 (View | Property Window), this will bring the property windows. In the property window, select event icon (bolt icon)

 TcHmi.Locale.load('de-DE', function (data) {
    if (data.error) {
        TcHmi.Log.infoEx('Loading de-DE successfully.');
    }
});
var currentLocale = TcHmi.Locale.get();
console.log(`currentLocale = ${currentLocale}`);    
var array = TcHmi.Locale.getRegisteredLocales();
var i;
for(i = 0; i < array.length; i++)
{
    console.log(`${i} = ${array[i]}`);    
}

The result of the above code from the browser console window. We loaded the German language then checked how many languages are there in a loop.

currentLocale = de-DE
0 = de-DE
1 = en-US

 

 

 

Adding language text string manually.

=>First of all we find the translation of the four texts in our four languages. I shall show those in the following table. Now we shall add one by one to the language table.

=>Since by default, the wizard supply German and English, we need to add the other two languages manually. I made those translation by Google so it may be wrong.

=>For adding additional language support, go to project, right click on localization | Add | New Item, “Add New Item” wizards appear.

=>Select Localization | Add , a wizard appears  and  select French : fr and then create, note that Language1.tpl.localization(fr) has been created.

=>Repeat the process for Hindi (Hindi : hi) language.

These images are taken from Beckhoff site.

Now remove those Text1, Text2, etc, and insert the header and text from our string table. Repeat  these for our four language

Now if we compile and  load the Desktop and check the console  in the browser we can see the following text, we have  four languages there.

currentLocale = de-DE
0 = de-DE
1 = en-US
2 = fr-FR
3 = hi-IN

 

Now we configure those visible texts.

=> Rename all the necessary control’s ID to match real one,  for example, Start button id to TcHmi_Controls_Beckhoff_TcHmiButton_Start, Stop button’s id to TcHmi_Controls_Beckhoff_TcHmiButton_Stop, etc.

=> Select Start button | Properties (F4) and bind the Text field Text_Start

=>Repeat the process for all other fields.

=>Change the SrcData field of the Combobox to [“de-DE”, “en-US”, “fr-FR”,”hi-IN”]

=> Now run the HMI and noticed that de-DE (German) text has been selected for all our target fields (as it was loaded during the Desktop attached event)

=>During the load time if we select any language that will be loaded as expected, following image is taken when German language was selected.

 

Now if we implement the event of Combobox selection then we are done, let’s implement the Combobox selection event. We shall check what the user has selected and based on that we load the language. The configuration is shown in the following image.

 

If we select the Hindi language from the Combobox we see that the buttons’ text and the description have been changed accordingly.

If we select the French language from the Combobox we see that the buttons’ text and the description have been changed accordingly.

Adding language string from CSV or Excel file

We can export the string from excel or CSV file. We can format all the string in a excel/CSV and load it to the project. After that we have to follow the same process as we have done in manual string handling. The following image shows the content of Hindi language. For other language we have the similar structure.

=>When we have the language file ready then we can load it from the upper left corner (from a CSV/Excel file)

=>We can export the text to a file in the opposite process.

We shall add a YouTube Video tutorial here later, please do visit again