#跟着若城学鸿蒙# web篇-运动和方向传感器监测
前言
有些前端业务场景需要用到一些传感器，比如运动传感器和方向传感器来实现摇一摇功能。这就需要前端能够直接获取到相关数据，而不是通过 js 调用客户端代码来实现。
权限
还是需要在模块的module.json5文件中添加相关权限
{"name" : "ohos.permission.ACCELEROMETER" // 加速度权限},{"name" : "ohos.permission.GYROSCOPE" // 陀螺仪权限}
由于不是敏感权限，添加后就可以使用，不用进行动态申请。
web组件
在 web 组件中我们需要通过onPermissionRequest方法来获取前端要请求的权限，并且根据用户的选择来判断是否可以授权
//权限申请.onPermissionRequest((event)=>{console.error("web申请权限",event.request.getAccessibleResource())AlertDialog.show({title: '权限申请',message: event.request.getAccessibleResource().toString(),primaryButton: {value: '拒绝',action: () => {event.request.deny();}},secondaryButton: {value: '允许',action: () => {event.request.grant(event.request.getAccessibleResource());}},autoCancel: false,cancel: () => {event.request.deny();}})})
需要注意的是，这里的event.request.getAccessibleResource()返回一个字符串数组，我们可以通过每一项的值来判断需要是否需要动态申请权限。这里示例中只有运动和方向传感器，因此就直接弹窗询问用户是否可以授权，并且在用户授权后直接通知前端可以使用，不需要进行动态权限申请。
前端
前端页面就比较简单了，按照 w3c标准来就行了
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="misapplication-tap-highlight" content="no" /><meta name="HandheldFriendly" content="true" /><meta name="MobileOptimized" content="320" /><title>运动和方向传感器</title><meta charset="UTF-8"><style>body {font-family: Arial, sans-serif;}</style><script type="text/javascript">// 访问设备的加速度计传感器，并获取其数据。function getAccelerometer() {var acc = new Accelerometer({frequency: 60});acc.addEventListener('activate', () => console.log('Ready to measure.'));acc.addEventListener('error', error => console.log('Error type: ' + error.type + ', error: ' + error.error ));acc.addEventListener('reading', () => {console.log(`Accelerometer ${acc.timestamp}, ${acc.x}, ${acc.y}, ${acc.z}.`);});acc.start();}// 访问设备的陀螺仪传感器，并获取其数据。function getGyroscope() {var gyr = new Gyroscope({frequency: 60});gyr.addEventListener('activate', () => console.log('Ready to measure.'));gyr.addEventListener('error', error => console.log('Error type: ' + error.type + ', error: ' + error.error ));gyr.addEventListener('reading', () => {console.log(`Gyroscope ${gyr.timestamp}, ${gyr.x}, ${gyr.y}, ${gyr.z}.`);});gyr.start();}// 访问设备的方向传感器，并获取其数据。function getAbsoluteOrientationSensor() {var aos = new AbsoluteOrientationSensor({frequency: 60});aos.addEventListener('activate', () => console.log('Ready to measure.'));aos.addEventListener('error', error => console.log('Error type: ' + error.type + ', error: ' + error.error ));aos.addEventListener('reading', () => {console.log(`AbsoluteOrientationSensor data: ${aos.timestamp}, ${aos.quaternion}`);});aos.start();}// 监听设备的运动事件，并执行相应的处理逻辑。function listenDeviceMotionEvent() {removeDeviceMotionEvent();if ('DeviceMotionEvent' in window) {window.addEventListener('devicemotion', handleMotionEvent, false);} else {console.log('不支持DeviceMotionEvent');}}// 移除之前添加的设备运动事件监听器。function removeDeviceMotionEvent() {if ('DeviceMotionEvent' in window) {window.removeEventListener('devicemotion', handleMotionEvent, false);} else {console.log('不支持DeviceOrientationEvent');}}// 处理运动事件。function handleMotionEvent(event) {const x = event.accelerationIncludingGravity.x;const y = event.accelerationIncludingGravity.y;const z = event.accelerationIncludingGravity.z;console.log(`DeviceMotionEvent data: ${event.timeStamp}, ${x}, ${y}, ${z}`);}// 监听设备方向的变化，并执行相应的处理逻辑。function listenDeviceOrientationEvent() {removeDeviceOrientationEvent();if ('DeviceOrientationEvent' in window) {window.addEventListener('deviceorientation', handleOrientationEvent, false);} else {console.log('不支持DeviceOrientationEvent');}}// 移除之前添加的设备方向事件监听器。function removeDeviceOrientationEvent() {if ('DeviceOrientationEvent' in window) {window.removeEventListener('deviceorientation', handleOrientationEvent, false);} else {console.log('不支持DeviceOrientationEvent');}}// 监听设备方向的变化，并执行相应的处理逻辑。function listenDeviceOrientationEvent2() {removeDeviceOrientationEvent2();if ('DeviceOrientationEvent' in window) {window.addEventListener('deviceorientationabsolute', handleOrientationEvent, false);} else {console.log('不支持DeviceOrientationEvent');}}// 移除之前添加的设备方向事件监听器。function removeDeviceOrientationEvent2() {if ('DeviceOrientationEvent' in window) {window.removeEventListener('deviceorientationabsolute', handleOrientationEvent, false);} else {console.log('不支持DeviceOrientationEvent');}}// 处理方向事件。function handleOrientationEvent(event) {console.log(`DeviceOrientationEvent data: ${event.timeStamp}, ${event.absolute}, ${event.alpha}, ${event.beta}, ${event.gamma}`);}</script>
</head>
<body>
<div id="dcontent" class="dcontent"><h3>运动和方向:</h3><ul class="dlist"><li><button type="button" onclick="getAccelerometer()">加速度</button></li><li><button type="button" onclick="getGyroscope()">陀螺仪</button></li><li><button type="button" onclick="getAbsoluteOrientationSensor()">设备方向(绝对定位)</button></li><li><button type="button" onclick="listenDeviceMotionEvent()">设备运动事件</button></li><li><button type="button" onclick="listenDeviceOrientationEvent()">设备方向事件</button></li><li><button type="button" onclick="listenDeviceOrientationEvent2()">设备方向事件(绝对定位)</button></li></ul>
</div>
</body>
</html>
结果
老规矩，放几张效果图
权限申请
允许权限
拒绝权限
相关文章：
#跟着若城学鸿蒙# web篇-运动和方向传感器监测
前言 有些前端业务场景需要用到一些传感器，比如运动传感器和方向传感器来实现摇一摇功能。这就需要前端能够直接获取到相关数据，而不是通过 js 调用客户端代码来实现。 权限 还是需要在模块的module.json5文件中添加相关权限 {"name" : &qu…...
【匹配】Hirschberg
Hirschberg 文章目录 Hirschberg1. 算法介绍2. 公式及原理3. 伪代码 1. 算法介绍 背景与目标 Hirschberg 算法由 Dan Hirschberg 于1975年提出，是对 Needleman–Wunsch 全局比对的内存优化，通过分治策略将空间复杂度从 O ( m n ) O(mn) O(mn) 降到 O (…...
如何在 Windows 上安装类似 Synaptic 的 Chocolatey GUI 包管理器
如果你正在寻找类似 Linux 中 APT 的 Windows 包管理器，那么没有什么比 Chocolatey 更好的了。它是 Windows 10 上可用的最佳包管理器之一，可以通过命令行界面安装所有流行的软件和工具。然而，这并不意味着如果你不喜欢命令行，你就…...
激活函数全解析：定义、分类与 17 种常用函数详解
一、激活函数的定义与作用 定义： 激活函数是添加到人工神经网络中的函数，用于帮助网络学习数据中的复杂模式，决定神经元的输出。 核心作用： 为神经网络引入非线性，增强模型表达能力。需可微分（或近似可微&…...
1-10 目录树
在ZIP归档文件中，保留着所有压缩文件和目录的相对路径和名称。当使用WinZIP等GUI软件打开ZIP归档文件时，可以从这些信息中重建目录的树状结构。请编写程序实现目录的树状结构的重建工作。 输入格式: 输入首先给出正整数N（≤104）…...
Python OOP核心技巧：如何正确选择实例方法、类方法和静态方法
Python方法类型全解析：实例方法、类方法与静态方法的使用场景 一、三种方法的基本区别二、访问能力对比表三、何时使用实例方法使用实例方法的核心场景：具体应用场景：1. 操作实例属性2. 对象间交互3. 实现特定实例的行为 四、何时使用类方法使…...
RK3588 ADB使用
安卓adb操作介绍 adb（Android Debug Bridge）是一个用于与安卓设备进行通信和控制的工具。adb可以通过USB或无线网络连接安卓设备，执行各种命令，如安装和卸载应用，传输文件，查看日志，运行shell命…...
ubuntu环境下 基于Python 打包的 批量命令行可视化操作工具 GUI
文章目录 一.需求：二.原理支撑：三.简单Demo四.封装成GUI1.依赖库2.代码 五.打包成可执行文件六.命令行的配置七.运行效果 一.需求： 作为测试工程师，为了到现场高效的调试，部署工作，需要一个可视化的工具&a…...
大语言模型 10 - 从0开始训练GPT 0.25B参数量 补充知识之模型架构 MoE、ReLU、FFN、MixFFN
写在前面 GPT（Generative Pre-trained Transformer）是目前最广泛应用的大语言模型架构之一，其强大的自然语言理解与生成能力背后，是一个庞大而精细的训练流程。本文将从宏观到微观，系统讲解GPT的训练过程，…...
SkyWalking的工作原理和搭建过程
SkyWalking 是一个开源的 应用性能监控系统（APM），专为云原生、微服务架构设计。其核心原理基于 分布式追踪（Distributed Tracing）、指标收集（Metrics Collection） 和 日志关联（Log C…...
CMS（plone / joomla 搭建测试）
开源选择 wordpress 用得最多 也是最容易有漏洞被攻击 被挂木马的 joomla （JMS多站点：商业扩展） — 多站点需付费 Drupal ProcessWire Plone因其内置的强大安全特性和较少的用户基础（相比 WordPress 和 Joomla）&#…...
基于 Flink 的实时推荐系统：从协同过滤到多模态语义理解
基于 Flink 的实时推荐系统：从协同过滤到多模态语义理解 嘿，各位技术小伙伴们！在这个信息爆炸的时代，你是不是常常惊叹于各大平台仿佛能 “读懂你的心”，精准推送你感兴趣的内容呢？今天，小编就…...
Flink SQL、Hudi 、Doris在数据上的组合应用
Flink SQL、Hudi 和 Doris 是大数据领域中不同定位的技术组件，各自解决不同的问题，以下从核心定位、关键特性和典型场景三个维度展开说明： 1. Flink SQL：流批统一的实时计算引擎 核心定位：Flink 是 Apache 顶级的流批…...
Flink运维要点
一、Flink 运维核心策略 1. 集群部署与监控 资源规划 按业务优先级分配资源：核心作业优先保障内存和 CPU，避免资源竞争。示例：为实时风控作业分配专用 TaskManager，配置 taskmanager.memory.process.size8g。 监控体系 集成 Prom…...
VSCode + Cline AI辅助编程完全指南
VSCode Cline AI辅助编程完全指南 在当今AI快速发展的时代，程序员可以通过AI工具极大地提高工作效率。本教程将详细介绍如何使用VSCode结合Cline（Claude AI助手）进行AI辅助编程，帮助你提高开发效率，解决复杂问题。 …...
【源码级开发】Qwen3接入MCP，企业级智能体开发实战！
Qwen3接入MCP智能体开发实战（上） 一、MCP技术与Qwen3原生MCP能力介绍 1.智能体开发核心技术—MCP 1.1 Function calling技术回顾 如何快速开发一款智能体应用，最关键的技术难点就在于如何让大模型高效稳定的接入一些外部工具。而在MCP技术…...
回调函数应用示例
回调函数是一种通过函数指针（或引用）调用的函数，它在特定事件或条件发生时被另一个函数调用。回调函数的核心思想是将函数作为参数传递，以便在适当的时候执行自定义逻辑，常用于异步编程、事件驱动架构等场景。 业务场景…...
R语言如何解决导出pdf中文不显示的问题
前言 以前绘图都默认英文，突然要求都改成中文，呆住。。。。。。。。。 标题代码实现 ### 导入工具包 ### library(readr) library(dplyr) library(corrplot)df <- read_csv("./clinical.csv") df <- df %>% select(-id, -label)##…...
国产linux系统（银河麒麟，统信uos）使用 PageOffice自定义Word模版中的数据区域
PageOffice 国产版 ：支持信创系统，支持银河麒麟V10和统信UOS，支持X86（intel、兆芯、海光等）、ARM（飞腾、鲲鹏、麒麟等）、龙芯（Mips、LoogArch）芯片架构。 在实际的Wor…...
llamafactory SFT 从断点恢复训练
背景 我使用llamafactory sft 微调模型的时候。gpu停止运行了。日志文件没有任何的报错信息。 显存还是占用状态。 查看llamafactory的进程是下述信息： 151312 151306 91 17:42 ? 03:58:10 [llamafactory-cl] 既然如此，那就只能从断点恢复训练了。 …...
C#里使用Prism.Core的例子
由于使用WPF来开发应用程序， 那么就会使用一些框架程序来加速开发，一般会使用Prism.Core来加速。 这个应用最后运行的显示如下： 第一步需要安装下面的包： <?xml version="1.0" encoding="utf-8"?> <packages><package id="Mi…...
【MySQL】数据库三大范式
目录 一. 什么是范式 二. 第一范式 三. 第二范式 不满足第二范式时可能出现的问题 四. 第三范式 一. 什么是范式 在数据库中范式其实就是一组规则，在我们设计数据库的时候，需要遵守不同的规则要求，设计出合理的关系型数据库，…...
window 显示驱动开发-分页视频内存资源
与 Microsoft Windows 2000 显示驱动程序模型不同，Windows Vista 显示驱动程序模型允许创建比可用物理视频内存总量更多的视频内存资源，然后根据需要分页进出视频内存。 换句话说，并非所有视频内存资源都同时位于视频内存中。 GPU 的管道中可…...
炼丹学习笔记3---ubuntu2004部署运行openpcdet记录
前言 环境 cuda 11.3 python 3.8 ubuntu2004 一、cuda环境检测 ylhy:~/code_ws/OpenPCDet/tools$ nvcc -V nvcc: NVIDIA (R) Cuda compiler driver Copyright (c) 2005-2021 NVIDIA Corporation Built on Sun_Mar_21_19:15:46_PDT_2021 Cuda compilation tools, release 11.3…...
美创科技针对《银行保险机构数据安全管理办法》解读
在数字化浪潮席卷下，银行保险业的运营模式发生了翻天覆地的变化，数据已然成为行业发展的核心驱动力。从客户基本信息、交易记录，到业务运营的关键数据、市场分析报告，海量数据背后潜藏巨大价值。然而，数据安全风险也随…...
activeMq 限制用户接收topic范围
1、在conf配置文件中找到jetty-realm.properties文件，添加用户信息 2、在broker标签中加入topic限制权限信息 <plugins><simpleAuthenticationPlugin><users><authenticationUser username"admin" password"admin" group…...
LIIGO ❤️ RUST 12 YEARS
LIIGO 💖 RUST 12 YEARS 今天是RUST语言1.0发布十周年纪念日。十年前的今天，2015年的今天，Rust 1.0 正式发行。这是值得全球Rust支持者隆重纪念的日子。我借此机会衷心感谢Rust语言创始人Graydon Hoare，Mozilla公司，以…...
增量学习：机器学习领域中的资源高效利用秘籍
前言 在机器学习的广袤天地中，增量学习宛如一颗冉冉升起的新星，正逐渐展现出其独特的魅力和巨大的潜力。 它是一种能让 AI 模型像人类一样，逐步学习并不断强化自身知识，同时不会遗忘过往所学信息的学习方法。随着时代的飞速发展&a…...
OpenCV 背景建模详解：从原理到实战
在计算机视觉领域，背景建模是一项基础且重要的技术，它能够从视频流中分离出前景目标，广泛应用于运动目标检测、视频监控、人机交互等场景。OpenCV 作为计算机视觉领域最受欢迎的开源库之一，提供了多种高效的背景建模算法。本文将深…...
makefile细节说明
在 Makefile中，依赖关系的左右两部分有特定的名称： 左边部分（冒号左侧） 称为 目标（Target） 右边部分（冒号右侧） 称为 依赖项（Prerequisite…...
(第2版)学习笔记 10.增强表面细节(二）法线贴图)
计算机图形学编程(使用OpenGL和C++)(第2版)学习笔记 10.增强表面细节(二）法线贴图
1. 法线贴图（Normal Mapping） 法线贴图是一种在3D图形渲染中广泛使用的表面细节增强技术。它通过存储每个像素的法线信息来模拟表面的细微凹凸细节，而无需增加实际的几何复杂度。 1.1. 工作原理 纹理存储 使用RGB通道存储法线向量的XYZ分量…...
使用 OpenCV 将图像中标记特定颜色区域
在计算机视觉任务中，颜色替换是一种常见的图像处理操作，广泛用于视觉增强、目标高亮、伪彩色渲染等场景。本文介绍一种简单而高效的方式，基于 OpenCV 检测图像中接近某种颜色的区域，并将其替换为反色（对比色࿰…...
Service Mesh
目录 一、Service Mesh 的核心特点 二、Service Mesh 的典型架构 1. Sidecar 模式 2. 控制平面与数据平面分离 三、Service Mesh 解决的核心问题 四、典型应用场景 五、主流 Service Mesh 框架对比 六、挑战与局限性 七、未来趋势 总结 Istio 一、Istio 核心组件与…...
反射机制详细说明
反射机制详细说明 1. 反射的基本概念 反射（Reflection）是Java提供的一种在运行时（Runtime）动态获取类信息并操作类属性、方法和构造器的机制。通过反射，程序可以在运行时检查类、接口、字段和方法，并且可以实例化对象、调用方法、访问或修改字段值，甚至操作私有成员，…...
基于Mongodb的分布式文件存储实现
分布式文件存储的方案有很多，今天分享一个基于mongodb数据库来实现文件的存储，mongodb支持分布式部署，以此来实现文件的分布式存储。 基于 MongoDB GridFS 的分布式文件存储实现：从原理到实战 一、引言 当系统存在大量的图片、…...
相机Camera日志分析之九：高通相机Camx 基于预览1帧的ConfigureStreams二级日志分析详解
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：高通相机Camx 日志分析之三：camx hal预览1帧logcat日志opencamera详解 相机Camera日志分析之三：不想输出每秒30帧巨量日志，如何只输出1帧日志作为学习使用？ 这一篇我们开始讲： 高通相机Camx 日志…...
neo4j框架：ubuntu系统中neo4j安装与使用教程
在使用图数据库的时候，经常需要用到neo4j这一图数据库处理框架。本文详细介绍了neo4j安装使用过程中的问题与解决方法。 一、安装neo4j 在安装好了ubuntu系统、docker仓库和java的前提下 在ubuntu系统命令行依次输入如下命令： # 安装依赖库 sudo apt-…...
k8s灰度发布
基于 Traefik 的加权灰度发布-腾讯云开发者社区-腾讯云 Traefik | Traefik | v1.7 Releases traefik/traefik GitHub 从上面连接下载后上传到harbor虚拟机 vagrant upload /C/Users/HP280/Downloads/traefik 下载配置文件 wget -c http://raw.githubusercontent.com/conta…...
K8S从Harbor拉取镜像
参考 配置cri-docker使kubernetes1.24以docker作为运行时_启动cirdocker_跳跃音符#3712的博客-CSDN博客 部署Harbor私有容器镜像仓库并配置Kubernetes从Harbor拉取镜像的方法_运维个西瓜的博客-CSDN博客 K8S连接Harbor私有仓库_k8s harbor 登录-CSDN博客 K8S集群配置使用私…...
【Spring Boot后端组件】mybatis-plus使用
文章目录 mybatis-plus使用一、依赖引入二、添加相关配置项三、功能详解1.自增主键2.逻辑删除3.操作时间自动填充4.其他字段自动填充5.分页查询6.自定义动态查询7.代码生成器8.代码生成器(自定义模板) mybatis-plus使用 一、依赖引入 pom.xml文件 <?xml version"1.…...
Oc语言学习 —— 重点内容总结与拓展（下）
类别（分类）和拓展 分类： 专门用来给类添加新方法 不能给类添加成员属性，添加成员属性也无法取到 注意：其实可与通过runtime 给分类添加属性，即属性关联，重写setter，getter方法 分类…...
智脑进化：神经网络如何从单层感知机迈向深度学习新纪元
第一章：神经元的启示——从生物大脑到人工神经元 1.1 生物神经元的智慧：860亿神经元的协同网络 人类大脑的860亿神经元通过突触形成动态网络，每个神经元通过树突接收信号，在胞体整合后经轴突传递输出。这种“接收-处理-输出”的…...
雷云4 鼠标滚轮单击失灵解决办法
问题现象：打开雷云4 ，滚轮单击才有反应，退出雷云4，滚轮单击没反应。 解决方案： 打开雷云4， 选中鼠标中键，选择鼠标功能，选择滚轮单击，保存 然后退出后， …...
Spring Cloud动态配置刷新：@RefreshScope与@Component的协同机制解析
在微服务架构中，动态配置管理是实现服务灵活部署、快速响应业务变化的关键能力之一。Spring Cloud 提供了基于 RefreshScope 和 Component 的动态配置刷新机制，使得开发者可以在不重启服务的情况下更新配置。 本文将深入解析 RefreshScope 与 Component…...
vue2集成可在线编辑的思维导图（simple-mind-map）
最近要求做一个可在线编辑的思维导图，经过层层调研和实测，最简单的思维导图导图实现还得是simple-mind-map组件 simple-mind-map中文文档 当前我使用的是vue2项目，目前没试过是否支持vue3，但是看官网描述他们也给了有vue3的demo项…...
【开源Agent框架】CAMEL：角色扮演+任务分解
一、项目概览：重新定义智能体协作范式 CAMEL（Communicative Agents for “Mind” Exploration of Large Language Model Society）是由camel-ai社区开发的开源多智能体框架，致力于探索智能体的规模法则（Scaling Laws）。该项目通过构建包含百万级智能体的复杂社会系统，研…...
Elasticsearch-kibana索引操作
1索引模版 添加索引 PUT /_index_template/account_transaction {"priority": 0,"index_patterns": ["account_transaction*"],"template": {"settings": {"index": {"number_of_shards": "50&q…...
【python编程从入门到到实践】第十章 文件和异常
一、读取文件 pi_digits.txt3.1415926535897932384626433832791.读取文件的全部内容 # file_reader.pyfrom pathlib import Pathpath Path("pi_digits.txt") contents path.read_text() print(contents)2.相对文件路径和绝对文件路径 当相对路径行不通时&#x…...
Reactive与Ref的故事
Vue 3的两位"响应式英雄"：Reactive与Ref的故事 基本介绍：响应式的两种武器 Vue 3提供了两种创建响应式数据的主要API：reactive()和ref()。它们像两种不同的魔法工具，各有所长，共同构建Vue的响应式王国。 ┌────────────────────────…...
基于Scrapy-Redis的分布式景点数据爬取与热力图生成
1. 引言 在旅游行业和城市规划中，热门景点的数据分析具有重要意义。通过爬取景点数据并生成热力图，可以直观展示游客分布、热门区域及人流趋势，为商业决策、景区管理及智慧城市建设提供数据支持。 然而，单机爬虫在面对大规模数据…...