Preparing usable webgui

2 files changed, 85 insertions, 33 deletions

diff --git a/Build/Makefile b/Build/Makefile
index 5126c48..22146a4 100644
--- a/Build/Makefile
+++ b/Build/Makefile
@@ -10,7 +10,7 @@ make:
 	$(CC) main.o firmath.o -o WasmAudio $(LDFLAGS)
 
 emcc:
-	$(EMCC) $(SOURCEDIR)/main.c ../FIR/firmath.c -s WASM=1 -O3 -o index.js $(EM_LDFALGS) -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'
+	$(EMCC) $(SOURCEDIR)/main.c ../FIR/firmath.c -s WASM=1 -O3 -o index.js $(EM_LDFALGS) -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' 
 
 
 deploy:
diff --git a/Build/index.html b/Build/index.html
index 02c0d3f..239bfd0 100644
--- a/Build/index.html
+++ b/Build/index.html
@@ -18,58 +18,110 @@
               var script = document.createElement('script');
               script.src = "index.js";
               script.onload = function() {
-                console.log("Emscripten boilerplate loaded.")
+                console.log("Emscripten boilerplate loaded.");
+                get_cutoff_freq = Module.cwrap("get_cutoff_freq","number",[]);
+                set_cutoff_plus_1k= Module.cwrap("set_cutoff_plus_1k",[],[]);
+                set_cutoff_minus_1k = Module.cwrap("set_cutoff_minus_1k",[],[]);
+                get_tap_number = Module.cwrap("get_tap_number","number",[]);
+                recalculate_fir = Module.cwrap("recalculate_fir",'number',['float']);
+                start_loop = Module.cwrap("start_loop",'number',[]);
+                stop_loop = Module.cwrap("stop_loop",'number',[]);
+                set_tap_number_plus_10 = Module.cwrap("set_tap_number_plus_10",[],[]);
+                set_tap_number_minus_10 = Module.cwrap("set_tap_number_minus_10",[],[]);
+                
+                var setCutoffFrequency = document.querySelector('.setCutoffFrequency')
+                var getCutoffFrequency = document.querySelector('.getCutoffFrequency')
+                var outSetCutoffFrequency = document.querySelector('.outSetCutoffFrequency')
+                var minusNumberTaps = document.querySelector('.minusNumberTaps')
+                var plusNumberTaps = document.querySelector('.pplusNumberTaps')
+                var outSetNumberTaps = document.querySelector('.outSetNumberTaps')
+                var recalculateFir = document.querySelector('.recalculateFir')
+                var outCoeficients = document.querySelector('.outCoeficients')
+                
+                //outSetCutoffFrequency.value = get_cutoff_freq();
+                //outSetCutoffFrequency.value = "Hello";
+                //outSetNumberTaps.value = get_tap_number();
+                
+                
+                document.querySelector("#recalculateFir").onclick = function() {
+                    console.log("Oh noe");
+                    //https://stackoverflow.com/questions/17883799/how-to-handle-passing-returning-array-pointers-to-emscripten-compiled-code
+                    function cArray(size) {
+                        var offset = Module._malloc(size * 8);
+                        Module.HEAPF64.set(new Float64Array(size), offset / 8);
+                        return {
+                            "data": Module.HEAPF64.subarray(offset / 8, offset / 8 + size),
+                            "offset": offset
+                        }
+                    }
+                    myArray = cArray(200);
+                    var result = recalculate_fir(myArray.offset);
+                    var arr = Array(myArray.data.slice(1,result-1));
+                    arr = arr.map(function(item){
+                      return item.map(function(num){
+                        return parseFloat(num.toFixed(5));
+                      });
+                    });
+                    outCoeficients.value = arr;
+                }
+
+                document.querySelector("#getCutoffFrequency").onclick = function() {
+                    console.log("--1kHz");
+                    set_cutoff_minus_1k();
+                    var result=get_cutoff_freq();
+                    outSetCutoffFrequency.value = result;
+                }
+
+                document.querySelector("#setCutoffFrequency").onclick = function() {
+                    console.log("+1kHz");
+                    set_cutoff_plus_1k();
+                    var result=get_cutoff_freq();
+                    outSetCutoffFrequency.value = result;
+                }
+
+                document.querySelector("#plusNumberTaps").onclick = function() {
+                    console.log("Oh noe");
+                    set_tap_number_plus_10();
+                    var result = get_tap_number()
+                    outSetNumberTaps.value = result;
+                }
+                document.querySelector("#minusNumberTaps").onclick = function() {
+                    console.log("Oh noe");
+                    set_tap_number_minus_10();
+                    var result = get_tap_number()
+                    outSetNumberTaps.value = result;
+                }
               }
               document.body.appendChild(script);
             });
+            
         </script>
         <div align="center">
         <canvas id="canvas" ></canvas>
         </div>
         
-        <button class="setCutoffFrequency" type="button">Set Cutoff(Hz)</button>
+        <button id="setCutoffFrequency" type="button">Cutoff +1KHz</button>
+        <button id="getCutoffFrequency" type="button">Cutoff -1Khz</button>
         <textarea class="outSetCutoffFrequency"></textarea>
         
-        <button class="setNumberTaps" type="button">Set Taps</button>
+        <button id="plusNumberTaps" type="button">Tap N+10</button>
+        <button id="minusNumberTaps" type="button">Tap N-10</button>
         <textarea class="outSetNumberTaps"></textarea>
         
-        <button class="recalculateFir" id="recalculateFir" type="button">Calc</button>
-        <textarea class="outCoeficients">1</textarea>
-        
+        <button id="recalculateFir" type="button">Calc</button>
+        <textarea class="outCoeficients"></textarea>
         
         <script>
-            get_cutoff_freq = Module.cwrap("get_cutoff_freq","number",[]);
-            get_tap_number = Module.cwrap("get_tap_number","number",[]);
-            recalculate_fir = Module.cwrap("recalculate_fir",'number',[]);
-            
-            var setCutoffFrequency = document.querySelector('.setCutoffFrequency')
-            var outSetCutoffFrequency = document.querySelector('.outSetCutoffFrequency')
-            var setNumberTaps = document.querySelector('.setNumberTaps')
-            var outSetNumberTaps = document.querySelector('.outSetNumberTaps')
-            var recalculateFir = document.querySelector('.recalculateFir')
-            var outCoeficients = document.querySelector('.outCoeficients')
             
-            //outSetCutoffFrequency.value = get_cutoff_freq();
-            //outSetCutoffFrequency.value = "Hello";
-            //outSetNumberTaps.value = get_tap_number();
-            
-            recalculateFir.addEventListener('click', function(){
-                recalculate_fir();
-                console.log("Oh noe");
-                outCoeficients.value = 2;
-            })
-            
-            document.querySelector("#recalculateFir").onclick = function() {
-                console.log("Oh noe");
-                outCoeficients.value = 2;
-            }
+
+
             
         </script>
         
 
         <pre>
           If no recording, check developer console(Ctrl+Shift+I) or add domain (http://wasm.main.lv) to chrome://flags/#unsafely-treat-insecure-origin-as-secure 
-          Run r, listen with s, apply filtr with q and listen again with s
+          Workflow(r->s->q)
           Supported keys:
           r - record sound buffer
           s - play recorded buffer
@@ -81,7 +133,7 @@
             v0.1 - initial release
         </pre>
         
-        <!--<script src="index.js"></script>-->
+        
 
     </body>
 </html>