433 lines
12 KiB
HTML
433 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
|
|
<title>PicoReflow</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script src="assets/js/jquery-1.10.2.min.js"></script>
|
|
<script src="assets/js/highcharts.js"></script>
|
|
<script src="assets/js/draggable-points.js"></script>
|
|
<script src="assets/js/bootstrap.min.js"></script>
|
|
<script src="assets/js/select2.min.js"></script>
|
|
<script src="assets/js/picoreflow.js"></script>
|
|
|
|
|
|
<link rel="stylesheet" href="assets/css/bootstrap.min.css"/>
|
|
<link rel="stylesheet" href="assets/css/bootstrap-theme.min.css"/>
|
|
<link rel="stylesheet" href="assets/css/select2.css"/>
|
|
<link rel="stylesheet" href="assets/css/picoreflow.css"/>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
|
|
<!-- Static navbar -->
|
|
<div id="main_status">
|
|
<div class="pull-left" style="margin: 14px">
|
|
<span id="act_temp" class="display" style="color: #75890c">25 °C</span>
|
|
<span id="target_temp" class="display">OFF</span>
|
|
<span id="state" class="display" style="font-size: 14px; text-align: center; padding-right:0">Idle</span>
|
|
<span id="eta" class="display" style="width: 60px">-</span>
|
|
<span id="power" class="display" style="width: 35px;"> </span>
|
|
</div>
|
|
|
|
<div class="clearfix"></div>
|
|
|
|
<div class="progress progress-striped active" style="margin: 14px; margin-top: 0">
|
|
<div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
|
|
<span class="sr-only"></span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- /Static navbar -->
|
|
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">
|
|
|
|
<select id="e2" style="margin-top: 4px"></select>
|
|
|
|
<div id="saveas" class="input-group" style="display:none;">
|
|
<span class="input-group-addon">Profile Name</span>
|
|
<input id="form_profile_name" type="text" class="form-control" />
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-success" type="button" onclick="saveProfile();">Save</button>
|
|
<button id="btn_exit" type="button" class="btn btn-danger" onclick="leaveEditMode()" style="display:none"><span class="glyphicon glyphicon-remove"></span></button>
|
|
</span>
|
|
</div><!-- /input-group -->
|
|
|
|
<div class="btn-group btn-group-sm">
|
|
<!--<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></button>-->
|
|
<button id="btn_edit" type="button" class="btn btn-default" onclick="enterEditMode()"><span class="glyphicon glyphicon-pencil"></span></button>
|
|
</div>
|
|
|
|
<div class="pull-right" style="margin-top: 3px">
|
|
<button id="nav_start" type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" style="display:none"><span class="glyphicon glyphicon-play"></span> Start</button>
|
|
<button id="nav_stop" type="button" class="btn btn-danger" onclick="abortTask()" style="display:none" ><span class="glyphicon glyphicon-stop"></span> Stop</button>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="panel-body" style='padding: 0'>
|
|
<div id="graph_container" style="height: 400px; margin: 0 auto"></div>
|
|
</div>
|
|
|
|
</div>
|
|
</div> <!-- /container -->
|
|
|
|
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
|
<h3 class="modal-title" id="myModalLabel">Task Overview</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
|
|
<table class="table table-bordered">
|
|
<tr><td>Selected Profile</td><td><b><span id="sel_prof"></span></b></td></tr>
|
|
<tr><td>Estimated Runtime</td><td><b>5 Minutes</b></td></tr>
|
|
<tr><td>Estimated Power consumption</td><td><b>0.320 kWh (EUR 0.08)</b></td></tr>
|
|
</table>
|
|
|
|
</div>
|
|
<div class="modal-footer">
|
|
<div class="btn-group" style="width: 100%">
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">No, take me back</button>
|
|
<button type="button" class="btn btn-success" data-dismiss="modal" onclick="runTask()">Yes, start the Run</button>
|
|
</div>
|
|
</div>
|
|
</div><!-- /.modal-content -->
|
|
</div><!-- /.modal-dialog -->
|
|
</div><!-- /.modal -->
|
|
|
|
|
|
<script>
|
|
|
|
var state = "IDLE";
|
|
var graph;
|
|
var profiles = [];
|
|
var selected_profile = 0;
|
|
var selected_profile_name = "leadfree";
|
|
|
|
|
|
var host = "ws://" + window.location.hostname + ":8080";
|
|
|
|
|
|
// Status Socket ////////////////////////////////
|
|
|
|
var ws_status = new WebSocket(host+"/status");
|
|
|
|
ws_status.onopen = function()
|
|
{
|
|
console.log("Status Socket has been opened");
|
|
}
|
|
|
|
|
|
// Control Socket ////////////////////////////////
|
|
|
|
var ws_control = new WebSocket(host+"/control");
|
|
|
|
ws_control.onopen = function()
|
|
{
|
|
ws_control.onmessage = function(e)
|
|
{
|
|
console.log (e.data);
|
|
}
|
|
|
|
console.log("Control Socket has been opened");
|
|
}
|
|
|
|
|
|
// Storage Socket ///////////////////////////////
|
|
|
|
var ws_storage = new WebSocket(host+"/storage");
|
|
|
|
ws_storage.onopen = function()
|
|
{
|
|
console.log("Storage Socket has been opened");
|
|
|
|
ws_storage.onmessage = function(e)
|
|
{
|
|
console.log('Storage MSG:' + e.data);
|
|
|
|
message = JSON.parse(e.data);
|
|
|
|
console.log("Parsed message:" + message);
|
|
|
|
if(message.resp)
|
|
{
|
|
console.log("RESP");
|
|
if(message.resp == "FAIL")
|
|
{
|
|
console.log("FAIL");
|
|
if (confirm('Overwrite?')) {
|
|
//message.cmd="PUT";
|
|
message.force=true;
|
|
console.log("Sending: " + JSON.stringify(message));
|
|
ws_storage.send(JSON.stringify(message));
|
|
} else {
|
|
//do nothing
|
|
}
|
|
}
|
|
return;
|
|
}
|
|
//the message is an array of profiles
|
|
//FIXME: this should be better, maybe a {"profiles": ...} container?
|
|
profiles = message;
|
|
//delete old options in select
|
|
$('#e2')
|
|
.find('option')
|
|
.remove()
|
|
.end();
|
|
|
|
// fill select with new options from websocket
|
|
for (var i=0; i<profiles.length; i++)
|
|
{
|
|
var profile = profiles[i];
|
|
console.log(profile.name);
|
|
$('#e2').append('<option value="'+i+'">'+profile.name+'</option>');
|
|
|
|
if (profile.name == selected_profile_name)
|
|
{
|
|
console.log('Matchiemazvhie');
|
|
selected_profile = i;
|
|
$('#e2').select2('val', i);
|
|
update_profile(i);
|
|
}
|
|
|
|
}
|
|
|
|
graph.render();
|
|
|
|
}
|
|
|
|
console.log('Requesting stored profiles');
|
|
ws_storage.send('GET');
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$("#e2").select2({
|
|
placeholder: "Temperature Curve",
|
|
allowClear: false
|
|
});
|
|
|
|
|
|
$("#e2").on("change", function(e) {
|
|
update_profile(e.val);
|
|
});
|
|
|
|
|
|
|
|
// Apply the theme
|
|
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
|
|
|
|
|
|
|
|
|
|
|
|
$(function() {
|
|
Highcharts.setOptions({
|
|
global: {
|
|
useUTC: false
|
|
}
|
|
});
|
|
|
|
|
|
|
|
var options =
|
|
{
|
|
title: { text: '' },
|
|
xAxis: {
|
|
title: { text: 'Time (s)' },
|
|
type: 'integer',
|
|
tickPixelInterval: 60
|
|
},
|
|
yAxis: {
|
|
title: { text: 'Temperature (\xB0C)' },
|
|
tickInterval: 25,
|
|
min: 0,
|
|
max: 300
|
|
},
|
|
tooltip: {
|
|
formatter: function() {
|
|
return Highcharts.numberFormat(this.y, 0);
|
|
}
|
|
},
|
|
chart: {
|
|
type: 'line',
|
|
renderTo: 'graph_container',
|
|
animation: true,
|
|
zoomType: 'x',
|
|
marginTop: 30,
|
|
marginRight: 30,
|
|
events: {
|
|
load: function() {
|
|
var series = this.series[1];
|
|
|
|
|
|
ws_status.onmessage = function(e)
|
|
{
|
|
x = JSON.parse(e.data);
|
|
|
|
if(state!="EDIT")
|
|
{
|
|
state = x.state;
|
|
}
|
|
|
|
$('#state').html(state);
|
|
|
|
updateProgress(parseInt(parseFloat(x.runtime)/parseFloat(x.totaltime)*100));
|
|
|
|
$('#act_temp').html(Highcharts.numberFormat(x.temperature, 0) + ' \xB0C');
|
|
$('#power').css("background-color", (x.power > 0.5 ? "#75890c" : "#1F1E1A") );
|
|
|
|
|
|
if (x.target == 0)
|
|
{
|
|
$('#target_temp').html('OFF');
|
|
}
|
|
else
|
|
{
|
|
$('#target_temp').html(Highcharts.numberFormat(x.target, 0) + ' \xB0C');
|
|
}
|
|
//console.log (e.data);
|
|
//console.log('Percent finished:' + perc);
|
|
|
|
if(state!="EDIT")
|
|
{
|
|
|
|
if(state=="RUNNING")
|
|
{
|
|
$("#nav_start").hide();
|
|
$("#nav_stop").show();
|
|
series.addPoint([x.runtime, x.temperature], true, false);
|
|
|
|
left = parseInt(x.totaltime-x.runtime);
|
|
var minutes = Math.floor(left / 60);
|
|
var seconds = left - minutes * 60;
|
|
$('#eta').html(minutes+':'+ (seconds < 10 ? "0" : "") + seconds);
|
|
|
|
|
|
|
|
}
|
|
else
|
|
{
|
|
$("#nav_start").show();
|
|
$("#nav_stop").hide();
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/*
|
|
var socket = io.connect('http://10.1.1.110:8080');
|
|
socket.on('sample', function (sample) {
|
|
// when a sample arrives we plot it
|
|
series.addPoint([sample.x, sample.y], true, false);
|
|
$('#act_temp').html(Highcharts.numberFormat(sample.y, 0) + ' \xB0C');
|
|
|
|
|
|
});
|
|
|
|
socket.on('error', function () {
|
|
|
|
$(document).trigger("add-alerts", [
|
|
{
|
|
'message': "No communication to control server",
|
|
'priority': 'error'
|
|
}
|
|
]);
|
|
|
|
|
|
})
|
|
|
|
// Called when the connection to the server is opened.
|
|
socket.onopen = function () {
|
|
alert("Connection with server open.");
|
|
};
|
|
|
|
// Called when the connection to the server is closed.
|
|
socket.onclose = function () {
|
|
alert("Connection with server closed; Maybe the server wasn't found, it shut down or you're behind a firewall/proxy.");
|
|
};
|
|
*/
|
|
}
|
|
},
|
|
resetZoomButton: {
|
|
position: {
|
|
align: 'right',
|
|
verticalAlign: 'top'
|
|
}
|
|
}
|
|
},
|
|
|
|
plotOptions: {
|
|
series: {
|
|
cursor: 'resize',
|
|
point: {
|
|
events: {
|
|
/*
|
|
drag: function (e) {
|
|
$('#drag').html('Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.newY, 0) + '</b>');
|
|
},
|
|
drop: function () {
|
|
$('#drop').html('In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 0) + '</b>');
|
|
}*/
|
|
}
|
|
},
|
|
stickyTracking: false
|
|
},
|
|
|
|
},
|
|
|
|
credits: {
|
|
enabled: false
|
|
},
|
|
|
|
series: [{
|
|
name: 'Ref',
|
|
data: [
|
|
[1, 25 ],
|
|
[70, 150 ],
|
|
[180, 183 ],
|
|
[210, 230 ],
|
|
[240, 183 ],
|
|
[300, 25 ]
|
|
],
|
|
draggableX: false,
|
|
draggableY: false,
|
|
dragMinY: 0,
|
|
dragMaxY: 250,
|
|
marker: {
|
|
enabled: false
|
|
}
|
|
},
|
|
{
|
|
name: 'Act',
|
|
data: [
|
|
[0,0]
|
|
],
|
|
marker: {
|
|
enabled: false
|
|
}
|
|
}]
|
|
|
|
};
|
|
|
|
graph = new Highcharts.Chart(options);
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|