GoogleAIBuilder/RS232Monitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: auto-clear logs on connect

Browse Source
This commit is contained in:
backuppc
2026-01-16 14:57:07 +09:00
parent 71f119414f
commit e5695bed22
1 changed files with 79 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
App.tsx
View File

@@ -15,7 +15,7 @@ const App: React.FC = () => {
// State for Configuration // State for Configuration
const [isDualMode, setIsDualMode] = useState(false); const [isDualMode, setIsDualMode] = useState(false);
const [isAttached, setIsAttached] = useState(false); const [isAttached, setIsAttached] = useState(false);
// Refs for State Access inside Callbacks (Fixes stale closures) // Refs for State Access inside Callbacks (Fixes stale closures)
const isAttachedRef = useRef(isAttached); const isAttachedRef = useRef(isAttached);
const isDualModeRef = useRef(isDualMode); const isDualModeRef = useRef(isDualMode);
@@ -44,8 +44,8 @@ const App: React.FC = () => {
// Check if Web Serial is supported // Check if Web Serial is supported
const nav = navigator as unknown as { serial: NavigatorSerial }; const nav = navigator as unknown as { serial: NavigatorSerial };
if (!nav.serial) { if (!nav.serial) {
setIsSupported(false); setIsSupported(false);
console.warn("Web Serial API is not supported in this browser."); console.warn("Web Serial API is not supported in this browser.");
} }
return () => { return () => {
@@ -104,10 +104,10 @@ const App: React.FC = () => {
// --- Log Saving Logic --- // --- Log Saving Logic ---
const handleSaveLogs = (portName: string, logs: SerialLogEntry[]) => { const handleSaveLogs = (portName: string, logs: SerialLogEntry[]) => {
if (logs.length === 0) { if (logs.length === 0) {
alert(`No logs to save for ${portName}.`); alert(`No logs to save for ${portName}.`);
return; return;
} }
// Header // Header
let content = `SerialNexus Log - Port ${portName}\n`; let content = `SerialNexus Log - Port ${portName}\n`;
content += `Exported at: ${new Date().toLocaleString()}\n`; content += `Exported at: ${new Date().toLocaleString()}\n`;
@@ -117,18 +117,18 @@ const App: React.FC = () => {
// Data // Data
content += logs.map(log => { content += logs.map(log => {
const time = formatTime(log.timestamp).padEnd(23, ' '); const time = formatTime(log.timestamp).padEnd(23, ' ');
const dir = log.direction.padEnd(3, ' '); const dir = log.direction.padEnd(3, ' ');
const hex = uInt8ArrayToHex(log.data).padEnd(40, ' '); // simple padding const hex = uInt8ArrayToHex(log.data).padEnd(40, ' '); // simple padding
const ascii = uInt8ArrayToAscii(log.data); const ascii = uInt8ArrayToAscii(log.data);
return `${time} | ${dir} | ${hex} | ${ascii}`; return `${time} | ${dir} | ${hex} | ${ascii}`;
}).join('\n'); }).join('\n');
const blob = new Blob([content], { type: 'text/plain' }); const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
const a = document.createElement('a'); const a = document.createElement('a');
a.href = url; a.href = url;
a.download = `serial-log-${portName.toLowerCase()}-${new Date().toISOString().slice(0,19).replace(/[:T]/g,'-')}.txt`; a.download = `serial-log-${portName.toLowerCase()}-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.txt`;
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
document.body.removeChild(a); document.body.removeChild(a);
@@ -140,16 +140,17 @@ const App: React.FC = () => {
const handleConnectA = async () => { const handleConnectA = async () => {
try { try {
console.log("Connect A Clicked"); console.log("Connect A Clicked");
setLogsA([]);
await serialA.current.connect(baudRateA); await serialA.current.connect(baudRateA);
setIsConnectedA(true); setIsConnectedA(true);
serialA.current.startReading((data) => { serialA.current.startReading((data) => {
// Log RX on A // Log RX on A
addLog('A', 'RX', data); addLog('A', 'RX', data);
// Visual Feedback for Bridge: If Attached, we assume it was sent to B // 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 // Note: The actual sending happens in SerialManager, here we just update the UI
if (isAttachedRef.current && isDualModeRef.current && serialB.current.port) { if (isAttachedRef.current && isDualModeRef.current && serialB.current.port) {
addLog('B', 'TX', data); addLog('B', 'TX', data);
} }
}); });
} catch (err) { } catch (err) {
@@ -166,15 +167,16 @@ const App: React.FC = () => {
const handleConnectB = async () => { const handleConnectB = async () => {
try { try {
console.log("Connect B Clicked"); console.log("Connect B Clicked");
setLogsB([]);
await serialB.current.connect(baudRateB); await serialB.current.connect(baudRateB);
setIsConnectedB(true); setIsConnectedB(true);
serialB.current.startReading((data) => { serialB.current.startReading((data) => {
// Log RX on B // Log RX on B
addLog('B', 'RX', data); addLog('B', 'RX', data);
// Visual Feedback for Bridge: If Attached, we assume it was sent to A // Visual Feedback for Bridge: If Attached, we assume it was sent to A
if (isAttachedRef.current && isDualModeRef.current && serialA.current.port) { if (isAttachedRef.current && isDualModeRef.current && serialA.current.port) {
addLog('A', 'TX', data); addLog('A', 'TX', data);
} }
}); });
} catch (err) { } catch (err) {
@@ -204,7 +206,7 @@ const App: React.FC = () => {
// --- Helper Component for Controls --- // --- Helper Component for Controls ---
const renderControls = ( const renderControls = (
baud: number, baud: number,
setBaud: (r: number) => void, setBaud: (r: number) => void,
connected: boolean, connected: boolean,
onConnect: () => void, onConnect: () => void,
@@ -213,54 +215,52 @@ const App: React.FC = () => {
setViewMode: (v: ViewMode) => void setViewMode: (v: ViewMode) => void
) => ( ) => (
<> <>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-[10px] text-gray-500 font-bold uppercase hidden xl:inline">Baud</span> <span className="text-[10px] text-gray-500 font-bold uppercase hidden xl:inline">Baud</span>
<select <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" 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} value={baud}
onChange={(e) => setBaud(Number(e.target.value))} onChange={(e) => setBaud(Number(e.target.value))}
disabled={connected} disabled={connected}
> >
{BAUD_RATES.map(rate => ( {BAUD_RATES.map(rate => (
<option key={rate} value={rate}>{rate}</option> <option key={rate} value={rate}>{rate}</option>
))} ))}
</select> </select>
</div> </div>
{connected ? ( {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"> <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 DISCONNECT
</button> </button>
) : ( ) : (
<button <button
onClick={onConnect} onClick={onConnect}
disabled={!isSupported} disabled={!isSupported}
title={!isSupported ? "Web Serial API not supported" : "Connect to Serial Port"} 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" 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"} {isSupported ? "CONNECT" : "NO SERIAL API"}
</button> </button>
)} )}
{/* View Mode Toggles */} {/* View Mode Toggles */}
<div className="flex bg-gray-800 rounded border border-gray-700 ml-2"> <div className="flex bg-gray-800 rounded border border-gray-700 ml-2">
<button <button
onClick={() => setViewMode(ViewMode.ASCII)} onClick={() => setViewMode(ViewMode.ASCII)}
className={`px-2 py-0.5 text-[10px] font-bold rounded-l transition-all ${ 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'
viewMode === ViewMode.ASCII ? 'bg-gray-600 text-white' : 'text-gray-400 hover:text-white'
}`} }`}
> >
ASCII ASCII
</button> </button>
<button <button
onClick={() => setViewMode(ViewMode.HEX)} onClick={() => setViewMode(ViewMode.HEX)}
className={`px-2 py-0.5 text-[10px] font-bold rounded-r transition-all ${ 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'
viewMode === ViewMode.HEX ? 'bg-gray-600 text-white' : 'text-gray-400 hover:text-white'
}`} }`}
> >
HEX HEX
</button> </button>
</div> </div>
</> </>
); );
@@ -277,7 +277,7 @@ const App: React.FC = () => {
<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 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> </div>
</ControlPanel> </ControlPanel>
{!isSupported && ( {!isSupported && (
<div className="bg-red-900/50 border-b border-red-800 text-red-200 text-xs text-center py-1"> <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. ⚠️ Your browser does not support the Web Serial API. Please use Chrome, Edge, or Opera.
@@ -286,14 +286,13 @@ const App: React.FC = () => {
{/* Main Content Area */} {/* 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'}`}> <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 */} {/* Port A Terminal */}
<div className={`flex flex-col transition-all duration-300 ease-in-out ${ <div className={`flex flex-col transition-all duration-300 ease-in-out ${isDualMode
isDualMode ? 'w-full h-1/2 md:w-1/2 md:h-full'
? 'w-full h-1/2 md:w-1/2 md:h-full' : 'w-full h-full'
: 'w-full h-full' }`}>
}`}> <Terminal
<Terminal
title="Primary Port (A)" title="Primary Port (A)"
logs={logsA} logs={logsA}
viewMode={viewModeA} viewMode={viewModeA}
@@ -302,13 +301,13 @@ const App: React.FC = () => {
onSave={() => handleSaveLogs("A", logsA)} onSave={() => handleSaveLogs("A", logsA)}
className="flex-1" className="flex-1"
headerControls={renderControls( headerControls={renderControls(
baudRateA, setBaudRateA, isConnectedA, handleConnectA, handleDisconnectA, viewModeA, setViewModeA baudRateA, setBaudRateA, isConnectedA, handleConnectA, handleDisconnectA, viewModeA, setViewModeA
)} )}
/> />
<div className="mt-2 shrink-0"> <div className="mt-2 shrink-0">
<InputBar <InputBar
onSend={handleSendA} onSend={handleSendA}
disabled={!isConnectedA} disabled={!isConnectedA}
/> />
</div> </div>
</div> </div>
@@ -316,7 +315,7 @@ const App: React.FC = () => {
{/* Port B Terminal (Only if Dual Mode) */} {/* Port B Terminal (Only if Dual Mode) */}
{isDualMode && ( {isDualMode && (
<div className="flex flex-col w-full h-1/2 md:w-1/2 md:h-full animate-fade-in-right"> <div className="flex flex-col w-full h-1/2 md:w-1/2 md:h-full animate-fade-in-right">
<Terminal <Terminal
title="Secondary Port (B)" title="Secondary Port (B)"
logs={logsB} logs={logsB}
viewMode={viewModeB} viewMode={viewModeB}
@@ -329,9 +328,9 @@ const App: React.FC = () => {
)} )}
/> />
<div className="mt-2 shrink-0"> <div className="mt-2 shrink-0">
<InputBar <InputBar
onSend={handleSendB} onSend={handleSendB}
disabled={!isConnectedB} disabled={!isConnectedB}
/> />
</div> </div>
</div> </div>
@@ -342,9 +341,9 @@ const App: React.FC = () => {
<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"> <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>&copy; 2026 SIMP</span> <span>&copy; 2026 SIMP</span>
<span className="hidden sm:inline"> <span className="hidden sm:inline">
{isDualMode {isDualMode
? (isAttached ? "MODE: DUAL MONITOR (ATTACHED: A <-> B)" : "MODE: DUAL MONITOR (INDEPENDENT)") ? (isAttached ? "MODE: DUAL MONITOR (ATTACHED: A <-> B)" : "MODE: DUAL MONITOR (INDEPENDENT)")
: "MODE: SINGLE MONITOR (A)"} : "MODE: SINGLE MONITOR (A)"}
</span> </span>
</div> </div>
</div> </div>