Mercurial > code > home > repos > light9
annotate web/metrics/StatsProcess.ts @ 2409:ba2f00912e20
fix white output on RGBW devices
| author | drewp@bigasterisk.com |
|---|---|
| date | Sat, 18 May 2024 22:43:43 -0700 |
| parents | 4556eebe5d73 |
| children |
| rev | line source |
|---|---|
| 2033 | 1 import { LitElement, html, css } from "lit"; |
| 2 import { customElement, property } from "lit/decorators.js"; | |
| 3 import debug from "debug"; | |
|
1957
a745bee5c419
new process stats visualizers
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
4 |
| 2033 | 5 const log = debug("process"); |
|
1957
a745bee5c419
new process stats visualizers
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
6 |
| 2033 | 7 const remap = (x: number, lo: number, hi: number, outLo: number, outHi: number) => { |
| 8 return outLo + (outHi - outLo) * Math.max(0, Math.min(1, (x - lo) / (hi - lo))); | |
|
1957
a745bee5c419
new process stats visualizers
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
9 }; |
|
a745bee5c419
new process stats visualizers
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
10 |
| 2033 | 11 @customElement("stats-process") |
| 12 export class StatsProcess extends LitElement { | |
|
2036
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
13 // inspired by https://codepen.io/qiruiyin/pen/qOopQx |
|
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
14 @property() cpu = 0; // process_cpu_seconds_total |
|
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
15 @property() mem = 0; // process_resident_memory_bytes |
| 2033 | 16 |
| 2034 | 17 w = 64; |
| 18 h = 64; | |
| 19 revs = 0; | |
| 20 prev = 0; | |
|
2036
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
21 canvas?: HTMLCanvasElement; |
| 2034 | 22 ctx?: CanvasRenderingContext2D; |
|
2036
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
23 connectedCallback() { |
|
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
24 super.connectedCallback(); |
| 2034 | 25 this.initCanvas(this.shadowRoot!.firstElementChild as HTMLCanvasElement); |
| 26 this.prev = Date.now() / 1000; | |
|
1957
a745bee5c419
new process stats visualizers
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
27 |
| 2033 | 28 var animate = () => { |
| 29 requestAnimationFrame(animate); | |
| 2034 | 30 this.redraw(); |
| 2033 | 31 }; |
| 32 animate(); | |
| 33 } | |
| 2034 | 34 initCanvas(canvas: HTMLCanvasElement) { |
|
2036
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
35 if (!canvas) { |
|
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
36 return; |
|
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
37 } |
|
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
38 this.canvas = canvas; |
|
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
39 this.ctx = this.canvas.getContext("2d")!; |
| 2033 | 40 |
|
2036
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
41 this.canvas.width = this.w; |
|
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
42 this.canvas.height = this.h; |
| 2034 | 43 } |
| 44 redraw() { | |
|
2036
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
45 if (!this.ctx) { |
|
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
46 this.initCanvas(this.shadowRoot!.firstElementChild as HTMLCanvasElement); |
|
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
47 } |
| 2034 | 48 if (!this.ctx) return; |
|
2036
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
49 |
|
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
50 this.canvas!.setAttribute("title", |
|
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
51 `cpu ${new Number(this.cpu).toPrecision(3)}% mem ${new Number(this.mem).toPrecision(3)}MB`); |
|
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
52 |
| 2034 | 53 const now = Date.now() / 1000; |
| 54 const ctx = this.ctx; | |
| 55 ctx.beginPath(); | |
| 56 // wrong type of fade- never goes to 0 | |
| 57 ctx.fillStyle = "#00000003"; | |
| 58 ctx.fillRect(0, 0, this.w, this.h); | |
| 59 const dt = now - this.prev; | |
| 60 this.prev = now; | |
| 61 | |
|
2280
e462853f1ef6
redo homepage and metrics calcs. still a mess
drewp@bigasterisk.com
parents:
2037
diff
changeset
|
62 const size = remap(this.mem.valueOf() / 1024 / 1024, /*in*/ 20, 80, /*out*/ 3, 30); |
|
2036
00afa5ec081a
restore more of the stats widget including the cpu/mem spinner
drewp@bigasterisk.com
parents:
2034
diff
changeset
|
63 this.revs += dt * remap(this.cpu.valueOf(), /*in*/ 0, 100, /*out*/ 4, 120); |
| 2034 | 64 const rad = remap(size, /*in*/ 3, 30, /*out*/ 14, 5); |
| 65 | |
| 66 var x = this.w / 2 + rad * Math.cos(this.revs / 6.28), | |
| 67 y = this.h / 2 + rad * Math.sin(this.revs / 6.28); | |
| 68 | |
| 69 ctx.save(); | |
| 70 ctx.beginPath(); | |
| 71 ctx.fillStyle = "hsl(194, 100%, 42%)"; | |
| 72 ctx.arc(x, y, size, 0, 2 * Math.PI); | |
| 73 ctx.fill(); | |
| 74 ctx.restore(); | |
| 75 } | |
|
1957
a745bee5c419
new process stats visualizers
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
76 |
| 2033 | 77 static styles = [ |
| 78 css` | |
| 79 :host { | |
| 80 display: inline-block; | |
| 81 width: 64px; | |
| 82 height: 64px; | |
| 83 } | |
| 84 `, | |
| 85 ]; | |
|
1957
a745bee5c419
new process stats visualizers
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
86 |
| 2033 | 87 render() { |
| 88 return html`<canvas></canvas>`; | |
| 89 } | |
|
1957
a745bee5c419
new process stats visualizers
Drew Perttula <drewp@bigasterisk.com>
parents:
diff
changeset
|
90 } |