764 lines
25 KiB
TypeScript
764 lines
25 KiB
TypeScript
import React, { useState, useEffect, useMemo } from 'react';
|
|
import {
|
|
View, Text, StyleSheet, TouchableOpacity, ScrollView,
|
|
Modal, ActivityIndicator, useWindowDimensions, Platform,
|
|
useColorScheme,
|
|
} from 'react-native';
|
|
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
|
import { useConnectionStore } from '../../src/stores/connectionStore';
|
|
import { useDeviceStore } from '../../src/stores/deviceStore';
|
|
import { useDataStore } from '../../src/stores/dataStore';
|
|
import { useDevice } from '../../src/hooks/useDevice';
|
|
import { useWaveform, type WaveformData } from '../../src/hooks/useWaveform';
|
|
import { WaveformChart } from '../../src/components/WaveformChart';
|
|
import { ParamForm } from '../../src/components/ParamForm';
|
|
import { NoProjectGate } from '../../src/components/NoProjectGate';
|
|
import { CHANNEL_COLORS } from '../../src/protocol/constants';
|
|
import { formatUV, formatUtc, formatCoord, sourceModeLabel, formatBattery, formatTemperature } from '../../src/utils/format';
|
|
import { useTheme } from '../../src/design/tokens';
|
|
import { Spacing, Radius } from '../../src/design/tokens';
|
|
import * as ScreenOrientation from 'expo-screen-orientation';
|
|
import type { MeasurementFrame } from '../../src/protocol/types';
|
|
|
|
// ── Param sheet ───────────────────────────────────────────────────────────────
|
|
|
|
function ParamSheet({
|
|
visible,
|
|
onClose,
|
|
onSetup,
|
|
busy,
|
|
configDirty,
|
|
}: {
|
|
visible: boolean;
|
|
onClose: () => void;
|
|
onSetup: () => Promise<void>;
|
|
busy: boolean;
|
|
configDirty: boolean;
|
|
}) {
|
|
const theme = useTheme();
|
|
const { deviceStatus } = useDeviceStore();
|
|
const measuring = deviceStatus !== 'idle';
|
|
|
|
return (
|
|
<Modal
|
|
visible={visible}
|
|
transparent
|
|
animationType="slide"
|
|
onRequestClose={onClose}
|
|
statusBarTranslucent
|
|
>
|
|
<TouchableOpacity style={PS.backdrop} activeOpacity={1} onPress={onClose} />
|
|
<View style={[PS.sheet, {
|
|
backgroundColor: theme.bg.surface,
|
|
borderColor: theme.bg.border,
|
|
}]}>
|
|
<View style={[PS.handle, { backgroundColor: theme.bg.border }]} />
|
|
|
|
<View style={PS.header}>
|
|
<Text style={[PS.title, { color: theme.text.secondary }]}>采集参数</Text>
|
|
{configDirty && (
|
|
<View style={[PS.dirtyBadge, {
|
|
backgroundColor: theme.amber.bg,
|
|
borderColor: theme.amber.border,
|
|
}]}>
|
|
<Text style={[PS.dirtyTxt, { color: theme.amber.fg }]}>待下发</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
<ScrollView style={PS.scroll} keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}>
|
|
<ParamForm />
|
|
<View style={{ height: Spacing.md }} />
|
|
</ScrollView>
|
|
|
|
<TouchableOpacity
|
|
style={[
|
|
PS.setupBtn,
|
|
{
|
|
backgroundColor: theme.bg.raised,
|
|
borderColor: theme.bg.border,
|
|
},
|
|
configDirty && {
|
|
backgroundColor: theme.blue.bg,
|
|
borderColor: theme.blue.fg,
|
|
},
|
|
(busy || measuring) && PS.setupBtnDis,
|
|
]}
|
|
onPress={onSetup}
|
|
disabled={busy || measuring}
|
|
activeOpacity={0.8}
|
|
>
|
|
{busy
|
|
? <ActivityIndicator color={theme.blue.fg} />
|
|
: <Text style={[
|
|
PS.setupBtnTxt,
|
|
{ color: theme.text.muted },
|
|
configDirty && { color: theme.blue.fg },
|
|
]}>
|
|
{measuring ? '采集中，不可下发' : '下 发 配 置'}
|
|
</Text>}
|
|
</TouchableOpacity>
|
|
</View>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
const PS = StyleSheet.create({
|
|
backdrop: { ...StyleSheet.absoluteFill, backgroundColor: 'rgba(0,0,0,0.6)' },
|
|
sheet: {
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
maxHeight: '85%',
|
|
borderTopLeftRadius: Radius.xl,
|
|
borderTopRightRadius: Radius.xl,
|
|
borderTopWidth: 1,
|
|
paddingBottom: Spacing.xxl,
|
|
},
|
|
handle: {
|
|
width: 36, height: 4, borderRadius: 2,
|
|
alignSelf: 'center',
|
|
marginTop: Spacing.sm, marginBottom: Spacing.sm,
|
|
},
|
|
header: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: Spacing.lg, paddingBottom: Spacing.sm, gap: Spacing.sm },
|
|
title: { fontSize: 14, fontWeight: '700', flex: 1 },
|
|
dirtyBadge: { borderRadius: Radius.sm, paddingHorizontal: 7, paddingVertical: 2, borderWidth: 1 },
|
|
dirtyTxt: { fontSize: 9, fontWeight: '700' },
|
|
scroll: { flex: 1 },
|
|
setupBtn: {
|
|
margin: Spacing.lg,
|
|
borderRadius: Radius.lg,
|
|
paddingVertical: 14,
|
|
alignItems: 'center',
|
|
borderWidth: 1,
|
|
},
|
|
setupBtnDis: { opacity: 0.4 },
|
|
setupBtnTxt: { fontWeight: '700', fontSize: 14, letterSpacing: 3 },
|
|
});
|
|
|
|
// ── Control row ───────────────────────────────────────────────────────────────
|
|
|
|
function ControlRow({
|
|
deviceStatus,
|
|
busy,
|
|
frameId,
|
|
onContinuous,
|
|
onSingle,
|
|
onStop,
|
|
onSettings,
|
|
configDirty,
|
|
}: {
|
|
deviceStatus: 'idle' | 'running' | 'single';
|
|
busy: boolean;
|
|
frameId: number | undefined;
|
|
onContinuous: () => void;
|
|
onSingle: () => void;
|
|
onStop: () => void;
|
|
onSettings: () => void;
|
|
configDirty: boolean;
|
|
}) {
|
|
const theme = useTheme();
|
|
const idle = deviceStatus === 'idle';
|
|
const running = deviceStatus === 'running';
|
|
const single = deviceStatus === 'single';
|
|
|
|
return (
|
|
<View style={[CR.row, {
|
|
borderTopColor: theme.bg.border,
|
|
backgroundColor: theme.bg.surface,
|
|
}]}>
|
|
{/* Primary action */}
|
|
{idle && (
|
|
<TouchableOpacity
|
|
style={[CR.primary, {
|
|
backgroundColor: theme.green.bg,
|
|
borderColor: theme.green.border,
|
|
}, !busy ? null : CR.dis]}
|
|
onPress={onContinuous}
|
|
disabled={busy}
|
|
activeOpacity={0.85}
|
|
>
|
|
{busy
|
|
? <ActivityIndicator color={theme.green.fg} />
|
|
: <>
|
|
<Text style={[CR.primaryIcon, { color: theme.text.ghost }]}>▶</Text>
|
|
<Text style={[CR.primaryTxt, { color: theme.green.fg }]}>连 续 采 集</Text>
|
|
</>}
|
|
</TouchableOpacity>
|
|
)}
|
|
{running && (
|
|
<TouchableOpacity
|
|
style={[CR.primary, {
|
|
backgroundColor: theme.red.bg,
|
|
borderColor: theme.red.border,
|
|
}]}
|
|
onPress={onStop}
|
|
activeOpacity={0.85}
|
|
>
|
|
<Text style={[CR.primaryIcon, { color: theme.text.ghost }]}>■</Text>
|
|
<Text style={[CR.primaryTxt, { color: theme.red.fg }]}>停 止</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
{single && (
|
|
<View style={[CR.primary, {
|
|
backgroundColor: theme.teal.bg,
|
|
borderColor: theme.teal.border,
|
|
}, CR.dis]}>
|
|
<ActivityIndicator color={theme.teal.fg} size="small" />
|
|
<Text style={[CR.primaryTxt, { color: theme.teal.fg }]}>单次采集中…</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* Secondary: single-shot button (idle only) */}
|
|
{idle && (
|
|
<TouchableOpacity
|
|
style={[CR.secondary, {
|
|
backgroundColor: theme.teal.bg,
|
|
borderColor: theme.teal.border,
|
|
}, !busy ? null : CR.dis]}
|
|
onPress={onSingle}
|
|
disabled={busy}
|
|
activeOpacity={0.85}
|
|
>
|
|
<Text style={[CR.secondaryIcon, { color: theme.text.ghost }]}>◎</Text>
|
|
<Text style={[CR.secondaryTxt, { color: theme.teal.fg }]}>单次</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
|
|
{/* Running indicator (running only) */}
|
|
{running && frameId !== undefined && (
|
|
<View style={[CR.indicator, {
|
|
backgroundColor: theme.green.bg,
|
|
borderColor: theme.green.border,
|
|
}]}>
|
|
<View style={[CR.runDot, { backgroundColor: theme.green.fg }]} />
|
|
<Text style={[CR.indicatorTxt, { color: theme.green.fg }]}>#{frameId}</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* Settings button — always present */}
|
|
<TouchableOpacity
|
|
style={[CR.settingsBtn, {
|
|
backgroundColor: theme.bg.raised,
|
|
borderColor: theme.bg.border,
|
|
}]}
|
|
onPress={onSettings}
|
|
activeOpacity={0.8}
|
|
>
|
|
<Text style={[CR.settingsTxt, { color: theme.text.muted }, configDirty && { color: theme.amber.fg }]}>⚙</Text>
|
|
{configDirty && (
|
|
<View style={[CR.dirtyDot, {
|
|
backgroundColor: theme.amber.fg,
|
|
borderColor: theme.bg.surface,
|
|
}]} />
|
|
)}
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const CR = StyleSheet.create({
|
|
row: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: Spacing.md,
|
|
paddingVertical: Spacing.sm,
|
|
gap: Spacing.sm,
|
|
borderTopWidth: 1,
|
|
},
|
|
primary: {
|
|
flex: 2,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 8,
|
|
paddingVertical: 14,
|
|
borderRadius: Radius.lg,
|
|
borderWidth: 1,
|
|
},
|
|
dis: { opacity: 0.35 },
|
|
primaryIcon: { fontSize: 11 },
|
|
primaryTxt: { fontSize: 13, fontWeight: '700', letterSpacing: 1.5 },
|
|
|
|
secondary: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 5,
|
|
paddingVertical: 14,
|
|
borderRadius: Radius.lg,
|
|
borderWidth: 1,
|
|
},
|
|
secondaryIcon:{ fontSize: 11 },
|
|
secondaryTxt: { fontSize: 12, fontWeight: '700' },
|
|
|
|
indicator: {
|
|
flex: 1,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
gap: 6,
|
|
paddingVertical: 14,
|
|
borderRadius: Radius.lg,
|
|
borderWidth: 1,
|
|
},
|
|
runDot: { width: 6, height: 6, borderRadius: 3 },
|
|
indicatorTxt: { fontSize: 12, fontWeight: '700', fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace' },
|
|
|
|
settingsBtn: {
|
|
width: 44, height: 44,
|
|
borderRadius: Radius.md,
|
|
borderWidth: 1,
|
|
alignItems: 'center', justifyContent: 'center',
|
|
},
|
|
settingsTxt: { fontSize: 18 },
|
|
dirtyDot: {
|
|
position: 'absolute', top: 6, right: 6,
|
|
width: 7, height: 7, borderRadius: 4,
|
|
borderWidth: 1,
|
|
},
|
|
});
|
|
|
|
// ── Status panel ─────────────────────────────────────────────────────────────
|
|
|
|
const CURRENT_RATIO = 50;
|
|
const INT32_MAX = 0x7fffffff;
|
|
|
|
function formatCurrent(raw: number): string {
|
|
const amps = (raw / INT32_MAX) * 5.0 * CURRENT_RATIO;
|
|
return `${amps.toFixed(1)} A`;
|
|
}
|
|
|
|
function StatusPanel({ frame }: { frame: MeasurementFrame }) {
|
|
const theme = useTheme();
|
|
const m = frame.meta;
|
|
const mono = { fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace' } as const;
|
|
|
|
const row1 = [
|
|
{ label: '源模式', value: sourceModeLabel(m.sourceMode) },
|
|
{ label: '发射电流', value: formatCurrent(m.current) },
|
|
{ label: '电池', value: formatBattery(m.batteryVolt) },
|
|
{ label: '温度', value: formatTemperature(m.temperature) },
|
|
];
|
|
const row2 = [
|
|
{ label: 'Roll', value: `${m.roll.toFixed(1)}°` },
|
|
{ label: 'Pitch', value: `${m.pitch.toFixed(1)}°` },
|
|
{ label: 'Yaw', value: `${m.yaw.toFixed(1)}°` },
|
|
{ label: 'GPS', value: ['未定位','非差分','差分','无效PPS','固定解','浮点解','估算中'][m.gpsStatus] ?? '未知', highlight: m.gpsStatus > 0 },
|
|
{ label: 'SD', value: ['正常','未插卡','异常'][m.sdStatus] ?? '未知', highlight: m.sdStatus === 0 },
|
|
];
|
|
|
|
const renderCell = (it: { label: string; value: string; highlight?: boolean }) => (
|
|
<View key={it.label} style={[SP.cell, { borderColor: theme.bg.border, backgroundColor: theme.bg.surface }]}>
|
|
<Text style={[SP.label, { color: theme.text.muted }]}>{it.label}</Text>
|
|
<Text style={[SP.value, mono, { color: it.highlight ? theme.green.fg : theme.text.secondary }]}>{it.value}</Text>
|
|
</View>
|
|
);
|
|
|
|
return (
|
|
<View style={[SP.container, { borderTopColor: theme.bg.divider, backgroundColor: theme.bg.void }]}>
|
|
<View style={SP.row}>{row1.map(renderCell)}</View>
|
|
<View style={SP.row}>{row2.map(renderCell)}</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const SP = StyleSheet.create({
|
|
container: { paddingHorizontal: Spacing.md, paddingVertical: 4, gap: 4, borderTopWidth: StyleSheet.hairlineWidth },
|
|
row: { flexDirection: 'row', gap: 4 },
|
|
cell: { flex: 1, alignItems: 'center', paddingVertical: 3, borderRadius: Radius.sm, borderWidth: 1 },
|
|
label: { fontSize: 8, fontWeight: '600' },
|
|
value: { fontSize: 10, fontWeight: '700', marginTop: 1 },
|
|
});
|
|
|
|
// ── Frame summary bar ─────────────────────────────────────────────────────────
|
|
|
|
function FrameSummaryBar({ frame }: { frame: MeasurementFrame }) {
|
|
const theme = useTheme();
|
|
return (
|
|
<View style={[FS.bar, {
|
|
backgroundColor: theme.bg.void,
|
|
borderTopColor: theme.bg.divider,
|
|
}]}>
|
|
<Text style={[FS.txt, { color: theme.text.ghost }]}>
|
|
#{frame.frameId}
|
|
{' '}{frame.meta ? formatUtc(frame.meta.utc) : ''}
|
|
{frame.meta?.latitude ? ` ${formatCoord(frame.meta.latitude, false)} ${formatCoord(frame.meta.longitude, true)}` : ''}
|
|
{frame.meta ? ` R${frame.meta.roll.toFixed(1)} P${frame.meta.pitch.toFixed(1)} Y${frame.meta.yaw.toFixed(1)}` : ''}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const FS = StyleSheet.create({
|
|
bar: { paddingHorizontal: Spacing.md, paddingVertical: 5, borderTopWidth: StyleSheet.hairlineWidth },
|
|
txt: { fontSize: 9, fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace' },
|
|
});
|
|
|
|
// ── Not connected placeholder ─────────────────────────────────────────────────
|
|
|
|
function NotConnected({ onConnect }: { onConnect: () => void }) {
|
|
const theme = useTheme();
|
|
return (
|
|
<View style={NC.root}>
|
|
<Text style={[NC.icon, { color: theme.bg.border }]}>◈</Text>
|
|
<Text style={[NC.title, { color: theme.text.muted }]}>未连接仪器</Text>
|
|
<Text style={[NC.sub, { color: theme.text.ghost }]}>请先连接 TEM 接收机</Text>
|
|
<TouchableOpacity
|
|
style={[NC.btn, {
|
|
backgroundColor: theme.blue.bg,
|
|
borderColor: theme.blue.fg,
|
|
}]}
|
|
onPress={onConnect}
|
|
activeOpacity={0.8}
|
|
>
|
|
<Text style={[NC.btnTxt, { color: theme.blue.fg }]}>连 接 设 备</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const NC = StyleSheet.create({
|
|
root: { flex: 1, justifyContent: 'center', alignItems: 'center', gap: 12 },
|
|
icon: { fontSize: 48 },
|
|
title: { fontSize: 17, fontWeight: '700' },
|
|
sub: { fontSize: 12 },
|
|
btn: {
|
|
marginTop: Spacing.sm,
|
|
borderRadius: Radius.lg,
|
|
paddingVertical: 13,
|
|
paddingHorizontal: 32,
|
|
borderWidth: 1,
|
|
},
|
|
btnTxt: { fontSize: 14, fontWeight: '700', letterSpacing: 2 },
|
|
});
|
|
|
|
// ── Main screen ───────────────────────────────────────────────────────────────
|
|
|
|
export default function WaveScreen() {
|
|
const theme = useTheme();
|
|
const { width: sw, height: sh } = useWindowDimensions();
|
|
const { status, showModal } = useConnectionStore();
|
|
const { config, configDirty } = useDeviceStore();
|
|
const { deviceStatus } = useDeviceStore();
|
|
const { busy, setup, startContinuous, startSingle, stop } = useDevice();
|
|
|
|
const frame = useDataStore((s) => s.currentFrame);
|
|
const sessionId = useDataStore((s) => s.sessionId);
|
|
const projectId = useDataStore((s) => s.projectId);
|
|
const hasProject = useDataStore((s) => s.hasProject);
|
|
|
|
const [visible, setVisible] = useState(() => Array(6).fill(true));
|
|
const [logScale, setLogScale] = useState(false);
|
|
const [sheetVisible, setSheetVisible] = useState(false);
|
|
const [fullscreen, setFullscreen] = useState(false);
|
|
const [projectName, setProjectName] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
if (fullscreen) {
|
|
ScreenOrientation.unlockAsync();
|
|
} else {
|
|
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
|
|
}
|
|
return () => {
|
|
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP);
|
|
};
|
|
}, [fullscreen]);
|
|
|
|
const connected = status === 'connected';
|
|
const channelNum = config.channelNum;
|
|
const CHART_H = Math.round(Math.min(280, sh * 0.36));
|
|
|
|
const data = useWaveform(visible);
|
|
|
|
useEffect(() => {
|
|
if (!projectId) { setProjectName(null); return; }
|
|
import('../../src/services/StorageService').then(({ listProjects }) =>
|
|
listProjects().then((ps) => setProjectName(ps.find((p) => p.projectId === projectId)?.name ?? null)),
|
|
).catch(() => setProjectName(null));
|
|
}, [projectId]);
|
|
|
|
const toggleChannel = (idx: number) =>
|
|
setVisible((prev) => prev.map((v, i) => (i === idx ? !v : v)));
|
|
|
|
const handleSetup = async () => {
|
|
await setup();
|
|
setSheetVisible(false);
|
|
};
|
|
|
|
if (!connected) {
|
|
return (
|
|
<View style={[S.root, { backgroundColor: theme.bg.base }]}>
|
|
<NotConnected onConnect={showModal} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (!hasProject) {
|
|
return (
|
|
<View style={[S.root, { backgroundColor: theme.bg.base }]}>
|
|
<NoProjectGate />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<View style={[S.root, { backgroundColor: theme.bg.base }]}>
|
|
|
|
{/* ── Context bar: project · session ── */}
|
|
<View style={[S.ctxBar, {
|
|
backgroundColor: theme.bg.void,
|
|
borderBottomColor: theme.bg.divider,
|
|
}]}>
|
|
{projectName
|
|
? <Text style={[S.ctxTxt, { color: theme.text.ghost }]} numberOfLines={1}>{projectName} · {sessionId}</Text>
|
|
: <Text style={[S.ctxTxt, { color: theme.text.ghost }]} numberOfLines={1}>{sessionId}</Text>}
|
|
</View>
|
|
|
|
{/* ── Channel selector + LOG/LIN ── */}
|
|
<View style={[S.toolbar, { borderBottomColor: theme.bg.divider }]}>
|
|
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={S.chRow}>
|
|
{Array.from({ length: channelNum }, (_, i) => (
|
|
<TouchableOpacity
|
|
key={i}
|
|
style={[
|
|
S.chBtn,
|
|
{ borderColor: theme.bg.border },
|
|
visible[i] && { borderColor: CHANNEL_COLORS[i] + '99', backgroundColor: CHANNEL_COLORS[i] + '1a' },
|
|
]}
|
|
onPress={() => toggleChannel(i)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<View style={[S.chDot, { backgroundColor: visible[i] ? CHANNEL_COLORS[i] : theme.bg.border }]} />
|
|
<Text style={[S.chTxt, { color: theme.text.ghost }, visible[i] && { color: CHANNEL_COLORS[i] }]}>CH{i + 1}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</ScrollView>
|
|
<TouchableOpacity
|
|
style={[S.logBtn, {
|
|
borderColor: theme.bg.border,
|
|
backgroundColor: theme.bg.raised,
|
|
}, !logScale && {
|
|
borderColor: theme.blue.border,
|
|
backgroundColor: theme.blue.bg,
|
|
}]}
|
|
onPress={() => setLogScale((v) => !v)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={[S.logTxt, { color: theme.text.muted }, !logScale && { color: theme.blue.fg }]}>
|
|
{logScale ? 'LOG' : 'LIN'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={[S.fullBtn, {
|
|
borderColor: theme.bg.border,
|
|
backgroundColor: theme.bg.raised,
|
|
}]}
|
|
onPress={() => setFullscreen(true)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={[S.fullTxt, { color: theme.text.muted }]}>⛶</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
{/* ── Waveform chart ── */}
|
|
<View style={[S.chartWrap, { borderBottomColor: theme.bg.divider }]}>
|
|
{data ? (
|
|
<WaveformChart
|
|
data={data}
|
|
visibleChannels={visible}
|
|
width={sw}
|
|
height={CHART_H}
|
|
logScale={logScale}
|
|
interactive={false}
|
|
/>
|
|
) : (
|
|
<View style={[S.chartPlaceholder, { height: CHART_H, backgroundColor: theme.bg.surface }]}>
|
|
<Text style={[S.placeholderTxt, { color: theme.text.ghost }]}>等待采样数据…</Text>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
{/* ── Peak values ── */}
|
|
|
|
{/* ── Frame summary ── */}
|
|
{frame && <StatusPanel frame={frame} />}
|
|
{frame && <FrameSummaryBar frame={frame} />}
|
|
|
|
{/* ── Control row ── */}
|
|
<ControlRow
|
|
deviceStatus={deviceStatus}
|
|
busy={busy}
|
|
frameId={frame?.frameId}
|
|
onContinuous={startContinuous}
|
|
onSingle={startSingle}
|
|
onStop={stop}
|
|
onSettings={() => setSheetVisible(true)}
|
|
configDirty={configDirty}
|
|
/>
|
|
|
|
{/* ── Param sheet ── */}
|
|
<ParamSheet
|
|
visible={sheetVisible}
|
|
onClose={() => setSheetVisible(false)}
|
|
onSetup={handleSetup}
|
|
busy={busy}
|
|
configDirty={configDirty}
|
|
/>
|
|
|
|
{/* ── Fullscreen waveform ── */}
|
|
<Modal
|
|
visible={fullscreen}
|
|
animationType="fade"
|
|
supportedOrientations={['portrait', 'landscape', 'landscape-left', 'landscape-right']}
|
|
statusBarTranslucent
|
|
onRequestClose={() => setFullscreen(false)}
|
|
>
|
|
<FullscreenContent
|
|
data={data}
|
|
visibleChannels={visible}
|
|
logScale={logScale}
|
|
onToggleLog={() => setLogScale((v) => !v)}
|
|
onClose={() => setFullscreen(false)}
|
|
/>
|
|
</Modal>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
function FullscreenContent({
|
|
data, visibleChannels, logScale, onToggleLog, onClose,
|
|
}: {
|
|
data: WaveformData | null;
|
|
visibleChannels: boolean[];
|
|
logScale: boolean;
|
|
onToggleLog: () => void;
|
|
onClose: () => void;
|
|
}) {
|
|
const theme = useTheme();
|
|
const scheme = useColorScheme();
|
|
const isDark = scheme !== 'light';
|
|
const { width: fsW, height: fsH } = useWindowDimensions();
|
|
return (
|
|
<GestureHandlerRootView style={[S.fsRoot, { backgroundColor: theme.chart.bg }]}>
|
|
{data ? (
|
|
<WaveformChart
|
|
data={data}
|
|
visibleChannels={visibleChannels}
|
|
width={fsW}
|
|
height={fsH}
|
|
logScale={logScale}
|
|
interactive
|
|
/>
|
|
) : (
|
|
<View style={[S.chartPlaceholder, { flex: 1, backgroundColor: theme.bg.surface }]}>
|
|
<Text style={[S.placeholderTxt, { color: theme.text.ghost }]}>等待采样数据…</Text>
|
|
</View>
|
|
)}
|
|
|
|
{/* Floating toolbar */}
|
|
<View style={S.fsToolbar}>
|
|
<TouchableOpacity
|
|
style={[S.logBtn, {
|
|
borderColor: theme.bg.border,
|
|
backgroundColor: theme.bg.raised,
|
|
}, !logScale && {
|
|
borderColor: theme.blue.border,
|
|
backgroundColor: theme.blue.bg,
|
|
}]}
|
|
onPress={onToggleLog}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={[S.logTxt, { color: theme.text.muted }, !logScale && { color: theme.blue.fg }]}>
|
|
{logScale ? 'LOG' : 'LIN'}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={[S.fsCloseBtn, {
|
|
backgroundColor: isDark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.15)',
|
|
}]}
|
|
onPress={onClose}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={[S.fsCloseTxt, { color: isDark ? '#ffffff' : '#000000' }]}>✕</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</GestureHandlerRootView>
|
|
);
|
|
}
|
|
|
|
const S = StyleSheet.create({
|
|
root: { flex: 1 },
|
|
|
|
ctxBar: {
|
|
paddingHorizontal: Spacing.md,
|
|
paddingVertical: 4,
|
|
borderBottomWidth: 1,
|
|
},
|
|
ctxTxt: {
|
|
fontSize: 9,
|
|
fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
|
|
},
|
|
|
|
toolbar: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingRight: Spacing.sm,
|
|
borderBottomWidth: 1,
|
|
},
|
|
chRow: { flexDirection: 'row', paddingHorizontal: Spacing.sm, paddingVertical: 6, gap: 5 },
|
|
chBtn: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 4,
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 5,
|
|
borderRadius: Radius.md,
|
|
borderWidth: 1,
|
|
},
|
|
chDot: { width: 6, height: 6, borderRadius: 3 },
|
|
chTxt: { fontSize: 10, fontWeight: '600' },
|
|
logBtn: {
|
|
paddingHorizontal: 9,
|
|
paddingVertical: 5,
|
|
borderRadius: Radius.sm,
|
|
borderWidth: 1,
|
|
marginLeft: 4,
|
|
},
|
|
logTxt: { fontSize: 10, fontWeight: '700', letterSpacing: 0.5 },
|
|
fullBtn: {
|
|
paddingHorizontal: 8,
|
|
paddingVertical: 5,
|
|
borderRadius: Radius.sm,
|
|
borderWidth: 1,
|
|
marginLeft: 4,
|
|
},
|
|
fullTxt: { fontSize: 12 },
|
|
|
|
fsRoot: { flex: 1 },
|
|
fsToolbar: {
|
|
position: 'absolute',
|
|
top: 40,
|
|
right: 12,
|
|
flexDirection: 'row',
|
|
gap: 8,
|
|
},
|
|
fsCloseBtn: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 18,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
fsCloseTxt: { fontSize: 16, fontWeight: '700' },
|
|
|
|
chartWrap: { borderBottomWidth: StyleSheet.hairlineWidth },
|
|
chartPlaceholder: {
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
placeholderTxt: { fontSize: 13 },
|
|
});
|