Skip to content

Commit c240669

Browse files
author
Ritika Mishra
committed
updated code to visualize better signal
1 parent 1c59888 commit c240669

File tree

2 files changed

+86
-115
lines changed

2 files changed

+86
-115
lines changed

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

Lines changed: 55 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
import { useEffect, useState, useRef, useCallback } from "react";
44
import { WebglPlot, WebglLine, ColorRGBA } from "webgl-plot";
55
import { Button } from "@/components/ui/button";
6-
import { Checkbox } from "@/components/ui/checkbox";
76
import Navbar from "@/components/Navbar";
87

98
interface DataPoint {
@@ -308,15 +307,13 @@ const SerialPlotter = () => {
308307
return (
309308
<div className="w-full h-screen mx-auto border rounded-2xl shadow-xl flex flex-col gap- overflow-hidden px-4">
310309
<Navbar isDisplay={true} />
311-
<h1 className="text-2xl font-bold text-center">Chords Serial Plotter & Monitor</h1>
312310

313311
<div className="w-full flex flex-col gap-2 flex-grow overflow-hidden">
314312

315313
{/* Plotter - Adjusts Height Dynamically */}
316314
{viewMode !== "monitor" && (
317315
<div className="w-full flex flex-col flex-grow min-h-[40vh]">
318316
<div className="border rounded-xl shadow-lg bg-[#1a1a2e] p-2 w-full h-full flex flex-col">
319-
<h2 className="text-sm font-semibold text-center mb-1 text-white">Plotter</h2>
320317
{/* Canvas Container */}
321318
<div className="canvas-container w-full h-full flex items-center justify-center overflow-hidden">
322319
<canvas ref={canvasRef} className="w-full h-full rounded-xl" />
@@ -326,65 +323,37 @@ const SerialPlotter = () => {
326323
)}
327324
{/* Monitor - Adjusts Height Dynamically */}
328325
{viewMode !== "plotter" && (
329-
<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]"}`}>
330-
{/* Sticky Top Controls */}
331-
{/* Title */}
332-
<h2 className="text-sm font-semibold text-center mb-2">
333-
{boardName ? `Connected to: ${boardName}` : "Raw Data Output"}
334-
</h2>
335-
<div className="sticky top-0 right-0 flex items-center justify-end space-x-2 bg-[#1a1a2e] p-2 z-10">
336-
<div className="flex items-center space-x-1 p-1">
337-
<input
338-
type="text"
339-
value={command}
340-
onChange={(e) => setCommand(e.target.value)}
341-
placeholder="Enter command (WHORU, START)"
342-
className="w-full p-1 rounded bg-gray-800 text-white border border-gray-600 text-xs"
343-
/>
344-
<Button onClick={sendCommand} className="px-2 py-1 text-xs font-semibold">Send</Button>
345-
</div>
346-
{/* Bits Selector */}
347-
<div className="flex items-center space-x-2">
348-
<label className="text-xs font-semibold">Bits</label>
349-
<select
350-
value={bitsref.current}
351-
onChange={(e) => (bitsref.current = Number(e.target.value))}
352-
className="p-1 border rounded bg-gray-800 text-white text-xs"
353-
>
354-
{[10, 12, 14, 16].map((Bits) => (
355-
<option key={Bits} value={Bits}>{Bits}</option>
356-
))}
357-
</select>
358-
</div>
359-
{/* Baud Rate Selector */}
360-
<div className="flex items-center space-x-2">
361-
<label className="text-xs font-semibold">Baud Rate:</label>
362-
<select
363-
value={baudRateref.current}
364-
onChange={(e) => handleBaudRateChange(Number(e.target.value))}
365-
className="p-1 border rounded bg-gray-800 text-white text-xs"
366-
>
367-
{[9600, 19200, 38400, 57600, 115200, 230400, 460800, 921600].map((rate) => (
368-
<option key={rate} value={rate}>{rate}</option>
369-
))}
370-
</select>
371-
</div>
372-
{/* Clear Data Button */}
373-
<button
374-
onClick={() => setRawData("")}
375-
className="px-2 py-1 text-xs bg-red-600 text-white rounded shadow-md hover:bg-red-700 transition"
376-
>
377-
Clear
378-
</button>
379-
</div>
380-
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>
381349

382-
<pre className="text-xs whitespace-pre-wrap break-words px-4 pb-4 flex-grow overflow-auto">
383-
{rawData}
384-
</pre>
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+
)}
385356

386-
</div>
387-
)}
388357
</div>
389358
{/* Footer Section */}
390359
<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">
@@ -410,6 +379,32 @@ const SerialPlotter = () => {
410379
Disconnect
411380
</Button>
412381
</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>
395+
{/* Baud Rate Selector */}
396+
<div className="flex items-center space-x-2">
397+
<label className="text-xs font-semibold">Baud Rate:</label>
398+
<select
399+
value={baudRateref.current}
400+
onChange={(e) => handleBaudRateChange(Number(e.target.value))}
401+
className="p-1 border rounded bg-gray-800 text-white text-xs"
402+
>
403+
{[9600, 19200, 38400, 57600, 115200, 230400, 460800, 921600].map((rate) => (
404+
<option key={rate} value={rate}>{rate}</option>
405+
))}
406+
</select>
407+
</div>
413408
</footer>
414409
</div>
415410
);

‎src/components/Connection.tsx‎

Lines changed: 31 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1147,62 +1147,38 @@ const Connection: React.FC<ConnectionProps> = ({
11471147
<TooltipTrigger asChild>
11481148
<Popover open={open} onOpenChange={setOpen}>
11491149
<PopoverTrigger asChild>
1150-
<Button
1151-
className="flex items-center justify-center gap-1 py-2 px-2 sm:py-3 sm:px-4 rounded-xl font-semibold"
1152-
onClick={() => {
1153-
if (isDeviceConnected) {
1154-
disconnectDevice(); // Disconnect if already connected
1155-
} else {
1156-
setOpen(true); // Open popover for selection
1157-
}
1158-
}}
1159-
disabled={isLoading}
1160-
>
1161-
{isLoading ? (
1162-
<>
1163-
<Loader size={17} className="animate-spin" />
1164-
Connecting...
1165-
</>
1166-
) : isDeviceConnected ? (
1167-
<>
1168-
Disconnect
1169-
<CircleX size={17} />
1170-
</>
1171-
) : (
1172-
<>
1173-
Connect
1174-
<Cable size={17} />
1175-
</>
1176-
)}
1177-
</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>
11781172
</PopoverTrigger>
1179-
1180-
{!isDeviceConnected && (
1181-
<PopoverContent className="w-48 p-2">
1182-
{/* Open Serial Plotter Page and Auto-Connect */}
1183-
<Button
1184-
className="w-full mb-2"
1185-
onClick={() => {
1186-
localStorage.setItem("autoConnectSerial", "true"); // Set flag for auto connection
1187-
router.push("/serial-plotter"); // Navigate to Serial Plotter
1188-
setOpen(false);
1189-
}}
1190-
>
1191-
Serial Plotter
1192-
</Button>
1193-
1194-
{/* Board Connect: Show selection UI and connect */}
1195-
<Button
1196-
className="w-full"
1197-
onClick={() => {
1198-
setOpen(false);
1199-
connectToDevice(); // Call the function to select and connect board
1200-
}}
1201-
>
1202-
Board Connect
1203-
</Button>
1204-
</PopoverContent>
1205-
)}
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>
12061182
</Popover>
12071183
</TooltipTrigger>
12081184
<TooltipContent>

0 commit comments

Comments
 (0)