GitHub LogoGo to GitHub

Example dual-language button

Creating the button

First, instantiate an MRTK button. Basic button prefabs are available in the MRTK in different sizes. To find the basic MRTK button prefabs go in the Project section in the Unity editor and follow this path: Packages/Mixed Reality Toolkit Foundation/SDK/Features/UX/Interactable/Prefabs/PressableButtonHoloLens2*. Alternatively, you can use the search field in the Project section and for example type button in the search field. Make sure the search is executed in the whole project and not only in Assets. Also, there are specific button prefabs that are already used in chARpack available in Assets/Resources/prefabs. The most common button prefabs provided by chARpack are listed here:

  • SettingsButton: a button in the fitting size for the Settings menu
  • CloseMeButton: a button with a “Close” icon
  • DeleteMeButton: a button with a “Trash” icon

Choose a type of button and instantiate it. Either directly in the Scene you are working on or via the Instantiate method within a script. If you are instantiating it as a child of a ButtonCollection (e.g. in the Settings menu), you will need to click Update collection on the parent in order to properly integrate the new button into the layout.

Adding method listeners and icons

Some of the prefabs already have icons that correspond to their purpose. In case you want a different icon, manually update it. In addition, chARpack provides a custom icon collection, which is located in Assets/Icons.

Predefined content

All MRTK button prefabs have a ButtonConfigHelper component for easily changing icon, text, and associated methods. In the field Main label text the label of the button can be changed. For changes of the icons and icon styles use the available interface functions in the Icon section. Either go to the PressableButtonHololens2 component or to the ButtonConfigHelper component to assign a call to a method. Add an entry to the ButtonPressed or OnClick list, respectively.

MRTK buttons only respond to mouse clicks if the method they call is attached in the OnClick event list, not in the ButtonPressed list. We recommend using the OnClick list in order for all buttons to work the same way.

Add the game object with the associated script to the object field and choose the method you wish to call from the dropdown menu next to it. For more information see the MRTK documentation.

Scripting

To set an icon style or a specific icon from within a script, call the ButtonConfigHelper component’s corresponding methods. Refer to the MRTK documentation for more detailed explanations. Adding a method listener can be done after instantiating the button. Use GetComponent<ButtonConfigHelper>() on the instantiated button and add listener OnClick.AddListener(delegate{GameObject.Method(params)}). This will add the corresponding method listener at runtime.

Adding translations

All items should provide English and German texts and labels. The following two sections guide you though text and label generation process.

Static text

You can enter the English label to the button before using any localization. In this case, the item’s functionality can be tested without the need to add translations from the beginning. However, a label can also be added later. To localize any content within a scene or prefab that will not be generated by a script, go to Window > Asset Management > Localization Scene Controls. Select English as the active locale and enable the Track Changes toggle. Now, any changes you make will be tracked as part of the selected locale. Enter the English text for the item if you haven’t yet. Content other than text can also be localized, see the documentation of Localization package. After that, change the active locale to German and enter the corresponding translation. Tracked changes in text will be marked by a green background. Translations are saved in a string table (e.g. Assets/Locales/My Strings), which can also be edited separately in Window > Asset Management > Localization Tables.

Scripting

Open the My Strings table in Window > Asset Management > Localization Tables and add new entries for any required text and enter both, the English, and the German translations in the corresponding fields. Assign a unique key for each field. If you are using only single words without special characters, it is sufficient to use the English version in the key field as well. In any method within the script, you can now assign the value of LocalizationManager.Singleton.GetLocalizedString(*KEY*) to a string and use it as you would with the English word, for example to set it as the main label of the button using the ButtonConfigHelper component.

Example:

// Helper methods to generate localized tool tip text
private string getToolTipText(string name, double mass, double radius, double bondNum)
{
    string rad = LocalizationManager.Singleton.GetLocalizedString("RADIUS");
    string numBonds = LocalizationManager.Singleton.GetLocalizedString("NUM_BONDS"); 
    string massStr = LocalizationManager.Singleton.GetLocalizedString("MASS");
    string nameStr = LocalizationManager.Singleton.GetLocalizedString("NAME");
    name = GetLocalizedElementName(name);
    string toolTipText = $"{nameStr}: {name}\n{massStr}: {mass}\n{rad}: {radius}\n{numBonds}: {bondNum}";
    return toolTipText;
}
-->
%svelte.body%