Profile display now works

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;
+}

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));
             }

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);

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 || {}));

kiln/templates/main.html

@@ -13,48 +13,7 @@
     <!-- Optional theme -->
     <link rel="stylesheet" href="css/bootstrap-theme.min.css">
     
-    <style type="text/css">
+    <link rel="stylesheet" href="css/temp_monitor.css">
-      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;
-      }
-
-    </style>
 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->