light9 Changeset - 81d5b6d97ed3

Changeset - 81d5b6d97ed3

Parent rev.

Child rev.

[Not reviewed]

default

0 1 0

drewp@bigasterisk.com - 20 months ago 2023-06-03 19:09:09
drewp@bigasterisk.com

UI for picking the midi controlled page of faders

1 file changed with 26 insertions and 3 deletions:

light9/fade/Light9FadeUi.ts

0 comments (0 inline, 0 general)

light9/fade/Light9FadeUi.ts

➞

Show inline comments

@@ @@ -26,38 +26,49 @@ export class Light9FadeUi extends LitEle @@
   static styles = [
     css`
       :host {
         display: block;
         user-select: none; /* really this is only desirable during slider drag events */
+      }
       .mappedToHw {
         background: #393945;
+      }
     `,
   ];
   render() {
     return html`
       <rdfdb-synced-graph></rdfdb-synced-graph>
       <h1>Fade</h1>
       ${(this.fadePages?.pages || []).map(this.renderPage)}
+      ${(this.fadePages?.pages || []).map(this.renderPage.bind(this))}
       <div><button @click=${this.addPage}>Add new page</button></div>
     `;
+  }
   private renderPage(page: FadePage): TemplateResult {
     return html`<div>
     const mappedToHw = this.currentHwPage !== undefined && page.uri.equals(this.currentHwPage);
     return html`<div class="${mappedToHw ? "mappedToHw" : ""}">
       <fieldset>
         <legend>Page <resource-display rename .uri=${page.uri}></resource-display></legend>
         <legend>
           Page
           <resource-display rename .uri=${page.uri}></resource-display>
           ${mappedToHw ? html`mapped to hardware sliders` : html`
           <button @click=${(ev: Event) => this.mapThisToHw(page.uri)}>Map this to hw</button>
           `}
         </legend>
         ${page.faders.map((fd) => html` <light9-effect-fader .uri=${fd}></light9-effect-fader> `)}
       </fieldset>
     </div>`;
+  }
   graph!: SyncedGraph;
   ctx: NamedNode = new NamedNode(showRoot + "/fade");
   @property() fadePages?: FadePages;
   @property() currentHwPage?: NamedNode;
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
       this.graph.runHandler(this.compile.bind(this), `faders layout`);
@@ @@ -85,12 +96,24 @@ export class Light9FadeUi extends LitEle @@
       } catch (e) {}
+    }
     fadePages.pages.sort((a, b) => {
       return a.uri.value.localeCompare(b.uri.value);
     });
     this.fadePages = fadePages;
     this.currentHwPage = undefined;
     try {
       const mc = this.graph.uriValue(U(":midiControl"), U(":map"));
       this.currentHwPage = this.graph.uriValue(mc, U(":outputs"));
     } catch (e) {}
+  }
   mapThisToHw(page: NamedNode) {
     const U = this.graph.U();
     log("map to hw", page);
     const mc = this.graph.uriValue(U(":midiControl"), U(":map"));
     this.graph.patchObject(mc, U(":outputs"), page, this.ctx);
+  }
   addPage() {
     const U = this.graph.U();
     const uri = this.graph.nextNumberedResource(showRoot + "/fadePage");
     const adds = [

0 comments (0 inline, 0 general)