Skip to content

Commit cd5a468

Browse files
author
Ritika Mishra
committed
updated ui of serial wizard
1 parent c240669 commit cd5a468

File tree

2 files changed

+87
-86
lines changed

2 files changed

+87
-86
lines changed

‎src/app/serial-plotter/page.tsx‎

Lines changed: 54 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const SerialPlotter = () => {
3232
const [boardName, setBoardName] = useState<string | null>(null);
3333
const [viewMode, setViewMode] = useState<"monitor" | "plotter" | "both">("both");
3434
const baudRateref = useRef<number>(115200);
35-
const bitsref = useRef<number>(10);
35+
3636

3737
useEffect(() => {
3838
if (rawDataRef.current) {
@@ -323,75 +323,74 @@ const SerialPlotter = () => {
323323
)}
324324
{/* Monitor - Adjusts Height Dynamically */}
325325
{viewMode !== "plotter" && (
326-
<div ref={rawDataRef} className={`w-full border rounded-xl shadow-lg bg-[#1a1a2e] text-white overflow-auto flex flex-col flex-grow ${viewMode === "both" ? "min-h-[55vh]" : "min-h-[50vh]"}`}>
327-
{/* Title Bar with Input and Buttons */}
328-
<div className="sticky top-0 flex items-center justify-between bg-[#1a1a2e] p-2 z-10">
329-
{/* Input Box (Top Left) */}
330-
<input
331-
type="text"
332-
value={command}
333-
onChange={(e) => setCommand(e.target.value)}
334-
placeholder="Enter command (WHORU, START)"
335-
className="w-1/3 p-1 rounded bg-gray-800 text-white border border-gray-600 text-xs"
336-
/>
337-
338-
{/* Buttons (Top Right) */}
339-
<div className="flex items-center space-x-2">
340-
<Button onClick={sendCommand} className="px-2 py-1 text-xs font-semibold">Send</Button>
341-
<button
342-
onClick={() => setRawData("")}
343-
className="px-2 py-1 text-xs bg-red-600 text-white rounded shadow-md hover:bg-red-700 transition"
344-
>
345-
Clear
346-
</button>
347-
</div>
348-
</div>
326+
<div
327+
ref={rawDataRef}
328+
className={`w-full border rounded-xl shadow-lg bg-[#1a1a2e] text-white overflow-auto flex flex-col flex-grow ${viewMode === "both" ? "min-h-[55vh]" : "min-h-[50vh]"}`}
329+
>
330+
{/* Title Bar with Input and Buttons */}
331+
<div className="sticky top-0 flex items-center justify-between bg-[#1a1a2e] p-2 z-10">
332+
{/* Input Box (Full Width) */}
333+
<input
334+
type="text"
335+
value={command}
336+
onChange={(e) => setCommand(e.target.value)}
337+
placeholder="Enter command (START)"
338+
className="w-full p-2 rounded bg-gray-800 text-white border border-gray-600 text-xs"
339+
/>
340+
341+
{/* Buttons (Shifted Left) */}
342+
<div className="flex items-center space-x-2 mr-auto">
343+
<Button onClick={sendCommand} className="px-3 py-1 text-xs font-semibold">Send</Button>
344+
<button
345+
onClick={() => setRawData("")}
346+
className="px-3 py-1 text-xs bg-red-600 text-white rounded shadow-md hover:bg-red-700 transition"
347+
>
348+
Clear
349+
</button>
350+
</div>
351+
</div>
349352

350-
{/* Data Display */}
351-
<pre className="text-xs whitespace-pre-wrap break-words px-4 pb-4 flex-grow overflow-auto">
352-
{rawData}
353-
</pre>
354-
</div>
355-
)}
353+
{/* Data Display */}
354+
<pre className="text-xs whitespace-pre-wrap break-words px-4 pb-4 flex-grow overflow-auto">
355+
{rawData}
356+
</pre>
357+
</div>
358+
)}
356359

357360
</div>
358361
{/* Footer Section */}
359362
<footer className="flex flex-col gap-2 sm:flex-row py-2 m-2 w-full shrink-0 items-center justify-center px-2 md:px-4 border-t">
363+
364+
{/* Connection Button */}
365+
<div className="flex justify-center">
366+
<Button
367+
onClick={isConnected ? disconnectSerial : connectToSerial}
368+
className={`px-4 py-2 text-sm font-semibold transition rounded-xl ${isConnected ? " text-base" : "text-base"
369+
}`}
370+
>
371+
{isConnected ? "Disconnect" : "Connect Serial"}
372+
</Button>
373+
</div>
374+
360375
{/* View Mode Selector */}
361-
<div className="flex justify-center space-x-2">
362-
{(["monitor", "plotter", "both"] as const).map((mode) => (
376+
<div className="flex items-center gap-0.5 mx-0 px-0">
377+
{(["monitor", "plotter", "both"] as const).map((mode, index, arr) => (
363378
<Button
364379
key={mode}
365380
onClick={() => setViewMode(mode)}
366-
className={`px-3 py-1 text-sm rounded ${viewMode === mode ? "" : "bg-gray-700 text-gray-200"}`}
381+
className={`px-4 py-2 text-sm transition font-semibold
382+
${viewMode === mode
383+
? "bg-primary text-white dark:text-gray-800 shadow-md" // Active state
384+
: "bg-gray-700 text-gray-300 hover:bg-gray-600"} // Inactive state
385+
${index === 0 ? "rounded-xl rounded-r-none" : ""}
386+
${index === arr.length - 1 ? "rounded-xl rounded-l-none" : ""}
387+
${index !== 0 && index !== arr.length - 1 ? "rounded-none" : ""}`}
367388
>
368389
{mode.charAt(0).toUpperCase() + mode.slice(1)}
369390
</Button>
370391
))}
371392
</div>
372393

373-
{/* Connection Buttons */}
374-
<div className="flex justify-center flex-wrap gap-2">
375-
<Button onClick={connectToSerial} disabled={isConnected} className="px-4 py-2 text-sm font-semibold">
376-
{isConnected ? "Connected" : "Connect Serial"}
377-
</Button>
378-
<Button onClick={disconnectSerial} disabled={!isConnected} className="px-4 py-2 text-sm font-semibold">
379-
Disconnect
380-
</Button>
381-
</div>
382-
{/* Bits Selector */}
383-
<div className="flex items-center space-x-2">
384-
<label className="text-xs font-semibold">Bits</label>
385-
<select
386-
value={bitsref.current}
387-
onChange={(e) => (bitsref.current = Number(e.target.value))}
388-
className="p-1 border rounded bg-gray-800 text-white text-xs"
389-
>
390-
{[10, 12, 14, 16].map((Bits) => (
391-
<option key={Bits} value={Bits}>{Bits}</option>
392-
))}
393-
</select>
394-
</div>
395394
{/* Baud Rate Selector */}
396395
<div className="flex items-center space-x-2">
397396
<label className="text-xs font-semibold">Baud Rate:</label>

‎src/components/Connection.tsx‎

Lines changed: 33 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1147,38 +1147,40 @@ const Connection: React.FC<ConnectionProps> = ({
11471147
<TooltipTrigger asChild>
11481148
<Popover open={open} onOpenChange={setOpen}>
11491149
<PopoverTrigger asChild>
1150-
<Button
1151-
className="flex items-center gap-1 py-2 px-4 rounded-xl font-semibold"
1152-
onClick={() => (isDeviceConnected ? disconnectDevice() : connectToDevice())}
1153-
disabled={isLoading}
1154-
>
1155-
{isLoading ? (
1156-
<>
1157-
<Loader size={17} className="animate-spin" />
1158-
Connecting...
1159-
</>
1160-
) : isDeviceConnected ? (
1161-
<>
1162-
Disconnect
1163-
<CircleX size={17} />
1164-
</>
1165-
) : (
1166-
<>
1167-
Chords Visualizer
1168-
<Cable size={17} />
1169-
</>
1170-
)}
1171-
</Button>
1150+
<Button
1151+
className="flex items-center gap-1 py-2 px-4 rounded-xl font-semibold"
1152+
onClick={() => (isDeviceConnected ? disconnectDevice() : connectToDevice())}
1153+
disabled={isLoading}
1154+
>
1155+
{isLoading ? (
1156+
<>
1157+
<Loader size={17} className="animate-spin" />
1158+
Connecting...
1159+
</>
1160+
) : isDeviceConnected ? (
1161+
<>
1162+
Disconnect
1163+
<CircleX size={17} />
1164+
</>
1165+
) : (
1166+
<>
1167+
Chords Visualizer
1168+
<Cable size={17} />
1169+
</>
1170+
)}
1171+
</Button>
11721172
</PopoverTrigger>
1173-
<Button
1174-
className="py-2 px-4 rounded-xl font-semibold"
1175-
onClick={() => {
1176-
localStorage.setItem("autoConnectSerial", "true"); // Auto-connect flag
1177-
router.push("/serial-plotter");
1178-
}}
1179-
>
1180-
Serial Wizard
1181-
</Button>
1173+
{!isDeviceConnected && (
1174+
<Button
1175+
className="py-2 px-4 rounded-xl font-semibold"
1176+
onClick={() => {
1177+
localStorage.setItem("autoConnectSerial", "true"); // Auto-connect flag
1178+
router.push("/serial-plotter");
1179+
}}
1180+
>
1181+
Serial Wizard
1182+
</Button>
1183+
)}
11821184
</Popover>
11831185
</TooltipTrigger>
11841186
<TooltipContent>

0 commit comments

Comments
 (0)