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.

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.
86ba7b9e · D1plo1d · ad4c7153 · 86ba7b9e · 86ba7b9e
Commit 86ba7b9e authored Apr 12, 2013 by D1plo1d
Show whitespace changes
Inline Side-by-side

Showing with 119 additions and 90 deletions

inspect.js server/static/js/inspect.js +115 -88

inspect.html server/templates/inspect.html +4 -2

No files found.
--- a/server/static/js/inspect.js
+++ b/server/static/js/inspect.js
-console.log("w00t!");
+(function() {
+  var $console;
-var $console;
+  var windowFocus;
-var connect = function() {
+  $(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 connect = function() {
    // Let us open a web socket
    var url = "ws://localhost:8888/socket?user=admin&password=admin";
    console.log(url);
@@ -10,25 +21,28 @@ var connect = function() {
    $(function () {
      $consoleWrapper = $(".console");
      $console = $(".console pre");
-    $console.html("Connecting...")
+      $console.html("Connecting...\n")
      onConnect(ws)
    });
-};
+  };
-var updateSensors = function() {
+  var updateSensorsUi = function() {
    $(".sensors .val").each(function() {
      $(this).html($(this).data("val")||"xx.x");
    })
-}.throttle(800);
+  }.throttle(800);
-var graph = null;
+  var graph = null;
-var graphData = [];
+  var graphData = [];
-var graphResolution = 40;
+  var graphResolution = 40;
-var updateGraph = function(current) {
+  var updateGraphData = function(current) {
    current.time = Date.now();
    if(graphData.length == graphResolution) graphData.shift();
    graphData.push(current);
+  }
+  var updateGraphUi = function(current) {
    if(graph == null)
    {
      graph = new Morris.Line({
@@ -55,12 +69,21 @@ var updateGraph = function(current) {
    {
      graph.setData(graphData);
    }
-}
+  }
-var onConnect = function(ws) {
+  var updateUi = function(msg) {
+    if(windowFocus == false) return;
+    updateSensorsUi();
+    updateGraphUi();
+    $console.append($console.data("toBeWritten"));
+    $console.data("toBeWritten", "");
+    $consoleWrapper.scrollTop($console.innerHeight());
+  }
+  var onConnect = function(ws) {
    ws.onopen = function()
    {
-    $console.append("\nConnected."); 
+      $console.append("Connected.\n");
      // Web Socket is connected, send data using send()
    };
@@ -78,25 +101,29 @@ var onConnect = function(ws) {
          values[name] = val;
          $("."+name+" .val").data("val", val.format(1))
        }
-      updateSensors();
+        if(windowFocus)
-      updateGraph(values);
+        {
+          var previous = $console.data("toBeWritten") || "";
+          $console.data("toBeWritten", previous + evt.data + "\n");
+        }
+        updateGraphData(values);
+        requestAnimationFrame(updateUi);
      }
-    $console.append("\n"+evt.data);
-    $consoleWrapper.scrollTop($console.innerHeight());
    };
    ws.onclose = function()
    { 
      // websocket is closed.
      $console.append("\nConnection closed."); 
    };
-};
+  };
-if ("WebSocket" in window)
+  if ("WebSocket" in window)
-{
+  {
    connect();
-}
+  }
-else
+  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
--- a/server/templates/inspect.html
+++ b/server/templates/inspect.html
@@ -9,8 +9,8 @@
 <body>
-  <div class="container">
+  <div class="container-fluid">
-    <div class="row">
+    <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>