1# 使用运动和方向传感器监测设备状态 2 3## 概述 4 5运动和方向传感器,如加速度计、陀螺仪等,能够监测设备的运动状态和方向变化,例如设备的旋转、倾斜等。 6通过W3C标准协议接口,Web组件能够访问这些传感器的数据,进而实现更加丰富的用户交互功能。例如,开发者在网页应用中可以利用加速度计识别运动模式,指导用户进行健身运动,利用陀螺仪捕获玩家手中设备的倾斜和旋转动作,实现无按钮操控的游戏体验。 7 8通过在JavaScript中调用以下支持的W3C标准协议接口,可以访问运动和方向传感器。 9 10| 接口 | 名称 | 说明 | 11| ------------------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- | 12| Accelerometer | 加速度 | 可获取设备X、Y、Z轴方向的加速度数据。 | 13| Gyroscope | 陀螺仪 | 可获取设备X、Y、Z轴方向的角速度数据。 | 14| AbsoluteOrientationSensor | 绝对定位 | 可获取表示设备绝对定位方向的四元数,包含X、Y、Z和W分量。 | 15| RelativeOrientationSensor | 相对定位 | 可获取表示设备相对定位方向的四元数,包含X、Y、Z和W分量。 | 16| DeviceMotionEvent | 设备运动事件 | 通过监听该事件,可获取设备在X、Y、Z轴方向上的加速度数据,设备在X、Y、Z轴方向上包含重力的加速度数据,以及设备在alpha、beta、gamma轴方向上旋转的速率数据。 | 17| DeviceOrientationEvent | 设备方向事件 | 通过监听该事件,可获取设备绕X、Y、Z轴的角度。 | 18 19## 需要权限 20 21使用加速度、陀螺仪及设备运动事件接口时,需在配置文件module.json5中声明相应的传感器权限。具体配置方法请参考[在配置文件中声明权限](../security/AccessToken/declare-permissions.md)。 22 23``` 24 "requestPermissions":[ 25 { 26 "name" : "ohos.permission.ACCELEROMETER" // 加速度权限 27 }, 28 { 29 "name" : "ohos.permission.GYROSCOPE" // 陀螺仪权限 30 } 31 ] 32``` 33 34Web组件在对接运动和方向传感器时,需配置[onPermissionRequest](../reference/apis-arkweb/ts-basic-components-web.md#onpermissionrequest9)接口,通过该接口接收权限请求通知。 35 36## 开发步骤 37 381. 应用侧代码中,Web组件配置[onPermissionRequest](../reference/apis-arkweb/ts-basic-components-web.md#onpermissionrequest9)接口,可通过[PermissionRequest](../reference/apis-arkweb/ts-basic-components-web.md#permissionrequest9)的[getAccessibleResource](../reference/apis-arkweb/ts-basic-components-web.md#getaccessibleresource9)接口获取请求权限的资源类型,当资源类型为TYPE_SENSOR时,进行传感器授权处理。 39 40 ```ts 41 import { webview } from '@kit.ArkWeb'; 42 import { abilityAccessCtrl, PermissionRequestResult } from '@kit.AbilityKit'; 43 import { BusinessError } from '@kit.BasicServicesKit'; 44 45 @Entry 46 @Component 47 struct WebComponent { 48 controller: webview.WebviewController = new webview.WebviewController() 49 aboutToAppear() { 50 // 配置Web开启调试模式 51 webview.WebviewController.setWebDebuggingAccess(true); 52 // 访问控制管理, 获取访问控制模块对象。 53 let atManager = abilityAccessCtrl.createAtManager(); 54 try { 55 atManager.requestPermissionsFromUser(getContext(this), ['ohos.permission.ACCELEROMETER', 'ohos.permission.GYROSCOPE'] 56 , (err: BusinessError, data: PermissionRequestResult) => { 57 console.info('data:' + JSON.stringify(data)); 58 console.info('data permissions:' + data.permissions); 59 console.info('data authResults:' + data.authResults); 60 }) 61 } catch (error) { 62 console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`); 63 } 64 } 65 66 build() { 67 Column() { 68 Web({ src: $rawfile('index.html'), controller: this.controller }) 69 .onPermissionRequest((event) => { 70 if (event) { 71 AlertDialog.show({ 72 title: 'title', 73 message: 'text', 74 primaryButton: { 75 value: 'deny', 76 action: () => { 77 event.request.deny(); 78 } 79 }, 80 secondaryButton: { 81 value: 'onConfirm', 82 action: () => { 83 event.request.grant(event.request.getAccessibleResource()); 84 } 85 }, 86 autoCancel: false, 87 cancel: () => { 88 event.request.deny(); 89 } 90 }) 91 } 92 }) 93 } 94 } 95 } 96 ``` 97 982. 在前端页面代码中,利用JavaScript调用传感器相关的W3C标准协议接口。 99 100 ```html 101 <!DOCTYPE HTML> 102 <html> 103 <head> 104 <meta charset="utf-8" /> 105 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 106 <meta name="misapplication-tap-highlight" content="no" /> 107 <meta name="HandheldFriendly" content="true" /> 108 <meta name="MobileOptimized" content="320" /> 109 <title>运动和方向传感器</title> 110 <meta charset="UTF-8"> 111 <style> 112 body { 113 font-family: Arial, sans-serif; 114 } 115 </style> 116 <script type="text/javascript"> 117 // 访问设备的加速度计传感器,并获取其数据。 118 function getAccelerometer() { 119 var acc = new Accelerometer({frequency: 60}); 120 acc.addEventListener('activate', () => console.log('Ready to measure.')); 121 acc.addEventListener('error', error => console.log('Error type: ' + error.type + ', error: ' + error.error )); 122 acc.addEventListener('reading', () => { 123 console.log(`Accelerometer ${acc.timestamp}, ${acc.x}, ${acc.y}, ${acc.z}.`); 124 }); 125 acc.start(); 126 } 127 128 // 访问设备的陀螺仪传感器,并获取其数据。 129 function getGyroscope() { 130 var gyr = new Gyroscope({frequency: 60}); 131 gyr.addEventListener('activate', () => console.log('Ready to measure.')); 132 gyr.addEventListener('error', error => console.log('Error type: ' + error.type + ', error: ' + error.error )); 133 gyr.addEventListener('reading', () => { 134 console.log(`Gyroscope ${gyr.timestamp}, ${gyr.x}, ${gyr.y}, ${gyr.z}.`); 135 }); 136 gyr.start(); 137 } 138 139 // 访问设备的方向传感器,并获取其数据。 140 function getAbsoluteOrientationSensor() { 141 var aos = new AbsoluteOrientationSensor({frequency: 60}); 142 aos.addEventListener('activate', () => console.log('Ready to measure.')); 143 aos.addEventListener('error', error => console.log('Error type: ' + error.type + ', error: ' + error.error )); 144 aos.addEventListener('reading', () => { 145 console.log(`AbsoluteOrientationSensor data: ${aos.timestamp}, ${aos.quaternion}`); 146 }); 147 aos.start(); 148 } 149 150 // 监听设备的运动事件,并执行相应的处理逻辑。 151 function listenDeviceMotionEvent() { 152 removeDeviceMotionEvent(); 153 if ('DeviceMotionEvent' in window) { 154 window.addEventListener('devicemotion', handleMotionEvent, false); 155 } else { 156 console.log('不支持DeviceMotionEvent'); 157 } 158 } 159 160 // 移除之前添加的设备运动事件监听器。 161 function removeDeviceMotionEvent() { 162 if ('DeviceMotionEvent' in window) { 163 window.removeEventListener('devicemotion', handleMotionEvent, false); 164 } else { 165 console.log('不支持DeviceOrientationEvent'); 166 } 167 } 168 169 // 处理运动事件。 170 function handleMotionEvent(event) { 171 const x = event.accelerationIncludingGravity.x; 172 const y = event.accelerationIncludingGravity.y; 173 const z = event.accelerationIncludingGravity.z; 174 console.log(`DeviceMotionEvent data: ${event.timeStamp}, ${x}, ${y}, ${z}`); 175 } 176 177 // 监听设备方向的变化,并执行相应的处理逻辑。 178 function listenDeviceOrientationEvent() { 179 removeDeviceOrientationEvent(); 180 if ('DeviceOrientationEvent' in window) { 181 window.addEventListener('deviceorientation', handleOrientationEvent, false); 182 } else { 183 console.log('不支持DeviceOrientationEvent'); 184 } 185 } 186 187 // 移除之前添加的设备方向事件监听器。 188 function removeDeviceOrientationEvent() { 189 if ('DeviceOrientationEvent' in window) { 190 window.removeEventListener('deviceorientation', handleOrientationEvent, false); 191 } else { 192 console.log('不支持DeviceOrientationEvent'); 193 } 194 } 195 196 // 监听设备方向的变化,并执行相应的处理逻辑。 197 function listenDeviceOrientationEvent2() { 198 removeDeviceOrientationEvent2(); 199 if ('DeviceOrientationEvent' in window) { 200 window.addEventListener('deviceorientationabsolute', handleOrientationEvent, false); 201 } else { 202 console.log('不支持DeviceOrientationEvent'); 203 } 204 } 205 206 // 移除之前添加的设备方向事件监听器。 207 function removeDeviceOrientationEvent2() { 208 if ('DeviceOrientationEvent' in window) { 209 window.removeEventListener('deviceorientationabsolute', handleOrientationEvent, false); 210 } else { 211 console.log('不支持DeviceOrientationEvent'); 212 } 213 } 214 215 // 处理方向事件。 216 function handleOrientationEvent(event) { 217 console.log(`DeviceOrientationEvent data: ${event.timeStamp}, ${event.absolute}, ${event.alpha}, ${event.beta}, ${event.gamma}`); 218 } 219 </script> 220 </head> 221 <body> 222 <div id="dcontent" class="dcontent"> 223 <h3>运动和方向:</h3> 224 <ul class="dlist"> 225 <li><button type="button" onclick="getAccelerometer()">加速度</button></li> 226 <li><button type="button" onclick="getGyroscope()">陀螺仪</button></li> 227 <li><button type="button" onclick="getAbsoluteOrientationSensor()">设备方向(绝对定位)</button></li> 228 <li><button type="button" onclick="listenDeviceMotionEvent()">设备运动事件</button></li> 229 <li><button type="button" onclick="listenDeviceOrientationEvent()">设备方向事件</button></li> 230 <li><button type="button" onclick="listenDeviceOrientationEvent2()">设备方向事件(绝对定位)</button></li> 231 </ul> 232 </div> 233 </body> 234 </html> 235 ``` 236