michal/harmonizer_plugin
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

some ui for #13

Browse Source
This commit is contained in:
michalcourson
2025-12-05 18:37:20 -05:00
parent 234e0d3e8a
commit cb069089c0
5 changed files with 156 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
Assets/web/src/App.js
View File

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

81
Assets/web/src/Components/AutoTuneInfo.js
View File

@ -2,6 +2,7 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import CenterGrowSlider from "./CenterGrowSlider.js"; import CenterGrowSlider from "./CenterGrowSlider.js";
import AutoTuneDataReceiver from "../DataRecievers/AutoTuneDataReceiver.js"; import AutoTuneDataReceiver from "../DataRecievers/AutoTuneDataReceiver.js";
import PianoKeyboard from "./PianoKeyboard.js";
// import { Slider } from "@mui/material"; // import { Slider } from "@mui/material";
// import { styled } from "@mui/material/styles"; // import { styled } from "@mui/material/styles";
@ -11,6 +12,8 @@ export default function AutoTuneInfo() {
const [inputCents, setInputCents] = useState(0); const [inputCents, setInputCents] = useState(0);
const [outputCents, setOutputCents] = useState(0); const [outputCents, setOutputCents] = useState(0);
const [autotuneNote, setAutotuneNote] = useState(0); const [autotuneNote, setAutotuneNote] = useState(0);
const [showPopup, setShowPopup] = useState(false);
const [autoTuneKey, setAutoTuneKey] = useState("");
const dataReceiverRef = useRef(null); const dataReceiverRef = useRef(null);
const isActiveRef = useRef(true); const isActiveRef = useRef(true);
@ -56,19 +59,73 @@ export default function AutoTuneInfo() {
}, []); }, []);
return ( return (
<div className="flex"> <div className="p-0 flex flex-col gap-1">
<h1 <div className="flex">
className="w-8 flex-initial py-2 px-1 text-xl" <h1
style={{ color: "#666" }} className="w-8 flex-initial py-2 px-1 text-xl"
> style={{ color: "#666" }}
{getCharfromNoteIndex(autotuneNote)} >
</h1> {getCharfromNoteIndex(autotuneNote)}
<div className=" py-2 px-1 flex-1"> </h1>
<div className="py-1"> <div className=" py-2 px-1 flex-1">
<CenterGrowSlider value={inputCents} /> <div className="py-1">
<CenterGrowSlider value={inputCents} />
</div>
<div className="py-1">
<CenterGrowSlider value={outputCents} />
</div>
</div> </div>
<div className="py-1"> </div>
<CenterGrowSlider value={outputCents} /> <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> </div>
</div> </div>

4
Assets/web/src/Components/MidiNoteInfo.js
View File

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

61
Assets/web/src/Components/PianoKeyboard.js
View File

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

2
Source/PluginEditor.cpp
View File

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