Initial commit
This commit is contained in:
backuppc
354
App.tsx
Normal file
354
App.tsx
Normal file
@@ -0,0 +1,354 @@
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import { SerialManager } from './services/serialService';
|
||||
import { SerialLogEntry, ViewMode, NavigatorSerial } from './types';
|
||||
import { generateId, formatTime, uInt8ArrayToHex, uInt8ArrayToAscii } from './utils';
|
||||
import Terminal from './components/Terminal';
|
||||
import ControlPanel from './components/ControlPanel';
|
||||
import InputBar from './components/InputBar';
|
||||
|
||||
const BAUD_RATES = [9600, 19200, 38400, 57600, 115200];
|
||||
|
||||
const App: React.FC = () => {
|
||||
// Check for Browser Support
|
||||
const [isSupported, setIsSupported] = useState(true);
|
||||
|
||||
// State for Configuration
|
||||
const [isDualMode, setIsDualMode] = useState(false);
|
||||
const [isAttached, setIsAttached] = useState(false);
|
||||
|
||||
// Refs for State Access inside Callbacks (Fixes stale closures)
|
||||
const isAttachedRef = useRef(isAttached);
|
||||
const isDualModeRef = useRef(isDualMode);
|
||||
|
||||
// Independent View Modes
|
||||
const [viewModeA, setViewModeA] = useState<ViewMode>(ViewMode.ASCII);
|
||||
const [viewModeB, setViewModeB] = useState<ViewMode>(ViewMode.ASCII);
|
||||
|
||||
// Independent Baud Rates
|
||||
const [baudRateA, setBaudRateA] = useState(115200);
|
||||
const [baudRateB, setBaudRateB] = useState(115200);
|
||||
|
||||
// State for Connections
|
||||
const [isConnectedA, setIsConnectedA] = useState(false);
|
||||
const [isConnectedB, setIsConnectedB] = useState(false);
|
||||
|
||||
// Logs
|
||||
const [logsA, setLogsA] = useState<SerialLogEntry[]>([]);
|
||||
const [logsB, setLogsB] = useState<SerialLogEntry[]>([]);
|
||||
|
||||
// Refs to hold SerialManager instances (persisted across renders)
|
||||
const serialA = useRef(new SerialManager('A'));
|
||||
const serialB = useRef(new SerialManager('B'));
|
||||
|
||||
useEffect(() => {
|
||||
// Check if Web Serial is supported
|
||||
const nav = navigator as unknown as { serial: NavigatorSerial };
|
||||
if (!nav.serial) {
|
||||
setIsSupported(false);
|
||||
console.warn("Web Serial API is not supported in this browser.");
|
||||
}
|
||||
|
||||
return () => {
|
||||
serialA.current.disconnect();
|
||||
serialB.current.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Sync Refs with State
|
||||
useEffect(() => {
|
||||
isAttachedRef.current = isAttached;
|
||||
}, [isAttached]);
|
||||
|
||||
useEffect(() => {
|
||||
isDualModeRef.current = isDualMode;
|
||||
}, [isDualMode]);
|
||||
|
||||
// Handle Bridging Logic
|
||||
useEffect(() => {
|
||||
if (isAttached && isDualMode) {
|
||||
// Connect bridges in the Service layer
|
||||
console.log("Bridging Enabled: A <-> B");
|
||||
serialA.current.setBridgeTarget(serialB.current);
|
||||
serialB.current.setBridgeTarget(serialA.current);
|
||||
} else {
|
||||
// Disconnect bridges
|
||||
if (serialA.current['bridgeTarget'] !== null) console.log("Bridging Disabled");
|
||||
serialA.current.setBridgeTarget(null);
|
||||
serialB.current.setBridgeTarget(null);
|
||||
}
|
||||
}, [isAttached, isDualMode]);
|
||||
|
||||
// Safety: If Dual Mode is disabled, automatically detach
|
||||
useEffect(() => {
|
||||
if (!isDualMode && isAttached) {
|
||||
setIsAttached(false);
|
||||
}
|
||||
}, [isDualMode]);
|
||||
|
||||
// --- Helper to add logs ---
|
||||
const addLog = useCallback((port: 'A' | 'B', direction: 'TX' | 'RX', data: Uint8Array) => {
|
||||
const entry: SerialLogEntry = {
|
||||
id: generateId(),
|
||||
timestamp: new Date(),
|
||||
direction,
|
||||
data
|
||||
};
|
||||
|
||||
if (port === 'A') {
|
||||
setLogsA(prev => [...prev.slice(-1000), entry]); // Keep last 1000 logs
|
||||
} else {
|
||||
setLogsB(prev => [...prev.slice(-1000), entry]);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// --- Log Saving Logic ---
|
||||
const handleSaveLogs = (portName: string, logs: SerialLogEntry[]) => {
|
||||
if (logs.length === 0) {
|
||||
alert(`No logs to save for ${portName}.`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Header
|
||||
let content = `SerialNexus Log - Port ${portName}\n`;
|
||||
content += `Exported at: ${new Date().toLocaleString()}\n`;
|
||||
content += `--------------------------------------------------------------------------------\n`;
|
||||
content += `TIMESTAMP | DIR | HEX DATA | ASCII\n`;
|
||||
content += `--------------------------------------------------------------------------------\n`;
|
||||
|
||||
// Data
|
||||
content += logs.map(log => {
|
||||
const time = formatTime(log.timestamp).padEnd(23, ' ');
|
||||
const dir = log.direction.padEnd(3, ' ');
|
||||
const hex = uInt8ArrayToHex(log.data).padEnd(40, ' '); // simple padding
|
||||
const ascii = uInt8ArrayToAscii(log.data);
|
||||
return `${time} | ${dir} | ${hex} | ${ascii}`;
|
||||
}).join('\n');
|
||||
|
||||
const blob = new Blob([content], { type: 'text/plain' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `serial-log-${portName.toLowerCase()}-${new Date().toISOString().slice(0,19).replace(/[:T]/g,'-')}.txt`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
// --- Connection Handlers ---
|
||||
|
||||
const handleConnectA = async () => {
|
||||
try {
|
||||
console.log("Connect A Clicked");
|
||||
await serialA.current.connect(baudRateA);
|
||||
setIsConnectedA(true);
|
||||
serialA.current.startReading((data) => {
|
||||
// Log RX on A
|
||||
addLog('A', 'RX', data);
|
||||
|
||||
// Visual Feedback for Bridge: If Attached, we assume it was sent to B
|
||||
// Note: The actual sending happens in SerialManager, here we just update the UI
|
||||
if (isAttachedRef.current && isDualModeRef.current && serialB.current.port) {
|
||||
addLog('B', 'TX', data);
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Connection Error A:", err);
|
||||
alert("Failed to connect to Port A. Check console for details.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDisconnectA = async () => {
|
||||
await serialA.current.disconnect();
|
||||
setIsConnectedA(false);
|
||||
};
|
||||
|
||||
const handleConnectB = async () => {
|
||||
try {
|
||||
console.log("Connect B Clicked");
|
||||
await serialB.current.connect(baudRateB);
|
||||
setIsConnectedB(true);
|
||||
serialB.current.startReading((data) => {
|
||||
// Log RX on B
|
||||
addLog('B', 'RX', data);
|
||||
|
||||
// Visual Feedback for Bridge: If Attached, we assume it was sent to A
|
||||
if (isAttachedRef.current && isDualModeRef.current && serialA.current.port) {
|
||||
addLog('A', 'TX', data);
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Connection Error B:", err);
|
||||
alert("Failed to connect to Port B. Check console for details.");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDisconnectB = async () => {
|
||||
await serialB.current.disconnect();
|
||||
setIsConnectedB(false);
|
||||
};
|
||||
|
||||
// --- Send Handlers (Receives Uint8Array from InputBar) ---
|
||||
|
||||
const handleSendA = async (data: Uint8Array) => {
|
||||
if (!isConnectedA) return;
|
||||
await serialA.current.send(data);
|
||||
addLog('A', 'TX', data);
|
||||
};
|
||||
|
||||
const handleSendB = async (data: Uint8Array) => {
|
||||
if (!isConnectedB) return;
|
||||
await serialB.current.send(data);
|
||||
addLog('B', 'TX', data);
|
||||
};
|
||||
|
||||
// --- Helper Component for Controls ---
|
||||
const renderControls = (
|
||||
baud: number,
|
||||
setBaud: (r: number) => void,
|
||||
connected: boolean,
|
||||
onConnect: () => void,
|
||||
onDisconnect: () => void,
|
||||
viewMode: ViewMode,
|
||||
setViewMode: (v: ViewMode) => void
|
||||
) => (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-[10px] text-gray-500 font-bold uppercase hidden xl:inline">Baud</span>
|
||||
<select
|
||||
className="bg-gray-800 text-xs text-white border border-gray-700 rounded px-1 py-0.5 focus:ring-1 focus:ring-indigo-500 outline-none w-20"
|
||||
value={baud}
|
||||
onChange={(e) => setBaud(Number(e.target.value))}
|
||||
disabled={connected}
|
||||
>
|
||||
{BAUD_RATES.map(rate => (
|
||||
<option key={rate} value={rate}>{rate}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{connected ? (
|
||||
<button onClick={onDisconnect} className="bg-red-900/30 text-red-400 border border-red-800/50 hover:bg-red-900/50 px-2 py-0.5 rounded text-xs font-bold transition-all flex items-center gap-1">
|
||||
DISCONNECT
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={onConnect}
|
||||
disabled={!isSupported}
|
||||
title={!isSupported ? "Web Serial API not supported" : "Connect to Serial Port"}
|
||||
className="bg-indigo-600 hover:bg-indigo-500 text-white px-3 py-0.5 rounded text-xs font-bold transition-all shadow-lg shadow-indigo-900/20 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isSupported ? "CONNECT" : "NO SERIAL API"}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* View Mode Toggles */}
|
||||
<div className="flex bg-gray-800 rounded border border-gray-700 ml-2">
|
||||
<button
|
||||
onClick={() => setViewMode(ViewMode.ASCII)}
|
||||
className={`px-2 py-0.5 text-[10px] font-bold rounded-l transition-all ${
|
||||
viewMode === ViewMode.ASCII ? 'bg-gray-600 text-white' : 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
ASCII
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode(ViewMode.HEX)}
|
||||
className={`px-2 py-0.5 text-[10px] font-bold rounded-r transition-all ${
|
||||
viewMode === ViewMode.HEX ? 'bg-gray-600 text-white' : 'text-gray-400 hover:text-white'
|
||||
}`}
|
||||
>
|
||||
HEX
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen bg-gray-950 text-gray-200">
|
||||
<ControlPanel
|
||||
isDualMode={isDualMode}
|
||||
setDualMode={setIsDualMode}
|
||||
isAttached={isAttached}
|
||||
setIsAttached={setIsAttached}
|
||||
>
|
||||
<div className="w-full max-w-[728px] h-[90px] bg-gray-800/50 border-2 border-dashed border-gray-700 rounded-lg flex items-center justify-center text-gray-500 text-xs font-mono uppercase tracking-widest relative overflow-hidden group">
|
||||
<span className="relative z-10">Google AdSense Space (728x90)</span>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-gray-700/10 to-transparent translate-x-[-100%] group-hover:animate-[shimmer_2s_infinite]"></div>
|
||||
</div>
|
||||
</ControlPanel>
|
||||
|
||||
{!isSupported && (
|
||||
<div className="bg-red-900/50 border-b border-red-800 text-red-200 text-xs text-center py-1">
|
||||
⚠️ Your browser does not support the Web Serial API. Please use Chrome, Edge, or Opera.
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className={`flex-1 flex overflow-hidden p-2 md:p-4 gap-2 md:gap-4 ${isDualMode ? 'flex-col md:flex-row' : 'flex-col'}`}>
|
||||
|
||||
{/* Port A Terminal */}
|
||||
<div className={`flex flex-col transition-all duration-300 ease-in-out ${
|
||||
isDualMode
|
||||
? 'w-full h-1/2 md:w-1/2 md:h-full'
|
||||
: 'w-full h-full'
|
||||
}`}>
|
||||
<Terminal
|
||||
title="Primary Port (A)"
|
||||
logs={logsA}
|
||||
viewMode={viewModeA}
|
||||
isConnected={isConnectedA}
|
||||
onClear={() => setLogsA([])}
|
||||
onSave={() => handleSaveLogs("A", logsA)}
|
||||
className="flex-1"
|
||||
headerControls={renderControls(
|
||||
baudRateA, setBaudRateA, isConnectedA, handleConnectA, handleDisconnectA, viewModeA, setViewModeA
|
||||
)}
|
||||
/>
|
||||
<div className="mt-2 shrink-0">
|
||||
<InputBar
|
||||
onSend={handleSendA}
|
||||
disabled={!isConnectedA}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Port B Terminal (Only if Dual Mode) */}
|
||||
{isDualMode && (
|
||||
<div className="flex flex-col w-full h-1/2 md:w-1/2 md:h-full animate-fade-in-right">
|
||||
<Terminal
|
||||
title="Secondary Port (B)"
|
||||
logs={logsB}
|
||||
viewMode={viewModeB}
|
||||
isConnected={isConnectedB}
|
||||
onClear={() => setLogsB([])}
|
||||
onSave={() => handleSaveLogs("B", logsB)}
|
||||
className="flex-1 border-indigo-900/50 shadow-indigo-900/10"
|
||||
headerControls={renderControls(
|
||||
baudRateB, setBaudRateB, isConnectedB, handleConnectB, handleDisconnectB, viewModeB, setViewModeB
|
||||
)}
|
||||
/>
|
||||
<div className="mt-2 shrink-0">
|
||||
<InputBar
|
||||
onSend={handleSendB}
|
||||
disabled={!isConnectedB}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer / Status */}
|
||||
<div className="h-6 bg-gray-900 border-t border-gray-800 flex items-center justify-between px-4 text-[10px] text-gray-500 font-mono select-none shrink-0">
|
||||
<span>© 2026 SIMP</span>
|
||||
<span className="hidden sm:inline">
|
||||
{isDualMode
|
||||
? (isAttached ? "MODE: DUAL MONITOR (ATTACHED: A <-> B)" : "MODE: DUAL MONITOR (INDEPENDENT)")
|
||||
: "MODE: SINGLE MONITOR (A)"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
Reference in New Issue
Block a user