303 lines
7.9 KiB
JavaScript
303 lines
7.9 KiB
JavaScript
config = "";
|
|
all = [];
|
|
var table = "";
|
|
|
|
var protocol = 'ws:';
|
|
if (window.location.protocol == 'https:') {
|
|
protocol = 'wss:';
|
|
}
|
|
var host = "" + protocol + "//" + window.location.hostname + ":" + window.location.port;
|
|
var ws_status = new WebSocket(host+"/status");
|
|
var ws_config = new WebSocket(host+"/config");
|
|
|
|
ws_status.onmessage = function(e) {
|
|
x = JSON.parse(e.data);
|
|
if (x.pidstats) {
|
|
x.pidstats["datetime"]=unix_to_yymmdd_hhmmss(x.pidstats.time);
|
|
x.pidstats.err = x.pidstats.err*-1;
|
|
x.pidstats.out = x.pidstats.out*100;
|
|
x.pidstats.catching_up = x.catching_up
|
|
if (x.catching_up == true) {
|
|
x.pidstats.catchingup = x.pidstats.ispoint;
|
|
}
|
|
all.push(x.pidstats);
|
|
}
|
|
var str = JSON.stringify(x, null, 2);
|
|
document.getElementById("state").innerHTML = "<pre>"+str+"</pre>"
|
|
table.replaceData(latest(20));
|
|
drawall(all);
|
|
|
|
document.getElementById("error-current").innerHTML = rnd(x.pidstats.err);
|
|
document.getElementById("error-1min").innerHTML = rnd(average("err",1,all));
|
|
document.getElementById("error-5min").innerHTML = rnd(average("err",5,all));
|
|
document.getElementById("error-15min").innerHTML = rnd(average("err",15,all));
|
|
|
|
document.getElementById("temp").innerHTML = rnd(x.pidstats.ispoint);
|
|
document.getElementById("target").innerHTML = rnd(x.pidstats.setpoint);
|
|
|
|
document.getElementById("heat-pct").innerHTML = rnd(x.pidstats.out);
|
|
|
|
document.getElementById("catching-up").innerHTML = rnd(percent_catching_up(all));
|
|
};
|
|
|
|
ws_config.onopen = function() {
|
|
ws_config.send('GET');
|
|
};
|
|
|
|
ws_config.onmessage = function(e) {
|
|
config = JSON.parse(e.data);
|
|
//console.log(e);
|
|
};
|
|
|
|
create_table(all);
|
|
|
|
//---------------------------------------------------------------------------
|
|
function rnd(number) {
|
|
return Number(number).toFixed(2);
|
|
}
|
|
//---------------------------------------------------------------------------
|
|
function average(field,minutes,data) {
|
|
if(data[0]!=null) {
|
|
var t = data[data.length - 1].time;
|
|
var oldest = t-(60*minutes);
|
|
var q = "SELECT AVG("+ field + ") from ? where time>=" + oldest.toString();
|
|
var avg = alasql(q,[data]);
|
|
return avg[0]["AVG(err)"];
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
//---------------------------------------------------------------------------
|
|
function drawall(data) {
|
|
draw_temps(data);
|
|
draw_error(data);
|
|
draw_heat(data);
|
|
draw_p(data);
|
|
draw_i(data);
|
|
draw_d(data);
|
|
}
|
|
|
|
//---------------------------------------------------------------------------
|
|
function draw_heat(data) {
|
|
var traces=[];
|
|
var rows = alasql('SELECT datetime, out from ?',[data]);
|
|
var title = 'Heating Percent';
|
|
|
|
var trace = {
|
|
x: unpack(rows, 'datetime'),
|
|
y: unpack(rows, 'out'),
|
|
name: 'heat',
|
|
mode: 'lines',
|
|
line: { color: 'rgb(255,0,0)', width:2 }
|
|
};
|
|
|
|
traces.push(trace);
|
|
|
|
spot = document.getElementById('heat');
|
|
var layout = {
|
|
title: title,
|
|
showlegend: true,
|
|
};
|
|
Plotly.newPlot(spot, traces, layout, {displayModeBar: false});
|
|
}
|
|
|
|
//---------------------------------------------------------------------------
|
|
function draw_p(data) {
|
|
var traces=[];
|
|
var rows = alasql('SELECT datetime, p from ?',[data]);
|
|
var title = 'Proportional';
|
|
|
|
var trace = {
|
|
x: unpack(rows, 'datetime'),
|
|
y: unpack(rows, 'p'),
|
|
name: 'p',
|
|
mode: 'lines',
|
|
line: { color: 'rgb(0,0,255)', width:2 }
|
|
};
|
|
|
|
traces.push(trace);
|
|
|
|
spot = document.getElementById('p');
|
|
var layout = {
|
|
title: title,
|
|
showlegend: true,
|
|
};
|
|
Plotly.newPlot(spot, traces, layout, {displayModeBar: false});
|
|
}
|
|
|
|
//---------------------------------------------------------------------------
|
|
function draw_i(data) {
|
|
var traces=[];
|
|
var rows = alasql('SELECT datetime, i from ?',[data]);
|
|
var title = 'Integral';
|
|
|
|
var trace = {
|
|
x: unpack(rows, 'datetime'),
|
|
y: unpack(rows, 'i'),
|
|
name: 'i',
|
|
mode: 'lines',
|
|
line: { color: 'rgb(0,0,255)', width:2 }
|
|
};
|
|
|
|
traces.push(trace);
|
|
|
|
spot = document.getElementById('i');
|
|
var layout = {
|
|
title: title,
|
|
showlegend: true,
|
|
};
|
|
Plotly.newPlot(spot, traces, layout, {displayModeBar: false});
|
|
}
|
|
|
|
//---------------------------------------------------------------------------
|
|
function draw_d(data) {
|
|
var traces=[];
|
|
var rows = alasql('SELECT datetime, d from ?',[data]);
|
|
var title = 'Derivative';
|
|
|
|
var trace = {
|
|
x: unpack(rows, 'datetime'),
|
|
y: unpack(rows, 'd'),
|
|
name: 'd',
|
|
mode: 'lines',
|
|
line: { color: 'rgb(0,0,255)', width:2 }
|
|
};
|
|
|
|
traces.push(trace);
|
|
|
|
spot = document.getElementById('d');
|
|
var layout = {
|
|
title: title,
|
|
showlegend: true,
|
|
};
|
|
Plotly.newPlot(spot, traces, layout, {displayModeBar: false});
|
|
}
|
|
|
|
|
|
//---------------------------------------------------------------------------
|
|
function draw_error(data) {
|
|
var traces=[];
|
|
var rows = alasql('SELECT datetime, err from ?',[data]);
|
|
var title = 'Error';
|
|
|
|
var trace = {
|
|
x: unpack(rows, 'datetime'),
|
|
y: unpack(rows, 'err'),
|
|
name: 'error',
|
|
mode: 'lines',
|
|
line: { color: 'rgb(255,0,0)', width:2 }
|
|
};
|
|
|
|
traces.push(trace);
|
|
|
|
spot = document.getElementById('error');
|
|
var layout = {
|
|
title: title,
|
|
showlegend: true,
|
|
//xaxis : { tickformat:'%b' },
|
|
};
|
|
Plotly.newPlot(spot, traces, layout, {displayModeBar: false});
|
|
}
|
|
|
|
//---------------------------------------------------------------------------
|
|
function draw_temps(data) {
|
|
var traces=[];
|
|
var rows = alasql('SELECT datetime, ispoint, setpoint, catchingup from ?',[data]);
|
|
var title = 'Temperature and Target';
|
|
|
|
var trace = {
|
|
x: unpack(rows, 'datetime'),
|
|
y: unpack(rows, 'setpoint'),
|
|
name: 'target',
|
|
mode: 'lines',
|
|
line: { color: 'rgb(0,0,255)', width:2 }
|
|
};
|
|
|
|
traces.push(trace);
|
|
|
|
trace = {
|
|
x: unpack(rows, 'datetime'),
|
|
y: unpack(rows, 'ispoint'),
|
|
name: 'temp',
|
|
mode: 'lines',
|
|
line: { color: 'rgb(255,0,0)', width:2 }
|
|
};
|
|
|
|
traces.push(trace);
|
|
|
|
trace = {
|
|
x: unpack(rows, 'datetime'),
|
|
y: unpack(rows, 'catchingup'),
|
|
name: 'catchup',
|
|
mode: 'markers',
|
|
marker: { color: 'rgb(0,255,0)', width:3 }
|
|
};
|
|
|
|
traces.push(trace);
|
|
|
|
spot = document.getElementById('temps');
|
|
var layout = {
|
|
title: title,
|
|
showlegend: true,
|
|
//xaxis : { tickformat:'%b' },
|
|
};
|
|
Plotly.newPlot(spot, traces, layout, {displayModeBar: false});
|
|
}
|
|
|
|
//---------------------------------------------------------------------------
|
|
function unpack(rows, key) {
|
|
return rows.map(function(row) { return row[key]; });
|
|
}
|
|
|
|
|
|
//---------------------------------------------------------------------------
|
|
function unix_to_yymmdd_hhmmss(t) {
|
|
var date = new Date(t * 1000);
|
|
var newd = new Date(date.getTime() - date.getTimezoneOffset()*60000);
|
|
//return date.toLocaleString('en-US',{hour12:false}).replace(',','');
|
|
return newd.toISOString().replace("T"," ").substring(0, 19);
|
|
}
|
|
//---------------------------------------------------------------------------
|
|
function latest(n) {
|
|
//sql = "select * from ? order by time desc limit " + n;
|
|
sql = "select * from ? order by time desc";
|
|
results = alasql(sql,[all]);
|
|
return results;
|
|
}
|
|
|
|
//---------------------------------------------------------------------------
|
|
function percent_catching_up(data) {
|
|
var sql = "select sum(timeDelta) as slip from ? where catching_up=true";
|
|
var a = alasql(sql,[data]);
|
|
a = a[0]["slip"];
|
|
sql = "select sum(timeDelta) as [all] from ?";
|
|
var b = alasql(sql,[data]);
|
|
b = b[0]["all"];
|
|
return a/b*100;
|
|
}
|
|
//---------------------------------------------------------------------------
|
|
function create_table(data) {
|
|
table = new Tabulator("#state-table", {
|
|
height:300,
|
|
data:data, //assign data to table
|
|
//layout:"fitColumns", //fit columns to width of table (optional)
|
|
columns:[
|
|
{title:"DateTime", field:"datetime"},
|
|
{title:"Target", field:"setpoint"},
|
|
{title:"Temp", field:"ispoint"},
|
|
{title:"Error", field:"err"},
|
|
{title:"P", field:"p"},
|
|
{title:"I", field:"i"},
|
|
{title:"D", field:"d"},
|
|
{title:"Heat", field:"out"},
|
|
{title:"Catching Up", field:"catching_up"},
|
|
{title:"Time Delta", field:"timeDelta"},
|
|
]});
|
|
}
|
|
|
|
//---------------------------------------------------------------------------
|
|
function csv_string() {
|
|
table.download("csv", "kiln-state.csv");
|
|
}
|
|
|