closes #2

Add dynamic toggle options. Add toggle for turning on and off the autotune

Assets/web/src/App.js

@@ -29,6 +29,7 @@ import "@fontsource/roboto/700.css";
 import Container from "@mui/material/Container";
 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 { controlParameterIndexAnnotation } from "./types/JuceTypes.js";
 
@@ -50,6 +51,7 @@ function App() {
       <Container>
         <JuceSlider identifier="harmonyMix" title="Mix" />
         <JuceSlider identifier="formantPreserve" title="Formant" />
+        <JuceCheckbox identifier="autoTuneEnabled" />
         <JuceSlider identifier="autoTuneSpeed" title="Auto Tune Speed" />
         <JuceSlider identifier="autoTuneDepth" title="Auto Tune Depth" />
         <JuceSlider identifier="portTime" title="Portamento Speed" />

Assets/web/src/Components/JuceCheckbox.js

@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import * as Juce from "juce-framework-frontend";
+import Checkbox from "@mui/material/Checkbox";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import { controlParameterIndexAnnotation } from "../types/JuceTypes.js";
+
+export default function JuceCheckbox({ identifier }) {
+  JuceCheckbox.propTypes = {
+    identifier: PropTypes.string,
+  };
+
+  const checkboxState = Juce.getToggleState(identifier);
+
+  const [value, setValue] = useState(checkboxState.getValue());
+  const [properties, setProperties] = useState(checkboxState.properties);
+
+  const handleChange = (event) => {
+    checkboxState.setValue(event.target.checked);
+    setValue(event.target.checked);
+  };
+
+  useEffect(() => {
+    const valueListenerId = checkboxState.valueChangedEvent.addListener(() => {
+      setValue(checkboxState.getValue());
+    });
+    const propertiesListenerId =
+      checkboxState.propertiesChangedEvent.addListener(() =>
+        setProperties(checkboxState.properties)
+      );
+
+    return function cleanup() {
+      checkboxState.valueChangedEvent.removeListener(valueListenerId);
+      checkboxState.propertiesChangedEvent.removeListener(propertiesListenerId);
+    };
+  });
+
+  const cb = <Checkbox checked={value} onChange={handleChange} />;
+
+  return (
+    <Box
+      {...{
+        [controlParameterIndexAnnotation]:
+          checkboxState.properties.parameterIndex,
+      }}
+    >
+      <FormGroup>
+        <FormControlLabel control={cb} label={properties.name} />
+      </FormGroup>
+    </Box>
+  );
+}

Assets/web/src/Components/JuceComboBox.js

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import * as Juce from "juce-framework-frontend";
+import Select from "@mui/material/Select";
+import InputLabel from "@mui/material/InputLabel";
+import MenuItem from "@mui/material/MenuItem";
+import FormControl from "@mui/material/FormControl";
+import { controlParameterIndexAnnotation } from "../types/JuceTypes.js";
+export default function JuceComboBox({ identifier }) {
+  JuceComboBox.propTypes = {
+    identifier: PropTypes.string,
+  };
+
+  const comboBoxState = Juce.getComboBoxState(identifier);
+
+  const [value, setValue] = useState(comboBoxState.getChoiceIndex());
+  const [properties, setProperties] = useState(comboBoxState.properties);
+
+  const handleChange = (event) => {
+    comboBoxState.setChoiceIndex(event.target.value);
+    setValue(event.target.value);
+  };
+
+  useEffect(() => {
+    const valueListenerId = comboBoxState.valueChangedEvent.addListener(() => {
+      setValue(comboBoxState.getChoiceIndex());
+    });
+    const propertiesListenerId =
+      comboBoxState.propertiesChangedEvent.addListener(() => {
+        setProperties(comboBoxState.properties);
+      });
+
+    return function cleanup() {
+      comboBoxState.valueChangedEvent.removeListener(valueListenerId);
+      comboBoxState.propertiesChangedEvent.removeListener(propertiesListenerId);
+    };
+  });
+
+  return (
+    <Box
+      {...{
+        [controlParameterIndexAnnotation]:
+          comboBoxState.properties.parameterIndex,
+      }}
+    >
+      <FormControl fullWidth>
+        <InputLabel id={identifier}>{properties.name}</InputLabel>
+        <Select
+          labelId={identifier}
+          value={value}
+          label={properties.name}
+          onChange={handleChange}
+        >
+          {properties.choices.map((choice, i) => (
+            <MenuItem value={i} key={i}>
+              {choice}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}