set number of layers in GetParticleParameters.vue

guiapp/package-lock.json

@@ -10,6 +10,7 @@
         "@quasar/extras": "^1.0.0",
         "@types/emscripten": "^1.39.5",
         "core-js": "^3.6.5",
+        "cubic-spline-ts": "^3.0.8",
         "lodash": "^4.17.21",
         "mathjs": "^9.5.0",
         "quasar": "^2.0.0",
@@ -4748,6 +4749,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
       "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A=="
     },
+    "node_modules/cubic-spline-ts": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/cubic-spline-ts/-/cubic-spline-ts-3.0.8.tgz",
+      "integrity": "sha512-eknnPF7IzbCGNqVj7wkWPsIegFHuRs4RtSc2L21J2o2PRuZZcZvVr23mPdARFhn1/DG9lqMcuz7jQ1W36y48nQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
@@ -17270,6 +17276,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.17.tgz",
       "integrity": "sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A=="
     },
+    "cubic-spline-ts": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmjs.org/cubic-spline-ts/-/cubic-spline-ts-3.0.8.tgz",
+      "integrity": "sha512-eknnPF7IzbCGNqVj7wkWPsIegFHuRs4RtSc2L21J2o2PRuZZcZvVr23mPdARFhn1/DG9lqMcuz7jQ1W36y48nQ=="
+    },
     "debug": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",

guiapp/package.json

@@ -13,6 +13,7 @@
     "@quasar/extras": "^1.0.0",
     "@types/emscripten": "^1.39.5",
     "core-js": "^3.6.5",
+    "cubic-spline-ts": "^3.0.8",
     "lodash": "^4.17.21",
     "mathjs": "^9.5.0",
     "quasar": "^2.0.0",

guiapp/src/components/GetParticleParameters.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="row items-baseline">
+    <div class="col-xs-12 col-sm-auto text-weight-bold text-center q-px-md q-py-sm">
+      <div :style="flexRowTitleStyle">
+        Spherical particle
+      </div>
+    </div>
+    <div class="col-xs-grow col-sm">
+      <div class="row justify-xs-center justify-sm-start items-baseline">
+
+        <div class="col-auto" >
+          <div class="q-gutter-x-md">
+            <q-radio v-model="particleType" dense size='sm' val="bulk" label="bulk" />
+            <q-radio v-model="particleType" dense size='sm' val="core-shell" label="core-shell" />
+          </div>
+
+        </div>
+
+        <div class="col-auto q-px-md">
+          <div class="row justify-xs-center justify-sm-start items-baseline">
+            <div class="col-auto" >
+              <q-radio v-model="particleType" dense size='sm' val="multilayer" label="multilayer" />
+            </div>
+            <div class="col-auto" >
+              <q-input
+                  v-model.number="numberOfLayers"
+                  :disable="particleType!='multilayer'"
+                  :outlined="particleType=='multilayer'"
+                  :filled="particleType!='multilayer'"
+                  type="number"
+                  class="q-px-sm"
+                  min=1
+                  max=10
+                  step=1
+                  dense
+                  style="width: 6em"
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="col-auto" >
+          numOfLayers: {{numberOfLayers}}
+          <br> layers: {{layers}}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+    ref,
+    reactive,
+  // computed,
+  watch
+
+  } from 'vue'
+import { useStore } from 'src/store'
+import { flexRowTitleStyle } from 'components/utils'
+import {cloneDeep} from 'lodash'
+
+
+export default defineComponent({
+
+  name: 'GetHostIndex',
+  components: {},
+
+  setup() {
+    const $store = useStore()
+
+    // const isSourceSameUnits = computed({
+    //   get: () => $store.state.guiRuntime.isSourceSameUnits,
+    //   set: val => $store.commit('guiRuntime/setIsSourceSameUnits', val)
+    // })
+
+    const particleType=ref('bulk')
+    const numberOfLayers=ref(1)
+
+    // const layers = computed({
+    //   get: () => cloneDeep($store.state.simulationSetup.gui.layers),
+    //   set: /*val*/ () => {
+    //     // // Doesn't work?
+    //     // $store.commit('simulationSetup/setLayers', val)
+    //   }
+    // })
+
+    let layers = reactive(cloneDeep($store.state.simulationSetup.gui.layers))
+
+    watch($store.state.simulationSetup.gui.layers, ()=>{
+      layers = reactive(cloneDeep($store.state.simulationSetup.gui.layers))
+    })
+
+    watch(layers, ()=>{
+      $store.commit('simulationSetup/setLayers', layers)
+    })
+
+    watch(particleType, ()=>{
+      if (particleType.value=='bulk') numberOfLayers.value = 1
+      if (particleType.value=='core-shell') numberOfLayers.value = 2
+      if (particleType.value=='multilayer') numberOfLayers.value = 3
+    })
+
+    watch(numberOfLayers, ()=>{
+      numberOfLayers.value = parseInt(numberOfLayers.value.toString())
+      if (isNaN(numberOfLayers.value)) numberOfLayers.value = 3
+      if (numberOfLayers.value < 1) numberOfLayers.value = 1
+      if (numberOfLayers.value > 10) numberOfLayers.value = 10
+
+      while (numberOfLayers.value < layers.length) {
+        layers.pop();
+      }
+      let coreR = layers[0].layerWidth;
+      while (numberOfLayers.value > layers.length) {
+        // r_prev = r_prev*1.1;
+        layers.push(
+            {
+              layerWidth: coreR*0.1,
+              materialName: 'nk',
+              n: 4.0,
+              k: 0.01,
+              nSpline: undefined,
+              kSpline: undefined,
+            }
+        );
+      }
+
+    })
+
+    return { flexRowTitleStyle, particleType, numberOfLayers, layers
+      }
+  },
+})
+</script>

guiapp/src/components/GetSourceParameters.vue

@@ -4,7 +4,7 @@
       <div :style="flexRowTitleStyle"> {{rowTitle}} </div>
     </div>
     <div class="col-xs-grow col-sm">
-      <div class="row justify-xs-center justify-sm-start items-center">
+      <div class="row justify-xs-center justify-sm-start items-baseline">
 
         <div class="col-auto"><input-with-units
             v-model:input-result="fromSource"
@@ -20,13 +20,16 @@
             :units="sourceUnits"
             title="to"
         /></div>
-        <div class="col-auto"><input-with-units
+        <div class="col-auto">
+          <input-with-units
             v-model:input-result="pointsSource"
             v-model:is-showing-help="isShowingHelpForInputWithUnits"
             :initial-expression="pointsSource.toString()"
-            title="points"
-            units=""
-        /></div>
+            :title="isPointsToggle ? `points` : `step`"
+            :units="isPointsToggle ? `` : sourceUnits"
+          />
+          <q-toggle v-model="isPointsToggle" dense class="q-ml-md"/>
+        </div>
 
       </div>
     </div>
@@ -37,6 +40,7 @@
 import {
   defineComponent,
   computed,
+  ref
   } from 'vue'
 import { useStore } from 'src/store'
 import InputWithUnits from 'components/InputWithUnits.vue'
@@ -48,6 +52,8 @@ export default defineComponent({
   components: {InputWithUnits,},
 
   setup() {
+    const isPointsToggle = ref(true)
+
     const $store = useStore()
 
     const isShowingHelpForInputWithUnits = computed({
@@ -82,12 +88,6 @@ export default defineComponent({
       }
     })
 
-    const pointsSource = computed({
-      get: () => $store.state.simulationSetup.gui.pointsWL,
-      set: val => $store.commit('simulationSetup/setPointsWL', val)
-    })
-
-
     const rowTitle = computed(()=>{
       if (sourceUnits.value.endsWith('Hz')) {return 'Frequency'}
       if (sourceUnits.value.endsWith('eV')) {return 'Energy'}
@@ -122,9 +122,22 @@ export default defineComponent({
       }
     })
 
+    const pointsSource = computed({
+      get: () => {
+        if (isPointsToggle.value) return $store.state.simulationSetup.gui.pointsWL
+        return (toSource.value-fromSource.value)/($store.state.simulationSetup.gui.pointsWL-1)
+      },
+      set: val => {
+        if (isPointsToggle.value) $store.commit('simulationSetup/setPointsWL', val)
+        else {
+          $store.commit('simulationSetup/setPointsWL', 1+(toSource.value-fromSource.value)/val)
+        }
+      }
+    })
+
     return { fromSource, toSource, pointsSource, isShowingHelpForInputWithUnits,
       flexRowTitleStyle, rowTitle,
-      sourceUnits}
+      sourceUnits, isPointsToggle,  }
   },
 })
 </script>

guiapp/src/components/GetUnits.vue

@@ -35,8 +35,9 @@
                 :options="sourceUnitsOptions"
                 style="width:7em"
                 class="q-pa-xs"
-                :class="{'q-field--disabled': isSourceSameUnits}"
-                outlined
+                :disable="isSourceSameUnits"
+                :outlined="!isSourceSameUnits"
+                :filled="isSourceSameUnits"
                 dense
                 options-dense
                 option-value="label"

guiapp/src/pages/Near-field.vue

@@ -15,12 +15,15 @@ import {
 } from 'vue'
 import GetHostIndex from 'components/GetHostIndex.vue'
 import GetSourceParameters from 'components/GetSourceParameters.vue'
+// import GetParticleParameters from 'components/GetParticleParameters.vue'
 // import { useStore } from 'src/store'
 
 
 export default defineComponent({
   name: 'PageIndex',
-  components: {GetHostIndex, GetSourceParameters },
+  components: {GetHostIndex, GetSourceParameters,
+    // GetParticleParameters
+  },
   setup() {
     // const $store = useStore()
     return {}

guiapp/src/pages/Spectrum.vue

@@ -1,13 +1,15 @@
 <template>
   <q-page class="column q-px-md">
-    <div class="q-ma-sm"/>
+    <div class="q-ma-md"/>
     <GetHostIndex/>
     <div class="q-ma-xs"/>
     <GetUnits/>
     <div class="q-ma-xs"/>
     <GetSourceParameters/>
-    <div class="col-auto">
-      Input result: {{$store.state.simulationSetup.gui.fromWL}}
+    <div class="q-ma-xs"/>
+    <GetParticleParameters/>
+    <div class="col-auto q-pa-md">
+      Input result: {{$store.state.simulationSetup.gui.layers}}
     </div>
   </q-page>
 </template>
@@ -19,12 +21,14 @@ import {
 import GetUnits from 'components/GetUnits.vue'
 import GetHostIndex from 'components/GetHostIndex.vue'
 import GetSourceParameters from 'components/GetSourceParameters.vue'
+import GetParticleParameters from 'components/GetParticleParameters.vue'
 // import { useStore } from 'src/store'
 
 
 export default defineComponent({
   name: 'PageIndex',
-  components: {GetUnits, GetHostIndex, GetSourceParameters },
+  components: {GetUnits, GetHostIndex, GetSourceParameters,
+    GetParticleParameters},
   setup() {
     // const $store = useStore()
     return {}

guiapp/src/store/simulation-setup/mutations.ts

@@ -1,5 +1,5 @@
 import { MutationTree } from 'vuex';
-import { simulationSetupStateInterface as sssi, simulationSetup } from './state';
+import { simulationSetupStateInterface as sssi, simulationSetup, layer } from './state';
 import { cloneDeep } from 'lodash'
 
 const mutation: MutationTree<sssi> = {
@@ -23,6 +23,8 @@ const mutation: MutationTree<sssi> = {
   setFromWL    (state: sssi, val: number) {state.gui.fromWL    = val},
   setToWL      (state: sssi, val: number) {state.gui.toWL      = val},
   setPointsWL  (state: sssi, val: number) {state.gui.pointsWL  = val},
+
+  setLayers    (state: sssi, val: layer[]) {state.gui.layers = cloneDeep(val) }
 };
 
 export default mutation;

guiapp/src/store/simulation-setup/state.ts

@@ -1,7 +1,19 @@
 import { cloneDeep } from 'lodash'
+import Spline from 'cubic-spline-ts'
+
+export interface layer {
+  layerWidth: number
+  materialName: string
+  n: number
+  k: number
+  nSpline: Spline|undefined
+  kSpline: Spline|undefined
+}
+
 export interface simulationSetup {
   hostIndex: number
   fromWL: number; toWL:number; pointsWL:number
+  layers: layer[]
 }
 
 export interface simulationSetupStateInterface {
@@ -11,10 +23,14 @@ export interface simulationSetupStateInterface {
 }
 
 function setupFactory(hostIndex = 1,
-                      fromWL = 300, toWL=1000, pointsWL=100
+                      fromWL = 300, toWL=1000, pointsWL=101,
+                      layers = [
+                        {layerWidth:100, n:4, k:0.01, materialName:'nk', nSpline:undefined, kSpline:undefined},
+                      ]
                      ):simulationSetup {
   return {hostIndex:hostIndex,
-    fromWL:fromWL, toWL:toWL, pointsWL:pointsWL }
+    fromWL:fromWL, toWL:toWL, pointsWL:pointsWL,
+  layers: cloneDeep(layers)}
 }
 
 function state(): simulationSetupStateInterface {