# HG changeset patch
# User drewp@bigasterisk.com
# Date 2023-06-03 19:09:09
# Node ID 81d5b6d97ed3f1af03dd005d3dfb95ac9d6ffbd2
# Parent  4f610ef6768db8a44074d6e3167ede554f3408af

UI for picking the midi controlled page of faders

diff --git a/light9/fade/Light9FadeUi.ts b/light9/fade/Light9FadeUi.ts
--- a/light9/fade/Light9FadeUi.ts
+++ b/light9/fade/Light9FadeUi.ts
@@ -29,6 +29,9 @@ export class Light9FadeUi extends LitEle
         display: block;
         user-select: none; /* really this is only desirable during slider drag events */
       }
+      .mappedToHw {
+        background: #393945;
+      }
     `,
   ];
   render() {
@@ -37,15 +40,22 @@ export class Light9FadeUi extends LitEle
 
       <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>`;
@@ -55,6 +65,7 @@ export class Light9FadeUi extends LitEle
   ctx: NamedNode = new NamedNode(showRoot + "/fade");
 
   @property() fadePages?: FadePages;
+  @property() currentHwPage?: NamedNode;
 
   constructor() {
     super();
@@ -88,6 +99,18 @@ export class Light9FadeUi extends LitEle
       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() {