add ShowSpectrumRange.vue

guiapp/src/App.vue

@@ -15,9 +15,8 @@ export default defineComponent({
     void $store.dispatch('guiRuntime/activateMaterial', 'main/Al/McPeak.yml')
     void $store.dispatch('guiRuntime/activateMaterial', 'main/Cu/McPeak.yml')
     void $store.dispatch('guiRuntime/activateMaterial', 'main/Si/Green-2008.yml')
-    void $store.dispatch('guiRuntime/activateMaterial', 'main/SiO2/Lemarchand.yml')
-    void $store.dispatch('guiRuntime/activateMaterial', 'main/TiO2/Siefke.yml')
-    void $store.dispatch('guiRuntime/activateMaterial', 'main/Pt/Werner.yml')
+    void $store.dispatch('guiRuntime/activateMaterial', 'main/SiO2/Gao.yml')
+    void $store.dispatch('guiRuntime/activateMaterial', 'main/TiO2/Sarkar.yml')
   }
 })
 </script>

guiapp/src/components/GetParticleParameters.vue

@@ -103,9 +103,19 @@
                      && !(scope.opt.name=='nk-constant' || scope.opt.name=='PEC')"
                 >
                   <q-item-section>
-                    <q-item-label>{{ scope.opt.name }}</q-item-label>
+                    <q-item-label>{{ scope.opt.name }}
+
+                    </q-item-label>
                     <!--                  <q-item-label caption>{{ scope.opt.description }}</q-item-label>-->
                   </q-item-section>
+                  <q-item-section v-if="!(scope.opt.name=='nk-constant' || scope.opt.name=='PEC')" side>
+                                                  <ShowSpectrumRange
+                                                      class="text-caption"
+                                                      :spectrum-range-start="scope.opt.spectrumRangeStart"
+                                                      :spectrum-range-end="scope.opt.spectrumRangeEnd"
+                                                  />
+                  </q-item-section>
+
                 </q-item>
               </span>
             </template>
@@ -147,10 +157,14 @@ import { fromUnits, isAlmostSame, toUnits } from 'components/utils'
 import { flexRowTitleStyle, basicWidthStyle, basicSelectorWidthStyle, maxNumberOfLayers } from 'components/config'
 import { cloneDeep } from 'lodash'
 import InputWithUnits from 'components/InputWithUnits.vue';
+import ShowSpectrumRange from 'components/ShowSpectrumRange.vue'
 
 export default defineComponent({
   name: 'GetParticleParameters',
-  components: {InputWithUnits},
+  components: {
+    InputWithUnits,
+    ShowSpectrumRange
+  },
 
   setup() {
     const $store = useStore()

guiapp/src/components/MaterialsActivated.vue

@@ -38,21 +38,10 @@
           </q-td>
 
           <q-td auto-width>
-            <q-tooltip
-                v-if=" props.row.spectrumRangeStart > fromWavelengthStore ||
-                       props.row.spectrumRangeEnd   <   toWavelengthStore"
-                anchor="top middle" self="bottom middle"
-                class="bg-red">
-              Mismatch with spectrum simulation
-            </q-tooltip>
-            <span :class="props.row.spectrumRangeStart>fromWavelengthStore?'text-red':'text-black'">
-              {{ Math.ceil(props.row.spectrumRangeStart) }}
-            </span>
-            &ndash;
-            <span :class="props.row.spectrumRangeEnd<toWavelengthStore?'text-red':'text-black'">
-              {{ Math.floor(props.row.spectrumRangeEnd) }}
-            </span>
-            &NonBreakingSpace;nm
+            <ShowSpectrumRange
+                :spectrum-range-start="props.row.spectrumRangeStart"
+                :spectrum-range-end="props.row.spectrumRangeEnd"
+            />
           </q-td>
 
           <q-td class="">
@@ -81,12 +70,12 @@ import {
 import { useStore } from 'src/store'
 import { composeLabelFromPageData } from 'components/utils'
 import { cloneDeep } from 'lodash'
-
+import ShowSpectrumRange from 'components/ShowSpectrumRange.vue'
 
 export default defineComponent({
 
   name: 'MaterialsActivated',
-  components: {},
+  components: {ShowSpectrumRange},
 
   setup: function () {
     const $store = useStore()

guiapp/src/components/MaterialsSelector.vue

@@ -69,21 +69,10 @@
           </q-td>
 
           <q-td auto-width>
-            <q-tooltip
-                v-if="props.row.spectrumRangeStart>fromWavelengthStore/1000 ||
-                 props.row.spectrumRangeEnd<toWavelengthStore/1000"
-                anchor="top middle" self="center middle"
-                class="bg-red">
-              Mismatch with spectrum simulation
-            </q-tooltip>
-            <span :class="props.row.spectrumRangeStart>fromWavelengthStore/1000?'text-red':'text-black'">
-              {{ props.row.spectrumRangeStart }}
-            </span>
-            <span v-if="props.row.spectrumRangeStart">&ndash;</span>
-            <span :class="props.row.spectrumRangeEnd<toWavelengthStore/1000?'text-red':'text-black'">
-              {{ props.row.spectrumRangeEnd }}
-            </span>
-            <span v-if="props.row.spectrumRangeStart">&NonBreakingSpace;mkm</span>
+            <ShowSpectrumRange
+                :spectrum-range-start="props.row.spectrumRangeStart*1000"
+                :spectrum-range-end="props.row.spectrumRangeEnd*1000"
+            />
           </q-td>
 
           <q-td auto-width>
@@ -112,13 +101,14 @@ import {
 import { useStore } from 'src/store'
 import { load } from 'js-yaml'
 import { composeLabelFromPageData } from 'components/utils'
+import ShowSpectrumRange from 'components/ShowSpectrumRange.vue'
 import { saveAs } from 'file-saver'
 
 
 export default defineComponent({
 
   name: 'MaterialsSelector',
-  components: {},
+  components: {ShowSpectrumRange},
 
   setup: function () {
     const $store = useStore()

guiapp/src/components/ShowSpectrumRange.vue

@@ -0,0 +1,50 @@
+<template>
+  <span>
+  <q-tooltip
+      v-if=" spectrumRangeStart > fromWavelengthStore ||
+             spectrumRangeEnd   <   toWavelengthStore"
+      anchor="top middle" self="bottom middle"
+      class="bg-red">
+    Mismatch with spectrum simulation
+  </q-tooltip>
+  <span :class="spectrumRangeStart > fromWavelengthStore?'text-red':'text-black'">
+              {{ Math.ceil(spectrumRangeStart) }}
+            </span>
+  &ndash;
+  <span :class="spectrumRangeEnd < toWavelengthStore?'text-red':'text-black'">
+              {{ Math.floor(spectrumRangeEnd) }}
+            </span>
+  &NonBreakingSpace;nm
+    </span>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+} from 'vue'
+import { useStore } from 'src/store'
+
+export default defineComponent({
+  name: 'ShowSpectrumRange',
+  props: {
+    spectrumRangeStart: {
+      type: Number,
+      required: true,
+    },
+    spectrumRangeEnd: {
+      type: Number,
+      required: true,
+    },
+  },
+  setup() {
+    const $store = useStore()
+    const fromWavelengthStore = computed(()=>$store.state.simulationSetup.gui.fromWL)
+    const toWavelengthStore = computed(()=>$store.state.simulationSetup.gui.toWL)
+
+    return {
+      fromWavelengthStore, toWavelengthStore
+    }
+  }
+})
+</script>

guiapp/src/store/gui-runtime/actions.ts

@@ -51,7 +51,7 @@ const actions: ActionTree<guiRuntimeStateInterface, StateInterface> = {
     let ys1:number[] = data_columns[1]
     let ys2:number[] = data_columns[1].map(()=>0)
     if (data_columns[2]) ys2 = data_columns[2]
-    const maxVal = 550
+    const maxVal = 350
     if (xs.length > maxVal) {
       const delta = Math.floor(xs.length / maxVal);
       let tmp_xs:number[] = []
@@ -66,8 +66,8 @@ const actions: ActionTree<guiRuntimeStateInterface, StateInterface> = {
       ys1 = tmp_ys1
       ys2 = tmp_ys2
     }
-    console.log(xs.length)
 
+    // TODO use 10.1016/j.cagd.2010.10.002 or https://en.wikipedia.org/wiki/Monotone_cubic_interpolation
     const spline_n = new Spline(xs, ys1);
     const spline_k = new Spline(xs, ys2);