barcoatsim.html

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>ActCoatSim</title>

    <link rel="stylesheet" href="https://cdn.usebootstrap.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!--link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"-->
    <link rel="stylesheet" href="./sastyles.css">
    <link rel="stylesheet" href="./style.css">
    <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script language="javascript" type="text/javascript" src="https://cdn.usebootstrap.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--script language="javascript" type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script-->    
</head>

<body>
    <button id="btnStart" class="btn btn-default">Full Reset</button>
    <!--button id="btnPause" class="btn btn-default"><span id="playpause">Pause</span></button-->
    <button id="btnReload" class="btn btn-default">Resimulate</button>
    Current Step: <span id="currentstep">0</span>
    <button id="btnSaveParams" class="btn btn-default">Save Parameters</button>
    <button id="btnSaveData" class="btn btn-default">Save Everything</button>
    <button id="btnAllFinish" class="btn btn-default">End All Runs</button>
    <button id="btnQuickFinish" class="btn btn-default">End Current Run</button>
    <!--div>
        <label for="reloaddata" class="btn">Reload Data</label>
        <input id="reloaddata" style="visibility:hidden;" type="file" name="files[]"></input>
    </div-->
    <div>
        <!--button id="reloadgrid" class="btn btn-default">Reload Grids</button-->
        <label for="reloadgrid" class="btn">Reload Grids</label>
        <input id="reloadgrid" style="visibility:hidden;" type="file" name="files[]"></input>
    </div>
        <div class="container">
            <div class="jumbotron">
                <div class="row">
                    <div class="col-md-8" style="text-align: center">
                        <canvas id="myCanvas"></canvas>
                    </div>
                    <div id="fullgraph">
                        <div class="col-md-8" style="text-align: center">
    <!--                        <div id="Graph" class="flot-graph"></div>
                                <canvas id="Graph"></canvas> -->
                            <div id="Graph" style="margin-left: 0.9625rem;margin-right: 0.9625rem;width: 96%;height: 340px;"></div>
                        </div>
                        <div class="col-md-8" style="text-align: center">
                            <div id="Legend" class="flot-legend"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- /container -->

    <ul class="nav nav-pills">
        <li class="active"><a data-toggle="pill" href="#generate1">Microstructure Parameters 1</a></li>
        <li><a data-toggle="pill" href="#generate2">Microstructure Parameters 2</a></li>
        <li><a data-toggle="pill" href="#kinetics">Simulation Parameters</a></li>
        <li><a data-toggle="pill" href="#running">Simulation Controls</a></li>
    </ul>

    <div class="tab-content">
        <div id="generate1" class="tab-pane fade in active">
            <h3>Coating</h3>
            <!--div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                    <span id="exampleName">Dropdown</span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a class="exampleLink" data-example="leaching">Active Coating</a></li>
                    <li><a class="exampleLink" data-example="barrier">Barrier</a></li>
                </ul>
            </div-->
            <!--div class="row"-->
                <div class="row">
                    <div class="col-sm-5">
                        <label for="nocoatings" class="col-sm-5 control-label">No of Coatings</label>
                        <input name="nocoatings" id="nocoatings" class="form-control" type="number" value="5" min="1"
                            style="width: 96px" />
                    </div>
                    <div class="col-sm-5">
                        <label for="manualinter" class="col-sm-5 control-label">Manual Intervention</label>
                        <input name="manualinter" id="manualinter" class="form-check-input" type="checkbox">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="coatwidth" class="col-sm-5 control-label">System Width</label>
                        <input name="coatwidth" id="coatwidth" class="form-control" type="number" value="96" min="10" max="200"
                            style="width: 96px" />
                    </div>
                    <div class="col-sm-5">
                        <label for="coatheight" class="col-sm-5 control-label">System Height</label>
                        <input name="coatheight" id="coatheight" class="form-control" type="number" value="48" min="10" max="100"
                            style="width: 96px" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="diffusiontest" class="col-sm-5 control-label">Check Diffusion</label>
                        <input name="diffusiontest" id="diffusiontest" class="form-check-input" type="checkbox">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="waterontop" class="col-sm-5 control-label">Top Water</label>
                        <input name="waterontop" id="waterontop" class="form-check-input" type="checkbox" checked>
                    </div>
                    <div class="col-sm-5">
                        <label for="depthofwater" class="col-sm-5 control-label">Depth of Water</label>
                        <input name="depthofwater" id="depthofwater" class="form-control" type="number" value="10"
                            min="1" style="width: 96px" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="topcoated" class="col-sm-5 control-label">Topcoated</label>
                        <input name="topcoated" id="topcoated" class="form-check-input" type="checkbox">
                    </div>
                    <div class="col-sm-5">
                        <label for="depthoftopcoat" class="col-sm-5 control-label">Depth of Topcoat</label>
                        <input name="depthoftopcoat" id="depthoftopcoat" class="form-control" type="number" value="10"
                            min="1" style="width: 96px" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="scribed" class="col-sm-5 control-label">Scribed</label>
                        <input name="scribed" id="scribed" class="form-check-input" type="checkbox">
                    </div>
                    <div class="col-sm-5">
                        <label for="sizeofscribe" class="col-sm-5 control-label">Size of Scribe</label>
                        <input name="sizeofscribe" id="sizeofscribe" class="form-control" type="number" value="10"
                            min="1" style="width: 96px" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="gridfromca" class="col-sm-5 control-label">CA Microstructure</label>
                        <input name="gridfromca" id="gridfromca" class="form-check-input" type="checkbox">
                    </div>
                    <div class="col-sm-5">
                        <label for="nostrucsteps" class="col-sm-5 control-label">No Refinement Steps</label>
                        <input name="nostrucsteps" id="nostrucsteps" class="form-control" type="number" value="15" min="1"
                            style="width: 96px" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="probca" class="col-sm-5 control-label">CA Rule Probability</label>
                        <input name="probca" id="probca" class="form-control" type="number" value="0.45" min="0.01"
                            max="1.0" style="width: 96px" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="nolayers" class="col-sm-5 control-label">No of Layers</label>
                        <input name="nolayers" id="nolayers" class="form-control" type="number" value="1" min="1" max="2"
                            style="width: 96px" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="layer1height" class="col-sm-5 control-label">Layer 1 Height</label>
                        <input name="layer1height" id="layer1height" class="form-control" type="number" value="24" min="1" max="100"
                            style="width: 96px" />
                    </div>
                    <div class="col-sm-5">
                        <label for="layer2height" class="col-sm-5 control-label">Layer 2 Height</label>
                        <input name="layer2height" id="layer2height" class="form-control" type="number" value="24" min="1" max="100"
                            style="width: 96px" />
                    </div>
                </div>
            </div>
            <div id="generate2" class="tab-pane fade">
                <h3>Particles</h3>
                    <div class="row">
                    <div class="col-sm-5">
                        <label for="square" class="col-sm-5 control-label">Sqaure Particles</label>
                        <input name="square" id="square" class="form-check-input" type="checkbox">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="noofparticles" class="col-sm-5 control-label">No of Particles</label>
                        <input name="noofparticles" id="noofparticles" class="form-control" type="text" value="20"
                             style="width: 96px" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="radius" class="col-sm-5 control-label">Radius</label>
                        <input name="radius" id="radius" class="form-control" type="text" value="10"
                            style="width: 96px" />
                    </div>
                    <div class="col-sm-5">
                        <label for="noofcuts" class="col-sm-5 control-label">No of Particle Cuts</label>
                        <input name="noofcuts" id="noofcuts" class="form-control" type="text" value="4" 
                            style="width: 96px" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="minimumpvc" class="col-sm-5 control-label">Minimum PVC</label>
                        <input name="minimumpvc" id="minimumpvc" class="form-control" type="text" value="0.1"
                            style="width: 96px" />
                    </div>
                    <div class="col-sm-5">
                        <label for="maximumpvc" class="col-sm-5 control-label">Maximum PVC</label>
                        <input name="maximumpvc" id="maximumpvc" class="form-control" type="text" value="1.0"
                            style="width: 96px" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="noofparticles2" class="col-sm-5 control-label">No of Particles 2</label>
                        <input name="noofparticles2" id="noofparticles2" class="form-control" type="text" value="20"
                            style="width: 96px" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="radius2" class="col-sm-5 control-label">Radius 2</label>
                        <input name="radius2" id="radius2" class="form-control" type="text" value="5"
                            style="width: 96px" />
                    </div>
                    <div class="col-sm-5">
                        <label for="noofcuts2" class="col-sm-5 control-label">No of Particle Cuts 2</label>
                        <input name="noofcuts2" id="noofcuts2" class="form-control" type="text" value="4"
                            style="width: 96px" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="minimumpvc2" class="col-sm-5 control-label">Minimum PVC2</label>
                        <input name="minimumpvc2" id="minimumpvc2" class="form-control" type="text" value="0.1"
                            style="width: 96px" />
                    </div>
                    <div class="col-sm-5">
                        <label for="maximumpvc2" class="col-sm-5 control-label">Maximum PVC2</label>
                        <input name="maximumpvc2" id="maximumpvc2" class="form-control" type="text" value="1.0"
                            style="width: 96px" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="restrictrange" class="col-sm-5 control-label">Restrict Range</label>
                        <input name="restrictrange" id="restrictrange" class="form-check-input" type="checkbox">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-5">
                        <label for="minparticle" class="col-sm-5 control-label">Minimum Particle Size</label>
                        <input name="minparticle" id="minparticle" class="form-control" type="number" value="3" min="1"
                            style="width: 96px" />
                    </div>
                    <div class="col-sm-5">
                        <label for="maxparticle" class="col-sm-5 control-label">Maximum Particle Size</label>
                        <input name="maxparticle" id="maxparticle" class="form-control" type="number" value="10" min="1"
                            style="width: 96px" />
                    </div>
                </div>
            </div>
        <!--/div-->
        <div id="kinetics" class="tab-pane fade">
            <h3>Kinetics</h3>
            <div class="row">
                <div class="col-sm-5">
                    <label for="inhibitordensity" class="col-sm-5 control-label">Inhibitor Density</label>
                    <input name="inhibitordensity" id="inhibitordensity" class="form-control" type="text"
                        value="1" style="width: 96px" />
                </div>
                <div class="col-sm-5">
                    <label for="inhibitorsolubility" class="col-sm-5 control-label">Inhibitor Solubility</label>
                    <input name="inhibitorsolubility" id="inhibitorsolubility" class="form-control" type="text" 
                        value="1" style="width: 96px" />
                </div>
            </div>
            <div class="row">
                <div class="col-sm-5">
                    <label for="probdiff" class="col-sm-5 control-label">Probability of Diffusion</label>
                    <input name="probdiff" id="probdiff" class="form-control" type="text" value="1.0" 
                        style="width: 96px" />
                </div>
                <div class="col-sm-5">
                    <label for="probsol" class="col-sm-5 control-label">Probability of Solubility</label>
                    <input name="probsol" id="probsol" class="form-control" type="text" value="1.0"
                        style="width: 96px" />
                </div>
            </div>
            <div class="row">
                <div class="col-sm-5">
                    <label for="topleak" class="col-sm-5 control-label">Loose from Top</label>
                    <input name="topleak" id="topleak" class="form-check-input" type="checkbox" checked>
                </div>
                <div class="col-sm-5">
                    <label for="bottomleak" class="col-sm-5 control-label">Loose from Bottom</label>
                    <input name="bottomleak" id="bottomleak" class="form-check-input" type="checkbox">
                </div>
            </div>
            <div class="row">
                <div class="col-sm-5">
                    <label for="leftleak" class="col-sm-5 control-label">Loose from Left</label>
                    <input name="leftleak" id="leftleak" class="form-check-input" type="checkbox">
                </div>
                <div class="col-sm-5">
                    <label for="rightleak" class="col-sm-5 control-label">Loose from Right</label>
                    <input name="rightleak" id="rightleak" class="form-check-input" type="checkbox">
                </div>
            </div>
        </div>
        <div id="running" class="tab-pane fade">
            <h3>Running</h3>
            <div class="row">
                <div class="col-sm-5">
                    <label for="globalplots" class="col-sm-5 control-label">Global Plot</label>
                    <input name="globalplots" id="globalplots" class="form-check-input" type="checkbox" checked>
                </div>
                <div class="col-sm-5">
                    <label for="xsqrt" class="col-sm-5 control-label">X Square Root</label>
                    <input name="xsqrt" id="xsqrt" class="form-check-input" type="checkbox" checked>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-5">
                    <label for="cumulativeplots" class="col-sm-5 control-label">Accumulate Runs</label>
                    <input name="cumulativeplots" id="cumulativeplots" class="form-check-input" type="checkbox" checked>
                </div>
            </div>
            <div class="row">
                <div class="row">
                    <div class="col-sm-5">
                        <label for="savegrids" class="col-sm-5 control-label">Save Generated Coatings</label>
                        <input name="savegrids" id="savegrids" class="form-check-input" type="checkbox">
                    </div>
                    <div class="col-sm-5">
                        <label for="savegraphs" class="col-sm-5 control-label">Save Graphs</label>
                        <input name="savegraphs" id="savegraphs" class="form-check-input" type="checkbox">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="row">
                    <div class="col-sm-5">
                        <label for="captureanimation" class="col-sm-5 control-label">Capture animation to webm</label>
                        <input name="captureanimation" id="captureanimation" class="form-check-input" type="checkbox">
                    </div>
                    <div class="col-sm-5">
                        <label for="captureplot" class="col-sm-5 control-label">Capture plot to png</label>
                        <input name="captureplot" id="captureplot" class="form-check-input" type="checkbox">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-5">
                    <label for="numFrames" class="col-sm-5 control-label">Number of frames</label>
                    <input name="numFrames" id="numFrames" class="form-control" type="number" value="3" min="1"
                        style="width: 96px" />
                </div>
                <div class="col-sm-5">
                    <label for="numPlots" class="col-sm-5 control-label">Number of plots</label>
                    <input name="numPlots" id="numPlots" class="form-control" type="number" value="10" min="1"
                        style="width: 96px" />
                </div>
            </div>
            <div class="row">
                <div class="col-sm-5">
                    <label for="endfraction" class="col-sm-5 control-label">Terminal Fraction</label>
                    <input name="endfraction" id="endfraction" class="form-control" type="number" value="0.5" min="0.0"
                        max="1.0" style="width: 96px" />
                </div>
                <div class="col-sm-5">
                    <label for="noupdates" class="col-sm-5 control-label">No Visual Updates</label>
                    <input name="noupdates" id="noupdates" class="form-check-input" type="checkbox">
                </div>
            </div>
        </div>
	</div>

        <script>
            /*		<div>
                        <label for="savedata" class="btn">Save Data</label>
                        <input id="savedata" style="visibility:hidden;" type="file" name="files[]"></input>
                    </div>
            function saveFileSelect(evt) {
                var files = evt.target.files; // FileList object
                var reader = new FileReader();
            
                // Closure to capture the file information.
                reader.onload = function(){
                if (multipleLeaches.length == 0) {
                    ret=JSON.stringify({ label : currentLabel, data:leachProgress});
                } else {
                    ret = JSON.stringify(multipleLeaches.concat({ label : currentLabel, data:leachProgress}));
                };
                var BB = new Blob([ret], {type: "text/plain;charset=UTF-8"});
                saveAs(BB, "./fred" + ".txt");
                };
                console.log('there');
                  // Read in the image file as a data URL.
                console.log(files[0]);
            //    reader.readAsText(files[0]);
            }
            
              document.getElementById('reloaddata').addEventListener('change', saveFileSelect, false);*/

            function reloadFileSelectGrid(evt) {
                var files = evt.target.files; // FileList object
                var reader = new FileReader();
console.log("now here");
                // Closure to capture the file information.
                reader.onload = function () {
                    text = reader.result;
                    console.log(reader.result.substring(0, 400));
                    var loadedStuff = JSON.parse(text);
                    ms = loadedStuff.ms;
                    updateMSToPage();
                    allStuff = loadedStuff.allStuff;
                };
                console.log('now there');
                // Read in the image file as a data URL.
                console.log(files[0]);
                fileNameStem = files[0].name;
                fileNameStem = fileNameStem.substring(0,fileNameStem.length - 4);
                console.log(fileNameStem);
                reader.readAsText(files[0]);
            }

            document.getElementById('reloadgrid').addEventListener('change', reloadFileSelectGrid, true);

//        <label for="reloadgrid" class="btn">Reload Grids</label>
//        <input id="reloadgrid" style="visibility:hidden;" type="file" name="files[]"></input>

            function reloadFileSelect(evt) {
                var files = evt.target.files; // FileList object
                var reader = new FileReader();

                // Closure to capture the file information.
                reader.onload = function () {
                    text = reader.result;
                    console.log(reader.result.substring(0, 200));
                    multipleLeaches = JSON.parse(text);
                };
                console.log('there');
                // Read in the image file as a data URL.
                console.log(files[0]);
                reader.readAsText(files[0]);
            }

            //document.getElementById('reloaddata').addEventListener('change', reloadFileSelect, false);
        </script>
        <!--script language="javascript" type="text/javascript" src="./dist/pixi.js"></script-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.0.2/browser/pixi.min.js"></script>
        <!--script src="./dist/run_prettify.js?skin=desert"></script-->
        <script language="javascript" type="text/javascript" src="./third-party/jquery.canvaswrapper.js"></script>
        <script language="javascript" type="text/javascript" src="./third-party/jquery.colorhelpers.js"></script>
        <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/4.2.2/jquery.flot.js"></script>
        <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/4.2.2/jquery.flot.saturated.min.js"></script>
        <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/4.2.2/jquery.flot.browser.min.js"></script>
        <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/4.2.2/jquery.flot.drawSeries.min.js"></script>
        <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/4.2.2/jquery.flot.uiConstants.min.js"></script>
        <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/4.2.2/jquery.flot.symbol.min.js"></script>
        <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/4.2.2/jquery.flot.legend.min.js"></script>
        <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/4.2.2/jquery.flot.axislabels.min.js"></script>
        <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/9.4.3/math.js"></script>
        <script language="javascript" type="text/javascript" src="./third-party/cellauto.js"></script>
        <script language="javascript" type="text/javascript" src="./third-party/download.js"></script>
        <script language="javascript" type="text/javascript" src="./third-party/CCapture.min.js"></script>
        <script language="javascript" type="text/javascript" src="./third-party/html2canvas.min.js"></script>
        <script language="javascript" type="text/javascript" src="./third-party/webm-writer-0.3.0.js"></script>
        <script language="javascript" type="text/javascript" src="./third-party/rainbowvis.js"></script>
        <script language="javascript" type="text/javascript" src="./coatsimvis.js"></script>
        <script language="javascript" type="text/javascript" src="./examples.js"></script>
        <!--script language="javascript" type="text/javascript" src="./third-party/bootstrap.min.js"></script-->
        <script language="javascript" type="text/javascript" src="./third-party/FileSaver.js"></script>
        <!--<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> -->
</body>

</html>
 