瀏覽代碼

seems to work wasm with fibonacci example

Konstantin Ladutenko 5 年之前
父節點
當前提交
0da05285c2

+ 2 - 2
Makefile

@@ -59,14 +59,14 @@ wasm: $(SRCDIR)/nmie-js-wrapper.cc $(CXX_NMIE_HEADERS)
 # 	emcc --bind -lm -Wall -O2 -std=c++11 -s WASM=1 -s NO_EXIT_RUNTIME=1 -s "EXTRA_EXPORTED_RUNTIME_METHODS=['addOnPostRun']" -o nmie.js $(SRCDIR)/nmie-js-wrapper.cc
 
 # 	emcc --bind -lm -Wall -O2 -std=c++11 -s MODULARIZE=1 -s WASM=1 -o nmie.js $(SRCDIR)/nmie-js-wrapper.cc
-	emcc --bind -lm -Wall -O2 -std=c++11 -s MODULARIZE=1 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s ALLOW_MEMORY_GROWTH=1 -s EXPORT_NAME="nmiejs" -s ENVIRONMENT="web" -o nmiejs.js $(SRCDIR)/nmie-js-wrapper.cc
+#	emcc --bind -lm -Wall -O2 -std=c++11 -s MODULARIZE=1 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s ALLOW_MEMORY_GROWTH=1 -s EXPORT_NAME="nmiejs" -s ENVIRONMENT="web" -o nmiejs.js $(SRCDIR)/nmie-js-wrapper.cc
+	emcc --bind -lm -Wall -O3 -std=c++11 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME="nmiejs"' -o ./nmiejs.js $(SRCDIR)/nmie-js-wrapper.cc
 
 # 	emcc -g --bind -lm -Wall -std=c++11 -s WASM=1 -s NO_EXIT_RUNTIME=1 -s "EXTRA_EXPORTED_RUNTIME_METHODS=['addOnPostRun']" -o nmie.js $(SRCDIR)/nmie-js-wrapper.cc
 # 	emcc --bind -lm -Wall -O2 -std=c++11 -s MODULARIZE=1 -s EXPORT_ES6=1 -s WASM=1 -s NO_EXIT_RUNTIME=1 -s "EXTRA_EXPORTED_RUNTIME_METHODS=['addOnPostRun']" -o nmie.js $(SRCDIR)/nmie-js-wrapper.cc
 
 #     "build:codec": "emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='[\"cwrap\"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME=\"fibonacci\"' -o ./fibonacci.js fibonacci.c",
 
-
 # emcc -O2 \
 #     oniguruma/src/.libs/libonig.so \
 #     src/onigasm.cc\

二進制
vue-cli3-webapp/public/fibonacci.wasm


+ 18 - 0
vue-cli3-webapp/public/local.css

@@ -0,0 +1,18 @@
+.field-body .field .field {
+    margin-bottom: 1rem;
+}
+
+.container {
+    margin: 0;
+}
+
+.is-vertical-center {
+    display: flex;
+    align-items: center;
+}
+/*.chart-container {*/
+/*    margin: 0 auto;*/
+/*    border: 1px solid black;*/
+/*    height: 85vh;*/
+/*    min-height: 300px;*/
+/*}*/

+ 24 - 2
vue-cli3-webapp/src/App.vue

@@ -104,7 +104,13 @@
 <script>
   import InputWithUnits from "./components/InputWithUnits.vue";
 
+  // To compile fibbonacci example use
+  //   emcc -O3 -s WASM=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["cwrap"]' -s ALLOW_MEMORY_GROWTH=1 -s MODULARIZE=1 -s 'EXPORT_NAME="fibonacci"' -o ./fibonacci.js fibonacci.c
+  // for and example from https://gist.github.com/ashleygwilliams/32c31a3f5b8c87bf2894108b3534ee4f
+  // You should put *.wasm to public and *.js to src folder
   import fibonacci from './fibonacci.js';
+
+  // import fibonacciModule from "../surma-ashley-test/fibonacci.wasm";
   const module = fibonacci({
     locateFile(path) {
       console.log(path);
@@ -127,6 +133,23 @@
   // }
   // );
 
+  // fetch( {
+  //           locateFile(path) {
+  //             if(path.endsWith('fibonacci.wasm')) {
+  //               return fibonacciModule;
+  //             }
+  //             return path;
+  //           }
+  //         }
+  // ).
+
+  // fetch('fibonacci.wasm'
+  // ).then(response =>
+  //         response.arrayBuffer()
+  // ).then(bytes =>
+  //         console.log(bytes)
+  // );
+
   // alert("test")
   // moduleFib.onRuntimeInitialized = () => {
   //   alert(moduleFib._fib(12));
@@ -168,8 +191,7 @@
   //   // Qabs.push(nmie.GetQabs());
   //
   //   console.log(nmie.GetQsca());
-  // };
-
+  //q
   // console.log(Object.keys(nmie));
   //import ReactiveChart from "./components/ReactiveChart.vue";
 // import VueWasm from 'vue-wasm';

+ 47 - 0
vue-cli3-webapp/src/components/InputWithUnits.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="field has-addons">
+        <p class="control">
+            <a class="button is-static input-with-units-title">
+                {{ title }}
+            </a>
+        </p>
+        <p class="control">
+            <b-input v-model="value" type="number" step="any"
+                     class="input-with-units-value"></b-input>
+        </p>
+        <p class="control">
+            <a class="button is-static input-with-units-units">
+                 {{ units }}
+            </a>
+        </p>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "InputWithUnits",
+        watch: {
+            value: {
+                handler: function () {
+                    this.$emit('newdata',this.value);
+                }
+            },
+            deep: true
+        },
+        props: ['title', 'units', 'value']
+    }
+</script>
+
+<style scoped>
+.input-with-units-title {
+    width:4rem;
+}
+
+.input-with-units-value {
+    width:6rem;
+}
+
+.input-with-units-units {
+    width:3rem;
+}
+</style>

+ 27 - 0
vue-cli3-webapp/src/components/ReactiveChart.vue

@@ -0,0 +1,27 @@
+<template>
+    <div :ref="chart.uuid"></div>
+</template>
+<script>
+    export default {
+        name: "ReactiveCart",
+        props: ["chart"],
+        mounted() {
+            Plotly.newPlot(this.$refs[this.chart.uuid], this.chart.traces,
+                this.chart.layout,
+                {responsive: true, showSendToCloud: true, displaylogo: false}
+            );
+        },
+        watch: {
+            chart: {
+                handler: function() {
+                    Plotly.react(
+                        this.$refs[this.chart.uuid],
+                        this.chart.traces,
+                        this.chart.layout
+                    );
+                },
+                deep: true
+            }
+        }
+    }
+</script>

文件差異過大導致無法顯示
+ 7 - 0
vue-cli3-webapp/src/fibonacci.js


部分文件因文件數量過多而無法顯示