Konstantin Ladutenko 5 роки тому
батько
коміт
bcfd6243a3

+ 2 - 163
vue-cli3-webapp/public/index.html

@@ -4,177 +4,16 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+<!--  <link rel="icon" href="<%= BASE_URL %>favicon.ico">-->
 
   <title>Mie calculator</title>
-<!--  <link rel='stylesheet' href='<%= BASE_URL %>buefy.min.css'>-->
-<!--  <link rel='stylesheet' href='<%= BASE_URL %>materialdesignicons.min.css'>-->
-<!--  <link rel='stylesheet' href='<%= BASE_URL %>all.css'>-->
-  <!--    <link rel='stylesheet' href='https://unpkg.com/buefy/dist/buefy.min.css'>-->
-  <!--    <link rel='stylesheet' href='https://cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css'>-->
-  <!--    <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.0.6/css/all.css'>-->
-
 </head>
 <body>
+
 <noscript>
   <strong>We're sorry but Mie calculator doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
 <div id="app"></div>
 
-<!--&lt;!&ndash; partial:index.partial.html &ndash;&gt;-->
-<!--<div id="app" class="container">-->
-<!--  <b-loading :active.sync="isLoading" :can-cancel="isLoading"></b-loading>-->
-
-<!--  <section style="padding: 1rem">-->
-<!--    <button class="button is-primary is-medium"-->
-<!--            @click="isShowInfo = true">-->
-<!--      Show info-->
-<!--    </button>-->
-<!--    <b-modal :active.sync="isShowInfo">-->
-<!--      <div class="message" style="padding: 2rem">-->
-<!--        <span style="text-decoration: underline;text-emphasis: before;font-weight: bold;">Usage:</span>-->
-<!--        <br><br>-->
-<!--        Feel free to use provided software, however, use it at your own risk. We made our best effort to verify-->
-<!--        it is correct, however, we do not provide any warranty.-->
-<!--        <br><br>-->
-<!--        If it was usefull for your project, please, cite in your related paper the following reference:-->
-<!--        <br><br>-->
-<!--        <article style="margin-left: 1rem">-->
-<!--          <div style="font-style: italic; padding-bottom: 0.5rem">"Mie calculation of electromagnetic near-field-->
-<!--            for a multilayered sphere"</div>-->
-<!--          Konstantin Ladutenko, Umapada Pal, Antonio Rivera, Ovidio Peña-Rodríguez<br>-->
-<!--          <span style="font-weight: bold">Comp. Phys. Comm., vol. 214, pp. 225–230, 2017</span>-->
-<!--        </article>-->
-<!--      </div>-->
-<!--    </b-modal>-->
-<!--  </section>-->
-
-<!--  <section>-->
-<!--    <div class="field is-horizontal">-->
-<!--      <div class="field-label is-normal">-->
-<!--        <label class="label">Units</label>-->
-<!--      </div>-->
-<!--      <div class="field-body">-->
-<!--        <b-select v-model="units">-->
-<!--          <option units="nm">nm</option>-->
-<!--          <option units="mkm">mkm</option>-->
-<!--          <option units="mm">mm</option>-->
-<!--          <option units="cm">cm</option>-->
-<!--          <option units="m">m</option>-->
-<!--          <option units="km">km</option>-->
-<!--        </b-select>-->
-<!--      </div>-->
-<!--    </div>-->
-
-<!--    <div class="field is-horizontal">-->
-<!--      <div class="field-label is-normal">-->
-<!--        <label class="label">Wavelength</label>-->
-<!--      </div>-->
-<!--      <div class="field-body">-->
-<!--        <div class="field is-grouped is-grouped-multiline">-->
-<!--          <input-with-units title="from" v-bind:units="units"-->
-<!--                            v-bind:value="simulationSetup.fromWL"-->
-<!--                            @newdata="simulationSetup.fromWL=$event"></input-with-units>-->
-<!--          <input-with-units title="to" v-bind:units="units"-->
-<!--                            v-bind:value="simulationSetup.toWL"-->
-<!--                            @newdata="simulationSetup.toWL=$event"></input-with-units>-->
-<!--          <input-with-units title="step" v-bind:units="units"-->
-<!--                            v-bind:value="simulationSetup.stepWL"-->
-<!--                            @newdata="simulationSetup.stepWL=$event"></input-with-units>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
-
-
-<!--    <div class="field is-horizontal">-->
-<!--      <div class="field-label is-normal">-->
-<!--        <label class="label">Spherical particle</label>-->
-<!--      </div>-->
-<!--      <div class="field-body">-->
-<!--        <div class="field is-grouped is-grouped-multiline">-->
-<!--          <input-with-units title="R" v-bind:units="units"-->
-<!--                            v-bind:value="simulationSetup.R"-->
-<!--                            @newdata="simulationSetup.R=$event"></input-with-units>-->
-<!--          <input-with-units title="Re(n)" units=""-->
-<!--                            v-bind:value="simulationSetup.reN"-->
-<!--                            @newdata="simulationSetup.reN=$event"></input-with-units>-->
-<!--          <input-with-units title="Im(n)" units=""-->
-<!--                            v-bind:value="simulationSetup.imN"-->
-<!--                            @newdata="simulationSetup.imN=$event"></input-with-units>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
-
-<!--    <div  class="field is-horizontal">-->
-<!--      <div class="field-label is-normal">-->
-<!--        <label class="label">Modes to plot</label>-->
-<!--      </div>-->
-<!--      <div class="field-body">-->
-<!--        <b-input v-model="simulationSetup.total_mode_n" type='number' min=1 style="width:7rem"></b-input>-->
-<!--      </div>-->
-<!--    </div>-->
-<!--    <div>-->
-<!--      <b-button class="is-primary is-medium" @click="runMie();plotResults();">-->
-<!--        Run simulation-->
-<!--      </b-button><br>-->
-<!--      It took {{ ttime }} s.-->
-<!--    </div>-->
-<!--    <div class="field is-grouped is-grouped-multiline">-->
-<!--      <b-switch v-model="plotSelector.isPlotQsca">-->
-<!--        Qsca-->
-<!--      </b-switch>-->
-<!--      <b-switch v-model="plotSelector.isPlotQabs">-->
-<!--        Qabs-->
-<!--      </b-switch>-->
-<!--    </div>-->
-<!--    &lt;!&ndash;        <b-table :data="plotSelectorData" :columns="plotSelectorColumns" :mobile-cards="isShowInfo"></b-table>&ndash;&gt;-->
-<!--    <table class="table is-narrow">-->
-<!--      <thead>-->
-<!--      <tr>-->
-<!--        <th v-for="mode_name in simulationRuntime.mode_n_names">-->
-<!--          {{ mode_name.name == 'type' ? '': mode_name.name}}-->
-<!--        </th>-->
-<!--      </tr>-->
-<!--      </thead>-->
-<!--      <tbody>-->
-<!--      <tr>-->
-<!--        <th>E</th>-->
-<!--        <td v-for="(mode,index) in plotSelector.isPlotModeE">-->
-<!--          <template v-if="(simulationRuntime.total_mode_n_evaluated - 1) < index">-->
-<!--            <b-checkbox v-model="plotSelector.isPlotModeE[index]" disabled> </b-checkbox>-->
-<!--          </template>-->
-<!--          <template v-else>-->
-<!--            <b-checkbox v-model="plotSelector.isPlotModeE[index]"> </b-checkbox>-->
-<!--          </template>-->
-<!--        </td>-->
-<!--      </tr-->
-<!--      <tr>-->
-<!--        <th>H</th>-->
-<!--        <td v-for="(mode,index) in plotSelector.isPlotModeH">-->
-<!--          <template v-if="(simulationRuntime.total_mode_n_evaluated - 1) < index">-->
-<!--            <b-checkbox v-model="plotSelector.isPlotModeH[index]" disabled> </b-checkbox>-->
-<!--          </template>-->
-<!--          <template v-else>-->
-<!--            <b-checkbox v-model="plotSelector.isPlotModeH[index]"> </b-checkbox>-->
-<!--          </template>-->
-<!--        </td>-->
-<!--      </tr>-->
-<!--      </tbody>-->
-<!--    </table>-->
-
-<!--  </section>-->
-<!--  <div class="chart-container">-->
-<!--    <reactive-chart :chart="chart"></reactive-chart>-->
-<!--  </div>-->
-
-<!--</div>-->
-<!--&lt;!&ndash;<script type="text/javascript" async src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG">&ndash;&gt;-->
-<!--<script src="<%= BASE_URL %>plotly-latest.min.js"></script>-->
-<!--&lt;!&ndash;<script src='vue.min.js'></script>&ndash;&gt;-->
-<!--<script src='<%= BASE_URL %>buefy.min.js'></script>-->
-<!--&lt;!&ndash;<script  src="./tested-components.js"></script>&ndash;&gt;-->
-<!--&lt;!&ndash;<script src="./dist/bundle.js"></script>&ndash;&gt;-->
-<!--<link rel="stylesheet" type="text/css" href="<%= BASE_URL %>local.css">-->
-
 </body>
 </html>

+ 106 - 104
vue-cli3-webapp/src/App.vue

@@ -105,7 +105,7 @@
   import InputWithUnits from "./components/InputWithUnits.vue";
   import ReactiveChart from "./components/ReactiveChart.vue";
 
-  // You should put *.wasm to public and *.js to src folder
+  // You should put *.wasm to public/ and *.js to src/ folder
 
   // 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
@@ -153,119 +153,121 @@
     console.log(nmie.GetQsca());
   }
 
-const range = (start, stop, step = 1) =>
-        Array(Math.ceil((stop - start) / step)).fill(start).map((x, y) => x + y * step);
+  const range = (start, stop, step = 1) =>
+          Array(Math.ceil((stop - start) / step)).fill(start).map((x, y) => x + y * step);
 
-export default {
-  name: 'app',
-  components: {
-    InputWithUnits,
-    ReactiveChart
-    // HelloWorld
-  },
-  data() {
-    return {
-      window: {
-        width: 0,
-        height: 0
-      },
-      // on change of initial value for __ units __
-      // remember to update this.chart.layout.xaxis.title
-      units: 'nm',
-      simulationRuntime: {
-        mode_n : [],
-        mode_types: range(0,2),
-        mode_names: ['E','H'],
-        WLs: [],
-        Qsca: [],
-        Qabs: [],
-        Qsca_n: [[],[]],
-        Qabs_n: [[],[]],
-        layout: {},
-        trace1: {},
-        trace2: {}
-      },
-      simulationSetup: {
-        stepWL: 0.5,
-        fromWL: 300.0,
-        toWL: 1000.0,
-        R: 100.0,
-        reN: 4.0,
-        imN: 0.01,
-        total_mode_n:4
-      },
-      changes: 0,
-      isShowInfo: false,
-      chart: {
-        uuid: "123",
-        traces: [
-          {
-            y: [],
-            line: {
-              color: "#5e9e7e",
-              width: 4,
-              shape: "line"
+  export default {
+    name: 'app',
+    components: {
+      InputWithUnits,
+      ReactiveChart
+      // HelloWorld
+    },
+    data() {
+      return {
+        window: {
+          width: 0,
+          height: 0
+        },
+        // on change of initial value for __ units __
+        // remember to update this.chart.layout.xaxis.title
+        units: 'nm',
+        simulationRuntime: {
+          mode_n : [],
+          mode_types: range(0,2),
+          mode_names: ['E','H'],
+          WLs: [],
+          Qsca: [],
+          Qabs: [],
+          Qsca_n: [[],[]],
+          Qabs_n: [[],[]],
+          layout: {},
+          trace1: {},
+          trace2: {}
+        },
+        simulationSetup: {
+          stepWL: 0.5,
+          fromWL: 300.0,
+          toWL: 1000.0,
+          R: 100.0,
+          reN: 4.0,
+          imN: 0.01,
+          total_mode_n:4
+        },
+        changes: 0,
+        isShowInfo: false,
+        chart: {
+          uuid: "123",
+          traces: [
+            {
+              y: [],
+              line: {
+                color: "#5e9e7e",
+                width: 4,
+                shape: "line"
+              }
+            }
+          ],
+          layout: {
+            title:'reactive charts',
+            xaxis: {
+              // initial value should be same as in units
+              title: 'Wavelength, nm'
+            },
+            yaxis: {
+              title: 'yaxis title'
             }
-          }
-        ],
-        layout: {
-          title:'reactive charts',
-          xaxis: {
-            // initial value should be same as in units
-            title: 'Wavelength, nm'
-          },
-          yaxis: {
-            title: 'yaxis title'
           }
         }
-      }
-    };
+      };
 
-  },
-  created() {
-    window.addEventListener('resize', this.handleResize)
-    this.handleResize();
-  },
-  destroyed() {
-    window.removeEventListener('resize', this.handleResize)
-  },
-  mounted(){ this.runMie();},
-  watch: {
-    simulationSetup: {
-      handler: function () {
-        this.runMie();
-      },
-      deep: true
     },
-    units:{
-      handler: function () {
-        this.chart.layout.xaxis.title = "Wavelength, "+this.units;
+    created() {
+      window.addEventListener('resize', this.handleResize)
+      this.handleResize();
+    },
+    destroyed() {
+      window.removeEventListener('resize', this.handleResize)
+    },
+    mounted(){ this.runMie();},
+    watch: {
+      simulationSetup: {
+        handler: function () {
+          this.runMie();
+        },
+        deep: true
+      },
+      units:{
+        handler: function () {
+          this.chart.layout.xaxis.title = "Wavelength, "+this.units;
+        }
       }
-    }
-  },
-  methods: {
-    handleResize() {
-      this.window.width = window.innerWidth;
-      this.window.height = window.innerHeight;
     },
-    runMie(){
-
-      // let t0 = performance.now();
-      // let fromWL = parseFloat(this.simulationSetup.fromWL);
-      // let toWL = parseFloat(this.simulationSetup.toWL);
-      // let stepWL = parseFloat(this.simulationSetup.stepWL);
-      // let R = parseFloat(this.simulationSetup.R);
-      // let reN = parseFloat(this.simulationSetup.reN);
-      // let imN = parseFloat(this.simulationSetup.imN);
-      // this.simulationRuntime.Qsca = [], this.simulationRuntime.Qabs = [];
-      // this.simulationRuntime.Qsca_n = [[],[]], this.simulationRuntime.Qabs_n = [[],[]];
-      // nmie.ClearTarget();
-      // nmie.AddTargetLayerReIm(R, reN, imN)
+    methods: {
+      handleResize() {
+        this.window.width = window.innerWidth;
+        this.window.height = window.innerHeight;
+      },
+      runMie(){
+        module.onRuntimeInitialized = () => {
+          const nmie = new module.nmie();
 
+          // let t0 = performance.now();
+          // let fromWL = parseFloat(this.simulationSetup.fromWL);
+          // let toWL = parseFloat(this.simulationSetup.toWL);
+          // let stepWL = parseFloat(this.simulationSetup.stepWL);
+          let R = parseFloat(this.simulationSetup.R);
+          let reN = parseFloat(this.simulationSetup.reN);
+          let imN = parseFloat(this.simulationSetup.imN);
+          this.simulationRuntime.Qsca = [], this.simulationRuntime.Qabs = [];
+          this.simulationRuntime.Qsca_n = [[], []], this.simulationRuntime.Qabs_n = [[], []];
+          nmie.ClearTarget();
+          nmie.AddTargetLayerReIm(R, reN, imN)
+        }
 
-      this.changes++;
-    }
-  },
+        this.changes++;
+      }
+    },
 
 }
 </script>

+ 8 - 2
vue-cli3-webapp/src/components/InputWithUnits.vue

@@ -6,7 +6,7 @@
             </a>
         </p>
         <p class="control">
-            <b-input v-model="value" type="number" step="any"
+            <b-input v-model="valueLocal" type="number" step="any"
                      class="input-with-units-value"></b-input>
         </p>
         <p class="control">
@@ -28,6 +28,12 @@
             },
             deep: true
         },
+        data () {
+            return {
+                valueLocal: this.value
+            }
+        },
+
         props: ['title', 'units', 'value']
     }
 </script>
@@ -44,4 +50,4 @@
 .input-with-units-units {
     width:3rem;
 }
-</style>
+</style>