light9 Changeset - 168027aa7d86

Changeset - 168027aa7d86

Parent rev.

Child rev.

[Not reviewed]

default

0 2 0

Drew Perttula - 9 years ago 2016-06-05 09:22:09
drewp@bigasterisk.com

draw a note based on rdf data points. Doesn't refresh right at all
Ignore-this: a261156eb9a41fdc39054b161726c3ae

2 files changed with 48 insertions and 26 deletions:

light9/web/timeline-elements.html

light9/web/timeline.coffee

0 comments (0 inline, 0 general)

light9/web/timeline-elements.html

➞

Show inline comments

@@ @@ -105,13 +105,13 @@ @@
            Polymer.IronResizableBehavior
        ],
        properties: {
            graph: { type: Object, notify: true },
            song: { type: String, notify: true },
            zoomInX: { type: Object, notify: true },
            rows: {value: [0]},
+           rows: {value: [0,1,2]},
            zoom: {type: Object, notify: true, observer: 'onZoom'},
            zoomFlattened: {type: Object, notify: true}
        },
        onZoom: function() {
            ko.computed(function() {
                this.zoomFlattened = ko.toJS(this.zoom);
@@ @@ -191,14 +191,15 @@ @@
     <style>
      :host {
          border-top: 1px solid black;
          display: flex;
+     }
     </style>
-    <template is="dom-repeat" items="[1]">
+    <template is="dom-repeat" items="{{noteUris}}">
       <light9-timeline-note graph="{{graph}}"
                             uri="{{item}}"
                             zoom-in-x="{{zoomInX}}">
       </light9-timeline-note>
     </template>
   </template>
 </dom-module>

light9/web/timeline.coffee

➞

Show inline comments

@@ @@ -53,15 +53,14 @@ Polymer @@
         @$.dia.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
                          @$.zoomed.$.time.offsetTop,
                          @$.zoomed.$.time.offsetHeight,
                          @fullZoomX, @zoomInX, @viewState.cursor)
+      )
     setTimeout =>
         @adjs = @makeZoomAdjs().concat(@persistDemo())
       , 2000
     @adjs = @makeZoomAdjs().concat(@persistDemo())
     @trackMouse()
     @bindKeys()
     @bindWheelZoom()
   trackMouse: ->
     # not just for show- we use the mouse pos sometimes
@@ @@ -129,13 +128,13 @@ Polymer @@
       if @songTime < zs.t1() or @songTime > zs.t2() - visSeconds * .6
         newCenter = @songTime + margin
         @animatedZoom(newCenter - visSeconds / 2,
                       newCenter + visSeconds / 2, zoomAnimSec)
   persistDemo: ->
-    ctx = @graph.Uri('http://light9.bigasterisk.com/show/dance2016/song1')
+    ctx = @graph.Uri(@song)
     adjs = []
     for n in [0..7]
       subj = @graph.Uri(':demoResource'+n)
       adjs.push(new AdjustableFloatObject({
         graph: @graph
         subj: subj
@@ @@ -209,32 +208,59 @@ Polymer @@
 Polymer
   is: 'light9-timeline-graph-row'
   behaviors: [ Polymer.IronResizableBehavior ]
   properties:
     graph: { type: Object, notify: true }
     zoomInX: { type: Object, notify: true }
     noteUris: { type: Array, notify: true }
   ready: ->
     @noteUris = []
     @push('noteUris', 'http://light9.bigasterisk.com/show/dance2016/song1/n1')
 Polymer
   is: 'light9-timeline-note'
   behaviors: [ Polymer.IronResizableBehavior ]
-  listeners: 'iron-resize': '_onIronResize'
+  listeners: 'iron-resize': 'update'
   properties:
     graph: { type: Object, notify: true }
     zoomInX: { type: Object, notify: true, observer: '_onIronResize' }
     uri: { type: String, notify: true }
     zoomInX: { type: Object, notify: true, observer: 'update' }
   observers: [
     'onUri(graph, uri)'
+    ]
   ready: ->
     @graph.subscribe("http://light9.bigasterisk.com/demoResource6", null, null, @_onIronResize.bind(@))
   _onIronResize: ->
   onUri: ->
     @graph.subscribe(@uri, null, null, @update.bind(@))
   update: ->
     # update our note DOM and SVG elements based on the graph
     U = (x) -> @graph.Uri(x)
     return if !@zoomInX
     try
       subj = "http://light9.bigasterisk.com/demoResource6"
       setNote(subj,
               @zoomInX(@graph.floatValue(subj, @graph.Uri(':startTime'))),
               @zoomInX(@graph.floatValue(subj, @graph.Uri(':endTime'))),
               @offsetTop, @offsetTop + @offsetHeight)
       worldPts = [] # (song time, value)
       originTime = @graph.floatValue(@uri, U(':originTime'))
       for curve in @graph.objects(@uri, U(':curve'))
         if @graph.uriValue(curve, U(':attr')) == U(':strength')
           for pt in @graph.objects(curve, U(':point'))
             worldPts.push($V([
               originTime + @graph.floatValue(pt, U(':time')),
               @graph.floatValue(pt, U(':value'))
               ]))
       worldPts.sort((a,b) -> a.e(1) > b.e(1))
       screenPos = (pt) =>
         $V([@zoomInX(pt.e(1)), @offsetTop + (1 - pt.e(2)) * @offsetHeight])
       setNote(@uri, (screenPos(pt) for pt in worldPts))
     catch e
       log('during resize, ', e)
 Polymer
   is: "light9-timeline-adjusters"
   properties:
@@ @@ -269,15 +295,16 @@ Polymer @@
     @adj.subscribe(@updateDisplay.bind(this))
   updateDisplay: () ->
       @spanClass = if @adj.config.emptyBox then 'empty' else ''
       @displayValue = @adj.getDisplayValue()
       center = @adj.getCenter()
       target = @adj.getTarget()
       return if isNaN(center.e(1))
       @centerStyle = {x: center.e(1), y: center.e(2)}
       @dia?.setAdjusterConnector(@myId, @adj.getCenter(),
                                 @adj.getTarget())
       @dia?.setAdjusterConnector(@myId, center, target)
   attached: ->
     @myId = 'adjuster-' + _adjusterSerial
     _adjusterSerial += 1
     drag = d3.drag()
@@ @@ -329,21 +356,15 @@ Polymer @@
       @$[groupId].appendChild(elem)
       elem.setAttribute('id', uri)
       for k,v of attrs
         elem.setAttribute(k, v)
     return elem
-  setNote: (uri, x1, x2, y1, y2) ->
+  setNote: (uri, curvePts) ->
     elem = @getOrCreateElem(uri, 'notes', 'path', {style:"fill:#53774b; stroke:#000000; stroke-width:1.5;"})
     d = svgPathFromPoints([
       [x1, y2]
       [x1 * .75 + x2 * .25, y1]
       [x1 * .25 + x2 * .75, y1]
       [x2, y2]
     ])
     elem.setAttribute('d', d)
     elem.setAttribute('d', svgPathFromPoints(curvePts))
   setCursor: (y1, h1, y2, h2, fullZoomX, zoomInX, cursor) ->
     @cursorPath =
       top: @querySelector('#cursor1')
       mid: @querySelector('#cursor2')
       bot: @querySelector('#cursor3')

0 comments (0 inline, 0 general)