diff --git a/light9/fade/web/Light9FadeUi.ts b/light9/fade/web/Light9FadeUi.ts --- a/light9/fade/web/Light9FadeUi.ts +++ b/light9/fade/web/Light9FadeUi.ts @@ -7,11 +7,11 @@ import { getTopGraph } from "../../web/R 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 @@ export class Light9FadeUi extends LitEle return html` -

Fade [metrics]

+

Fade

+ +
+ ${this.faders.map((fd) => html` `)} `; } @@ -52,6 +55,11 @@ export class Light9FadeUi extends LitEle ]; }); } + 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 @@ export class Light9Fader extends LitElem return; } log(`new value ${this.value}`); - + meter.tick(); this.graph.patchObject(this.uri, this.graph.Uri(":value"), this.graph.LiteralRoundedFloat(this.value), this.ctx); } diff --git a/light9/fade/web/index.html b/light9/fade/web/index.html --- a/light9/fade/web/index.html +++ b/light9/fade/web/index.html @@ -4,6 +4,7 @@ fade + diff --git a/package.json b/package.json --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,6 +6,7 @@ specifiers: '@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 @@ specifiers: 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 @@ dependencies: '@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 @@ dependencies: 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 @@ packages: '@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 @@ packages: 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}