From 936b2277a9c0b38e5d84211cad66ad304103915d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?U=C4=9Fur=20Aslan?= Date: Mon, 22 Jan 2024 13:17:16 +0100 Subject: [PATCH 1/6] feat: added FPSCounter component --- public/assets/fps_sprite.png | Bin 0 -> 6853 bytes src/components/FPSCounter.js | 141 +++++++++++++++++++++++++++++++++++ src/lib/setup/base.js | 2 + 3 files changed, 143 insertions(+) create mode 100644 public/assets/fps_sprite.png create mode 100644 src/components/FPSCounter.js diff --git a/public/assets/fps_sprite.png b/public/assets/fps_sprite.png new file mode 100644 index 0000000000000000000000000000000000000000..af082e51e4ee235ae431a8f77d630fcf3cef2769 GIT binary patch literal 6853 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 literal 0 HcmV?d00001 diff --git a/src/components/FPSCounter.js b/src/components/FPSCounter.js new file mode 100644 index 00000000..ad27a3f9 --- /dev/null +++ b/src/components/FPSCounter.js @@ -0,0 +1,141 @@ +/* + * Copyright 2023 Comcast Cable Communications Management, LLC + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + */ + +import Component from '../component.js' + +export default () => + Component('FPSCounter', { + props: ['x'], + template: ` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `, + state() { + return { + sprite: { + defaults: { + y: 1, + w: 20, + h: 20, + }, + frames: { + false: { x: -1000 }, + 0: { x: 1 }, + 1: { x: 23 }, + 2: { x: 45 }, + 3: { x: 67 }, + 4: { x: 89 }, + 5: { x: 111 }, + 6: { x: 133 }, + 7: { x: 155 }, + 8: { x: 177 }, + 9: { x: 199 }, + avg: { x: 221, w: 48, h: 25 }, + fps: { x: 271, w: 43, h: 25 }, + max: { x: 316, w: 53, h: 25 }, + min: { x: 371, w: 47, h: 25 }, + }, + }, + fps: '-', + avgFps: '-', + minFps: '-', + maxFps: '-', + } + }, + hooks: { + init() { + const times = [] + let fps = 0 + let minFps = 10000 + let maxFps = 0 + let avgFps = 0 + let totalFps = 0 + let totalFrames = 0 + let lastUpdate = performance.now() + + const refreshLoop = () => { + window.requestAnimationFrame(() => { + const now = performance.now() + + if (minFps < 10000 && lastUpdate <= now - 1000) { + lastUpdate = now + this.fps = fps.toString().padStart(3, '0') + this.avgFps = avgFps.toString().padStart(3, '0') + this.minFps = minFps.toString().padStart(3, '0') + this.maxFps = maxFps.toString().padStart(3, '0') + } + + while (times.length > 0 && times[0] <= now - 1000) { + times.shift() + } + times.push(now) + + fps = times.length + + if (totalFrames > 60) { + minFps = Math.min(fps, minFps) + maxFps = Math.max(fps, maxFps) + totalFps += fps + avgFps = Math.round(totalFps / (totalFrames - 60)) + } + totalFrames++ + + refreshLoop() + }) + } + + refreshLoop() + }, + }, + }) diff --git a/src/lib/setup/base.js b/src/lib/setup/base.js index 40182b9e..c6cdaa10 100644 --- a/src/lib/setup/base.js +++ b/src/lib/setup/base.js @@ -23,6 +23,7 @@ import Circle from '../../components/Circle.js' import RouterView from '../../components/RouterView.js' import Sprite from '../../components/Sprite.js' import Text from '../../components/Text.js' +import FPSCounter from '../../components/FPSCounter.js' import eventListeners from '../eventListeners.js' import { default as log, Log } from '../log.js' import symbols from '../symbols.js' @@ -135,6 +136,7 @@ export default (component) => { RouterView: RouterView(), Sprite: Sprite(), Text: Text(), + FPSCounter: FPSCounter(), }, writable: false, enumerable: false, From acf0da2c0c6b71cfcb6d16450274ac43d88353ed Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Thu, 25 Jan 2024 09:12:36 +0100 Subject: [PATCH 2/6] Renamed FPSCounter to FPScounter (casing). --- .gitignore | 1 + src/components/{FPSCounter.js => FPScounter.js} | 0 src/lib/setup/base.js | 4 ++-- 3 files changed, 3 insertions(+), 2 deletions(-) rename src/components/{FPSCounter.js => FPScounter.js} (100%) diff --git a/.gitignore b/.gitignore index eea096f4..c049f23f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules .DS_store +.DS_Store coverage diff --git a/src/components/FPSCounter.js b/src/components/FPScounter.js similarity index 100% rename from src/components/FPSCounter.js rename to src/components/FPScounter.js diff --git a/src/lib/setup/base.js b/src/lib/setup/base.js index c6cdaa10..3cb1b5e8 100644 --- a/src/lib/setup/base.js +++ b/src/lib/setup/base.js @@ -23,7 +23,7 @@ import Circle from '../../components/Circle.js' import RouterView from '../../components/RouterView.js' import Sprite from '../../components/Sprite.js' import Text from '../../components/Text.js' -import FPSCounter from '../../components/FPSCounter.js' +import FPScounter from '../../components/FPScounter.js' import eventListeners from '../eventListeners.js' import { default as log, Log } from '../log.js' import symbols from '../symbols.js' @@ -136,7 +136,7 @@ export default (component) => { RouterView: RouterView(), Sprite: Sprite(), Text: Text(), - FPSCounter: FPSCounter(), + FPScounter: FPScounter(), }, writable: false, enumerable: false, From d467473ab42e3656ec68b9ce1eb9340cfb2c23ed Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Thu, 25 Jan 2024 09:30:21 +0100 Subject: [PATCH 3/6] Removed x prop from FPS counter component. Fixed indentation of template. --- src/components/FPScounter.js | 61 ++++++++++++++++++------------------ 1 file changed, 30 insertions(+), 31 deletions(-) diff --git a/src/components/FPScounter.js b/src/components/FPScounter.js index ad27a3f9..e471610f 100644 --- a/src/components/FPScounter.js +++ b/src/components/FPScounter.js @@ -19,47 +19,46 @@ import Component from '../component.js' export default () => Component('FPSCounter', { - props: ['x'], template: ` - - - - - - - - + + + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - - - - - - - + + + + + + + - `, state() { return { From ebf6bd73cd35e870263b8a09dea1681968950eec Mon Sep 17 00:00:00 2001 From: Suresh Kumar Gangumalla Date: Wed, 31 Jan 2024 19:06:54 +0530 Subject: [PATCH 4/6] Replaced requestAnimationFrame with rendere fps Replaced requestAnimationFrame method with renderer fpsUpdate event listener Signed-off-by: Suresh Kumar Gangumalla --- src/components/FPScounter.js | 48 ++++++++++-------------------------- src/launch.d.ts | 9 +++++++ src/launch.js | 1 + 3 files changed, 23 insertions(+), 35 deletions(-) diff --git a/src/components/FPScounter.js b/src/components/FPScounter.js index e471610f..3f8231f7 100644 --- a/src/components/FPScounter.js +++ b/src/components/FPScounter.js @@ -16,6 +16,7 @@ */ import Component from '../component.js' +import { renderer } from '../launch.js' export default () => Component('FPSCounter', { @@ -94,47 +95,24 @@ export default () => }, hooks: { init() { - const times = [] - let fps = 0 let minFps = 10000 let maxFps = 0 let avgFps = 0 let totalFps = 0 - let totalFrames = 0 - let lastUpdate = performance.now() + let fpsUpdateCounter = 0 - const refreshLoop = () => { - window.requestAnimationFrame(() => { - const now = performance.now() + renderer.on('fpsUpdate', (rM, { fps }) => { + minFps = Math.min(fps, minFps) + maxFps = Math.max(fps, maxFps) + totalFps += fps + fpsUpdateCounter++ + avgFps = Math.round(totalFps / fpsUpdateCounter) - if (minFps < 10000 && lastUpdate <= now - 1000) { - lastUpdate = now - this.fps = fps.toString().padStart(3, '0') - this.avgFps = avgFps.toString().padStart(3, '0') - this.minFps = minFps.toString().padStart(3, '0') - this.maxFps = maxFps.toString().padStart(3, '0') - } - - while (times.length > 0 && times[0] <= now - 1000) { - times.shift() - } - times.push(now) - - fps = times.length - - if (totalFrames > 60) { - minFps = Math.min(fps, minFps) - maxFps = Math.max(fps, maxFps) - totalFps += fps - avgFps = Math.round(totalFps / (totalFrames - 60)) - } - totalFrames++ - - refreshLoop() - }) - } - - refreshLoop() + this.fps = fps.toString().padStart(3, '0') + this.avgFps = avgFps.toString().padStart(3, '0') + this.minFps = minFps.toString().padStart(3, '0') + this.maxFps = maxFps.toString().padStart(3, '0') + }) }, }, }) diff --git a/src/launch.d.ts b/src/launch.d.ts index be32cb09..6d4b6893 100644 --- a/src/launch.d.ts +++ b/src/launch.d.ts @@ -145,6 +145,15 @@ export interface Settings { * Defaults to 1 if not specified */ pixelRatio?: number + /** + * Interval in milliseconds to receive FPS updates + * + * @remarks + * If set to `0`, FPS updates will be disabled. + * + * @defaultValue `0` (disabled) + */ + fpsInterval?: number } /** diff --git a/src/launch.js b/src/launch.js index a3d610cb..639739e0 100644 --- a/src/launch.js +++ b/src/launch.js @@ -41,6 +41,7 @@ export default (App, target, settings) => { appWidth: settings.w || 1920, appHeight: settings.h || 1080, coreExtensionModule: settings.fontLoader, + fpsUpdateInterval: settings.fpsInterval || 0, deviceLogicalPixelRatio: settings.pixelRatio || screenResolutions[settings.screenResolution] || From 05b6b0a7f30362761f71ceae4df8df716cf4ddf9 Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Thu, 1 Feb 2024 13:09:42 +0100 Subject: [PATCH 5/6] Added base64 version of sprite. Changed default of fpsUpdateInterval to 1000. --- public/assets/fps_sprite.base64.js | 1 + src/components/FPScounter.js | 38 +++++++++++++++++------------- src/launch.d.ts | 2 +- src/launch.js | 2 +- 4 files changed, 24 insertions(+), 19 deletions(-) create mode 100644 public/assets/fps_sprite.base64.js diff --git a/public/assets/fps_sprite.base64.js b/public/assets/fps_sprite.base64.js new file mode 100644 index 00000000..2ae5aa5d --- /dev/null +++ b/public/assets/fps_sprite.base64.js @@ -0,0 +1 @@ +export default 'data:image/png;base64,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' diff --git a/src/components/FPScounter.js b/src/components/FPScounter.js index 3f8231f7..7127545f 100644 --- a/src/components/FPScounter.js +++ b/src/components/FPScounter.js @@ -17,45 +17,48 @@ import Component from '../component.js' import { renderer } from '../launch.js' +import fps_sprite from '../../public/assets/fps_sprite.base64.js' + +console.log(fps_sprite) export default () => - Component('FPSCounter', { + Component('FPScounter', { template: ` - + - - - + + + - + - - - + + + - + - - - + + + - + - - - + + + @@ -63,6 +66,7 @@ export default () => `, state() { return { + image: fps_sprite, sprite: { defaults: { y: 1, diff --git a/src/launch.d.ts b/src/launch.d.ts index 6d4b6893..8e576eb9 100644 --- a/src/launch.d.ts +++ b/src/launch.d.ts @@ -151,7 +151,7 @@ export interface Settings { * @remarks * If set to `0`, FPS updates will be disabled. * - * @defaultValue `0` (disabled) + * @defaultValue `1000` (disabled) */ fpsInterval?: number } diff --git a/src/launch.js b/src/launch.js index 639739e0..5a688494 100644 --- a/src/launch.js +++ b/src/launch.js @@ -41,7 +41,7 @@ export default (App, target, settings) => { appWidth: settings.w || 1920, appHeight: settings.h || 1080, coreExtensionModule: settings.fontLoader, - fpsUpdateInterval: settings.fpsInterval || 0, + fpsUpdateInterval: settings.fpsInterval || 1000, deviceLogicalPixelRatio: settings.pixelRatio || screenResolutions[settings.screenResolution] || From bcce23c44ed90ee9cbcafd9e0ac602ce87c7f188 Mon Sep 17 00:00:00 2001 From: Michiel van der Geest Date: Thu, 1 Feb 2024 15:13:13 +0100 Subject: [PATCH 6/6] Added starting with empty FPS values. --- src/components/FPScounter.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/FPScounter.js b/src/components/FPScounter.js index 7127545f..cf3f6321 100644 --- a/src/components/FPScounter.js +++ b/src/components/FPScounter.js @@ -74,7 +74,7 @@ export default () => h: 20, }, frames: { - false: { x: -1000 }, + '-': { x: -1000 }, 0: { x: 1 }, 1: { x: 23 }, 2: { x: 45 }, @@ -91,14 +91,14 @@ export default () => min: { x: 371, w: 47, h: 25 }, }, }, - fps: '-', - avgFps: '-', - minFps: '-', - maxFps: '-', + fps: '---', + avgFps: '---', + minFps: '---', + maxFps: '---', } }, hooks: { - init() { + ready() { let minFps = 10000 let maxFps = 0 let avgFps = 0