Use the Markup in MR control in Power Apps (preview)
[This article is pre-release documentation and is subject to change.]
Important
This is a preview feature.
Preview features aren’t meant for production use and may have restricted functionality. These features are available before an official release so that customers can get early access and provide feedback.
Add the Markup in MR control in your app to allow users to add markups to visually specify an area or a particular asset in their environment. Users can instantly place mixed reality markups such as arrows, add drawings, and then take photos of the marked-up object.
The Markup in MR control creates a Markup in MR button in your mixed reality app. When a user selects the Markup in MR button, it shows a live camera feed of the device. A user can identify points of interest to begin inking or adding arrows directly on the object.
Ink and arrows will scale appropriately depending on the distance from the objects. When you exit the Markup in MR screen screenshots are captured in the control's Photos output property.
Tip
The mixed-reality (MR) controls work best in well-lit environments with flat-textured surfaces. Tracking is better on LIDAR-enabled devices.
Tip
The MR controls in Power Apps use Babylon and Babylon React Native. Mixed reality content that works in the Babylon sandbox should work in Power Apps through this shared MR platform. If your content works in Babylon but not in Power Apps, ask a question in the Power Apps Community Forum. (Tag it with "mixed reality.")
Use Markup in MR
When a user selects the Markup in MR button, they will be prompted to move their phone side-to-side for better object or area detection. Once an object or area is detected the user can start using the markup toolbar.
Add an arrow
To position an arrow:
Make sure the arrow is selected in the markup toolbar.
Move your device around to position the dot on the object or area you want. to highlight
Select to place the ghost arrow on your device screen.
To rotate the arrow, select and drag the arrow in a circular motion (360 degrees).
Inking
To determine where you start drawing:
Make sure the ink pen is selected in the markup toolbar.
Select and drag on the screen to start drawing.
Add the Markup in MR control
Insert the control into your app as you normally would for any other button control.
With an app open for editing in Power Apps Studio:
Open the Insert tab.
Expand Mixed reality.
Select the control Markup in MR to place it in the center of the app screen or drag and drop it to position it anywhere on the screen.
You can modify the control with several properties.
Tip
Some properties are only available under More options in the Advanced tab on the Markup in MR pane.
| Property | Description | Type | Location |
|---|---|---|---|
| Photos | The photos captured during the mixed reality session. Note: You can upload the mixed-reality photos to OneDrive and show them in a gallery. |
Not Applicable | Not Applicable (Output property only) |
| OnMixedRealitySelect | Behavior that is triggered when exiting the MR experience with new results. | Defined Action | Advanced |
| OnChange | Behavior that is triggered when any property on the button is changed. | Defined Action | Advanced |
Additional properties
| Property | Description |
|---|---|
| BorderColor | The color of a control's border. |
| BorderStyle | Whether a control's border is Solid, Dashed, Dotted, or None. |
| BorderThickness | The thickness of a control's border. |
| Color | The color of text in a control. |
| DisplayMode | Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled). |
| DisabledBorderColor | The color of a control's border if the control's DisplayMode property is set to Disabled. |
| DisabledColor | The color of text in a control if its DisplayMode property is set to Disabled. |
| DisabledFill | The background color of a control if its DisplayMode property is set to Disabled. |
| FillColor | The background color of a control. |
| Font | The name of the family of fonts in which text appears. |
| FontStyle | The style of the text in the control: None, Strikethrough, Underline, or Italic. |
| FontSize | The font size of the text that appears on a control. |
| FontWeight | The weight of the text in a control: Bold, Semibold, Normal, or Lighter |
| Height | The distance between a control's top and bottom edges. |
| HoverBorderColor | The color of a control's border when the user keeps the mouse pointer on that control. |
| HoverColor | The color of the text in a control when the user keeps the mouse pointer on it. |
| HoverFill | The background color of a control when the user keeps the mouse pointer on it. |
| PaddingBottom | The distance between text in a control and the bottom edge of that control. |
| PaddingLeft | The distance between text in a control and the left edge of that control. |
| PaddingRight | The distance between text in a control and the right edge of that control. |
| PaddingTop | The distance between text in a control and the top edge of that control. |
| PressedBorderColor | The color of a control's border when the user taps or clicks that control. |
| PressedColor | The color of text in a control when the user taps or clicks that control. |
| PressedFill | The background color of a control when the user taps or clicks that control. |
| TabIndex | Keyboard navigation order. |
| TextAlignment | The alignment of the text: Center, Left, Right, or Justify |
| Tooltip | Explanatory text that appears when the user hovers over a control. |
| VerticalAlign | The location of text on a control in relation to the vertical center of that control: Middle, Top, or Bottom |
| Visible | Whether a control appears or is hidden. |
| Width | The distance between a control's left and right edges. |
| X | The distance between the left edge of a control and the left edge of its parent container (or the screen if there's no parent container). |
| Y | The distance between the top edge of a control and the top edge of the parent container (or the screen if there's no parent container). |
Output properties
| Property | Description | Type |
|---|---|---|
| Photos | Collects the photos captured during the mixed reality session. You can upload the mixed-reality photos to OneDrive and show them in a gallery. | Not applicable |
Other Mixed Reality controls
View 3D content with the View in 3D control.
View images and 3D content in the real world with the View in mixed reality control.
Create and view predefined 3D shapes with the View shape in mixed reality control.
Measure distance, area, and volume with the Measure in mixed reality control.