diff --git a/Assets/web/src/App.js b/Assets/web/src/App.js index 7c2448d..7a4a894 100644 --- a/Assets/web/src/App.js +++ b/Assets/web/src/App.js @@ -31,6 +31,7 @@ import * as Juce from "juce-framework-frontend"; import JuceSlider from "./Components/JuceSlider.js"; import JuceCheckbox from "./Components/JuceCheckbox.js"; import MidiNoteInfo from "./Components/MidiNoteInfo.js"; +import AutoTuneInfo from "./Components/AutoTuneInfo.js"; import { controlParameterIndexAnnotation } from "./types/JuceTypes.js"; import { React } from "react"; @@ -70,8 +71,15 @@ function App() {
-
- +
+
+
+ +
+
+ +
+
@@ -84,7 +92,7 @@ function App() {
-
+
@@ -97,7 +105,9 @@ function App() {
- +
+ +
); } diff --git a/Assets/web/src/Colors.js b/Assets/web/src/Colors.js new file mode 100644 index 0000000..387f1f9 --- /dev/null +++ b/Assets/web/src/Colors.js @@ -0,0 +1 @@ +export const HIGHLIGHT_COLOR = "#5242cdff"; diff --git a/Assets/web/src/Components/AutoTuneInfo.js b/Assets/web/src/Components/AutoTuneInfo.js new file mode 100644 index 0000000..11066fc --- /dev/null +++ b/Assets/web/src/Components/AutoTuneInfo.js @@ -0,0 +1,76 @@ +/* eslint-disable no-unused-vars */ +import React, { useState, useEffect, useRef } from "react"; +import CenterGrowSlider from "./CenterGrowSlider.js"; +import AutoTuneDataReceiver from "../DataRecievers/AutoTuneDataReceiver.js"; +// import { Slider } from "@mui/material"; +// import { styled } from "@mui/material/styles"; + +// eslint-disable-next-line react/prop-types + +export default function AutoTuneInfo() { + const [inputCents, setInputCents] = useState(0); + const [outputCents, setOutputCents] = useState(0); + const [autotuneNote, setAutotuneNote] = useState(0); + const dataReceiverRef = useRef(null); + const isActiveRef = useRef(true); + + function getCharfromNoteIndex(index) { + if (index === -1) return "-"; + const NOTE_NAMES = [ + "C", + "C♯", + "D", + "D♯", + "E", + "F", + "F♯", + "G", + "G♯", + "A", + "A♯", + "B", + ]; + if (typeof index !== "number" || isNaN(index)) return ""; + return NOTE_NAMES[index % NOTE_NAMES.length]; + } + + useEffect(() => { + dataReceiverRef.current = new AutoTuneDataReceiver(); + isActiveRef.current = true; + + function render() { + if (!isActiveRef.current) return; + if (dataReceiverRef.current) { + setInputCents(dataReceiverRef.current.getInputCents()); + setOutputCents(dataReceiverRef.current.getOutputCents()); + setAutotuneNote(dataReceiverRef.current.getAutotuneNote()); + } + window.requestAnimationFrame(render); + } + + window.requestAnimationFrame(render); + return function cleanup() { + isActiveRef.current = false; + if (dataReceiverRef.current) dataReceiverRef.current.unregister(); + }; + }, []); + + return ( +
+

+ {getCharfromNoteIndex(autotuneNote)} +

+
+
+ +
+
+ +
+
+
+ ); +} diff --git a/Assets/web/src/Components/CenterGrowSlider.js b/Assets/web/src/Components/CenterGrowSlider.js index 85bab76..540abfe 100644 --- a/Assets/web/src/Components/CenterGrowSlider.js +++ b/Assets/web/src/Components/CenterGrowSlider.js @@ -1,12 +1,9 @@ /* eslint-disable react/prop-types */ import React from "react"; - export default function CenterGrowSlider({ value, min = -50, max = 50, - positiveColor = "#4caf50", - negativeColor = "#f44336", backgroundColor = "rgba(150,150,150,0.3)", height = 8, }) { @@ -39,21 +36,21 @@ export default function CenterGrowSlider({ > {/* Negative (left) bar */}
{/* Positive (right) bar */}
diff --git a/Assets/web/src/Components/HorizontalSlider.js b/Assets/web/src/Components/HorizontalSlider.js index b19f85c..c717b2b 100644 --- a/Assets/web/src/Components/HorizontalSlider.js +++ b/Assets/web/src/Components/HorizontalSlider.js @@ -1,5 +1,6 @@ /* eslint-disable react/prop-types */ import React, { useState, useRef, useEffect } from "react"; +import { HIGHLIGHT_COLOR } from "../Colors.js"; export function HorizontalSlider({ value = 50, @@ -70,7 +71,7 @@ export function HorizontalSlider({ {showFill && (
)} diff --git a/Assets/web/src/Components/MidiNoteInfo.js b/Assets/web/src/Components/MidiNoteInfo.js index 6923aae..077a3c5 100644 --- a/Assets/web/src/Components/MidiNoteInfo.js +++ b/Assets/web/src/Components/MidiNoteInfo.js @@ -1,7 +1,6 @@ import React, { useState, useEffect, useRef } from "react"; import PianoKeyboard from "./PianoKeyboard"; import MidNoteDataReceiver from "../DataRecievers/MidiNoteDataReceiver.js"; -import CenterGrowSlider from "./CenterGrowSlider.js"; // import { Slider } from "@mui/material"; // import { styled } from "@mui/material/styles"; @@ -9,31 +8,9 @@ import CenterGrowSlider from "./CenterGrowSlider.js"; export default function MidiNoteInfo() { const [notes, setNotes] = useState([]); - const [inputCents, setInputCents] = useState(0); - const [outputCents, setOutputCents] = useState(0); - const [autotuneNote, setAutotuneNote] = useState(0); const dataReceiverRef = useRef(null); const isActiveRef = useRef(true); - function getCharfromNoteIndex(index) { - const NOTE_NAMES = [ - "C", - "C♯", - "D", - "D♯", - "E", - "F", - "F♯", - "G", - "G♯", - "A", - "A♯", - "B", - ]; - if (typeof index !== "number" || isNaN(index)) return ""; - return NOTE_NAMES[index % NOTE_NAMES.length]; - } - useEffect(() => { dataReceiverRef.current = new MidNoteDataReceiver(); isActiveRef.current = true; @@ -42,9 +19,6 @@ export default function MidiNoteInfo() { if (!isActiveRef.current) return; if (dataReceiverRef.current) { setNotes(dataReceiverRef.current.getNotes()); - setInputCents(dataReceiverRef.current.getInputCents()); - setOutputCents(dataReceiverRef.current.getOutputCents()); - setAutotuneNote(dataReceiverRef.current.getAutotuneNote()); } window.requestAnimationFrame(render); } @@ -57,13 +31,8 @@ export default function MidiNoteInfo() { }, []); return ( -
+
-

Autotune Note: {getCharfromNoteIndex(autotuneNote)}

- - - -
); } diff --git a/Assets/web/src/Components/PianoKeyboard.js b/Assets/web/src/Components/PianoKeyboard.js index 517a8c8..ec3f22d 100644 --- a/Assets/web/src/Components/PianoKeyboard.js +++ b/Assets/web/src/Components/PianoKeyboard.js @@ -1,6 +1,5 @@ /* eslint-disable react/prop-types */ import React /*, { useRef, useEffect, useState }*/ from "react"; - const NOTE_NAMES = [ "C", "C♯", @@ -96,14 +95,18 @@ export default function PianoKeyboard({ heldNotes }) { height: "100%", }} > - {whiteKeys.map((k) => ( + {whiteKeys.map((k, i) => (
(
diff --git a/Assets/web/src/DataRecievers/AutoTuneDataReceiver.js b/Assets/web/src/DataRecievers/AutoTuneDataReceiver.js new file mode 100644 index 0000000..d2b9c0e --- /dev/null +++ b/Assets/web/src/DataRecievers/AutoTuneDataReceiver.js @@ -0,0 +1,42 @@ +// import * as Juce from "juce-framework-frontend"; +// import reportWebVitals from "../reportWebVitals"; + +const AutoTuneDataReceiver_eventId = "autoTuneData"; +export default class AutoTuneDataReceiver { + constructor() { + this.input_pitch = 0; + this.output_pitch = 0; + let self = this; + this.autoTuneDataRegistrationId = window.__JUCE__.backend.addEventListener( + AutoTuneDataReceiver_eventId, + (event) => { + self.input_pitch = event.input_pitch; + self.output_pitch = event.output_pitch; + } + ); + } + + frequencytoMidi(frequency) { + return 69 + 12 * Math.log2(frequency / 440); + } + + getAutotuneNote() { + if (this.output_pitch <= 0) return -1; + const midi = this.frequencytoMidi(this.output_pitch); + return Math.round(midi % 12); + } + getInputCents() { + const midi = this.frequencytoMidi(this.input_pitch); + return Math.round((midi - Math.round(midi)) * 100); + } + getOutputCents() { + const midi = this.frequencytoMidi(this.output_pitch); + return Math.round((midi - Math.round(midi)) * 100); + } + + unregister() { + window.__JUCE__.backend.removeEventListener( + this.autoTuneDataRegistrationId + ); + } +} diff --git a/Assets/web/src/DataRecievers/MidiNoteDataReceiver.js b/Assets/web/src/DataRecievers/MidiNoteDataReceiver.js index 0a1b741..4de138b 100644 --- a/Assets/web/src/DataRecievers/MidiNoteDataReceiver.js +++ b/Assets/web/src/DataRecievers/MidiNoteDataReceiver.js @@ -12,17 +12,6 @@ export default class MidNoteDataReceiver { MidNoteDataReceiver_eventId, (event) => { self.notes = event.notes; - self.input_pitch = event.input_pitch; - self.output_pitch = event.output_pitch; - console.log("in: " + self.input_pitch); - console.log("out: " + self.output_pitch); - // reportWebVitals(console.log(event)); - // fetch(Juce.getBackendResourceAddress("midNoteData.json")) - // .then((response) => response.text()) - // .then((text) => { - // const data = JSON.parse(text); - // self.notes = data.notes; - // }); } ); } @@ -31,23 +20,6 @@ export default class MidNoteDataReceiver { return this.notes; } - frequencytoMidi(frequency) { - return 69 + 12 * Math.log2(frequency / 440); - } - - getAutotuneNote() { - const midi = this.frequencytoMidi(this.output_pitch); - return Math.round(midi % 12); - } - getInputCents() { - const midi = this.frequencytoMidi(this.input_pitch); - return Math.round((midi - Math.round(midi)) * 100); - } - getOutputCents() { - const midi = this.frequencytoMidi(this.output_pitch); - return Math.round((midi - Math.round(midi)) * 100); - } - unregister() { window.__JUCE__.backend.removeEventListener(this.midNoteDataRegistrationId); } diff --git a/Assets/web/src/index.css b/Assets/web/src/index.css index cfe2302..c58efed 100644 --- a/Assets/web/src/index.css +++ b/Assets/web/src/index.css @@ -95,6 +95,7 @@ code { --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); + --color-primary-rgb: 127,255,127; } @theme inline { diff --git a/Assets/web/tailwind.config.js b/Assets/web/tailwind.config.js index b7aaacf..838bd7c 100644 --- a/Assets/web/tailwind.config.js +++ b/Assets/web/tailwind.config.js @@ -2,7 +2,12 @@ module.exports = { content: ["./src/*.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"], theme: { - extend: {}, + extend: { + colors: { + //primary: "#7FFF7F", + primary: "#2ccaffff", + }, + }, }, plugins: [], }; diff --git a/Source/PluginEditor.cpp b/Source/PluginEditor.cpp index 12d0a9d..2868ca2 100644 --- a/Source/PluginEditor.cpp +++ b/Source/PluginEditor.cpp @@ -177,7 +177,7 @@ WebViewPluginAudioProcessorEditor::WebViewPluginAudioProcessorEditor(WebViewPlug webComponent->goToURL(localDevServerAddress); //webComponent.goToURL (WebBrowserComponent::getResourceProviderRoot()); - setSize(800, 500); + setSize(800, 390); startTimerHz(60); } diff --git a/Source/PluginEditor.h b/Source/PluginEditor.h index e0c35df..1be7f08 100644 --- a/Source/PluginEditor.h +++ b/Source/PluginEditor.h @@ -80,9 +80,19 @@ public: DynamicObject::Ptr d(new DynamicObject()); d->setProperty("notes", notes); - d->setProperty("input_pitch", processorRef.shifter.getInputPitch()); - d->setProperty("output_pitch", processorRef.shifter.getOutputPitch()); webComponent->emitEventIfBrowserIsVisible("midNoteData", d.get()); + + d->clear(); + if (processorRef.shifter.GetAutoTuneEnable()) { + d->setProperty("input_pitch", processorRef.shifter.getInputPitch()); + d->setProperty("output_pitch", processorRef.shifter.getOutputPitch()); + } + else { + d->setProperty("input_pitch", -1); + d->setProperty("output_pitch", -1); + } + + webComponent->emitEventIfBrowserIsVisible("autoTuneData", d.get()); } private: diff --git a/Source/Shifter.h b/Source/Shifter.h index eb9696f..8a22aa7 100644 --- a/Source/Shifter.h +++ b/Source/Shifter.h @@ -159,6 +159,7 @@ public: float getOutputPitch() const { return sample_rate_ / out_period; } void SetHarmonyMix(float mix); void SetAutoTuneEnable(bool enable) { enable_autotune = enable; } + bool GetAutoTuneEnable() { return enable_autotune; } void SetFreeze(bool); void SetFreezePitchAdjust(float val); void SetFreezeVolume(float val) { freeze_volume = val; }