Added FPS counter.

lightning-js · Nov 21, 2023 · 541e52b · 541e52b
1 parent 1f9e26b
commit 541e52b
Show file tree

Hide file tree

Showing 6 changed files with 156 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lightningjs/blits-example-app",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Lightning 3 Blits Example App",
   "main": "index.js",
   "type": "module",
@@ -9,7 +9,7 @@
     "lint": "eslint '**/*.js'",
     "lint:fix": "eslint '**/*.js' --fix",
     "build": "vite build",
-    "dev": "vite dev"
+    "dev": "vite dev --host"
   },
   "lint-staged": {
     "*.js": [

diff --git a/public/assets/fps_sprite.png b/public/assets/fps_sprite.png
diff --git a/src/App.js b/src/App.js
@@ -43,11 +43,16 @@ import ShowIf from './pages/ShowIf'
 import Events from './pages/Events'
 import Slots from './pages/Slots'
 import Exponential from './pages/Exponential'
+import FPScounter from './components/FPScounter.js'
 
 export default Blits.Application({
+  components: {
+    FPScounter,
+  },
   template: `
     <Element w="1920" h="1080" :color="$backgroundColor">
       <RouterView ref="routerview" />
+      <FPScounter x="1610" />
     </Element>`,
   state() {
     return {

diff --git a/src/components/FPScounter.js b/src/components/FPScounter.js
@@ -0,0 +1,139 @@
+/*
+ * 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 Blits from '@lightningjs/blits'
+
+export default Blits.Component('FPScounter', {
+  template: `
+    <Element y="15" x="20">
+      <Element>
+        <Sprite image="assets/fps_sprite.png"w="43" h="25" map="$sprite" frame="fps" />
+        <Element x="58" y="2">
+          <Sprite image="assets/fps_sprite.png" x="0" h="20" w="20" map="$sprite" :frame="$fps[0]" />
+          <Sprite image="assets/fps_sprite.png" x="18" h="20" w="20" map="$sprite" :frame="$fps[1]" />
+          <Sprite image="assets/fps_sprite.png" x="36" h="20" w="20" map="$sprite" :frame="$fps[2]" />
+        </Element>
+      </Element>
+
+      <Element x="150">
+        <Sprite image="assets/fps_sprite.png" y="2" w="48" h="25" map="$sprite" frame="avg" />
+        <Element x="63" y="2">
+          <Sprite image="assets/fps_sprite.png" x="0" h="20" w="20" map="$sprite" :frame="$avgFps[0]" />
+          <Sprite image="assets/fps_sprite.png" x="18" h="20" w="20" map="$sprite" :frame="$avgFps[1]" />
+          <Sprite image="assets/fps_sprite.png" x="36" h="20" w="20" map="$sprite" :frame="$avgFps[2]" />
+        </Element>
+      </Element>
+
+
+      <Element x="0" y="40" >
+        <Sprite image="assets/fps_sprite.png" x="-2" w="47" h="25" map="$sprite" frame="min" />
+        <Element x="58" y="2">
+          <Sprite image="assets/fps_sprite.png" x="0" h="20" w="20" map="$sprite" :frame="$minFps[0]" />
+          <Sprite image="assets/fps_sprite.png" x="18" h="20" w="20" map="$sprite" :frame="$minFps[1]" />
+          <Sprite image="assets/fps_sprite.png" x="36" h="20" w="20" map="$sprite" :frame="$minFps[2]" />
+        </Element>
+      </Element>
+
+
+      <Element x="150" y="40">
+        <Sprite image="assets/fps_sprite.png" w="53" h="25" map="$sprite" frame="max" />
+        <Element x="63" y="2">
+          <Sprite image="assets/fps_sprite.png" x="0" h="20" w="20" map="$sprite" :frame="$maxFps[0]" />
+          <Sprite image="assets/fps_sprite.png" x="18" h="20" w="20" map="$sprite" :frame="$maxFps[1]" />
+          <Sprite image="assets/fps_sprite.png" x="36" h="20" w="20" map="$sprite" :frame="$maxFps[2]" />
+        </Element>
+      </Element>
+    </Element>
+    `,
+  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/pages/Portal.js b/src/pages/Portal.js
@@ -30,11 +30,14 @@ export default Blits.Component('Portal', {
       <PortalRow  mountY="0.5" h="500" :y.transition="-$rowFocused * 420 + 1100" title="Examples and tests" items="$example" ref="row1" />
       <PortalRow  mountY="0.5" h="500" :y.transition="-$rowFocused * 420 + 1650" title="Benchmarks and stress tests" items="$benchmark" ref="row2" />
       <Element w="1920" h="200" color="#44037a">
-        <Element src="assets/blits-logo-full.png" w="200" h="112" :y.transition="{value: 80 - $logoOffset, duration: 400}" x="60" />
         <Element w="1920" h="70" y="200" color="{top: '#44037a'}"/>
-        <Element :x="1920-260" :y.transition="{value: 90 - $logoOffset, duration: 400}">
-          <Text y="0" size="36">Example App</Text>
-          <Text y="50" size="24">v{{$version}}</Text>
+        <Element :y.transition="{value: 80 - $logoOffset, duration: 400}">
+          <Element src="assets/blits-logo-full.png" w="200" h="112" x="60" />
+          <Element w="2" h="120" y="-10" color="#ffffff80" x="300" />
+          <Element x="320" y="16">
+            <Text y="0" size="36">Example App</Text>
+            <Text y="50" size="24">v{{$version}}</Text>
+          </Element>
         </Element>
       </Element>
     </Element>`,