diff --git a/light9/live/Light9AttrControl.ts b/light9/live/Light9AttrControl.ts --- a/light9/live/Light9AttrControl.ts +++ b/light9/live/Light9AttrControl.ts @@ -3,15 +3,13 @@ import { css, html, LitElement, Property 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 @@ export class Light9AttrControl extends L margin: 0 3px; } :host { - border: 2px solid white; } mwc-slider { width: 250px; @@ -42,70 +39,46 @@ export class Light9AttrControl extends L @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 = 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} `; + return html` `; } else if ((this.dataType = "color")) { - const v = this.value || '#000' + const v = this.value || "#000"; return html` - ${dbg}
- - + +
`; } else if (this.dataType == "choice") { - return html`${dbg} `; + return html` `; } } - // 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) { 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 @@ export class Light9AttrControl extends L 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 @@ export class Light9AttrControl extends L } 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 @@ export class Light9AttrControl extends L } } - 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 @@ export class Light9AttrControl extends L // 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 @@ onColorInput(ev: CustomEvent) { } 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 @@ onColorInput(ev: CustomEvent) { // 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); - // } - // } }