light9 Changeset - 9a4bc2ea264e

Changeset - 9a4bc2ea264e

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

drewp@bigasterisk.com - 8 months ago 2024-05-17 20:25:46
drewp@bigasterisk.com

ui tweaks and link fix

2 files changed with 13 insertions and 12 deletions:

web/fade/Light9Fader.ts

web/metrics/ServiceButtonRow.ts

0 comments (0 inline, 0 general)

web/fade/Light9Fader.ts

➞

Show inline comments

@@ @@ -12,54 +12,55 @@ class Drag { @@
 @customElement("light9-fader")
 export class Light9Fader extends LitElement {
   static styles = [
     css`
       :host {
         display: inline-block;
         border: 2px gray inset;
         background: #000;
         height: 80px;
+      }
       #handle {
         background: gray;
-        border: 5px gray outset;
+        border: 3px outset #838499;
         position: relative;
-        left: 0;
+        left: 0px;
         right: -25px;
         border-radius: 4px;
         margin: 0 1px;
+      }
     `,
   ];
   @property() value: number = 0;
   @query("#handle") handleEl!: HTMLElement;
   troughHeight = 80 - 2 - 2 - 5 - 5;
-  handleHeight = 10;
+  handleHeight = 16;
   drag?: Drag;
   unmutedValue: number = 1;
   render() {
     return html` <div id="handle"><hr /></div> `;
+  }
   protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     super.update(changedProperties);
     if (changedProperties.has("value")) {
+    }
+  }
   valueChangedFromUi() {
     this.value= clamp(this.value, 0, 1)
+    this.value = clamp(this.value, 0, 1);
     this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value } }));
+  }
   protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     super.updated(_changedProperties);
     const y = this.sliderTopY(this.value);
     this.handleEl.style.top = y + "px";
+  }
   protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
     super.firstUpdated(_changedProperties);
     this.handleEl.style.height = this.handleHeight + "px";
@@ @@ -71,40 +72,40 @@ export class Light9Fader extends LitElem @@
     hand.addEventListener("mousedown", (ev: MouseEvent) => {
       ev.stopPropagation();
       if (ev.buttons == 1) {
         this.drag = new Drag(ev.clientY, this.value);
       } else if (ev.buttons == 2) {
         this.onRmb();
+      }
     });
     this.addEventListener("mousedown", (ev: MouseEvent) => {
       ev.stopPropagation();
       if (ev.buttons == 1) {
         this.value = this.sliderValue(ev.offsetY);
         this.valueChangedFromUi()
+        this.valueChangedFromUi();
         this.drag = new Drag(ev.clientY, this.value);
       } else if (ev.buttons == 2) {
         // RMB in trough
         this.onRmb();
+      }
     });
     this.addEventListener("contextmenu", (event) => {
       event.preventDefault();
     });
     this.addEventListener("wheel", (ev: WheelEvent) => {
       ev.preventDefault();
       this.value += ev.deltaY / this.troughHeight * -.05;
       this.valueChangedFromUi()
       this.value += (ev.deltaY / this.troughHeight) * -0.03;
       this.valueChangedFromUi();
     });
     const maybeDrag = (ev: MouseEvent) => {
       if (ev.buttons != 1) return;
       if (this.drag === undefined) return;
       ev.stopPropagation();
       this.onMouseDrag(ev.clientY - this.drag.startDragPxY!);
     };
     hand.addEventListener("mousemove", maybeDrag);
     this.addEventListener("mousemove", maybeDrag);
     window.addEventListener("mousemove", maybeDrag);
@@ @@ -112,35 +113,35 @@ export class Light9Fader extends LitElem @@
     this.addEventListener("mouseup", this.onMouseUpAnywhere.bind(this));
     window.addEventListener("mouseup", this.onMouseUpAnywhere.bind(this));
+  }
   onRmb() {
     if (this.value > 0.1) {
       // mute
       this.unmutedValue = this.value;
       this.value = 0;
     } else {
       // unmute
       this.value = this.unmutedValue;
+    }
     this.valueChangedFromUi()
+    this.valueChangedFromUi();
+  }
   onMouseDrag(dy: number) {
     if (this.drag === undefined) throw "unexpected";
     this.value = this.drag.startDragValue - dy / this.troughHeight;
     this.valueChangedFromUi()
+    this.valueChangedFromUi();
+  }
   onMouseUpAnywhere() {
     this.drag = undefined;
+  }
   sliderTopY(value: number): number {
     const usableY = this.troughHeight - this.handleHeight;
+    const usableY = this.troughHeight - this.handleHeight / 2 - 1;
     const yAdj = this.handleHeight / 2 - 5 - 2;
     return (1 - value) * usableY + yAdj;
+  }
   sliderValue(offsetY: number): number {
     const usableY = this.troughHeight - this.handleHeight;
     const yAdj = this.handleHeight / 2 - 5 - 2;
     return clamp(1 - (offsetY - yAdj) / usableY, 0, 1);
+  }
+}

web/metrics/ServiceButtonRow.ts

➞

Show inline comments

@@ @@ -52,15 +52,15 @@ export class ServiceButtonRow extends Li @@
     return html`
       <div>
         <div class="left"><a class="big" href="${this.name}/">${this.name}</a></div>
         <div class="window"><button @click="${this.click}">window</button></div>
         ${this.hasMetrics ? html`<div><a href="${this.name}/metrics">metrics</a></div>` : ""}
       </div>
       ${this.hasMetrics ? html`<div id="stats"><stats-line name="${this.name}"></div>` : ""}
       `;
+  }
   click() {
     window.open(this.name + "/", "_blank", "scrollbars=1,resizable=1,titlebar=0,location=0");
+    window.open("/" + this.name + "/", "_blank", "scrollbars=1,resizable=1,titlebar=0,location=0");
+  }
+}

0 comments (0 inline, 0 general)