WebViewPluginDemo: Implement AudioProcessorEditor::getControlParamete…

…rIndex
sysfce2 · Jun 6, 2024 · 2540c80 · 2540c80
1 parent 3339843
commit 2540c80
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/examples/Plugins/WebViewPluginDemo.h b/examples/Plugins/WebViewPluginDemo.h
@@ -405,6 +405,11 @@ class WebViewPluginAudioProcessorEditor : public AudioProcessorEditor, private
  void paint (Graphics&) override;
  void resized() override;
 
+ int getControlParameterIndex (Component&) override
+ {
+ return controlParameterIndexReceiver.getControlParameterIndex();
+ }
+
  void timerCallback() override
  {
  static constexpr size_t numFramesBuffered = 5;
@@ -437,6 +442,8 @@ class WebViewPluginAudioProcessorEditor : public AudioProcessorEditor, private
  WebToggleButtonRelay muteToggleRelay { webComponent, "muteToggle" };
  WebComboBoxRelay filterTypeComboRelay { webComponent, "filterTypeCombo" };
 
+ WebControlParameterIndexReceiver controlParameterIndexReceiver;
+
  SinglePageBrowser webComponent { WebBrowserComponent::Options{}
  .withBackend (WebBrowserComponent::Options::Backend::webview2)
  .withWinWebView2Options (WebBrowserComponent::Options::WinWebView2{}
@@ -445,6 +452,7 @@ class WebViewPluginAudioProcessorEditor : public AudioProcessorEditor, private
  .withOptionsFrom (cutoffSliderRelay)
  .withOptionsFrom (muteToggleRelay)
  .withOptionsFrom (filterTypeComboRelay)
+ .withOptionsFrom (controlParameterIndexReceiver)
  .withNativeFunction ("sayHello", [](auto& var, auto complete)
  {
  complete ("Hello " + var[0].toString());

diff --git a/examples/Plugins/WebViewPluginDemoGUI/src/App.js b/examples/Plugins/WebViewPluginDemoGUI/src/App.js
@@ -50,6 +50,9 @@ import * as Juce from "juce-framework-frontend";
 
 import "./App.css";
 
+// Custom attributes in React must be in all lower case
+const controlParameterIndexAnnotation = "controlparameterindex";
+
 function JuceSlider({ identifier, title }) {
  JuceSlider.propTypes = {
  identifier: PropTypes.string,
@@ -94,7 +97,12 @@ function JuceSlider({ identifier, title }) {
  }
 
  return (
- <Box>
+ <Box
+ {...{
+ [controlParameterIndexAnnotation]:
+ sliderState.properties.parameterIndex,
+ }}
+ >
  <Typography sx={{ mt: 1.5 }}>
  {properties.name}: {sliderState.getScaledValue()} {properties.label}
  </Typography>
@@ -146,7 +154,12 @@ function JuceCheckbox({ identifier }) {
  const cb = <Checkbox checked={value} onChange={handleChange} />;
 
  return (
- <Box>
+ <Box
+ {...{
+ [controlParameterIndexAnnotation]:
+ checkboxState.properties.parameterIndex,
+ }}
+ >
  <FormGroup>
  <FormControlLabel control={cb} label={properties.name} />
  </FormGroup>
@@ -185,7 +198,12 @@ function JuceComboBox({ identifier }) {
  });
 
  return (
- <Box>
+ <Box
+ {...{
+ [controlParameterIndexAnnotation]:
+ comboBoxState.properties.parameterIndex,
+ }}
+ >
  <FormControl fullWidth>
  <InputLabel id={identifier}>{properties.name}</InputLabel>
  <Select
@@ -360,6 +378,14 @@ function FreqBandInfo() {
 }
 
 function App() {
+ const controlParameterIndexUpdater = new Juce.ControlParameterIndexUpdater(
+ controlParameterIndexAnnotation
+ );
+
+ document.addEventListener("mousemove", (event) => {
+ controlParameterIndexUpdater.handleMouseMove(event);
+ });
+
  const [open, setOpen] = useState(false);
  const [snackbarMessage, setMessage] = useState("No message received yet");