Konstantin Ladutenko пре 5 година
родитељ
комит
6ab201f588

Разлика између датотеке није приказан због своје велике величине
+ 4 - 0
web/v2/all.css


Разлика између датотеке није приказан због своје велике величине
+ 0 - 0
web/v2/buefy.min.css


Разлика између датотеке није приказан због своје велике величине
+ 1 - 0
web/v2/buefy.min.js


+ 32 - 21
web/v2/index.html

@@ -2,10 +2,14 @@
 <html lang="en" class="section">
 <head>
     <meta charset="UTF-8">
-    <title>Input  - Buefy example</title>
-    <meta name='viewport' content='width=device-width, initial-scale=1'><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'>
+    <title>Mie calculator</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' href='buefy.min.css'>
+    <link rel='stylesheet' href='materialdesignicons.min.css'>
+    <link rel='stylesheet' href='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>
@@ -59,14 +63,14 @@
             <div class="field-body">
                 <div class="field is-grouped is-grouped-multiline">
                     <input-with-units title="from" v-bind:units="units"
-                                      v-bind:value="fromWL"
-                                      @newdata="fromWL=$event"></input-with-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="toWL"
-                                      @newdata="toWL=$event"></input-with-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="stepWL"
-                                      @newdata="stepWL=$event"></input-with-units>
+                                      v-bind:value="simulationSetup.stepWL"
+                                      @newdata="simulationSetup.stepWL=$event"></input-with-units>
                 </div>
             </div>
         </div>
@@ -79,14 +83,14 @@
             <div class="field-body">
                 <div class="field is-grouped is-grouped-multiline">
                     <input-with-units title="R" v-bind:units="units"
-                                      v-bind:value="R"
-                                      @newdata="R=$event"></input-with-units>
+                                      v-bind:value="simulationSetup.R"
+                                      @newdata="simulationSetup.R=$event"></input-with-units>
                     <input-with-units title="Re(n)" units=""
-                                      v-bind:value="reN"
-                                      @newdata="reN=$event"></input-with-units>
+                                      v-bind:value="simulationSetup.reN"
+                                      @newdata="simulationSetup.reN=$event"></input-with-units>
                     <input-with-units title="Im(n)" units=""
-                                      v-bind:value="imN"
-                                      @newdata="imN=$event"></input-with-units>
+                                      v-bind:value="simulationSetup.imN"
+                                      @newdata="simulationSetup.imN=$event"></input-with-units>
                 </div>
             </div>
         </div>
@@ -96,10 +100,13 @@
                 <label class="label">Modes to plot</label>
             </div>
             <div class="field-body">
-                <b-input v-model="total_mode_n" type='number' min=1 style="width:7rem"></b-input>
+                <b-input v-model="simulationSetup.total_mode_n" type='number' min=1 style="width:7rem"></b-input>
             </div>
         </div>
-        <div>From: {{fromWL}} to: {{toWL}} units: {{ units }} {{ window.width }}</div>
+        <div>From: {{simulationSetup.fromWL}} to: {{simulationSetup.toWL}} units: {{ units }}
+            <br>
+        Changes:{{ changes }}
+        </div>
 
         <div class="chart-container">
             <reactive-chart :chart="chart"></reactive-chart>
@@ -107,15 +114,19 @@
     </section>
 
 </div>
-<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+<!--<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>-->
+<script src="plotly-latest.min.js"></script>
 <!--<script src='https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.39.1/plotly.js'></script>-->
-<script src='https://unpkg.com/vue/dist/vue.min.js'></script>
-<script src='https://unpkg.com/buefy/dist/buefy.min.js'></script>
+<script src='vue.min.js'></script>
+<script src='buefy.min.js'></script>
+<!--<script src='https://unpkg.com/vue/dist/vue.min.js'></script>-->
+<!--<script src='https://unpkg.com/buefy/dist/buefy.min.js'></script>-->
 <!--<script src='https://unpkg.com/axios/dist/axios.min.js'></script>-->
 <!--<script src='https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js'></script>-->
 <!--<script src='https://unpkg.com/cleave.js/dist/cleave.min.js'></script>-->
 <!--<script src='https://cdn.jsdelivr.net/npm/sortablejs@1.6.1/Sortable.min.js'></script>-->
 <!--<script src='https://cdn.jsdelivr.net/npm/vee-validate@2.1.0-beta.9/dist/vee-validate.min.js'></script>-->
+<script  src="./tested-components.js"></script>
 <script  src="./script.js"></script>
 <link rel="stylesheet" type="text/css" href="local.css">
 

Разлика између датотеке није приказан због своје велике величине
+ 0 - 0
web/v2/materialdesignicons.min.css


Разлика између датотеке није приказан због своје велике величине
+ 6 - 0
web/v2/plotly-latest.min.js


+ 32 - 71
web/v2/script.js

@@ -1,3 +1,4 @@
+'use strict';
 const example = {
     data() {
         return {
@@ -5,20 +6,20 @@ const example = {
                 width: 0,
                 height: 0
             },
-            textStyle:"underline",
-            styleObject: {
-                color: 'red',
-                fontSize: '13px'
-            },
+            // on change of initial value for __ units __
+            // remember to update this.chart.layout.xaxis.title
             units: 'nm',
-            stepWL: 0.5,
-            fromWL: 300.0,
-            toWL:1000.0,
-            R: 100.0,
-            reN: 4.0,
-            imN: 0.01,
+            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,
-            total_mode_n:4,
             chart: {
                 uuid: "123",
                 traces: [
@@ -34,7 +35,8 @@ const example = {
                 layout: {
                     title:'reactive charts',
                     xaxis: {
-                        title: 'xaxis title'
+                        // initial value should be same as in units
+                        title: 'Wavelength, nm'
                     },
                     yaxis: {
                         title: 'yaxis title'
@@ -51,73 +53,32 @@ const example = {
     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(){
+            this.changes++;
         }
     },
-    watch: {
-        window: function () {
-            this.styleObject.color ='blue';
-        }
-    }
 
 };
 
 
-Vue.component("reactive-chart", {
-    props: ["chart"],
-    template: '<div :ref="chart.uuid"></div>',
-    mounted() {
-        Plotly.newPlot(this.$refs[this.chart.uuid], this.chart.traces, this.chart.layout, {responsive: true});
-    },
-    watch: {
-        chart: {
-            handler: function() {
-                Plotly.react(
-                    this.$refs[this.chart.uuid],
-                    this.chart.traces,
-                    this.chart.layout
-                );
-            },
-            deep: true
-        }
-    }
-});
-
-
-Vue.component('input-with-units',{
-    // data: function() {return {value: 303.0}},
-    watch: {
-        value: {
-            handler: function () {
-                this.$emit('newdata',this.value);
-            }
-        },
-        deep: true
-    },
-    props: ['title', 'units', 'value'],
-    template: `
-                    <div class="field has-addons">
-                        <p class="control">
-                            <a class="button is-static" style="width:4rem">
-                                {{ title }}
-                            </a>
-                        </p>
-                        <p class="control">
-                            <b-input v-model="value" type="number" step="any" style="width:6rem"></b-input>
-                        </p>
-                        <p class="control">
-                            <a class="button is-static" style="width:3rem">
-                                {{ units }}
-                            </a>
-                        </p>
-                    </div>
-
-    `
-    })
-
 const app = new Vue(example);
-
 app.$mount('#app');

+ 54 - 0
web/v2/tested-components.js

@@ -0,0 +1,54 @@
+Vue.component("reactive-chart", {
+    props: ["chart"],
+    template: '<div :ref="chart.uuid"></div>',
+    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
+        }
+    }
+});
+
+
+Vue.component('input-with-units',{
+    // data: function() {return {value: 303.0}},
+    watch: {
+        value: {
+            handler: function () {
+                this.$emit('newdata',this.value);
+            }
+        },
+        deep: true
+    },
+    props: ['title', 'units', 'value'],
+    template: `
+                    <div class="field has-addons">
+                        <p class="control">
+                            <a class="button is-static" style="width:4rem">
+                                {{ title }}
+                            </a>
+                        </p>
+                        <p class="control">
+                            <b-input v-model="value" type="number" step="any" style="width:6rem"></b-input>
+                        </p>
+                        <p class="control">
+                            <a class="button is-static" style="width:3rem">
+                                {{ units }}
+                            </a>
+                        </p>
+                    </div>
+
+    `
+})

Разлика између датотеке није приказан због своје велике величине
+ 5 - 0
web/v2/vue.min.js


Неке датотеке нису приказане због велике количине промена