Modulation, waveforms

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

@@ -1,14 +1,37 @@
 package nl.astraeus.vst.chip.view
 
 import kotlinx.browser.window
-import kotlinx.html.*
+import kotlinx.html.InputType
+import kotlinx.html.canvas
+import kotlinx.html.classes
+import kotlinx.html.div
+import kotlinx.html.h1
+import kotlinx.html.input
 import kotlinx.html.js.onChangeFunction
 import kotlinx.html.js.onClickFunction
 import kotlinx.html.js.onInputFunction
-import nl.astraeus.css.properties.*
+import kotlinx.html.option
+import kotlinx.html.select
+import kotlinx.html.span
+import nl.astraeus.css.properties.AlignItems
+import nl.astraeus.css.properties.BoxSizing
+import nl.astraeus.css.properties.Display
+import nl.astraeus.css.properties.FlexDirection
+import nl.astraeus.css.properties.FontWeight
+import nl.astraeus.css.properties.JustifyContent
+import nl.astraeus.css.properties.Position
+import nl.astraeus.css.properties.Transform
+import nl.astraeus.css.properties.em
+import nl.astraeus.css.properties.hsla
+import nl.astraeus.css.properties.prc
+import nl.astraeus.css.properties.px
+import nl.astraeus.css.properties.rem
+import nl.astraeus.css.properties.vh
+import nl.astraeus.css.properties.vw
 import nl.astraeus.css.style.cls
 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.midi.Midi
 import nl.astraeus.vst.ui.components.KnobComponent
@@ -17,14 +40,60 @@ 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 nl.astraeus.vst.util.formatDouble
 import org.khronos.webgl.Uint8Array
+import org.khronos.webgl.get
+import org.w3c.dom.CanvasRenderingContext2D
+import org.w3c.dom.HTMLCanvasElement
 import org.w3c.dom.HTMLInputElement
 import org.w3c.dom.HTMLSelectElement
 
+object WaveformView: Komponent() {
+
+  init {
+    window.requestAnimationFrame(::onAnimationFrame)
+  }
+
+  fun onAnimationFrame(time: Double) {
+    if (MainView.started) {
+      VstChipWorklet.postMessage("start_recording")
+    }
+
+    window.requestAnimationFrame(::onAnimationFrame)
+  }
+
+  override fun HtmlBuilder.render() {
+    div {
+      if (VstChipWorklet.recording != null) {
+        canvas {
+          width = "1000"
+          height = "400"
+          val ctx = (currentElement() as? HTMLCanvasElement)?.getContext("2d") as? CanvasRenderingContext2D
+          val data = VstChipWorklet.recording
+          if (ctx != null && data != null) {
+            val width = ctx.canvas.width.toDouble()
+            val height = ctx.canvas.height.toDouble()
+            val halfHeight = height / 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.moveTo(0.0, halfHeight)
+            for (i in 0 until data.length) {
+              ctx.lineTo(i * step, halfHeight - data[i] * halfHeight)
+            }
+            ctx.stroke()
+          }
+        }
+      }
+    }
+  }
+
+}
+
 object MainView : Komponent(), CssName {
   private var messages: MutableList<String> = ArrayList()
-  private var started = false
+  var started = false
 
   init {
     css()
@@ -46,8 +115,8 @@ object MainView : Komponent(), CssName {
             div(StartButtonCss.name) {
               +"START"
               onClickFunction = {
-                started = true
                 VstChipWorklet.create {
+                  started = true
                   requestUpdate()
                 }
               }
@@ -92,12 +161,11 @@ object MainView : Komponent(), CssName {
           +"channel:"
           input {
             type = InputType.number
-            value = Midi.inputChannel.toString()
+            value = VstChipWorklet.midiChannel.toString()
             onInputFunction = { event ->
               val target = event.target as HTMLInputElement
-              Midi.inputChannel = target.value.toInt()
-              println("onInput channel: ${Midi.inputChannel}")
-              VstChipWorklet.postMessage("set_channel\n${Midi.inputChannel}")
+              println("onInput channel: $target")
+              VstChipWorklet.setChannel(target.value.toInt())
             }
           }
         }
@@ -142,31 +210,75 @@ object MainView : Komponent(), CssName {
           }
         }
       }
-      div(ButtonCss.name) {
-        +"Send note on to output"
-        onClickFunction = {
-          val data = Uint8Array(
-            arrayOf(
-              0x90.toByte(),
-              0x3c.toByte(),
-              0x70.toByte()
+      div {
+        span(ButtonCss.name) {
+          +"Send note on to output"
+          onClickFunction = {
+            val data = Uint8Array(
+              arrayOf(
+                0x90.toByte(),
+                0x3c.toByte(),
+                0x70.toByte()
+              )
             )
-          )
-          Midi.send(data, window.performance.now() + 1000)
-          Midi.send(data, window.performance.now() + 2000)
+            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)
+          }
         }
       }
-      div(ButtonCss.name) {
-        +"Send note off to output"
-        onClickFunction = {
-          val data = Uint8Array(
-            arrayOf(
-              0x90.toByte(),
-              0x3c.toByte(),
-              0x0.toByte(),
-            )
-          )
-          Midi.send(data)
+      div {
+        span(ButtonCss.name) {
+          +"Sine"
+          if (VstChipWorklet.waveform == 0) {
+            classes += SelectedCss.name
+          }
+          onClickFunction = {
+            VstChipWorklet.waveform = 0
+            requestUpdate()
+          }
+        }
+        span(ButtonCss.name) {
+          +"Square"
+          if (VstChipWorklet.waveform == 1) {
+            classes += SelectedCss.name
+          }
+          onClickFunction = {
+            VstChipWorklet.waveform = 1
+            requestUpdate()
+          }
+        }
+        span(ButtonCss.name) {
+          +"Triangle"
+          if (VstChipWorklet.waveform == 2) {
+            classes += SelectedCss.name
+          }
+          onClickFunction = {
+            VstChipWorklet.waveform = 2
+            requestUpdate()
+          }
+        }
+        span(ButtonCss.name) {
+          +"Sawtooth"
+          if (VstChipWorklet.waveform == 3) {
+            classes += SelectedCss.name
+          }
+          onClickFunction = {
+            VstChipWorklet.waveform = 3
+            requestUpdate()
+          }
         }
       }
       div(ControlsCss.name) {
@@ -176,19 +288,35 @@ object MainView : Komponent(), CssName {
             label = "Volume",
             minValue = 0.0,
             maxValue = 1.0,
-            step = 2.0 / 127.0
+            step = 2.0 / 127.0,
+            width = 100,
+            height = 120,
           ) { value ->
-            println("Value changed: ${formatDouble(value, 2)}")
             VstChipWorklet.volume = value
           }
         )
+        include(
+          KnobComponent(
+            value = VstChipWorklet.dutyCycle,
+            label = "Duty cycle",
+            minValue = 0.0,
+            maxValue = 1.0,
+            step = 2.0 / 127.0,
+            width = 100,
+            height = 120,
+          ) { value ->
+            VstChipWorklet.dutyCycle = value
+          }
+        )
         include(
           KnobComponent(
             value = VstChipWorklet.fmModFreq,
             label = "FM Freq",
             minValue = 0.0,
             maxValue = 1.0,
-            step = 2.0 / 127.0
+            step = 2.0 / 127.0,
+            width = 100,
+            height = 120,
           ) { value ->
             VstChipWorklet.fmModFreq = value
           }
@@ -199,18 +327,48 @@ object MainView : Komponent(), CssName {
             label = "FM Ampl",
             minValue = 0.0,
             maxValue = 1.0,
-            step = 2.0 / 127.0
+            step = 2.0 / 127.0,
+            width = 100,
+            height = 120,
           ) { value ->
             VstChipWorklet.fmModAmp = value
           }
         )
+        include(
+          KnobComponent(
+            value = VstChipWorklet.amModFreq,
+            label = "AM Freq",
+            minValue = 0.0,
+            maxValue = 1.0,
+            step = 2.0 / 127.0,
+            width = 100,
+            height = 120,
+          ) { value ->
+            VstChipWorklet.amModFreq = value
+          }
+        )
+        include(
+          KnobComponent(
+            value = VstChipWorklet.amModAmp,
+            label = "AM Ampl",
+            minValue = 0.0,
+            maxValue = 1.0,
+            step = 2.0 / 127.0,
+            width = 100,
+            height = 120,
+          ) { value ->
+            VstChipWorklet.amModAmp = value
+          }
+        )
       }
+      include(WaveformView)
     }
   }
 
   object MainDivCss : CssName
   object ActiveCss : CssName
   object ButtonCss : CssName
+  object SelectedCss : CssName
   object NoteBarCss : CssName
   object StartSplashCss : CssName
   object StartBoxCss : CssName
@@ -242,7 +400,12 @@ object MainView : Komponent(), CssName {
           //transition()
           noTextSelect()
         }
+        select("select", "input", "textarea") {
+          backgroundColor(Css.currentStyle.mainBackgroundColor)
+          color(Css.currentStyle.mainFontColor)
+        }
         select(cls(ButtonCss)) {
+          display(Display.inlineBlock)
           margin(1.rem)
           padding(1.rem)
           backgroundColor(Css.currentStyle.buttonBackgroundColor)
@@ -253,6 +416,9 @@ object MainView : Komponent(), CssName {
           hover {
             backgroundColor(Css.currentStyle.buttonBackgroundColor.hover())
           }
+          and(SelectedCss.cls()) {
+            backgroundColor(Css.currentStyle.buttonBackgroundColor.hover().hover().hover())
+          }
         }
         select(cls(ActiveCss)) {
           //backgroundColor(Css.currentStyle.selectedBackgroundColor)
@@ -305,8 +471,8 @@ object MainView : Komponent(), CssName {
         }
         select(ControlsCss.cls()) {
           display(Display.flex)
-          flexDirection(FlexDirection.column)
-          justifyContent(JustifyContent.center)
+          flexDirection(FlexDirection.row)
+          justifyContent(JustifyContent.flexStart)
           alignItems(AlignItems.center)
           margin(1.rem)
           padding(1.rem)