fps-detector 1.0.0

package/README.md

@@ -0,0 +1,17 @@
+# fps-detector
+fps-detector
+
+# Install
+```sh
+npm i fps-detector
+```
+
+# Usage
+```js
+import FPSDetector from 'fps-detector';
+new FPSDetector('.fps-detector', {
+    width: 120,
+    height: 30
+});
+```
+see [preview/index.html](preview/index.html)

package/dist/fps-detector.js

@@ -0,0 +1,261 @@
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define("fps-detector", [], factory);
+	else if(typeof exports === 'object')
+		exports["fps-detector"] = factory();
+	else
+		root["fps-detector"] = factory();
+})(self, function() {
+return /******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	// The require scope
+/******/ 	var __webpack_require__ = {};
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+/*!**********************!*\
+  !*** ./src/index.js ***!
+  \**********************/
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "FPSDetector": () => (/* binding */ FPSDetector),
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+class FPSDetector {
+  constructor($container, option) {
+    if (typeof $container === 'string') {
+      $container = document.querySelector($container);
+    }
+
+    this.option = Object.assign({
+      width: 85,
+      height: 30,
+      colors: ['red', 'orange', 'green'],
+      bgColor: '#fff',
+      fgColor: '#ddd',
+      padding: 1
+    }, option);
+    const $canvas = document.createElement('canvas');
+    $canvas.style.display = 'block';
+    $canvas.setAttribute('width', this.option.width);
+    $canvas.setAttribute('height', this.option.height);
+    $container.appendChild($canvas);
+    $container.title = 'FPS Monitor';
+    this.numbers = {
+      '-': {
+        'd': 'm2.615 8.485-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431z'
+      },
+      '0': {
+        'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'
+      },
+      '1': {
+        'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zm.03 14.873-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'
+      },
+      '2': {
+        'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm-1.296-.136 1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'
+      },
+      '3': {
+        'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'
+      },
+      '4': {
+        'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm1.326.685-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'
+      },
+      '5': {
+        'd': 'm1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'
+      },
+      '6': {
+        'd': 'm1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'
+      },
+      '7': {
+        'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'
+      },
+      '8': {
+        'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'
+      },
+      '9': {
+        'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'
+      }
+    };
+    this.initNumbers($canvas);
+    this.ctx = $canvas.getContext('2d');
+    this.start();
+  }
+
+  render() {
+    const w = this.option.width;
+    const h = this.option.height;
+    const ctx = this.ctx;
+    const list = this.list;
+    const iw = 11;
+    const ih = 16;
+    const padding = this.option.padding;
+    const lx = padding;
+    const ly = padding;
+    const lw = w - (iw * 2 + padding * 3);
+    const lh = h - padding * 2;
+    let startIndex = padding;
+
+    if (list.length > lw) {
+      list.length = lw;
+    } else {
+      startIndex = padding + (lw - list.length);
+    } //console.log(list);
+
+
+    ctx.fillStyle = this.option.bgColor; //ctx.globalAlpha = 1;
+
+    ctx.fillRect(0, 0, w, h);
+    ctx.fillStyle = this.option.fgColor;
+    ctx.fillRect(lx, ly, lw, lh);
+    const ls = [].concat(list).reverse();
+    let lastItem;
+    let lastColor;
+    ls.forEach((item, i) => {
+      lastItem = item;
+      const color = this.getColor(item);
+      lastColor = color;
+      ctx.fillStyle = color;
+      const ch = Math.max(Math.floor(item / 60 * lh), 1);
+      ctx.fillRect(startIndex + i, lh + ly - ch, 1, ch);
+    });
+    const str = "".concat(lastItem).padStart(2, '0');
+    const x = Math.floor(lx + lw + padding);
+    const y = Math.ceil((h - ih) / 2);
+    str.split('').forEach((s, i) => {
+      const img = this.getImg(s, lastColor);
+
+      if (img) {
+        ctx.drawImage(img, x + i * iw, y);
+      }
+    });
+  }
+
+  getColor(v) {
+    const colors = this.option.colors;
+
+    if (v < 10) {
+      return colors[0];
+    }
+
+    if (v < 30) {
+      return colors[1];
+    }
+
+    return colors[2];
+  }
+
+  initNumbers($container) {
+    const numbers = this.numbers;
+    const colors = this.option.colors;
+    Object.keys(numbers).forEach(key => {
+      const item = numbers[key];
+      colors.forEach(color => {
+        if (item[color]) {
+          return;
+        }
+
+        const svg = "\n                <svg viewBox=\"0 0 11 16\" width=\"11\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path fill=\"".concat(color, "\" d=\"").concat(item.d, "\" />\n                </svg>\n                ");
+        const $img = document.createElement('img');
+        $img.src = "data:image/svg+xml;base64,".concat(btoa(svg));
+        $container.appendChild($img);
+        item[color] = $img;
+      });
+    });
+  }
+
+  getImg(n, color) {
+    const item = this.numbers[n];
+
+    if (item) {
+      return item[color];
+    }
+  }
+
+  start() {
+    this.stopped = false;
+    this.list = [];
+    this.frames = 0;
+    this.startTime = window.performance.now();
+    this.update();
+  }
+
+  update() {
+    if (this.stopped) {
+      return;
+    }
+
+    window.requestAnimationFrame(() => {
+      this.count();
+    });
+  }
+
+  count() {
+    const list = this.list;
+    const now = window.performance.now();
+    let d = now - this.startTime; //count each 1s
+
+    if (d < 1000) {
+      this.frames += 1;
+    } else {
+      d -= 1000;
+
+      while (d > 1000) {
+        list.unshift(0);
+        d -= 1000;
+      } //1s
+
+
+      list.unshift(this.frames);
+      this.render(); //next
+
+      this.frames = 1;
+      this.startTime = now - d;
+    }
+
+    this.update();
+  }
+
+  stop() {
+    this.stopped = true;
+  }
+
+}
+
+
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FPSDetector);
+/******/ 	return __webpack_exports__;
+/******/ })()
+;
+});
+//# sourceMappingURL=fps-detector.js.map

package/dist/fps-detector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fps-detector.js","mappings":"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","sources":["webpack://fps-detector/webpack/universalModuleDefinition","webpack://fps-detector/webpack/bootstrap","webpack://fps-detector/webpack/runtime/define property getters","webpack://fps-detector/webpack/runtime/hasOwnProperty shorthand","webpack://fps-detector/webpack/runtime/make namespace object","webpack://fps-detector/./src/index.js"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"fps-detector\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"fps-detector\"] = factory();\n\telse\n\t\troot[\"fps-detector\"] = factory();\n})(self, function() {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","class FPSDetector {\r\n    constructor($container, option) {\r\n        if (typeof $container === 'string') {\r\n            $container = document.querySelector($container);\r\n        }\r\n\r\n        this.option = Object.assign({\r\n            width: 85,\r\n            height: 30,\r\n            colors: ['red', 'orange', 'green'],\r\n            bgColor: '#fff',\r\n            fgColor: '#ddd',\r\n            padding: 1\r\n        }, option);\r\n\r\n        const $canvas = document.createElement('canvas');\r\n        $canvas.style.display = 'block';\r\n        $canvas.setAttribute('width', this.option.width);\r\n        $canvas.setAttribute('height', this.option.height);\r\n\r\n        $container.appendChild($canvas);\r\n        $container.title = 'FPS Monitor';\r\n\r\n        this.numbers = {\r\n            '-': {\r\n                'd': 'm2.615 8.485-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431z'\r\n            },\r\n            '0': {\r\n                'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n            },\r\n            '1': {\r\n                'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zm.03 14.873-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n            },\r\n            '2': {\r\n                'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm-1.296-.136 1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n            },\r\n            '3': {\r\n                'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n            },\r\n            '4': {\r\n                'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm1.326.685-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n            },\r\n            '5': {\r\n                'd': 'm1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zm-7.654.687 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n            },\r\n            '6': {\r\n                'd': 'm1.289 7.8 1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n            },\r\n            '7': {\r\n                'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.781-.049l1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm7.684 15.56-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n            },\r\n            '8': {\r\n                'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502zM1.319 8.349l1.724 1.652v.391h.001v3.551L1.32 15.511v-3.404l-.001-.255V8.35zm.492 7.849 1.652-1.724h3.942l1.568 1.724H5.568l-.255.002H1.811z'\r\n            },\r\n            '9': {\r\n                'd': 'M9.435.638 7.711 2.29v.391l-.001.001v3.551l1.724 1.568V4.396l.001-.255V.639zM1.289 7.8l1.724-1.652v-.391h.001V2.206L1.29.638v3.404l-.001.255v3.502zm.492-7.849 1.652 1.724h.391l.001.001h3.551L8.944-.048H5.539l-.255-.001H1.782zm.834 8.534-.558-.431 1.116-.862h4.378l1.116.862-1.116.862H3.173l-.558-.431zm6.85 7.026-1.724-1.652v-.391H7.74V9.917l1.724-1.568v3.405l.001.255v3.502z'\r\n            }\r\n        };\r\n        this.initNumbers($canvas);\r\n\r\n        this.ctx = $canvas.getContext('2d');\r\n        \r\n        this.start();\r\n\r\n    }\r\n\r\n    render() {\r\n\r\n        const w = this.option.width;\r\n        const h = this.option.height;\r\n        const ctx = this.ctx;\r\n        const list = this.list;\r\n\r\n        const iw = 11;\r\n        const ih = 16;\r\n\r\n        const padding = this.option.padding;\r\n\r\n        const lx = padding;\r\n        const ly = padding;\r\n        const lw = w - (iw * 2 + padding * 3);\r\n        const lh = h - padding * 2;\r\n\r\n        let startIndex = padding;\r\n        if (list.length > lw) {\r\n            list.length = lw;\r\n        } else {\r\n            startIndex = padding + (lw - list.length);\r\n        }\r\n\r\n        //console.log(list);\r\n        \r\n        ctx.fillStyle = this.option.bgColor;\r\n        //ctx.globalAlpha = 1;\r\n        ctx.fillRect(0, 0, w, h);\r\n\r\n        ctx.fillStyle = this.option.fgColor;\r\n        ctx.fillRect(lx, ly, lw, lh);\r\n\r\n        const ls = [].concat(list).reverse();\r\n\r\n        let lastItem;\r\n        let lastColor;\r\n        ls.forEach((item, i) => {\r\n            lastItem = item;\r\n            const color = this.getColor(item);\r\n            lastColor = color;\r\n            ctx.fillStyle = color;\r\n            const ch = Math.max(Math.floor(item / 60 * lh), 1);\r\n            ctx.fillRect(startIndex + i, lh + ly - ch, 1, ch);\r\n        });\r\n\r\n        const str = `${lastItem}`.padStart(2, '0');\r\n        \r\n        const x = Math.floor(lx + lw + padding);\r\n        const y = Math.ceil((h - ih) / 2);\r\n\r\n        str.split('').forEach((s, i) => {\r\n            const img = this.getImg(s, lastColor);\r\n            if (img) {\r\n                ctx.drawImage(img, x + i * iw, y);\r\n            }\r\n        });\r\n\r\n    }\r\n\r\n    getColor(v) {\r\n        const colors = this.option.colors;\r\n        if (v < 10) {\r\n            return colors[0];\r\n        }\r\n        if (v < 30) {\r\n            return colors[1];\r\n        }\r\n        return colors[2];\r\n    }\r\n\r\n    initNumbers($container) {\r\n        const numbers = this.numbers;\r\n        const colors = this.option.colors;\r\n        Object.keys(numbers).forEach(key => {\r\n            const item = numbers[key];\r\n            colors.forEach(color => {\r\n                if (item[color]) {\r\n                    return;\r\n                }\r\n                const svg = `\r\n                <svg viewBox=\"0 0 11 16\" width=\"11\" height=\"16\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                    <path fill=\"${color}\" d=\"${item.d}\" />\r\n                </svg>\r\n                `;\r\n                const $img = document.createElement('img');\r\n                $img.src = `data:image/svg+xml;base64,${btoa(svg)}`;\r\n                $container.appendChild($img);\r\n                item[color] = $img;\r\n            });\r\n        });\r\n    }\r\n\r\n    getImg(n, color) {\r\n        const item = this.numbers[n];\r\n        if (item) {\r\n            return item[color];\r\n        }\r\n    }\r\n\r\n    start() {\r\n        this.stopped = false;\r\n        this.list = [];\r\n        this.frames = 0;\r\n        this.startTime = window.performance.now();\r\n        this.update();\r\n    }\r\n\r\n    update() {\r\n        if (this.stopped) {\r\n            return;\r\n        }\r\n        window.requestAnimationFrame(() => {\r\n            this.count();\r\n        });\r\n    }\r\n\r\n    count() {\r\n\r\n        const list = this.list;\r\n\r\n        const now = window.performance.now();\r\n        let d = now - this.startTime;\r\n        //count each 1s\r\n        if (d < 1000) {\r\n            this.frames += 1;\r\n        } else {\r\n\r\n            d -= 1000;\r\n            while (d > 1000) {\r\n                list.unshift(0);\r\n                d -= 1000;\r\n            }\r\n\r\n            //1s\r\n            list.unshift(this.frames);\r\n            this.render();\r\n            //next\r\n            this.frames = 1;\r\n            this.startTime = now - d;\r\n        }\r\n       \r\n        this.update();\r\n    }\r\n\r\n    stop() {\r\n        this.stopped = true;\r\n    }\r\n\r\n}\r\n\r\nexport { FPSDetector };\r\n\r\nexport default FPSDetector;"],"names":["FPSDetector","constructor","$container","option","document","querySelector","Object","assign","width","height","colors","bgColor","fgColor","padding","$canvas","createElement","style","display","setAttribute","appendChild","title","numbers","initNumbers","ctx","getContext","start","render","w","h","list","iw","ih","lx","ly","lw","lh","startIndex","length","fillStyle","fillRect","ls","concat","reverse","lastItem","lastColor","forEach","item","i","color","getColor","ch","Math","max","floor","str","padStart","x","y","ceil","split","s","img","getImg","drawImage","v","keys","key","svg","d","$img","src","btoa","n","stopped","frames","startTime","window","performance","now","update","requestAnimationFrame","count","unshift","stop"],"sourceRoot":""}

package/package.json

@@ -0,0 +1,19 @@
+{
+    "name": "fps-detector",
+    "version": "1.0.0",
+    "description": "fps-detector",
+    "main": "dist/fps-detector.js",
+    "scripts": {},
+    "files": [
+        "dist"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/cenfun/fps-detector.git"
+    },
+    "devDependencies": {
+        "eslint": "^8.10.0",
+        "eslint-plugin-html": "^6.2.0"
+    },
+    "dependencies": {}
+}