light9 Changeset - 9eb2e7c40765

Changeset - 9eb2e7c40765

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

drewp@bigasterisk.com - 3 years ago 2022-06-01 19:21:06
drewp@bigasterisk.com

/fade/ page can now edit values and :Fade :effectClass values in the graph

2 files changed with 42 insertions and 8 deletions:

bin/effectSequencer

light9/fade/web/Light9FadeUi.ts

0 comments (0 inline, 0 general)

bin/effectSequencer

➞

Show inline comments

 #!/bin/sh
 pnpx vite -c light9/effect/sequencer/web/vite.config.ts &
 pdm run uvicorn light9.effect.sequencer.service:app --host 0.0.0.0 --port 8213 --no-access-log
+pdm run uvicorn light9.effect.sequencer.service:app --host 0.0.0.0 --port 8213 --no-access-log --reload
 wait

light9/fade/web/Light9FadeUi.ts

➞

Show inline comments

 import debug from "debug";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { NamedNode } from "n3";
 import { getTopGraph } from "../../web/RdfdbSyncedGraph";
 import { SyncedGraph } from "../../web/SyncedGraph";
+export { EditChoice } from "../../web/EditChoice";
 import { provideFASTDesignSystem, fastSlider, fastSliderLabel } from "@microsoft/fast-components";
 provideFASTDesignSystem().register(fastSlider(), fastSliderLabel());
 debug.enable("*");
 const log = debug("fade");
 @customElement("light9-fade-ui")
 export class Light9FadeUi extends LitElement {
   static styles = [
     css`
       :host {
         display: block;
+      }
     `,
   ];
   render() {
     return html`
       <rdfdb-synced-graph></rdfdb-synced-graph>
       <h1>Fade <a href="metrics">[metrics]</a></h1>
       <light9-fader></light9-fader>
       <light9-fader></light9-fader>
       ${this.faders.map((fd) => html` <light9-fader .uri=${fd}></light9-fader> `)}
     `;
+  }
   graph!: SyncedGraph;
   @property() faders: NamedNode[] = [];
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
       this.faders = [
         g.Uri(":show/dance2019/fadePage1f0"),
         g.Uri(":show/dance2019/fadePage1f1"),
         g.Uri(":show/dance2019/fadePage1f2"),
         g.Uri(":show/dance2019/fadePage1f3"),
         g.Uri(":show/dance2019/fadePage1f4"),
         g.Uri(":show/dance2019/fadePage1f5"),
         g.Uri(":show/dance2019/fadePage1f6"),
         g.Uri(":show/dance2019/fadePage1f7"),
       ];
     });
+  }
+}
 @customElement("light9-fader")
 export class Light9Fader extends LitElement {
   static styles = [
     css`
       :host {
         display: inline-block;
+      }
       fast-slider {
@@ @@ -53,36 +64,59 @@ export class Light9Fader extends LitElem @@
+      }
       fast-slider > .track {
         background: #e3bbc0;
         box-shadow: 0 0 8px;
+      }
       fast-slider {
         --accent-foreground-rest: #0a0a0c;
+      }
     `,
   ];
   render() {
     return html`
       <fast-slider orientation="vertical" value=${this.value} step=${1 / 255} min="1" max="0" @change=${this.onSliderInput}>
+      <fast-slider orientation="vertical" .value=${this.value} step=${1 / 255} min="1" max="0" @change=${this.onSliderInput}>
         <fast-slider-label label="0"></fast-slider-label>
         <fast-slider-label label="1.0"></fast-slider-label>
       </fast-slider>
       <div>${this.value.toPrecision(3)}</div>
       <div>curtain</div>
       <div>Slider 1</div>
       <div>eff: <edit-choice .uri=${this.effect} @edited=${this.onEffectChange}></edit-choice></div>
       <div>attr: <edit-choice .uri=${this.effectAttr}></edit-choice></div>
       <div>&lt;=&gt; Slider ${this.column}</div>
     `;
+  }
   graph!: SyncedGraph;
   ctx: NamedNode = new NamedNode("http://light9.bigasterisk.com/show/dance2019/fade");
   @property() uri!: NamedNode;
   @property() column!: string;
   @property() effect: NamedNode | null = null;
   @property() effectAttr: NamedNode | null = null;
   @property() value: number = 0.111;
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
       this.graph.runHandler(this.configure.bind(this), `config ${this.uri.value}`);
       this.graph.runHandler(this.valueSync.bind(this), `valueSync ${this.uri.value}`);
     });
+  }
   configure() {
     const U = this.graph.U();
     this.column = this.graph.stringValue(this.uri, U(":column"));
     this.effect = this.graph.uriValue(this.uri, U(":effectClass"));
     this.effectAttr = this.graph.uriValue(this.uri, U(":effectAttr"));
+  }
 valueSync() {
     this.value = this.graph.floatValue(this.uri, this.graph.Uri(":value"));
+}
   onSliderInput(ev: CustomEvent) {
     this.value = (ev.target as any).valueAsNumber;
     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);
+  }
+}

0 comments (0 inline, 0 general)