Home Explore Help
Sign In
k.ladutenko
/
scatt
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

cleanup

Konstantin Ladutenko 5 years ago
parent
c41cf5e3e2
commit
bcfd6243a3
3 changed files with 116 additions and 269 deletions
Split View Show Diff Stats
  1. 2 163
      vue-cli3-webapp/public/index.html
  2. 106 104
      vue-cli3-webapp/src/App.vue
  3. 8 2
      vue-cli3-webapp/src/components/InputWithUnits.vue

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

@@ -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
View File 

@@ -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
View File 

@@ -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>