1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
(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 hostname = window.location.hostname;
var url = "ws://"+hostname+":8888/socket?user=admin&password=admin";
console.log(url);
var ws = new WebSocket(url, "construct.text.0.2");
$(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!");
}
})();