Mercurial > code > home > repos > light9

changeset 2213:22131be6639b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add fps meter to fade UI
author drewp@bigasterisk.com
date Tue, 23 May 2023 13:13:12 -0700
parents b6f8f1b08959
children d665acb12046
files light9/fade/web/Light9FadeUi.ts light9/fade/web/index.html package.json pnpm-lock.yaml
diffstat 4 files changed, 26 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/light9/fade/web/Light9FadeUi.ts	Tue May 23 12:34:04 2023 -0700
+++ b/light9/fade/web/Light9FadeUi.ts	Tue May 23 13:13:12 2023 -0700
@@ -7,11 +7,11 @@
 import { SyncedGraph } from "../../web/SyncedGraph";
 import { shortShow, showRoot } from "../../web/show_specific";
 export { EditChoice } from "../../web/EditChoice";
-
 provideFASTDesignSystem().register(fastSlider(), fastSliderLabel());
 
 debug.enable("*");
 const log = debug("fade");
+let meter: FPSMeter;
 
 @customElement("light9-fade-ui")
 export class Light9FadeUi extends LitElement {
@@ -26,7 +26,10 @@
     return html`
       <rdfdb-synced-graph></rdfdb-synced-graph>
 
-      <h1>Fade <a href="metrics">[metrics]</a></h1>
+      <h1>Fade</h1>
+
+      <div id="fps"></div>
+
       ${this.faders.map((fd) => html` <light9-fader .uri=${fd}></light9-fader> `)}
     `;
   }
@@ -52,6 +55,11 @@
       ];
     });
   }
+  connectedCallback(): void {
+    super.connectedCallback();
+    meter = new FPSMeter(this.shadowRoot?.querySelector("#fps")!, { graph: 1, left: "auto", right: "0" });
+    meter.tick();
+  }
 }
 
 @customElement("light9-fader")
@@ -142,7 +150,7 @@
       return;
     }
     log(`new value ${this.value}`);
-
+    meter.tick();
     this.graph.patchObject(this.uri, this.graph.Uri(":value"), this.graph.LiteralRoundedFloat(this.value), this.ctx);
   }
 
--- a/light9/fade/web/index.html	Tue May 23 12:34:04 2023 -0700
+++ b/light9/fade/web/index.html	Tue May 23 13:13:12 2023 -0700
@@ -4,6 +4,7 @@
     <title>fade</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../style.css">    
+    <script src="@fs/home/drewp/own/proj/light9/node_modules/fpsmeter/dist/fpsmeter.min.js"></script>
     <script type="module" src="../fade/Light9FadeUi"></script>
   </head>
   <body>
--- a/package.json	Tue May 23 12:34:04 2023 -0700
+++ b/package.json	Tue May 23 13:13:12 2023 -0700
@@ -14,6 +14,7 @@
     "@types/async": "^3.2.20",
     "@types/d3": "^7.4.0",
     "@types/debug": "^4.1.7",
+    "@types/fpsmeter": "^0.3.31",
     "@types/n3": "^1.10.4",
     "@types/node": "^20.2.0",
     "@types/reconnectingwebsocket": "^1.0.7",
@@ -21,6 +22,7 @@
     "async": "^3.2.4",
     "d3": "^7.8.4",
     "debug": "^4.3.4",
+    "fpsmeter": "^0.3.1",
     "knockout": "^3.5.1",
     "lit": "^2.7.4",
     "n3": "^1.16.4",
--- a/pnpm-lock.yaml	Tue May 23 12:34:04 2023 -0700
+++ b/pnpm-lock.yaml	Tue May 23 13:13:12 2023 -0700
@@ -6,6 +6,7 @@
   '@types/async': ^3.2.20
   '@types/d3': ^7.4.0
   '@types/debug': ^4.1.7
+  '@types/fpsmeter': ^0.3.31
   '@types/n3': ^1.10.4
   '@types/node': ^20.2.0
   '@types/reconnectingwebsocket': ^1.0.7
@@ -13,6 +14,7 @@
   async: ^3.2.4
   d3: ^7.8.4
   debug: ^4.3.4
+  fpsmeter: ^0.3.1
   knockout: ^3.5.1
   lit: ^2.7.4
   n3: ^1.16.4
@@ -30,6 +32,7 @@
   '@types/async': 3.2.20
   '@types/d3': 7.4.0
   '@types/debug': 4.1.7
+  '@types/fpsmeter': 0.3.31
   '@types/n3': 1.10.4
   '@types/node': 20.2.0
   '@types/reconnectingwebsocket': 1.0.7
@@ -37,6 +40,7 @@
   async: 3.2.4
   d3: 7.8.4
   debug: 4.3.4
+  fpsmeter: 0.3.1
   knockout: 3.5.1
   lit: 2.7.4
   n3: 1.16.4
@@ -601,6 +605,10 @@
       '@types/ms': 0.7.31
     dev: false
 
+  /@types/fpsmeter/0.3.31:
+    resolution: {integrity: sha512-LxMpVg6v6DkLjCpREAQgoO+PG6Ry3euoKqrG/tyBFBr7lRaCRT0J/GZYh/BrUOI3nIXs9ogRgTLzNKNF4JznrQ==}
+    dev: false
+
   /@types/geojson/7946.0.10:
     resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==}
     dev: false
@@ -974,6 +982,10 @@
     resolution: {integrity: sha512-vlVu3N8d6yEMpMsEm+7sUBAI81aqYYuEvfK0jNqmdb/OPXzzH7QWDDnVjMvDSY47JdHEqx/dfC/q8WkfoTmpGQ==}
     dev: false
 
+  /fpsmeter/0.3.1:
+    resolution: {integrity: sha512-i3zzNJwGkA+9WWIXpAtP0TCN64eO5VkKQgirYE7ZCVqyC3NfUPszU35R044fmSCjiMqefiBs5NiGKvD7lFJ87Q==}
+    dev: false
+
   /fsevents/2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}