145 lines
4.0 KiB
JavaScript
145 lines
4.0 KiB
JavaScript
(function() {
|
|
var $console;
|
|
|
|
var windowFocus = true;
|
|
|
|
$(window).focus(function() {
|
|
windowFocus = true;
|
|
//if ($console) $console.append("Window refocused, restarting graph.\n");
|
|
$(".focus-lost-overlay").addClass("out").removeClass("in").delay(1000).hide();
|
|
}).blur(function() {
|
|
windowFocus = false;
|
|
//if ($console) $console.append("Window's focus, lost stopping graph...\n");
|
|
$(".focus-lost-overlay")
|
|
.stop(true,true)
|
|
.show()
|
|
.addClass("in")
|
|
.removeClass("out");
|
|
}.debounce());
|
|
|
|
var connect = function() {
|
|
// Let us open a web socket
|
|
var url = "ws://localhost:8888/socket?user=admin&password=admin";
|
|
console.log(url);
|
|
var ws = new WebSocket(url);
|
|
$(function () {
|
|
$consoleWrapper = $(".console");
|
|
$console = $(".console pre");
|
|
$console.html("Connecting...\n")
|
|
onConnect(ws)
|
|
});
|
|
};
|
|
|
|
var updateSensorsUi = function() {
|
|
$(".sensors .val").each(function() {
|
|
$(this).html($(this).data("val")||"xx.x");
|
|
})
|
|
}.throttle(800);
|
|
|
|
var graph = null;
|
|
var graphData = [];
|
|
var graphResolution = 40;
|
|
|
|
var updateGraphData = function(current) {
|
|
current.time = Date.now();
|
|
if(graphData.length == graphResolution) graphData.shift();
|
|
graphData.push(current);
|
|
}
|
|
|
|
var updateGraphUi = function(current) {
|
|
if(graph == null)
|
|
{
|
|
graph = new Morris.Line({
|
|
// ID of the element in which to draw the chart.
|
|
element: "temperature-graph",
|
|
// Chart data records -- each entry in this array corresponds to a point on
|
|
// the chart.
|
|
data: graphData,
|
|
// The name of the data record attribute that contains x-values.
|
|
xkey: 'timestamp',
|
|
// A list of names of data record attributes that contain y-values.
|
|
ykeys: ['extruder', 'bed'],
|
|
// Labels for the ykeys -- will be displayed when you hover over the
|
|
// chart.
|
|
labels: ['extruder °C', 'bed °C'],
|
|
hideHover: 'always',
|
|
ymax: 'auto 250',
|
|
//pointSize: 0,
|
|
//parseTime: false,
|
|
xLabels: "decade"
|
|
});
|
|
}
|
|
else
|
|
{
|
|
graph.setData(graphData);
|
|
}
|
|
}
|
|
|
|
var updateUi = function(msg) {
|
|
if(windowFocus == false) return;
|
|
updateSensorsUi();
|
|
updateGraphUi();
|
|
}
|
|
|
|
var onConnect = function(ws) {
|
|
ws.onopen = function()
|
|
{
|
|
$console.append("Connected.\n");
|
|
// Web Socket is connected, send data using send()
|
|
|
|
};
|
|
var nextGraphPoint = {};
|
|
ws.onmessage = function (evt)
|
|
{
|
|
msg = JSON.parse(evt.data)
|
|
if(msg.sensor_changed != undefined)
|
|
{
|
|
var sensorNames = ["bed", "extruder"];
|
|
for (var i = 0; i < sensorNames.length; i++)
|
|
{
|
|
var name = msg.sensor_changed.name;
|
|
var val = parseFloat(msg.sensor_changed.value);
|
|
nextGraphPoint[name] = val;
|
|
$("."+name+" .val").data("val", val.format(1))
|
|
}
|
|
if(nextGraphPoint.bed != undefined && nextGraphPoint.extruder != undefined)
|
|
{
|
|
nextGraphPoint.timestamp = msg.timestamp
|
|
updateGraphData(nextGraphPoint);
|
|
nextGraphPoint = {};
|
|
}
|
|
requestAnimationFrame(updateUi);
|
|
}
|
|
else if (msg.job_progress_changed != undefined)
|
|
{
|
|
val = Math.round(parseFloat(msg.job_progress_changed)*10)/10;
|
|
$(".job-pogress .val").html(val);
|
|
}
|
|
else
|
|
{
|
|
console.log($consoleWrapper.scrollTop() - $console.innerHeight())
|
|
var atBottom = $consoleWrapper.scrollTop() - $console.innerHeight() > -220;
|
|
$console.append(evt.data + "\n");
|
|
if (atBottom)
|
|
{
|
|
$consoleWrapper.scrollTop($console.innerHeight());
|
|
}
|
|
}
|
|
};
|
|
ws.onclose = function()
|
|
{
|
|
// websocket is closed.
|
|
$console.append("\nConnection closed.");
|
|
};
|
|
};
|
|
|
|
if ("WebSocket" in window)
|
|
{
|
|
connect();
|
|
}
|
|
else
|
|
{
|
|
// The browser doesn't support WebSocket
|
|
alert("Error: WebSocket NOT supported by your Browser!");
|
|
}
|
|
})(); |