Skip to content

Commit cbd2cab

Browse files
mrdoobmrdoob
committed
- r4
1 parent 87ac820 commit cbd2cab

File tree

3 files changed

+177
-74
lines changed

3 files changed

+177
-74
lines changed

‎README.md

+16-5
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,27 @@ stats.js
55

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

8-
![stats_js.png](http://github.com/mrdoob/stats.js/raw/master/assets/stats_js.png)
9-
108
This class provides a simple info box that will help you monitor your code performance.
119

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

13+
### Screenshots ###
14+
15+
![stats_js.png](http://github.com/mrdoob/stats.js/raw/master/assets/stats_js.png)
1416

15-
### How to use ###
17+
### Usage ###
1618

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

2022
setInterval(function () {
23+
2124
stats.update();
25+
2226
}, 1000/60);
2327

24-
Aligning the panel on the top-left corner can be done like this:
28+
Aligning the panel to the top-left corner:
2529

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

3236
setInterval(function () {
37+
3338
stats.update();
39+
3440
}, 1000/60);
3541

3642
### Change Log ###
3743

44+
2010 06 11 - **r4** (2.235 kb)
45+
46+
* Added MS view (click to swap views)
47+
48+
3849
2010 05 12 - **r3** (1.241 kb)
3950

4051
* Switched to module pattern code style.

‎build/stats.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/stats.js

+159-67
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
* stats.js r3
2+
* stats.js r4
33
* http://github.com/mrdoob/stats.js
44
*
55
* Released under MIT license:
@@ -10,92 +10,184 @@
1010
* var stats = new Stats();
1111
* parentElement.appendChild(stats.domElement);
1212
*
13-
* setInterval(loop, 1000/60);
13+
* setInterval(function () {
1414
*
15-
* function loop() {
16-
* stats.update();
17-
* }
15+
* stats.update();
16+
*
17+
* }, 1000/60);
1818
*
1919
*/
2020

2121
var Stats = function () {
2222

23-
var _frames, _framesMin, _framesMax, _time, _timePrev,
24-
_container, _text, _canvas, _context, _imageData;
25-
26-
_frames = 0;
27-
_framesMin = 1000;
28-
_framesMax = 0;
29-
30-
_time = new Date().getTime();
31-
_timePrev = _time;
32-
33-
_container = document.createElement('div');
23+
var _container, _mode = 'fps',
24+
_frames = 0, _time = new Date().getTime(), _timeLastFrame = _time, _timeLastSecond = _time,
25+
_fps = 0, _fpsMin = 1000, _fpsMax = 0, _fpsText, _fpsCanvas, _fpsContext, _fpsImageData,
26+
_ms = 0, _msMin = 1000, _msMax = 0, _msText, _msCanvas, _msContext, _msImageData;
27+
28+
_container = document.createElement( 'div' );
3429
_container.style.fontFamily = 'Helvetica, Arial, sans-serif';
3530
_container.style.fontSize = '9px';
3631
_container.style.backgroundColor = '#000020';
3732
_container.style.opacity = '0.9';
3833
_container.style.width = '80px';
3934
_container.style.paddingTop = '2px';
40-
41-
_text = document.createElement('div');
42-
_text.style.color = '#00ffff';
43-
_text.style.marginLeft = '3px';
44-
_text.style.marginBottom = '3px';
45-
_text.innerHTML = '<strong>FPS</strong>';
46-
_container.appendChild(_text);
47-
48-
_canvas = document.createElement('canvas');
49-
_canvas.width = 74;
50-
_canvas.height = 30;
51-
_canvas.style.display = 'block';
52-
_canvas.style.marginLeft = '3px';
53-
_canvas.style.marginBottom = '3px';
54-
_container.appendChild(_canvas);
55-
56-
_context = _canvas.getContext('2d');
57-
_context.fillStyle = '#101030';
58-
_context.fillRect(0, 0, _canvas.width, _canvas.height);
59-
60-
_imageData = _context.getImageData(0, 0, _canvas.width, _canvas.height);
61-
35+
_container.style.cursor = 'pointer';
36+
_container.addEventListener( 'click', swapMode, false );
37+
38+
_fpsText = document.createElement( 'div' );
39+
_fpsText.innerHTML = '<strong>FPS</strong>';
40+
_fpsText.style.color = '#00ffff';
41+
_fpsText.style.marginLeft = '3px';
42+
_fpsText.style.marginBottom = '3px';
43+
_container.appendChild(_fpsText);
44+
45+
_fpsCanvas = document.createElement( 'canvas' );
46+
_fpsCanvas.width = 74;
47+
_fpsCanvas.height = 30;
48+
_fpsCanvas.style.display = 'block';
49+
_fpsCanvas.style.marginLeft = '3px';
50+
_fpsCanvas.style.marginBottom = '3px';
51+
_container.appendChild(_fpsCanvas);
52+
53+
_fpsContext = _fpsCanvas.getContext( '2d' );
54+
_fpsContext.fillStyle = '#101030';
55+
_fpsContext.fillRect(0, 0, _fpsCanvas.width, _fpsCanvas.height);
56+
57+
_fpsImageData = _fpsContext.getImageData( 0, 0, _fpsCanvas.width, _fpsCanvas.height );
58+
59+
_msText = document.createElement( 'div' );
60+
_msText.innerHTML = '<strong>MS</strong>';
61+
_msText.style.color = '#00ffff';
62+
_msText.style.marginLeft = '3px';
63+
_msText.style.marginBottom = '3px';
64+
_msText.style.display = 'none';
65+
_container.appendChild(_msText);
66+
67+
_msCanvas = document.createElement( 'canvas' );
68+
_msCanvas.width = 74;
69+
_msCanvas.height = 30;
70+
_msCanvas.style.display = 'block';
71+
_msCanvas.style.marginLeft = '3px';
72+
_msCanvas.style.marginBottom = '3px';
73+
_msCanvas.style.display = 'none';
74+
_container.appendChild(_msCanvas);
75+
76+
_msContext = _msCanvas.getContext( '2d' );
77+
_msContext.fillStyle = '#101030';
78+
_msContext.fillRect(0, 0, _msCanvas.width, _msCanvas.height);
79+
80+
_msImageData = _msContext.getImageData( 0, 0, _msCanvas.width, _msCanvas.height );
81+
82+
function updateGraph( data, value ) {
83+
84+
var x, y, index;
85+
86+
for ( y = 0; y < 30; y++ ) {
87+
88+
for ( x = 0; x < 73; x++ ) {
89+
90+
index = (x + y * 74) * 4;
91+
92+
data[ index ] = data[ index + 4 ];
93+
data[ index + 1 ] = data[ index + 5 ];
94+
data[ index + 2 ] = data[ index + 6 ];
95+
96+
}
97+
98+
}
99+
100+
for ( y = 0; y < 30; y++ ) {
101+
102+
index = (73 + y * 74) * 4;
103+
104+
if ( y < value ) {
105+
106+
data[ index ] = 16;
107+
data[ index + 1 ] = 16;
108+
data[ index + 2 ] = 48;
109+
110+
} else {
111+
112+
data[ index ] = 0;
113+
data[ index + 1 ] = 255;
114+
data[ index + 2 ] = 255;
115+
116+
}
117+
118+
}
119+
120+
}
121+
122+
function swapMode() {
123+
124+
switch( _mode ) {
125+
126+
case 'fps':
127+
128+
_mode = 'ms';
129+
130+
_fpsText.style.display = 'none';
131+
_fpsCanvas.style.display = 'none';
132+
_msText.style.display = 'inline';
133+
_msCanvas.style.display = 'inline';
134+
135+
break;
136+
137+
case 'ms':
138+
139+
_mode = 'fps';
140+
141+
_fpsText.style.display = 'inline';
142+
_fpsCanvas.style.display = 'inline';
143+
_msText.style.display = 'none';
144+
_msCanvas.style.display = 'none';
145+
146+
break;
147+
148+
}
149+
150+
}
151+
62152
return {
63-
153+
64154
domElement: _container,
65-
155+
66156
update: function () {
67157

68-
var fps, index;
158+
_frames ++;
69159

70160
_time = new Date().getTime();
71-
_frames += 1;
72-
73-
if (_time >= _timePrev + 1000) {
74-
75-
fps = Math.round((_frames * 1000) / (_time - _timePrev));
76-
77-
_framesMin = Math.min(_framesMin, fps);
78-
_framesMax = Math.max(_framesMax, fps);
79-
80-
_text.innerHTML = '<strong>' + fps + ' FPS</strong> (' + _framesMin + '-' + _framesMax + ')';
81-
82-
_imageData = _context.getImageData(1, 0, _canvas.width - 1, 30);
83-
_context.putImageData(_imageData, 0, 0);
84-
85-
_context.fillStyle = '#101030';
86-
_context.fillRect(_canvas.width - 1, 0, 1, 30);
87-
88-
index = Math.floor(30 - Math.min(30, (fps / 60) * 30));
89-
90-
_context.fillStyle = '#80ffff';
91-
_context.fillRect(_canvas.width - 1, index, 1, 1);
92-
93-
_context.fillStyle = '#00ffff';
94-
_context.fillRect(_canvas.width - 1, index + 1, 1, 30 - index);
95-
96-
_timePrev = _time;
161+
162+
_ms = _time - _timeLastFrame;
163+
_msMin = Math.min(_msMin, _ms);
164+
_msMax = Math.max(_msMax, _ms);
165+
166+
updateGraph( _msImageData.data, Math.min( 30, 30 - ( _ms / 200 ) * 30 ) );
167+
168+
_msText.innerHTML = '<strong>' + _ms + ' MS</strong> (' + _msMin + '-' + _msMax + ')';
169+
_msContext.putImageData( _msImageData, 0, 0 );
170+
171+
_timeLastFrame = _time;
172+
173+
if ( _time > _timeLastSecond + 1000 ) {
174+
175+
_fps = Math.round((_frames * 1000) / (_time - _timeLastSecond));
176+
_fpsMin = Math.min(_fpsMin, _fps);
177+
_fpsMax = Math.max(_fpsMax, _fps);
178+
179+
updateGraph( _fpsImageData.data, Math.min( 30, 30 - ( _fps / 100 ) * 30 ) );
180+
181+
_fpsText.innerHTML = '<strong>' + _fps + ' FPS</strong> (' + _fpsMin + '-' + _fpsMax + ')';
182+
_fpsContext.putImageData( _fpsImageData, 0, 0 );
183+
184+
_timeLastSecond = _time;
97185
_frames = 0;
186+
98187
}
188+
99189
}
190+
100191
};
192+
101193
};

0 commit comments

Comments
 (0)