some ui for #13

Assets/web/src/App.js

@@ -53,53 +53,66 @@ function App() {
       <div className="grid grid-cols-3 gap-2 items-start">
         {/* Left Column */}
         <div className="border border-[#2a2a2a] rounded-lg p-4">
-          <div className="grid grid-cols-2 grid-rows-2 gap-4 items-end">
-            <div>
-              <JuceSlider identifier="harmonyMix" title="Mix" />
-            </div>
-            <div>
-              <JuceSlider identifier="formantPreserve" title="Formant" />
-            </div>
-            <div>
-              <JuceSlider identifier="portTime" title="Portamento Speed" />
-            </div>
-            <div>
-              <JuceSlider identifier="panWidth" title="Pan Width" />
-            </div>
-          </div>
-        </div>
-
-        <div className="border border-[#2a2a2a] rounded-lg p-4">
-          <div className="grid grid-cols-2 grid-rows-2 gap-4 items-end ">
-            <div className="col-span-2">
-              <div className="grid grid-rows-2 self-center flex justify-center items-start">
-                <div className="self-center justify-center items-center flex">
-                  <JuceCheckbox identifier="autoTuneEnabled" />
-                </div>
-                <div className="mt-1">
-                  <AutoTuneInfo />
-                </div>
+          <div className="flex flex-col gap-4">
+            <div className="flex items-center justify-center">
+              <div>
+                <JuceSlider identifier="harmonyMix" title="Mix" />
+              </div>
+              <div>
+                <JuceSlider identifier="formantPreserve" title="Formant" />
               </div>
             </div>
-            <div>
-              <JuceSlider identifier="autoTuneSpeed" title="Auto Tune Speed" />
-            </div>
-            <div>
-              <JuceSlider identifier="autoTuneDepth" title="Auto Tune Depth" />
+            <div className="flex items-center justify-center mt-[45px]">
+              <div>
+                <JuceSlider identifier="portTime" title="Portamento Speed" />
+              </div>
+              <div>
+                <JuceSlider identifier="panWidth" title="Pan Width" />
+              </div>
             </div>
           </div>
         </div>
 
         <div className="border border-[#2a2a2a] rounded-lg p-4">
-          <div className="grid grid-cols-2 grid-rows-2 gap-4 items-end">
-            <div className="mt-0 pt-0 col-span-2 self-start flex justify-center ">
+          <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-2 items-center">
+              <div className="self-center justify-center items-center flex">
+                <JuceCheckbox identifier="autoTuneEnabled" />
+              </div>
+              <div className="mt-0 w-full">
+                <AutoTuneInfo />
+              </div>
+            </div>
+            <div className="grid grid-cols-2 grid-rows-1 gap-4">
+              <div>
+                <JuceSlider
+                  identifier="autoTuneSpeed"
+                  title="Auto Tune Speed"
+                />
+              </div>
+              <div>
+                <JuceSlider
+                  identifier="autoTuneDepth"
+                  title="Auto Tune Depth"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="border border-[#2a2a2a] rounded-lg p-4">
+          <div className="flex flex-col gap-4 items-center justify-center">
+            <div className="mt-0 pt-0 flex items-center justify-center ">
               <JuceCheckbox identifier="freezeEnabled" />
             </div>
-            <div>
-              <JuceSlider identifier="freezePitch" title="Freeze Pitch" />
-            </div>
-            <div>
-              <JuceSlider identifier="freezeVolume" title="Freeze Volume" />
+
+            <div className="flex items-center justify-center mt-[100px]">
+              <div>
+                <JuceSlider identifier="freezePitch" title="Freeze Pitch" />
+              </div>
+              <div>
+                <JuceSlider identifier="freezeVolume" title="Freeze Volume" />
+              </div>
             </div>
           </div>
         </div>

Assets/web/src/Components/AutoTuneInfo.js

@@ -2,6 +2,7 @@
 import React, { useState, useEffect, useRef } from "react";
 import CenterGrowSlider from "./CenterGrowSlider.js";
 import AutoTuneDataReceiver from "../DataRecievers/AutoTuneDataReceiver.js";
+import PianoKeyboard from "./PianoKeyboard.js";
 // import { Slider } from "@mui/material";
 // import { styled } from "@mui/material/styles";
 
@@ -11,6 +12,8 @@ export default function AutoTuneInfo() {
   const [inputCents, setInputCents] = useState(0);
   const [outputCents, setOutputCents] = useState(0);
   const [autotuneNote, setAutotuneNote] = useState(0);
+  const [showPopup, setShowPopup] = useState(false);
+  const [autoTuneKey, setAutoTuneKey] = useState("");
   const dataReceiverRef = useRef(null);
   const isActiveRef = useRef(true);
 
@@ -56,19 +59,73 @@ export default function AutoTuneInfo() {
   }, []);
 
   return (
-    <div className="flex">
-      <h1
-        className="w-8 flex-initial py-2 px-1 text-xl"
-        style={{ color: "#666" }}
-      >
-        {getCharfromNoteIndex(autotuneNote)}
-      </h1>
-      <div className=" py-2 px-1 flex-1">
-        <div className="py-1">
-          <CenterGrowSlider value={inputCents} />
+    <div className="p-0 flex flex-col gap-1">
+      <div className="flex">
+        <h1
+          className="w-8 flex-initial py-2 px-1 text-xl"
+          style={{ color: "#666" }}
+        >
+          {getCharfromNoteIndex(autotuneNote)}
+        </h1>
+        <div className=" py-2 px-1 flex-1">
+          <div className="py-1">
+            <CenterGrowSlider value={inputCents} />
+          </div>
+          <div className="py-1">
+            <CenterGrowSlider value={outputCents} />
+          </div>
         </div>
-        <div className="py-1">
-          <CenterGrowSlider value={outputCents} />
+      </div>
+      <div className="flex justify-start items-center">
+        <select
+          value={autoTuneKey}
+          className="select-none w-10 h-10 rounded px-2 bg-[#262626] text-[#eee]"
+          onChange={(e) => {
+            //send stuff to plugin here
+            setAutoTuneKey("");
+          }}
+          aria-label="Select note"
+          style={{
+            appearance: "none",
+            WebkitAppearance: "none",
+            textAlign: "center",
+            border: "none",
+            outline: "none",
+          }}
+        >
+          <option value="" disabled hidden style={{ textAlign: "center" }}>
+            ...
+          </option>
+          {[
+            "C",
+            "C♯",
+            "D",
+            "D♯",
+            "E",
+            "F",
+            "F♯",
+            "G",
+            "G♯",
+            "A",
+            "A♯",
+            "B",
+          ].map((key, idx) => (
+            <option
+              key={key}
+              value={idx}
+              style={{ textAlign: "start", border: "none", outline: "none" }}
+            >
+              {key}
+            </option>
+          ))}
+        </select>
+        <div className="h-[40px] w-[85%] self-end px-1">
+          <PianoKeyboard
+            heldNotes={[]}
+            LOWEST_MIDI={0}
+            HIGHEST_MIDI={11}
+            showNoteNames={false}
+          />
         </div>
       </div>
     </div>

Assets/web/src/Components/MidiNoteInfo.js

@@ -31,8 +31,8 @@ export default function MidiNoteInfo() {
   }, []);
 
   return (
-    <div className="rounded-lg" style={{ marginTop: "1rem" }}>
-      <PianoKeyboard heldNotes={notes} />
+    <div className="rounded-lg h-[80px]" style={{ marginTop: "1rem" }}>
+      <PianoKeyboard heldNotes={notes} LOWEST_MIDI={24} HIGHEST_MIDI={84} />
     </div>
   );
 }

Assets/web/src/Components/PianoKeyboard.js

@@ -17,8 +17,8 @@ const NOTE_NAMES = [
 const WHITE_KEYS = [0, 2, 4, 5, 7, 9, 11];
 
 // C2 = 36, C5 = 72
-const LOWEST_MIDI = 24;
-const HIGHEST_MIDI = 84;
+// const LOWEST_MIDI = 24;
+// const HIGHEST_MIDI = 84;
 
 function getNoteName(midi) {
   const octave = Math.floor(midi / 12) - 1;
@@ -30,7 +30,12 @@ function isWhiteKey(midi) {
   return WHITE_KEYS.includes(midi % 12);
 }
 
-export default function PianoKeyboard({ heldNotes }) {
+export default function PianoKeyboard({
+  heldNotes,
+  LOWEST_MIDI,
+  HIGHEST_MIDI,
+  showNoteNames = true,
+}) {
   const heldMap = {};
   heldNotes.forEach((n) => (heldMap[n.midi] = n.voice));
 
@@ -78,11 +83,9 @@ export default function PianoKeyboard({ heldNotes }) {
     <div
       style={{
         position: "relative",
-        height: 80,
+        height: "100%",
         userSelect: "none",
         width: "100%",
-        minWidth: 200,
-        maxWidth: 900,
         margin: "0 auto",
       }}
     >
@@ -123,28 +126,30 @@ export default function PianoKeyboard({ heldNotes }) {
               borderBottomRightRadius: i === whiteKeys.length - 1 ? 6 : 0,
             }}
           >
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column-reverse",
-                alignItems: "center",
-              }}
-            >
-              <span style={{ color: "#555" }}>{k.noteName}</span>
-              {k.held && (
-                <span
-                  style={{
-                    color: "#666666",
-                    fontWeight: "bold",
-                    fontSize: 14,
-                    lineHeight: "14px",
-                    marginBottom: 2,
-                  }}
-                >
-                  {k.voice}
-                </span>
-              )}
-            </div>
+            {showNoteNames && (
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column-reverse",
+                  alignItems: "center",
+                }}
+              >
+                <span style={{ color: "#555" }}>{k.noteName}</span>
+                {k.held && (
+                  <span
+                    style={{
+                      color: "#666666",
+                      fontWeight: "bold",
+                      fontSize: 14,
+                      lineHeight: "14px",
+                      marginBottom: 2,
+                    }}
+                  >
+                    {k.voice}
+                  </span>
+                )}
+              </div>
+            )}
           </div>
         ))}
       </div>