Skip to content

Commit

Permalink
Merge pull request #52 from Amanmahe/Chords-UI
Browse files Browse the repository at this point in the history 
Updated UI elements and improved data pLotting
  • Loading branch information
@lorforlinux
lorforlinux authored Oct 23, 2024
2 parents 630a671 + 0e223ed commit caa1b98
Show file tree
Hide file tree
Showing 9 changed files with 134 additions and 90 deletions.
17 changes: 17 additions & 0 deletions src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;

/* background color for canvas page */
--highlight: 0 0% 100%; /* Light mode: white color */
--gray-light: 0 0% 95%; /* Light mode: gray-100 */


--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;

Expand Down Expand Up @@ -38,6 +43,9 @@
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;

--highlight: 222.2 84% 4.9%; /* Dark mode: light gray */
--gray-light: 222.2 84% 7%; /* Dark mode: dark gray */

--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
Expand Down Expand Up @@ -81,6 +89,15 @@
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.bg-highlight {
background-color: hsl(var(--highlight));
}
.bg-g {
background-color: hsl(var(--gray-light));
}
.border-g {
border-color: hsl(var(--gray-light));
}
}

.loader {
Expand Down
125 changes: 89 additions & 36 deletions src/components/Canvas.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@ const Canvas = forwardRef(
const [lines, setLines] = useState<WebglLine[]>([]);
const linesRef = useRef<WebglLine[]>([]);
const samplingRate = 500; // Set the sampling rate in Hz

const sweepPositions = useRef<number[]>(new Array(6).fill(0)); // Array for sweep positions
const currentSweepPos = useRef<number[]>(new Array(6).fill(0)); // Array for sweep positions
let numX: number;

const getpoints = useCallback((bits: BitSelection): number => {
Expand All @@ -64,6 +65,11 @@ const Canvas = forwardRef(
ref,
() => ({
updateData(data: number[]) {
// Reset the sweep positions if the number of channels has changed
if (currentSweepPos.current.length !== numChannels) {
currentSweepPos.current = new Array(numChannels).fill(0);
sweepPositions.current = new Array(numChannels).fill(0);
}
updatePlots(data, Zoom);
if (previousCounter !== null) {
// If there was a previous counter value
Expand All @@ -78,9 +84,34 @@ const Canvas = forwardRef(
previousCounter = data[6]; // Update the previous counter with the current counter
},
}),
[Zoom]
[Zoom, numChannels]
);


// //
// updateGrid();

// function addGridLine(coords: Float32Array) {
// const color = new ColorRGBA(0.5, 0.5, 0.5, 1);
// const line = new WebglLine(color, 2);
// line.xy = coords;
// wglp.addLine(line);
// }
// function updateGrid(): void {
// wglp.removeAllLines();
// wglp.addLine(lineMain);
// const ngX = 5;
// const ngY = 5;
// for (let i = 0; i < ngX; i++) {
// const divPoint = (2 * i) / (ngX - 1) - 1;
// addGridLine(new Float32Array([divPoint, -1, divPoint, 1]));
// }
// for (let i = 0; i < ngY; i++) {
// const divPoint = (2 * i) / (ngY - 1) - 1;
// addGridLine(new Float32Array([-1, divPoint, 1, divPoint]));
// }
// }

const createCanvases = () => {
if (!canvasContainerRef.current) return;

Expand All @@ -105,42 +136,56 @@ const Canvas = forwardRef(
const newCanvases = [];
const newWglPlots = [];
const newLines = [];
for (let i = 0; i < numChannels; i++) {
for (let i = 0; i < numChannels; i++) {
const canvasWrapper = document.createElement("div");
canvasWrapper.className = "canvas-container border-b border-gray-300 flex-[1_1_0%] min-h-0";
canvasWrapper.className = "canvas-container flex-[1_1_0%] ";//border-b border-gray-300

const canvas = document.createElement("canvas");
canvas.id = `canvas${i + 1}`;


canvas.width = canvasContainerRef.current.clientWidth;

const canvasHeight = canvasContainerRef.current.clientHeight / numChannels;
console.log(canvasHeight);
canvas.height = canvasHeight;

canvas.className = "w-full h-full block";

canvas.width = canvasContainerRef.current.clientWidth*2;

const canvasHeight = (canvasContainerRef.current.clientHeight / numChannels)*2;
canvas.height = canvasHeight;
canvas.className = "w-full h-full block rounded-2xl";

// Create a badge for the channel number
const badge = document.createElement("div");
badge.className =
"absolute top-240 left-1 text-gray-500 text-sm rounded-full p-1"; // Set absolute positioning and styles
"absolute text-gray-500 text-sm rounded-full p-2 m-2"; // Set absolute positioning and styles
badge.innerText = `CH${i + 1}`;

// Append the canvas and badge to the container

canvasWrapper.appendChild(badge);
canvasWrapper.appendChild(canvas);
canvasContainerRef.current.appendChild(canvasWrapper);
newCanvases.push(canvas);
const wglp = new WebglPlot(canvas);
newWglPlots.push(wglp);
wglp.gScaleY = Zoom;
const line = new WebglLine(getRandomColor(i,theme), numX);
const line = new WebglLine(getRandomColor(i, theme), numX);
wglp.gOffsetY = 0;
line.offsetY = 0;
line.lineSpaceX(-1, 2 / numX);

//grid
// const ngX = 5;
// const ngY = 5;
// for (let i = 0; i < ngX; i++) {
// const divPoint = (2 * i) / (ngX - 1) - 1;
// const color = new ColorRGBA(0.5, 0.5, 0.5, 1);
// const line = new WebglLine(color, 2);
// const coords = new Float32Array([divPoint, -1, divPoint, 1])
// line.xy = coords;
// wglp.addLine(line);;
// }
// for (let i = 0; i < ngY; i++) {
// const divPoint = (2 * i) / (ngY - 1) - 1;
// const color = new ColorRGBA(0.5, 0.5, 0.5, 1);
// const line = new WebglLine(color, 2);
// const coords = new Float32Array([divPoint, -1, divPoint, 1])
// line.xy = coords;
// wglp.addLine(line);
// }
wglp.addLine(line);
newLines.push(line);
}
Expand All @@ -151,7 +196,7 @@ const Canvas = forwardRef(
setLines(newLines);
};

const getRandomColor = (i: number,theme:string| undefined): ColorRGBA => {
const getRandomColor = (i: number, theme: string | undefined): ColorRGBA => {
// Define bright colors
const colorsDark: ColorRGBA[] = [
new ColorRGBA(1, 0.286, 0.529, 1), // Bright Pink
Expand All @@ -168,22 +213,23 @@ const Canvas = forwardRef(
new ColorRGBA(0.404, 0.255, 0.533, 1), // #674188 - Bright Purple
new ColorRGBA(0.902, 0.361, 0.098, 1), // #E65C19 - Bright Orange
new ColorRGBA(0.180, 0.027, 0.247, 1), // #2E073F - Dark Purple
];
];


// Return color based on the index, cycling through if necessary
// return colors[i % colors.length]; // Ensure to always return a valid ColorRGBA
return theme === "dark"
? colorsDark[i % colorsDark.length]
: colorsLight[i % colorsLight.length];
? colorsDark[i % colorsDark.length]
: colorsLight[i % colorsLight.length];
};

const updatePlots = useCallback(
(data: number[], Zoom: number) => {

wglPlots.forEach((wglp, index) => {
if (wglp) {
try {
wglp.gScaleY = Zoom; // Adjust this value as needed
wglp.gScaleY = Zoom; // Adjust the zoom value
} catch (error) {
console.error(
`Error setting gScaleY for WebglPlot instance at index ${index}:`,
Expand All @@ -194,24 +240,31 @@ const Canvas = forwardRef(
console.warn(`WebglPlot instance at index ${index} is undefined.`);
}
});

linesRef.current.forEach((line, i) => {
// Shift the data points efficiently using a single operation
const bitsPoints = Math.pow(2, getValue(selectedBits)); // Adjust this according to your ADC resolution
const bitsPoints = Math.pow(2, getValue(selectedBits)); // Adjust according to your ADC resolution
const yScale = 2 / bitsPoints;
const chData = (data[i] - bitsPoints / 2) * yScale;

for (let j = 1; j < line.numPoints; j++) {
line.setY(j - 1, line.getY(j));
}
line.setY(line.numPoints - 1, chData);
// Use a separate sweep position for each line
currentSweepPos.current[i] = sweepPositions.current[i];
// Plot the new data at the current sweep position
line.setY(currentSweepPos.current[i] % line.numPoints, chData);

// Clear the next point to create a gap (optional, for visual effect)
const clearPosition = (currentSweepPos.current[i] + (numX/100)) % line.numPoints;
line.setY(clearPosition, NaN);

// Increment the sweep position for the current line
sweepPositions.current[i] = (currentSweepPos.current[i] + 1) % line.numPoints;
});
},
[lines, wglPlots]
); // Add dependencies here
[lines, wglPlots, numChannels, theme]
);

useEffect(() => {
createCanvases();
}, [numChannels,theme]);
}, [numChannels, theme]);

const getValue = useCallback((bits: BitSelection): number => {
switch (bits) {
Expand Down Expand Up @@ -252,8 +305,8 @@ const Canvas = forwardRef(
}, [createCanvases]);

return (
<main className="flex flex-col flex-[1_1_0%] min-h-0 "
ref={canvasContainerRef}
<main className="flex flex-col flex-[1_1_0%] min-h-100 bg-highlight rounded-2xl m-4"
ref={canvasContainerRef}
>
</main>
);
Expand Down
15 changes: 8 additions & 7 deletions src/components/Connection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -736,14 +736,15 @@ const Connection: React.FC<ConnectionProps> = ({
};
// bg-gray-100 text-white p-2 flex-none flex items-center justify-center
return (
<div className="flex-none items-center justify-center ">
<div className="flex-none items-center justify-center pb-4 bg-g">
{/* Left-aligned section */}
<div className="absolute left-4 flex items-center space-x-1">
<div className="absolute left-4 flex items-center mx-0 px-0 space-x-1">
{isRecordingRef.current && (
<div className="flex items-center space-x-1 w-min ml-2">
<div className="font-medium p-2 w-16 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors bg-primary text-destructive hover:bg-primary/90">
<button className="flex items-center justify-center px-3 py-2 select-none min-w-20 bg-primary text-destructive whitespace-nowrap rounded"
>
{formatTime(elapsedTime)}
</div>
</button>
<Separator orientation="vertical" className="bg-primary h-9 ml-2" />
<div>
<Popover
Expand All @@ -752,7 +753,7 @@ const Connection: React.FC<ConnectionProps> = ({
>
<PopoverTrigger asChild>
<Button
className="text-lg w-16 h-9 font-medium p-2"
className="flex items-center justify-center px-3 py-2 select-none min-w-12 text-destructive whitespace-nowrap rounded"
variant="destructive"
>
{endTimeRef.current === null ? (
Expand Down Expand Up @@ -863,7 +864,7 @@ const Connection: React.FC<ConnectionProps> = ({
<Tooltip>
<TooltipTrigger asChild>
<Button
className="flex items-center justify-center px-3 py-2 m-1 rounded-none select-none"
className="flex items-center justify-center px-3 py-2 rounded-none select-none min-w-12"
onClick={toggleZoom}
disabled={!isDisplay}
>
Expand Down Expand Up @@ -1036,7 +1037,7 @@ const Connection: React.FC<ConnectionProps> = ({
<Tooltip>
<TooltipTrigger asChild>
<Button
className="flex items-center justify-center px-3 py-2 m-1 rounded-none select-none"
className="flex items-center justify-center px-3 py-2 rounded-none select-none"
onClick={toggleShowAllChannels}
disabled={!isDisplay || recData}
>
Expand Down
4 changes: 3 additions & 1 deletion src/components/DataPass.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,10 @@ const DataPass = () => {
previousCounter =data[6]; // Update the previous counter with the current counter
}, []);
return (
<div className="flex flex-col h-screen m-0 p-0">
<div className="flex flex-col h-screen m-0 p-0 bg-g ">
<div className="bg-highlight">
<Navbar isDisplay={isDisplay} />
</div>
{isConnected ? (
<Canvas
pauseRef={pauseRef}
Expand Down
2 changes: 1 addition & 1 deletion src/components/LandingComp/FAQSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ const FAQSection = () => {
example : [468, 472, 463, 466, 465, 434, 10]. For implementation
details, see our{" "}
<Link
href="https://github.com/upsidedownlabs/Chords-Web/blob/main/ArduinoFirmware/ArduinoFirmware.ino"
href="https://github.com/upsidedownlabs/Chords-Arduino-Firmware"
target="_blank"
rel="noopener noreferrer"
className="text-blue-500 hover:underline underline-offset-4"
Expand Down
2 changes: 1 addition & 1 deletion src/components/LandingComp/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Link from "next/link";
import Chords from "./Chords";
const Footer = () => {
return (
<footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-16 border-t">
<footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-2 md:px-4 border-t">
<p className="text-sm text-muted-foreground">
<Chords /> | &copy; {new Date().getFullYear()}{" "}
<Link href="https://upsidedownlabs.tech/" target="_blank">
Expand Down
2 changes: 1 addition & 1 deletion src/components/LandingComp/Steps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {

const Steps = () => {
return (
<section className="w-full py-6 md:py-12 lg:py-16 mb-4">
<section className="flex flex-col">
<div className="container grid items-center justify-center px-4 text-center md:px-6 lg:gap-6 max-w-7xl"> {/* Ensured max-w is the same */}
<div className="space-y-4">
<h2 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl pb-8">
Expand Down
4 changes: 2 additions & 2 deletions src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ const Navbar = ({ isDisplay }: { isDisplay: boolean }) => {

return (
<div>
<div className="top-0 md:left-0 md:right-0 flex backdrop-blur-sm justify-center py-[10px] border-b items-center font-bold z-50">
<div className="flex w-full max-w-screen mx-4 md:mx-16 justify-between items-center">
<div className="top-0 md:left-0 md:right-0 flex backdrop-blur-sm justify-center py-[10px] border-b border-g items-center font-bold z-50">
<div className="flex w-full max-w-screen mx-2 md:mx-4 justify-between items-center">
<div className="flex flex-row gap-2 items-center group">
<Link href="/">
<div className="font-rancho font-bold text-2xl duration-300 bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 text-transparent bg-clip-text ">
Expand Down
Loading

0 comments on commit caa1b98

Please sign in to comment.