generated from jmgiacalone/esp32-template
Functional.
This commit is contained in:
13
data/css/materialize.min.css
vendored
Normal file
13
data/css/materialize.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
114
data/index.htm
114
data/index.htm
@@ -1,7 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>eMAKER Printer Climate Control</title>
|
||||
<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-->
|
||||
@@ -9,27 +9,111 @@
|
||||
<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="favicon.ico" />
|
||||
<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 id="header" class="row">
|
||||
<div class="col 6 logo">
|
||||
<img src="eMAKER.png" alt="eMAKER logo" />
|
||||
</div>
|
||||
<div class="col 6">
|
||||
<h5>Printer Climate Control</h5>
|
||||
<!-- 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>
|
||||
<!-- Data row-->
|
||||
<!-- Graph row -->
|
||||
<div class="row">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<a href="/wifimanager.html">WiFi</a>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<div class="input-field col s3">
|
||||
<input type="number" name="Xmax" id="xmax" />
|
||||
<label for="Xmax">Set overall time</label>
|
||||
</div>
|
||||
<div class="valign-wrapper col s3">
|
||||
<h5><a class="waves-effect waves-light btn tooltipped" data-position="bottom" data-tooltip="Set time period." id="btnXmax" onclick="setXmax()">Set</a></h5>
|
||||
</div>
|
||||
<div class="col s6">
|
||||
<div class="center-align">
|
||||
<h5><a class="teal waves-effect waves-light btn tooltipped" data-position="bottom" data-tooltip="Run temperature profile." id="btnRunProfile" onclick="runProfile()">Run</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer row -->
|
||||
<div class="row">
|
||||
ESP32
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" src="js/materialize.min.js"></script>
|
||||
|
||||
985
data/js/dragData.min.js
vendored
Normal file
985
data/js/dragData.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
6
data/js/materialize.min.js
vendored
Normal file
6
data/js/materialize.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -1,37 +1,106 @@
|
||||
var oven_status = "";
|
||||
var _run = 0;
|
||||
var _elapsedTime = 0;
|
||||
|
||||
function getParams() {
|
||||
const url = '/paraams';
|
||||
fetch(url)
|
||||
.then((respone)=>{
|
||||
return respone.json();
|
||||
})
|
||||
.then((data)=>{
|
||||
document.getElementById('Iim').value = data.Iim || -1;
|
||||
document.getElementById('Imp').value = data.Imp || -1;
|
||||
document.getElementById('Tu').value = data.Tu || -1;
|
||||
document.getElementById('Tl').value = data.Tl || -1;
|
||||
M.updateTextFields();
|
||||
})
|
||||
}
|
||||
|
||||
function setParams() {
|
||||
|
||||
const data = new URLSearchParams();
|
||||
|
||||
data.append('Iim',document.getElementById('Iim').value);
|
||||
data.append('Imp',document.getElementById('Imp').value);
|
||||
data.append('Tu',document.getElementById('Tu').value);
|
||||
data.append('Tl',document.getElementById('Tl').value);
|
||||
|
||||
fetch('/params', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
body: data
|
||||
setInterval(function () {
|
||||
const url = '/status';
|
||||
fetch(url)
|
||||
.then((respone)=>{
|
||||
return respone.json();
|
||||
})
|
||||
.then((data)=>{
|
||||
document.getElementById("tempinfo").value = data.temp || -1;
|
||||
document.getElementById("targetinfo").value = data.target || -1;
|
||||
document.getElementById("powerinfo").value = data.power || -1;
|
||||
_run = data.runProfile || 0;
|
||||
_elapsedTime = data.elapsedTime || 0;
|
||||
M.updateTextFields();
|
||||
})
|
||||
|
||||
if(_run == 1){
|
||||
myChart.data.datasets[1].data.push({
|
||||
x:_elapsedTime / 1000,
|
||||
y:document.getElementById("tempinfo").value
|
||||
});
|
||||
myChart.update();
|
||||
}
|
||||
}, 4000);
|
||||
|
||||
function setXmax() {
|
||||
myChart.data.datasets[0].data[9].x = document.getElementById('xmax').value;
|
||||
myChart.update();
|
||||
}
|
||||
function setTarget() {
|
||||
const data = new URLSearchParams();
|
||||
data.append('value',document.getElementById('target').value);
|
||||
fetch('/target', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
body: data
|
||||
})
|
||||
}
|
||||
|
||||
function getPID() {
|
||||
const url = '/pid';
|
||||
fetch(url)
|
||||
.then((respone)=>{
|
||||
return respone.json();
|
||||
})
|
||||
.then((data)=>{
|
||||
document.getElementById('kp').value = data.kp || -1;
|
||||
document.getElementById('ki').value = data.ki || -1;
|
||||
document.getElementById('kd').value = data.kd || -1;
|
||||
M.updateTextFields();
|
||||
})
|
||||
}
|
||||
|
||||
function setPID() {
|
||||
const data = new URLSearchParams();
|
||||
data.append('kp', document.getElementById('kp').value);
|
||||
data.append('ki', document.getElementById('ki').value);
|
||||
data.append('kd', document.getElementById('kd').value);
|
||||
fetch('/pid', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
body: data
|
||||
})
|
||||
}
|
||||
function runProfile() {
|
||||
var btn = document.getElementById("btnRunProfile");
|
||||
const data = new URLSearchParams();
|
||||
if(_run == 1){
|
||||
//stop profile
|
||||
_run = 0;
|
||||
btn.classList.remove("red");
|
||||
btn.classList.add("teal");
|
||||
btn.innerHTML = "Run";
|
||||
data.append('run', _run);
|
||||
}else{
|
||||
//run profile
|
||||
_run = 1;
|
||||
data.append('run', _run);
|
||||
data.append('profile', JSON.stringify(myChart.data.datasets[0].data));
|
||||
btn.classList.remove("teal");
|
||||
btn.classList.add("red");
|
||||
btn.innerHTML = "Stop";
|
||||
_elapsedTime = 0;
|
||||
myChart.data.datasets[1].data.length = 0;
|
||||
myChart.update();
|
||||
}
|
||||
|
||||
fetch('/profile', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
},
|
||||
body: data
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function joinNetwork() {
|
||||
|
||||
@@ -61,24 +130,80 @@ async function scanNetworks() {
|
||||
document.getElementById("networks").innerHTML = listHTML;
|
||||
}
|
||||
|
||||
setInterval(function () {
|
||||
aja()
|
||||
.url('/sensors')
|
||||
.on('success', function (data) {
|
||||
document.getElementById("tempinfo").value = data.temperature || -1;
|
||||
document.getElementById("humidityinfo").value = data.humidity || -1;
|
||||
document.getElementById("pressureinfo").value = data.pressure || -1;
|
||||
//document.getElementById("targetinfo").value = data.target.toFixed(2) || -1;
|
||||
_run = data.runProfile || 0;
|
||||
_elapsedTime = data.elapsedTime || 0;
|
||||
M.updateTextFields();
|
||||
})
|
||||
.go();
|
||||
}, 4000);
|
||||
var ctx = document.getElementById("myChart");
|
||||
Chart.defaults.global.defaultFontColor = 'red';
|
||||
var myChart = new Chart(ctx, {
|
||||
type: 'scatter',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: 'Temperature profile',
|
||||
data: [{
|
||||
x: 0, y: 25
|
||||
}, {
|
||||
x: 90, y: 150
|
||||
}, {
|
||||
x: 270, y: 200
|
||||
}, {
|
||||
x: 300, y: 235
|
||||
}, {
|
||||
x: 330, y: 250
|
||||
}, {
|
||||
x: 360, y: 217
|
||||
}, {
|
||||
x: 420, y: 25
|
||||
}, {
|
||||
x: 480, y: 25
|
||||
}, {
|
||||
x: 540, y: 25
|
||||
}, {
|
||||
x: 600, y: 25
|
||||
}],
|
||||
lineTension: 0,
|
||||
showLine: true
|
||||
},{
|
||||
label: 'History',
|
||||
data: [{
|
||||
x:0, y:0
|
||||
}],
|
||||
lineTension: 0,
|
||||
showLine: true,
|
||||
pointBackgroundColor: 'red'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
layout: {
|
||||
padding: {
|
||||
bottom: 20
|
||||
}
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero:true,
|
||||
min: 0,
|
||||
max: 280
|
||||
}
|
||||
}]
|
||||
},
|
||||
dragData: true,
|
||||
dragX: true,
|
||||
onDragStart: function (event, element) {},
|
||||
onDrag: function (event, datasetIndex, index, value) {},
|
||||
onDragEnd: function (event, datasetIndex, index, value) {}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
var ttOptions = {
|
||||
enterDelay: 500,
|
||||
inDuration: 300
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var elems = document.querySelectorAll('.tooltipped');
|
||||
var instances = M.Tooltip.init(elems, ttOptions);
|
||||
getPID();
|
||||
M.AutoInit();
|
||||
getParams();
|
||||
// var elems = document.querySelectorAll('.tooltipped');
|
||||
// var instances = M.Tooltip.init(elems, ttOptions);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user