Skip to content

Commit 538bd94

Browse files
AmanmaheAmanmahe
committed
added install feature
1 parent 77d5fcd commit 538bd94

File tree

5 files changed

+158
-8
lines changed

5 files changed

+158
-8
lines changed

‎public/chords logo (192x192 px).png‎

11 KB
Loading

‎public/chords logo (512x512 px).png‎

32.3 KB
Loading

‎public/manifest.json‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "Chords",
3+
"short_name": "Chords",
4+
"start_url": "/Chords-Web/",
5+
"display": "standalone",
6+
"icons": [
7+
{
8+
"src": "/Chords-Web/chords logo (192x192 px).png",
9+
"sizes": "192x192",
10+
"type": "image/png"
11+
},
12+
{
13+
"src": "/Chords-Web/chords logo (512x512 px).png",
14+
"sizes": "512x512",
15+
"type": "image/png"
16+
}
17+
],
18+
"screenshots": [
19+
{
20+
"src": "/Chords-Web/screenshot-chords.png",
21+
"sizes": "1280x720",
22+
"type": "image/png",
23+
"form_factor": "wide"
24+
}
25+
]
26+
}
27+

‎public/screenshot-chords.png‎

172 KB
Loading

‎src/components/Connection.tsx‎

Lines changed: 131 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ const Connection: React.FC<ConnectionProps> = ({
9696

9797
// States and Refs for Connection & Recording
9898
const [isDeviceConnected, setIsDeviceConnected] = useState<boolean>(false); // Track if the device is connected
99+
const [FFTDeviceConnected, setFFTDeviceConnected] = useState<boolean>(false); // Track if the device is connected
99100
const isDeviceConnectedRef = useRef<boolean>(false); // Ref to track if the device is connected
100101
const isRecordingRef = useRef<boolean>(false); // Ref to track if the device is recording
101102

@@ -775,9 +776,7 @@ const Connection: React.FC<ConnectionProps> = ({
775776
baudRate = board ? board.baud_Rate : 0;
776777
serialTimeout = board ? board.serial_timeout : 0;
777778
await port.open({ baudRate });
778-
setIsLoading(true);
779779
} else {
780-
setIsLoading(true);
781780
const info = port.getInfo();
782781
const savedDevice = savedPorts.find(
783782
(saved: SavedDevice) => saved.usbProductId === info.usbProductId
@@ -878,7 +877,7 @@ const Connection: React.FC<ConnectionProps> = ({
878877
setSelectedChannels(initialSelectedChannelsRef.current);
879878
FFT(true);
880879
setIsDeviceConnected(true);
881-
onPauseChange(true);
880+
setFFTDeviceConnected(true);
882881
setIsDisplay(true);
883882
setCanvasCount(1);
884883
isDeviceConnectedRef.current = true;
@@ -895,7 +894,6 @@ const Connection: React.FC<ConnectionProps> = ({
895894
console.error("Error connecting to device:", error);
896895
toast.error("Failed to connect to device.");
897896
}
898-
setIsLoading(false);
899897
};
900898

901899

@@ -960,6 +958,7 @@ const Connection: React.FC<ConnectionProps> = ({
960958
}
961959
portRef.current = null;
962960
setIsDeviceConnected(false); // Update connection state
961+
setFFTDeviceConnected(false);
963962
FFT(false);
964963
toast("Disconnected from device", {
965964
action: {
@@ -1340,7 +1339,7 @@ const Connection: React.FC<ConnectionProps> = ({
13401339
Serial Wizard
13411340
</Button>
13421341
)}
1343-
{!isDeviceConnected && (
1342+
{!isDeviceConnected && (
13441343
<Button
13451344
className="py-2 px-4 rounded-xl font-semibold"
13461345
onClick={() => (isDeviceConnected ? disconnectDevice() : connectToDevicefft())}
@@ -1359,7 +1358,7 @@ const Connection: React.FC<ConnectionProps> = ({
13591358

13601359

13611360
{/* Display (Play/Pause) button with tooltip */}
1362-
{isDeviceConnected && (
1361+
{isDeviceConnected && !FFTDeviceConnected && (
13631362
<div className="flex items-center gap-0.5 mx-0 px-0">
13641363
<Button
13651364
className="rounded-xl rounded-r-none"
@@ -1494,7 +1493,7 @@ const Connection: React.FC<ConnectionProps> = ({
14941493
</div>
14951494
</TooltipProvider>
14961495
)}
1497-
{isDeviceConnected && (
1496+
{isDeviceConnected && !FFTDeviceConnected && (
14981497
<Popover
14991498
open={isFilterPopoverOpen}
15001499
onOpenChange={setIsFilterPopoverOpen}
@@ -1730,7 +1729,131 @@ const Connection: React.FC<ConnectionProps> = ({
17301729
</Popover>
17311730
)}
17321731

1733-
{isDeviceConnected && (
1732+
{FFTDeviceConnected && (
1733+
<Popover open={isFilterPopoverOpen} onOpenChange={setIsFilterPopoverOpen}>
1734+
<PopoverTrigger asChild>
1735+
<Button
1736+
className="flex items-center justify-center px-3 py-2 select-none min-w-12 whitespace-nowrap rounded-xl"
1737+
disabled={!isDisplay}
1738+
>
1739+
Filter
1740+
</Button>
1741+
</PopoverTrigger>
1742+
<PopoverContent className="w-50 p-4 mx-4 mb-2">
1743+
<div className="flex flex-col max-h-80 overflow-y-auto">
1744+
<div className="flex items-center">
1745+
<div className="text-sm font-semibold w-12">{channelNames[0]}</div>
1746+
<div className="flex space-x-2">
1747+
<div className="flex border border-input rounded-xl items-center mx-0 px-0">
1748+
<Button
1749+
variant="outline"
1750+
size="sm"
1751+
onClick={() => removeEXGFilter(0)}
1752+
className={`rounded-xl rounded-r-none border-l-none border-0
1753+
${appliedEXGFiltersRef.current[0] === undefined
1754+
? "bg-red-700 hover:bg-white-500 hover:text-white text-white" // Disabled background
1755+
: "bg-white-500" // Active background
1756+
}`}
1757+
>
1758+
<CircleOff size={17} />
1759+
</Button>
1760+
<Button
1761+
variant="outline"
1762+
size="sm"
1763+
onClick={() => handleFrequencySelectionEXG(0, 4)}
1764+
className={`flex items-center justify-center px-3 py-2 rounded-none select-none border-0
1765+
${appliedEXGFiltersRef.current[0] === 4
1766+
? "bg-green-700 hover:bg-white-500 text-white hover:text-white" // Disabled background
1767+
: "bg-white-500" // Active background
1768+
}`}
1769+
>
1770+
<BicepsFlexed size={17} />
1771+
</Button>
1772+
<Button
1773+
variant="outline"
1774+
size="sm"
1775+
onClick={() => handleFrequencySelectionEXG(0, 3)}
1776+
className={`flex items-center justify-center px-3 py-2 rounded-none select-none border-0
1777+
${appliedEXGFiltersRef.current[0] === 3
1778+
? "bg-green-700 hover:bg-white-500 text-white hover:text-white" // Disabled background
1779+
: "bg-white-500" // Active background
1780+
}`}
1781+
>
1782+
<Brain size={17} />
1783+
</Button>
1784+
<Button
1785+
variant="outline"
1786+
size="sm"
1787+
onClick={() => handleFrequencySelectionEXG(0, 1)}
1788+
className={`flex items-center justify-center px-3 py-2 rounded-none select-none border-0
1789+
${appliedEXGFiltersRef.current[0] === 1
1790+
? "bg-green-700 hover:bg-white-500 text-white hover:text-white" // Disabled background
1791+
: "bg-white-500" // Active background
1792+
}`}
1793+
>
1794+
<Heart size={17} />
1795+
</Button>
1796+
<Button
1797+
variant="outline"
1798+
size="sm"
1799+
onClick={() => handleFrequencySelectionEXG(0, 2)}
1800+
className={`rounded-xl rounded-l-none border-0
1801+
${appliedEXGFiltersRef.current[0] === 2
1802+
? "bg-green-700 hover:bg-white-500 text-white hover:text-white" // Disabled background
1803+
: "bg-white-500" // Active background
1804+
}`}
1805+
>
1806+
<Eye size={17} />
1807+
</Button>
1808+
</div>
1809+
<div className="flex border border-input rounded-xl items-center mx-0 px-0">
1810+
<Button
1811+
variant="outline"
1812+
size="sm"
1813+
onClick={() => removeNotchFilter(0)}
1814+
className={`rounded-xl rounded-r-none border-0
1815+
${appliedFiltersRef.current[0] === undefined
1816+
? "bg-red-700 hover:bg-white-500 hover:text-white text-white" // Disabled background
1817+
: "bg-white-500" // Active background
1818+
}`}
1819+
>
1820+
<CircleOff size={17} />
1821+
</Button>
1822+
<Button
1823+
variant="outline"
1824+
size="sm"
1825+
onClick={() => handleFrequencySelection(0, 1)}
1826+
className={`flex items-center justify-center px-3 py-2 rounded-none select-none border-0
1827+
${appliedFiltersRef.current[0] === 1
1828+
? "bg-green-700 hover:bg-white-500 text-white hover:text-white" // Disabled background
1829+
: "bg-white-500" // Active background
1830+
}`}
1831+
>
1832+
50Hz
1833+
</Button>
1834+
<Button
1835+
variant="outline"
1836+
size="sm"
1837+
onClick={() => handleFrequencySelection(0, 2)}
1838+
className={
1839+
`rounded-xl rounded-l-none border-0 ${appliedFiltersRef.current[0] === 2
1840+
? "bg-green-700 hover:bg-white-500 text-white hover:text-white "
1841+
: "bg-white-500 animate-fade-in-right"
1842+
}`
1843+
}
1844+
>
1845+
60Hz
1846+
</Button>
1847+
</div>
1848+
</div>
1849+
</div>
1850+
1851+
</div>
1852+
</PopoverContent>
1853+
</Popover>
1854+
)}
1855+
1856+
{isDeviceConnected && !FFTDeviceConnected && (
17341857
<Popover>
17351858
<PopoverTrigger asChild>
17361859
<Button className="flex items-center justify-center select-none whitespace-nowrap rounded-lg">

0 commit comments

Comments
 (0)