|
3 | 3 | The button supports all available input methods including articulated hand input for the near interactions and gaze + air-tap for the far interactions. You can also use voice command to trigger the button. |
4 | 4 |
|
5 | 5 | ## How to use the Pressable Button prefab |
6 | | -Simply drag [PressableButton.prefab](/Assets/MixedRealityToolkit.SDK/Features/UX/Interactable/Prefabs/PressableButton.prefab) or [PressableButtonPlated.prefab](/Assets/MixedRealityToolkit.SDK/Features/UX/Interactable/Prefabs/PressableButtonPlated.prefab) into the scene. These button prefabs are already configured to have audio-visual feedback for the various types of inputs, including articulated hand input and gaze. The events exposed in the `PressableButton` and the [`Interactable`](README_Interactable.md) component can be used to trigger additional actions. |
| 6 | +Simply drag [PressableButton.prefab](https://github.com/Microsoft/MixedRealityToolkit-Unity/blob/mrtk_release/Assets/MixedRealityToolkit.SDK/Features/UX/Interactable/Prefabs/PressableButton.prefab) or [PressableButtonPlated.prefab](https://github.com/Microsoft/MixedRealityToolkit-Unity/blob/mrtk_release/Assets/MixedRealityToolkit.SDK/Features/UX/Interactable/Prefabs/PressableButtonPlated.prefab) into the scene. These button prefabs are already configured to have audio-visual feedback for the various types of inputs, including articulated hand input and gaze. The events exposed in the `PressableButton` and the [`Interactable`](README_Interactable.md) component can be used to trigger additional actions. |
7 | 7 |
|
8 | 8 | The Pressable Buttons in the HandInteractionExamples scene use [`Interactable`](README_Interactable.md)'s *OnClick* event to trigger a change in the color of a cube. This event gets triggered for different types of input methods such as gaze, air-tap, hand-ray, as well as physical button presses through the `PressableButton` script. |
9 | 9 |
|
10 | | -<img src="/External/ReadMeImages/Button/MRTK_Button_HowToUse_Interactable.png" width="450"> |
| 10 | +<img src="../External/ReadMeImages/Button/MRTK_Button_HowToUse_Interactable.png" width="450"> |
11 | 11 |
|
12 | 12 | You can configure when the `PressableButton` fires the [`Interactable`](README_Interactable.md)'s *OnClick* event via the `PhysicalPressEventRouter` on the button. For example, you can set *OnClick* to fire when the button is first pressed, as opposed to be pressed, and then released, by setting *Interactable On Click* to *Event On Press*. |
13 | 13 |
|
14 | | -<img src="/External/ReadMeImages/Button/MRTK_Button_HowTo_Events.png" width="450"> |
| 14 | +<img src="../External/ReadMeImages/Button/MRTK_Button_HowTo_Events.png" width="450"> |
15 | 15 |
|
16 | 16 | To leverage specific articulated hand input state information, you can use `PressableButton`'s events - *Touch Begin*, *Touch End*, *Button Pressed*, *Button Released*. These events will not fire in response to air-tap, hand-ray, or eye inputs, however. |
17 | 17 |
|
18 | | -<img src="/External/ReadMeImages/Button/MRTK_Button_HowTo_PressableButton.png" width="450"> |
| 18 | +<img src="../External/ReadMeImages/Button/MRTK_Button_HowTo_PressableButton.png" width="450"> |
19 | 19 |
|
20 | 20 | ## Interaction States |
21 | 21 | In the idle state, the button's front plate is not visible. As a finger approaches or a cursor from gaze input targets the surface, the front plate's glowing border becomes visible. There is additional highlighting of the fingertip position on the front plate surface. When pushed with a finger, the front plate moves with the fingertip. When the fingertip touches the surface of the front plate, it shows a subtle pulse effect to give visual feedback of the touch point. |
22 | 22 |
|
23 | | -<img src="/External/ReadMeImages/Button/MRTK_Button_InteractionStates.png" width="600"> |
| 23 | +<img src="../External/ReadMeImages/Button/MRTK_Button_InteractionStates.png" width="600"> |
24 | 24 |
|
25 | 25 | The subtle pulse effect is triggered by the `PressableButton.` The `PressableButton` looks for `ProximityLight(s)` that live on the currently interacting pointer. If any `ProximityLight(s)` are found, the ProximityLight.Pulse method is called which automatically animates shader parameters to display a pulse. |
26 | 26 |
|
@@ -57,28 +57,28 @@ The *ButtonContent* object contains front plate, text label and icon. The *Fron |
57 | 57 | #### Speech Input Handler |
58 | 58 | The [`Interactable`](README_Interactable.md) script in Pressable Button already implements IMixedRealitySpeechHandler. A voice command keyword can be set here. |
59 | 59 |
|
60 | | -<img src="/External/ReadMeImages/Button/MRTK_Button_Speech1.png" width="450"> |
| 60 | +<img src="../External/ReadMeImages/Button/MRTK_Button_Speech1.png" width="450"> |
61 | 61 |
|
62 | 62 | #### Speech Input Profile |
63 | 63 | Additionally, you need to register the voice command keyword in the global `Speech Commands Profile`. |
64 | 64 |
|
65 | | -<img src="/External/ReadMeImages/Button/MRTK_Button_Speech2.png" width="450"> |
| 65 | +<img src="../External/ReadMeImages/Button/MRTK_Button_Speech2.png" width="450"> |
66 | 66 |
|
67 | 67 | #### See-it, Say-it label |
68 | 68 | The Pressable Button prefab has a placeholder TextMesh Pro label under the *SeeItSayItLabel* object. You can use this label to communicate the voice command keyword for the button to the user. |
69 | 69 |
|
70 | | -<img src="/External/ReadMeImages/Button/MRTK_Button_Speech3.png" width="450"> |
| 70 | +<img src="../External/ReadMeImages/Button/MRTK_Button_Speech3.png" width="450"> |
71 | 71 |
|
72 | 72 | ## Using PressableButton on other types of objects |
73 | 73 |
|
74 | 74 | You can use the `PressableButton`s script to configure an object to react to finger pushes. |
75 | 75 |
|
76 | 76 | In the HandInteractionExamples scene, you can take a look at the piano and round button examples which are both using `PressableButton`. |
77 | 77 |
|
78 | | -<img src="/External/ReadMeImages/Button/MRTK_Button_Custom1.png" width="450"> |
| 78 | +<img src="../External/ReadMeImages/Button/MRTK_Button_Custom1.png" width="450"> |
79 | 79 |
|
80 | | -<img src="/External/ReadMeImages/Button/MRTK_Button_Custom2.png" width="450"> |
| 80 | +<img src="../External/ReadMeImages/Button/MRTK_Button_Custom2.png" width="450"> |
81 | 81 |
|
82 | 82 | Each piano key has a `PressableButton` and a `NearInteractionTouchable` script assigned. It is important to verify that the *Local Forward* direction of `NearInteractionTouchable` is correct. It is represented by a white arrow in the editor. Make sure the arrow points away from the button's front face: |
83 | 83 |
|
84 | | -<img src="/External/ReadMeImages/Button/MRTK_Button_Custom3.png" width="450"> |
| 84 | +<img src="../External/ReadMeImages/Button/MRTK_Button_Custom3.png" width="450"> |
0 commit comments