Skip to content

Commit

Permalink
- r4
Browse files Browse the repository at this point in the history
  • Loading branch information
@mrdoob
mrdoob committed Jun 11, 2010
1 parent 87ac820 commit cbd2cab
Show file tree
Hide file tree
Showing 3 changed files with 177 additions and 74 deletions.
21 changes: 16 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,27 @@ stats.js

[![Flattr this](http://api.flattr.com/button/button-compact-static-100x17.png)](http://flattr.com/thing/1993/stats-js)

![stats_js.png](http://github.com/mrdoob/stats.js/raw/master/assets/stats_js.png)

This class provides a simple info box that will help you monitor your code performance.

* **FPS** Frames per second, how many frames were rendered in 1 second. The higher the number, the better.
* **FPS** Frames per second, how many frames were rendered in 1 second. The higher the number the better.
* **MS** Milliseconds needed to render a frame. The lower the number the better.

### Screenshots ###

![stats_js.png](http://github.com/mrdoob/stats.js/raw/master/assets/stats_js.png)

### How to use ###
### Usage ###

var stats = new Stats();
parentElement.appendChild(stats.domElement);

setInterval(function () {

stats.update();

}, 1000/60);

Aligning the panel on the top-left corner can be done like this:
Aligning the panel to the top-left corner:

var stats = new Stats();
stats.domElement.style.position = 'absolute';
Expand All @@ -30,11 +34,18 @@ Aligning the panel on the top-left corner can be done like this:
parentElement.appendChild(stats.domElement);

setInterval(function () {

stats.update();

}, 1000/60);

### Change Log ###

2010 06 11 - **r4** (2.235 kb)

* Added MS view (click to swap views)


2010 05 12 - **r3** (1.241 kb)

* Switched to module pattern code style.
Expand Down
4 changes: 2 additions & 2 deletions build/stats.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

226 changes: 159 additions & 67 deletions src/stats.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
* stats.js r3
* stats.js r4
* http://github.com/mrdoob/stats.js
*
* Released under MIT license:
Expand All @@ -10,92 +10,184 @@
* var stats = new Stats();
* parentElement.appendChild(stats.domElement);
*
* setInterval(loop, 1000/60);
* setInterval(function () {
*
* function loop() {
* stats.update();
* }
* stats.update();
*
* }, 1000/60);
*
*/

var Stats = function () {

var _frames, _framesMin, _framesMax, _time, _timePrev,
_container, _text, _canvas, _context, _imageData;

_frames = 0;
_framesMin = 1000;
_framesMax = 0;

_time = new Date().getTime();
_timePrev = _time;

_container = document.createElement('div');
var _container, _mode = 'fps',
_frames = 0, _time = new Date().getTime(), _timeLastFrame = _time, _timeLastSecond = _time,
_fps = 0, _fpsMin = 1000, _fpsMax = 0, _fpsText, _fpsCanvas, _fpsContext, _fpsImageData,
_ms = 0, _msMin = 1000, _msMax = 0, _msText, _msCanvas, _msContext, _msImageData;

_container = document.createElement( 'div' );
_container.style.fontFamily = 'Helvetica, Arial, sans-serif';
_container.style.fontSize = '9px';
_container.style.backgroundColor = '#000020';
_container.style.opacity = '0.9';
_container.style.width = '80px';
_container.style.paddingTop = '2px';

_text = document.createElement('div');
_text.style.color = '#00ffff';
_text.style.marginLeft = '3px';
_text.style.marginBottom = '3px';
_text.innerHTML = '<strong>FPS</strong>';
_container.appendChild(_text);

_canvas = document.createElement('canvas');
_canvas.width = 74;
_canvas.height = 30;
_canvas.style.display = 'block';
_canvas.style.marginLeft = '3px';
_canvas.style.marginBottom = '3px';
_container.appendChild(_canvas);

_context = _canvas.getContext('2d');
_context.fillStyle = '#101030';
_context.fillRect(0, 0, _canvas.width, _canvas.height);

_imageData = _context.getImageData(0, 0, _canvas.width, _canvas.height);

_container.style.cursor = 'pointer';
_container.addEventListener( 'click', swapMode, false );

_fpsText = document.createElement( 'div' );
_fpsText.innerHTML = '<strong>FPS</strong>';
_fpsText.style.color = '#00ffff';
_fpsText.style.marginLeft = '3px';
_fpsText.style.marginBottom = '3px';
_container.appendChild(_fpsText);

_fpsCanvas = document.createElement( 'canvas' );
_fpsCanvas.width = 74;
_fpsCanvas.height = 30;
_fpsCanvas.style.display = 'block';
_fpsCanvas.style.marginLeft = '3px';
_fpsCanvas.style.marginBottom = '3px';
_container.appendChild(_fpsCanvas);

_fpsContext = _fpsCanvas.getContext( '2d' );
_fpsContext.fillStyle = '#101030';
_fpsContext.fillRect(0, 0, _fpsCanvas.width, _fpsCanvas.height);

_fpsImageData = _fpsContext.getImageData( 0, 0, _fpsCanvas.width, _fpsCanvas.height );

_msText = document.createElement( 'div' );
_msText.innerHTML = '<strong>MS</strong>';
_msText.style.color = '#00ffff';
_msText.style.marginLeft = '3px';
_msText.style.marginBottom = '3px';
_msText.style.display = 'none';
_container.appendChild(_msText);

_msCanvas = document.createElement( 'canvas' );
_msCanvas.width = 74;
_msCanvas.height = 30;
_msCanvas.style.display = 'block';
_msCanvas.style.marginLeft = '3px';
_msCanvas.style.marginBottom = '3px';
_msCanvas.style.display = 'none';
_container.appendChild(_msCanvas);

_msContext = _msCanvas.getContext( '2d' );
_msContext.fillStyle = '#101030';
_msContext.fillRect(0, 0, _msCanvas.width, _msCanvas.height);

_msImageData = _msContext.getImageData( 0, 0, _msCanvas.width, _msCanvas.height );

function updateGraph( data, value ) {

var x, y, index;

for ( y = 0; y < 30; y++ ) {

for ( x = 0; x < 73; x++ ) {

index = (x + y * 74) * 4;

data[ index ] = data[ index + 4 ];
data[ index + 1 ] = data[ index + 5 ];
data[ index + 2 ] = data[ index + 6 ];

}

}

for ( y = 0; y < 30; y++ ) {

index = (73 + y * 74) * 4;

if ( y < value ) {

data[ index ] = 16;
data[ index + 1 ] = 16;
data[ index + 2 ] = 48;

} else {

data[ index ] = 0;
data[ index + 1 ] = 255;
data[ index + 2 ] = 255;

}

}

}

function swapMode() {

switch( _mode ) {

case 'fps':

_mode = 'ms';

_fpsText.style.display = 'none';
_fpsCanvas.style.display = 'none';
_msText.style.display = 'inline';
_msCanvas.style.display = 'inline';

break;

case 'ms':

_mode = 'fps';

_fpsText.style.display = 'inline';
_fpsCanvas.style.display = 'inline';
_msText.style.display = 'none';
_msCanvas.style.display = 'none';

break;

}

}

return {

domElement: _container,

update: function () {

var fps, index;
_frames ++;

_time = new Date().getTime();
_frames += 1;

if (_time >= _timePrev + 1000) {

fps = Math.round((_frames * 1000) / (_time - _timePrev));

_framesMin = Math.min(_framesMin, fps);
_framesMax = Math.max(_framesMax, fps);

_text.innerHTML = '<strong>' + fps + ' FPS</strong> (' + _framesMin + '-' + _framesMax + ')';

_imageData = _context.getImageData(1, 0, _canvas.width - 1, 30);
_context.putImageData(_imageData, 0, 0);

_context.fillStyle = '#101030';
_context.fillRect(_canvas.width - 1, 0, 1, 30);

index = Math.floor(30 - Math.min(30, (fps / 60) * 30));

_context.fillStyle = '#80ffff';
_context.fillRect(_canvas.width - 1, index, 1, 1);

_context.fillStyle = '#00ffff';
_context.fillRect(_canvas.width - 1, index + 1, 1, 30 - index);

_timePrev = _time;

_ms = _time - _timeLastFrame;
_msMin = Math.min(_msMin, _ms);
_msMax = Math.max(_msMax, _ms);

updateGraph( _msImageData.data, Math.min( 30, 30 - ( _ms / 200 ) * 30 ) );

_msText.innerHTML = '<strong>' + _ms + ' MS</strong> (' + _msMin + '-' + _msMax + ')';
_msContext.putImageData( _msImageData, 0, 0 );

_timeLastFrame = _time;

if ( _time > _timeLastSecond + 1000 ) {

_fps = Math.round((_frames * 1000) / (_time - _timeLastSecond));
_fpsMin = Math.min(_fpsMin, _fps);
_fpsMax = Math.max(_fpsMax, _fps);

updateGraph( _fpsImageData.data, Math.min( 30, 30 - ( _fps / 100 ) * 30 ) );

_fpsText.innerHTML = '<strong>' + _fps + ' FPS</strong> (' + _fpsMin + '-' + _fpsMax + ')';
_fpsContext.putImageData( _fpsImageData, 0, 0 );

_timeLastSecond = _time;
_frames = 0;

}

}

};

};

0 comments on commit cbd2cab

Please sign in to comment.