kopia lustrzana https://github.com/jamesgao/kiln_controller
Profile display now works
James Gao
rodzic
6c4c189a46
commit
cbce1ddce8
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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 || {}));
|
||||
|
|
|
|||
|
|
@ -13,48 +13,7 @@
|
|||
<!-- Optional theme -->
|
||||
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
|
||||
|
||||
<style type="text/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>
|
||||
<link rel="stylesheet" href="css/temp_monitor.css">
|
||||
|
||||
<!-- 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:// -->
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue