Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Dev→master] Bounding Box and App Bar #1914

Merged
Merged
Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
2963716
Migration to master - Bounding Box & App Bar. Initial commit
cre8ivepark Apr 5, 2018
05036d5
Updating namespace to original one.
cre8ivepark Apr 5, 2018
cabe8a7
Updating namespace to original scheme.
cre8ivepark Apr 5, 2018
a86866b
Separated enums into files.
cre8ivepark Apr 5, 2018
2959807
Adding summary for the AppBar and AppBarButton
cre8ivepark Apr 5, 2018
3727f94
Reverted BoundingBox.cs to original file since there is no need to ch…
cre8ivepark Apr 6, 2018
cae1351
Reverted Duplicator.cs to original since there is no need to change.
cre8ivepark Apr 6, 2018
67d5de5
Adding images for README files. Updating README files for the new bui…
cre8ivepark Apr 6, 2018
cb05064
Update README_BoundingBoxGizmoExample.md
cre8ivepark Apr 6, 2018
9d7be4b
Update README_BoundingBoxGizmoExample.md
cre8ivepark Apr 6, 2018
63c1295
Update README_TwoHandManipulationTest.md
cre8ivepark Apr 6, 2018
f808290
Adding images for README.
cre8ivepark Apr 6, 2018
3a9b017
Merge branch 'Patch4_Dev_BoundingBoxAppBar' of https://github.com/cre…
cre8ivepark Apr 6, 2018
6179d59
Update README.md
cre8ivepark Apr 6, 2018
81dfa8a
Adding images for README.
cre8ivepark Apr 6, 2018
9b3bbaf
Merge branch 'Patch4_Dev_BoundingBoxAppBar' of https://github.com/cre…
cre8ivepark Apr 6, 2018
5a3ba07
Update README.md
cre8ivepark Apr 6, 2018
c92ccf1
Update README.md
cre8ivepark Apr 6, 2018
de1e0a2
Update README.md
cre8ivepark Apr 6, 2018
45b22c7
Updating images for README.
cre8ivepark Apr 6, 2018
1300c03
Merge branch 'Patch4_Dev_BoundingBoxAppBar' of https://github.com/cre…
cre8ivepark Apr 6, 2018
3721e73
Updating images for README.
cre8ivepark Apr 6, 2018
120e52a
Update README_InteractableObjectExample.md
cre8ivepark Apr 7, 2018
573c799
Update README_ObjectCollection.md
cre8ivepark Apr 7, 2018
5d5ab4f
Adding more summary blocks.
cre8ivepark Apr 9, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions Assets/HoloToolkit-Examples/Input/Readme.meta

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# Two Hand Manipulation & normal mode Bounding Box
![Two Hand Manipulation](/External/ReadMeImages/MRTK_TwoHandManipulation.jpg)
This example shows how you can make any object interactable with [TwoHandManipulatable script](/Assets/HoloToolkit/Input/Scripts/Utilities/Interactions/TwoHandManipulatable.cs). This script allows for an object to be movable, scalable, and rotatable with one or two hands. You may also configure the script on only enable certain manipulations. The script works with both HoloLens' gesture input and immersive headset's motion controller input.

**Demo Video**: https://gfycat.com/ColossalEnlightenedAntipodesgreenparakeet

The example also includes Bounding Box for the normal mode. In normal mode, Bounding Box gives the visual boundary of the object when you interact with the object. You can find this behavior in the cliff house. (Grab and move, rotate, scale with two motion controllers)

![Bounding Box Normal Mode](/External/ReadMeImages/MRTK_BoundingBoxNormalMode.jpg)


### Known issues ###
- Adjust mode Bounding Box and App Bar will be added through different Pull Request.
- In the immersive headset, current input system only shows single pointer cursor. While holding an object with the first controller, pointing and seleting the object with the second controller will activate the manipulation behavior. Multi-pointer cursor visualization will be updated through different Pull Request.


### Unity Scene ###
[TwoHandManipulationTest.unity](/Assets/HoloToolkit-Examples/Input/Scenes/TwoHandManipulationTest.unity)
![TwoHandManipulation Scene](/External/ReadMeImages/MRTK_TwoHandManipulationScene.jpg)

In the Hierarchy panel, you can find multiple objects that have TwoHandManipulatable script under SceneContent. Notice how each example object has a collider on it. The collider defines the 'hittable area' for the manipulatable--grabbing any collidable that is on the script's GameObject or any descendant will activate the script.

### TwoHandManipulatable Script ###
![TwoHandManipulation Script](/External/ReadMeImages/MRTK_TwoHandManipulationScript.jpg)

Simply assign TwoHandManipulatable script to any GameObject to make it manipulatable.
The script has several configurable options:
- **HostTransform**: Use this to specify the transform that the scripts manipulates. By default it is the GameObject that this script is on.
- **Bounding Box Prefab**: To visualize the object bounding box, drop the [BoundingBoxBasic.prefab](/Assets/HoloToolkit/UX/Prefabs/BoundingBoxes/BoundingBoxBasic.prefab) here. This is optional.

- **Manipulation Mode**: Specify the enabled manipulations.

- **Constraint On Rotation**: If rotation is enabled, only rotate on these axes.

- **One Handed Movement**: Specify whether you can use just one hand to move the object.



### Bounding Box normal mode visualization ###
![BoundingBox Basic Prefab](/External/ReadMeImages/MRTK_BoundingBoxBasicPrefab.jpg)


**TwoHandManipulatable** script uses optional [**BoundingBoxBasic prefab**](/Assets/HoloToolkit/UX/Prefabs/BoundingBoxes/BoundingBoxBasic.prefab) to visualize the borders on manipulation interaction. It shows/hides BoundingBoxBasic in **OnManipulationStarted** and **OnManipulationEnded** event. **TwoHandManipulatable** script can work without BoundingBox visualization. Simply don't assign the BoundingBoxBasic prefab in the Inspector panel.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
# Bounding Box & App Bar
![Bounding Box](/External/ReadMeImages/MRTK_AppBar_BoundingBox.jpg)
This example scene demonstrates how to make objects manipulatable using [BoundingBoxRig](/Assets/HoloToolkit/UX/Scripts/BoundingBoxes/BoundingBoxRig.cs) script. The bounding box is a standard interface for manipulating object in Windows Mixed Reality. Using gizmo on the corners and edges, you can scale or rotate the object.
App Bar provides the button for entering/exiting 'Adjust' mode to enable/disable Bounding Box. For more information please see ['App Bar and Bounding Box'](https://developer.microsoft.com/en-us/windows/mixed-reality/app_bar_and_bounding_box) on Windows Dev Center.

## Interaction behavior ##
There are two modes in the Bounding Box: Normal mode and Adjust mode.
### Normal mode ###
- Bounding Box is not visible.
- App Bar shows 'Adjust' button

### Adjust mode ###
- Bounding Box and gizmo is visible
- App Bar shows 'Done' button

### Demo video ###
https://gfycat.com/TameQuaintGnu

When you select one of the gizmo, it is highlighted and other gizmos becomes invisible. This visual feedback helps the user to understand which handle is beining interacted with.


<img src="/External/ReadMeImages/MRTK_AppBar_BoundingBox_Interaction.jpg" width="600">

## Example scene ##
[BoundingBoxExample.unity](/Assets/HoloToolkit-Examples/UX/Scenes/BoundingBoxGizmoExample.unity)

<img src="/External/ReadMeImages/MRTK_AppBar_BoundingBox_ExampleScene.jpg" width="600">



## Structure of Bounding Box & App Bar ##
![Bounding Box](/External/ReadMeImages/MRTK_AppBar_BoundingBox_Structure.jpg)
### [BoundingBoxRig script](/Assets/HoloToolkit/UX/Scripts/BoundingBoxes/BoundingBoxRig.cs) ###
This script gets added as a Component to a GameObject. An object with this script as a Component will appear with an AppBar floating in front of it. The BoundingBoxRig script creates a rig of corner and mid-edge handles for scaling and rotating an object. The Adjust button in the AppBar turns on and off the rig. This script cooperates with the TwoHandedManipulation script.



### [BoundingBoxGizmoHandle script](/Assets/HoloToolkit/UX/Scripts/BoundingBoxes/BoundingBoxGizmoHandle.cs) ###
This script is not used directly. It is already included in the BoundingBoxRig script. It takes care of creating the rotation and scale handles that are used to adjust the Target object.




### [AppBar](/Assets/HoloToolkit/UX/Scripts/AppBar/AppBar.cs) and [AppBarButton](/Assets/HoloToolkit/UX/Scripts/AppBar/AppBarButton.cs) script ###
AppBar uses [HolographicButton](/Assets/HoloToolkit/UX/Prefabs/Buttons/HolographicButton.prefab) as a template to build a button collection. In default, it includes Show, Hide, Adjust, Done and Remove buttons. Depending on the current mode - Default, Hidden and Manipulation - it controls the visiblity of each button. Based on the number of the buttons, it adjusts the width of the BackgroundBar component. AppBar script has the logic for following user's position in FollowBoundingBox() function.


## How to use Bounding Box & App Bar ##
You can enable Bounding Box and App Bar by simply assigning [BoundingBoxRig script](/Assets/HoloToolkit/UX/Scripts/BoundingBoxes/BoundingBoxRig.cs) to any GameObject. **BoundingBoxRig** script contains these items.
- **BoundingBoxBasic prefab** - Visualizes boundary wireframe
- **AppBar prefab** - Constructs App Bar
- **BoundingBoxHandle material** - Default Material for the gizmo
- **BoundingBoxGrabbed material** - Material for the gizmo when it is being interacted

![BoundingBox Script Setup](/External/ReadMeImages/MRTK_AppBar_BoundingBox_ScriptSetup.jpg)
![BoundingBox Material Setup](/External/ReadMeImages/MRTK_AppBar_BoundingBox_Materials.jpg)

## Inspector Properties ##
The BoundingBoxRig exposes several properties in the Inspector. 'Flattening' lets you create a BoundingBoxRig that treats the object as if it were flat in one of its dimensions.

Customization Settings- let you specify custom materials for the Scale cubes and the Rotate spheres. Additionally, you can specify a Material that is used for any selected handle.

Behavior- These settings effect how the BoundingBoxRig Scales and Rotates the Target object. Rotation Type allows the object to be rotated in either World Coordinates, or Model Coordinates. You can also specify whether rotation occurs by moving the hand or controller, or by rotating a controller.

## Combining with HandDraggable script ##
Bounding Box with gizmo provides the interface for scaling and rotating object. To make the object movable, you can assign [HandDraggable script](/Assets/HoloToolkit/InputModule/Scripts/Utilities/Interactions/HandDraggable.cs) to the object. With HandDraggable script, you can grab the body of the object and move. You can move object in both normal mode and adjust mode since it does not require the gizmo interface.

## Combining with TwoHandManipulatable script ##
[TwoHandManipulatable script](/Assets/HoloToolkit/Input/Scripts/Utilities/Interactions/TwoHandManipulatable.cs) allows for an object to be movable, scalable, and rotatable with one or two hands. This script can be combined with BoudningBoxRig script, providing both options for manipulating objects. You can find this interaction behavior in the cliff house. Using two motion controllers and select buttons, you can move/rotate/scale any objects without entering adjust mode. Still you can enter adjust mode by pressing the button on the AppBar and use gizmo to scale/rotate the object. For more detailed information about TwoHandManipulatable script, please refer to the [README file](/Assets/HoloToolkit-Examples/Input/Readme/README_TwoHandManipulationTest.md).


## How to add custom buttons to the App Bar ##
You can add additional buttons to the App Bar for other actions. AppBar prefab provides convenient options in the Inspector panel. Find the AppBar prefab in the Project panel and select it. In the Inspector panel, expand **Buttons** section. By modifying the number of **Size** field, you will be able to see the Element populated in the Buttons section. You can specify details such as postion, name and icon texture name. These buttons are using [HolographicButton](/Assets/HoloToolkit/UX/Prefabs/Buttons/HolographicButton.prefab) prefab as a template. HolographicButton is based on [CompoundButton](/Assets/HoloToolkit/UX/Scripts/Buttons/CompoundButton.cs) script series. For more details about CompoundButton, please refer to the [README file of the InteractableObjectExample](/Assets/HoloToolkit-Examples/UX/Readme/README_InteractableObjectExample.md).

![AppBar Custom Button](/External/ReadMeImages/MRTK_AppBar_BoundingBox_CustomButtons.jpg)

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -11,38 +11,38 @@ This is the base of the button component. You will need this script to build any

![Compound Button](/External/ReadMeImages/MRTK_CompoundButton_Inspector.jpg)

### [Compound Button Mesh](/Assets/HoloToolkit/UX/Scripts/Buttons/CompoundButtonMesh.cs) ###
### [Compound Button Mesh](/Assets/HoloToolkit/UX/Scripts/Buttons/Utilities/CompoundButtonMesh.cs) ###
Use this script to use various types of custom mesh. You can use your own 3D models imported from 3D modeling software. Using this script, you can easily change the scale, offset of the mesh or material properties such as color for the different input interaction states. To create an Interactable Object using script, it is recommended to create an empty GameObject as a container and put the 3D mesh model under it as child component. This will prevent unexpected behavior from different scaling or offset values.

![Compound Button](/External/ReadMeImages/MRTK_CompoundButtonMesh_Inspector.jpg)

### [Compound Button Icon](/Assets/HoloToolkit/UX/Scripts/Buttons/CompoundButtonIcon.cs) ###
### [Compound Button Icon](/Assets/HoloToolkit/UX/Scripts/Buttons/Utilities/CompoundButtonIcon.cs) ###
Using this scripts, you can use Texture 2D assets to display icons. To assgin your custom icon texture, expand **DefaultButtonIconProfileTexture**. You will be able to find empty slots for the Texture 2D asset. Once you assign Texture 2D asset, you can select the icon using the drop down on the bottom of the profile section.

![Compound Button](/External/ReadMeImages/MRTK_CompoundButtonIcon_Inspector.jpg)
![Compound Button Icon Texture](/External/ReadMeImages/MRTK_CompoundButtonIconTexture.jpg)

### [Compound Button Text](/Assets/HoloToolkit/UX/Scripts/Buttons/CompoundButtonText.cs) ###
### [Compound Button Text](/Assets/HoloToolkit/UX/Scripts/Buttons/Utilities/CompoundButtonText.cs) ###
This scripts helps you manage a TextMesh component to display text on your button. This script can be used in conjunction with a CompoundButtonSpeech component to automatically link your button to spoken keywords.

![Compound Button](/External/ReadMeImages/MRTK_CompoundButtonText_Inspector.jpg)

### [Compound Button Sound](/Assets/HoloToolkit/UX/Scripts/Buttons/CompoundButtonSounds.cs) ###
### [Compound Button Sound](/Assets/HoloToolkit/UX/Scripts/Buttons/Utilities/CompoundButtonSounds.cs) ###
Use this script to add audio feedback for the different input interaction states.

![Compound Button](/External/ReadMeImages/MRTK_CompoundButtonSound_Inspector.jpg)

### [Compound Button Anim](/Assets/HoloToolkit/UX/Scripts/Buttons/CompoundButtonAnim.cs) ###
### [Compound Button Anim](/Assets/HoloToolkit/UX/Scripts/Buttons/Utilities/CompoundButtonAnim.cs) ###
This is the base of the button component. You will need this script to build any types of Interactable Objects.

![Compound Button](/External/ReadMeImages/MRTK_CompoundButtonAnim_Inspector.jpg)

### [Compound Button Speech](/Assets/HoloToolkit/UX/Scripts/Buttons/CompoundButtonSpeech.cs) ###
### [Compound Button Speech](/Assets/HoloToolkit/UX/Scripts/Buttons/Utilities/CompoundButtonSpeech.cs) ###
Use this script to automatically register keywords for your button in the Speech Manager (This script is experimental and still being tested).

![Compound Button](/External/ReadMeImages/MRTK_CompoundButtonSpeech_Inspector.jpg)

### [Compound Button Toggle](/Assets/HoloToolkit/UX/Scripts/Buttons/CompoundButtonToggle.cs) ###
### [Compound Button Toggle](/Assets/HoloToolkit/UX/Scripts/Buttons/Utilities/CompoundButtonToggle.cs) ###
Use this script to add toggle on/off state.

## Receiver ##
Expand Down
14 changes: 7 additions & 7 deletions Assets/HoloToolkit-Examples/UX/Readme/README_ObjectCollection.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,22 @@ Object collection is a script which helps you lay out an array of objects in pre
## Object collection examples ##
Periodic Table of the Elements is an example app that demonstrates how Object collection works. It uses Object collection to layout the 3D element boxes in different shapes.

<img src="https://github.com/Microsoft/MRDesignLabs_Unity/blob/master/External/ReadMeImages/ObjectCollection_Types.jpg" alt="ObjectCollection">
<img src="/External/ReadMeImages/MRTK_ObjectCollection_Types.jpg" alt="ObjectCollection">

### 3D Objects ###

You can use Object collection to layout imported 3D objects. The example below shows the plane and cylindrical layouts of 3D chair model objects using Object collection.

<img src="https://github.com/Microsoft/MRDesignLabs_Unity/blob/master/External/ReadMeImages/ObjectCollection_3DObjects.jpg" alt="ObjectCollection">
<img src="/External/ReadMeImages/MRTK_ObjectCollection_3DObjects.jpg" alt="ObjectCollection">

### 2D Objects ###

You can also use 2D images with Object collection. For example, you can easily display multiple images in grid style using Object collection.


<img src="https://github.com/Microsoft/MRDesignLabs_Unity/blob/master/External/ReadMeImages/ObjectCollection_Layout_3DObjects_3.jpg" alt="ObjectCollection">
<img src="/External/ReadMeImages/MRTK_ObjectCollection_Layout_3DObjects_3.jpg" alt="ObjectCollection">

<img src="https://github.com/Microsoft/MRDesignLabs_Unity/blob/master/External/ReadMeImages/ObjectCollection_Layout_2DImages.jpg" alt="ObjectCollection">
<img src="/External/ReadMeImages/MRTK_ObjectCollection_Layout_2DImages.jpg" alt="ObjectCollection">

## Ways to use Object collection ##
You can find the examples in the scene **ObjectCollection_Examples.unity**. In this scene, you can find the **ObjectCollection.cs** script under **Assets/HoloToolkit/UX/Scripts/Collections**
Expand All @@ -32,8 +32,8 @@ You can find the examples in the scene **ObjectCollection_Examples.unity**. In t
4. You will then see the object(s) laid out in selected Surface Type.


<img src="https://github.com/Microsoft/MRDesignLabs_Unity/blob/master/External/ReadMeImages/ObjectCollection_Unity.jpg" alt="ObjectCollection in Unity">
<img src="/External/ReadMeImages/MRTK_ObjectCollection_Unity.jpg" alt="ObjectCollection in Unity">

<img src="https://github.com/Microsoft/MRDesignLabs_Unity/blob/master/External/ReadMeImages/ObjectCollection_ExampleScene1.jpg" alt="ObjectCollection in Unity">
<img src="/External/ReadMeImages/MRTK_ObjectCollection_ExampleScene1.jpg" alt="ObjectCollection in Unity">

<img src="https://github.com/Microsoft/MRDesignLabs_Unity/blob/master/External/ReadMeImages/ObjectCollection_ExampleScene2.jpg" alt="ObjectCollection in Unity">
<img src="/External/ReadMeImages/MRTK_ObjectCollection_ExampleScene2.jpg" alt="ObjectCollection in Unity">
Loading