|
| 1 | +--- |
| 2 | +title: Create an app using the Measure in MR control |
| 3 | +description: Learn how to use the Measure in MR control in Power Apps. |
| 4 | +author: joel-lindstrom |
| 5 | +ms.service: powerapps |
| 6 | +ms.subservice: canvas-maker |
| 7 | +search.audienceType: |
| 8 | + - maker |
| 9 | +search.app: |
| 10 | + - PowerApps |
| 11 | +ms.topic: conceptual |
| 12 | +ms.custom: canvas |
| 13 | +ms.date: 12/15/2021 |
| 14 | +ms.author: anuitz |
| 15 | +ms.reviewer: tapanm |
| 16 | +contributors: |
| 17 | + - tapanm-msft |
| 18 | + - anuitz |
| 19 | +--- |
| 20 | + |
| 21 | +# Create an app using the Measure in MR control |
| 22 | + |
| 23 | +You can use the [Measure in MR](../mixed-reality-component-measure-distance.md) control in your app to let users measure distance, area, and volume. During the measurement, you create two-dimensional and three-dimensional polygons that can be used to confirm how a certain-sized object would fit within a space. |
| 24 | + |
| 25 | +The control creates a button in your app. When app users select the button, it shows a live camera feed of the device. App users can then specify a starting point, and one or multiple sequential endpoints to measure between. The instances of measured segments are shown directly on the live camera feed. |
| 26 | + |
| 27 | +When the user exits the control, the measurements that were taken are captured in the **Measurements** property so they can be saved or stored. |
| 28 | + |
| 29 | +Screenshots taken during the mixed reality experience are stored in the **Photos** property for viewing within the app. |
| 30 | + |
| 31 | +In this article, we'll create a screen in an app to use the **Measure in MR** control to measure the area of a user-defined space as well as view a photo of the space that was measured. |
| 32 | + |
| 33 | +Watch this video to learn how to build mobile apps with Measure in MR control: |
| 34 | +> [!VIDEO https://www.microsoft.com/videoplayer/embed/RWLPQh] |
| 35 | +
|
| 36 | +## Prerequisites |
| 37 | + |
| 38 | +See [prerequisites for mixed-reality capable devices](../mixed-reality-overview.md#prerequisites). |
| 39 | + |
| 40 | +## Create the app with Measure in MR control |
| 41 | + |
| 42 | +1. Open an app in [Power Apps Studio](https://make.powerapps.com). |
| 43 | + |
| 44 | +1. Select the **Insert** tab. |
| 45 | + |
| 46 | +1. Expand **Mixed Reality**. |
| 47 | + |
| 48 | +1. Select the **Measure in MR** control to insert it on the screen. |
| 49 | + |
| 50 | +1. Position the control near the bottom of the screen. |
| 51 | + |
| 52 | +1. Change the following properties for the control using the property pane on the right-side of the screen. |
| 53 | + |
| 54 | + | Property | Value | |
| 55 | + |---------------------|--------------| |
| 56 | + | Text | Measure Area | |
| 57 | + | Unit of measurement | Feet | |
| 58 | + | Measurement type | Area | |
| 59 | + |
| 60 | + :::image type="content" source="media\build-apps-measure-in-mr\button-properties.png" alt-text="Measure Area button properties."::: |
| 61 | + |
| 62 | +1. Select the Advanced tab and change the **OnMixedRealitySelect** property to the following formula: |
| 63 | + |
| 64 | + ```powerapps-dot |
| 65 | + ClearCollect(colMRMeasurements, Self.Measurements); |
| 66 | + ClearCollect(colMRPhotos, Self.Photos) |
| 67 | + ``` |
| 68 | +
|
| 69 | + :::image type="content" source="media\build-apps-measure-in-mr\onmixedrealityselect-formula.png" alt-text="OnMixedRealitySelect formula."::: |
| 70 | +
|
| 71 | + This formula will allow the user to define areas to be measured in square feet and store the most recent results of the measurements in a collection named **colMRMeasurements**, and the most recent photos in a collection named **colMRPhotos**. |
| 72 | +
|
| 73 | +1. Add a text label to the screen and move it to the top-left corner of the screen. |
| 74 | +
|
| 75 | +1. Change the following properties of the added text label: |
| 76 | +
|
| 77 | + | Property | Value | |
| 78 | + |----------------|--------------| |
| 79 | + | Text | Measure Area | |
| 80 | + | Font size | 24 | |
| 81 | + | Font weight | Semibold | |
| 82 | + | Text alignment | Center | |
| 83 | + | Width | Parent.Width | |
| 84 | + | Color | `RGBA(255, 255, 255, 1)` | |
| 85 | + | Fill | `RGBA(56, 96, 178, 1)` | |
| 86 | +
|
| 87 | + :::image type="content" source="media\build-apps-measure-in-mr\header-label.png" alt-text="Header label."::: |
| 88 | +
|
| 89 | + This label provides a header for the screen. |
| 90 | +
|
| 91 | +1. Add an image control, and move it just below the header label. |
| 92 | +
|
| 93 | +1. Change the following properties for the image control: |
| 94 | +
|
| 95 | + | Property | Value | |
| 96 | + |------------------|-----------------------------| |
| 97 | + | Image | `First(colMRPhotos).ImageURI` | |
| 98 | + | Border Thickness | 2 | |
| 99 | +
|
| 100 | + The image control will display the first image taken from the **Measure in MR** control. |
| 101 | +
|
| 102 | +1. Add another label to the screen, positioning it below the image control. |
| 103 | +
|
| 104 | +1. Change the **Text** property of the label to the following formula: |
| 105 | +
|
| 106 | + ```powerapps-dot |
| 107 | + "Area: " & If(IsEmpty(colMRMeasurements), "no area measured", First(colMRMeasurements).Area & " sq. " & First(colMRMeasurements).Unit) |
| 108 | + ``` |
| 109 | +
|
| 110 | + :::image type="content" source="media\build-apps-measure-in-mr\completed-app.png" alt-text="Completed app."::: |
| 111 | +
|
| 112 | + This label will display the first area measurement and unit type that is collected from the **Measure in MR** control. If there's no measurement to be returned, the text will show **Area: no area measured** to let the user know that no value is present. |
| 113 | +
|
| 114 | +## Test the app |
| 115 | +
|
| 116 | +> [!TIP] |
| 117 | +> Watch the video embedded at the top of this article to see how the app works. |
| 118 | +
|
| 119 | +Now that all the controls have been added, [save and publish](../save-publish-app.md) the app. On a mixed-reality capable device (as defined in the Prerequisites section), open the app, and press the **Measure Area** button. This action will open the **Measure in MR** experience, allowing the user to define an area to be measured. |
| 120 | +
|
| 121 | +Follow the on-screen instructions to calibrate the device by slowly moving it left and right while pointing the camera at a surface to be measured. Once the calibration is complete, you'll see an array of dots on the surface as well as a circle and dot reticle in the center of the screen. This reticle is used to define lengths, areas, and volumes by using the + button to add points and line segments. |
| 122 | +
|
| 123 | +Photos can be captured using the camera button. These photos will show the lengths, areas, and volumes defined by the user. |
| 124 | +
|
| 125 | +There's an undo button to undo any placed points. |
| 126 | +
|
| 127 | +Begin by placing a point using the **+** button. You'll notice that an orange line and measurement now appear connected to the point you placed. Place a second point and notice how a line with measurement appears between the two points you place. Continue placing points until the desired shape has been fully defined. To close a shape, place the reticle on the first point made and use the **+** button. You'll notice that the center point of the reticle changes color from white to green, indicating that the shape can be closed. If two of the sides of the shape intersect, or you try to close a shape using any other point than the first one. You'll notice that the center point of the reticle changes from white to red, indicating that a point cannot be placed there. |
| 128 | +
|
| 129 | +Once an area has been fully defined, position the device so that a picture can be taken of the area you defined and use the camera button to do so. The select the **Submit** button. A confirmation dialog will appear, asking if you've finished with your measurements. If you have more measurements to enter, select **Cancel** to return to the MR environment. If you're finished, select **Submit** to be taken back to the app screen. |
| 130 | +
|
| 131 | +You'll see the first picture taken as well as the calculated area of the shape you defined as well as the units, in this case square-feet. |
| 132 | +
|
| 133 | +The measurement and photo can then be used like any other photo or text field in Power Apps, for instance to be sent in an email or stored in a table in Microsoft Dataverse. |
| 134 | +
|
| 135 | +### See also |
| 136 | +
|
| 137 | +- [Measure in MR control](../mixed-reality-component-measure-distance.md) |
| 138 | +- [Add mixed reality controls to your canvas app](../mixed-reality-overview.md) |
0 commit comments