k.ladutenko
/
scatt


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
							<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Scattnlay web</title>
  <link rel="stylesheet" type="text/css" href="nmie.css">
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="Usage" style="font-size: small;">
<span style="text-decoration: underline;text-emphasis: before;">Usage:</span>
Feel free to use provided software, however, use it at your own risk. We make our best effort to verify
it is correct, however, we do not provide any warranty.
  <p>
If it was usefull for your project, please, cite in your related paper the following reference:
<div style="font-style: italic">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></p>
</div>
WL from <input type="number" id="fromWL" step="any" value="300.0">
to <input type="number" id="toWL" step="any" value="1000">
step <input type="number" id="stepWL" step="any" value="0.5"><br>
R: <input type="number" id="R" step="any" value="100">
Re(n): <input type="number" id="reN" step="any" value="4">
Im(n): <input type="number" id="imN" step="any" value="0.01"><br>
<button id="Evaluate" onclick=runMie() autofocus>Run Mie!</button> <span id="time"></span>
<div id="Selector"></div>
<div id="PlotQsca" style="height:70%;">
<!--     style="width:840px;height:580px;"-->
</div>
  <script src="nmie.js"></script>
  <script>
    'use strict';
    const total_mode_n = 4;
    let mode_n, mode_types;
    let mode_names = ['E','H'];
    let WLs, layout, trace1, trace2;
    let Qsca, Qabs, Qsca_n, Qabs_n;
    const range = (start, stop, step = 1) =>
            Array(Math.ceil((stop - start) / step)).fill(start).map((x, y) => x + y * step);
    if (!Array.prototype.last){
      Array.prototype.last = function(){
        return this[this.length - 1];
      };
    };
    // Module.addOnPostRun(() => {
    //   test.onclick =runMie()});
    function runMie() {
        document.getElementById("Usage").style.display = 'none';
        const nmie = new Module.nmie()
        let t0 = performance.now();
        let fromWL = parseFloat(document.getElementById("fromWL").value);
        let toWL = parseFloat(document.getElementById("toWL").value);
        let stepWL = parseFloat(document.getElementById("stepWL").value);
        let R = parseFloat(document.getElementById("R").value);
        let reN = parseFloat(document.getElementById("reN").value);
        let imN = parseFloat(document.getElementById("imN").value);
        Qsca = [], Qabs = [];
        Qsca_n = [[],[]], Qabs_n = [[],[]];
        nmie.ClearTarget();
        nmie.AddTargetLayerReIm(R, reN, imN)
        WLs = range(fromWL,toWL,stepWL)
        mode_n = range(1,total_mode_n+1)
        mode_types = range(0,2)
        mode_types.forEach(function(mode_type) {
          mode_n.forEach(function (n) {
            Qsca_n[mode_type].push([]);
            Qabs_n[mode_type].push([]);
          });
        });
        WLs.forEach(function(WL) {
          // console.log(WL)
          nmie.SetModeNmaxAndType(-1, -1);
          nmie.SetWavelength(WL);
          nmie.RunMieCalculation();
          Qsca.push(nmie.GetQsca());
          Qabs.push(nmie.GetQabs());
          mode_types.forEach(function(mode_type) {
            mode_n.forEach(function (n) {
              nmie.SetModeNmaxAndType(n,mode_type);
              nmie.RunMieCalculation();
              Qsca_n[mode_type][n-1].push(nmie.GetQsca());
              Qabs_n[mode_type][n-1].push(nmie.GetQabs());
            });
          });
        });
        // console.log('Qsca_n = ', Qsca_n);
        trace1 = {
          x: WLs,
          y: Qsca,
          type: 'scatter',
          name: 'Qsca'
        };

        trace2 = {
          x: WLs,
          y: Qabs,
          type: 'scatter',
          name: 'Qabs'
        };

        let data = [trace1, trace2];
        layout = {
          title: {
            text:'Mie calculation',
            // font: {
            //   family: 'Courier New, monospace',
            //   size: 24
            // },
            xref: 'paper',
            x: 0.05,
          },
          xaxis: {
            title: {
              text: 'Wavelength',
              // font: {
              //   family: 'Courier New, monospace',
              //   size: 18,
              //   color: '#7f7f7f'
              // }
            },
          },
          yaxis: {
            title: {
              text: 'Q',
              // font: {
              //   family: 'Courier New, monospace',
              //   size: 18,
              //   color: '#7f7f7f'
              // }
            }
          },
          margin: {
            l: 35,
            r: 25,
            b: 35,
            t: 25,
            pad: 4
          }
        };
        Plotly.newPlot('PlotQsca', data, layout, {showSendToCloud: true, displaylogo: false});
        let t1 = performance.now();
        document.getElementById("time").innerHTML = "It took " + ((t1 - t0)/1000).toFixed(2) + " s.";

        let tmp1 = " ";
        mode_types.forEach(function(mode_type) {
          tmp1 += mode_names[mode_type]+" -> ";
          mode_n.forEach(function (n) {
            tmp1 += n.toString()+
                    "<input type=\"checkbox\" id=\""+mode_names[mode_type]+n.toString()
                    +"\" unchecked onclick=\"replot();\">  ";
          });
          tmp1 += "<br>";
        });
        tmp1 +="Qabs <input type=\"checkbox\" id=\"Qabs\" checked onclick=\"replot();\">  ";
        tmp1 +="Qsca <input type=\"checkbox\" id=\"Qsca\" checked onclick=\"replot();\">  ";
        document.getElementById("Selector").innerHTML = tmp1;


      };

    function replot() {
      let checkBoxQabs = document.getElementById("Qabs");
      let checkBoxQsca = document.getElementById("Qsca");
      let data = [];
      if (checkBoxQabs.checked == true) data.push(trace2);
      if (checkBoxQsca.checked == true) data.push(trace1);
      mode_types.forEach(function(mode_type) {
        mode_n.forEach(function (n) {
          let checkBox = document.getElementById(mode_names[mode_type]+n.toString());
          if (checkBox.checked == false) return;
          if (checkBoxQsca.checked == true) {
            let trace_sca = {
              x: WLs,
              y: Qsca_n[mode_type][n - 1],
              type: 'scatter',
              name: 'Qsca ' + mode_names[mode_type] + n.toString()
            };
            data.push(trace_sca);
          };
          if (checkBoxQabs.checked == true) {
            let trace_abs = {
              x: WLs,
              y: Qabs_n[mode_type][n - 1],
              type: 'scatter',
              name: 'Qabs ' + mode_names[mode_type] + n.toString()
            };
            data.push(trace_abs);
          };
        });
      });
      Plotly.react('PlotQsca', data, layout, {showSendToCloud: true, displaylogo: false});
    }
  </script>
</body>
</html>