Compare commits
5 Commits
3da0f284f3
...
6c5250f9c2
Author | SHA1 | Date |
---|---|---|
|
6c5250f9c2 | |
|
912eb625f5 | |
|
10e4a82e5b | |
|
ef267721fd | |
|
1d35c36da6 |
|
@ -86,7 +86,7 @@ public class HttpVideoStreamService : BackgroundService
|
|||
{
|
||||
private static readonly NLog.Logger logger = NLog.LogManager.GetCurrentClassLogger();
|
||||
private HttpListener? _httpListener;
|
||||
private readonly int _serverPort = 8080;
|
||||
private readonly int _serverPort = 4321;
|
||||
private readonly int _frameRate = 30; // 30 FPS
|
||||
|
||||
// 动态分辨率配置
|
||||
|
@ -412,9 +412,9 @@ public class HttpVideoStreamService : BackgroundService
|
|||
{
|
||||
if (_usbCamera == null)
|
||||
{
|
||||
_usbCamera = new VideoCapture(0);
|
||||
_usbCamera = new VideoCapture(1);
|
||||
_usbCamera.Fps = _frameRate;
|
||||
_usbCamera.FrameWidth = _frameWidth;
|
||||
_usbCamera.FrameWidth = _frameWidth;
|
||||
_usbCamera.FrameHeight = _frameHeight;
|
||||
_usbCameraEnable = _usbCamera.IsOpened();
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { createInjectionState } from "@vueuse/core";
|
||||
import { autoResetRef, createInjectionState } from "@vueuse/core";
|
||||
import { shallowRef, reactive, ref, computed } from "vue";
|
||||
import { Mutex } from "async-mutex";
|
||||
import {
|
||||
|
@ -26,7 +26,7 @@ const DEFAULT_CONFIG: OscilloscopeFullConfig = new OscilloscopeFullConfig({
|
|||
triggerLevel: 128,
|
||||
triggerRisingEdge: true,
|
||||
horizontalShift: 0,
|
||||
decimationRate: 0,
|
||||
decimationRate: 50,
|
||||
autoRefreshRAM: false,
|
||||
});
|
||||
|
||||
|
@ -83,6 +83,10 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
|
|||
alert.info("配置已重置", 2000);
|
||||
};
|
||||
|
||||
const clearOscilloscopeData = () => {
|
||||
oscData.value = undefined;
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getOscilloscopeData = async () => {
|
||||
try {
|
||||
|
@ -119,6 +123,28 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
|
|||
}
|
||||
};
|
||||
|
||||
// 定时器引用
|
||||
let refreshIntervalId: number | undefined;
|
||||
// 刷新间隔(毫秒),可根据需要调整
|
||||
const refreshIntervalMs = ref(1000);
|
||||
|
||||
// 定时刷新函数
|
||||
const startAutoRefresh = () => {
|
||||
if (refreshIntervalId !== undefined) return;
|
||||
refreshIntervalId = window.setInterval(async () => {
|
||||
await refreshRAM();
|
||||
await getOscilloscopeData();
|
||||
}, refreshIntervalMs.value);
|
||||
};
|
||||
|
||||
const stopAutoRefresh = () => {
|
||||
if (refreshIntervalId !== undefined) {
|
||||
clearInterval(refreshIntervalId);
|
||||
refreshIntervalId = undefined;
|
||||
isCapturing.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 启动捕获
|
||||
const startCapture = async () => {
|
||||
if (operationMutex.isLocked()) {
|
||||
|
@ -133,14 +159,13 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
|
|||
if (!started) throw new Error("无法启动捕获");
|
||||
alert.info("开始捕获...", 2000);
|
||||
|
||||
// 简单轮询,直到捕获完成(可根据后端实际情况优化)
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
await getOscilloscopeData();
|
||||
alert.success("捕获完成", 2000);
|
||||
// 启动定时刷新
|
||||
startAutoRefresh();
|
||||
} catch (error) {
|
||||
alert.error("捕获失败", 3000);
|
||||
} finally {
|
||||
isCapturing.value = false;
|
||||
stopAutoRefresh();
|
||||
} finally {
|
||||
release();
|
||||
}
|
||||
};
|
||||
|
@ -152,6 +177,7 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
|
|||
return;
|
||||
}
|
||||
isCapturing.value = false;
|
||||
stopAutoRefresh();
|
||||
const release = await operationMutex.acquire();
|
||||
try {
|
||||
const client = AuthManager.createAuthenticatedOscilloscopeApiClient();
|
||||
|
@ -205,7 +231,7 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
|
|||
try {
|
||||
const ok = await client.refreshRAM();
|
||||
if (ok) {
|
||||
alert.success("RAM已刷新", 2000);
|
||||
// alert.success("RAM已刷新", 2000);
|
||||
} else {
|
||||
throw new Error();
|
||||
}
|
||||
|
@ -236,21 +262,18 @@ const [useProvideOscilloscope, useOscilloscopeState] = createInjectionState(() =
|
|||
alert.success("测试数据生成成功", 2000);
|
||||
};
|
||||
|
||||
const isOperationInProgress = computed(
|
||||
() => isApplying.value || isCapturing.value || operationMutex.isLocked()
|
||||
);
|
||||
|
||||
return {
|
||||
oscData,
|
||||
config,
|
||||
isApplying,
|
||||
isCapturing,
|
||||
isOperationInProgress,
|
||||
sampleCount,
|
||||
samplePeriodNs,
|
||||
refreshIntervalMs,
|
||||
|
||||
applyConfiguration,
|
||||
resetConfiguration,
|
||||
clearOscilloscopeData,
|
||||
getOscilloscopeData,
|
||||
startCapture,
|
||||
stopCapture,
|
||||
|
|
|
@ -2,10 +2,7 @@
|
|||
<div class="w-full h-100 flex flex-col">
|
||||
<!-- 原有内容 -->
|
||||
<v-chart v-if="hasData" class="w-full h-full" :option="option" autoresize />
|
||||
<div
|
||||
v-else
|
||||
class="w-full h-full flex flex-col gap-4 items-center justify-center text-gray-500"
|
||||
>
|
||||
<div v-else class="w-full h-full flex flex-col gap-4 items-center justify-center text-gray-500">
|
||||
<span> 暂无数据 </span>
|
||||
<!-- 采集控制按钮 -->
|
||||
<div class="flex justify-center items-center mb-2">
|
||||
|
@ -16,13 +13,11 @@
|
|||
!oscManager.isCapturing.value,
|
||||
'from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 focus:ring-red-300':
|
||||
oscManager.isCapturing.value,
|
||||
}"
|
||||
@click="
|
||||
}" @click="
|
||||
oscManager.isCapturing.value
|
||||
? oscManager.stopCapture()
|
||||
: oscManager.startCapture()
|
||||
"
|
||||
>
|
||||
">
|
||||
<span class="flex items-center gap-2">
|
||||
<template v-if="oscManager.isCapturing.value">
|
||||
<Square class="w-5 h-5" />
|
||||
|
@ -109,9 +104,11 @@ const option = computed((): EChartsOption => {
|
|||
return {};
|
||||
}
|
||||
|
||||
const isCapturing = oscManager.isCapturing.value;
|
||||
|
||||
const series: LineSeriesOption[] = [];
|
||||
|
||||
// 兼容单通道和多通道,确保 yChannels 为 number[][]
|
||||
// 兼容单通道和多通道,确保 yChannels 为 number[]
|
||||
const yChannels: number[][] = Array.isArray(oscData.value.y[0])
|
||||
? (oscData.value.y as number[][])
|
||||
: [oscData.value.y as number[]];
|
||||
|
@ -131,6 +128,10 @@ const option = computed((): EChartsOption => {
|
|||
lineStyle: {
|
||||
width: 2,
|
||||
},
|
||||
// 关闭系列动画
|
||||
animation: !isCapturing,
|
||||
animationDuration: isCapturing ? 0 : 1000,
|
||||
animationEasing: isCapturing ? "linear" : "cubicOut",
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -203,6 +204,10 @@ const option = computed((): EChartsOption => {
|
|||
show: false,
|
||||
},
|
||||
},
|
||||
// 全局动画开关
|
||||
animation: !isCapturing,
|
||||
animationDuration: isCapturing ? 0 : 1000,
|
||||
animationEasing: isCapturing ? "linear" : "cubicOut",
|
||||
series: series,
|
||||
};
|
||||
});
|
||||
|
|
|
@ -3,9 +3,21 @@
|
|||
<!-- 波形展示 -->
|
||||
<div class="card bg-base-200 shadow-xl mx-5">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title">
|
||||
<Activity class="w-5 h-5" />
|
||||
波形显示
|
||||
<h2 class="card-title flex flex-row justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<Activity class="w-5 h-5" />
|
||||
波形显示
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="btn btn-sm btn-warning" @click="osc.stopCapture" :disabled="!osc.isCapturing.value">
|
||||
停止捕获
|
||||
</button>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="btn btn-sm btn-error" @click="osc.clearOscilloscopeData">
|
||||
清空
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</h2>
|
||||
<OscilloscopeWaveformDisplay />
|
||||
</div>
|
||||
|
@ -16,122 +28,73 @@
|
|||
<div class="card-body">
|
||||
<h2 class="card-title">示波器配置</h2>
|
||||
<form class="flex flex-col gap-2" @submit.prevent="applyConfiguration">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex flex-row items-center justify-between gap-4">
|
||||
<label>
|
||||
触发电平:
|
||||
<input
|
||||
type="number"
|
||||
v-model="osc.config.triggerLevel"
|
||||
min="0"
|
||||
max="255"
|
||||
class="input input-bordered w-24"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
边沿:
|
||||
<select
|
||||
v-model="osc.config.triggerRisingEdge"
|
||||
class="select select-bordered w-24"
|
||||
>
|
||||
边沿触发:
|
||||
<select v-model="osc.config.triggerRisingEdge" class="select select-bordered w-24">
|
||||
<option :value="true">上升沿</option>
|
||||
<option :value="false">下降沿</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
触发电平:
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="range" min="0" max="255" step="1" v-model="osc.config.triggerLevel"
|
||||
class="range range-sm w-50" />
|
||||
<input type="number" v-model="osc.config.triggerLevel" min="0" max="255"
|
||||
class="input input-bordered w-24" />
|
||||
</div>
|
||||
</label>
|
||||
<label>
|
||||
水平偏移:
|
||||
<input
|
||||
type="number"
|
||||
v-model="osc.config.horizontalShift"
|
||||
class="input input-bordered w-24"
|
||||
/>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="range" min="0" max="1000" step="1" v-model="osc.config.horizontalShift"
|
||||
class="range range-sm w-50" />
|
||||
<input type="number" v-model="osc.config.horizontalShift" min="0" max="1000"
|
||||
class="input input-bordered w-24" />
|
||||
</div>
|
||||
</label>
|
||||
<label>
|
||||
抽取率:
|
||||
<input
|
||||
type="number"
|
||||
v-model="osc.config.decimationRate"
|
||||
min="0"
|
||||
class="input input-bordered w-24"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
自动刷新RAM:
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="osc.config.autoRefreshRAM"
|
||||
class="checkbox"
|
||||
/>
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="range" min="0" max="100" step="1" v-model="osc.config.decimationRate"
|
||||
class="range range-sm w-50" />
|
||||
<input type="number" v-model="osc.config.decimationRate" min="0" max="100"
|
||||
class="input input-bordered w-24" />
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="flex gap-2 mt-2">
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
type="submit"
|
||||
:disabled="osc.isOperationInProgress.value"
|
||||
>
|
||||
应用配置
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
type="button"
|
||||
@click="osc.resetConfiguration"
|
||||
:disabled="osc.isOperationInProgress.value"
|
||||
>
|
||||
重置
|
||||
</button>
|
||||
<div class="flex gap-4">
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-2 mt-2">
|
||||
<label>
|
||||
刷新间隔(ms):
|
||||
<div class="flex items-center gap-2">
|
||||
<input type="range" min="100" max="3000" step="100" v-model="osc.refreshIntervalMs.value"
|
||||
class="range range-sm w-50" />
|
||||
<input type="number" min="100" max="3000" step="100" v-model="osc.refreshIntervalMs.value"
|
||||
class="input input-bordered w-24" />
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="btn btn-primary" type="submit" :disabled="osc.isApplying.value || osc.isCapturing.value">
|
||||
应用配置
|
||||
</button>
|
||||
<button class="btn btn-secondary" type="button" @click="osc.resetConfiguration"
|
||||
:disabled="osc.isApplying.value || osc.isCapturing.value">
|
||||
重置
|
||||
</button>
|
||||
<button class="btn btn-outline" @click="osc.refreshRAM" :disabled="osc.isApplying.value || osc.isCapturing.value">
|
||||
刷新RAM
|
||||
</button>
|
||||
<!-- <button class="btn btn-accent" @click="osc.generateTestData" :disabled="osc.isOperationInProgress.value">
|
||||
生成测试数据
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 捕获控制 -->
|
||||
<div class="card bg-base-200 shadow-xl mx-5">
|
||||
<div class="card-body flex gap-2">
|
||||
<h2 class="card-title">捕获控制</h2>
|
||||
<button
|
||||
class="btn btn-success"
|
||||
@click="osc.startCapture"
|
||||
:disabled="osc.isOperationInProgress.value"
|
||||
>
|
||||
开始捕获
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-warning"
|
||||
@click="osc.stopCapture"
|
||||
:disabled="!osc.isCapturing.value"
|
||||
>
|
||||
停止捕获
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-info"
|
||||
@click="osc.getOscilloscopeData"
|
||||
:disabled="osc.isOperationInProgress.value"
|
||||
>
|
||||
获取数据
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-accent"
|
||||
@click="osc.generateTestData"
|
||||
:disabled="osc.isOperationInProgress.value"
|
||||
>
|
||||
生成测试数据
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RAM刷新 -->
|
||||
<div class="card bg-base-200 shadow-xl mx-5">
|
||||
<div class="card-body flex gap-2">
|
||||
<h2 class="card-title">RAM 操作</h2>
|
||||
<button
|
||||
class="btn btn-outline"
|
||||
@click="osc.refreshRAM"
|
||||
:disabled="osc.isOperationInProgress.value"
|
||||
>
|
||||
刷新RAM
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
Loading…
Reference in New Issue