Save patch

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

@@ -34,14 +34,16 @@ import nl.astraeus.komp.HtmlBuilder
 import nl.astraeus.komp.Komponent
 import nl.astraeus.komp.currentElement
 import nl.astraeus.vst.chip.audio.VstChipWorklet
+import nl.astraeus.vst.chip.audio.VstChipWorklet.midiChannel
 import nl.astraeus.vst.chip.midi.Midi
+import nl.astraeus.vst.chip.ws.WebsocketClient
 import nl.astraeus.vst.ui.components.KnobComponent
 import nl.astraeus.vst.ui.css.Css
 import nl.astraeus.vst.ui.css.Css.defineCss
 import nl.astraeus.vst.ui.css.Css.noTextSelect
 import nl.astraeus.vst.ui.css.CssName
 import nl.astraeus.vst.ui.css.hover
-import org.khronos.webgl.Uint8Array
+import nl.astraeus.vst.ui.util.uInt8ArrayOf
 import org.khronos.webgl.get
 import org.w3c.dom.CanvasRenderingContext2D
 import org.w3c.dom.HTMLCanvasElement
@@ -75,10 +77,11 @@ object WaveformView: Komponent() {
             val height = ctx.canvas.height.toDouble()
             val halfHeight = height / 2.0
 
+            ctx.lineWidth = 2.0
             ctx.clearRect(0.0, 0.0, width, height)
             val step = 1000.0 / data.length
             ctx.beginPath()
-            ctx.strokeStyle = "rgba(255, 255, 255, 0.5)"
+            ctx.strokeStyle = "rgba(0, 255, 255, 0.5)"
             ctx.moveTo(0.0, halfHeight)
             for (i in 0 until data.length) {
               ctx.lineTo(i * step, halfHeight - data[i] * halfHeight)
@@ -119,6 +122,7 @@ object MainView : Komponent(), CssName {
                 VstChipWorklet.create {
                   started = true
                   requestUpdate()
+                  WebsocketClient.send("LOAD\n")
                 }
               }
             }
@@ -140,6 +144,7 @@ object MainView : Komponent(), CssName {
               option {
                 +mi.name
                 value = mi.id
+                selected = mi.id == Midi.currentInput?.id
               }
             }
 
@@ -148,12 +153,7 @@ object MainView : Komponent(), CssName {
               if (target.value == "none") {
                 Midi.setInput(null)
               } else {
-                val selected = Midi.inputs.find { it.id == target.value }
-                if (selected != null) {
-                  Midi.setInput(selected)
-                } else if (target.value == "midi-broadcast") {
-                  //
-                }
+                Midi.setInput(target.value)
               }
             }
           }
@@ -172,71 +172,20 @@ object MainView : Komponent(), CssName {
         }
       }
       div {
-        span {
-          +"Midi output: "
-          select {
-            option {
-              +"None"
-              value = "none"
-            }
-            for (mi in Midi.outputs) {
-              option {
-                +mi.name
-                value = mi.id
-              }
-            }
+        span(ButtonBarCss.name) {
+          +"SAVE"
+          onClickFunction = {
+            val patch = VstChipWorklet.save().copy(midiId = Midi.currentInput?.id ?: "")
 
-            onChangeFunction = { event ->
-              val target = event.target as HTMLSelectElement
-              if (target.value == "none") {
-                Midi.setOutput(null)
-              } else {
-                val selected = Midi.outputs.find { it.id == target.value }
-                if (selected != null) {
-                  Midi.setOutput(selected)
-                }
-              }
-            }
+            WebsocketClient.send("SAVE\n${JSON.stringify(patch)}")
           }
         }
-        span {
-          +"channel:"
-          input {
-            type = InputType.number
-            value = Midi.outputChannel.toString()
-            onInputFunction = { event ->
-              val target = event.target as HTMLInputElement
-              Midi.outputChannel = target.value.toInt()
-            }
-          }
-        }
-      }
-      div {
-        span(ButtonCss.name) {
-          +"Send note on to output"
+        span(ButtonBarCss.name) {
+          +"STOP"
           onClickFunction = {
-            val data = Uint8Array(
-              arrayOf(
-                0x90.toByte(),
-                0x3c.toByte(),
-                0x70.toByte()
-              )
+            VstChipWorklet.postDirectlyToWorklet(
+              uInt8ArrayOf(0xb0 + midiChannel, 123, 0)
             )
-            Midi.send(data, window.performance.now() + 1000)
-            Midi.send(data, window.performance.now() + 2000)
-          }
-        }
-        span(ButtonCss.name) {
-          +"Send note off to output"
-          onClickFunction = {
-            val data = Uint8Array(
-              arrayOf(
-                0x90.toByte(),
-                0x3c.toByte(),
-                0x0.toByte(),
-              )
-            )
-            Midi.send(data)
           }
         }
       }
@@ -362,6 +311,60 @@ object MainView : Komponent(), CssName {
           }
         )
       }
+      div(ControlsCss.name) {
+        include(
+          KnobComponent(
+            value = VstChipWorklet.attack,
+            label = "Attack",
+            minValue = 0.0,
+            maxValue = 1.0,
+            step = 2.0 / 127.0,
+            width = 100,
+            height = 120,
+          ) { value ->
+            VstChipWorklet.attack = value
+          }
+        )
+        include(
+          KnobComponent(
+            value = VstChipWorklet.decay,
+            label = "Decay",
+            minValue = 0.0,
+            maxValue = 1.0,
+            step = 2.0 / 127.0,
+            width = 100,
+            height = 120,
+          ) { value ->
+            VstChipWorklet.decay = value
+          }
+        )
+        include(
+          KnobComponent(
+            value = VstChipWorklet.sustain,
+            label = "Sustain",
+            minValue = 0.0,
+            maxValue = 1.0,
+            step = 2.0 / 127.0,
+            width = 100,
+            height = 120,
+          ) { value ->
+            VstChipWorklet.sustain = value
+          }
+        )
+        include(
+          KnobComponent(
+            value = VstChipWorklet.release,
+            label = "Release",
+            minValue = 0.0,
+            maxValue = 1.0,
+            step = 2.0 / 127.0,
+            width = 100,
+            height = 120,
+          ) { value ->
+            VstChipWorklet.release = value
+          }
+        )
+      }
       include(WaveformView)
     }
   }