From 3b49ad4ebbd4392cc4b28f60f0ffb933d025ed1f Mon Sep 17 00:00:00 2001 From: Claudius Coenen Date: Thu, 12 Mar 2015 13:38:30 +0100 Subject: [PATCH 1/2] arbitrary width and height of stats via options object --- src/Stats.js | 35 +++++++++++++++++++---------------- 1 file changed, 19 insertions(+), 16 deletions(-) diff --git a/src/Stats.js b/src/Stats.js index 90b2a27..4f3d19f 100644 --- a/src/Stats.js +++ b/src/Stats.js @@ -2,7 +2,12 @@ * @author mrdoob / http://mrdoob.com/ */ -var Stats = function () { +var Stats = function (options) { + + options = options || {}; + + var barHeight = options.barHeight || 30; + var bars = options.bars || 74; var startTime = Date.now(), prevTime = startTime; var ms = 0, msMin = Infinity, msMax = 0; @@ -11,53 +16,51 @@ var Stats = function () { var container = document.createElement( 'div' ); container.id = 'stats'; - container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ) }, false ); - container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer'; + container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ); }, false ); + container.style.cssText = 'width:' + (bars + 6) + 'px;opacity:0.9;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px;text-align:left'; var fpsDiv = document.createElement( 'div' ); fpsDiv.id = 'fps'; - fpsDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#002'; + fpsDiv.style.cssText = 'padding:0 0 3px 3px;background-color:#002;color:#0ff'; container.appendChild( fpsDiv ); var fpsText = document.createElement( 'div' ); fpsText.id = 'fpsText'; - fpsText.style.cssText = 'color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px'; fpsText.innerHTML = 'FPS'; fpsDiv.appendChild( fpsText ); var fpsGraph = document.createElement( 'div' ); fpsGraph.id = 'fpsGraph'; - fpsGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0ff'; + fpsGraph.style.cssText = 'position:relative;width:' + bars + 'px;height:' + barHeight + 'px;background-color:#0ff'; fpsDiv.appendChild( fpsGraph ); - while ( fpsGraph.children.length < 74 ) { + while ( fpsGraph.children.length < bars ) { var bar = document.createElement( 'span' ); - bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#113'; + bar.style.cssText = 'width:1px;height:' + barHeight + 'px;float:left;background-color:#113'; fpsGraph.appendChild( bar ); } var msDiv = document.createElement( 'div' ); msDiv.id = 'ms'; - msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;display:none'; + msDiv.style.cssText = 'padding:0 0 3px 3px;background-color:#020;display:none;color:#0f0;'; container.appendChild( msDiv ); var msText = document.createElement( 'div' ); msText.id = 'msText'; - msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px'; msText.innerHTML = 'MS'; msDiv.appendChild( msText ); var msGraph = document.createElement( 'div' ); msGraph.id = 'msGraph'; - msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0'; + msGraph.style.cssText = 'position:relative;width:' + bars + 'px;height:' + barHeight + 'px;background-color:#0f0'; msDiv.appendChild( msGraph ); - while ( msGraph.children.length < 74 ) { + while ( msGraph.children.length < bars ) { var bar = document.createElement( 'span' ); - bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131'; + bar.style.cssText = 'width:1px;height: ' + barHeight + 'px;float:left;background-color:#131'; msGraph.appendChild( bar ); } @@ -110,7 +113,7 @@ var Stats = function () { msMax = Math.max( msMax, ms ); msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')'; - updateGraph( msGraph, Math.min( 30, 30 - ( ms / 200 ) * 30 ) ); + updateGraph( msGraph, Math.min( barHeight, barHeight - ( ms / 200 ) * barHeight ) ); frames ++; @@ -121,7 +124,7 @@ var Stats = function () { fpsMax = Math.max( fpsMax, fps ); fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')'; - updateGraph( fpsGraph, Math.min( 30, 30 - ( fps / 100 ) * 30 ) ); + updateGraph( fpsGraph, Math.min( barHeight, barHeight - ( fps / 100 ) * barHeight ) ); prevTime = time; frames = 0; @@ -138,7 +141,7 @@ var Stats = function () { } - } + }; }; From 2152f4e632fb223367340fb3ce45ff192d7e03c0 Mon Sep 17 00:00:00 2001 From: Claudius Coenen Date: Thu, 12 Mar 2015 13:55:58 +0100 Subject: [PATCH 2/2] using precision timer, and limiting the output to precision .1 --- src/Stats.js | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/src/Stats.js b/src/Stats.js index 4f3d19f..5f5ada2 100644 --- a/src/Stats.js +++ b/src/Stats.js @@ -3,13 +3,16 @@ */ var Stats = function (options) { + // Use high resolution timing API, if available + window.performance = window.performance || {}; + performance.now = performance.now || function() { return new Date().getTime(); }; options = options || {}; var barHeight = options.barHeight || 30; var bars = options.bars || 74; - var startTime = Date.now(), prevTime = startTime; + var startTime = performance.now(), prevTime = startTime; var ms = 0, msMin = Infinity, msMax = 0; var fps = 0, fpsMin = Infinity, fpsMax = 0; var frames = 0, mode = 0; @@ -17,13 +20,18 @@ var Stats = function (options) { var container = document.createElement( 'div' ); container.id = 'stats'; container.addEventListener( 'mousedown', function ( event ) { event.preventDefault(); setMode( ++ mode % 2 ); }, false ); - container.style.cssText = 'width:' + (bars + 6) + 'px;opacity:0.9;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px;text-align:left'; + container.style.cssText = 'width:' + (bars + 6) + 'px;opacity:0.9;cursor:pointer;font-family:Consolas,Arial,monospace;font-size:9px;font-weight:bold;line-height:15px;text-align:left'; var fpsDiv = document.createElement( 'div' ); fpsDiv.id = 'fps'; fpsDiv.style.cssText = 'padding:0 0 3px 3px;background-color:#002;color:#0ff'; container.appendChild( fpsDiv ); + var fpsMinMax = document.createElement( 'div' ); + fpsMinMax.id = 'fpsTextMinMax'; + fpsMinMax.style.cssText = 'text-align:right;height:0;padding-right:3px'; + fpsDiv.appendChild( fpsMinMax ); + var fpsText = document.createElement( 'div' ); fpsText.id = 'fpsText'; fpsText.innerHTML = 'FPS'; @@ -47,6 +55,11 @@ var Stats = function (options) { msDiv.style.cssText = 'padding:0 0 3px 3px;background-color:#020;display:none;color:#0f0;'; container.appendChild( msDiv ); + var msMinMax = document.createElement( 'div' ); + msMinMax.id = 'msTextMinMax'; + msMinMax.style.cssText = 'text-align:right;height:0;padding-right:3px'; + msDiv.appendChild( msMinMax ); + var msText = document.createElement( 'div' ); msText.id = 'msText'; msText.innerHTML = 'MS'; @@ -100,30 +113,32 @@ var Stats = function (options) { begin: function () { - startTime = Date.now(); + startTime = performance.now(); }, end: function () { - var time = Date.now(); + var time = performance.now(); ms = time - startTime; msMin = Math.min( msMin, ms ); msMax = Math.max( msMax, ms ); - msText.textContent = ms + ' MS (' + msMin + '-' + msMax + ')'; + msText.textContent = ms.toFixed(1) + ' MS'; + msMinMax.textContent = '(' + msMin.toFixed(1) + '-' + msMax.toFixed(1) + ')'; updateGraph( msGraph, Math.min( barHeight, barHeight - ( ms / 200 ) * barHeight ) ); frames ++; if ( time > prevTime + 1000 ) { - fps = Math.round( ( frames * 1000 ) / ( time - prevTime ) ); + fps = (( frames * 1000 ) / ( time - prevTime )).toFixed(1); fpsMin = Math.min( fpsMin, fps ); fpsMax = Math.max( fpsMax, fps ); - fpsText.textContent = fps + ' FPS (' + fpsMin + '-' + fpsMax + ')'; + fpsText.textContent = fps + ' FPS'; + fpsMinMax.textContent = '(' + fpsMin + '-' + fpsMax + ')'; updateGraph( fpsGraph, Math.min( barHeight, barHeight - ( fps / 100 ) * barHeight ) ); prevTime = time;