Add inputs

src/jsMain/kotlin/nl/astraeus/vst/chip/audio/VstChipWorklet.kt

@@ -1,5 +1,6 @@
 package nl.astraeus.vst.chip.audio
 
+import org.khronos.webgl.Uint8Array
 import org.w3c.dom.MessageEvent
 
 object VstChipWorklet : AudioNode(
@@ -7,6 +8,20 @@ object VstChipWorklet : AudioNode(
   "vst-chip-processor"
 ) {
   var volume = 0.75
+  var fmModFreq = 0.0
+    set(value) {
+      field = value
+      postMessage(
+        Uint8Array(arrayOf(0xb0.toByte(), 0x4b.toByte(), (value * 127).toInt().toByte()))
+      )
+    }
+  var fmModAmp = 0.0
+    set(value) {
+      field = value
+      postMessage(
+        Uint8Array(arrayOf(0xb0.toByte(), 0x4c.toByte(), (value * 127).toInt().toByte()))
+      )
+    }
 
   override fun onMessage(message: MessageEvent) {
     console.log("Message from worklet: ", message)

src/jsMain/kotlin/nl/astraeus/vst/chip/view/MainView.kt

@@ -169,21 +169,41 @@ object MainView : Komponent(), CssName {
           Midi.send(data)
         }
       }
-      div {
+      div(ControlsCss.name) {
         include(
           KnobComponent(
             value = VstChipWorklet.volume,
             label = "Volume",
             minValue = 0.0,
             maxValue = 1.0,
-            step = 2.0 / 127.0,
+            step = 2.0 / 127.0
-            width = 200,
-            height = 160
           ) { value ->
             println("Value changed: ${formatDouble(value, 2)}")
             VstChipWorklet.volume = value
           }
         )
+        include(
+          KnobComponent(
+            value = VstChipWorklet.fmModFreq,
+            label = "FM Freq",
+            minValue = 0.0,
+            maxValue = 1.0,
+            step = 2.0 / 127.0
+          ) { value ->
+            VstChipWorklet.fmModFreq = value
+          }
+        )
+        include(
+          KnobComponent(
+            value = VstChipWorklet.fmModAmp,
+            label = "FM Ampl",
+            minValue = 0.0,
+            maxValue = 1.0,
+            step = 2.0 / 127.0
+          ) { value ->
+            VstChipWorklet.fmModAmp = value
+          }
+        )
       }
     }
   }
@@ -195,6 +215,7 @@ object MainView : Komponent(), CssName {
   object StartSplashCss : CssName
   object StartBoxCss : CssName
   object StartButtonCss : CssName
+  object ControlsCss : CssName
 
   private fun css() {
       defineCss {
@@ -282,6 +303,15 @@ object MainView : Komponent(), CssName {
             }
           }
         }
+        select(ControlsCss.cls()) {
+          display(Display.flex)
+          flexDirection(FlexDirection.column)
+          justifyContent(JustifyContent.center)
+          alignItems(AlignItems.center)
+          margin(1.rem)
+          padding(1.rem)
+          backgroundColor(Css.currentStyle.mainBackgroundColor)
+        }
       }
   }