<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>var module = {};</script>
<script src=./src/fit-parser.js></script>
<script src=./src/tkl-parser.js></script>
<script src=./src/main.js></script>
<style>
* {
box-sizing: border-box;
}
.container { border: 1p; padding: 6px;}
.column1 { width: 50%; float: left; padding: 5px; }
.column2 { width: 50%; height: 600px; float: left; padding: 2px;}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 50%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 8px;
border: auto; /* 0px solid #088; */
width: 180px;
left: 0;
top: 0;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 24px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
x-axis: y-axis:
<input id="clean" type="button" value='Clean plot'/>
       
<input id="updateMap" type="button" value='Update map'/>
<input id="cleanMap" type="button" value='Clean map'/>
       
<input id="reload" type="button" value='Reload'/>
<div class="container">
<div class="column1" id="plotarea" style="width:50%; height:600px; padding-left: 0pt; margin-bottom: 10px;"></div>
<div class="column2" id="map" style="width:50%; height:600px; padding-right: 0pt; margin-bottom: 10px;"></div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<span>
<label for="lineThickness">Thickness:   Color:</label> <br>
<select name="lineThickness" id="lineThickness" style="border: 5px;">
<!-- <option value=''>Thickness:</option> -->
<option value=0.5>          0.5</option>
<option value= 1>          1.0</option>
<option value= 2>          2.0</option>
<option value= 4>          4.0</option>
<option value= 8>          8.0</option>
</select>
</span>
<input type="color" id="lineColοr" name="lineColοr" value="#00ff00" />
<!-- <p> -->
<!-- <label for="min">Min:</label> <input type="number" id="miny" name="miny" maxlength=5> -->
<!-- <label for="max">Max:</label> <input type="number" id="maxy" name="maxy" maxlength=5> -->
<!-- </p> -->
</div>
</div>
<p style="line-height: 60px;">
<label for="zoom">zoom:</label>
<select name="zoom" id="zoom">
<option value="x" selected> x-axis</option>
<option value="xy">x and y</option>
<option value="y">y-axis</option>
</select>
<!-- input id="saveRange" type="button" value='Save range'/> -->
   
<label for="legendaction">    Click in the legend:</label>
<select name="legendaction" id="legendaction">
<option value="hide_show">Hide/Show curve</option>
<option value="change">Thickness/color</option>
<option value="remove_curve">Remove curve</option>
<option value="filter_curve">Apply filter to curve</option>
</select>
   
<label for="medfil1bin">Median filter size: </label>
<input type="number" id="medfil1bin" name="mfs" min="0" value="0" style="width: 60px;">
<label for="averfil1bin">Average moving size: </label>
<input type="number" id="averfil1bin" name="avfs" min="0" value="0" style="width: 60px;">
</p>
<p style="font-size: 10px; text-align:center;"> fitplotter (c) karaul (2021) </p>