generated from jmgiacalone/esp32-template
Functional.
This commit is contained in:
@@ -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