diff --git a/kiln/static/css/temp_monitor.css b/kiln/static/css/temp_monitor.css
new file mode 100644
index 0000000..17bbc92
--- /dev/null
+++ b/kiln/static/css/temp_monitor.css
@@ -0,0 +1,56 @@
+body {
+ padding-top: 70px;
+}
+.row-space {
+ margin-bottom:15px;
+}
+.output-slider {
+ width:7% !important;
+}
+
+.temperature {
+ fill: none;
+ stroke: steelblue;
+ stroke-width: 1.5px;
+}
+
+.axis .tick{
+ stroke:#DDD;
+ stroke-width:.5px;
+}
+.domain{
+ display:none;
+}
+
+#graph {
+ width:100%;
+ height:500px;
+}
+
+#stop_button_navbar {
+ margin-left:10px;
+ margin-right:10px;
+}
+
+#current_temp {
+ font-weight:bold;
+ font-size:200%;
+ color:black;
+}
+
+.profile-pane {
+ fill:#EEE;
+}
+.profile-line {
+ stroke:green;
+ stroke-width:1.5px;
+ fill:none;
+}
+.profile-line.dot {
+ fill:white;
+ stroke:black;
+ stroke-width:1px;
+}
+.profile-line.dot:hover {
+ stroke-width:5px;
+}
\ No newline at end of file
diff --git a/kiln/static/js/temp_graph.js b/kiln/static/js/temp_graph.js
index 78ba113..987d176 100644
--- a/kiln/static/js/temp_graph.js
+++ b/kiln/static/js/temp_graph.js
@@ -23,7 +23,7 @@ var tempgraph = (function(module) {
.attr("width", this.width)
.attr("height", this.height);
- var xfm = this.svg.append("g")
+ this.pane = this.svg.append("g")
.attr("transform", "translate("+this.margin.left+","+this.margin.top+")")
/*xfm.append("rect")
@@ -44,12 +44,12 @@ var tempgraph = (function(module) {
.tickSize(this.width).tickSubdivide(true);
//setup axies labels and ticks
- xfm.append("g")
+ this.pane.append("g")
.attr("class", "x axis")
//.attr("transform", "translate(0," + this.height + ")")
.call(this.x_axis);
- xfm.append("g")
+ this.pane.append("g")
.attr("class", "y axis")
.attr("transform", "translate("+this.width+", 0)")
.call(this.y_axis)
@@ -63,7 +63,7 @@ var tempgraph = (function(module) {
}
- this.axes = xfm.append("g")
+ this.axes = this.pane.append("g")
.attr("class", "axes")
.attr("style", "clip-path:url(#pane)");
window.onresize = this.resize.bind(this);
@@ -84,10 +84,11 @@ var tempgraph = (function(module) {
.attr("d", line);
if (marker !== undefined && marker) {
+ var selector = className.replace(" ", ".");
var marker = this.axes.append("g")
- .selectAll(".dot").data(data)
+ .selectAll("."+selector+".dot").data(data)
.enter().append("circle")
- .attr("class", "dot")
+ .attr("class", className+" dot")
.attr("r", 5)
.attr("cx", function(d) { return this.x(d.x); }.bind(this))
.attr("cy", function(d) { return this.y(d.y); }.bind(this));
@@ -107,7 +108,7 @@ var tempgraph = (function(module) {
data = this.lines[name].data;
marker = this.lines[name].marker;
if (marker !== undefined) {
- this.svg.selectAll(".dot").data(data)
+ this.axes.selectAll(".dot").data(data)
.attr("cx", function(d) { return this.x(d.x)}.bind(this))
.attr("cy", function(d) { return this.y(d.y)}.bind(this));
}
diff --git a/kiln/static/js/temp_monitor.js b/kiln/static/js/temp_monitor.js
index 86b2038..73a693d 100644
--- a/kiln/static/js/temp_monitor.js
+++ b/kiln/static/js/temp_monitor.js
@@ -62,9 +62,13 @@ var tempgraph = (function(module) {
$("#current_output").val(data.output*1000);
}
}
+
+ //update the profile
+ if (this.profile)
+ this.profile.update();
}
module.Monitor.prototype.setProfile = function(schedule, start_time) {
- this.profile = new module.Profile(schedule, start_time);
+ this.profile = new module.Profile(this.graph, this.scalefunc, schedule, start_time);
var start = this.profile.time_start === undefined ?
"Not started" : module.format_time(start_time);
$("#profile_time_total").text(this.profile.time_total);
@@ -102,8 +106,10 @@ var tempgraph = (function(module) {
this._mapped = this.temperature.map(this._map_temp.bind(this));
this.graph.y.domain(d3.extent(this._mapped, function(d) { return d.y; }));
- this.update_temp(this.last());
+ this.updateTemp(this.last());
this.graph.update("temperature", this._mapped);
+ if (this.profile)
+ this.profile.setScale(this.scalefunc);
}
module.Monitor.prototype._map_temp = function(d) {
@@ -169,7 +175,7 @@ var tempgraph = (function(module) {
}.bind(this));
try {
- var sock = new WebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws/", "protocolOne");
+ var sock = new WebSocket("ws://"+window.location.hostname+":"+window.location.port+"/ws/");
sock.onmessage = function(event) {
var data = JSON.parse(event.data);
diff --git a/kiln/static/js/temp_profile.js b/kiln/static/js/temp_profile.js
index 2056958..1b23d06 100644
--- a/kiln/static/js/temp_profile.js
+++ b/kiln/static/js/temp_profile.js
@@ -1,5 +1,5 @@
var tempgraph = (function(module) {
- module.Profile = function(schedule, start_time) {
+ module.Profile = function(graph, scale, schedule, start_time) {
var end = schedule[schedule.length-1][0];
var days = Math.floor(end / 60 / 60 / 24);
var hours = Math.floor((end - days*60*60*24) / 60 / 60);
@@ -10,6 +10,11 @@ var tempgraph = (function(module) {
this.length = end;
this.time_total = daystr+hourstr+minstr;
this.time_start = start_time;
+ this.schedule = schedule;
+
+ this.graph = graph;
+ this.scalefunc = scale;
+ this.setupGraph();
}
module.Profile.prototype.time_finish = function(now) {
if (this.time_start instanceof Date) {
@@ -18,5 +23,57 @@ var tempgraph = (function(module) {
return new Date(now.getTime() + this.length*1000);
}
+ module.Profile.prototype.setScale = function(scale) {
+ this.scalefunc = scale;
+ }
+ module.Profile.prototype.setupGraph = function() {
+ //immediately view range from 10 min before to end time of profile
+ var now = new Date();
+ var rstart = new Date(now.getTime() - 10*60*100);
+ var rend = this.time_finish(now);
+ this.graph.xlim(rstart, rend);
+
+ this.pane = this.graph.pane.insert("rect", ":first-child")
+ .attr("class", "profile-pane")
+ .attr("height", this.graph.height)
+
+ this.graph.zoom.on("zoom.profile", this.update.bind(this));
+ this.line = this.graph.plot(this._schedule(), "profile-line", true);
+ this.update();
+ }
+ module.Profile.prototype._schedule = function() {
+ var start_time = this.time_start instanceof Date ? this.time_start : new Date();
+ var schedule = [];
+ for (var i = 0; i < this.schedule.length; i++) {
+ var time = new Date(start_time.getTime() + this.schedule[i][0]*1000);
+ var temp = this.scalefunc(this.schedule[i][1]);
+ schedule.push({x:time, y:temp});
+ }
+ return schedule;
+ }
+ module.Profile.prototype.update = function() {
+ var start_time = this.time_start instanceof Date ? this.time_start : new Date();
+ var end_time = new Date(start_time.getTime()+this.length*1000);
+ var width = this.graph.x(end_time) - this.graph.x(start_time);
+ this.pane.attr("width", width)
+ .attr("transform","translate("+this.graph.x(start_time)+",0)");
+
+ this.graph.update("profile-line", this._schedule());
+ }
+ module.Profile.prototype.setScale = function(scale) {
+ this.scalefunc = scale;
+ this.update();
+ }
+
+ module.Profile.prototype.addNode = function() {
+
+ }
+ module.Profile.prototype.delNode = function() {
+
+ }
+ module.Profile.prototype.dragNode = function() {
+
+ }
+
return module;
}(tempgraph || {}));
diff --git a/kiln/templates/main.html b/kiln/templates/main.html
index 4b1fe18..b03996d 100644
--- a/kiln/templates/main.html
+++ b/kiln/templates/main.html
@@ -13,48 +13,7 @@
-
+