代码拉取完成，页面将自动刷新
同步操作将从 OpenHarmony-SIG/knowledge_demo_temp 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
此项目是基于OpenHarmony操作系统，设备侧使用Geek_Lite_Board开发板，主控芯片为STM32F427IIH6，操作系统为OpenHarmony 3.0。应用端采用大禹系列HH-SCDAYU200开发板套件，主控芯片为瑞芯微RK3568芯片，操作系统为OpenHarmony 3.1 release。
STM32通过mpu9250九轴姿态传感器中内置的ak8963磁力计获取磁场数据，把转换后的数据通过ESP8266无线模块把数据发送到RK3568。RK3568的应用是采用方舟开发框架（ArkUI）基于JS扩展的类web开发范式编写页面；通过NAPI接口获取底层网络数据，并在页面展示，展示效果如下图所示。
指南针应用端开发主要涉及：
OpenHarmonyJS UI
Canvas 组件
NAPI
1）git下载
git clone git@gitee.com:openharmony-sig/knowledge_demo_temp.git --depth=1
2）项目导入
打开DevEco Studio,点击File->Open->下载路径/electronic_compass/app-code/compass
配置应用签名信息，点击File > Project Structure > Project > Signing Configs界面勾选“Automatically generate signing”，等待自动签名完成即可，点击“OK”。如下图所示：
安装应用 识别到设备后点击
，或使用默认快捷键Shift+F10（macOS为Control+R)运行应用。
如果IDE没有识别到设备就需要通过命令安装，如下
打开OpenHarmony SDK路径 \toolchains 文件夹下，执行如下hdc_std命令，其中path为hap包所在绝对路径。
hdc_std install -r path\entry-debug-standard-ark-signed.hap
应用安装到3568开发板后，需要SMT32开发板发送角度数据，才能看到效果；两个板子连接同一个wifi或使用网线连接并配置同一网段IP地址
hdc_std shell ifconfig eth0 192.168.1.111 netmask 255.255.255.0
├─entry
│ └─src
│ └─main
│ │ config.json 应用配置文件
│ │
│ ├─js
│ │ └─MainAbility
│ │ │ app.js // 应用程序主入口
│ │ │
│ │ ├─i18n
│ │ │ en-US.json
│ │ │ zh-CN.json
│ │ │
│ │ └─pages
│ │ └─index // 指南针应用首页面
│ │ index.css
│ │ index.hml
│ │ index.js
│ │
│ └─resources
│ ├─base
│ │ ├─element
│ │ │ string.json
│ │ │
│ │ └─media // 存放媒体资源
│ │ icon.png // 应用桌面小图标
│ │
│ └─rawfile
hdc_std shell
hilog | grep "xxx" (xxx表示你添加的日志标记)
在DevEco Studio中点击File -> New Project ->[Standard]Empty Ability->Next，Language 选择JS语言，最后点击Finish即创建成功。
效果图如上可以分为三部分。
1）在hml文件添加text组件;
2）在css文件添加样式表；
3）在js 文件修改text内容，即变量position的值；
index.hml
<text class="text-style">{{ position }}°</text>
index.css
.text-style{
font-size: 60px;
}
index.js
getCompassMsg() {
this.intervalID = setInterval(() => {
//NAPI调用
compassapi.recvCompassMsg().then((result) => {
var resultAngle = result.angle;
if (resultAngle.match("angle:")) {
var info = parseInt(resultAngle.slice(6));
if (this.angle != info) {
this.angle = info;
console.info("=======compassAngle====" + this.angle)
if (this.angle >= 0 && this.angle < 23) {
this.position = '北 ' + this.angle;
}
else if (this.angle >= 23 && this.angle < 68) {
this.position = '东北 ' + this.angle;
}
else if (this.angle >= 68 && this.angle < 113) {
this.position = '东 ' + this.angle;
}
else if (this.angle >= 113 && this.angle < 158) {
this.position = '东南 ' + this.angle;
}
else if (this.angle >= 158 && this.angle < 203) {
this.position = '南 ' + this.angle;
}
else if (this.angle >= 203 && this.angle < 248) {
this.position = '西南 ' + this.angle;
}
else if (this.angle >= 248 && this.angle < 293) {
this.position = '西 ' + this.angle;
}
else if (this.angle >= 293 && this.angle < 338) {
this.position = '西北 ' + this.angle;
}
else if (this.angle >= 338 && this.angle < 360) {
this.position = '北 ' + this.angle;
}
}
}
});
}, 100);
},
指南针盘只由一个Canvas组件组成，但是却包括刻度盘，角度数字，方位文字 3 个部分；
如下是指南针盘Canvas组件以及CanvasRenderingContext2D的代码：
index.hml 添加canvas组件，并设置ref，以及配置坐标轴进行顺时针旋转角度
<canvas class="compass-canvas" ref="compassCanvas"style="transform : rotate({{ -angle }});"></canvas>
index.css 长宽占用都是100%
.compass-canvas {
width:100%;
height: 100%;
}
index.js 根据 hml 中的 ref，拿到该组件，并获取CanvasRenderingContext2D对象compass_context，之后所有的绘制都是调用compass_context对象方法
compass_canvas = this.$refs.compassCanvas;
compass_context = compass_canvas.getContext('2d', {
antialias: true
});
1）刻度盘
刻度盘是由内圆、外圆和刻度竖线组成；如下是内外圆绘制：
compass_context.translate(this.width / 2, this.height / 2); 移动当前坐标系的原点。
this.outsideRadius = this.width / 2 - this.width / 7; // 计算外圆半径
this.insideRadius = this.outsideRadius - this.width / 8; // 计算内圆半径
this.drawCircle(this.outsideRadius, '#F9F9F9'); //外圆，传入外圆半径和颜色
this.drawCircle(this.insideRadius, '#FFFFFF'); //内圆，传入内圆半径和颜色
drawCircle(radius, color) {
compass_context.beginPath(); // 创建一个新的绘制路径。
compass_context.fillStyle = color; // 指定绘制的填充色.
compass_context.strokeStyle = color; //设置描边的颜色。
compass_context.arc(0, 0, radius, 0, 6.28); //绘制弧线路径。
compass_context.fill(); //对封闭路径进行填充。
},
如下是圆环内部竖线刻度绘制：
drawAngleLine() {
compass_context.strokeStyle = '#000000'; //设置描边的颜色。
// 总共有60 个刻度，按5的倍数进行线条加粗。
for (var i = 0; i < 60; i++) {
if (i == 0 || i == 5 || i == 10 || i == 15 || i == 20 || i == 25 || i == 30 || i == 35 || i == 40 || i == 45 || i == 50 || i == 55) {
compass_context.lineWidth = 3; // 线条宽度
compass_context.beginPath(); // 创建一个新的绘制路径。
compass_context.moveTo(0, this.insideRadius + (this.outsideRadius - this.insideRadius) / 4); // 当前点移动到指定点。
compass_context.lineTo(0, this.outsideRadius - this.width / 30); // 从当前点到指定点进行路径连接.
} else {
compass_context.lineWidth = 0.5;
compass_context.beginPath();
compass_context.moveTo(0, this.insideRadius + (this.outsideRadius - this.insideRadius) / 4);
compass_context.lineTo(0, this.outsideRadius - this.width / 30);
}
compass_context.stroke();
compass_context.rotate(15 * Math.PI / 450);
}
},
2）外围数字角度
drawAngleNumber() {
compass_context.beginPath(); // 创建一个新的绘制路径。
this.angleNumberSize = this.width / 30; // 角度数字文字大小。
compass_context.font = this.angleNumberSize + 'px' + ' sans-serif'; // 角度数字文字大小转换。
for (var i = 0; i < this.angleNumbers.length; i++) {
if (i == 0) { // 判断是0 设备颜色为红色，其他为灰黑色.
compass_context.fillStyle = '#FF00000';
} else {
compass_context.fillStyle = '#AF000000';
}
let number = this.angleNumbers[i]; // 获取数组对象里面的数字内容.
compass_context.fillText(number, -this.width / 85, -this.width / 2.45); // 绘制填充类文本。
compass_context.rotate(30 * Math.PI / 180); // 设置当前坐标轴进行顺时针旋转，成圆形排列
}
}
3）内部方位文字和三角箭头绘制
如下是
drawPositionText() {
compass_context.beginPath();
this.positionTextSize = this.width / 20;
compass_context.font = this.positionTextSize + 'px' + ' sans-serif';
for (let i = 0; i < this.positionTexts.length; i++) {
if (i == 0) {
compass_context.fillStyle = '#FF00000'; // 获取方位文字为北，改变文字颜色为红色
this.drawTriangle(); // 指北三角箭头绘制
} else {
compass_context.fillStyle = '#0000000';
}
let positionText = this.positionTexts[i];
compass_context.fillText(positionText, -this.width / 40, -this.width / 9);
compass_context.stroke();
compass_context.rotate(90 * Math.PI / 180);
}
},
4）三角箭头绘制
drawTriangle() {
compass_context.beginPath();
compass_context.fillStyle = '#FF00000';
compass_context.moveTo(0, -this.width / 5);
compass_context.lineTo(this.width / 40, -this.width / 5 + this.width / 35);
compass_context.lineTo(-this.width / 40, -this.width / 5 + this.width / 35);
compass_context.closePath(); // 结束当前路径形成一个封闭路径。
compass_context.fill();
},
指南针指示线只由一个Canvas组件组成，也只包括一根竖线的绘制；
1）如下是指南针指示线Canvas组件以及CanvasRenderingContext2D的代码：
index.hml 添加canvas组件，并设置ref
<canvas class="line-canvas" ref="lineCanvas"></canvas>
index.css 长宽占用都是100%，并设定样式 position： absolute 相对于父元素进行定位。
.line-canvas {
width: 100%;
height:100%;
position: absolute;
}
index.js 根据 hml 中的 ref，拿到该组件，并获取CanvasRenderingContext2D对象compass_context，之后所有的绘制都是调用compass_context对象方法
line_canvas = this.$refs.lineCanvas;
line_context = line_canvas.getContext('2d', {
antialias: true
});
2）指示线获取
drawPositionLine() {
line_context.strokeStyle = '#000000';
line_context.lineWidth = 6;
line_context.lineCap = 'round'; // 线端点以圆形结束。
line_context.moveTo(0, -this.outsideRadius + this.width / 15);
line_context.lineTo(0, -this.outsideRadius - this.width / 28);
line_context.stroke(); // 进行边框绘制操作。
},
1）NAPI接口开发具体请参考文档OpenharmonyNAPI开源仓库。
2）本应用封装的模块名为tcpserverapi，源码路径，下载好的tcpservermodule文件夹。
3）下载完成后放到3.1Beta版本根目录，并按照参考PPT配置编译脚本；第一次编译完成需要烧写整个镜像，请参考开发板上新 | RK3568开发板上丝滑体验OpenHarmony标准系统；后面修改模块源码，只需将库send到板子里面。命令如下：
先挂载，再send
hdc_std shell mount -oremount,rw /
hdc_std file send libtcpserverapi.z.so system/lib/module/libtcpserverapi.z.so
import tcpserverapi from '@ohos.tcpserverapi'
//调用initServer接口 初始化 TCP 服务器
tcpserverapi.initServer()
//调用recvMsg 获取并解析SMT32板子发送过来的角度
tcpserverapi.recvMsg().then((result) => {
var resultAngle = result.angle;
})
1）git下载
git clone git@gitee.com:openharmony-sig/knowledge_demo_temp.git --depth=1
2）项目导入
打开DevEco Studio,点击File->Open->下载路径/electronic_compass/app-code/compass
以润和大禹系列HH-SCDAYU200开发板套件为例
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。