Changeset - 22131be6639b
Parent rev.
Child rev.
[Not reviewed]
default
0 4 0
drewp@bigasterisk.com - 20 months ago 2023-05-23 20:13:12
drewp@bigasterisk.com
add fps meter to fade UI
4 files changed with 26 insertions and 3 deletions:
light9/fade/web/Light9FadeUi.ts
11
3
light9/fade/web/index.html
1
package.json
2
pnpm-lock.yaml
12
0 comments (0 inline, 0 general)
light9/fade/web/Light9FadeUi.ts
➞
Show inline comments
 
@@ -4,17 +4,17 @@ import { css, html, LitElement } from "l
 
import { customElement, property } from "lit/decorators.js";
 
import { NamedNode } from "n3";
 
import { getTopGraph } from "../../web/RdfdbSyncedGraph";
 
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 {

			




	
	
	
		
 
  static styles = [

			




	
	
	
		
 
    css`

			




	
	
	
		
 
      :host {

			




	
	
		
 
@@ -23,13 +23,16 @@ export class Light9FadeUi extends LitEle

			




	
	
	
		
 
    `,

			




	
	
	
		
 
  ];

			




	
	
	
		
 
  render() {

			




	
	
	
		
 
    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> `)}

			




	
	
	
		
 
    `;

			




	
	
	
		
 
  }

			




	
	
	
		
 

			




	
	
	
		
 
  graph!: SyncedGraph;

			




	
	
	
		
 

			




	
	
		
 
@@ -49,12 +52,17 @@ export class Light9FadeUi extends LitEle

			




	
	
	
		
 
        g.Uri(`:show/${shortShow}/fadePage1f5`),

			




	
	
	
		
 
        g.Uri(`:show/${shortShow}/fadePage1f6`),

			




	
	
	
		
 
        g.Uri(`:show/${shortShow}/fadePage1f7`),

			




	
	
	
		
 
      ];

			




	
	
	
		
 
    });

			




	
	
	
		
 
  }

			




	
	
	
		
 
  connectedCallback(): void {

			




	
	
	
		
 
    super.connectedCallback();

			




	
	
	
		
 
    meter = new FPSMeter(this.shadowRoot?.querySelector("#fps")!, { graph: 1, left: "auto", right: "0" });

			




	
	
	
		
 
    meter.tick();

			




	
	
	
		
 
  }

			




	
	
	
		
 
}

			




	
	
	
		
 

			




	
	
	
		
 
@customElement("light9-fader")

			




	
	
	
		
 
export class Light9Fader extends LitElement {

			




	
	
	
		
 
  static styles = [

			




	
	
	
		
 
    css`

			




	
	
		
 
@@ -139,13 +147,13 @@ export class Light9Fader extends LitElem

			




	
	
	
		
 
    const v: number = (ev.target as any).valueAsNumber;

			




	
	
	
		
 
    this.value = parseFloat(v.toPrecision(3)); // rewrite pls

			




	
	
	
		
 
    if (this.value == prev) {

			




	
	
	
		
 
      return;

			




	
	
	
		
 
    }

			




	
	
	
		
 
    log(`new value ${this.value}`);

			




	
	
	
		
 

			




	
	
	
		
 
    meter.tick();

			




	
	
	
		
 
    this.graph.patchObject(this.uri, this.graph.Uri(":value"), this.graph.LiteralRoundedFloat(this.value), this.ctx);

			




	
	
	
		
 
  }

			




	
	
	
		
 

			




	
	
	
		
 
  onEffectChange(ev: CustomEvent) {

			




	
	
	
		
 
    const { newValue } = ev.detail;

			




	
	
	
		
 
    this.graph.patchObject(this.uri, this.graph.Uri(":effectClass"), newValue, this.ctx);

			




        

    


    
    

    

        

                

                    light9/fade/web/index.html
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
	
		
 
<!doctype html>

			




	
	
	
		
 
<html>

			




	
	
	
		
 
  <head>

			




	
	
	
		
 
    <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>

			




	
	
	
		
 
    <light9-fade-ui></light9-fade-ui>

			




	
	
	
		
 
  </body>

			




	
	
	
		
 
</html>

			




        

    


    
    

    

        

                

                    package.json
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
@@ -11,19 +11,21 @@

			




	
	
	
		
 
  "dependencies": {

			




	
	
	
		
 
    "@material/mwc-slider": "^0.27.0",

			




	
	
	
		
 
    "@microsoft/fast-components": "^2.30.6",

			




	
	
	
		
 
    "@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",

			




	
	
	
		
 
    "@types/underscore": "^1.11.4",

			




	
	
	
		
 
    "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",

			




	
	
	
		
 
    "parse-prometheus-text-format": "^1.1.1",

			




	
	
	
		
 
    "reconnectingwebsocket": "^1.0.0",

			




	
	
	
		
 
    "sylvester": "^0.0.21",

			




        

    


    
    

    

        

                

                    pnpm-lock.yaml
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
@@ -3,19 +3,21 @@ lockfileVersion: 5.4

			




	
	
	
		
 
specifiers:

			




	
	
	
		
 
  '@material/mwc-slider': ^0.27.0

			




	
	
	
		
 
  '@microsoft/fast-components': ^2.30.6

			




	
	
	
		
 
  '@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

			




	
	
	
		
 
  '@types/underscore': ^1.11.4

			




	
	
	
		
 
  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

			




	
	
	
		
 
  parse-prometheus-text-format: ^1.1.1

			




	
	
	
		
 
  reconnectingwebsocket: ^1.0.0

			




	
	
	
		
 
  sylvester: ^0.0.21

			




	
	
		
 
@@ -27,19 +29,21 @@ specifiers:

			




	
	
	
		
 
dependencies:

			




	
	
	
		
 
  '@material/mwc-slider': 0.27.0

			




	
	
	
		
 
  '@microsoft/fast-components': 2.30.6

			




	
	
	
		
 
  '@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

			




	
	
	
		
 
  '@types/underscore': 1.11.4

			




	
	
	
		
 
  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

			




	
	
	
		
 
  parse-prometheus-text-format: 1.1.1

			




	
	
	
		
 
  reconnectingwebsocket: 1.0.0

			




	
	
	
		
 
  sylvester: 0.0.21

			




	
	
		
 
@@ -598,12 +602,16 @@ packages:

			




	
	
	
		
 
  /@types/debug/4.1.7:

			




	
	
	
		
 
    resolution: {integrity: sha512-9AonUzyTjXXhEOa0DnqpzZi6VHlqKMswga9EXjpXnnqxwLtdvPPtlO8evrI5D9S6asFRCQ6v+wpiUKbw+vKqyg==}

			




	
	
	
		
 
    dependencies:

			




	
	
	
		
 
      '@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

			




	
	
	
		
 

			




	
	
	
		
 
  /@types/ms/0.7.31:

			




	
	
	
		
 
    resolution: {integrity: sha512-iiUgKzV9AuaEkZqkOLDIvlQiL6ltuZd9tGcW3gwpnX8JbuiuhFlEGmmFXEXkN50Cvq7Os88IY2v0dkDqXYWVgA==}

			




	
	
		
 
@@ -971,12 +979,16 @@ packages:

			




	
	
	
		
 
    dev: false

			




	
	
	
		
 

			




	
	
	
		
 
  /exenv-es6/1.1.1:

			




	
	
	
		
 
    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}

			




	
	
	
		
 
    os: [darwin]

			




	
	
	
		
 
    requiresBuild: true

			




	
	
	
		
 
    dev: false

			




        

    



    


    



    



      

      





    
    0 comments (0 inline, 0 general)
    





    


  

  







  


    




    








    
        Server instance: kallithea-749ff669b6-v9g5f-75
    
    
        This site is powered by
            Kallithea 0.7.0,
        which is
        © 2010–2021 by various authors & licensed under GPLv3.
            – Support