Skip to content

Commit afaa95e

Browse files
author
Ritika Mishra
committed
done some changes to improve user interface
1 parent f52de68 commit afaa95e

File tree

3 files changed

+108
-54
lines changed

3 files changed

+108
-54
lines changed

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,10 +70,10 @@ Chords is an application based on Web Serial connection, you can connect [Compat
7070
- [X] **Raspberry Pi Pico Support**: Release Raspberry Pi Pico support for Chords. It works seamlessly with the new Heart BioAmp Candy. Share your favorite board in the comments, and we'll aim to include it in future updates.
7171
- [X] **Arduino Nano Support** Add support for Nano board which supports up to 8 channels.
7272

73-
- **User Interface** : Improved user inteface.
74-
- [X] **Channel Selection**: Visualize specific channels available in popover, 16-Channel Support Enabled based on hardware.
75-
- [X] **Zoom Slider**: Add support for the Arduino Giga R1 board with its 16-bit ADC, offering a range of 0 to 65,535.
76-
- [X] **Time-Base Slider**: Release Raspberry Pi Pico support for Chords. It works seamlessly with the new Heart BioAmp Candy. Share your favorite board in the comments, and we'll aim to include it in future updates.
73+
- **User Interface** : Improved user inteface by following changes:
74+
- [X] **Channel Selection**: Display the available channels in a popover, showing a total of 16 channels. However, the number of enabled channels will be based on the connected board.
75+
- [X] **Zoom Slider**: Adjust zoom to focus on data points or view an overall plot.
76+
- [X] **Time-Base Slider**: Customize the time duration for displaying data per frame, with options ranging from 1 to 10 seconds.
7777

7878
## Contributors
7979

‎src/components/Connection.tsx‎

Lines changed: 94 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,10 @@ const Connection: React.FC<ConnectionProps> = ({
110110
const isDarkMode = theme === "dark"; // Check if the theme is dark mode
111111
const canvasnumbersRef = useRef<number>(1);
112112
const maxCanvasCountRef = useRef<number>(1);
113+
// Inside your component
114+
const [isAllEnabledSelected, setIsAllEnabledSelected] = useState(false);
115+
const [initialSelection, setInitialSelection] = useState<number[]>([1, 3, 5]); // Example of initial selected channels
116+
113117
const readerRef = useRef<
114118
ReadableStreamDefaultReader<Uint8Array> | null | undefined
115119
>(null); // Ref to store the reader for the serial port
@@ -157,6 +161,28 @@ const Connection: React.FC<ConnectionProps> = ({
157161
}
158162
};
159163

164+
const handleSelectAllToggle = () => {
165+
const enabledChannels = Array.from({ length: maxCanvasCountRef.current }, (_, i) => i + 1);
166+
167+
if (!isAllEnabledSelected) {
168+
// Select all enabled channels
169+
enabledChannels.forEach((channel) => {
170+
if (!selectedChannels.includes(channel)) {
171+
toggleChannel(channel);
172+
}
173+
});
174+
} else {
175+
// Deselect all enabled channels and return to the initial state
176+
selectedChannels.forEach((channel) => {
177+
if (!initialSelection.includes(channel)) {
178+
toggleChannel(channel);
179+
}
180+
});
181+
}
182+
183+
// Toggle the state to indicate whether all channels are selected
184+
setIsAllEnabledSelected(!isAllEnabledSelected);
185+
};
160186
const toggleChannel = (channelIndex: number) => {
161187
setSelectedChannels((prevSelected) => {
162188
// Ensure at least one channel remains selected
@@ -198,7 +224,6 @@ const Connection: React.FC<ConnectionProps> = ({
198224
});
199225
};
200226

201-
202227
useEffect(() => {
203228
setSelectedChannels(selectedChannels);
204229
}, [selectedChannels]);
@@ -1248,7 +1273,7 @@ const Connection: React.FC<ConnectionProps> = ({
12481273
</div>
12491274
))
12501275
) : (
1251-
<p className="text-black ">No datasets available</p>
1276+
<p className="text-base ">No datasets available</p>
12521277
)}
12531278

12541279

@@ -1527,58 +1552,77 @@ const Connection: React.FC<ConnectionProps> = ({
15271552
<div className="flex items-center justify-center rounded-lg">
15281553
<div className="relative rounded-lg border border-gray-300 dark:border-gray-600 w-full p-4">
15291554
<div className="absolute inset-0 rounded-lg border-gray-300 dark:border-gray-600 opacity-50 pointer-events-none"></div>
1530-
<div id="button-container" className="relative space-y-2 border border-gray-300 rounded-lg">
1531-
{Array.from({ length: 2 }).map((_, row) => (
1532-
<div key={row} className="grid grid-cols-8 gap-0">
1533-
{Array.from({ length: 8 }).map((_, col) => {
1534-
const index = row * 8 + col;
1535-
const isChannelDisabled = index >= maxCanvasCountRef.current;
1536-
1537-
const buttonColors = [
1538-
"bg-custom-1", "bg-custom-2", "bg-custom-3", "bg-custom-4",
1539-
"bg-custom-5", "bg-custom-6", "bg-custom-7", "bg-custom-8",
1540-
"bg-custom-9", "bg-custom-10", "bg-custom-11", "bg-custom-12",
1541-
"bg-custom-13", "bg-custom-14", "bg-custom-15", "bg-custom-16"
1542-
];
1543-
1544-
const backgroundColorClass = buttonColors[index % buttonColors.length];
1545-
const buttonClass = isChannelDisabled
1546-
? isDarkMode
1547-
? "bg-gray-400 text-gray-500 cursor-not-allowed"
1548-
: "bg-gray-200 text-gray-400 cursor-not-allowed"
1549-
: selectedChannels.includes(index + 1)
1550-
? `${backgroundColorClass} text-white`
1551-
: "bg-white text-black hover:bg-gray-100";
1552-
1553-
const isFirstInRow = col === 0;
1554-
const isLastInRow = col === 7;
1555-
const isFirstInColumn = row === 0;
1556-
const isLastInColumn = row === 1;
1557-
1558-
// Adjust rounded corners for the four corners of the grid
1559-
const roundedClass = `${isFirstInRow && isFirstInColumn ? "rounded-tl-lg" : ""}
1560-
${isLastInRow && isFirstInColumn ? "rounded-tr-lg" : ""}
1561-
${isFirstInRow && isLastInColumn ? "rounded-bl-lg" : ""}
1562-
${isLastInRow && isLastInColumn ? "rounded-br-lg" : ""}`;
1563-
1564-
return (
1565-
<button
1566-
key={index}
1567-
onClick={() => !isChannelDisabled && toggleChannel(index + 1)}
1568-
disabled={isChannelDisabled || isRecordButtonDisabled}
1569-
className={`w-full h-8 text-xs font-medium py-1 border border-gray-200 transition-colors duration-200 ${buttonClass} ${roundedClass}`}
1570-
>
1571-
{`CH${index + 1}`}
1572-
</button>
1573-
);
1574-
})}
1575-
</div>
1576-
))}
1577-
</div>
1555+
<div className="relative">
1556+
{/* Heading and Select All Button */}
1557+
<div className="flex items-center justify-between mb-4">
1558+
<h3 className="text-sm font-semibold text-gray-700">
1559+
Channels Count: {selectedChannels.length}
1560+
</h3>
1561+
<button
1562+
onClick={handleSelectAllToggle}
1563+
className="px-3 py-1 text-sm font-medium text-white bg-black dark:text-black rounded-lg hover:bg-gray-700 dark:bg-white dark:border dark:border-gray-500 dark:hover:bg-primary/70 transition"
1564+
>
1565+
{isAllEnabledSelected ? "Deselect All" : "Select All "}
1566+
</button>
1567+
</div>
15781568

1569+
{/* Button Grid */}
1570+
<div id="button-container" className="relative space-y-2 rounded-lg">
1571+
{Array.from({ length: 2 }).map((_, container) => (
1572+
<div
1573+
key={container}
1574+
className={`grid grid-cols-8 gap-0 ${container === 0 ? "border-b border-gray-300" : ""}`}
1575+
>
1576+
{Array.from({ length: 8 }).map((_, col) => {
1577+
const index = container * 8 + col;
1578+
const isChannelDisabled = index >= maxCanvasCountRef.current;
1579+
1580+
const buttonColors = [
1581+
"bg-custom-1", "bg-custom-2", "bg-custom-3", "bg-custom-4",
1582+
"bg-custom-5", "bg-custom-6", "bg-custom-7", "bg-custom-8",
1583+
"bg-custom-9", "bg-custom-10", "bg-custom-11", "bg-custom-12",
1584+
"bg-custom-13", "bg-custom-14", "bg-custom-15", "bg-custom-16",
1585+
];
1586+
1587+
const backgroundColorClass = buttonColors[index % buttonColors.length];
1588+
const buttonClass = isChannelDisabled
1589+
? isDarkMode
1590+
? "bg-[#030c21] text-gray-700 cursor-not-allowed"
1591+
: "bg-gray-200 text-gray-400 cursor-not-allowed"
1592+
: selectedChannels.includes(index + 1)
1593+
? `${backgroundColorClass} text-white`
1594+
: "bg-white text-black hover:bg-gray-100";
1595+
1596+
const isFirstInRow = col === 0;
1597+
const isLastInRow = col === 7;
1598+
const isFirstContainer = container === 0;
1599+
const isLastContainer = container === 1;
1600+
1601+
// Adjust rounded corners for each container individually
1602+
const roundedClass = `${isFirstInRow && isFirstContainer ? "rounded-tl-lg" : ""}
1603+
${isLastInRow && isFirstContainer ? "rounded-tr-lg" : ""}
1604+
${isFirstInRow && isLastContainer ? "rounded-bl-lg" : ""}
1605+
${isLastInRow && isLastContainer ? "rounded-br-lg" : ""}`;
1606+
1607+
return (
1608+
<button
1609+
key={index}
1610+
onClick={() => !isChannelDisabled && toggleChannel(index + 1)}
1611+
disabled={isChannelDisabled || isRecordButtonDisabled}
1612+
className={`w-full h-8 text-xs font-medium py-1 border-[0.3px] border-gray-300 dark:border-gray-600 transition-colors duration-200 ${buttonClass} ${roundedClass}`}
1613+
>
1614+
{`CH${index + 1}`}
1615+
</button>
1616+
);
1617+
})}
1618+
</div>
1619+
))}
1620+
</div>
1621+
</div>
15791622
</div>
15801623
</div>
15811624

1625+
15821626
{/* Zoom Controls */}
15831627
<div className="relative w-full flex flex-col items-start mt-3">
15841628
<p className="absolute top-[-1.2rem] left-0 text-[0.50rem] font-semibold text-gray-500">

‎src/components/boards.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,16 @@ export const BoardsList = Object.freeze([
6969
serial_timeout: 2000,
7070
baud_Rate: 115200
7171
},
72+
{
73+
chords_id: "UNO-CLONE",
74+
device_name: "Maker UNO / UNO Clone",
75+
field_pid: 32832,
76+
adc_resolution: 10,
77+
channel_count: 6,
78+
sampling_rate: 250,
79+
serial_timeout: 2000,
80+
baud_Rate: 115200
81+
},
7282
{
7383
chords_id: "RPI-PICO-RP2040",
7484
device_name: "Raspberry Pi Pico",

0 commit comments

Comments
 (0)