yanjie/JE-Skin
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

update ignore

Browse Source
This commit is contained in:
lenn
2026-04-07 18:06:46 +08:00
parent 770d713d03
commit 0d3266c95a
344 changed files with 1900 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/lib/components/CenterStage.svelte
View File

@@ -1,4 +1,4 @@
<script lang="ts">
<script lang="ts">
import { createEventDispatcher } from "svelte";
import { flip } from "svelte/animate";
import { cubicIn, cubicOut } from "svelte/easing";
@@ -59,6 +59,9 @@
export let replayFrameInfo = "";
export let showPrecisionTestPanel = false;
export let showCalibrationPanel = false;
export let isCalibrationRunning = false;
export let calibrationDefaultFramesPerRound = 10;
export let calibrationDefaultRoundIntervalSeconds = 300;
type CalibrationMethodId = "coarse";
@@ -82,6 +85,12 @@
let calibrationRoundsByMethod: Record<CalibrationMethodId, number> = {
coarse: 3,
};
let calibrationFramesByMethod: Record<CalibrationMethodId, number> = {
coarse: calibrationDefaultFramesPerRound,
};
let calibrationIntervalsByMethod: Record<CalibrationMethodId, number> = {
coarse: calibrationDefaultRoundIntervalSeconds,
};
const minRailScale = 0.2;
const dispatch = createEventDispatcher<{
@@ -90,6 +99,8 @@
calibrationstart: {
methodId: CalibrationMethodId;
rounds: number;
framesPerRound: number;
roundIntervalSeconds: number;
};
replaytoggle: void;
replaystop: void;
@@ -111,22 +122,25 @@
locale === "zh-CN" ? "实时压力数据 / 数字矩阵" : "Live pressure matrix";
$: calibrationMethodLabel = locale === "zh-CN" ? "标定方法" : "Calibration Method";
$: calibrationRoundsLabel = locale === "zh-CN" ? "期望标定轮次" : "Target Rounds";
$: calibrationStartLabel = locale === "zh-CN" ? "启动标定" : "Start Calibration";
$: calibrationFramesLabel = locale === "zh-CN" ? "每轮帧数" : "Frames Per Round";
$: calibrationIntervalLabel = locale === "zh-CN" ? "轮间间隔(秒)" : "Round Interval (s)";
$: calibrationStartLabel = isCalibrationRunning
? locale === "zh-CN" ? "结束标定" : "Stop Calibration"
: locale === "zh-CN" ? "启动标定" : "Start Calibration";
$: calibrationPanelHint =
locale === "zh-CN"
? "先选择标定方法并设置轮次，再启动标定。"
: "Select a calibration method, set target rounds, then start.";
? "先设置轮次、每轮帧数和轮间间隔，再启动粗标定。运行中可直接结束。"
: "Set rounds, frames per round, and interval before starting. While running, the button stops calibration.";
$: calibrationMethodOptions = [
{
id: "coarse",
label: locale === "zh-CN" ? "粗标定" : "Coarse Calibration",
description:
locale === "zh-CN"
? "快速分轮采样，适合初步校准。"
: "Fast multi-round sampling for initial calibration.",
? "适合初始标定，可按轮次连续采样并自动等待下一轮。"
: "Fast multi-round sampling for initial calibration with automatic waits between rounds.",
},
] satisfies CalibrationMethodOption[];
function toPxNumber(rawValue: string): number {
const value = Number.parseFloat(rawValue);
return Number.isFinite(value) ? value : 0;
@@ -210,10 +224,32 @@
return clamp(safeValue, 1, 20);
}
function normalizeCalibrationFrames(value: number): number {
const safeValue = Number.isFinite(value)
? Math.round(value)
: calibrationDefaultFramesPerRound;
return clamp(safeValue, 1, 10000);
}
function normalizeCalibrationInterval(value: number): number {
const safeValue = Number.isFinite(value)
? Math.round(value)
: calibrationDefaultRoundIntervalSeconds;
return clamp(safeValue, 0, 3600);
}
function calibrationRounds(methodId: CalibrationMethodId): number {
return calibrationRoundsByMethod[methodId] ?? 1;
}
function calibrationFrames(methodId: CalibrationMethodId): number {
return calibrationFramesByMethod[methodId] ?? calibrationDefaultFramesPerRound;
}
function calibrationInterval(methodId: CalibrationMethodId): number {
return calibrationIntervalsByMethod[methodId] ?? calibrationDefaultRoundIntervalSeconds;
}
function handleCalibrationRoundsInput(
event: Event,
methodId: CalibrationMethodId,
@@ -226,16 +262,52 @@
};
}
function handleCalibrationFramesInput(
event: Event,
methodId: CalibrationMethodId,
): void {
const target = event.currentTarget as HTMLInputElement;
const nextValue = Number(target.value);
calibrationFramesByMethod = {
...calibrationFramesByMethod,
[methodId]: normalizeCalibrationFrames(nextValue),
};
}
function handleCalibrationIntervalInput(
event: Event,
methodId: CalibrationMethodId,
): void {
const target = event.currentTarget as HTMLInputElement;
const nextValue = Number(target.value);
calibrationIntervalsByMethod = {
...calibrationIntervalsByMethod,
[methodId]: normalizeCalibrationInterval(nextValue),
};
}
function emitCalibrationStart(methodId: CalibrationMethodId): void {
const rounds = normalizeCalibrationRounds(calibrationRounds(methodId));
const framesPerRound = normalizeCalibrationFrames(calibrationFrames(methodId));
const roundIntervalSeconds = normalizeCalibrationInterval(calibrationInterval(methodId));
calibrationRoundsByMethod = {
...calibrationRoundsByMethod,
[methodId]: rounds,
};
calibrationFramesByMethod = {
...calibrationFramesByMethod,
[methodId]: framesPerRound,
};
calibrationIntervalsByMethod = {
...calibrationIntervalsByMethod,
[methodId]: roundIntervalSeconds,
};
dispatch("calibrationstart", {
methodId,
rounds,
framesPerRound,
roundIntervalSeconds,
});
}
@@ -350,7 +422,7 @@
<section class="split-panel split-calibration-panel">
<header class="split-panel-head is-interactive">
<div class="split-panel-title">
<p>{locale === "zh-CN" ? "校准控制" : "Calibration Control"}</p>
<p>{locale === "zh-CN" ? "标定控制" : "Calibration Control"}</p>
<span>{calibrationPanelHint}</span>
</div>
<button
@@ -387,6 +459,7 @@
min="1"
max="20"
value={calibrationRounds(method.id)}
disabled={isCalibrationRunning}
on:change={(event) =>
handleCalibrationRoundsInput(event, method.id)}
on:input={(event) =>
@@ -394,6 +467,51 @@
/>
</div>
<div class="calibration-param-group">
<label
class="calibration-label"
for={`calibration-frames-${method.id}`}
>
{calibrationFramesLabel}
</label>
<input
id={`calibration-frames-${method.id}`}
class="calibration-input"
type="number"
min="1"
max="10000"
value={calibrationFrames(method.id)}
disabled={isCalibrationRunning}
on:change={(event) =>
handleCalibrationFramesInput(event, method.id)}
on:input={(event) =>
handleCalibrationFramesInput(event, method.id)}
/>
</div>
<div class="calibration-param-group">
<label
class="calibration-label"
for={`calibration-interval-${method.id}`}
>
{calibrationIntervalLabel}
</label>
<input
id={`calibration-interval-${method.id}`}
class="calibration-input"
type="number"
min="0"
max="3600"
step="1"
value={calibrationInterval(method.id)}
disabled={isCalibrationRunning}
on:change={(event) =>
handleCalibrationIntervalInput(event, method.id)}
on:input={(event) =>
handleCalibrationIntervalInput(event, method.id)}
/>
</div>
<button
type="button"
class="calibration-button"
@@ -815,6 +933,7 @@
flex-direction: column;
gap: 1rem;
padding: 2.1rem 0.2rem 0.2rem;
overflow: auto;
}
.calibration-content {
@@ -846,6 +965,7 @@
}
.calibration-button {
inline-size: 100%;
min-inline-size: 8.3rem;
min-block-size: 2.45rem;
padding: 0.625rem 1rem;
@@ -879,8 +999,8 @@
.calibration-method-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(7.6rem, 9.2rem) auto;
align-items: end;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: start;
gap: 0.62rem;
padding: 0.64rem 0.66rem;
background: rgb(var(--hud-surface-rgb) / 0.56);
@@ -895,6 +1015,7 @@
}
.calibration-method-main {
grid-column: 1 / -1;
min-inline-size: 0;
}
@@ -915,6 +1036,7 @@
.calibration-param-group {
display: grid;
gap: 0.32rem;
min-inline-size: 0;
}
.split-panel {
@@ -945,9 +1067,9 @@
.split-panel-head.is-interactive {
left: 0.52rem;
right: 0.52rem;
display: flex;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: flex-start;
justify-content: space-between;
gap: 0.6rem;
pointer-events: auto;
}
@@ -955,7 +1077,8 @@
.split-panel-title {
display: grid;
gap: 0.1rem;
min-width: 0;
min-inline-size: 0;
max-inline-size: 100%;
}
.split-close-btn {
@@ -997,6 +1120,20 @@
text-transform: uppercase;
}
.split-calibration-panel .split-panel-head p {
font-size: 0.78rem;
line-height: 1.2;
letter-spacing: 0.08em;
text-transform: none;
}
.split-calibration-panel .split-panel-head span {
font-size: 0.7rem;
line-height: 1.4;
letter-spacing: 0.02em;
text-transform: none;
}
.split-panel-body {
position: absolute;
inset: 0;
@@ -1301,6 +1438,10 @@
.split-calibration-wrap {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.calibration-method-row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-height: 900px) {
@@ -1369,3 +1510,4 @@
}
}
</style>

182
src/routes/+page.svelte
View File

@@ -45,11 +45,25 @@
interface CalibrationStartPayload {
methodId: CalibrationMethodId;
rounds: number;
framesPerRound: number;
roundIntervalSeconds: number;
}
interface CalibrationInvokeResult {
success: boolean;
message: string;
progress?: CalibrationProgressPayload | null;
}
interface CalibrationProgressPayload {
state: "idle" | "collectingData" | "waitingForNextRound" | "completed";
currentRound: number;
maxRounds: number;
collectedFrames: number;
targetFrames: number;
roundIntervalMs: number;
isActive: boolean;
progressPercentage: number;
}
const copyByLocale: Record<LocaleCode, HudCopy> = {
@@ -57,18 +71,18 @@
appName: "JE-Skin",
suiteName: "v0.1.0",
stageTitle: "WebGL2 主渲染区",
stageHint: "底图与三维操作将在此区域加载",
stageHint: "底图与三维交互会在这里实时渲染",
configPanelTitle: "参数配置",
configPanelHint: "矩阵规模与颜色映射范围会实时作用到主舞台。",
matrixSizeLabel: "点阵数量",
configPanelHint: "矩阵尺寸和颜色映射范围会实时作用到主舞台。",
matrixSizeLabel: "矩阵密度",
matrixRowsLabel: "行数",
matrixColsLabel: "列数",
rangeLabel: "映射范围",
rangeMinLabel: "最小值",
rangeMaxLabel: "最大值",
colorMapLabel: "映射颜色",
colorMapLabel: "颜色映射",
resetConfigLabel: "恢复默认",
applyLiveHint: "实时生效 / 矩阵尺寸变更将重建 viewer",
applyLiveHint: "实时生效 / 尺寸变化会重建 viewer",
runtimeReady: "WEBGL2 READY",
runtimeFallback: "WEBGL2 N/A",
controlArea: "控制区",
@@ -76,7 +90,7 @@
connectionLabel: "连接状态",
deviceLabel: "设备",
sampleRateLabel: "采样率",
channelsLabel: "通道",
channelsLabel: "通道数",
configLinksLabel: "配置链接",
refreshPortsLabel: "刷新",
connectActionLabel: "连接",
@@ -94,7 +108,7 @@
fileExplorerEmptyHint: "当前目录下没有可用条目",
fileExplorerCsvHint: "仅显示 *.csv 文件",
fileExplorerLoadingLabel: "处理中...",
fileExplorerUpLabel: "↑ 上一级",
fileExplorerUpLabel: "返回上级",
fileExplorerNameColumnLabel: "名称",
fileExplorerSizeColumnLabel: "大小",
fileExplorerModifiedColumnLabel: "修改时间",
@@ -108,8 +122,7 @@
connectedLabel: "已连接",
connectingLabel: "连接中",
disconnectedLabel: "未连接"
},
"en-US": {
}, "en-US": {
appName: "JE-Skin",
suiteName: "v0.1.0",
stageTitle: "WebGL2 Main Surface",
@@ -150,7 +163,7 @@
fileExplorerEmptyHint: "No entries in this directory",
fileExplorerCsvHint: "Only *.csv files are listed",
fileExplorerLoadingLabel: "Processing...",
fileExplorerUpLabel: "↑ Up",
fileExplorerUpLabel: "Up",
fileExplorerNameColumnLabel: "Name",
fileExplorerSizeColumnLabel: "Size",
fileExplorerModifiedColumnLabel: "Modified",
@@ -171,7 +184,8 @@
const summaryPointsPerSeries = 42;
const signalRenderTickMs = 1200;
const replayDefaultFrameMs = 40;
const defaultCalibrationTargetFrames = 100;
const defaultCalibrationTargetFrames = 10;
const defaultCalibrationRoundIntervalSeconds = 300;
const showSignalPanels = false;
const mockToneCycle: SignalTone[] = ["cyan", "lime", "orange", "violet", "gold", "rose"];
@@ -219,6 +233,8 @@
let isConfigPanelOpen = false;
let isPrecisionTestOpen = false;
let isCalibrationTestOpen = false;
let calibrationProgress: CalibrationProgressPayload | null = null;
let isCalibrationRunning = false;
let hasSignalData = false;
let signalPanels: HudSignalPanel[] = buildInactivePanels();
let summary: HudSummary = buildEmptySummary();
@@ -512,7 +528,6 @@
: `${fileName} loaded (${frameCount} frames / ${channelCount} channels). Ready to replay.`;
connectionNoticeTone = "ok";
}
async function loadFileExplorerDirectory(path?: string): Promise<void> {
if (!isTauriRuntime()) {
return;
@@ -985,6 +1000,65 @@
});
}
async function startCalibrationStatusStream(
push: (progress: CalibrationProgressPayload) => void
): Promise<UnlistenFn> {
return listen<CalibrationProgressPayload>("calibration_status", (event) => {
push(event.payload);
});
}
function applyCalibrationProgress(progress: CalibrationProgressPayload | null): void {
const previousState = calibrationProgress?.state ?? null;
calibrationProgress = progress;
isCalibrationRunning = Boolean(progress?.isActive);
if (!progress || progress.state === previousState) {
return;
}
if (progress.state === "collectingData") {
connectionNotice =
locale === "zh-CN"
? `粗标定进行中：第 ${progress.currentRound}/${progress.maxRounds} 轮，目标 ${progress.targetFrames} 帧`
: `Coarse calibration running: round ${progress.currentRound}/${progress.maxRounds}, target ${progress.targetFrames} frames.`;
connectionNoticeTone = "info";
return;
}
if (progress.state === "waitingForNextRound") {
connectionNotice =
locale === "zh-CN"
? `第 ${progress.currentRound} 轮完成，${Math.round(progress.roundIntervalMs / 1000)} 秒后开始下一轮`
: `Round ${progress.currentRound} completed. Next round starts in ${Math.round(progress.roundIntervalMs / 1000)}s.`;
connectionNoticeTone = "info";
return;
}
if (progress.state === "completed") {
connectionNotice = locale === "zh-CN" ? "粗标定已完成。" : "Coarse calibration completed.";
connectionNoticeTone = "ok";
return;
}
if (progress.state === "idle") {
connectionNotice = locale === "zh-CN" ? "粗标定已结束。" : "Coarse calibration stopped.";
connectionNoticeTone = "info";
}
}
async function syncCalibrationStatus(): Promise<void> {
if (!isTauriRuntime()) {
return;
}
try {
const result = await invoke<CalibrationInvokeResult>("serial_calibrate_status");
applyCalibrationProgress(result.progress ?? null);
} catch (error) {
console.error("Calibration status sync failed:", error);
}
}
function buildConfigLinks(
currentLocale: LocaleCode,
activeId: string,
@@ -997,7 +1071,7 @@
? {
streamOn: "打开",
streamOff: "关闭",
calibrate: "校准",
calibrate: "标定",
precisionTest: "游戏",
settings: "参数"
}
@@ -1132,7 +1206,7 @@
case "OpenError":
return "串口连接失败，请确认端口存在且未被占用。";
case "AlreadyConnected":
return "当前已存在活动连接，请先断开。";
return "当前已有活动连接或标定任务，请先结束。";
case "InvalidConfig":
return "当前串口配置无效，请重新选择端口。";
default:
@@ -1140,12 +1214,7 @@
}
}
switch (errorCode) {
case "CloseError":
return "串口断开失败，请稍后重试。";
default:
return "串口断开失败，请稍后重试。";
}
return "串口断开失败，请稍后重试。";
}
if (action === "connect") {
@@ -1153,7 +1222,7 @@
case "OpenError":
return "Connection failed. Check whether the port exists or is already in use.";
case "AlreadyConnected":
return "A serial connection is already active. Disconnect it first.";
return "A serial connection or calibration session is already active. Stop it first.";
case "InvalidConfig":
return "The selected serial port is invalid. Choose another port.";
default:
@@ -1163,7 +1232,6 @@
return "Disconnect failed. Please try again.";
}
function resolveRefreshNotice(error: unknown): string {
const errorCode = normalizeInvokeError(error);
@@ -1177,7 +1245,6 @@
? "Refreshing serial ports failed. Check whether the OS serial service is available."
: "Refreshing serial ports failed. Please try again.";
}
function resolveExportNotice(error: unknown): string {
const errorCode = normalizeInvokeError(error);
@@ -1199,7 +1266,6 @@
? "CSV export failed. Verify that the output directory is writable."
: "CSV export failed. Please try again.";
}
function resolveImportNotice(error: unknown): string {
const errorCode = normalizeInvokeError(error);
@@ -1221,7 +1287,6 @@
? "CSV import failed. Please verify the data format."
: "CSV import failed. Please try again.";
}
async function refreshSerialPorts(): Promise<void> {
if (!isTauriRuntime()) {
return;
@@ -1332,7 +1397,6 @@
fileExplorerBusy = false;
}
}
async function precheckExportRecordData(): Promise<boolean> {
if (!isTauriRuntime()) {
return true;
@@ -1500,7 +1564,37 @@
}
async function handleCalibrationStart(event: CustomEvent<CalibrationStartPayload>): Promise<void> {
if (isCalibrationRunning) {
try {
const result = await invoke<CalibrationInvokeResult>("serial_calibrate_stop");
applyCalibrationProgress(result.progress ?? null);
if (!result.success) {
connectionNotice = result.message;
connectionNoticeTone = "warn";
}
} catch (error) {
const fallback =
locale === "zh-CN" ? "结束粗标定失败，请稍后重试。" : "Failed to stop coarse calibration.";
connectionNotice = normalizeInvokeError(error) || fallback;
connectionNoticeTone = "warn";
console.error("Calibration stop failed:", error);
}
return;
}
const targetRounds = clamp(Math.round(Number(event.detail.rounds) || 1), 1, 20);
const targetFrames = clamp(
Math.round(Number(event.detail.framesPerRound) || defaultCalibrationTargetFrames),
1,
10000
);
const roundIntervalSeconds = clamp(
Math.round(Number(event.detail.roundIntervalSeconds) || defaultCalibrationRoundIntervalSeconds),
0,
3600
);
const roundIntervalMs = roundIntervalSeconds * 1000;
if (!isTauriRuntime()) {
connectionNotice =
@@ -1528,15 +1622,17 @@
try {
const result = await invoke<CalibrationInvokeResult>("serial_calibrate_with_coarse", {
port: serialPortValue,
targetFrames: defaultCalibrationTargetFrames,
maxRounds: targetRounds
targetFrames,
maxRounds: targetRounds,
roundIntervalMs
});
if (result.success) {
applyCalibrationProgress(result.progress ?? null);
connectionNotice =
locale === "zh-CN"
? `粗标定已启动：目标 ${targetRounds} 轮（每轮 ${defaultCalibrationTargetFrames} 帧）`
: `Coarse calibration started: ${targetRounds} rounds (${defaultCalibrationTargetFrames} frames/round)`;
? `粗标定已启动：${targetRounds} 轮 / 每轮 ${targetFrames} 帧 / 间隔 ${roundIntervalSeconds} 秒`
: `Coarse calibration started: ${targetRounds} rounds / ${targetFrames} frames / ${roundIntervalSeconds}s interval.`;
connectionNoticeTone = "ok";
} else {
connectionNotice = result.message;
@@ -1550,7 +1646,6 @@
console.error("Calibration start failed:", error);
}
}
async function handleWindowControl(event: CustomEvent<WindowControlAction>): Promise<void> {
if (!isTauriRuntime()) {
return;
@@ -1573,6 +1668,7 @@
onMount(() => {
let disposed = false;
let unlistenHudStream: UnlistenFn | null = null;
let unlistenCalibrationStatus: UnlistenFn | null = null;
let stopMockFeed: (() => void) | null = null;
void ensureDefaultWindowSize();
@@ -1581,6 +1677,7 @@
if (isTauriRuntime()) {
void refreshSerialPorts();
void syncCalibrationStatus();
void startTauriHudStream(applyPacket)
.then((unlisten) => {
if (disposed) {
@@ -1593,6 +1690,18 @@
.catch((error) => {
console.error("Failed to listen for hud_stream:", error);
});
void startCalibrationStatusStream(applyCalibrationProgress)
.then((unlisten) => {
if (disposed) {
unlisten();
return;
}
unlistenCalibrationStatus = unlisten;
})
.catch((error) => {
console.error("Failed to listen for calibration_status:", error);
});
} else {
stopMockFeed = startMockFeed(applyPacket);
}
@@ -1602,6 +1711,7 @@
pauseReplayPlayback();
stopMockFeed?.();
unlistenHudStream?.();
unlistenCalibrationStatus?.();
};
});
</script>
@@ -1645,7 +1755,7 @@
{configLinks}
{isRefreshingPorts}
{isExporting}
isConnectDisabled={!serialPortValue || connectionState === "connecting"}
isConnectDisabled={!serialPortValue || connectionState === "connecting" || isCalibrationRunning}
isExportDisabled={isExporting || connectionState === "connecting"}
isWindowMaximized={isWindowMaximized}
on:windowcontrol={handleWindowControl}
@@ -1700,6 +1810,9 @@
showConfigPanel={isConfigPanelOpen}
showPrecisionTestPanel={isPrecisionTestOpen}
showCalibrationPanel={isCalibrationTestOpen}
isCalibrationRunning={isCalibrationRunning}
calibrationDefaultFramesPerRound={defaultCalibrationTargetFrames}
calibrationDefaultRoundIntervalSeconds={defaultCalibrationRoundIntervalSeconds}
{summary}
on:replaytoggle={handleReplayToggle}
on:replaystop={handleReplayStop}
@@ -1925,3 +2038,8 @@
}
}
</style>