Newer Version Available

This content describes an older version of this product. View Latest

AR SpaceCapture Example

The component’s HTML template is minimal and includes a button that initiates the room scan.
1<template>
2  <div style="height: 100%; padding: 0px;margin: 0px;">
3    <table class="rootTable" style="width: 100%; height: 100%; padding: 0px; border-spacing: 5px">
4      <thead>
5        <tr>
6          <th colspan="3">
7            <h1>AR SpaceCapture Demo</h1>
8          </th>
9        </tr>
10      </thead>
11      <tbody>
12        <tr style="height: 1px;">
13          <td><input type="button" class="lightningButton" onclick={handleBeginScanRoomClick} value='Scan Room' style="width: 100%; height: 50px; border: none; color: white; background: #0072d9; border-radius: 6px; font-size: medium; white-space: normal; word-wrap: break-word;"/></td>
14        </tr>
15        <tr>
16          <td colspan="3">
17            <div lwc:ref="previewDivSummary" class="previewDivSummary" style="width: 100%; height: 100%; border: 1px solid #c3c3c3; border-radius: 6px;">
18              Summary: <br>
19              <div lwc:ref="outputDivSummary" id="outputDivSummary" style="margin: 10px;">Results will be shown here soon...</div>
20            </div>
21          </td>
22        </tr>
23        <tr>
24          <td colspan="3">
25            <div lwc:ref="previewDiv" class="previewDiv" style="width: 100%; height: 100%; border: 1px solid #c3c3c3; border-radius: 6px;">
26              Full JSON: <br>
27              <div lwc:ref="outputDiv" id="outputDiv" style="margin: 10px;">Results will be shown here soon...</div>
28            </div>
29          </td>
30        </tr>
31      </tbody>
32    </table>
33  </div>
34</template>

This example uses AR SpaceCapture to let the user scan a room.

1import { LightningElement } from 'lwc';
2import { ShowToastEvent } from 'lightning/platformShowToastEvent';
3import { getARSpaceCapture } from 'lightning/mobileCapabilities';
4
5
6export default class ArSpaceCaptureNew extends LightningElement {
7	myARSpaceCaptureScanner;
8	scanRoomDisabled = false;
9	capturedRoomsData = '';
10
11
12	// When the component is initialized, determine whether to enable the Scan Room button
13	connectedCallback() {
14		this.myARSpaceCaptureScanner = getARSpaceCapture();
15		if (this.myARSpaceCaptureScanner?.isAvailable() != true) {
16			this.scanRoomDisabled = true;
17		}
18	}
19
20
21	handleBeginScanRoomClick() {
22		// Reset capturedRoomsData to empty string before starting a new scan
23		this.capturedRoomsData = '';
24
25
26		// Make sure AR SpaceCapture is available before trying to use it.
27		// Scan Room button also disabled when scanner unavailable
28		if (this.myARSpaceCaptureScanner?.isAvailable()) {
29			let options = {};
30
31
32			// Starting the scanning process
33			this.myARSpaceCaptureScanner.scanRoom(options)
34				.then((results) => {
35					try {
36						this.refs.outputDiv.innerHTML = "";
37					} catch (ex) {
38
39
40					}
41
42
43					const capturedRooms = results.capturedRooms ?? [];
44					if (capturedRooms) {
45						// Array of Rooms
46						let summary = {};
47
48
49						try {
50							summary.isSuccess = results.isSuccess;
51							summary.wallsCount = results.capturedRooms[0].walls.length;
52							summary.floorsCount = results.capturedRooms[0].floors.length;
53							summary.openingsCount = results.capturedRooms[0].openings.length;
54							summary.doorsCount = results.capturedRooms[0].doors.length;
55							summary.windowsCount = results.capturedRooms[0].windows.length;
56
57
58							if (results.capturedRooms[0].floors.length > 0) {
59								summary.roomSizeWidth = results.capturedRooms[0].floors[0].dimensions[0];
60								summary.roomSizeHeight = results.capturedRooms[0].floors[0].dimensions[1];
61								summary.roomVolume = summary.roomSizeWidth * summary.roomSizeHeight;
62							}
63
64
65							if (results.capturedRooms[0].openings.length > 0) {
66								summary.openingSizeWidth = results.capturedRooms[0].openings[0].dimensions[0];
67								summary.openingSizeHeight = results.capturedRooms[0].openings[0].dimensions[1];
68								summary.openingVolume = summary.openingSizeWidth * summary.openingSizeHeight;
69							}
70
71
72							if (results.capturedRooms[0].doors.length > 0) {
73								summary.doorSizeWidth = results.capturedRooms[0].doors[0].dimensions[0];
74								summary.doorSizeHeight = results.capturedRooms[0].doors[0].dimensions[1];
75								summary.openingVolume = summary.doorSizeWidth * summary.doorSizeHeight;
76							}
77
78
79							this.refs.outputDivSummary.innerHTML = "<pre><code>" + JSON.stringify(summary, undefined, 2) + "</code></pre>";
80							this.refs.outputDiv.innerHTML = "<pre><code>" + JSON.stringify(results, undefined, 2) + "</code></pre>";
81						} catch (ex) {
82							this.refs.outputDivSummary.innerHTML = ex.code + "<br>" + ex.message;
83						}
84					} else {
85// Single Room
86
87
88					try {
89							let summary = {};
90
91
92							summary.isSuccess = results.isSuccess;
93							summary.wallsCount = results.capturedRoom.walls.length;
94							summary.floorsCount = results.capturedRoom.floors.length;
95							summary.openingsCount = results.capturedRoom.openings.length;
96							summary.doorsCount = results.capturedRoom.doors.length;
97							summary.windowsCount = results.capturedRoom.windows.length;
98
99
100							if (results.capturedRoom.floors.length > 0) {
101								summary.roomSizeWidth = results.capturedRoom.floors[0].dimensions[0];
102								summary.roomSizeHeight = results.capturedRoom.floors[0].dimensions[1];
103								summary.roomVolume = summary.roomSizeWidth * summary.roomSizeHeight;
104							}
105
106
107
108
109							if (results.capturedRoom.openings.length > 0) {
110								summary.openingSizeWidth = results.capturedRoom.openings[0].dimensions[0];
111								summary.openingSizeHeight = results.capturedRoom.openings[0].dimensions[1];
112								summary.openingVolume = summary.openingSizeWidth * summary.openingSizeHeight;
113							}
114
115
116							if (results.capturedRoom.doors.length > 0) {
117								summary.doorSizeWidth = results.capturedRoom.doors[0].dimensions[0];
118								summary.doorSizeHeight = results.capturedRoom.doors[0].dimensions[1];
119								summary.doorVolume = summary.doorSizeWidth * summary.doorSizeHeight;
120							}
121
122
123							this.refs.outputDivSummary.innerHTML = "<pre><code>" + JSON.stringify(summary, undefined, 2) + "</code></pre>";
124							this.refs.outputDiv.innerHTML = "<pre><code>" + JSON.stringify(results, undefined, 2) + "</code></pre>";
125						} catch (ex) {
126							this.refs.outputDivSummary.innerHTML = ex.code + "<br>" + ex.message;
127						}
128					}
129				})
130				.catch((error) => {
131					// There was an error while scanning
132					this.refs.outputDivSummary.innerHTML = error.code + "<br>" + error.message;
133				})
134				.finally({
135					// Close capture process regardless of whether we completed successfully or had an error
136					// this.myARSpaceCaptureScanner.dismiss();
137				});
138		} else {
139			this.refs.outputDivSummary.innerHTML = 'AR SpaceCapture is not available on your device.';
140		}
141	}
142}