fps-detector 1.0.2 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +17 -4
- package/dist/fps-detector.js +1 -1
- package/dist/fps-detector.js.map +1 -1
- package/package.json +11 -6
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2022 cenfun
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
# fps-detector
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
> A tool to display FPS in real time for detecting JS performance.
|
|
4
3
|
# Install
|
|
5
4
|
```sh
|
|
6
5
|
npm i fps-detector
|
|
7
6
|
```
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
## Online Demo
|
|
9
|
+
[https://cenfun.github.io/fps-detector](https://cenfun.github.io/fps-detector)
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
10
12
|
```js
|
|
11
13
|
import FPSDetector from 'fps-detector';
|
|
12
14
|
new FPSDetector('.fps-detector', {
|
|
@@ -14,4 +16,15 @@ new FPSDetector('.fps-detector', {
|
|
|
14
16
|
height: 30
|
|
15
17
|
});
|
|
16
18
|
```
|
|
17
|
-
see [preview/index.html](preview/index.html)
|
|
19
|
+
see [preview/index.html](preview/index.html)
|
|
20
|
+
|
|
21
|
+
## CDN Usage
|
|
22
|
+
```html
|
|
23
|
+
<script src="https://cdn.jsdelivr.net/npm/fps-detector@latest/dist/fps-detector.js"></script>
|
|
24
|
+
|
|
25
|
+
<div class="fps-detector"></div>
|
|
26
|
+
<script>
|
|
27
|
+
const FPSDetector = window['fps-detector'].FPSDetector;
|
|
28
|
+
new FPSDetector('.fps-detector');
|
|
29
|
+
</script>
|
|
30
|
+
```
|
package/dist/fps-detector.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("fps-detector",[],e):"object"==typeof exports?exports["fps-detector"]=e():t["fps-detector"]=e()}(self,(
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("fps-detector",[],e):"object"==typeof exports?exports["fps-detector"]=e():t["fps-detector"]=e()}(self,(()=>(()=>{"use strict";var t={d:(e,l)=>{for(var o in l)t.o(l,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:l[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{FPSDetector:()=>l,default:()=>o});class l{constructor(t,e){"string"==typeof t&&(t=document.querySelector(t)),this.option={width:85,height:30,fpsLevels:[10,30],memLevels:[200,100],colors:["red","orange","green"],bgColor:"#fff",fgColor:"#ddd",padding:1,...e};const l=document.createElement("canvas");l.style.display="block",l.setAttribute("width",this.option.width),l.setAttribute("height",this.option.height),t.appendChild(l),t.title="FPS Detector",t.onclick=t=>{this.showMemory=!this.showMemory,this.render()},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(l),this.ctx=l.getContext("2d"),this.start()}render(){const t=this.option.width,e=this.option.height,l=this.ctx,o=this.list,i=this.option.padding,s=i,h=i,r=t-(22+3*i),n=e-2*i;let v=i;if(o.length>r?o.length=r:v=i+(r-o.length),l.fillStyle=this.option.bgColor,l.fillRect(0,0,t,e),this.showMemory){const o=window.performance.memory.usedJSHeapSize/1048576;return l.font="Bold 16px",l.textAlign="center",l.textBaseline="middle",l.fillStyle=this.getMEMColor(o),void l.fillText("MEM ".concat(o.toFixed(1)," MB"),t/2,Math.ceil(e/2)+1)}l.fillStyle=this.option.fgColor,l.fillRect(s,h,r,n);let c,m;[].concat(o).reverse().forEach(((t,e)=>{c=t;const o=this.getFPSColor(t);m=o,l.fillStyle=o;const i=Math.max(Math.floor(t/60*n),1);l.fillRect(v+e,n+h-i,1,i)}));const d="".concat(c).padStart(2,"0"),a=Math.floor(s+r+i),f=Math.ceil((e-16)/2);d.split("").forEach(((t,e)=>{const o=this.getImg(t,m);o&&l.drawImage(o,a+11*e,f)}))}getFPSColor(t){const e=this.option.colors,l=this.option.fpsLevels;let o;for(o=0;o<l.length;o++){if(t<l[o])return e[o]}return e[o]}getMEMColor(t){const e=this.option.colors,l=this.option.memLevels;let o;for(o=0;o<l.length;o++){if(t>l[o])return e[o]}return e[o]}initNumbers(t){const e=this.numbers,l=this.option.colors;Object.keys(e).forEach((o=>{const i=e[o];l.forEach((e=>{if(i[e])return;const l='\n <svg viewBox="0 0 11 16" width="11" height="16" xmlns="http://www.w3.org/2000/svg">\n <path fill="'.concat(e,'" d="').concat(i.d,'" />\n </svg>\n '),o=document.createElement("img");o.src="data:image/svg+xml;base64,".concat(btoa(l)),t.appendChild(o),i[e]=o}))}))}getImg(t,e){const l=this.numbers[t];if(l)return l[e]}start(){this.stopped=!1,this.list=[],this.frames=0,this.startTime=window.performance.now(),this.update()}update(){this.stopped||window.requestAnimationFrame((()=>{this.count()}))}count(){const t=this.list,e=window.performance.now();let l=e-this.startTime;if(l<1e3)this.frames+=1;else{for(l-=1e3;l>1e3;)t.unshift(0),l-=1e3;t.unshift(this.frames),this.render(),this.frames=1,this.startTime=e-l}this.update()}stop(){this.stopped=!0}}const o=l;return e})()));
|
|
2
2
|
//# sourceMappingURL=fps-detector.js.map
|
package/dist/fps-detector.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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 = function(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 = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(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\r\n fpsLevels: [10, 30],\r\n memLevels: [200, 100],\r\n colors: ['red', 'orange', 'green'],\r\n\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 Detector';\r\n $container.onclick = (e) => {\r\n this.showMemory = !this.showMemory;\r\n this.render();\r\n };\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.fillRect(0, 0, w, h);\r\n\r\n if (this.showMemory) {\r\n\r\n const memory = window.performance.memory;\r\n const mem = memory.usedJSHeapSize / 1048576;\r\n //const memTotal = memory.jsHeapSizeLimit / 1048576;\r\n //const per = (mem / memTotal * 100).toFixed(2);\r\n \r\n //console.log(mem, per);\r\n ctx.font = 'Bold 16px';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillStyle = this.getMEMColor(mem);\r\n ctx.fillText(`MEM ${mem.toFixed(1)} MB`, w / 2, h / 2);\r\n\r\n return;\r\n }\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.getFPSColor(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 //asc\r\n getFPSColor(v) {\r\n const colors = this.option.colors;\r\n const fpsLevels = this.option.fpsLevels;\r\n let i;\r\n for (i = 0; i < fpsLevels.length; i++) {\r\n const item = fpsLevels[i];\r\n if (v < item) {\r\n return colors[i];\r\n }\r\n }\r\n return colors[i];\r\n }\r\n\r\n //desc\r\n getMEMColor(v) {\r\n const colors = this.option.colors;\r\n const memLevels = this.option.memLevels;\r\n let i;\r\n for (i = 0; i < memLevels.length; i++) {\r\n const item = memLevels[i];\r\n if (v > item) {\r\n return colors[i];\r\n }\r\n }\r\n return colors[i];\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":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","FPSDetector","$container","option","document","querySelector","this","assign","width","height","fpsLevels","memLevels","colors","bgColor","fgColor","padding","$canvas","createElement","style","display","setAttribute","appendChild","title","onclick","e","showMemory","render","numbers","initNumbers","ctx","getContext","start","lastItem","lastColor","w","h","list","lx","ly","lw","iw","lh","startIndex","length","fillStyle","fillRect","mem","window","performance","memory","usedJSHeapSize","font","textAlign","textBaseline","getMEMColor","fillText","toFixed","concat","reverse","forEach","item","i","color","getFPSColor","ch","Math","max","floor","str","padStart","x","y","ceil","split","s","img","getImg","drawImage","v","keys","svg","d","$img","src","btoa","n","stopped","frames","startTime","now","update","requestAnimationFrame","count","unshift"],"sourceRoot":""}
|
|
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, () => {\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 = {\r\n width: 85,\r\n height: 30,\r\n\r\n fpsLevels: [10, 30],\r\n memLevels: [200, 100],\r\n colors: ['red', 'orange', 'green'],\r\n\r\n bgColor: '#fff',\r\n fgColor: '#ddd',\r\n padding: 1,\r\n ... option\r\n };\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 Detector';\r\n $container.onclick = (e) => {\r\n this.showMemory = !this.showMemory;\r\n this.render();\r\n };\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.fillRect(0, 0, w, h);\r\n\r\n if (this.showMemory) {\r\n\r\n const memory = window.performance.memory;\r\n const mem = memory.usedJSHeapSize / 1048576;\r\n //const memTotal = memory.jsHeapSizeLimit / 1048576;\r\n //const per = (mem / memTotal * 100).toFixed(2);\r\n\r\n //console.log(mem, per);\r\n ctx.font = 'Bold 16px';\r\n ctx.textAlign = 'center';\r\n ctx.textBaseline = 'middle';\r\n ctx.fillStyle = this.getMEMColor(mem);\r\n ctx.fillText(`MEM ${mem.toFixed(1)} MB`, w / 2, Math.ceil(h / 2) + 1);\r\n\r\n return;\r\n }\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.getFPSColor(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 //asc\r\n getFPSColor(v) {\r\n const colors = this.option.colors;\r\n const fpsLevels = this.option.fpsLevels;\r\n let i;\r\n for (i = 0; i < fpsLevels.length; i++) {\r\n const item = fpsLevels[i];\r\n if (v < item) {\r\n return colors[i];\r\n }\r\n }\r\n return colors[i];\r\n }\r\n\r\n //desc\r\n getMEMColor(v) {\r\n const colors = this.option.colors;\r\n const memLevels = this.option.memLevels;\r\n let i;\r\n for (i = 0; i < memLevels.length; i++) {\r\n const item = memLevels[i];\r\n if (v > item) {\r\n return colors[i];\r\n }\r\n }\r\n return colors[i];\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;\r\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","FPSDetector","constructor","$container","option","document","querySelector","this","width","height","fpsLevels","memLevels","colors","bgColor","fgColor","padding","$canvas","createElement","style","display","setAttribute","appendChild","title","onclick","e","showMemory","render","numbers","initNumbers","ctx","getContext","start","w","h","list","lx","ly","lw","iw","lh","startIndex","length","fillStyle","fillRect","mem","window","performance","memory","usedJSHeapSize","font","textAlign","textBaseline","getMEMColor","fillText","toFixed","Math","ceil","lastItem","lastColor","concat","reverse","forEach","item","i","color","getFPSColor","ch","max","floor","str","padStart","x","y","split","s","img","getImg","drawImage","v","keys","svg","d","$img","src","btoa","n","stopped","frames","startTime","now","update","requestAnimationFrame","count","unshift","stop"],"sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fps-detector",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.3",
|
|
4
|
+
"description": "A tool to display FPS in real time for detecting JS performance",
|
|
5
5
|
"main": "dist/fps-detector.js",
|
|
6
|
-
"scripts": {
|
|
6
|
+
"scripts": {
|
|
7
|
+
"build": "sf lint && sf b -p",
|
|
8
|
+
"patch": "npm run build && sf publish patch",
|
|
9
|
+
"pack": "sf lint && sf pack -o docs -q v={version}"
|
|
10
|
+
},
|
|
7
11
|
"files": [
|
|
8
12
|
"dist"
|
|
9
13
|
],
|
|
@@ -12,8 +16,9 @@
|
|
|
12
16
|
"url": "git+https://github.com/cenfun/fps-detector.git"
|
|
13
17
|
},
|
|
14
18
|
"devDependencies": {
|
|
15
|
-
"eslint": "^8.
|
|
16
|
-
"eslint-
|
|
19
|
+
"eslint": "^8.21.0",
|
|
20
|
+
"eslint-config-plus": "^1.0.3",
|
|
21
|
+
"eslint-plugin-html": "^7.1.0"
|
|
17
22
|
},
|
|
18
23
|
"dependencies": {}
|
|
19
|
-
}
|
|
24
|
+
}
|