--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/collector/Light9CollectorDevice.ts	Mon May 23 23:32:37 2022 -0700
@@ -0,0 +1,87 @@
+import debug from "debug";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { NamedNode } from "n3";
+import { GraphChangedEvent } from "../RdfdbSyncedGraph";
+export {ResourceDisplay} from "../ResourceDisplay"
+debug.enable("*");
+const log = debug("device-el");
+
+@customElement("light9-collector-device")
+export class Light9CollectorDevice extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: block;
+        break-inside: avoid-column;
+        font-size: 80%;
+      }
+      h3 {
+        margin-top: 12px;
+        margin-bottom: 0;
+      }
+      td {
+        white-space: nowrap;
+      }
+
+      td.nonzero {
+        background: #310202;
+        color: #e25757;
+      }
+      td.full {
+        background: #2b0000;
+        color: red;
+        font-weight: bold;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <h3><resource-display .uri=${this.uri}></resource-display></h3>
+      <table class="borders">
+        <tr>
+          <th>out attr</th>
+          <th>value</th>
+          <th>chan</th>
+        </tr>
+        ${this.attrs.map(
+          (item) => html`
+            <tr>
+              <td>${item.attr}</td>
+              <td class=${item.valClass}>${item.val} →</td>
+              <td>${item.chan}</td>
+            </tr>
+          `
+        )}
+      </table>
+    `;
+  }
+  @property({
+    // todo don't rebuild uri; pass it right
+    converter: (s: string | null) => new NamedNode(s || ""),
+  })
+  uri: NamedNode = new NamedNode("");
+  @property() attrs: Array<{ attr: string; valClass: string; val: string; chan: string }> = [];
+
+  constructor() {
+    super();
+    // addGraphChangeListener(this.onGraphChanged.bind(this));
+  }
+  onChanged(ev: GraphChangedEvent) {
+    log("patch from server [5]");
+  }
+  //  observers: [
+  //    "initUpdates(updates)",
+  //  ],
+  // initUpdates(updates) {
+  //   updates.addListener(function (msg) {
+  //     if (msg.outputAttrsSet && msg.outputAttrsSet.dev == this.uri.value) {
+  //       this.set("attrs", msg.outputAttrsSet.attrs);
+  //       this.attrs.forEach(function (row) {
+  //         row.valClass = row.val == 255 ? "full" : row.val ? "nonzero" : "";
+  //       });
+  //     }
+  //   });
+  // }
+}