Throttling the DOM writes of pronserve inspector and stopping dom writes...

Throttling the DOM writes of pronserve inspector and stopping dom writes entirely when the window looses focus.

server/static/js/inspect.js

-console.log("w00t!");
+(function() {
+  var $console;
 
-var $console;
+  var windowFocus;
 
-var connect = function() {
-  // Let us open a web socket
-  var url = "ws://localhost:8888/socket?user=admin&password=admin";
-  console.log(url);
-  var ws = new WebSocket(url);
-  $(function () {
-    $consoleWrapper = $(".console");
-    $console = $(".console pre");
-    $console.html("Connecting...")
-    onConnect(ws)
-  });
-};
+  $(window).focus(function() {
+      windowFocus = true;
+      if ($console) $console.append("Window refocused, restarting log.\n");
+      $(".focus-lost-overlay").addClass("out").removeClass("in");
+  }).blur(function() {
+      windowFocus = false;
+      if ($console) $console.append("Window's focus, lost stopping logging...\n");
+      $(".focus-lost-overlay").addClass("in").removeClass("out");
+  }.debounce());
 
-var updateSensors = function() {
-  $(".sensors .val").each(function() {
-    $(this).html($(this).data("val")||"xx.x");
-  })
-}.throttle(800);
+  var connect = function() {
+    // Let us open a web socket
+    var url = "ws://localhost:8888/socket?user=admin&password=admin";
+    console.log(url);
+    var ws = new WebSocket(url);
+    $(function () {
+      $consoleWrapper = $(".console");
+      $console = $(".console pre");
+      $console.html("Connecting...\n")
+      onConnect(ws)
+    });
+  };
 
-var graph = null;
-var graphData = [];
-var graphResolution = 40;
+  var updateSensorsUi = function() {
+    $(".sensors .val").each(function() {
+      $(this).html($(this).data("val")||"xx.x");
+    })
+  }.throttle(800);
 
-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"
-    });
+  var graph = null;
+  var graphData = [];
+  var graphResolution = 40;
+
+  var updateGraphData = function(current) {
+    current.time = Date.now();
+    if(graphData.length == graphResolution) graphData.shift();
+    graphData.push(current);
   }
-  else
-  {
-    graph.setData(graphData);
+
+  var updateGraphUi = function(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()
-  {
-    $console.append("\nConnected."); 
-    // Web Socket is connected, send data using send()
+  var updateUi = function(msg) {
+    if(windowFocus == false) return;
+    updateSensorsUi();
+    updateGraphUi();
+    $console.append($console.data("toBeWritten"));
+    $console.data("toBeWritten", "");
+    $consoleWrapper.scrollTop($console.innerHeight());
+  }
 
-  };
-  ws.onmessage = function (evt) 
-  {
-    msg = JSON.parse(evt.data)
-    if(msg.sensors != undefined)
+  var onConnect = function(ws) {
+    ws.onopen = function()
     {
-      var sensorNames = ["bed", "extruder"];
-      var values = {timestamp: msg.timestamp};
-      for (var i = 0; i < sensorNames.length; i++)
+      $console.append("Connected.\n");
+      // Web Socket is connected, send data using send()
+
+    };
+    ws.onmessage = function (evt) 
+    {
+      msg = JSON.parse(evt.data)
+      if(msg.sensors != undefined)
       {
-        var name = sensorNames[i];
-        var val = parseFloat(msg.sensors[name]);
-        values[name] = val;
-        $("."+name+" .val").data("val", val.format(1))
+        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]);
+          values[name] = val;
+          $("."+name+" .val").data("val", val.format(1))
+        }
+        if(windowFocus)
+        {
+          var previous = $console.data("toBeWritten") || "";
+          $console.data("toBeWritten", previous + evt.data + "\n");
+        }
+        updateGraphData(values);
+        requestAnimationFrame(updateUi);
       }
-      updateSensors();
-      updateGraph(values);
-    }
-    $console.append("\n"+evt.data);
-    $consoleWrapper.scrollTop($console.innerHeight());
+    };
+    ws.onclose = function()
+    { 
+      // websocket is closed.
+      $console.append("\nConnection closed."); 
+    };
   };
-  ws.onclose = function()
-  { 
-    // websocket is closed.
-    $console.append("\nConnection closed."); 
-  };
-};
 
-if ("WebSocket" in window)
-{
-  connect();
-}
-else
-{
-   // The browser doesn't support WebSocket
-   alert("Error: WebSocket NOT supported by your Browser!");
-}
+  if ("WebSocket" in window)
+  {
+    connect();
+  }
+  else
+  {
+     // The browser doesn't support WebSocket
+     alert("Error: WebSocket NOT supported by your Browser!");
+  }
\ No newline at end of file
+})();
\ No newline at end of file

server/templates/inspect.html

@@ -9,8 +9,8 @@
 
 <body>
 
-  <div class="container">
-    <div class="row">
+  <div class="container-fluid">
+    <div class="row-fluid">
       <div class="span12">
         <h1>
           Pronserve Inspector
@@ -38,6 +38,8 @@
   </div>
 
 
+  <div class="focus-lost-overlay modal-backdrop fade out"></div>
+
   <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>