Mercurial > code > home > repos > light9
annotate light9/fade/Light9FadeUi.ts @ 2354:de1dc8b77ba2
iwyu
| author | drewp@bigasterisk.com |
|---|---|
| date | Sat, 03 Jun 2023 15:47:43 -0700 |
| parents | 72c589cb96d1 |
| children |
| rev | line source |
|---|---|
| 2103 | 1 import debug from "debug"; |
| 2331 | 2 import { css, html, LitElement, TemplateResult } from "lit"; |
| 2329 | 3 import { customElement, property } from "lit/decorators.js"; |
| 2331 | 4 import * as N3 from "n3"; |
| 5 import { NamedNode, Quad } from "n3"; | |
| 6 import { Patch } from "../web/patch"; | |
|
2229
d193689223fb
clean up vitejs warnings for fade. this is now the model vite.config.ts
drewp@bigasterisk.com
parents:
2214
diff
changeset
|
7 import { getTopGraph } from "../web/RdfdbSyncedGraph"; |
| 2331 | 8 import { showRoot } from "../web/show_specific"; |
|
2229
d193689223fb
clean up vitejs warnings for fade. this is now the model vite.config.ts
drewp@bigasterisk.com
parents:
2214
diff
changeset
|
9 import { SyncedGraph } from "../web/SyncedGraph"; |
|
d193689223fb
clean up vitejs warnings for fade. this is now the model vite.config.ts
drewp@bigasterisk.com
parents:
2214
diff
changeset
|
10 export { EditChoice } from "../web/EditChoice"; |
| 2329 | 11 export { Light9EffectFader } from "./Light9EffectFader"; |
| 2354 | 12 export { Light9Fader } from "./Light9Fader"; |
| 2103 | 13 |
| 2350 | 14 debug.enable("*,autodep"); |
| 2103 | 15 const log = debug("fade"); |
| 16 | |
| 2344 | 17 class FaderConfig { |
| 2348 | 18 constructor(public uri: NamedNode, public column: number) { } |
| 2344 | 19 } |
| 20 | |
| 2331 | 21 class FadePage { |
| 2348 | 22 constructor(public uri: NamedNode) { } |
| 2350 | 23 faderConfigs: FaderConfig[] = []; |
| 2331 | 24 } |
| 25 class FadePages { | |
| 26 pages: FadePage[] = []; | |
| 27 } | |
| 28 | |
| 2103 | 29 @customElement("light9-fade-ui") |
| 30 export class Light9FadeUi extends LitElement { | |
| 31 static styles = [ | |
| 32 css` | |
| 33 :host { | |
| 34 display: block; | |
| 2320 | 35 user-select: none; /* really this is only desirable during slider drag events */ |
| 2103 | 36 } |
|
2342
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
37 .mappedToHw { |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
38 background: #393945; |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
39 } |
| 2349 | 40 #gm light9-fader { |
| 41 width: 300px; | |
| 42 } | |
| 2103 | 43 `, |
| 44 ]; | |
| 45 render() { | |
| 46 return html` | |
| 47 <rdfdb-synced-graph></rdfdb-synced-graph> | |
| 48 | |
| 2213 | 49 <h1>Fade</h1> |
| 2349 | 50 <div id="gm"> |
| 51 <light9-fader .value=${this.grandMaster} @change=${this.gmChanged}></light9-fader>grand master | |
| 52 </div> | |
|
2342
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
53 ${(this.fadePages?.pages || []).map(this.renderPage.bind(this))} |
| 2213 | 54 |
| 2331 | 55 <div><button @click=${this.addPage}>Add new page</button></div> |
| 2103 | 56 `; |
| 57 } | |
| 2331 | 58 private renderPage(page: FadePage): TemplateResult { |
|
2342
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
59 const mappedToHw = this.currentHwPage !== undefined && page.uri.equals(this.currentHwPage); |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
60 return html`<div class="${mappedToHw ? "mappedToHw" : ""}"> |
| 2331 | 61 <fieldset> |
|
2342
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
62 <legend> |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
63 Page |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
64 <resource-display rename .uri=${page.uri}></resource-display> |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
65 ${mappedToHw ? html`mapped to hardware sliders` : html` |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
66 <button @click=${(ev: Event) => this.mapThisToHw(page.uri)}>Map this to hw</button> |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
67 `} |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
68 </legend> |
| 2350 | 69 ${page.faderConfigs.map((fd) => html` <light9-effect-fader .uri=${fd.uri}></light9-effect-fader> `)} |
| 2331 | 70 </fieldset> |
| 71 </div>`; | |
| 72 } | |
| 2103 | 73 |
| 74 graph!: SyncedGraph; | |
| 2331 | 75 ctx: NamedNode = new NamedNode(showRoot + "/fade"); |
| 2103 | 76 |
| 2331 | 77 @property() fadePages?: FadePages; |
|
2342
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
78 @property() currentHwPage?: NamedNode; |
| 2349 | 79 @property() grandMaster?: number; |
|
2106
9eb2e7c40765
/fade/ page can now edit values and :Fade :effectClass values in the graph
drewp@bigasterisk.com
parents:
2103
diff
changeset
|
80 |
| 2103 | 81 constructor() { |
| 82 super(); | |
| 83 getTopGraph().then((g) => { | |
| 84 this.graph = g; | |
| 2331 | 85 this.graph.runHandler(this.compile.bind(this), `faders layout`); |
| 2349 | 86 this.graph.runHandler(this.compileGm.bind(this), `faders gm`); |
| 2103 | 87 }); |
| 88 } | |
| 2213 | 89 connectedCallback(): void { |
| 90 super.connectedCallback(); | |
| 91 } | |
| 2103 | 92 |
| 2331 | 93 compile() { |
| 94 const U = this.graph.U(); | |
| 95 this.fadePages = undefined; | |
| 96 const fadePages = new FadePages(); | |
| 97 for (let page of this.graph.subjects(U("rdf:type"), U(":FadePage"))) { | |
| 98 const fp = new FadePage(page as NamedNode); | |
| 99 try { | |
| 100 for (let fader of this.graph.objects(page, U(":fader"))) { | |
| 2344 | 101 const colLit = this.graph.stringValue(fader, U(':column')) |
| 2350 | 102 fp.faderConfigs.push(new FaderConfig(fader as NamedNode, parseFloat(colLit))); |
| 2331 | 103 } |
| 2350 | 104 fp.faderConfigs.sort((a, b) => { |
| 2348 | 105 return a.column - (b.column); |
| 2331 | 106 }); |
| 107 fadePages.pages.push(fp); | |
| 2348 | 108 } catch (e) { } |
| 2331 | 109 } |
| 110 fadePages.pages.sort((a, b) => { | |
| 111 return a.uri.value.localeCompare(b.uri.value); | |
| 112 }); | |
| 113 this.fadePages = fadePages; | |
|
2342
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
114 this.currentHwPage = undefined; |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
115 try { |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
116 const mc = this.graph.uriValue(U(":midiControl"), U(":map")); |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
117 this.currentHwPage = this.graph.uriValue(mc, U(":outputs")); |
| 2348 | 118 } catch (e) { } |
|
2342
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
119 } |
| 2349 | 120 compileGm() { |
| 121 const U = this.graph.U(); | |
| 122 this.grandMaster = undefined | |
| 123 let newVal | |
| 124 try { | |
| 125 | |
| 126 newVal = this.graph.floatValue(U(':grandMaster'), U(':value')) | |
| 127 } catch (e) { | |
| 128 return | |
| 129 } | |
| 130 this.grandMaster = newVal; | |
| 131 | |
| 132 } | |
| 133 gmChanged(ev: CustomEvent) { | |
| 134 const U = this.graph.U(); | |
| 135 const newVal = ev.detail.value | |
| 136 // this.grandMaster = newVal; | |
| 137 this.graph.patchObject(U(':grandMaster'), U(':value'), this.graph.LiteralRoundedFloat(newVal), this.ctx) | |
| 138 | |
| 139 } | |
| 140 | |
|
2342
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
141 |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
142 mapThisToHw(page: NamedNode) { |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
143 const U = this.graph.U(); |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
144 log("map to hw", page); |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
145 const mc = this.graph.uriValue(U(":midiControl"), U(":map")); |
|
81d5b6d97ed3
UI for picking the midi controlled page of faders
drewp@bigasterisk.com
parents:
2331
diff
changeset
|
146 this.graph.patchObject(mc, U(":outputs"), page, this.ctx); |
| 2331 | 147 } |
| 2103 | 148 |
| 2331 | 149 addPage() { |
| 150 const U = this.graph.U(); | |
| 151 const uri = this.graph.nextNumberedResource(showRoot + "/fadePage"); | |
| 152 const adds = [ | |
| 153 // | |
| 154 new Quad(uri, U("rdf:type"), U(":FadePage"), this.ctx), | |
| 155 new Quad(uri, U("rdfs:label"), N3.DataFactory.literal("unnamed"), this.ctx), | |
| 156 ]; | |
| 157 for (let n = 1; n <= 8; n++) { | |
| 158 const f = this.graph.nextNumberedResource(showRoot + "/fader"); | |
| 159 const s = this.graph.nextNumberedResource(showRoot + "/faderset"); | |
| 160 adds.push(new Quad(uri, U(":fader"), f, this.ctx)); | |
| 161 adds.push(new Quad(f, U("rdf:type"), U(":Fader"), this.ctx)); | |
| 162 adds.push(new Quad(f, U(":column"), N3.DataFactory.literal("" + n), this.ctx)); | |
| 163 adds.push(new Quad(f, U(":setting"), s, this.ctx)); | |
| 164 adds.push(new Quad(s, U(":effectAttr"), U(":strength"), this.ctx)); | |
| 165 adds.push(new Quad(s, U(":value"), this.graph.LiteralRoundedFloat(0), this.ctx)); | |
| 166 } | |
| 167 this.graph.applyAndSendPatch(new Patch([], adds)); | |
| 168 } | |
| 169 } |