Unity XR Plugin Framework: UI System / Keyboard Interface

by Jennifer Wang (2022)

Requirements

Add EventSystem
- Hierarchy -> XR -> UI EventSystem

Add UI Canvas
- Hierarchy -> XR -> UI Canvas
- Resize Canvas to dimensions appropriate for your keyboard

3. Add TextMeshPro Button as a child to Canvas

Hierarchy -> UI -> Button - TextMeshPro
if you see a TMP Importer, click Import TMP Essentials
Under Button, select its child

4. Add TextMeshPro InputField as a child to Canvas

Hierarchy -> UI -> Input Field- TextMeshPro

5. Create a C# Script in Assets

Left click -> Create -> C# Script

6. Create the Script "Keyboard" and paste in the following code

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using TMPro;

public class Keyboard : MonoBehaviour{

private TMP_InputField inputField;

public void SetInputField(TMP_InputField field){

inputField = field;

Debug.Log(inputField.text);

}

public void InsertChar(string c){

inputField.text += c;

}

public void DeleteChar(){

if (inputField.text.Length > 0){

inputField.text = inputField.text.Substring(0, inputField.text.Length - 1);

}

7. Create the Script "KeyboardButton" and paste in the following code

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using TMPro;

public class KeyboardButton : MonoBehaviour{

Keyboard keyboard;

TextMeshProUGUI buttonText;

void Start(){

keyboard = GetComponentInParent<Keyboard>();

buttonText = GetComponentInChildren<TextMeshProUGUI>();

if (buttonText.text.Length == 1){

NameToButtonText();

}

public void NameToButtonText(){

buttonText.text = gameObject.name;

}

8. Drag and drop Keyboard script to the inspector view of Canvas

9. Drag and drop KeyboardButton script to the inspector view of Button

10. Add the Keyboard.InsertChar function to On Click () in the inspector view of Button

Click the plus button under On Click
Drag the Canvas to the field that says "None (Object)"
Select Keyboard.InsertChar as a function
- Keyboard -> InsertChar

11. Go to InputField and add the Keyboard.SetInputField function to the On Select in the inspector view

Click the plus button under On Select
Drag the Canvas to the field that says "None (Object)"
Select Keyboard.SetInputField as a function
Drag InputField itself to the field that says "None (TMP_InputField)"

12. You should now be able to click the button in VR and see the changes reflected in the input field. Duplicate the button and alter its text under its child Text (TMP) until you are satisfied with the buttons in the keyboard.