Mercurial > code > home > repos > light9

changeset 2248:75dfd7eb1e77

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
clean up. still seems to work
author drewp@bigasterisk.com
date Sat, 27 May 2023 02:05:27 -0700
parents f5e4aa36985d
children e9dc435cc946
files light9/live/Effect.ts light9/live/Light9AttrControl.ts light9/live/Light9DeviceControl.ts light9/live/Light9DeviceSettings.ts
diffstat 4 files changed, 38 insertions(+), 196 deletions(-) [+]
line wrap: on
line diff
--- a/light9/live/Effect.ts	Sat May 27 01:15:29 2023 -0700
+++ b/light9/live/Effect.ts	Sat May 27 02:05:27 2023 -0700
@@ -31,13 +31,11 @@
 // effect settings data; r/w sync with the graph
 export class Effect {
   private settings: Array<{ device: NamedNode; deviceAttr: NamedNode; setting: NamedNode; value: ControlValue }> = [];
-  private ctxForEffect: NamedNode
-  settingsChanged:SubEvent<void>=new SubEvent()
+  private ctxForEffect: NamedNode;
+  settingsChanged: SubEvent<void> = new SubEvent();
   constructor(
     public graph: SyncedGraph,
-    public uri: NamedNode,
-    // called if the graph changes our values and not when the caller uses edit()
-    // private onValuesChanged: (values: void) => void
+    public uri: NamedNode // called if the graph changes our values and not when the caller uses edit()
   ) {
     this.ctxForEffect = this.graph.Uri(this.uri.value.replace("light9.bigasterisk.com/effect", `light9.bigasterisk.com/show/${shortShow}/effect`));
     graph.runHandler(this.rebuildSettingsFromGraph.bind(this), `effect sync ${uri.value}`);
@@ -65,15 +63,13 @@
       //   return;
     }
 
-    log("syncFromGraph", this.uri);
+    // log("syncFromGraph", this.uri);
 
     // this repeats work- it gathers all settings when really some values changed (and we might even know about them). maybe push the value-fetching into a secnod phase of the run, and have the 1st phase drop out early
     const newSettings = [];
 
-    const seenDevAttrPairs: Set<string> = new Set();
-
     for (let setting of Array.from(this.graph.objects(this.uri, U(":setting")))) {
-        log(`  setting ${setting.value}`);
+      // log(`  setting ${setting.value}`);
       if (!isUri(setting)) throw new Error();
       let value: ControlValue;
       const device = this.graph.uriValue(setting, U(":device"));
@@ -96,10 +92,9 @@
 
       newSettings.push({ device, deviceAttr, setting, value });
     }
-    log(newSettings)
     this.settings = newSettings;
     log(`rebuild to ${this.settings.length}`);
-    this.settingsChanged.emit()
+    this.settingsChanged.emit(); // maybe one emitter per dev+attr?
     // this.onValuesChanged();
   }
 
@@ -122,7 +117,7 @@
         if (existingSetting !== null) {
           // this is corrupt. There was only supposed to be one setting per (dev,attr) pair. But we can fix it because we're going to update existingSetting to the user's requested value.
           log(`${this.uri.value} had two settings for ${device.value} - ${deviceAttr.value} - deleting ${s.setting}`);
-          patchUpdate(result,  this._removeEffectSetting(s.setting));
+          patchUpdate(result, this._removeEffectSetting(s.setting));
         }
         existingSetting = s.setting;
       }
--- a/light9/live/Light9AttrControl.ts	Sat May 27 01:15:29 2023 -0700
+++ b/light9/live/Light9AttrControl.ts	Sat May 27 02:05:27 2023 -0700
@@ -3,15 +3,13 @@
 import { customElement, property, state } from "lit/decorators.js";
 import { Literal, NamedNode } from "n3";
 import { SubEvent } from "sub-events";
+import { getTopGraph } from "../web/RdfdbSyncedGraph";
 import { SyncedGraph } from "../web/SyncedGraph";
 import { ControlValue, Effect } from "./Effect";
-import { GraphToControls } from "./GraphToControls";
 import { DeviceAttrRow } from "./Light9DeviceControl";
-import { Choice } from "./Light9Listbox";
-import { getTopGraph } from "../web/RdfdbSyncedGraph";
 export { Slider } from "@material/mwc-slider";
 export { Light9ColorPicker } from "../web/light9-color-picker";
-
+export { Light9Listbox } from "./Light9Listbox";
 const log = debug("settings.dev.attr");
 
 type DataTypeNames = "scalar" | "color" | "choice";
@@ -32,7 +30,6 @@
         margin: 0 3px;
       }
       :host {
-        border: 2px solid white;
       }
       mwc-slider {
         width: 250px;
@@ -42,70 +39,46 @@
 
   @property() deviceAttrRow: DeviceAttrRow | null = null;
   @state() dataType: DataTypeNames = "scalar";
-
   @property() effect: Effect | null = null;
-  // we'll connect to this and receive graphValueChanged and send uiValueChanged
-  // @property() graphToControls!: GraphToControls;
-
   @property() enableChange: boolean = false;
   @property() value: ControlValue | null = null; // e.g. color string
 
-  // slider mode
-  // @property() sliderValue: number = 0;
-
-  // color mode
-
-  // choice mode
-  // @property() pickedChoice: Choice | null = null;
-  // @property() choiceValue: Choice | null = null;
-
-  valueChanged: SubEvent<Literal> = new SubEvent();
-
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
       if (this.deviceAttrRow === null) throw new Error();
-      // this.graph.runHandler(this.graphReads.bind(this), `${this.deviceAttrRow.device} ${this.deviceAttrRow.uri} reads`);
     });
   }
 
   connectedCallback(): void {
     super.connectedCallback();
+    setTimeout(() => {
+      // only needed once per page layout
+      this.shadowRoot?.querySelector("mwc-slider")?.layout(/*skipUpdateUI=*/ false);
+    }, 1);
   }
 
   render() {
     if (this.deviceAttrRow === null) throw new Error();
-    const dbg = html` live-control ${this.dataType}  ]`;
     if (this.dataType == "scalar") {
       const v = this.value || 0;
-      return html`${dbg} <mwc-slider .value=${v} step=${1 / 255} min="0" max="1" @input=${this.onSliderInput}></mwc-slider> `;
+      return html`<mwc-slider .value=${v} step=${1 / 255} min="0" max="1" @input=${this.onValueInput}></mwc-slider> `;
     } else if ((this.dataType = "color")) {
-      const v = this.value || '#000'
+      const v = this.value || "#000";
       return html`
-        ${dbg}
         <div id="colorControls">
-          <button on-click="goBlack">0.0</button>
-          <light9-color-picker .color=${v} @input=${this.onColorInput}></light9-color-picker>
+          <button @click=${this.goBlack}>0.0</button>
+          <light9-color-picker .color=${v} @input=${this.onValueInput}></light9-color-picker>
         </div>
       `;
     } else if (this.dataType == "choice") {
-      return html`${dbg} <light9-listbox .choices=${this.deviceAttrRow.choices} .value=${this.choiceValue}> </light9-listbox> `;
+      return html`<light9-listbox .choices=${this.deviceAttrRow.choices} .value=${this.value}> </light9-listbox> `;
     }
   }
 
-  // graphReads() {
-  //   if (this.deviceAttrRow === null) throw new Error();
-  //   const U = this.graph.U();
-  //   this.effect?.currentValue(this.deviceAttrRow.device, this.deviceAttrRow.uri);
-  // }
-
   updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
-    // if (changedProperties.has("graphToControls")) {
-    //   // this.graphToControls.register(this.device, this.deviceAttrRow.uri, this.onGraphValueChanged.bind(this));
-    //   this.enableChange = true;
-    // }
 
     if (changedProperties.has("deviceAttrRow")) {
       this.onDeviceAttrRowProperty();
@@ -122,8 +95,8 @@
     if (this.deviceAttrRow === null) throw new Error();
     if (this.effect !== null && this.graph !== undefined) {
       const p = this.effect.edit(this.deviceAttrRow.device, this.deviceAttrRow.uri, this.value);
-      log("patch", p, "to", this.graph);
       if (p.adds.length || p.dels.length) {
+        log("Effect told us to graph.patch", p, "to", this.graph);
         this.graph.applyAndSendPatch(p);
       }
     }
@@ -139,12 +112,11 @@
   }
 
   private effectSettingsChanged() {
-    // anything in the settings graph is new
-    log("i check the effect current value");
+    // something in the settings graph is new
     if (this.deviceAttrRow === null) throw new Error();
     if (this.effect === null) throw new Error();
-    log("graph->ui on ", this.deviceAttrRow.device, this.deviceAttrRow.uri);
-    const v=this.effect.currentValue(this.deviceAttrRow.device, this.deviceAttrRow.uri);
+    // log("graph->ui on ", this.deviceAttrRow.device, this.deviceAttrRow.uri);
+    const v = this.effect.currentValue(this.deviceAttrRow.device, this.deviceAttrRow.uri);
     this.onGraphValueChanged(v);
   }
 
@@ -160,7 +132,7 @@
     }
   }
 
-  onSliderInput(ev: CustomEvent) {
+  onValueInput(ev: CustomEvent) {
     if (ev.detail === undefined) {
       // not sure what this is, but it seems to be followed by good events
       return;
@@ -170,50 +142,19 @@
     // this.graphToControls.controlChanged(this.device, this.deviceAttrRow.uri, ev.detail.value);
   }
 
-onColorInput(ev: CustomEvent) {
-  this.value = ev.detail.value;
-}
-
   onGraphValueChanged(v: ControlValue | null) {
     if (this.deviceAttrRow === null) throw new Error();
-    log("change: control must display", v, "for", this.deviceAttrRow.device.value, this.deviceAttrRow.uri.value);
+    // log("change: control must display", v, "for", this.deviceAttrRow.device.value, this.deviceAttrRow.uri.value);
     // this.enableChange = false;
     if (this.dataType == "scalar") {
       if (v !== null) {
-        setTimeout(() => {
-          // only needed once per page layout
-          this.shadowRoot?.querySelector("mwc-slider")?.layout(/*skipUpdateUI=*/ false);
-        }, 1);
         this.value = v;
       } else {
-         this.value = 0;
+        this.value = 0;
       }
     } else if (this.dataType == "color") {
-      log('graph sets coolor', v)
-      this.value=v;
+      this.value = v;
     }
-    // if (v === null) {
-    //   this.clear();
-    // } else {
-    //   this.value = v;
-    // }
-    // if (this.deviceAttrRow.useChoice) {
-    //   this.choiceValue = v === null ? v : v.value;
-    // }
-    // this.enableChange = true;
-  }
-
-  graphToColor(v: ControlValue | null) {
-    this.value = v === null ? "#000" : v;
-    return;
-    // const cp = this.shadowRoot?.querySelector("light9-color-picker") as Light9ColorPicker | null;
-    // if (cp) {
-    //   if (typeof v != "string") throw new Error("type v is " + typeof v);
-    //   if (v === null) {
-    //     v = "#000";
-    //   }
-    //   cp.setColor(v as string);
-    // }
   }
 
   goBlack() {
@@ -221,21 +162,14 @@
   }
 
   onChoice(value: any) {
-    // if (this.graphToControls == null || !this.enableChange) {
-    //   return;
-    // }
     // if (value != null) {
     //   value = this.graph.Uri(value);
     // } else {
     //   value = null;
     // }
-    // this.graphToControls.controlChanged(this.device, this.deviceAttrRow.uri, value);
   }
 
   onChange(value: any) {
-    // if (this.graphToControls == null || !this.enableChange) {
-    //   return;
-    // }
     // if (typeof value === "number" && isNaN(value)) {
     //   return;
     // } // let onChoice do it
@@ -243,18 +177,5 @@
     // if (value === undefined) {
     //   value = null;
     // }
-    // this.graphToControls.controlChanged(this.device, this.deviceAttrRow.uri, value);
   }
-
-  // clear() {
-  //   this.pickedChoice = null;
-  //   this.sliderWriteValue = 0;
-  //   if (this.deviceAttrRow.useColor) {
-  //     return (this.value = "#000000");
-  //   } else if (this.deviceAttrRow.useChoice) {
-  //     return (this.value = this.pickedChoice = null);
-  //   } else {
-  //     return (this.value = this.sliderValue = 0);
-  //   }
-  // }
 }
--- a/light9/live/Light9DeviceControl.ts	Sat May 27 01:15:29 2023 -0700
+++ b/light9/live/Light9DeviceControl.ts	Sat May 27 02:05:27 2023 -0700
@@ -6,7 +6,6 @@
 import { Patch, patchContainsPreds } from "../web/patch";
 import { getTopGraph } from "../web/RdfdbSyncedGraph";
 import { SyncedGraph } from "../web/SyncedGraph";
-import { GraphToControls } from "./GraphToControls";
 import { Choice } from "./Light9Listbox";
 import { Light9AttrControl } from "./Light9AttrControl";
 import { Effect } from "./Effect";
@@ -19,13 +18,9 @@
   device: NamedNode;
   attrClasses: string; // the css kind
   dataType: NamedNode;
-  showColorPicker: boolean;
-  useColor: boolean;
-  useChoice: boolean;
   choices: Choice[];
-  choiceSize: number;
-  useSlider: boolean;
-  max: number;
+  // choiceSize: number;
+  // max: number;
 }
 
 // Widgets for one device with multiple Light9LiveControl rows for the attr(s).
@@ -83,7 +78,7 @@
   render() {
     return html`
       <div class="device ${this.devClasses}">
-        <h2 style="${this._bgStyle(this.deviceClass)}" xon-click="onClick">
+        <h2 style="${this._bgStyle(this.deviceClass)}" @click=${this.onClick}>
           <resource-display id="mainLabel" .uri="${this.uri}"></resource-display>
           a <resource-display minor .uri="${this.deviceClass}"></resource-display>
         </h2>
@@ -96,7 +91,6 @@
                 <resource-display minor .uri=${dattr.uri}></resource-display>
               </span>
               <light9-attr-control .deviceAttrRow=${dattr} .effect=${this.effect}>
-                .graphToControls={this.graphToControls}
               </light9-attr-control>
             </div>
           `
@@ -107,7 +101,6 @@
 
   @property() uri!: NamedNode;
   @property() effect!: Effect;
-  // @property() graphToControls!: GraphToControls;
 
   @property() devClasses: string = ""; // the css kind
   @property() deviceAttrs: DeviceAttrRow[] = [];
@@ -145,7 +138,6 @@
     } else {
       this.selectedAttrs.delete(devAttr);
     }
-    // this.syncDeviceAttrsFromGraph();
   }
 
   syncDeviceAttrsFromGraph(patch?: Patch) {
@@ -174,19 +166,12 @@
       uri: devAttr,
       device: this.uri,
       dataType,
-      showColorPicker: dataType.equals(U(":color")),
       attrClasses: this.selectedAttrs.has(devAttr) ? "selected" : "",
-      useColor: false,
-      useChoice: false,
       choices: [] as Choice[],
       choiceSize: 0,
-      useSlider: false,
       max: 1,
     };
-    if (dataType.equals(U(":color"))) {
-      daRow.useColor = true;
-    } else if (dataType.equals(U(":choice"))) {
-      daRow.useChoice = true;
+     if (dataType.equals(U(":choice"))) {
       const choiceUris = this.graph.sortedUris(this.graph.objects(devAttr, U(":choice")));
       daRow.choices = (() => {
         const result = [];
@@ -197,7 +182,6 @@
       })();
       daRow.choiceSize = Math.min(choiceUris.length + 1, 10);
     } else {
-      daRow.useSlider = true;
       daRow.max = 1;
       if (dataType.equals(U(":angle"))) {
         // varies
--- a/light9/live/Light9DeviceSettings.ts	Sat May 27 01:15:29 2023 -0700
+++ b/light9/live/Light9DeviceSettings.ts	Sat May 27 02:05:27 2023 -0700
@@ -3,10 +3,9 @@
 import { customElement, property } from "lit/decorators.js";
 import { NamedNode } from "n3";
 import { sortBy, uniq } from "underscore";
-import { Patch, patchContainsPreds } from "../web/patch";
+import { Patch } from "../web/patch";
 import { getTopGraph } from "../web/RdfdbSyncedGraph";
 import { SyncedGraph } from "../web/SyncedGraph";
-import { GraphToControls } from "./GraphToControls";
 import { Effect } from "./Effect";
 export { EditChoice } from "../web/EditChoice";
 export { Light9DeviceControl as Light9LiveDeviceControl } from "./Light9DeviceControl";
@@ -32,10 +31,11 @@
         overflow-y: auto;
       }
 
-      light9-live-device-control > div {
+      light9-device-control > div {
         break-inside: avoid-column;
       }
-      light9-live-device-control {
+      light9-device-control {
+        vertical-align: top;
       }
     `,
   ];
@@ -65,10 +65,7 @@
   }
 
   devices: Array<NamedNode> = [];
-  // uri of the effect being edited, or null. This is the
-  // master value; GraphToControls follows.
   @property() currentEffect: Effect | null = null;
-  // graphToControls!: GraphToControls;
   okToWriteUrl: boolean = false;
 
   constructor() {
@@ -77,11 +74,10 @@
     getTopGraph().then((g) => {
       this.graph = g;
       this.graph.runHandler(this.findDevices.bind(this), "findDevices");
-      // this.graphToControls = new GraphToControls(this.graph);
-      // this.graph.runHandler(this.update.bind(this), "Light9LiveControls update");
       this.setEffectFromUrl();
     });
   }
+
   onEffectChoice2(ev: CustomEvent) {
     const uri = ev.detail.newValue as NamedNode;
     if (uri === null) {
@@ -90,17 +86,18 @@
       this.currentEffect = new Effect(this.graph, uri);
     }
   }
+
   updated(changedProperties: PropertyValues<this>) {
     log("ctls udpated", changedProperties);
     if (changedProperties.has("currentEffect")) {
       log(`effectChoice to ${this.currentEffect?.uri?.value}`);
-      this.onEffectChoice();
+      this.writeToUrl(this.currentEffect?.uri);
     }
     // this.graphToControls?.debugDump();
   }
 
   // Note that this doesn't fetch setting values, so it only should get rerun
-  // upon (rarer) changes to the devices etc.
+  // upon (rarer) changes to the devices etc. todo: make that be true
   findDevices(patch?: Patch) {
     const U = this.graph.U();
     // if (patch && !patchContainsPreds(patch, [U("rdf:type")])) {
@@ -112,7 +109,6 @@
     log(`found ${classes.length} device classes`);
     uniq(sortBy(classes, "value"), true).forEach((dc) => {
       sortBy(this.graph.subjects(U("rdf:type"), dc), "value").forEach((dev) => {
-        log(`found dev ${dev.value}`);
         this.devices.push(dev as NamedNode);
       });
     });
@@ -124,7 +120,6 @@
     // the url when the page loads.
     const effect = new URL(window.location.href).searchParams.get("effect");
     if (effect != null) {
-      log(`found effect in url ${effect}`);
       this.currentEffect = new Effect(this.graph, this.graph.Uri(effect));
     }
     this.okToWriteUrl = true;
@@ -148,61 +143,8 @@
     // this.effectChoice = this.graphToControls.newEffect();
   }
 
-  onEffectChoice() {
-    const U = (x: any) => this.graph.Uri(x);
-    // if (this.effectChoice == null) {
-    //   // unlink
-    //   log("onEffectChoice unlink");
-    //   if (this.graphToControls != null) {
-    //     this.graphToControls.setEffect(null);
-    //   }
-    // } else {
-    //   if (this.graphToControls != null) {
-    //     this.graphToControls.setEffect(this.effectChoice);
-    //   } else {
-    //     throw new Error("graphToControls not set");
-    //   }
-    // }
-    this.writeToUrl(this.currentEffect?.uri);
-  }
-
   clearAll() {
     // clears the effect!
     return; //this.graphToControls.emptyEffect();
   }
-
-  // configureFromGraph() {
-  //   const U = (x: string) => this.graph.Uri(x);
-
-  //   const newDevs: NamedNode[] = [];
-  //   for (let dc of Array.from(this.graph.sortedUris(this.graph.subjects(U("rdf:type"), U(":DeviceClass"))))) {
-  //     for (let dev of Array.from(this.graph.sortedUris(this.graph.subjects(U("rdf:type"), dc)))) {
-  //       if (this.graph.contains(dev, U(":hideInLiveUi"), null)) {
-  //         continue;
-  //       }
-  //       if (newDevs.length == 0) newDevs.push(dev);
-  //     }
-  //   }
-  //   log("is this called?");
-  //   log(`controls update now has ${newDevs.length} devices`);
-  //   this.devices = newDevs;
-  //   this.requestUpdate();
-
-  //   return;
-
-  //   // Tried css columns- big slowdown from relayout as I'm scrolling.
-  //   // Tried isotope- seems to only scroll to the right.
-  //   // Tried columnize- fails in jquery maybe from weird elements.
-
-  //   // not sure how to get this run after the children are created
-  //   return setTimeout(
-  //     () =>
-  //       $("#deviceControls").isotope({
-  //         // fitColumns would be nice, but it doesn't scroll vertically
-  //         layoutMode: "masonry",
-  //         containerStyle: null,
-  //       }),
-  //     2000
-  //   );
-  // }
 }