generated from jmgiacalone/esp32-template
142 lines
6.5 KiB
HTML
142 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>eMAKER Reflow Controller</title>
|
|
<!--Import Google Icon Font-->
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
|
|
<!--Let browser know website is optimized for mobile-->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta charset="utf-8" />
|
|
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
|
|
<link rel="stylesheet" type="text/css" href="css/style.css" />
|
|
<link rel="icon" type="image/x-icon" href="emaker.ico" />
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-dragdata@0.1.0/dist/chartjs-plugin-dragData.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- Header row -->
|
|
<div class="row">
|
|
<div class="col 6 logo">
|
|
<img src="eMAKER.png" alt="eMAKER" />
|
|
</div>
|
|
<div class="col 6">
|
|
<h5>Oven control</h5>
|
|
</div>
|
|
</div>
|
|
<!-- Data tabs row -->
|
|
<div class="row">
|
|
<div class="card blue-grey darken-1 z-depth-3">
|
|
<div class="card-tabs">
|
|
<ul class="tabs tabs-transparent">
|
|
<li class="tab col s3"><a href="#tabTemp">Temperature control</a>
|
|
</li>
|
|
<li class="tab col s3"><a href="#tabPID">Edit PID</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="card-content blue-grey darken-1">
|
|
<div id="tabTemp" class="active">
|
|
<div class="row">
|
|
<div class="input-field col s3">
|
|
<input disabled id="tempinfo" type="number" value="-1" />
|
|
<label for="tempinfo">Temperature</label>
|
|
</div>
|
|
<div class="input-field col s3">
|
|
<input disabled id="targetinfo" type="number" value="-1" />
|
|
<label for="targetinfo">Target</label>
|
|
</div>
|
|
<div class="input-field col s3">
|
|
<input disabled id="powerinfo" type="number" value="-1" />
|
|
<label for="powerinfo">Power</label>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="input-field col s3">
|
|
<input type="number" name="Target" id="target" />
|
|
<label for="target">Target:</label>
|
|
</div>
|
|
<div class="row">
|
|
<div class="valign-wrapper">
|
|
<h5><a class="waves-effect waves-light btn" id="btnTarget" onclick="setTarget()">Set</a></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="tabPID">
|
|
<div class="row">
|
|
<div class="input-field col s3">
|
|
<input type="number" name="Kp" id="kp" />
|
|
<label for="kp">Kp:</label>
|
|
</div>
|
|
<div class="input-field col s3">
|
|
<input type="number" name="Ki" id="ki" />
|
|
<label for="ki">Ki:</label>
|
|
</div>
|
|
<div class="input-field col s3">
|
|
<label for="kd">Kd:</label>
|
|
<input type="number" name="Kd" id="kd" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="valign-wrapper">
|
|
<h5><a class="waves-effect waves-light btn" id="btnPID" onclick="setPID()">Submit</a></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Graph row -->
|
|
<div class="row">
|
|
<div class="card blue-grey darken-1 z-depth-3">
|
|
<div class="card-content white-text chart-container">
|
|
<canvas id="myChart"></canvas>
|
|
</div>
|
|
<div class="card-action">
|
|
<div class="row valign-wrapper">
|
|
<div class="input-field col s3">
|
|
<input type="text" name="profileName" id="profileName" />
|
|
<label for="Xmax">enter new profile name</label>
|
|
</div>
|
|
<div class="col s6">
|
|
<div>
|
|
<a class="btn tooltipped" data-position="bottom" data-tooltip="Save temperature profile." id="btnSaveProfile" onclick="saveProfile()"><i class="material-icons right">save</i>Save</a>
|
|
<a class="btn tooltipped" data-position="bottom" data-tooltip="Run temperature profile." id="btnRunProfile" onclick="runProfile()"><i class="material-icons right">play_arrow</i>Run</a>
|
|
<a class="btn tooltipped" data-position="bottom" data-tooltip="Delete temperature profile." id="btnDeleteProfile" onclick="deleteProfile()"><i class="material-icons right">delete</i>Delete</a>
|
|
</div>
|
|
</div>
|
|
<div class="input-field col s2">
|
|
<input type="number" name="Xmax" id="xmax" />
|
|
<label for="Xmax">Set overall time</label>
|
|
</div>
|
|
<div class="valign-wrapper col s1">
|
|
<h5><a class="waves-effect waves-light btn tooltipped" data-position="bottom" data-tooltip="Set time period." id="btnXmax" onclick="setXmax()">xMax</a></h5>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Profiles list-->
|
|
<div class="row">
|
|
<div class="card blue-grey darken-1 z-depth-3">
|
|
<div class="card-content">
|
|
<!--table here-->
|
|
<ul class="collection with-header" id="profilesList">
|
|
<li class="collection-header"><h4>Available profiles</h4></li>
|
|
<li class="collection-item"><div>ESP_1<a href="#!" class="secondary-content" onclick="getProfile('ESP_1')"><i class="material-icons">cloud_download</i></a></div></li>
|
|
<li class="collection-item"><div>ESP_2<a href="#!" class="secondary-content" onclick="getProfile('ESP_2')"><i class="material-icons">cloud_download</i></a></div></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer row -->
|
|
<div class="row">
|
|
ESP32
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="js/materialize.min.js"></script>
|
|
<script type="text/javascript" src="js/scripts.js"></script>
|
|
</body>
|
|
</html>
|