light9 Changeset - 3843f6bd0460

Changeset - 3843f6bd0460

Parent rev.

Child rev.

[Not reviewed]

default

0 1 2

Drew Perttula - 9 years ago 2016-06-04 20:43:31
drewp@bigasterisk.com

music time fetcher
Ignore-this: c490ec8c59c3f1c5c0c8f7ebd08e0e2c

3 files changed with 42 insertions and 0 deletions:

light9/web/light9-music.coffee

light9/web/light9-music.html

light9/web/timeline-elements.html

0 comments (0 inline, 0 general)

light9/web/light9-music.coffee

➞

Show inline comments

@@ new file 100644 @@
 log = console.log
 # port of light9/curvecalc/musicaccess.py
 Polymer
   is: "light9-music",
   properties:
     status: { 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: ->
     @$.getTime.addEventListener('response', @onResponse.bind(@))
     @$.getTime.addEventListener 'error', (e) =>
       req = @$.getTime.lastRequest
       @status = "GET "+req.url+ " -> " + req.status + " " + req.statusText
       setTimeout(@poll.bind(@), 2000)
     @poll()
   poll: ->
     @$.getTime.generateRequest()
     @status = "poll"
   onResponse: ->
     @status = "ok"
     setTimeout(@poll.bind(@), 1000)
     r = @$.getTime.lastResponse
     @duration = r.duration
     @playing = r.playing
     @song = r.song
     @t = r.t

light9/web/light9-music.html

➞

Show inline comments

@@ new file 100644 @@
 <link rel="import" href="/lib/polymer/polymer.html">
 <link rel="import" href="/lib/iron-ajax/iron-ajax.html">
 <!-- remote control of ascoltami -->
 <dom-module id="light9-music">
   <template>
     <iron-ajax id="getTime" url="/ascoltami/time"></iron-ajax>
     <span>[[status]]</span>
   </template>
   <script src="light9-music.js"></script>
 </dom-module>

light9/web/timeline-elements.html

➞

Show inline comments

 <link rel="import" href="/lib/polymer/polymer.html">
 <link rel="import" href="light9-timeline-audio.html">
 <link rel="import" href="/lib/iron-resizable-behavior/iron-resizable-behavior.html">
 <link rel="import" href="rdfdb-synced-graph.html">
 <link rel="import" href="light9-music.html">
 <!-- Whole editor- include this on your page.
      Most coordinates are relative to this element.
    -->
 <dom-module id="light9-timeline-editor">
   <template>
     <style>
      :host {
          background: #444;
          display: flex;
          flex-direction: column;
          position: relative;
          border: 1px solid black;
          overflow: hidden;
+     }
      light9-timeline-audio {
          width: 100%;
          height: 30px;
+     }
      light9-timeline-time-zoomed {
          flex-grow: 1;
+     }
      light9-timeline-diagram-layer, light9-timeline-adjusters {
          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>
       <label><input type="checkbox"> follow player song choice</label>
     </div>
     <!--
          Old zoom menu:
          See current time .. esc
          See from current time -> end .. shift+esc
          Zoom all .. ctrl+esc
        -->
     <light9-timeline-audio id="audio"></light9-timeline-audio>
     <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>
     <style>
      :host {
          display: flex;
          height: 100%;
+     }
      div {
          display: flex;
          flex-direction: column;
          height: 100%;
+     }
      light9-timeline-audio {
          width: 100%;
          height: 90px;
+     }
      light9-timeline-graph-row {
          flex-grow: 1;
+     }
     </style>
     <div>
       <light9-timeline-time-axis id="time"></light9-timeline-time-axis>
       <light9-timeline-audio id="audio" zoom="{{zoomFlattened}}"></light9-timeline-audio>
       <template is="dom-repeat" items="{{rows}}">
         <light9-timeline-graph-row graph="{{graph}}" zoom-in-x="{{zoomInX}}"></light9-timeline-graph-row>
       </template>
     </div>
   </template>
   <script>
    Polymer({
        is: "light9-timeline-time-zoomed",
        behaviors: [
            Polymer.IronResizableBehavior
        ],
        properties: {
            graph: { type: Object, notify: true },
            zoomInX: { type: Object, notify: true },
            rows: {value: [0]},
            zoom: {type: Object, notify: true, observer: 'onZoom'},
            zoomFlattened: {type: Object, notify: true}
        },
        onZoom: function() {
            ko.computed(function() {
                this.zoomFlattened = ko.toJS(this.zoom);
            }.bind(this));
+       }
    });
   </script>
 </dom-module>
 <!--
      SVG or canvas that draws these:
        - background grids
        - zoom arcs
        - notes
        - annotations on notes
        - connectors between adjusters and their targets
      This element is not responsible for any hit detection. Things you click (rows,
      notes, adjusters, etc) are caught on their respective elements. (But is that
      wrong in the case of notes?)
    -->
 <dom-module id="light9-timeline-diagram-layer">
   <template>
     <style>
      :host {
          pointer-events: none;
+     }
      svg {
          width: 100%;
          height: 100%;
          pointer-events: none;
+     }
     </style>
     <svg xmlns="http://www.w3.org/2000/svg"

0 comments (0 inline, 0 general)