初始
This commit is contained in:
nnwang
31
.gitignore
vendored
31
.gitignore
vendored
@@ -1,11 +1,24 @@
|
|||||||
# ---> Vue
|
# Logs
|
||||||
# gitignore template for Vue.js projects
|
logs
|
||||||
#
|
*.log
|
||||||
# Recommended template: Node.gitignore
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
# TODO: where does this rule come from?
|
node_modules
|
||||||
docs/_book
|
dist
|
||||||
|
dist-ssr
|
||||||
# TODO: where does this rule come from?
|
*.local
|
||||||
test/
|
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|||||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>vue</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1995
package-lock.json
generated
Normal file
1995
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
22
package.json
Normal file
22
package.json
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"name": "vue",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"html5-qrcode": "^2.3.8",
|
||||||
|
"vue": "^3.5.25"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/vite": "^4.1.18",
|
||||||
|
"@vitejs/plugin-vue": "^6.0.2",
|
||||||
|
"daisyui": "^5.5.18",
|
||||||
|
"tailwindcss": "^4.1.18",
|
||||||
|
"vite": "^7.3.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
982
src/App.vue
Normal file
982
src/App.vue
Normal file
@@ -0,0 +1,982 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen bg-base-300 text-base-content p-4 flex justify-center items-center font-sans">
|
||||||
|
<div class="card w-full max-w-lg bg-base-100 shadow-xl">
|
||||||
|
<div class="card-body p-4">
|
||||||
|
<h2 class="card-title justify-center text-primary text-2xl mb-4">DG-LAB Socket To V2</h2>
|
||||||
|
|
||||||
|
<!-- === 状态指示栏 === -->
|
||||||
|
<div class="flex justify-between items-center bg-base-200 p-3 rounded-lg mb-4 shadow-inner">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="tooltip" :data-tip="bleDeviceName || '未连接'">
|
||||||
|
<span class="badge" :class="bleConnected ? 'badge-success' : 'badge-error'">BLE</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="tooltip" :data-tip="wsStatusText">
|
||||||
|
<span class="badge" :class="wsConnected ? 'badge-success' : 'badge-error'">WS</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 电池电量 -->
|
||||||
|
<div class="flex items-center gap-1 tooltip tooltip-bottom" :data-tip="'上次刷新: ' + lastBatUpdate">
|
||||||
|
<div class="text-lg">{{ getBatIcon(batteryLevel) }}</div>
|
||||||
|
<span class="font-bold text-sm font-mono">{{ batteryLevel }}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- === 蓝牙连接 === -->
|
||||||
|
<div v-if="!bleConnected" class="form-control mb-4 transition-all">
|
||||||
|
<button class="btn btn-primary w-full shadow-lg" @click="scanAndConnectBLE" :disabled="isConnectingBLE">
|
||||||
|
<span v-if="isConnectingBLE" class="loading loading-spinner"></span>
|
||||||
|
{{ isConnectingBLE ? '正在建立通道...' : '搜索并连接郊狼 V2' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- === Socket 连接设置 (支持复杂QR码) === -->
|
||||||
|
<div class="collapse collapse-arrow bg-base-200 mb-4 rounded-lg">
|
||||||
|
<input type="checkbox" checked />
|
||||||
|
<div class="collapse-title font-medium">
|
||||||
|
📡 远程控制 (扫码/粘贴)
|
||||||
|
</div>
|
||||||
|
<div class="collapse-content">
|
||||||
|
<div class="form-control gap-3 mt-2">
|
||||||
|
<label class="label pb-0"><span class="label-text">WS链接 / DG-LAB 二维码内容</span></label>
|
||||||
|
|
||||||
|
<div class="join w-full shadow-sm">
|
||||||
|
<input type="text" v-model="wsUrlInput" placeholder="#DGLAB-SOCKET#ws://..." class="input input-bordered join-item w-full text-xs font-mono" />
|
||||||
|
<button class="btn btn-square join-item btn-primary" @click="toggleScanner">
|
||||||
|
<span v-if="!showScanner">📷</span><span v-else>❌</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 扫码区域 -->
|
||||||
|
<div v-if="showScanner" class="w-full mt-2 rounded-lg overflow-hidden border border-base-300 relative bg-black h-56">
|
||||||
|
<div id="reader" class="w-full h-full"></div>
|
||||||
|
<div class="absolute bottom-1 right-2 text-xs text-gray-400 bg-black/50 px-1 rounded pointer-events-none">Scanner Active</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex gap-2 mt-1">
|
||||||
|
<button class="btn btn-secondary flex-1 btn-sm" @click="connectSocket" :disabled="wsConnected">连接 WS</button>
|
||||||
|
<button class="btn btn-warning flex-1 btn-sm" @click="disconnectSocket" :disabled="!wsConnected">断开</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-[10px] mt-2 flex justify-between opacity-60 font-mono">
|
||||||
|
<span>Client: {{ wsClientId || 'Waiting...' }}</span>
|
||||||
|
<span>Target: {{ wsTargetId || 'Waiting...' }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- === 核心控制台 === -->
|
||||||
|
<div class="grid grid-cols-2 gap-1 my-1">
|
||||||
|
|
||||||
|
<!-- A 通道面板 -->
|
||||||
|
<div class="flex flex-col items-center gap-2 p-1.5 bg-base-200/50 rounded-xl border border-secondary/20 shadow-sm">
|
||||||
|
<h3 class="font-bold text-lg text-secondary">Channel A</h3>
|
||||||
|
|
||||||
|
<!-- A 通道波形 - 柱状图 -->
|
||||||
|
<div class="w-full h-20 bg-black rounded border border-secondary/30 overflow-hidden relative shadow-inner">
|
||||||
|
<canvas ref="canvasA" width="200" height="64" class="w-full h-full block"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="radial-progress text-secondary border-4 border-base-200 bg-base-100 mt-2 hover:scale-105 transition-transform"
|
||||||
|
:style="`--value:${calcPercent(dglab.powerLevel[0])}; --size:5rem;`"
|
||||||
|
role="progressbar">
|
||||||
|
<span class="text-xl font-bold font-mono">{{ dglab.powerLevel[0] }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 上限滑块 A (修改部分) -->
|
||||||
|
<div class="w-full px-1 mt-1">
|
||||||
|
<label class="label p-0 justify-between items-center mb-1">
|
||||||
|
<span class="label-text-alt text-xs">MaxLevel A</span>
|
||||||
|
<!-- 将原来的 span 替换为 input -->
|
||||||
|
<input type="number"
|
||||||
|
min="0" max="200"
|
||||||
|
v-model.number="maxStrengthA"
|
||||||
|
class="input input-xs input-bordered w-16 text-center font-bold text-secondary focus:border-secondary" />
|
||||||
|
</label>
|
||||||
|
<input type="range" min="0" max="200" v-model.number="maxStrengthA" class="range range-xs range-secondary" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- B 通道面板 -->
|
||||||
|
<div class="flex flex-col items-center gap-2 p-1.5 bg-base-200/50 rounded-xl border border-accent/20 shadow-sm">
|
||||||
|
<h3 class="font-bold text-lg text-accent">Channel B</h3>
|
||||||
|
|
||||||
|
<!-- B 通道波形 - 柱状图 -->
|
||||||
|
<div class="w-full h-20 bg-black rounded border border-accent/30 overflow-hidden relative shadow-inner">
|
||||||
|
<canvas ref="canvasB" width="200" height="64" class="w-full h-full block"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="radial-progress text-accent border-4 border-base-200 bg-base-100 mt-2 hover:scale-105 transition-transform"
|
||||||
|
:style="`--value:${calcPercent(dglab.powerLevel[1])}; --size:5rem;`"
|
||||||
|
role="progressbar">
|
||||||
|
<span class="text-xl font-bold font-mono">{{ dglab.powerLevel[1] }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 上限滑块 B (修改部分) -->
|
||||||
|
<div class="w-full px-1 mt-1">
|
||||||
|
<label class="label p-0 justify-between items-center mb-1">
|
||||||
|
<span class="label-text-alt text-xs">MaxLevel B</span>
|
||||||
|
<!-- 将原来的 span 替换为 input -->
|
||||||
|
<input type="number"
|
||||||
|
min="0" max="200"
|
||||||
|
v-model.number="maxStrengthB"
|
||||||
|
class="input input-xs input-bordered w-16 text-center font-bold text-accent focus:border-accent" />
|
||||||
|
</label>
|
||||||
|
<input type="range" min="0" max="200" v-model.number="maxStrengthB" class="range range-xs range-accent" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- === 反馈按钮 === -->
|
||||||
|
<div class="divider text-xs opacity-50 my-2">App Feedback Simulation</div>
|
||||||
|
<div class="flex justify-center flex-wrap gap-2">
|
||||||
|
<div class="flex justify-center flex-wrap gap-2">
|
||||||
|
<!-- A通道: i 从 1 到 5，对应 index 为 i-1 (0,1,2,3,4) -->
|
||||||
|
<button v-for="i in 5" :key="`btn-a-${i}`" class="btn btn-xs btn-outline btn-secondary" @click="sendFeedback(i - 1)">
|
||||||
|
A-{{i}}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-center flex-wrap gap-2">
|
||||||
|
<!-- B通道: i 从 1 到 5，对应 index 为 i+4 (5,6,7,8,9) -->
|
||||||
|
<button v-for="i in 5" :key="`btn-b-${i}`" class="btn btn-xs btn-outline btn-accent" @click="sendFeedback(i + 4)">
|
||||||
|
B-{{i}}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- === 日志 === -->
|
||||||
|
<div class="collapse collapse-plus bg-black text-green-500 mt-4 rounded-box border border-base-300">
|
||||||
|
<input type="checkbox" />
|
||||||
|
<div class="collapse-title text-xs font-mono min-h-[2rem] py-2">
|
||||||
|
> System Logs
|
||||||
|
</div>
|
||||||
|
<div class="collapse-content px-0">
|
||||||
|
<div class="h-32 overflow-y-auto text-[10px] font-mono p-2">
|
||||||
|
<div v-for="(log, index) in logs" :key="index" class="border-b border-white/10 py-1 flex">
|
||||||
|
<span class="opacity-50 mr-2 w-14 shrink-0">{{log.time}}</span>
|
||||||
|
<span class="break-all">{{ log.msg }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ===安全连接配置提示弹窗 === -->
|
||||||
|
<dialog class="modal" :class="{ 'modal-open': showInsecureModal }">
|
||||||
|
<div class="modal-box border border-warning shadow-warning/20 max-w-2xl">
|
||||||
|
<h3 class="font-bold text-lg text-warning flex items-center gap-2">
|
||||||
|
⚠️ 允许不安全 WebSocket 连接
|
||||||
|
</h3>
|
||||||
|
<div class="py-3 text-sm">
|
||||||
|
<p class="mb-2">检测到您正在 HTTPS 页面下尝试连接 <b>ws://</b> (非加密) 地址。现代浏览器出于安全策略会默认拦截。</p>
|
||||||
|
|
||||||
|
<div class="bg-base-200 p-3 rounded-lg text-xs space-y-3">
|
||||||
|
<p class="font-bold text-base-content/70">请根据您的浏览器复制地址到地址栏回车：</p>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="mt-2 text-warning-content font-mono select-all bg-base-100 border border-base-content/20 p-2 rounded break-all">
|
||||||
|
{{ 'chrome://flags/#unsafely-treat-insecure-origin-as-secure' }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ol class="list-decimal list-inside space-y-2 mt-2">
|
||||||
|
<li>将该选项设置为 <b class="text-success">Enabled</b>。</li>
|
||||||
|
<li>在出现的输入框中，粘贴下方提取的 <b>ws://</b> 目标地址：</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<!-- 计算出的 WS Origin -->
|
||||||
|
<div class="bg-warning/20 p-3 rounded border border-warning/30">
|
||||||
|
<div class="text-[10px] opacity-60 mb-1 uppercase tracking-wider">Target Origin To Allow:</div>
|
||||||
|
<div class="font-mono text-sm font-bold select-all break-all text-white">
|
||||||
|
{{ insecureOriginList }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="text-[10px] opacity-70">
|
||||||
|
* 设置完成后点击浏览器底部的 <span class="badge badge-xs">Relaunch</span> 重启浏览器即可连接。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-action">
|
||||||
|
<form method="dialog" @submit.prevent="showInsecureModal = false">
|
||||||
|
<button class="btn btn-sm">已了解 / 关闭</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<form method="dialog" class="modal-backdrop" @submit.prevent="showInsecureModal = false">
|
||||||
|
<button>close</button>
|
||||||
|
</form>
|
||||||
|
</dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, computed, onUnmounted, nextTick, watch } from 'vue';
|
||||||
|
import { Html5Qrcode } from "html5-qrcode";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 1. 全局状态与日志 (Thread Safety Simulation)
|
||||||
|
// ============================================
|
||||||
|
const logs = ref([{time: 'INIT', msg: 'System Ready.'}]);
|
||||||
|
const addLog = (msg) => {
|
||||||
|
console.log(msg);
|
||||||
|
// 限制日志长度防止内存溢出
|
||||||
|
if (logs.value.length > 50) logs.value.pop();
|
||||||
|
logs.value.unshift({ time: new Date().toLocaleTimeString('en-GB'), msg });
|
||||||
|
};
|
||||||
|
const getBatIcon = (level) => {
|
||||||
|
if(level > 90) return '🔋';
|
||||||
|
if(level > 60) return '🔋';
|
||||||
|
if(level > 30) return '🔋';
|
||||||
|
return '🪫';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 2. 蓝牙层 (Producer-Consumer 模式)
|
||||||
|
// ============================================
|
||||||
|
// 蓝牙对象
|
||||||
|
const rawBLE = {
|
||||||
|
device: null,
|
||||||
|
chars: { battery: null, ab: null, a: null, b: null }
|
||||||
|
};
|
||||||
|
const bleConnected = ref(false);
|
||||||
|
const isConnectingBLE = ref(false);
|
||||||
|
const bleDeviceName = ref("");
|
||||||
|
const batteryLevel = ref(0);
|
||||||
|
const lastBatUpdate = ref("-");
|
||||||
|
const dglab = reactive({ powerLevel: [0, 0] });
|
||||||
|
|
||||||
|
// 互斥锁 与 指令队列
|
||||||
|
let isGattBusy = false;
|
||||||
|
const cmdQueue = []; // 命令队列，充当缓冲区
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 3. 视觉层 (UI Thread decoupled)
|
||||||
|
// ============================================
|
||||||
|
// 波形历史数据
|
||||||
|
const visHistory = reactive({ A: [], B: [] });
|
||||||
|
const MAX_VIS_POINTS = 32; // 柱子数量
|
||||||
|
const canvasA = ref(null);
|
||||||
|
const canvasB = ref(null);
|
||||||
|
|
||||||
|
// 通道状态机
|
||||||
|
const channelState = reactive({
|
||||||
|
A: { queue: [], index: 0, active: false, nextTick: 0 },
|
||||||
|
B: { queue: [], index: 0, active: false, nextTick: 0 }
|
||||||
|
});
|
||||||
|
const WAVE_INTERVAL = 100; // V2 脉冲间隔标准 100ms
|
||||||
|
|
||||||
|
// V2 协议映射 (Data + Strength)
|
||||||
|
const parseV3Hex = (v3HexStr) => {
|
||||||
|
if (!v3HexStr || v3HexStr.length < 10) return { payload: new Uint8Array([0,0,0]), strength: 0 };
|
||||||
|
|
||||||
|
// 解析频率和强度
|
||||||
|
const freqVal = parseInt(v3HexStr.substring(0, 2), 16);
|
||||||
|
const strengthVal = parseInt(v3HexStr.substring(8, 10), 16);
|
||||||
|
|
||||||
|
if (strengthVal === 0) return { payload: new Uint8Array([0, 0, 0]), strength: 0 };
|
||||||
|
|
||||||
|
// V2 映射算法 (核心)
|
||||||
|
let z = Math.round(strengthVal / 4);
|
||||||
|
if (z > 31) z = 31; if (z < 1) z = 1;
|
||||||
|
|
||||||
|
let freqHz = freqVal;
|
||||||
|
if (freqHz < 10) freqHz = 10;
|
||||||
|
const periodMs = 1000 / freqHz;
|
||||||
|
|
||||||
|
let x = Math.round(Math.sqrt(freqHz / 1000) * 15);
|
||||||
|
if (x < 1) x = 1; if (x > 31) x = 31;
|
||||||
|
|
||||||
|
let y = Math.round(periodMs - x);
|
||||||
|
if (y < 1) y = 1; if (y > 1023) y = 1023;
|
||||||
|
|
||||||
|
const value = (z << 15) | (y << 5) | x;
|
||||||
|
const arr = new Uint8Array([(value & 0xFF), ((value >> 8) & 0xFF), ((value >> 16) & 0xFF)]);
|
||||||
|
|
||||||
|
return { payload: arr, strength: strengthVal };
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 4. 可视化绘图 (Render "Helper")
|
||||||
|
// ============================================
|
||||||
|
const updateVisualizer = (chStr, strength) => {
|
||||||
|
const list = visHistory[chStr];
|
||||||
|
list.push(strength);
|
||||||
|
if (list.length > MAX_VIS_POINTS) list.shift();
|
||||||
|
|
||||||
|
const cvs = chStr === 'A' ? canvasA.value : canvasB.value;
|
||||||
|
if (!cvs) return;
|
||||||
|
|
||||||
|
// 简单的 diff 检查，不过 Canvas 重绘代价低，这里每 100ms 一次，不是性能瓶颈
|
||||||
|
const ctx = cvs.getContext('2d');
|
||||||
|
const w = cvs.width;
|
||||||
|
const h = cvs.height;
|
||||||
|
|
||||||
|
// 清空
|
||||||
|
ctx.fillStyle = '#0a0a0a';
|
||||||
|
ctx.fillRect(0, 0, w, h);
|
||||||
|
|
||||||
|
// 基准线
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.strokeStyle = '#333';
|
||||||
|
ctx.moveTo(0, h); ctx.lineTo(w, h);
|
||||||
|
ctx.stroke();
|
||||||
|
|
||||||
|
// 绘制柱状图
|
||||||
|
const color = chStr === 'A' ? '#f000b8' : '#37cdbe'; // Pink / Teal
|
||||||
|
ctx.fillStyle = color;
|
||||||
|
ctx.shadowBlur = 5;
|
||||||
|
ctx.shadowColor = color;
|
||||||
|
|
||||||
|
const slotW = w / MAX_VIS_POINTS;
|
||||||
|
const barW = slotW - 2; // 缝隙
|
||||||
|
|
||||||
|
for (let i = 0; i < list.length; i++) {
|
||||||
|
const val = Math.min(list[i], 100);
|
||||||
|
if (val > 0) {
|
||||||
|
const barH = (val / 100) * (h - 2); // 留一点顶空
|
||||||
|
ctx.fillRect(i * slotW + 1, h - barH, barW, barH);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx.shadowBlur = 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 5. Socket 与 QR 解析 (Network Layer)
|
||||||
|
// ============================================
|
||||||
|
const wsConnected = ref(false);
|
||||||
|
const wsStatusText = ref("离线");
|
||||||
|
const wsUrlInput = ref("");
|
||||||
|
const wsClientId = ref("");
|
||||||
|
const wsTargetId = ref("");
|
||||||
|
const maxStrengthA = ref(10);
|
||||||
|
const maxStrengthB = ref(10);
|
||||||
|
const realMaxA = computed(() => maxStrengthA.value);
|
||||||
|
const realMaxB = computed(() => maxStrengthB.value);
|
||||||
|
const calcPercent = (val) => Math.min(100, Math.round((val / 200) * 100));
|
||||||
|
|
||||||
|
let socket = null;
|
||||||
|
let bindMap = {};
|
||||||
|
|
||||||
|
// 监听强度上限变化，一旦改变立即向上同步
|
||||||
|
watch([maxStrengthA, maxStrengthB], () => {
|
||||||
|
syncStatusToSocket();
|
||||||
|
});
|
||||||
|
|
||||||
|
// 🔥 新增：安全弹窗控制
|
||||||
|
const showInsecureModal = ref(false);
|
||||||
|
|
||||||
|
const insecureOriginList = computed(() => {
|
||||||
|
if (!wsUrlInput.value) return "等待输入 WS 地址...";
|
||||||
|
|
||||||
|
// 提取纯净 URL
|
||||||
|
let urlToParse = wsUrlInput.value.trim();
|
||||||
|
// 如果包含 DG-LAB 前缀，先分割
|
||||||
|
if (urlToParse.includes("#DGLAB-SOCKET#")) {
|
||||||
|
const parts = urlToParse.split('#');
|
||||||
|
const found = parts.find(p => p.startsWith('ws://') || p.startsWith('wss://'));
|
||||||
|
if (found) urlToParse = found;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const urlObj = new URL(urlToParse);
|
||||||
|
// 如果不是 ws:// 协议 (例如 wss://)，通常不需要配置这个 flag，但如果是 ws:// 则需要
|
||||||
|
if (urlObj.protocol === 'ws:') {
|
||||||
|
// 返回 ws://host:port
|
||||||
|
return urlObj.origin;
|
||||||
|
}
|
||||||
|
} catch(e) {}
|
||||||
|
|
||||||
|
// 如果无法解析，返回提示
|
||||||
|
return "请确保输入包含有效的 ws:// 地址";
|
||||||
|
});
|
||||||
|
|
||||||
|
// ★核心解析逻辑：处理 #DGLAB-SOCKET#wss://...
|
||||||
|
const parseWsUrl = (rawInput) => {
|
||||||
|
if (!rawInput) return null;
|
||||||
|
let url = rawInput.trim();
|
||||||
|
let target = "";
|
||||||
|
|
||||||
|
// 格式 1: "https://...#DGLAB-SOCKET#wss://ws.dungeon-lab.cn/UUID"
|
||||||
|
if (url.includes("#DGLAB-SOCKET#")) {
|
||||||
|
const parts = url.split('#');
|
||||||
|
// 寻找以 ws 开头的部分
|
||||||
|
const wsPart = parts.find(p => p.startsWith('ws://') || p.startsWith('wss://'));
|
||||||
|
if (wsPart) {
|
||||||
|
url = wsPart;
|
||||||
|
} else {
|
||||||
|
return null; // 无法识别的格式
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 提取 UUID (TargetId)
|
||||||
|
// 通常在 URL 的最后一段
|
||||||
|
const urlParts = url.split('/');
|
||||||
|
if (urlParts.length > 0) {
|
||||||
|
// 假设 UUID 是类似 136437dd-5043-49d4-82d8-52324b2eed42，长度 36
|
||||||
|
const lastPart = urlParts[urlParts.length - 1];
|
||||||
|
if (lastPart.length > 20) { // 简单检查
|
||||||
|
target = lastPart;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { finalUrl: url, targetId: target };
|
||||||
|
};
|
||||||
|
|
||||||
|
const connectSocket = () => {
|
||||||
|
const parseResult = parseWsUrl(wsUrlInput.value);
|
||||||
|
if (!parseResult) {
|
||||||
|
addLog("WS URL 格式错误");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { finalUrl, targetId } = parseResult;
|
||||||
|
wsTargetId.value = targetId;
|
||||||
|
addLog(`连接: ${finalUrl.substring(0,25)}...`);
|
||||||
|
|
||||||
|
if (socket) socket.close();
|
||||||
|
|
||||||
|
try {
|
||||||
|
socket = new WebSocket(finalUrl);
|
||||||
|
} catch(e) {
|
||||||
|
addLog("Socket创建失败");
|
||||||
|
// Chrome 在混合内容(Mixed Content)安全策略下可能直接在构造函数抛错
|
||||||
|
if (finalUrl.startsWith("ws://")) {
|
||||||
|
showInsecureModal.value = true;
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
socket.onopen = () => {
|
||||||
|
wsConnected.value = true;
|
||||||
|
wsStatusText.value = "已连接等待绑定";
|
||||||
|
addLog("WS Connected");
|
||||||
|
resetToZero();
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.onerror = (err) => {
|
||||||
|
addLog("WS Error");
|
||||||
|
wsConnected.value = false;
|
||||||
|
// 如果是异步连接失败，且是 ws:// 开头，大概率被安全策略拦截
|
||||||
|
if (finalUrl.startsWith("ws://")) {
|
||||||
|
console.warn("WS connection failed, possibly due to Mixed Content blocker.");
|
||||||
|
showInsecureModal.value = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.onclose = () => {
|
||||||
|
wsConnected.value = false;
|
||||||
|
wsStatusText.value = "离线";
|
||||||
|
// 🔥 WS 意外或被动断开时，触发重置
|
||||||
|
resetToZero();
|
||||||
|
};
|
||||||
|
socket.onmessage = (e) => {
|
||||||
|
try {
|
||||||
|
const data = JSON.parse(e.data);
|
||||||
|
handleWsMessage(data);
|
||||||
|
} catch(err){ console.error(err); }
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const disconnectSocket = () => {
|
||||||
|
if(socket) socket.close();
|
||||||
|
// 手动断开时触发重置
|
||||||
|
resetToZero();
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendMsg = (type, data = {}) => {
|
||||||
|
addLog(`WS Send: ${type}, Data: ${JSON.stringify(data)}`);
|
||||||
|
if(socket && wsConnected.value) socket.send(JSON.stringify({ type, targetId: wsClientId.value, ...data }));
|
||||||
|
};
|
||||||
|
|
||||||
|
// 消息处理器
|
||||||
|
const handleWsMessage = (data) => {
|
||||||
|
// 1. 握手与绑定
|
||||||
|
if (data.type === 'bind') {
|
||||||
|
if (data.message === 'targetId') {
|
||||||
|
wsClientId.value = data.clientId;
|
||||||
|
// 收到 ClientID 后，如果你有 TargetID（来自扫码），立即发起绑定
|
||||||
|
if(wsTargetId.value) {
|
||||||
|
sendMsg('bind', { clientId: wsClientId.value, targetId: wsTargetId.value, message: 'DGLAB' });
|
||||||
|
}
|
||||||
|
} else if (data.message === '200') {
|
||||||
|
bindMap[wsTargetId.value] = true;
|
||||||
|
wsStatusText.value = "已绑定 (Ready)";
|
||||||
|
addLog("绑定成功");
|
||||||
|
syncStatusToSocket();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 接收控制指令
|
||||||
|
if (data.type === 'msg' && data.message) {
|
||||||
|
const msg = data.message;
|
||||||
|
|
||||||
|
// 停止指令
|
||||||
|
if (msg.startsWith('clear-')) {
|
||||||
|
clearWaveStatus(msg.split('-')[1]);
|
||||||
|
}
|
||||||
|
// 强度指令 (strength-1+2+10) = Channel A, Set/Add/Sub, Value
|
||||||
|
else if(msg.startsWith('strength-')) {
|
||||||
|
try {
|
||||||
|
const parts = msg.substring(9).split('+');
|
||||||
|
const ch = parseInt(parts[0]);
|
||||||
|
const mode = parseInt(parts[1]);
|
||||||
|
const val = parseInt(parts[2]);
|
||||||
|
|
||||||
|
let current = (ch === 1) ? dglab.powerLevel[0] : dglab.powerLevel[1];
|
||||||
|
let target = 0;
|
||||||
|
|
||||||
|
if (mode === 0) target = Math.max(0, current - val); // 减
|
||||||
|
else if (mode === 1) target = current + val; // 加
|
||||||
|
else if (mode === 2) target = val; // 设
|
||||||
|
|
||||||
|
// 将指令推入蓝牙队列
|
||||||
|
setDevicePower((ch===1)?target:dglab.powerLevel[0], (ch===2)?target:dglab.powerLevel[1]);
|
||||||
|
} catch(e) {}
|
||||||
|
}
|
||||||
|
// 波形指令
|
||||||
|
else if(msg.startsWith('pulse-')) {
|
||||||
|
try {
|
||||||
|
const parts = msg.split(':');
|
||||||
|
const chStr = parts[0].split('-')[1];
|
||||||
|
const waveStr = msg.substring(msg.indexOf(':')+1);
|
||||||
|
const wave = JSON.parse(waveStr);
|
||||||
|
if (Array.isArray(wave)) updateWaveData(chStr, wave);
|
||||||
|
} catch(e) {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 心跳
|
||||||
|
if (data.type === 'heartbeat') sendMsg('heartbeat', { message: "DGLAB" });
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 6. QR 扫码逻辑 (Separate Logic)
|
||||||
|
// ============================================
|
||||||
|
const showScanner = ref(false);
|
||||||
|
let html5QrCode = null;
|
||||||
|
|
||||||
|
const toggleScanner = () => {
|
||||||
|
if(showScanner.value) {
|
||||||
|
// 关闭
|
||||||
|
if(html5QrCode) {
|
||||||
|
html5QrCode.stop().then(() => {
|
||||||
|
html5QrCode.clear();
|
||||||
|
showScanner.value = false;
|
||||||
|
}).catch(err => console.error(err));
|
||||||
|
} else {
|
||||||
|
showScanner.value = false;
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 开启
|
||||||
|
showScanner.value = true;
|
||||||
|
nextTick(() => {
|
||||||
|
html5QrCode = new Html5Qrcode("reader");
|
||||||
|
const config = {
|
||||||
|
fps: 2, // ★ 设置每秒读取2次，节省性能
|
||||||
|
qrbox: 240,
|
||||||
|
aspectRatio: 1.0
|
||||||
|
};
|
||||||
|
|
||||||
|
html5QrCode.start(
|
||||||
|
{ facingMode: "environment" },
|
||||||
|
config,
|
||||||
|
(decodedText, decodedResult) => {
|
||||||
|
// 成功回调
|
||||||
|
const parsed = parseWsUrl(decodedText);
|
||||||
|
if (parsed) {
|
||||||
|
addLog("QR码识别成功");
|
||||||
|
wsUrlInput.value = decodedText; // 显示原始数据给用户看
|
||||||
|
// 自动连接
|
||||||
|
toggleScanner(); // 关闭扫码
|
||||||
|
connectSocket(); // 发起连接
|
||||||
|
}
|
||||||
|
},
|
||||||
|
(errorMessage) => {
|
||||||
|
// 每帧识别失败会在这里，可以忽略
|
||||||
|
}
|
||||||
|
).catch(err => {
|
||||||
|
addLog("相机启动失败");
|
||||||
|
showScanner.value = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 7. 蓝牙核心循环 (The "Main Thread" Loop)
|
||||||
|
// ============================================
|
||||||
|
let loopRunning = false;
|
||||||
|
let statusTimer = null;
|
||||||
|
|
||||||
|
const sleep = (ms) => new Promise(r => setTimeout(r, ms));
|
||||||
|
const withTimeout = (p, ms=500) => Promise.race([p, new Promise((_,j)=>setTimeout(()=>j(new Error("Timeout")),ms))]);
|
||||||
|
|
||||||
|
// 封装安全的读写
|
||||||
|
const safeBleWrite = async (char, data) => {
|
||||||
|
if (isGattBusy) throw new Error("BUSY");
|
||||||
|
isGattBusy = true;
|
||||||
|
try { await withTimeout(char.writeValue(data), 300); }
|
||||||
|
finally { isGattBusy = false; }
|
||||||
|
};
|
||||||
|
const safeBleRead = async (char) => {
|
||||||
|
if (isGattBusy) throw new Error("BUSY");
|
||||||
|
isGattBusy = true;
|
||||||
|
try { return await withTimeout(char.readValue(), 300); }
|
||||||
|
finally { isGattBusy = false; }
|
||||||
|
};
|
||||||
|
|
||||||
|
// ★ 主循环：同时处理 波形 和 强度指令
|
||||||
|
const processLoop = async () => {
|
||||||
|
while (loopRunning && bleConnected.value) {
|
||||||
|
try {
|
||||||
|
if (isGattBusy) { await sleep(10); continue; }
|
||||||
|
const now = Date.now();
|
||||||
|
let actionTaken = false;
|
||||||
|
|
||||||
|
// 1. 处理 A 通道波形
|
||||||
|
if (channelState.A.active && channelState.A.queue.length > 0) {
|
||||||
|
if (now >= channelState.A.nextTick) {
|
||||||
|
const item = channelState.A.queue[channelState.A.index];
|
||||||
|
if (rawBLE.chars.a) {
|
||||||
|
try {
|
||||||
|
await safeBleWrite(rawBLE.chars.a, item.payload);
|
||||||
|
updateVisualizer('A', item.strength);
|
||||||
|
|
||||||
|
// 更新时间戳
|
||||||
|
if (channelState.A.nextTick === 0) channelState.A.nextTick = now + WAVE_INTERVAL;
|
||||||
|
else {
|
||||||
|
channelState.A.nextTick += WAVE_INTERVAL;
|
||||||
|
// 防止时间漂移过大
|
||||||
|
if (now - channelState.A.nextTick > 300) channelState.A.nextTick = now + WAVE_INTERVAL;
|
||||||
|
}
|
||||||
|
channelState.A.index = (channelState.A.index + 1) % channelState.A.queue.length;
|
||||||
|
actionTaken = true;
|
||||||
|
} catch (e) { if(e.message!=="BUSY") console.warn("WaveA skip"); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (channelState.A.active) {
|
||||||
|
// 队列为空但激活，画空线
|
||||||
|
updateVisualizer('A', 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 2. 处理 B 通道波形
|
||||||
|
if (!actionTaken && channelState.B.active && channelState.B.queue.length > 0) {
|
||||||
|
if (now >= channelState.B.nextTick) {
|
||||||
|
const item = channelState.B.queue[channelState.B.index];
|
||||||
|
if (rawBLE.chars.b) {
|
||||||
|
try {
|
||||||
|
await safeBleWrite(rawBLE.chars.b, item.payload);
|
||||||
|
updateVisualizer('B', item.strength);
|
||||||
|
|
||||||
|
if (channelState.B.nextTick === 0) channelState.B.nextTick = now + WAVE_INTERVAL;
|
||||||
|
else {
|
||||||
|
channelState.B.nextTick += WAVE_INTERVAL;
|
||||||
|
if (now - channelState.B.nextTick > 300) channelState.B.nextTick = now + WAVE_INTERVAL;
|
||||||
|
}
|
||||||
|
channelState.B.index = (channelState.B.index + 1) % channelState.B.queue.length;
|
||||||
|
actionTaken = true;
|
||||||
|
} catch (e) { if(e.message!=="BUSY") console.warn("WaveB skip"); }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (channelState.B.active) {
|
||||||
|
updateVisualizer('B', 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 3. 处理常规指令 (从队列取出一个)
|
||||||
|
if (!actionTaken && cmdQueue.length > 0) {
|
||||||
|
const task = cmdQueue[0];
|
||||||
|
const char = rawBLE.chars[task.charKey];
|
||||||
|
|
||||||
|
if (char) {
|
||||||
|
try {
|
||||||
|
if (task.type === 'write') {
|
||||||
|
if(task.tag === 'pwr') addLog(task.desc);
|
||||||
|
await safeBleWrite(char, task.data);
|
||||||
|
} else if (task.type === 'read') {
|
||||||
|
if (task.tag === 'bat') {
|
||||||
|
const val = await safeBleRead(char);
|
||||||
|
batteryLevel.value = val.getUint8(0);
|
||||||
|
lastBatUpdate.value = new Date().toLocaleTimeString();
|
||||||
|
} else if (task.tag === 'status') {
|
||||||
|
const val = await safeBleRead(char); // 读取 3 bytes
|
||||||
|
if (val.byteLength >= 3) {
|
||||||
|
// 24bit data: A(11) | B(11) | Reserved(2) - usually
|
||||||
|
// 实际上 V2: 3 bytes mapping
|
||||||
|
const raw = (val.getUint8(0)) | (val.getUint8(1) << 8) | (val.getUint8(2) << 16);
|
||||||
|
const newA = Math.round(((raw >> 11) & 0x7FF) / 7);
|
||||||
|
const newB = Math.round((raw & 0x7FF) / 7);
|
||||||
|
|
||||||
|
dglab.powerLevel[0] = newA;
|
||||||
|
dglab.powerLevel[1] = newB;
|
||||||
|
syncStatusToSocket();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 成功执行后移除
|
||||||
|
cmdQueue.shift();
|
||||||
|
actionTaken = true;
|
||||||
|
} catch (e) {
|
||||||
|
// 一般 BUSY 或 Timeout 重试，但如果是断连则会抛出 loop 外
|
||||||
|
if (e.message !== "BUSY") {
|
||||||
|
// 如果是严重错误，移除任务防止堵塞
|
||||||
|
cmdQueue.shift();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
cmdQueue.shift(); // 特征值不存在
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 动态休眠：如果有动作，休息短一点；如果空闲，休息久一点
|
||||||
|
await sleep(actionTaken ? 15 : 20);
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
isGattBusy = false;
|
||||||
|
// 如果连接断了，在主逻辑处处理
|
||||||
|
if (!bleConnected.value) break;
|
||||||
|
await sleep(100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 8. 业务逻辑 (Utils)
|
||||||
|
// ============================================
|
||||||
|
const clearWaveStatus = (target) => {
|
||||||
|
const ch = (target == '1' || target == 'A') ? 'A' : 'B';
|
||||||
|
channelState[ch].active = false;
|
||||||
|
channelState[ch].queue = [];
|
||||||
|
channelState[ch].nextTick = 0;
|
||||||
|
updateVisualizer(ch, 0);
|
||||||
|
addLog(`[Stop] Channel ${ch}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateWaveData = (target, hexList) => {
|
||||||
|
if (!bleConnected.value) return;
|
||||||
|
const ch = (target == '1' || target == 'A') ? 'A' : 'B';
|
||||||
|
const parsed = hexList.map(h => parseV3Hex(h));
|
||||||
|
|
||||||
|
channelState[ch].queue = parsed;
|
||||||
|
channelState[ch].index = 0;
|
||||||
|
channelState[ch].active = true;
|
||||||
|
channelState[ch].nextTick = 0; // 重置计时器以便立即开始
|
||||||
|
|
||||||
|
addLog(`>> [PULSE] ${ch} loaded ${parsed.length} frames`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 🔥 新增：全局重置状态 (归零强度 + 清空波形)
|
||||||
|
const resetToZero = () => {
|
||||||
|
// 1. 逻辑数据归零
|
||||||
|
dglab.powerLevel = [0, 0];
|
||||||
|
|
||||||
|
// 2. 清空波形队列
|
||||||
|
channelState.A.queue = [];
|
||||||
|
channelState.A.active = false;
|
||||||
|
channelState.A.index = 0;
|
||||||
|
|
||||||
|
channelState.B.queue = [];
|
||||||
|
channelState.B.active = false;
|
||||||
|
channelState.B.index = 0;
|
||||||
|
|
||||||
|
// 3. 更新可视化为空
|
||||||
|
updateVisualizer('A', 0);
|
||||||
|
updateVisualizer('B', 0);
|
||||||
|
|
||||||
|
// 4. 如果蓝牙已连接，发送物理归零指令
|
||||||
|
if (bleConnected.value) {
|
||||||
|
// 直接构造归零指令推入队列，不通过 setDevicePower 避免递归逻辑
|
||||||
|
const arr = new Uint8Array([0, 0, 0]);
|
||||||
|
// 清理旧的强度指令，确保归零优先
|
||||||
|
for (let i=cmdQueue.length-1; i>=0; i--) {
|
||||||
|
if (cmdQueue[i].tag === 'pwr') cmdQueue.splice(i, 1);
|
||||||
|
}
|
||||||
|
cmdQueue.push({
|
||||||
|
type: 'write',
|
||||||
|
charKey: 'ab',
|
||||||
|
data: arr,
|
||||||
|
tag: 'pwr',
|
||||||
|
desc: `安全重置: 强度归零`
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
addLog(">>System Reset (Zero Strength & Clear Waves)<<");
|
||||||
|
};
|
||||||
|
|
||||||
|
// ... existing code (setDevicePower, syncStatusToSocket etc.) ...
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const setDevicePower = (a, b) => {
|
||||||
|
// 限制
|
||||||
|
const safeA = Math.min(a, realMaxA.value);
|
||||||
|
const safeB = Math.min(b, realMaxB.value);
|
||||||
|
|
||||||
|
// 乐观更新 UI (本地数据源更新)
|
||||||
|
dglab.powerLevel = [safeA, safeB];
|
||||||
|
|
||||||
|
// ============== 新增代码开始 ==============
|
||||||
|
// 强度发生变化，立即向上方 Socket 同步最新状态
|
||||||
|
syncStatusToSocket();
|
||||||
|
// ============== 新增代码结束 ==============
|
||||||
|
|
||||||
|
// 构建指令
|
||||||
|
// A (11bit) | B (11bit)
|
||||||
|
const rawA = safeA * 7;
|
||||||
|
const rawB = safeB * 7;
|
||||||
|
const val = (rawA << 11) | rawB;
|
||||||
|
const arr = new Uint8Array([(val & 0xFF), ((val >> 8) & 0xFF), ((val >> 16) & 0xFF)]);
|
||||||
|
|
||||||
|
// 优化队列：如果有未发送的强度指令，替换之，减少堆积
|
||||||
|
for (let i=cmdQueue.length-1; i>=0; i--) {
|
||||||
|
if (cmdQueue[i].tag === 'pwr') {
|
||||||
|
cmdQueue.splice(i, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
cmdQueue.push({
|
||||||
|
type: 'write',
|
||||||
|
charKey: 'ab',
|
||||||
|
data: arr,
|
||||||
|
tag: 'pwr',
|
||||||
|
desc: `强度 A${safeA} B${safeB}`
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// 宽松版同步函数
|
||||||
|
const syncStatusToSocket = () => {
|
||||||
|
// 只要 WebSocket 是连着的，并且我们知道要发给谁 (TargetId)，就直接发
|
||||||
|
if(wsConnected.value && wsTargetId.value) {
|
||||||
|
// 构造消息
|
||||||
|
const payload = `strength-${dglab.powerLevel[0]}+${dglab.powerLevel[1]}+${realMaxA.value}+${realMaxB.value}`;
|
||||||
|
|
||||||
|
// 只有当数据真正发送时才打印日志，避免 console 刷屏
|
||||||
|
// console.log("发送同步:", payload);
|
||||||
|
|
||||||
|
sendMsg("msg", { message: payload });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 🔥 修复：Feedback 发送逻辑
|
||||||
|
const sendFeedback = (index) => {
|
||||||
|
// 必须连接 WS 才能发送反馈
|
||||||
|
if(!wsConnected.value) {
|
||||||
|
addLog("WS未连接，无法发送反馈");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 格式必须是 "feedback-x" (x 为 0-9)
|
||||||
|
const msgPayload = `feedback-${index}`;
|
||||||
|
|
||||||
|
sendMsg("msg", { message: msgPayload });
|
||||||
|
addLog(`Feedback sent: ${msgPayload} (Index: ${index})`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ============================================
|
||||||
|
// 9. 连接建立
|
||||||
|
// ============================================
|
||||||
|
const scanAndConnectBLE = async () => {
|
||||||
|
isConnectingBLE.value = true;
|
||||||
|
|
||||||
|
// 安全清理旧设备对象
|
||||||
|
if (rawBLE.device) {
|
||||||
|
if (rawBLE.device.gatt.connected) rawBLE.device.gatt.disconnect();
|
||||||
|
rawBLE.device = null;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const device = await navigator.bluetooth.requestDevice({
|
||||||
|
filters: [{ namePrefix: "D-LAB" }],
|
||||||
|
optionalServices: [
|
||||||
|
"955a180b-0fe2-f5aa-a094-84b8d4f3e8ad", // Service Basic
|
||||||
|
"955a180a-0fe2-f5aa-a094-84b8d4f3e8ad" // Service Bat
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
device.addEventListener('gattserverdisconnected', onDisconnect);
|
||||||
|
rawBLE.device = device;
|
||||||
|
bleDeviceName.value = device.name;
|
||||||
|
|
||||||
|
addLog("正在连接 GATT...");
|
||||||
|
const server = await device.gatt.connect();
|
||||||
|
// 🔥🔥🔥 关键修复：增加 500ms 延时 🔥🔥🔥
|
||||||
|
// 等待物理连接稳定，防止立即读取服务导致 "GATT Server is disconnected"
|
||||||
|
await sleep(500);
|
||||||
|
if (!server.connected) {
|
||||||
|
throw new Error("连接不稳定，设备已断开，请重试");
|
||||||
|
}
|
||||||
|
|
||||||
|
addLog("获取服务中...");
|
||||||
|
|
||||||
|
// Services
|
||||||
|
const sBasic = await server.getPrimaryService("955a180b-0fe2-f5aa-a094-84b8d4f3e8ad");
|
||||||
|
const sBat = await server.getPrimaryService("955a180a-0fe2-f5aa-a094-84b8d4f3e8ad");
|
||||||
|
|
||||||
|
// Characteristics
|
||||||
|
rawBLE.chars.battery = await sBat.getCharacteristic("955a1500-0fe2-f5aa-a094-84b8d4f3e8ad");
|
||||||
|
// 获取 Basic 下的特征值
|
||||||
|
rawBLE.chars.ab = await sBasic.getCharacteristic("955a1504-0fe2-f5aa-a094-84b8d4f3e8ad");
|
||||||
|
rawBLE.chars.a = await sBasic.getCharacteristic("955a1505-0fe2-f5aa-a094-84b8d4f3e8ad");
|
||||||
|
rawBLE.chars.b = await sBasic.getCharacteristic("955a1506-0fe2-f5aa-a094-84b8d4f3e8ad");
|
||||||
|
bleConnected.value = true;
|
||||||
|
isGattBusy = false;
|
||||||
|
loopRunning = true;
|
||||||
|
|
||||||
|
// 重置可视化
|
||||||
|
visHistory.A = []; visHistory.B = [];
|
||||||
|
for(let i=0;i<MAX_VIS_POINTS;i++) { visHistory.A.push(0); visHistory.B.push(0); }
|
||||||
|
|
||||||
|
addLog("Bluetooth Connected (Ready)");
|
||||||
|
resetToZero();
|
||||||
|
processLoop();
|
||||||
|
|
||||||
|
// 启动后台状态检查 (每2秒同步一次)
|
||||||
|
if(statusTimer) clearInterval(statusTimer);
|
||||||
|
statusTimer = setInterval(() => {
|
||||||
|
if (bleConnected.value) {
|
||||||
|
// 只有在空闲时才读取，避免冲突
|
||||||
|
if (!isGattBusy) {
|
||||||
|
cmdQueue.push({ type:'read', tag:'status', charKey:'ab' });
|
||||||
|
// 10% 概率读电量
|
||||||
|
if (Math.random() < 0.1) cmdQueue.push({ type:'read', tag:'bat', charKey:'battery' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 2000);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
addLog("BLE Connect Fail: " + e.message);
|
||||||
|
// 如果半路失败，清理连接状态
|
||||||
|
if (rawBLE.device && rawBLE.device.gatt.connected) {
|
||||||
|
rawBLE.device.gatt.disconnect();
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
isConnectingBLE.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDisconnect = () => {
|
||||||
|
bleConnected.value = false;
|
||||||
|
loopRunning = false;
|
||||||
|
if(statusTimer) clearInterval(statusTimer);
|
||||||
|
addLog("BLE Disconnected");
|
||||||
|
};
|
||||||
|
|
||||||
|
// 生命周期清理
|
||||||
|
onUnmounted(() => {
|
||||||
|
loopRunning = false;
|
||||||
|
if(socket) socket.close();
|
||||||
|
if(html5QrCode) html5QrCode.stop();
|
||||||
|
if(statusTimer) clearInterval(statusTimer);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
5
src/main.js
Normal file
5
src/main.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
2
src/style.css
Normal file
2
src/style.css
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
@plugin "daisyui";
|
||||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import tailwindcss from "@tailwindcss/vite";
|
||||||
|
import vue from "@vitejs/plugin-vue";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [tailwindcss(), vue()],
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user