k.ladutenko
/
scatt


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
							<!DOCTYPE html>
<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'>

</head>
<body>
<!-- partial:index.partial.html -->
<div id="app" class="container">
    <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="fromWL"
                                      @newdata="fromWL=$event"></input-with-units>
                    <input-with-units title="to" v-bind:units="units"
                                      v-bind:value="toWL"
                                      @newdata="toWL=$event"></input-with-units>
                    <input-with-units title="step" v-bind:units="units"
                                      v-bind:value="stepWL"
                                      @newdata="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="R"
                                      @newdata="R=$event"></input-with-units>
                    <input-with-units title="Re(n)" units=""
                                      v-bind:value="reN"
                                      @newdata="reN=$event"></input-with-units>
                    <input-with-units title="Im(n)" units=""
                                      v-bind:value="imN"
                                      @newdata="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="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 class="chart-container">
            <reactive-chart :chart="chart"></reactive-chart>
        </div>
    </section>

</div>
<script src="https://cdn.plot.ly/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='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="./script.js"></script>
<link rel="stylesheet" type="text/css" href="local.css">

</body>
</html>