light9 Changeset - 46a8f5a8a4dd

Changeset - 46a8f5a8a4dd

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

drewp@bigasterisk.com - 3 years ago 2022-05-24 08:00:40
drewp@bigasterisk.com

fix collector display to show real values from py

2 files changed with 56 insertions and 21 deletions:

light9/collector/web/Light9CollectorUi.ts

light9/web/collector/Light9CollectorDevice.ts

0 comments (0 inline, 0 general)

light9/collector/web/Light9CollectorUi.ts

➞

Show inline comments

 import debug from "debug";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { NamedNode } from "n3";
 import ReconnectingWebSocket from "reconnectingwebsocket";
 import { sortBy, uniq } from "underscore";
 import { Light9CollectorDevice } from "../../web/collector/Light9CollectorDevice";
 import { Patch } from "../../web/patch";
 import { getTopGraph } from "../../web/RdfdbSyncedGraph";
 import { SyncedGraph } from "../../web/SyncedGraph";
 export { Light9CollectorDevice } from "../../web/collector/Light9CollectorDevice";
 export { RdfdbSyncedGraph } from "../../web/RdfdbSyncedGraph";
 export { Light9CollectorDevice };
 debug.enable("*");
 const log = debug("collector");
 @customElement("light9-collector-ui")
 export class Light9CollectorUi extends LitElement {
   graph!: SyncedGraph;
   render() {
     return html`<rdfdb-synced-graph></rdfdb-synced-graph>
       <h1>Collector <a href="metrics">[metrics]</a></h1>
       <h2>Devices</h2>
-      <div style="column-width: 11em">${this.devices.map((d) => html`<light9-collector-device uri="${d.value}"></light9-collector-device>`)}</div> `;
+      <div style="column-width: 11em">${this.devices.map((d) => html`<light9-collector-device .uri=${d}></light9-collector-device>`)}</div> `;
+  }
   @property() devices: NamedNode[] = [];
   constructor() {
     super();
     getTopGraph().then((g) => {
       this.graph = g;
       this.graph.runHandler(this.findDevices.bind(this), "findDevices");
     });
     const ws = new ReconnectingWebSocket(location.href.replace("http", "ws") + "api/updates");
     ws.addEventListener("message", (ev: any) => {
       const outputAttrsSet = JSON.parse(ev.data).outputAttrsSet;
       if (outputAttrsSet) {
         this.updateDev(outputAttrsSet.dev, outputAttrsSet.attrs);
+      }
     });
+  }
   findDevices(patch?: Patch) {
     const U = this.graph.U();
     this.devices = [];
     this.clearDeviceChildElementCache();
     let classes = this.graph.subjects(U("rdf:type"), U(":DeviceClass"));
     uniq(sortBy(classes, "value"), true).forEach((dc) => {
       sortBy(this.graph.subjects(U("rdf:type"), dc), "value").forEach((dev) => {
         this.devices.push(dev as NamedNode);
       });
     });
+  }
   deviceElements: Map<string, Light9CollectorDevice> = new Map();
   clearDeviceChildElementCache() {
     this.deviceElements = new Map();
+  }
   findDeviceChildElement(uri: string): Light9CollectorDevice | undefined {
     const known = this.deviceElements.get(uri);
     if (known) {
       return known;
+    }
     for (const el of this.shadowRoot!.querySelectorAll("light9-collector-device")) {
       const eld = el as Light9CollectorDevice;
       if (eld.uri.value == uri) {
         this.deviceElements.set(uri, eld);
         return eld;
+      }
+    }
     return undefined;
+  }
   updateDev(uri: string, attrs: { attr: string; chan: string; val: string; valClass: string }[]) {
     const el = this.findDeviceChildElement(uri);
     if (!el) {
       // unresolved race: updates come in before we have device elements to display them
       setTimeout(() => this.updateDev(uri, attrs), 300);
       return;
+    }
     el.setAttrs(attrs);
+  }
+}

light9/web/collector/Light9CollectorDevice.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";
 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 {
@@ @@ -49,35 +48,28 @@ export class Light9CollectorDevice exten @@
           (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 || ""),
     converter: acceptStringOrUri(),
   })
   uri: NamedNode = new NamedNode("");
   @property() attrs: Array<{ attr: string; valClass: string; val: string; chan: string }> = [];
   constructor() {
     super();
   setAttrs(attrs: any) {
     this.attrs = attrs;
     this.attrs.forEach(function (row: any) {
       row.valClass = row.val == 255 ? "full" : row.val ? "nonzero" : "";
     });
+  }
   //  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" : "";
   //       });
   //     }
   //   });
   // }
+}
 function acceptStringOrUri() {
   return (s: string | null) => new NamedNode(s || "");
+}

0 comments (0 inline, 0 general)