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

update serial and spatial force components

Browse Source
This commit is contained in:
lenn
2026-06-02 16:24:15 +08:00
parent 78c4445b93
commit 79faa67dd8
5 changed files with 458 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
src/lib/components/SpatialForcePanel.svelte
View File

@@ -9,17 +9,7 @@
export let panelTitle = "";
export let badgeLabel = "";
export let badgeTone: "cyan" | "lime" | "orange" = "cyan";
export let showMetrics = true;
export let requireMagnitude = true;
export let compactMetaText = "";
function formatValue(value: number | null, digits = 1): string {
if (value === null || !Number.isFinite(value)) {
return "--";
}
return value.toFixed(digits);
}
function normalizeAngle(value: number): number {
return ((value % 360) + 360) % 360;
@@ -83,7 +73,7 @@
$: i18n =
locale === "zh-CN"
? {
title: "切向力方向",
title: "三维力",
waiting: "等待数据",
angle: "ANGLE",
heading: "方向角",
@@ -91,7 +81,7 @@
confidence: "置信度"
}
: {
title: "Tangential Direction",
title: "3D Force",
waiting: "Waiting",
angle: "ANGLE",
heading: "Heading",
@@ -100,8 +90,6 @@
};
$: resolvedTitle = panelTitle || i18n.title;
$: resolvedBadgeLabel = badgeLabel || i18n.angle;
$: resolvedCompactMetaText =
compactMetaText || (locale === "zh-CN" ? "仅使用角度流" : "Angle stream only");
$: hasData =
spatialForce !== null &&
@@ -109,35 +97,34 @@
(!requireMagnitude || Number.isFinite(spatialForce.magnitude));
$: angleDeg = hasData ? normalizeAngle(spatialForce?.angleDeg ?? 0) : 0;
$: updateVisualAngle(angleDeg, hasData);
$: magnitude = hasData ? spatialForce?.magnitude ?? 0 : null;
$: confidence = hasData ? (spatialForce?.confidence ?? 0) * 100 : null;
</script>
<article
class="signal-panel spatial-panel side-{side}"
class:is-empty={!hasData}
aria-hidden={false}
style="--panel-index: {panelIndex};"
>
<header class="panel-head">
<div class="head-text">
<p class="panel-code">{panelCode}</p>
<p class="panel-title">{resolvedTitle}</p>
</div>
{#if hasData}
<article
class="signal-panel spatial-panel side-{side}"
aria-label={resolvedTitle}
style="--panel-index: {panelIndex};"
>
<header class="panel-head">
<div class="head-text">
<p class="panel-code">{panelCode}</p>
<p class="panel-title">{resolvedTitle}</p>
</div>
<div class="icon-layer" aria-hidden="true">
<span class={`icon-chip tone-${badgeTone}`}>{resolvedBadgeLabel}</span>
</div>
</header>
{#if resolvedBadgeLabel}
<div class="icon-layer" aria-hidden="true">
<span class={`icon-chip tone-${badgeTone}`}>{resolvedBadgeLabel}</span>
</div>
{/if}
</header>
<div class="panel-body">
<div class="compass-stage">
<div class="compass-core">
<div class="compass-ring compass-ring-outer"></div>
<div class="compass-ring compass-ring-inner"></div>
<div class="compass-axis axis-horizontal"></div>
<div class="compass-axis axis-vertical"></div>
{#if hasData}
<div class="panel-body">
<div class="compass-stage">
<div class="compass-core">
<div class="compass-ring compass-ring-outer"></div>
<div class="compass-ring compass-ring-inner"></div>
<div class="compass-axis axis-horizontal"></div>
<div class="compass-axis axis-vertical"></div>
<div
class="compass-vector"
class:is-snap={snapVector}
@@ -146,44 +133,29 @@
<span class="vector-shaft"></span>
<span class="vector-head"></span>
</div>
{/if}
<div class="compass-center"></div>
<span class="compass-label label-top">90</span>
<span class="compass-label label-right">0</span>
<span class="compass-label label-bottom">270</span>
<span class="compass-label label-left">180</span>
</div>
{#if !hasData}
<div class="empty-state">
<span>{i18n.waiting}</span>
<div class="compass-center"></div>
<span class="compass-label label-top">90</span>
<span class="compass-label label-right">0</span>
<span class="compass-label label-bottom">270</span>
<span class="compass-label label-left">180</span>
</div>
{/if}
</div>
</div>
<div class="angle-stage">
<p class="angle-label">{i18n.heading}</p>
{#if showMetrics}
<p class="angle-meta">{i18n.strength}: {formatValue(magnitude, 2)}</p>
<p class="angle-meta">{i18n.confidence}: {hasData ? `${formatValue(confidence, 0)}%` : "--"}</p>
{:else}
<p class="angle-meta">{resolvedCompactMetaText}</p>
<p class="angle-meta">{hasData ? (locale === "zh-CN" ? "实时对比中" : "Live comparison") : "--"}</p>
{/if}
</div>
</div>
</article>
</article>
{/if}
<style>
.signal-panel {
--offset-x: 12%;
--enter-ms: 1800ms;
--fade-ms: 1000ms;
overflow: hidden;
inline-size: min(100%, clamp(34rem, 44vw, 44rem));
inline-size: var(--rail-width, min(100%, clamp(34rem, 44vw, 44rem)));
max-inline-size: 100%;
box-sizing: border-box;
flex: 0 0 var(--rail-width, auto);
justify-self: start;
display: grid;
grid-template-rows: auto 1fr;
grid-template-rows: auto 1fr auto;
gap: 0.68rem;
padding: 0.88rem 0.96rem 1rem;
border: 1px solid rgb(var(--hud-border-strong-rgb) / 0.42);
@@ -218,6 +190,16 @@
opacity: 0.82;
}
.spatial-panel::after {
content: "";
display: block;
block-size: 1rem;
}
.spatial-panel {
margin-block-end: clamp(0.8rem, 1.8vh, 1.4rem);
}
.panel-head {
display: flex;
justify-content: space-between;
@@ -277,10 +259,10 @@
.panel-body {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(10rem, 0.9fr);
grid-template-columns: minmax(0, 1fr);
gap: 0.72rem;
block-size: clamp(12rem, 15.5vw, 15rem);
min-block-size: clamp(12rem, 15.5vw, 15rem);
min-block-size: 5rem;
}
.compass-stage {
@@ -433,76 +415,49 @@
background: linear-gradient(180deg, rgb(var(--hud-surface-deep-rgb) / 0.06), rgb(var(--hud-surface-deep-rgb) / 0.18));
}
.angle-stage {
border: 1px solid rgb(var(--hud-border-rgb) / 0.26);
border-radius: 0.62rem;
padding: 0.9rem 0.85rem;
block-size: 100%;
min-block-size: 0;
overflow: hidden;
background:
linear-gradient(180deg, rgb(var(--hud-surface-rgb) / 0.72), rgb(var(--hud-surface-deep-rgb) / 0.84)),
radial-gradient(circle at 50% 0, rgb(var(--hud-glow-rgb) / 0.05), transparent 58%);
display: grid;
grid-template-rows: auto auto auto;
align-content: center;
justify-items: start;
gap: 0.36rem;
}
.angle-label {
margin: 0;
color: rgb(var(--hud-text-dim-rgb) / 0.82);
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.angle-meta {
margin: 0;
inline-size: 10rem;
min-block-size: 1rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: rgb(var(--hud-text-dim-rgb) / 0.84);
font-size: 0.68rem;
font-variant-numeric: tabular-nums;
letter-spacing: 0.05em;
}
@media (max-width: 1180px) {
.signal-panel {
inline-size: min(100%, clamp(28rem, 40vw, 38rem));
inline-size: var(--rail-width, min(100%, clamp(28rem, 40vw, 38rem)));
}
.panel-body {
block-size: clamp(10rem, 13vw, 12rem);
}
}
@media (max-height: 900px) {
.signal-panel {
inline-size: min(100%, clamp(28rem, 38vw, 36rem));
inline-size: var(--rail-width, min(100%, clamp(28rem, 38vw, 36rem)));
padding: 0.7rem 0.76rem 0.8rem;
}
.panel-body {
block-size: clamp(9.8rem, 12vw, 11.8rem);
}
}
@media (max-height: 760px) {
.signal-panel {
inline-size: min(100%, clamp(24rem, 34vw, 30rem));
inline-size: var(--rail-width, min(100%, clamp(24rem, 34vw, 30rem)));
padding: 0.62rem 0.68rem 0.72rem;
gap: 0.48rem;
}
.panel-body {
block-size: clamp(9rem, 10vw, 10.8rem);
min-block-size: clamp(9rem, 10vw, 10.8rem);
block-size: clamp(8rem, 9.5vw, 9.8rem);
}
}
@media (max-height: 680px) {
.signal-panel {
inline-size: min(100%, clamp(20rem, 28vw, 26rem));
inline-size: var(--rail-width, min(100%, clamp(20rem, 28vw, 26rem)));
padding: 0.52rem 0.58rem 0.6rem;
gap: 0.36rem;
}
.panel-body {
block-size: clamp(6.5rem, 8vw, 7.5rem);
}
}
@media (max-width: 900px) {