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

..

Browse Source
This commit is contained in:
backuppc
2026-01-23 11:54:38 +09:00
parent 8b1bfb205d
commit 3396104011
2 changed files with 2083 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
App.tsx
View File

@@ -8,7 +8,7 @@ import { QuickTestPanel } from './components/QuickTestPanel';
import { ConnectionStatus, TagData, ReaderCommand, FrequencyBand, MemoryBank, LogEntry, SerialPort, ReaderInfo, QuickTestConfig } from './types';
import { RfidProtocol } from './services/rfidService';
import { calculateCRC16, bytesToHexString, hexStringToBytes, hexToAscii, asciiToHex } from './utils/crc16';
import { Terminal, Settings, LayoutDashboard, Database, Zap, ChevronUp, ChevronDown } from 'lucide-react';
import { Terminal, Settings, LayoutDashboard, Database, Zap, ChevronUp, ChevronDown, Wifi, WifiOff } from 'lucide-react';
const App: React.FC = () => {
// Serial State
@@ -54,7 +54,7 @@ const App: React.FC = () => {
const currentTidReadEpc = useRef<string | null>(null);
// Stale Closure Fix: Ref to hold the latest processFrame function
const processFrameRef = useRef<(frame: Uint8Array) => void>(() => {});
const processFrameRef = useRef<(frame: Uint8Array) => void>(() => { });
const addLog = (type: LogEntry['type'], message: string, data?: string) => {
setLogs(prev => [{
@@ -163,7 +163,7 @@ const App: React.FC = () => {
isConnectedRef.current = false;
try {
if (readerRef.current) {
await readerRef.current.cancel().catch(() => {});
await readerRef.current.cancel().catch(() => { });
readerRef.current = null;
}
if (writerRef.current) {
@@ -559,7 +559,7 @@ const App: React.FC = () => {
if (epcBytes.length === 0) continue;
const payload = [
epcWords, ...epcBytes, MemoryBank.TID, 0, 6, 0,0,0,0, 0, 0
epcWords, ...epcBytes, MemoryBank.TID, 0, 6, 0, 0, 0, 0, 0, 0
];
addLog('INFO', `Reading TID for ${tag.epc}...`);
await sendCommand(ReaderCommand.READ_DATA_G2, payload);
@@ -571,7 +571,7 @@ const App: React.FC = () => {
const handleMemoryRead = async (bank: MemoryBank, ptr: number, len: number, pwd: string, targetEpc: string) => {
const { bytes: epcBytes, words: epcWords } = getEpcData(targetEpc);
let pwdBytes = hexStringToBytes(pwd) || new Uint8Array([0,0,0,0]);
let pwdBytes = hexStringToBytes(pwd) || new Uint8Array([0, 0, 0, 0]);
const payload = [
epcWords, ...epcBytes, bank, ptr & 0xFF, len & 0xFF, ...Array.from(pwdBytes), 0, 0
@@ -583,7 +583,7 @@ const App: React.FC = () => {
const handleMemoryWrite = async (bank: MemoryBank, ptr: number, dataStr: string, pwd: string, targetEpc: string) => {
const { bytes: epcBytes, words: epcWords } = getEpcData(targetEpc);
let pwdBytes = hexStringToBytes(pwd) || new Uint8Array([0,0,0,0]);
let pwdBytes = hexStringToBytes(pwd) || new Uint8Array([0, 0, 0, 0]);
const dataBytes = hexStringToBytes(dataStr);
if (!dataBytes) {
@@ -606,7 +606,7 @@ const App: React.FC = () => {
addLog('ERROR', 'Invalid EPC Data');
return;
}
let pwdBytes = hexStringToBytes(pwd) || new Uint8Array([0,0,0,0]);
let pwdBytes = hexStringToBytes(pwd) || new Uint8Array([0, 0, 0, 0]);
const payload = [epcWords, ...Array.from(pwdBytes), ...epcBytes];
addLog('INFO', `Write EPC (0x04): ${newEpc}`);
@@ -622,7 +622,7 @@ const App: React.FC = () => {
return (
<div className="flex h-screen bg-slate-100">
{/* Sidebar */}
<div className="w-64 bg-white border-r border-slate-200 flex flex-col z-10">
<div className="hidden md:flex w-64 bg-white border-r border-slate-200 flex-col z-10">
<div className="p-6 border-b border-slate-100">
<h1 className="text-xl font-bold text-slate-800 flex items-center gap-2">
<Database className="text-blue-600" />
@@ -634,32 +634,28 @@ const App: React.FC = () => {
<div className="p-4 space-y-2 flex-1">
<button
onClick={() => setActiveTab('quicktest')}
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
activeTab === 'quicktest' ? 'bg-indigo-50 text-indigo-700' : 'text-slate-600 hover:bg-slate-50'
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'quicktest' ? 'bg-indigo-50 text-indigo-700' : 'text-slate-600 hover:bg-slate-50'
}`}
>
<Zap className="w-5 h-5" /> Quick Test
</button>
<button
onClick={() => setActiveTab('inventory')}
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
activeTab === 'inventory' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'inventory' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
}`}
>
<LayoutDashboard className="w-5 h-5" /> Inventory
</button>
<button
onClick={() => setActiveTab('memory')}
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
activeTab === 'memory' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'memory' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
}`}
>
<Database className="w-5 h-5" /> Read / Write
</button>
<button
onClick={() => setActiveTab('settings')}
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${
activeTab === 'settings' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium transition-colors ${activeTab === 'settings' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
}`}
>
<Settings className="w-5 h-5" /> Settings
@@ -681,6 +677,61 @@ const App: React.FC = () => {
{/* Main Content */}
<div className="flex-1 flex flex-col overflow-hidden relative">
{/* Mobile Top Navigation Bar */}
<div className="md:hidden bg-white border-b border-slate-200 p-2 flex items-center justify-between shrink-0 overflow-x-auto">
<div className="flex items-center gap-3 pr-4 border-r border-slate-100 mr-2 shrink-0">
<div className="flex items-center gap-1">
<Database className="text-blue-600 w-5 h-5" />
<span className="font-bold text-slate-800 text-sm">UHF</span>
</div>
{/* Connection Status Indicator */}
<button
onClick={() => setActiveTab('settings')}
className={`flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium transition-colors ${status === ConnectionStatus.CONNECTED
? 'bg-emerald-50 text-emerald-600 border border-emerald-100'
: 'bg-red-50 text-red-600 border border-red-100 animate-pulse'
}`}
>
{status === ConnectionStatus.CONNECTED ? <Wifi className="w-3 h-3" /> : <WifiOff className="w-3 h-3" />}
<span>{status === ConnectionStatus.CONNECTED ? 'On' : 'Connect'}</span>
</button>
</div>
<div className="flex items-center gap-1 flex-1 justify-around">
<button
onClick={() => setActiveTab('quicktest')}
className={`p-2 rounded-lg transition-colors flex flex-col items-center justify-center gap-1 ${activeTab === 'quicktest' ? 'bg-indigo-50 text-indigo-700' : 'text-slate-600 hover:bg-slate-50'
}`}
>
<Zap className="w-5 h-5" />
<span className="text-[10px] font-medium leading-none">Quick</span>
</button>
<button
onClick={() => setActiveTab('inventory')}
className={`p-2 rounded-lg transition-colors flex flex-col items-center justify-center gap-1 ${activeTab === 'inventory' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
}`}
>
<LayoutDashboard className="w-5 h-5" />
<span className="text-[10px] font-medium leading-none">Inv.</span>
</button>
<button
onClick={() => setActiveTab('memory')}
className={`p-2 rounded-lg transition-colors flex flex-col items-center justify-center gap-1 ${activeTab === 'memory' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
}`}
>
<Database className="w-5 h-5" />
<span className="text-[10px] font-medium leading-none">R/W</span>
</button>
<button
onClick={() => setActiveTab('settings')}
className={`p-2 rounded-lg transition-colors flex flex-col items-center justify-center gap-1 ${activeTab === 'settings' ? 'bg-blue-50 text-blue-700' : 'text-slate-600 hover:bg-slate-50'
}`}
>
<Settings className="w-5 h-5" />
<span className="text-[10px] font-medium leading-none">Set</span>
</button>
</div>
</div>
<main className="flex-1 p-6 overflow-auto">
{activeTab === 'inventory' && (
<InventoryPanel
@@ -738,7 +789,7 @@ const App: React.FC = () => {
<Terminal className="w-3 h-3" /> System Logs
</div>
<div>
{isLogExpanded ? <ChevronDown className="w-4 h-4 text-slate-400"/> : <ChevronUp className="w-4 h-4 text-slate-400"/>}
{isLogExpanded ? <ChevronDown className="w-4 h-4 text-slate-400" /> : <ChevronUp className="w-4 h-4 text-slate-400" />}
</div>
</div>
@@ -747,8 +798,7 @@ const App: React.FC = () => {
{logs.map(log => (
<div key={log.id} className="flex gap-2">
<span className="text-slate-400">[{log.timestamp.toLocaleTimeString()}]</span>
<span className={`font-bold ${
log.type === 'TX' ? 'text-blue-600' :
<span className={`font-bold ${log.type === 'TX' ? 'text-blue-600' :
log.type.includes('RX') ? 'text-emerald-600' :
log.type === 'ERROR' ? 'text-red-600' :
log.type === 'WARN' ? 'text-amber-600' : 'text-slate-700'

1816
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff