Skip to content

P
Printrun
Commit 86ba7b9e authored by D1plo1d's avatar D1plo1d
Browse files
Options

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.
parent ad4c7153
Show whitespace changes
Inline Side-by-side
Showing with 119 additions and 90 deletions
server/static/js/inspect.js
View file @ 86ba7b9e
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 graphData = [];
var graphResolution = 40;
var graph = null;
var graphData = [];
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();
updateGraph(values);
if(windowFocus)
{
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
server/templates/inspect.html
View file @ 86ba7b9e
......@@ -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>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment