Demo wasm page

2 files changed, 76 insertions, 15 deletions

diff --git a/Build/Makefile b/Build/Makefile
index f56677d..06076fb 100644
--- a/Build/Makefile
+++ b/Build/Makefile
@@ -2,7 +2,7 @@ EMCC=emcc
 CC=gcc
 SOURCEDIR=../NaiveFFT
 LDFLAGS=-lm
-EM_LDFALGS=-s LLD_REPORT_UNDEFINED
+EM_LDFALGS=-s USE_SDL=2  -s MAX_WEBGL_VERSION=2 -s MIN_WEBGL_VERSION=2 -s LLD_REPORT_UNDEFINED -s USE_GLFW=3
 
 
 make:
@@ -10,8 +10,9 @@ make:
 	$(CC) -c $(SOURCEDIR)/fft.c -g3
 	$(CC) main.o fft.o -o NaiveFFT $(LDFLAGS)
 
+#https://github.com/emscripten-core/emscripten/issues/6882 no malloc
 emcc:
-	$(EMCC) $(SOURCEDIR)/main.c $(SOURCEDIR)/fft.c -s WASM=1 -O3 -o index.js $(EM_LDFALGS) -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'
+	$(EMCC) $(SOURCEDIR)/main.c $(SOURCEDIR)/fft.c -s WASM=1 -O0 -o index.js $(EM_LDFALGS) -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'
 
 	
 web:
diff --git a/Build/index.html b/Build/index.html
index 8f510ac..1a571f7 100644
--- a/Build/index.html
+++ b/Build/index.html
@@ -17,18 +17,23 @@
             .then(response =>
               response.arrayBuffer()
             ).then(buffer => {
-              Module.canvas = document.getElementById("canvas");
+              //Module.canvas = document.getElementById("canvas");
               Module.wasmBinary = buffer;
               var script = document.createElement('script');
               script.src = "index.js";
               script.onload = function() {
                 console.log("Emscripten boilerplate loaded.");
                 run_dft = Module.cwrap("dft",  [],[['float'],['float'],'number','number']);
-                run_fft= Module.cwrap( "fft_1",[],[['float'],['float'],'number','number']);
+                run_fft= Module.cwrap("fft_1",[],[['float'],['float'],'number','number']);
 
 
 
-                var inputData = document.querySelector('.inputData');
+                var inputDataI    = document.querySelector('.inputDataI');
+                var inputDataIerr = document.querySelector('.inputDataIerr');
+                var inputDataQ    = document.querySelector('.inputDataQ');
+                var inputDataQerr = document.querySelector('.inputDataQerr');
+                var outputDataI   = document.querySelector('.outputDataI');
+                var outputDataQ   = document.querySelector('.outputDataQ');
 
                 document.querySelector("#calcButton").onclick = function() {
                       console.log("calc FFT");
@@ -42,18 +47,67 @@
                           }
                       }
 
-                      var strArr = inputData.value;
-                      strArr = strArr.replace(/ +(?= )/g,'');
-                      var splArr = strArr.split(" ");
-                      if (splArr.some(i => i != parseFloat(i))) {
-                        throw i + " is not integer"
+                      function checkArr(inputData,errorOutput) {
+                        var strArr = inputDataI.value;
+                        
+                        strArr = strArr.replace(/ +(?= )/g,'');
+                        var splArr = strArr.split(" ");
+                        var data = Array(splArr.length).fill(0);
+                        for (let i=0; i<splArr.length;i++) {
+                          try {
+                            var j=splArr[i];
+                            if ( j != parseFloat(j)) throw new Error("ERROR: not float "+splArr[i]+" at index "+i);
+                            data[i] = parseFloat(j)
+                          } catch (err) {
+                            console.log("Error: ",err.message)
+                            errorOutput.innerHTML = err.message;
+                            return {"result":false,"data":[]};
+                          }
+
+                        }
+                        return {"result":true,"data":data};
                       }
+                      console.log("checkArr");
+                      var arrIok = checkArr(inputDataI,inputDataIerr);
+                      console.log("checkArr");
+                      var arrQok = checkArr(inputDataQ,inputDataQerr);
                       //max size 8 values, as thats enought for a demo
                       //https://stackoverflow.com/questions/17883799/how-to-handle-passing-returning-array-pointers-to-emscripten-compiled-code
+                      if (!arrIok.result) return;
+                      if (!arrQok.result) return;
+
+                      var N=8;
+                      var myArray_i = cArray(N);
+                      var myArray_q = cArray(N);
+
+                      //set test data
+                      for(let i=0,j=0;i<N,j<arrIok.data.length;i++,j++) {
+                        myArray_i.data[i] = arrIok.data[j];
+                      }
+                      for(let i=0,j=0;i<N,j<arrQok.data.length;i++,j++) {
+                        myArray_q.data[i] = arrQok.data[j];
+                      }
+
+                      //console.log(typeof myArray_i);
+                      //console.log(myArray_i);
                       
-                      
-                      myArray = cArray(8).fill(0.0);
 
+                      run_dft(myArray_i.offset,myArray_q.offset,N,1);
+
+                      console.log(myArray_i.data);
+                      console.log(myArray_q.data)
+                      function outputResult(array,output) {
+                        var arr = Array(array.slice(0,N-1));
+                      
+                        arr = arr.map(function(item){
+                          return item.map(function(num){
+                            return parseFloat(num.toFixed(2));
+                          });
+                        });
+                        output.value = arr;
+                      }
+                      outputResult(myArray_i.data, outputDataI);
+                      outputResult(myArray_q.data, outputDataQ);
                       
                   }
 
@@ -64,9 +118,15 @@
             
     </script>
 
-    FFT demo
-    <textarea class="inputData">12 12 12</textarea>
-    <button id="calcButton" type="button">Cals</button>
+    <script>
+    </script>
+
+    FFT demo, max value N=8 </br>
+    Input I:<textarea class="inputDataI">1 1 0</textarea><sup class="inputDataIerr"></sup></br>
+    Input Q:<textarea class="inputDataQ">0 0 0</textarea><sup class="inputDataQerr"></sup></br>
+    Output I:<textarea class="outputDataI"></textarea></br>
+    Output Q:<textarea class="outputDataQ"></textarea></br>
+    <button id="calcButton" type="button">Cals</button></br>
 
     <script>
       function calcFFT() {