You are here: Start » Program Examples » HMI Translations

HMI Translations

Aim:

The application shows how to create a multi-language user interface.

Input:

A simple application showing smoothing and rotation of an image and an .xml file with the HMI labels for different languages.

Output:

The HMI with appropriate labels depending on the chosen language.

Hints:

To update labels after changing the language, you can use the HMI events. To load data from an .xml file, you need the XML tools.

Solution (FIS):

  1. In the INITIALIZE section of the application, add a new Step macrofilter and name it LoadAvailableLanguages.

  2. Add the Xml_LoadFile filter to load the .xml file with different versions of the HMI labels.

  3. Add the Xml_SelectMultipleNodes to select all nodes of type "Language".

    • Connect the inNode input to the Xml_LoadFile output.
    • In the Properties section, set the inXPath input to /Translations/Language.

  4. Add the Xml_GetStringAttribute to extract the "name" attribute.

    • Connect the inNode input to the outNodes output from the previous step.
    • In the Properties section, set the inName input to name.

  5. Add a formula to select the first language as the default.

    outSelection = 0

  6. In the HMI window, add the Label control available in the Controls category and place it at the top right part of the HMI. Set the inText as Language:.

  7. Next to the new label, add the ComboBox control available in the Controls category.

    • Connect its inList input to the Xml_GetStringAttribute output from the LoadAvailableLanguages macrofilter.
    • Connect the inSelection input to the output of the formula from the LoadAvailableLanguages macrofilter.
    • Create a HMI event related to the SelectionChanged option and name it SelectedLanguageChanged.

  8. Go to the SelectedLanguageChanged event. Load translation strings and send them to the HMI controls.

  9. Add the Xml_LoadFile filter to load the .xml file with different versions of the HMI labels.

  10. Add the StringToUpperCase filter and connect its input to the outTextoutput of the HMI ComboBox control.

  11. Add a formula. Connect the output from the previous step to it and name it inLanguage.

    outXPath = "/Translations/Language[@name=\"" + inLanguage + "\"]"

  12. Add the Xml_SelectSingleNode filter. Connect its inNode input to the Xml_LoadFile filter output and the inXPath input to the formula outXPath output.

  13. Add the Xml_SelectSingleNodeValue_AsString filter.

  14. Repeat the previous step 8 times for the data below:

    • The inXPath input: OutputImage, the Output image: HMI label.
    • The inXPath input: SmoothingLevel, the Smoothing level: HMI label.
    • The inXPath input: Settings, the Settings HMI group box.
    • The inXPath input: ImageSource, the Image source: HMI label.
    • The inXPath input: UseColor, the Use Color Image HMI radio button.
    • The inXPath input: UseMono, the Use Mono Image HMI radio button.
    • The inXPath input: Effects, the Effects: HMI label.
    • The inXPath input: RotationAngle, the Rotation angle: HMI label.

Macrofilter Main.

Macrofilter LoadAvailableLanguages.

Macrofilter SelectedLanguageChanged.

Further Readings