Mercurial > code > home > repos > light9

changeset 2229:d193689223fb

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
clean up vitejs warnings for fade. this is now the model vite.config.ts
author drewp@bigasterisk.com
date Wed, 24 May 2023 11:27:54 -0700
parents f45814654fdb
children eeb2b3928715
files bin/fade light9/fade/Light9FadeUi.ts light9/fade/index.html light9/fade/vite.config.ts light9/fade/web/Light9FadeUi.ts light9/fade/web/index.html light9/fade/web/vite.config.ts
diffstat 7 files changed, 195 insertions(+), 193 deletions(-) [+]
line wrap: on
line diff
--- a/bin/fade	Tue May 23 23:56:28 2023 -0700
+++ b/bin/fade	Wed May 24 11:27:54 2023 -0700
@@ -1,4 +1,4 @@
 #!/bin/sh
-pnpm exec vite -c light9/fade/web/vite.config.ts &
-wait
+exec pnpm exec vite -c light9/fade/vite.config.ts
 
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/fade/Light9FadeUi.ts	Wed May 24 11:27:54 2023 -0700
@@ -0,0 +1,158 @@
+import { fastSlider, fastSliderLabel, provideFASTDesignSystem } from "@microsoft/fast-components";
+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";
+import { shortShow, showRoot } from "../web/show_specific";
+export { EditChoice } from "../web/EditChoice";
+provideFASTDesignSystem().register(fastSlider(), fastSliderLabel());
+
+debug.enable("*");
+const log = debug("fade");
+let meter: FPSMeter;
+
+@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</h1>
+
+      <div id="fps"></div>
+
+      ${this.faders.map((fd) => html` <light9-fader .uri=${fd}></light9-fader> `)}
+    `;
+  }
+
+  graph!: SyncedGraph;
+
+  @property() faders: NamedNode[] = [];
+
+  constructor() {
+    super();
+    getTopGraph().then((g) => {
+      this.graph = g;
+      // todo: start with a page, then find the faders on that page
+      this.faders = [
+        g.Uri(`:show/${shortShow}/fadePage1f0`),
+        g.Uri(`:show/${shortShow}/fadePage1f1`),
+        g.Uri(`:show/${shortShow}/fadePage1f2`),
+        g.Uri(`:show/${shortShow}/fadePage1f3`),
+        g.Uri(`:show/${shortShow}/fadePage1f4`),
+        g.Uri(`:show/${shortShow}/fadePage1f5`),
+        g.Uri(`:show/${shortShow}/fadePage1f6`),
+        g.Uri(`:show/${shortShow}/fadePage1f7`),
+      ];
+    });
+  }
+  connectedCallback(): void {
+    super.connectedCallback();
+    meter = new FPSMeter(this.shadowRoot?.querySelector("#fps")!, { graph: 1, left: "auto", right: "0" });
+    meter.tick();
+  }
+}
+
+@customElement("light9-fader")
+export class Light9Fader extends LitElement {
+  static styles = [
+    css`
+      :host {
+        display: inline-block;
+        border: 2px gray outset;
+        background: #272727;
+      }
+      fast-slider {
+        height: 256px;
+      }
+      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-label label="0"></fast-slider-label>
+        <fast-slider-label label="1.0"></fast-slider-label>
+      </fast-slider>
+      <div>${this.value.toPrecision(3)}</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(showRoot + "/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.compile.bind(this), `config ${this.uri.value}`);
+      this.graph.runHandler(this.compileValue.bind(this), `valueSync ${this.uri.value}`);
+    });
+  }
+
+  private compile() {
+    const U = this.graph.U();
+    if (!this.graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
+      // not loaded yet, perhaps
+      this.column = "unset";
+      this.effect = null;
+      this.effectAttr = null;
+      return;
+    }
+    this.column = this.graph.stringValue(this.uri, U(":column"));
+    this.effect = this.graph.uriValue(this.uri, U(":effect"));
+    const s = this.graph.uriValue(this.uri, U(":setting"));
+    this.effectAttr = this.graph.uriValue(s, U(":effectAttr"));
+  }
+
+  private compileValue() {
+    const U = this.graph.U();
+    if (!this.graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
+      // not loaded yet
+      // console.timeEnd(`valueSync ${this.uri.value}`)
+      return;
+    }
+
+    this.value = this.graph.floatValue(this.uri, this.graph.Uri(":value"));
+  }
+
+  onSliderInput(ev: CustomEvent) {
+    const prev = this.value;
+    const v: number = (ev.target as any).valueAsNumber;
+    this.value = parseFloat(v.toPrecision(3)); // rewrite pls
+    if (this.value == prev) {
+      return;
+    }
+    meter.tick();
+    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(":effect"), newValue, this.ctx);
+  }
+}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/fade/index.html	Wed May 24 11:27:54 2023 -0700
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <head>
+    <title>fade</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../style.css">    
+    <script src="node_modules/fpsmeter/dist/fpsmeter.min.js"></script>
+    <script type="module" src="./Light9FadeUi"></script>
+  </head>
+  <body>
+    <light9-fade-ui></light9-fade-ui>
+  </body>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/fade/vite.config.ts	Wed May 24 11:27:54 2023 -0700
@@ -0,0 +1,22 @@
+import { defineConfig } from "vite";
+
+const servicePort = 8219;
+export default defineConfig({
+  base: "/fade/",
+  root: "./light9/fade/",
+  publicDir: "../..",
+
+  server: {
+    host: "0.0.0.0",
+    base: "/fade/",
+    strictPort: true,
+    port: servicePort + 100,
+    hmr: {
+      port: servicePort + 200,
+    },
+  },
+  clearScreen: false,
+  define: {
+    global: {},
+  },
+});
--- a/light9/fade/web/Light9FadeUi.ts	Tue May 23 23:56:28 2023 -0700
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,158 +0,0 @@
-import { fastSlider, fastSliderLabel, provideFASTDesignSystem } from "@microsoft/fast-components";
-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";
-import { shortShow, showRoot } from "../../web/show_specific";
-export { EditChoice } from "../../web/EditChoice";
-provideFASTDesignSystem().register(fastSlider(), fastSliderLabel());
-
-debug.enable("*");
-const log = debug("fade");
-let meter: FPSMeter;
-
-@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</h1>
-
-      <div id="fps"></div>
-
-      ${this.faders.map((fd) => html` <light9-fader .uri=${fd}></light9-fader> `)}
-    `;
-  }
-
-  graph!: SyncedGraph;
-
-  @property() faders: NamedNode[] = [];
-
-  constructor() {
-    super();
-    getTopGraph().then((g) => {
-      this.graph = g;
-      // todo: start with a page, then find the faders on that page
-      this.faders = [
-        g.Uri(`:show/${shortShow}/fadePage1f0`),
-        g.Uri(`:show/${shortShow}/fadePage1f1`),
-        g.Uri(`:show/${shortShow}/fadePage1f2`),
-        g.Uri(`:show/${shortShow}/fadePage1f3`),
-        g.Uri(`:show/${shortShow}/fadePage1f4`),
-        g.Uri(`:show/${shortShow}/fadePage1f5`),
-        g.Uri(`:show/${shortShow}/fadePage1f6`),
-        g.Uri(`:show/${shortShow}/fadePage1f7`),
-      ];
-    });
-  }
-  connectedCallback(): void {
-    super.connectedCallback();
-    meter = new FPSMeter(this.shadowRoot?.querySelector("#fps")!, { graph: 1, left: "auto", right: "0" });
-    meter.tick();
-  }
-}
-
-@customElement("light9-fader")
-export class Light9Fader extends LitElement {
-  static styles = [
-    css`
-      :host {
-        display: inline-block;
-        border: 2px gray outset;
-        background: #272727;
-      }
-      fast-slider {
-        height: 256px;
-      }
-      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-label label="0"></fast-slider-label>
-        <fast-slider-label label="1.0"></fast-slider-label>
-      </fast-slider>
-      <div>${this.value.toPrecision(3)}</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(showRoot + "/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.compile.bind(this), `config ${this.uri.value}`);
-      this.graph.runHandler(this.compileValue.bind(this), `valueSync ${this.uri.value}`);
-    });
-  }
-
-  private compile() {
-    const U = this.graph.U();
-    if (!this.graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
-      // not loaded yet, perhaps
-      this.column = "unset";
-      this.effect = null;
-      this.effectAttr = null;
-      return;
-    }
-    this.column = this.graph.stringValue(this.uri, U(":column"));
-    this.effect = this.graph.uriValue(this.uri, U(":effect"));
-    const s = this.graph.uriValue(this.uri, U(":setting"));
-    this.effectAttr = this.graph.uriValue(s, U(":effectAttr"));
-  }
-
-  private compileValue() {
-    const U = this.graph.U();
-    if (!this.graph.contains(this.uri, U("rdf:type"), U(":Fader"))) {
-      // not loaded yet
-      // console.timeEnd(`valueSync ${this.uri.value}`)
-      return;
-    }
-
-    this.value = this.graph.floatValue(this.uri, this.graph.Uri(":value"));
-  }
-
-  onSliderInput(ev: CustomEvent) {
-    const prev = this.value;
-    const v: number = (ev.target as any).valueAsNumber;
-    this.value = parseFloat(v.toPrecision(3)); // rewrite pls
-    if (this.value == prev) {
-      return;
-    }
-    meter.tick();
-    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(":effect"), newValue, this.ctx);
-  }
-}
--- a/light9/fade/web/index.html	Tue May 23 23:56:28 2023 -0700
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,13 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <title>fade</title>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="../style.css">    
-    <script src="@fs/home/drewp/own/proj/light9/node_modules/fpsmeter/dist/fpsmeter.min.js"></script>
-    <script type="module" src="../fade/Light9FadeUi"></script>
-  </head>
-  <body>
-    <light9-fade-ui></light9-fade-ui>
-  </body>
-</html>
--- a/light9/fade/web/vite.config.ts	Tue May 23 23:56:28 2023 -0700
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,20 +0,0 @@
-import { defineConfig } from "vite";
-
-const servicePort = 8219;
-export default defineConfig({
-  base: "/fade/",
-  root: "./light9/fade/web",
-  publicDir: "../web",
-  server: {
-    host: "0.0.0.0",
-    strictPort: true,
-    port: servicePort + 100,
-    hmr: {
-      port: servicePort + 200,
-    },
-  },
-  clearScreen: false,
-  define: {
-    global: {},
-  },
-});