项目概述

项目文件简介

本项目分四个板块，
iot文件夹内为Arduino相关代码，作为传感器数据处理。
nodeserver文件夹内为使用node.js运行的相关代码，主要是建立本地网络服务器，向浏览器端发送由arduino收集的串口数据。
broswertest文件夹内为暂时代替webgpu的测试环境。
webgpu文件夹内为使用orillusion引擎实现的可视化环境。

运行方法

环境准备

1. 安装node.js
   link:https://nodejs.org/en/
2. 安装vite框架(可以参考后文在项目中安装，不必全局安装)
   link:https://cn.vitejs.dev/
3. 安装chrome canary浏览器
   link:https://www.google.com/chrome/canary/

具体安装方法参照官方文档

运行方式

npm安装依赖库

npm install所安装的依赖库为同文件夹下package.json文件中写明的依赖库

1. 在nodeserver文件夹下，运行npm install安装依赖库
2. 在broswertest文件夹下，运行npm install安装依赖库
3. 在webgpu文件夹下，运行npm install安装依赖库

浏览器设置（使用webgpu）

1. 在chrome浏览器中输入chrome://flags/#enable-unsafe-webgpu，将Enable unsafe WebGPU设置为Enabled

运行程序

1. 在nodeserver文件夹内找到searchport.js文件，使用nodejs运行，运行后会显示当前计算机连接的串口设备。
2. 找到arduino所连接的串口号，修改nodeserver/main.js第7行portname: "COM4",//串口号参数为正确的串口号。

6-15行参数可按需修改

var serialparam = {
portname: "COM4",//串口号
baudRate: 9600, //波特率
dataBits: 8, //数据位
parity: 'none', //奇偶校验
stopBits: 1, //停止位
flowControl: false,//流控制
};

var wsportname = 8080;

3. 运行nodeserver/main.js，运行成功后会显示

WS server set 8080
serial open at COMx
--------------------------

4. 在powershell中打开broswertest文件夹，输入vite命令:npm run dev,成功后显示

  VITE v4.0.3  ready in 156 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h to show help

5. 浏览器打开链接 http://127.0.0.1:5173/ (以vite输出网址为准)

注意：显示WebGPU界面要求浏览器必须是chrome canary且打开Enable unsafe WebGPU设置