diff --git a/src/octoprint/server/__init__.py b/src/octoprint/server/__init__.py index 3892ff74..a09fce46 100644 --- a/src/octoprint/server/__init__.py +++ b/src/octoprint/server/__init__.py @@ -1065,6 +1065,7 @@ class Server(object): "js/lib/jquery/jquery.flot.js", "js/lib/jquery/jquery.flot.time.js", "js/lib/jquery/jquery.flot.crosshair.js", + "js/lib/jquery/jquery.flot.resize.js", "js/lib/jquery/jquery.iframe-transport.js", "js/lib/jquery/jquery.fileupload.js", "js/lib/jquery/jquery.slimscroll.min.js", diff --git a/src/octoprint/static/js/app/viewmodels/temperature.js b/src/octoprint/static/js/app/viewmodels/temperature.js index 503ca76c..1ece818c 100644 --- a/src/octoprint/static/js/app/viewmodels/temperature.js +++ b/src/octoprint/static/js/app/viewmodels/temperature.js @@ -99,46 +99,7 @@ $(function() { }); self.temperatures = []; - self.plotOptions = { - yaxis: { - min: 0, - max: 310, - ticks: 10 - }, - xaxis: { - mode: "time", - minTickSize: [2, "minute"], - tickFormatter: function(val, axis) { - if (val == undefined || val == 0) - return ""; // we don't want to display the minutes since the epoch if not connected yet ;) - // current time in milliseconds in UTC - var timestampUtc = Date.now(); - - // calculate difference in milliseconds - var diff = timestampUtc - val; - - // convert to minutes - var diffInMins = Math.round(diff / (60 * 1000)); - if (diffInMins == 0) - return gettext("just now"); - else - return "- " + diffInMins + " " + gettext("min"); - } - }, - legend: { - position: "sw", - noColumns: 2, - backgroundOpacity: 0 - }, - crosshair: { - mode: "x" - }, - grid: { - hoverable: true, - autoHighlight: false - } - }; self.plot = undefined; self.plotHoverPos = undefined; self.plotLegendTimeout = undefined; @@ -389,42 +350,48 @@ $(function() { self.updateLegend = function(replaceLegendLabel) { self.plotLegendTimeout = undefined; - var i; var pos = self.plotHoverPos; - var axes = self.plot.getAxes(); - var dataset = self.plot.getData(); + if (pos) { + // we got a hover position, let's see what we need to do with that - if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || - pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) { + var i; + var axes = self.plot.getAxes(); + var dataset = self.plot.getData(); - _.each(dataset, function(series, index) { - var value = series.data && series.data.length ? series.data[series.data.length - 1][1] : undefined; - replaceLegendLabel(index, series, value); - }); - } else { - _.each(dataset, function(series, index) { - for (i = 0; i < series.data.length; i++) { - if (series.data[i][0] > pos.x) { - break; + if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || + pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) { + // position outside of the graph, show latest temperature in legend + _.each(dataset, function(series, index) { + var value = series.data && series.data.length ? series.data[series.data.length - 1][1] : undefined; + replaceLegendLabel(index, series, value); + }); + } else { + // position inside the graph, determine temperature at point and display that in the legend + _.each(dataset, function(series, index) { + for (i = 0; i < series.data.length; i++) { + if (series.data[i][0] > pos.x) { + break; + } } - } - var y; - var p1 = series.data[i - 1]; - var p2 = series.data[i]; + var y; + var p1 = series.data[i - 1]; + var p2 = series.data[i]; - if (p1 == undefined) { - y = p2[1]; - } else if (p2 == undefined) { - y = p1[1]; - } else { - y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]); - } + if (p1 == undefined) { + y = p2[1]; + } else if (p2 == undefined) { + y = p1[1]; + } else { + y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]); + } - replaceLegendLabel(index, series, y, true); - }); + replaceLegendLabel(index, series, y, true); + }); + } } + // update the grid self.plot.setupGrid(); }; diff --git a/src/octoprint/static/js/lib/jquery/jquery.flot.resize.js b/src/octoprint/static/js/lib/jquery/jquery.flot.resize.js new file mode 100644 index 00000000..d27b58d0 --- /dev/null +++ b/src/octoprint/static/js/lib/jquery/jquery.flot.resize.js @@ -0,0 +1,59 @@ +/* Flot plugin for automatically redrawing plots as the placeholder resizes. + +Copyright (c) 2007-2014 IOLA and Ole Laursen. +Licensed under the MIT license. + +It works by listening for changes on the placeholder div (through the jQuery +resize event plugin) - if the size changes, it will redraw the plot. + +There are no options. If you need to disable the plugin for some plots, you +can just fix the size of their placeholders. + +*/ + +/* Inline dependency: + * jQuery resize event - v1.1 - 3/14/2010 + * http://benalman.com/projects/jquery-resize-plugin/ + * + * Copyright (c) 2010 "Cowboy" Ben Alman + * Dual licensed under the MIT and GPL licenses. + * http://benalman.com/about/license/ + */ +(function($,e,t){"$:nomunge";var i=[],n=$.resize=$.extend($.resize,{}),a,r=false,s="setTimeout",u="resize",m=u+"-special-event",o="pendingDelay",l="activeDelay",f="throttleWindow";n[o]=200;n[l]=20;n[f]=true;$.event.special[u]={setup:function(){if(!n[f]&&this[s]){return false}var e=$(this);i.push(this);e.data(m,{w:e.width(),h:e.height()});if(i.length===1){a=t;h()}},teardown:function(){if(!n[f]&&this[s]){return false}var e=$(this);for(var t=i.length-1;t>=0;t--){if(i[t]==this){i.splice(t,1);break}}e.removeData(m);if(!i.length){if(r){cancelAnimationFrame(a)}else{clearTimeout(a)}a=null}},add:function(e){if(!n[f]&&this[s]){return false}var i;function a(e,n,a){var r=$(this),s=r.data(m)||{};s.w=n!==t?n:r.width();s.h=a!==t?a:r.height();i.apply(this,arguments)}if($.isFunction(e)){i=e;return a}else{i=e.handler;e.handler=a}}};function h(t){if(r===true){r=t||1}for(var s=i.length-1;s>=0;s--){var l=$(i[s]);if(l[0]==e||l.is(":visible")){var f=l.width(),c=l.height(),d=l.data(m);if(d&&(f!==d.w||c!==d.h)){l.trigger(u,[d.w=f,d.h=c]);r=t||true}}else{d=l.data(m);d.w=0;d.h=0}}if(a!==null){if(r&&(t==null||t-r<1e3)){a=e.requestAnimationFrame(h)}else{a=setTimeout(h,n[o]);r=false}}}if(!e.requestAnimationFrame){e.requestAnimationFrame=function(){return e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(t,i){return e.setTimeout(function(){t((new Date).getTime())},n[l])}}()}if(!e.cancelAnimationFrame){e.cancelAnimationFrame=function(){return e.webkitCancelRequestAnimationFrame||e.mozCancelRequestAnimationFrame||e.oCancelRequestAnimationFrame||e.msCancelRequestAnimationFrame||clearTimeout}()}})(jQuery,this); + +(function ($) { + var options = { }; // no options + + function init(plot) { + function onResize() { + var placeholder = plot.getPlaceholder(); + + // somebody might have hidden us and we can't plot + // when we don't have the dimensions + if (placeholder.width() == 0 || placeholder.height() == 0) + return; + + plot.resize(); + plot.setupGrid(); + plot.draw(); + } + + function bindEvents(plot, eventHolder) { + plot.getPlaceholder().resize(onResize); + } + + function shutdown(plot, eventHolder) { + plot.getPlaceholder().unbind("resize", onResize); + } + + plot.hooks.bindEvents.push(bindEvents); + plot.hooks.shutdown.push(shutdown); + } + + $.plot.plugins.push({ + init: init, + options: options, + name: 'resize', + version: '1.0' + }); +})(jQuery);