Mercurial > code > home > repos > light9
changeset 2101:4248f40ddcae
effects/ is now at effectListing/
author | drewp@bigasterisk.com |
---|---|
date | Tue, 31 May 2022 23:38:40 -0700 |
parents | f1df317f7c4c |
children | 9c2e1b5c16e9 |
files | bin/effectListing light9/effect/listing/web/Light9EffectListing.ts light9/effect/listing/web/index.html light9/effect/listing/web/vite.config.ts light9/web/effects/effects.coffee light9/web/effects/index.html show/dance2019/networking.n3 |
diffstat | 7 files changed, 144 insertions(+), 118 deletions(-) [+] |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/bin/effectListing Tue May 31 23:38:40 2022 -0700 @@ -0,0 +1,4 @@ +#!/bin/sh +pnpx vite -c light9/effect/listing/web/vite.config.ts & +wait +
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/light9/effect/listing/web/Light9EffectListing.ts Tue May 31 23:38:40 2022 -0700 @@ -0,0 +1,106 @@ +import debug from "debug"; +import { css, html, LitElement } from "lit"; +import { customElement, property } from "lit/decorators.js"; +import { NamedNode } from "n3"; +import { sortBy } from "underscore"; +import { getTopGraph } from "../../../web/RdfdbSyncedGraph"; +import { SyncedGraph } from "../../../web/SyncedGraph"; +export {ResourceDisplay} from "../../../web/ResourceDisplay" +debug.enable("*"); +const log = debug("listing"); + +@customElement("light9-effect-listing") +export class Light9EffectListing extends LitElement { + render() { + return html` + <h1>Effects</h1> + <rdfdb-synced-graph></rdfdb-synced-graph> + + ${this.effectClasses.map((e: NamedNode) => html`<light9-effect-class .uri=${e}></light9-effect-class>`)} + `; + } + graph!: SyncedGraph; + effectClasses: NamedNode[] = []; + + constructor() { + super(); + getTopGraph().then((g) => { + this.graph = g; + this.graph.runHandler(this.getClasses.bind(this), "getClasses"); + }); + } + + getClasses() { + const U = this.graph.U(); + this.effectClasses = this.graph.subjects(U("rdf:type"), U(":Effect")) as NamedNode[]; + this.effectClasses = sortBy(this.effectClasses, (ec: any) => this.graph.stringValue(ec, U("rdfs:label"))); + this.requestUpdate(); + } +} + +@customElement("light9-effect-class") +export class Light9EffectClass extends LitElement { + static styles = [ + css` + :host { + display: block; + padding: 5px; + border: 1px solid green; + background: #1e271e; + margin-bottom: 3px; + } + a { + color: #7992d0; + background: #00000859; + min-width: 4em; + min-height: 2em; + display: inline-block; + text-align: center; + vertical-align: middle; + } + resource-display { + min-width: 12em; + font-size: 180%; + } + `, + ]; + render() { + if (!this.uri) { + return html`loading...`; + } + return html` + Effect + <resource-display .uri=${this.uri} rename></resource-display> + <a href="../live?effect=${this.uri.value}">Edit</a> + <iron-ajax id="songEffects" url="/effectEval/songEffects" method="POST" content-type="application/x-www-form-urlencoded"></iron-ajax> + <span style="float:right"> + <button disabled @click=${this.onAdd}>Add to current song</button> + <button disabled @mousedown=${this.onMomentaryPress} @mouseup=${this.onMomentaryRelease}>Add momentary</button> + </span> + `; + } + graph!: SyncedGraph; + uri?: NamedNode; + + onAdd() { + // this.$.songEffects.body = { drop: this.uri.value }; + // this.$.songEffects.generateRequest(); + } + + onMomentaryPress() { + // this.$.songEffects.body = { drop: this.uri.value, event: "start" }; + // this.lastPress = this.$.songEffects.generateRequest(); + // return this.lastPress.completes.then((request: { response: { note: any } }) => { + // return (this.lastMomentaryNote = request.response.note); + // }); + } + + onMomentaryRelease() { + // if (!this.lastMomentaryNote) { + // return; + // } + // this.$.songEffects.body = { drop: this.uri.value, note: this.lastMomentaryNote }; + // this.lastMomentaryNote = null; + // return this.$.songEffects.generateRequest(); + } +}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/light9/effect/listing/web/index.html Tue May 31 23:38:40 2022 -0700 @@ -0,0 +1,12 @@ +<!doctype html> +<html> + <head> + <title>effect listing</title> + <meta charset="utf-8" /> + <link rel="stylesheet" href="./style.css"> + <script type="module" src="../effectListing/Light9EffectListing"></script> + </head> + <body> + <light9-effect-listing></light9-effect-listing> + </body> +</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/light9/effect/listing/web/vite.config.ts Tue May 31 23:38:40 2022 -0700 @@ -0,0 +1,20 @@ +import { defineConfig } from "vite"; + +const servicePort = 8218; +export default defineConfig({ + base: "/effectListing/", + root: "./light9/effect/listing/web", + publicDir: "../web", + server: { + host: "0.0.0.0", + strictPort: true, + port: servicePort + 100, + hmr: { + port: servicePort + 200, + }, + }, + clearScreen: false, + define: { + global: {}, + }, +});
--- a/light9/web/effects/effects.coffee Tue May 31 02:05:47 2022 -0700 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,36 +0,0 @@ -Polymer - is: "light9-effects" - properties: - graph: {type: Object} - effectClasses: { type: Array } - ready: -> - @graph.runHandler(@getClasses.bind(@), 'getClasses') - - getClasses: -> - U = (x) => @graph.Uri(x) - @effectClasses = @graph.subjects(U('rdf:type'), U(':Effect')) - @effectClasses = _.sortBy(@effectClasses, (ec) => @graph.stringValue(ec, U('rdfs:label'))) - - -Polymer - is: "light9-effect-class" - properties: - graph: {type: Object} - uri: {type: Object} - - onAdd: -> - @$.songEffects.body = {drop: @uri.value} - @$.songEffects.generateRequest() - - onMomentaryPress: -> - @$.songEffects.body = {drop: @uri.value, event: 'start'} - @lastPress = @$.songEffects.generateRequest() - @lastPress.completes.then (request) => - @lastMomentaryNote = request.response.note - - onMomentaryRelease: -> - return unless @lastMomentaryNote - @$.songEffects.body = {drop: @uri.value, note: @lastMomentaryNote} - @lastMomentaryNote = null - @$.songEffects.generateRequest() - \ No newline at end of file
--- a/light9/web/effects/index.html Tue May 31 02:05:47 2022 -0700 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,82 +0,0 @@ -<!doctype html> -<html> - <head> - <title>subserver effects2</title> - <meta charset="utf-8" /> - <link rel="stylesheet" href="/style.css"> - <script src="/lib/webcomponentsjs/webcomponents-lite.min.js"></script> - <script src="/lib/debug/debug-build.js"></script> - <script> - debug.enable('*'); - </script> - <link rel="import" href="/lib/polymer/polymer.html"> - <link rel="import" href="/lib/iron-ajax/iron-ajax.html"> - <script src="/node_modules/n3/n3-browser.js"></script> - <script src="/lib/async/dist/async.js"></script> - <script src="/lib/underscore/underscore-min.js"></script> - <link rel="import" href="/rdfdb-synced-graph.html"> - <link rel="import" href="/resource-display.html"> - </head> - <body> - <!-- replaces effects.jade for subserver --> - - <dom-module id="light9-effect-class"> - <template> - <style> - :host { - display: block; - padding: 5px; - border: 1px solid green; - background: #1e271e; - margin-bottom: 3px; - } - a { - color: #7992d0; - background: #00000859; - min-width: 4em; - min-height: 2em; - display: inline-block; - text-align: center; - vertical-align: middle; - } - resource-display { - min-width: 12em; - font-size: 180%; - } - </style> - - Effect - <resource-display graph="{{graph}}" uri="{{uri}}" rename></resource-display> - <a href="../live?effect={{uri.value}}">Edit</a> - <iron-ajax id="songEffects" - url="/effectEval/songEffects" - method="POST" - content-type="application/x-www-form-urlencoded"></iron-ajax> - <span style="float:right"> - <button on-click="onAdd">Add to current song</button> - <button on-mousedown="onMomentaryPress" - on-mouseup="onMomentaryRelease">Add momentary</button> - </span> - - </template> - </dom-module> - - <dom-module id="light9-effects"> - <template> - <style> - </style> - <h1>Effects</h1> - <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph> - - <template is="dom-repeat" items="{{effectClasses}}"> - <light9-effect-class graph="{{graph}}" uri="{{item}}"></light9-effect-class> - </template> - - </template> - </dom-module> - - <light9-effects></light9-effects> - - <script src="effects.js"></script> - </body> -</html>
--- a/show/dance2019/networking.n3 Tue May 31 02:05:47 2022 -0700 +++ b/show/dance2019/networking.n3 Tue May 31 23:38:40 2022 -0700 @@ -20,6 +20,7 @@ :webServer <http://localhost:8200/>; :timeline <http://localhost:8216/>; :live <http://localhost:8217/>; + :effectListing <http://localhost:8218/>; :collector <http://localhost:8202/>; :collectorZmq <http://localhost:8203/> . @@ -37,3 +38,4 @@ :vidref :urlPath "vidref" . :timeline :urlPath "timeline" . :live :urlPath "live" . +:effectListing :urlPath "effectListing" . \ No newline at end of file