Mercurial > code > home > repos > light9
changeset 1336:2d77dc9436c3
music drives cursor
Ignore-this: ffa7a9a94084bb8feab6d04e888fb3f6
author | Drew Perttula <drewp@bigasterisk.com> |
---|---|
date | Sat, 04 Jun 2016 21:23:58 +0000 |
parents | 3843f6bd0460 |
children | 34c9c4568c88 |
files | light9/web/light9-music.coffee light9/web/light9-music.html light9/web/timeline-elements.html light9/web/timeline.coffee |
diffstat | 4 files changed, 61 insertions(+), 25 deletions(-) [+] |
line wrap: on
line diff
--- a/light9/web/light9-music.coffee Sat Jun 04 20:43:31 2016 +0000 +++ b/light9/web/light9-music.coffee Sat Jun 04 21:23:58 2016 +0000 @@ -5,25 +5,56 @@ is: "light9-music", properties: status: { type: String, notify: true } + statusTitle: { type: String, notify: true } + turboSign: { type: String, notify: true } + duration: { type: Number, notify: true } playing: { type: Boolean, notify: true } song: { type: String, notify: true } t: { type: Number, notify: true } + ready: -> + @turboUntil = 0 @$.getTime.addEventListener('response', @onResponse.bind(@)) @$.getTime.addEventListener 'error', (e) => req = @$.getTime.lastRequest - @status = "GET "+req.url+ " -> " + req.status + " " + req.statusText + @status = "✘" + @statusTitle = "GET "+req.url+ " -> " + req.status + " " + req.statusText setTimeout(@poll.bind(@), 2000) @poll() + setInterval(@estimateTimeLoop.bind(@), 50) + + estimateTimeLoop: -> + if @playing + @t = @remoteT + (Date.now() - @remoteAsOfMs) / 1000 + else + @t = @remoteT + poll: -> @$.getTime.generateRequest() - @status = "poll" + @status = "♫" onResponse: -> - @status = "ok" - setTimeout(@poll.bind(@), 1000) + @status = " " r = @$.getTime.lastResponse + now = Date.now() + if !r.playing && r.t != @remoteT + # likely seeking in another tool + @turboUntil = now + 1000 + if now < @turboUntil + @turboSign = "⚡" + delay = 20 + else + @turboSign = " " + delay = 700 + + setTimeout(@poll.bind(@), delay) @duration = r.duration @playing = r.playing @song = r.song - @t = r.t + + @remoteT = r.t + @remoteAsOfMs = now + + + +
--- a/light9/web/light9-music.html Sat Jun 04 20:43:31 2016 +0000 +++ b/light9/web/light9-music.html Sat Jun 04 21:23:58 2016 +0000 @@ -4,8 +4,18 @@ <!-- remote control of ascoltami --> <dom-module id="light9-music"> <template> + <style> + span { + font-family: monospace; + white-space: pre; + background: black; + color: white; + border: 1px solid #2782ad; + font-size: 12px; + } + </style> <iron-ajax id="getTime" url="/ascoltami/time"></iron-ajax> - <span>[[status]]</span> + <span>[[status]][[turboSign]]</span> </template> <script src="light9-music.js"></script> </dom-module>
--- a/light9/web/timeline-elements.html Sat Jun 04 20:43:31 2016 +0000 +++ b/light9/web/timeline-elements.html Sat Jun 04 21:23:58 2016 +0000 @@ -30,18 +30,14 @@ position: absolute; left: 0; top: 0; right: 0; bottom: 0; } - #debug { - position: fixed; - right: 0; - bottom: 0; - } </style> <div> <rdfdb-synced-graph graph="{{graph}}"></rdfdb-synced-graph> - <light9-music></light9-music> - timeline editor: song [uri] <button>unlink</button> + <light9-music song="{{song}}" t="{{songTime}}"></light9-music> + timeline editor: song [{{song}}] <button>unlink</button> <label><input type="checkbox"> follow player song choice</label> </div> + <div>[[debug]]</div> <!-- Old zoom menu: See current time .. esc @@ -52,12 +48,10 @@ <light9-timeline-time-zoomed id="zoomed" graph="{{graph}}" zoom="{{viewState.zoomSpec}}" zoom-in-x="{{zoomInX}}"></light9-timeline-time-zoomed> <light9-timeline-diagram-layer id="dia"></light9-timeline-diagram-layer> <light9-timeline-adjusters id="adjusters" dia="{{dia}}" adjs="{{adjs}}"></light9-timeline-adjusters> - <div id="debug">[[debug]]</div> </template> </dom-module> - <!-- the whole section that pans/zooms in time (most of the editor) --> <dom-module id="light9-timeline-time-zoomed"> <template>
--- a/light9/web/timeline.coffee Sat Jun 04 20:43:31 2016 +0000 +++ b/light9/web/timeline.coffee Sat Jun 04 21:23:58 2016 +0000 @@ -7,11 +7,15 @@ viewState: { type: Object } debug: {type: String} graph: {type: Object, notify: true} + song: {type: String, notify: true} + songTime: {type: Number, notify: true, observer: '_onSongTime'} width: ko.observable(1) listeners: 'iron-resize': '_onIronResize' _onIronResize: -> @width(@offsetWidth) + _onSongTime: (t) -> + @viewState.cursor.t(t) if @viewState attached: -> @dia = @$.dia @@ -32,20 +36,17 @@ @dia.setTimeAxis(@width(), @$.zoomed.$.audio.offsetTop, @zoomInX) @$.adjusters.updateAllCoords() - animCursor = () => - @viewState.cursor.t = 130 + 20 * Math.sin(Date.now() / 2000) + ko.computed => + # zoomInX changing doesn't retrigger this, so I'll do it here + ko.toJS(@viewState.zoomSpec) + @$.dia.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight, @$.zoomed.$.time.offsetTop, @$.zoomed.$.time.offsetHeight, @fullZoomX, @zoomInX, @viewState.cursor) - #@viewState.zoomSpec.t1(80 + 10 * Math.sin(Date.now() / 3000)) - - setInterval(animCursor, 50) - @adjs = @makeZoomAdjs().concat(@persistDemo()) - persistDemo: -> ctx = @graph.Uri('http://example.com/') adjs = [] @@ -129,7 +130,7 @@ zoomInX: { type: Object, notify: true } -window.xserial = 0 + Polymer is: 'light9-timeline-note' behaviors: [ Polymer.IronResizableBehavior ] @@ -261,8 +262,8 @@ bot: @querySelector('#cursor3') return if !@cursorPath.top - xZoomedOut = fullZoomX(cursor.t) - xZoomedIn = zoomInX(cursor.t) + xZoomedOut = fullZoomX(cursor.t()) + xZoomedIn = zoomInX(cursor.t()) @cursorPath.top.setAttribute 'd', svgPathFromPoints([ [xZoomedOut, y1] [xZoomedOut, y1 + h1]