Commit aeffb1c6 authored by D1plo1d's avatar D1plo1d

Adding temperature graphing to the pronsole inspector

parent a5c1ae9d
......@@ -87,7 +87,7 @@ class ConstructSocketHandler(tornado.websocket.WebSocketHandler):
print "WebSocket opened. %i sockets currently open." % len(pronserve.clients)
def on_sensor_change(self):
self.write_message({'sensors': pronserve.sensors})
self.write_message({'sensors': pronserve.sensors, 'timestamp': time.time()})
def on_pronsole_log(self, msg):
self.write_message({'log': {msg: msg, level: "debug"}})
......@@ -169,7 +169,7 @@ class Pronserve(pronsole.pronsole):
#self.init_Settings()
self.ioloop = tornado.ioloop.IOLoop.instance()
self.clients = set()
self.settings.sensor_poll_rate = 0.7 # seconds
self.settings.sensor_poll_rate = 0.3 # seconds
self.sensors = {'extruder': -1, 'bed': -1}
self.load_default_rc()
#self.mdns = MdnsServer()
......@@ -183,7 +183,6 @@ class Pronserve(pronsole.pronsole):
def request_sensor_update(self):
if self.p.online: self.p.send_now("M105")
self.fire("sensor_change")
def recvcb(self, l):
""" Parses a line of output from the printer via printcore """
......
.sensors
{
margin-bottom: 20px;
margin-top: 15px;
}
.sensors>*
......@@ -24,7 +24,7 @@
.console
{
height: 300px;
height: 200px;
overflow-y: scroll;
}
......@@ -34,3 +34,8 @@
margin: 0px;
padding: 0px;
}
#temperature-graph
{
height: 200px;
}
\ No newline at end of file
......@@ -15,6 +15,48 @@ var connect = function() {
});
};
var updateSensors = function() {
$(".sensors .val").each(function() {
$(this).html($(this).data("val")||"xx.x");
})
}.throttle(800);
var graph = null;
var graphData = [];
var graphResolution = 40;
var updateGraph = function(current) {
current.time = Date.now();
if(graphData.length == graphResolution) graphData.shift();
graphData.push(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 onConnect = function(ws) {
ws.onopen = function()
{
......@@ -28,12 +70,16 @@ var onConnect = function(ws) {
if(msg.sensors != undefined)
{
var sensorNames = ["bed", "extruder"];
var values = {timestamp: msg.timestamp};
for (var i = 0; i < sensorNames.length; i++)
{
var name = sensorNames[i];
var val = parseFloat(msg.sensors[name]);
$("."+name+" .val").html(val.format(1));
values[name] = val;
$("."+name+" .val").data("val", val.format(1))
}
updateSensors();
updateGraph(values);
}
$console.append("\n"+evt.data);
$consoleWrapper.scrollTop($console.innerHeight());
......
......@@ -3,6 +3,7 @@
<head>
<title>Pronserve Inspector</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.1.min.css">
<link href="/static/css/inspect.css" rel="stylesheet">
</head>
......@@ -14,19 +15,23 @@
<h1>
Pronserve Inspector
</h1>
<div class="sensors">
<h2>Console</h2>
<div class="well console">
<pre>
Connecting...
</pre>
</div>
<div class="sensors pull-right">
<div class="extruder pull-right">
Extruder: <span class="val">xx.x</span><span class="deg">&deg;C</span>
</div>
<div class="bed pull-right">
Bed: <span class="val"/>xx.x</span><span class="deg">&deg;C</span>
</div>
<div class="clearfix"></div>
</div>
<div class="well console">
<pre>
Connecting...
</pre>
<h2>Temperature</h2>
<div class="clearfix"></div>
<div id="temperature-graph">
</div>
</div>
</div>
......@@ -36,6 +41,8 @@
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sugar/1.3.9/sugar.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<script src="/static/js/inspect.js"></script>
</body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment