Mercurial > code > home > repos > light9
changeset 1957:a745bee5c419
new process stats visualizers
Ignore-this: 8e47516baad0bfb9cd02a712571c5a5f
| author | Drew Perttula <drewp@bigasterisk.com> |
|---|---|
| date | Thu, 06 Jun 2019 09:31:36 +0000 |
| parents | ec816fd31c83 |
| children | e0dd7fa987ea |
| files | bin/ascoltami2 bin/collector bin/effecteval bin/vidref light9/effect/sequencer.py light9/web/index.html light9/web/stats-line.js light9/web/stats-process.js requirements.txt |
| diffstat | 9 files changed, 123 insertions(+), 8 deletions(-) [+] |
line wrap: on
line diff
--- a/bin/ascoltami2 Thu Jun 06 02:59:26 2019 +0000 +++ b/bin/ascoltami2 Thu Jun 06 09:31:36 2019 +0000 @@ -11,9 +11,11 @@ from light9.ascoltami.playlist import Playlist, NoSuchSong from light9.ascoltami.webapp import makeWebApp, songUri, songLocation from light9 import networking, showconfig +from standardservice.scalessetup import gatherProcessStats from gi.repository import GObject, Gst +gatherProcessStats() class App(object):
--- a/bin/collector Thu Jun 06 02:59:26 2019 +0000 +++ b/bin/collector Thu Jun 06 09:31:36 2019 +0000 @@ -25,6 +25,7 @@ from light9.namespaces import L9 from light9.zmqtransport import parseJsonMessage, startZmq from rdfdb.syncedgraph import SyncedGraph +from standardservice.scalessetup import gatherProcessStats from light9.collector.output import Udmx, DummyOutput # noqa @@ -42,6 +43,7 @@ json.loads(message) +gatherProcessStats() stats = scales.collection( '/webServer', scales.PmfStat('setAttr', recalcPeriod=1),
--- a/bin/effecteval Thu Jun 06 02:59:26 2019 +0000 +++ b/bin/effecteval Thu Jun 06 09:31:36 2019 +0000 @@ -16,10 +16,12 @@ from rdfdb.patch import Patch from rdfdb.syncedgraph import SyncedGraph from greplin import scales +from standardservice.scalessetup import gatherProcessStats from cycloneerr import PrettyErrorHandler from light9.coffee import StaticCoffee +gatherProcessStats() class EffectEdit(PrettyErrorHandler, cyclone.web.RequestHandler):
--- a/bin/vidref Thu Jun 06 02:59:26 2019 +0000 +++ b/bin/vidref Thu Jun 06 09:31:36 2019 +0000 @@ -30,6 +30,7 @@ from light9.newtypes import Song from light9.vidref import videorecorder from rdfdb.syncedgraph import SyncedGraph +from standardservice.scalessetup import gatherProcessStats parser = optparse.OptionParser() parser.add_option("-v", "--verbose", action="store_true", help="logging.DEBUG") @@ -37,6 +38,7 @@ log.setLevel(logging.DEBUG if options.verbose else logging.INFO) +gatherProcessStats() stats = scales.collection( '/webServer', scales.RecentFpsStat('liveWebsocketFrameFps'),
--- a/light9/effect/sequencer.py Thu Jun 06 02:59:26 2019 +0000 +++ b/light9/effect/sequencer.py Thu Jun 06 09:31:36 2019 +0000 @@ -20,12 +20,14 @@ from light9.namespaces import L9, RDF from light9.newtypes import DeviceUri, DeviceAttr, NoteUri, Curve, Song from rdfdb.syncedgraph import SyncedGraph +from standardservice.scalessetup import gatherProcessStats from greplin import scales import imp log = logging.getLogger('sequencer') +gatherProcessStats() updateStats = scales.collection( '/update/', scales.PmfStat('s0_getMusic', recalcPeriod=1),
--- a/light9/web/index.html Thu Jun 06 02:59:26 2019 +0000 +++ b/light9/web/index.html Thu Jun 06 09:31:36 2019 +0000 @@ -9,6 +9,7 @@ </head> <body> <script type="module" src="stats-line.js"></script> + <script type="module" src="stats-process.js"></script>
--- a/light9/web/stats-line.js Thu Jun 06 02:59:26 2019 +0000 +++ b/light9/web/stats-line.js Thu Jun 06 09:31:36 2019 +0000 @@ -20,13 +20,12 @@ const reload = () => { fetch(this.name + '/stats/?format=json').then((resp) => { if (resp.ok) { - resp.json().then((msg) => { - - this.stats = msg; - setTimeout(reload, 1000); + resp.json().then((msg) => { + this.stats = msg; + setTimeout(reload, 1000); + }); + } }); - } - }); } reload(); } @@ -78,10 +77,21 @@ } render() { + const now = Date.now() / 1000; const table = (d, path) => { - const cols = Object.keys(d); + let cols = Object.keys(d); cols.sort(); + + if (path.length == 0) { + ['webServer', 'process'].forEach((earlyKey) => { + let i = cols.indexOf(earlyKey); + if (i != -1) { + cols = [earlyKey].concat(cols.slice(0, i), cols.slice(i + 1)); + } + }); + } + const th = (col) => { return html`<th>${col}</th>`; }; @@ -130,7 +140,14 @@ ` }, path)); }; - const drawLevel = (d, path) => { + const drawLevel = (d, path) => { + if (path.length == 1 && path[0] === 'process') { + const elem = this.shadowRoot.querySelector('#proc'); + if (elem) { + elem.data = d; + } + return html`<stats-process id="proc"></stats-process>`; + } if (typeof d === 'object') { if (d instanceof TemplateResult) { return html`<td class="val">${d}</td>`;
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/light9/web/stats-process.js Thu Jun 06 09:31:36 2019 +0000 @@ -0,0 +1,86 @@ +import { LitElement, TemplateResult, html, css } from '/node_modules/lit-element/lit-element.js'; +import debug from '/lib/debug/debug-build-es6.js'; +import { rounding } from '/node_modules/significant-rounding/index.js'; + +const log = debug('process'); + +const remap = (x, lo, hi, outLo, outHi) => { + return outLo + (outHi - outLo) * Math.max(0, Math.min(1, (x - lo) / (hi - lo))); +}; + +class StatsProcess extends LitElement { + + static get properties() { + return { + data: { type: Object }, + }; + } + + firstUpdated() { + // inspired by https://codepen.io/qiruiyin/pen/qOopQx + var context = this.shadowRoot.firstElementChild, + ctx = context.getContext('2d'), + w = 64, + h = 64, + revs = 0; + + context.width = w; + context.height = h; + + let prev = Date.now() / 1000; + + var animate = () => { + requestAnimationFrame( animate ); + + const now = Date.now() / 1000; + ctx.beginPath(); + // wrong type of fade- never goes to 0 + ctx.fillStyle = '#00000003'; + ctx.fillRect(0, 0, w, h); + if (this.data.time < now - 2) { + return; + } + const dt = now - prev; + prev = now; + + const size = remap(this.data.memMb, /*in*/ 20, 600, /*out*/ 3, 30); + revs += dt * remap(this.data.cpuPercent, /*in*/ 0, 100, /*out*/ 4, 120); + const rad = remap(size, /*in*/ 3, 30, /*out*/ 14, 5); + + var x = w/2 + rad * Math.cos(revs / 6.28), + y = h/2 + rad * Math.sin(revs / 6.28); + + ctx.save(); + ctx.beginPath(); + ctx.fillStyle = "hsl(194, 100%, 42%)"; + ctx.arc(x, y, size, 0, 2*Math.PI); + ctx.fill(); + ctx.restore(); + + }; + animate(); + } + + updated(changedProperties) { + if (changedProperties.has('data')) { + this.shadowRoot.firstElementChild.setAttribute('title', `cpu ${this.data.cpuPercent}% mem ${this.data.memMb}MB`); + } + } + + static get styles() { + return css` + :host { + display: inline-block; + width: 64px; + height: 64px; + } + `; + } + + render() { + return html`<canvas></canvas>`; + + } +} +customElements.define('stats-process', StatsProcess); +