some ui for #13

Assets/web/src/App.js

@@ -53,13 +53,16 @@ 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 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 className="flex items-center justify-center mt-[45px]">
               <div>
                 <JuceSlider identifier="portTime" title="Portamento Speed" />
               </div>
@@ -68,33 +71,42 @@ function App() {
               </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="col-span-2">
-              <div className="grid grid-rows-2 self-center flex justify-center items-start">
+          <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-1">
+              <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="autoTuneSpeed" title="Auto Tune Speed" />
+                <JuceSlider
+                  identifier="autoTuneDepth"
+                  title="Auto Tune Depth"
+                />
               </div>
-            <div>
-              <JuceSlider identifier="autoTuneDepth" title="Auto Tune Depth" />
             </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 items-center justify-center">
+            <div className="mt-0 pt-0 flex items-center justify-center ">
               <JuceCheckbox identifier="freezeEnabled" />
             </div>
+
+            <div className="flex items-center justify-center mt-[100px]">
               <div>
                 <JuceSlider identifier="freezePitch" title="Freeze Pitch" />
               </div>
@@ -104,6 +116,7 @@ function App() {
             </div>
           </div>
         </div>
+      </div>
       <Container></Container>
       <div className="rounded-lg">
         <MidiNoteInfo />

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,6 +59,7 @@ export default function AutoTuneInfo() {
   }, []);
 
   return (
+    <div className="p-0 flex flex-col gap-1">
       <div className="flex">
         <h1
           className="w-8 flex-initial py-2 px-1 text-xl"
@@ -72,5 +76,58 @@ export default function AutoTuneInfo() {
           </div>
         </div>
       </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,6 +126,7 @@ export default function PianoKeyboard({ heldNotes }) {
               borderBottomRightRadius: i === whiteKeys.length - 1 ? 6 : 0,
             }}
           >
+            {showNoteNames && (
               <div
                 style={{
                   display: "flex",
@@ -145,6 +149,7 @@ export default function PianoKeyboard({ heldNotes }) {
                   </span>
                 )}
               </div>
+            )}
           </div>
         ))}
       </div>

Source/PluginEditor.cpp

@@ -181,7 +181,7 @@ WebViewPluginAudioProcessorEditor::WebViewPluginAudioProcessorEditor(WebViewPlug
 
 	webComponent->goToURL (WebBrowserComponent::getResourceProviderRoot());
 #endif
-	setSize(800, 390);
+	setSize(800, 436);
 	
 
 	startTimerHz(60);