fps-detector 1.0.1 → 1.0.2
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/dist/fps-detector.js +1 -1
- package/dist/fps-detector.js.map +1 -1
- package/package.json +3 -5
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,(function(){return(
|
|
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,(function(){return function(){"use strict";var t={d:function(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:function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r:function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function l(t,e){for(var l=0;l<e.length;l++){var o=e[l];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}t.r(e),t.d(e,{FPSDetector:function(){return o}});var o=function(){function t(e,l){var o=this;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),"string"==typeof e&&(e=document.querySelector(e)),this.option=Object.assign({width:85,height:30,fpsLevels:[10,30],memLevels:[200,100],colors:["red","orange","green"],bgColor:"#fff",fgColor:"#ddd",padding:1},l);var i=document.createElement("canvas");i.style.display="block",i.setAttribute("width",this.option.width),i.setAttribute("height",this.option.height),e.appendChild(i),e.title="FPS Detector",e.onclick=function(t){o.showMemory=!o.showMemory,o.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(i),this.ctx=i.getContext("2d"),this.start()}var e,o,i;return e=t,(o=[{key:"render",value:function(){var t,e,l=this,o=this.option.width,i=this.option.height,n=this.ctx,r=this.list,h=this.option.padding,v=h,s=h,a=o-(22+3*h),f=i-2*h,c=h;if(r.length>a?r.length=a:c=h+(a-r.length),n.fillStyle=this.option.bgColor,n.fillRect(0,0,o,i),this.showMemory){var u=window.performance.memory.usedJSHeapSize/1048576;return n.font="Bold 16px",n.textAlign="center",n.textBaseline="middle",n.fillStyle=this.getMEMColor(u),void n.fillText("MEM ".concat(u.toFixed(1)," MB"),o/2,i/2)}n.fillStyle=this.option.fgColor,n.fillRect(v,s,a,f),[].concat(r).reverse().forEach((function(o,i){t=o;var r=l.getFPSColor(o);e=r,n.fillStyle=r;var h=Math.max(Math.floor(o/60*f),1);n.fillRect(c+i,f+s-h,1,h)}));var m="".concat(t).padStart(2,"0"),d=Math.floor(v+a+h),p=Math.ceil((i-16)/2);m.split("").forEach((function(t,o){var i=l.getImg(t,e);i&&n.drawImage(i,d+11*o,p)}))}},{key:"getFPSColor",value:function(t){var e,l=this.option.colors,o=this.option.fpsLevels;for(e=0;e<o.length;e++)if(t<o[e])return l[e];return l[e]}},{key:"getMEMColor",value:function(t){var e,l=this.option.colors,o=this.option.memLevels;for(e=0;e<o.length;e++)if(t>o[e])return l[e];return l[e]}},{key:"initNumbers",value:function(t){var e=this.numbers,l=this.option.colors;Object.keys(e).forEach((function(o){var i=e[o];l.forEach((function(e){if(!i[e]){var 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}}))}))}},{key:"getImg",value:function(t,e){var l=this.numbers[t];if(l)return l[e]}},{key:"start",value:function(){this.stopped=!1,this.list=[],this.frames=0,this.startTime=window.performance.now(),this.update()}},{key:"update",value:function(){var t=this;this.stopped||window.requestAnimationFrame((function(){t.count()}))}},{key:"count",value:function(){var t=this.list,e=window.performance.now(),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()}},{key:"stop",value:function(){this.stopped=!0}}])&&l(e.prototype,o),i&&l(e,i),Object.defineProperty(e,"prototype",{writable:!1}),t}();return e.default=o,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 = (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 fpsLevel: [10, 30],\r\n memLevel: [100, 50],\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 fpsLevel = this.option.fpsLevel;\r\n let i;\r\n for (i = 0; i < fpsLevel.length; i++) {\r\n const item = fpsLevel[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 memLevel = this.option.memLevel;\r\n let i;\r\n for (i = 0; i < memLevel.length; i++) {\r\n const item = memLevel[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","constructor","$container","option","document","querySelector","this","assign","width","height","colors","fpsLevel","memLevel","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","lastItem","lastColor","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","stop"],"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, 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":""}
|
package/package.json
CHANGED
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fps-detector",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "fps-detector",
|
|
5
5
|
"main": "dist/fps-detector.js",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"publish": "sf b -m && sf publish patch"
|
|
8
|
-
},
|
|
6
|
+
"scripts": {},
|
|
9
7
|
"files": [
|
|
10
8
|
"dist"
|
|
11
9
|
],
|
|
@@ -18,4 +16,4 @@
|
|
|
18
16
|
"eslint-plugin-html": "^6.2.0"
|
|
19
17
|
},
|
|
20
18
|
"dependencies": {}
|
|
21
|
-
}
|
|
19
|
+
}
|