📦 v1.1.1

__Added:__ - 📦 NPM package `npm i fps-m`; - 👨‍💻 Drop-in script versions; __Changed:__ - 👨‍💻 Minor optimizations; - 📋 Documentation update
veliovgroup · Apr 3, 2020 · 7f7bb16 · 7f7bb16
1 parent 288cfd9
commit 7f7bb16
Show file tree

Hide file tree

Showing 10 changed files with 338 additions and 25 deletions.
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,21 @@
+*.md
+.DS_Store
+.eslintcache
+.eslintrc
+.github
+.meteor
+.npm
+.versions
+cover.jpg
+cover.png
+node_modules
+npm-debug.log*
+package.js
+test/
+test/*
+
+fps-meter.js
+fps-meter.html
+fps-meter-drop-in.js
+fps-meter-drop-in.min.js
+
diff --git a/.versions b/.versions
@@ -26,7 +26,7 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
-ostrio:[email protected].0
+ostrio:[email protected].1
 [email protected]
 [email protected]
 [email protected]

diff --git a/README.md b/README.md
@@ -14,17 +14,44 @@ During our development process, we are using FPS-meter, which gives a signal whe
 
 This library works on mobile devices. It utilizes `performance.now` to measure time frame and `requestAnimationFrame` to measure rendered frames, both APIs are very efficient and have a minor impact (*for correct FPS measurement*).
 
+## Demo:
+
+- Demo can be found on [this website](https://cssbuilder.veliovgroup.com) (*in the left bottom corner*).
+
 ## Drop-in version
 
-Installation is not required, copy-paste script into browser' console, [see this Gist](https://gist.github.com/dr-dimitru/dcf0456c9c3d691e373a1adec8d60e16).
+Installation is not required, copy-paste script into browser' console:
+
+- Drop-in: [minified version](https://github.com/VeliovGroup/fps-meter/blob/master/fps-meter-drop-in.min.js);
+- Drop-in: [developer version](https://github.com/VeliovGroup/fps-meter/blob/master/fps-meter-drop-in.js);
+- Link [to minified file](https://raw.githubusercontent.com/VeliovGroup/fps-meter/master/fps-meter-drop-in.min.js);
+- HTML Script: `<script type="text/javascript" src="https://raw.githubusercontent.com/VeliovGroup/fps-meter/master/fps-meter-drop-in.min.js"></script>`
 
 ## Installation
 
+### NPM install
+
+```shell
+npm i --save fps-m
+```
+
+### Meteor add
+
 ```shell
 meteor add ostrio:fps-meter
 ```
 
-### ES6 Import
+### NPM require
+
+```js
+// require
+const FPSMeter = require('fps-m');
+
+// ES6 import:
+import FPSMeter from 'fps-m';
+```
+
+### Meteor: ES6 Import
 
 ```js
 import { FPSMeter } from 'meteor/ostrio:fps-meter';

diff --git a/fps-meter-drop-in.js b/fps-meter-drop-in.js
@@ -0,0 +1,109 @@
+// Start with:
+// (new FPSMeter({ui: true})).start();
+
+if (!window.requestAnimationFrame) {
+  window.requestAnimationFrame = (() => {
+    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
+      window.setTimeout(callback, 1000 / 60);
+    };
+  })();
+}
+
+const getTime = () => {
+  return (window.performance && window.performance.now) ? window.performance.now() : +new Date();
+};
+
+class FPSMeter {
+  constructor(opts) {
+    this.ui = opts.ui || false;
+    this.fps = 0;
+    this.isRunning = false;
+    this.defaultStyles = 'z-index:999;position:fixed;bottom:0;left:0;padding:10px;font-weight:600;font-style:normal;font-size:12px;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace,sans-serif';
+  }
+
+  measure() {
+    const time = getTime();
+    window.requestAnimationFrame(() => {
+      const _fps = Math.round((1 / (getTime() - time)) * 1000);
+
+      this.fps = _fps;
+
+      if (this.ui && this.element) {
+        let i = 4 - `${_fps}`.length;
+        let pad = '';
+
+        while (i > 0) {
+          pad += '&nbsp;';
+          i--;
+        }
+
+        this.element.innerHTML = `${_fps}${pad}fps`;
+
+        switch (false) {
+        case !(_fps < 7):
+          this.element.style.color = '#FFF';
+          this.element.style.backgroundColor = '#FF4500';
+          break;
+        case !(_fps < 25):
+          this.element.style.color = '#FF4500';
+          this.element.style.backgroundColor = '#000';
+          break;
+        case !(_fps < 40):
+          this.element.style.color = 'orange';
+          this.element.style.backgroundColor = '#000';
+          break;
+        case !(_fps > 70):
+          this.element.style.color = '#0f0';
+          this.element.style.backgroundColor = '#000';
+          break;
+        default:
+          this.element.style.color = '#018801';
+          this.element.style.backgroundColor = '#000';
+          break;
+        }
+      }
+
+      if (this.isRunning) {
+        this.measure();
+      }
+    });
+  }
+
+  start() {
+    if (!this.isRunning) {
+      this.isRunning = true;
+
+      if (this.ui === true) {
+        this.element = document.createElement('div');
+        this.element.style = this.defaultStyles;
+        document.body.appendChild(this.element);
+      }
+
+      this.measure();
+    }
+  }
+
+  pause() {
+    this.isRunning = false;
+  }
+
+  resume() {
+    if (!this.isRunning) {
+      this.isRunning = true;
+      this.measure();
+    }
+  }
+
+  toggle() {
+    this.isRunning ? this.pause() : this.resume();
+  }
+
+  stop() {
+    if (this.isRunning) {
+      this.isRunning = false;
+      if (this.ui === true && this.element) {
+        this.element.remove();
+      }
+    }
+  }
+}
diff --git a/fps-meter-drop-in.min.js b/fps-meter-drop-in.min.js
diff --git a/fps-meter.js b/fps-meter.js
@@ -16,16 +16,8 @@ const getTime = () => {
 
 class FPSMeter {
   constructor(opts) {
-    this.ui = opts.ui;
-    this.reactive = opts.reactive;
-
-    if (!this.ui) {
-      this.ui = false;
-    }
-
-    if (!this.reactive) {
-      this.reactive = false;
-    }
+    this.ui = opts.ui || false;
+    this.reactive = opts.reactive || false;
 
     if (this.reactive === true) {
       this.fps = new ReactiveVar(0);
@@ -85,33 +77,39 @@ class FPSMeter {
   }
 
   start() {
-    this.isRunning = true;
+    if (!this.isRunning) {
+      this.isRunning = true;
 
-    if (this.ui === true && Blaze) {
-      this.template = Blaze.render(Template.FPSMeter, document.body);
-      this.element = this.template.templateInstance().find('#__FPSMeter');
-    }
+      if (this.ui === true && Blaze) {
+        this.template = Blaze.render(Template.FPSMeter, document.body);
+        this.element = this.template.templateInstance().find('#__FPSMeter');
+      }
 
-    this.measure();
+      this.measure();
+    }
   }
 
   pause() {
     this.isRunning = false;
   }
 
   resume() {
-    this.isRunning = true;
-    this.measure();
+    if (!this.isRunning) {
+      this.isRunning = true;
+      this.measure();
+    }
   }
 
   toggle() {
     this.isRunning ? this.pause() : this.resume();
   }
 
   stop() {
-    this.isRunning = false;
-    if (this.ui === true && Blaze && this.template) {
-      Blaze.remove(this.template);
+    if (this.isRunning) {
+      this.isRunning = false;
+      if (this.ui === true && Blaze && this.template) {
+        Blaze.remove(this.template);
+      }
     }
   }
 }

diff --git a/fps-npm.js b/fps-npm.js
@@ -0,0 +1,106 @@
+if (!window.requestAnimationFrame) {
+  window.requestAnimationFrame = (() => {
+    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
+      window.setTimeout(callback, 1000 / 60);
+    };
+  })();
+}
+
+const getTime = () => {
+  return (window.performance && window.performance.now) ? window.performance.now() : +new Date();
+};
+
+module.exports = class FPSMeter {
+  constructor(opts) {
+    this.ui = opts.ui || false;
+    this.fps = 0;
+    this.isRunning = false;
+    this.defaultStyles = 'z-index:999;position:fixed;bottom:0;left:0;padding:10px;font-weight:600;font-style:normal;font-size:12px;font-family:Consolas,Menlo,Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace,sans-serif';
+  }
+
+  measure() {
+    const time = getTime();
+    window.requestAnimationFrame(() => {
+      const _fps = Math.round((1 / (getTime() - time)) * 1000);
+
+      this.fps = _fps;
+
+      if (this.ui && this.element) {
+        let i = 4 - `${_fps}`.length;
+        let pad = '';
+
+        while (i > 0) {
+          pad += '&nbsp;';
+          i--;
+        }
+
+        this.element.innerHTML = `${_fps}${pad}fps`;
+
+        switch (false) {
+        case !(_fps < 7):
+          this.element.style.color = '#FFF';
+          this.element.style.backgroundColor = '#FF4500';
+          break;
+        case !(_fps < 25):
+          this.element.style.color = '#FF4500';
+          this.element.style.backgroundColor = '#000';
+          break;
+        case !(_fps < 40):
+          this.element.style.color = 'orange';
+          this.element.style.backgroundColor = '#000';
+          break;
+        case !(_fps > 70):
+          this.element.style.color = '#0f0';
+          this.element.style.backgroundColor = '#000';
+          break;
+        default:
+          this.element.style.color = '#018801';
+          this.element.style.backgroundColor = '#000';
+          break;
+        }
+      }
+
+      if (this.isRunning) {
+        this.measure();
+      }
+    });
+  }
+
+  start() {
+    if (!this.isRunning) {
+      this.isRunning = true;
+
+      if (this.ui === true) {
+        this.element = document.createElement('div');
+        this.element.style = this.defaultStyles;
+        document.body.appendChild(this.element);
+      }
+
+      this.measure();
+    }
+  }
+
+  pause() {
+    this.isRunning = false;
+  }
+
+  resume() {
+    if (!this.isRunning) {
+      this.isRunning = true;
+      this.measure();
+    }
+  }
+
+  toggle() {
+    this.isRunning ? this.pause() : this.resume();
+  }
+
+  stop() {
+    if (this.isRunning) {
+      this.isRunning = false;
+      if (this.ui === true && this.element) {
+        this.element.remove();
+      }
+    }
+  }
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.js b/package.js
@@ -1,6 +1,6 @@
 Package.describe({
   name: 'ostrio:fps-meter',
-  version: '1.1.0',
+  version: '1.1.1',
   summary: 'Efficient and accurate FPS meter, with minimalistic UI',
   git: 'https://github.com/VeliovGroup/fps-meter',
   documentation: 'README.md'