light9 Changeset - a6259ab66885

Changeset - a6259ab66885

Parent rev.

Child rev.

[Not reviewed]

default

0 3 0

Drew Perttula - 9 years ago 2016-06-03 21:43:22
drewp@bigasterisk.com

another pass at adjusters making rdf patches.
Ignore-this: dcb7b1081c90bbf3dfa9ed17cd02226a

3 files changed with 115 insertions and 45 deletions:

light9/web/timeline-elements.html

light9/web/timeline.coffee

show/dance2016/timelinedemo.n3

0 comments (0 inline, 0 general)

light9/web/timeline-elements.html

➞

Show inline comments

@@ @@ -375,15 +375,15 @@ @@
          padding: 5px;
          cursor: ew-resize;
          -webkit-user-select: none;
+     }
     </style>
-    <table id="top" style$="left: {{centerStyle.x}}px; top: {{centerStyle.y}}px">
+    <table id="top" style$="left: [[centerStyle.x]]px; top: [[centerStyle.y]]px">
       <tr><td></td><td>↑</td><td></td></tr>
-      <tr><td>←</td><td><span id="label">{{value}}</span></td><td>→</td></tr>
+      <tr><td>←</td><td><span id="label">[[displayValue]]</span></td><td>→</td></tr>
       <tr><td></td><td>↓</td><td></td></tr>
     </table>
   </template>
 </dom-module>
@@ @@ -399,10 +399,10 @@ @@
+       }
    });
   </script>
 </dom-module>
 <script src="/lib/sylvester/sylvester.js"></script>
 <script src="/lib/d3/d3.js"></script>
+<script src="/lib/d3/build/d3.js"></script>
 <script src="/lib/N3.js/browser/n3-browser.js"></script>
 <script src="graph.js"></script>
 <script src="timeline.js"></script>

light9/web/timeline.coffee

➞

Show inline comments

+log = console.log
 window.graph = new SyncedGraph('noServerYet', {
 '': 'http://light9.bigasterisk.com/',
 'xsd', 'http://www.w3.org/2001/XMLSchema#',
   })
 window.graph.loadTrig("
 @prefix : <http://light9.bigasterisk.com/> .
 @prefix dev: <http://light9.bigasterisk.com/device/> .
 <http://example.com/> {
   :demoResource :startTime 0.5 .
+  :demoResource :startTime 0.5; :endTime 1.6 .
+}
     ")
 class Adjustable
+  #
   # Some value you can edit in the UI, probably by dragging stuff. May
   # have a <light9-timeline-adjuster> associated. This object does the
   # layout and positioning.
   constructor: (@config) ->
     @center = @config.getTarget().add(@config.getSuggestedTargetOffset())
     @getValue = @config.getValue
     @_center = @config.getTarget().add(@config.getSuggestedTargetOffset())
   getDisplayValue: () ->
     # todo
     d3.format(".4g")(@config.getValue())
   getCenter: () -> # vec2 of pixels
     @_center
   getTarget: () -> # vec2 of pixels
     @config.getTarget()
   subscribe: (onChange) ->
     # change could be displayValue or center or target. This likely
     # calls onChange right away if there's any data yet.
   startDrag: () ->
     # todo
     @dragStartValue = @getValue()
   continueDrag: (pos) ->
     # pos is vec2 of pixels relative to the drag start
     # todo
     newValue = @dragStartValue + pos.e(0) * .1
     graph.patchObject(@_subj, @_pred, graph.Literal(newValue), @_ctx)
   endDrag: () ->
 class AdjustableFloatObject extends Adjustable
   constructor: (@config) ->
     # config has graph, subj, pred, ctx
     super(@config)
   getValue: () -> # for drag math
     @config.graph.floatValue(@config.subj, @config.pred)
   getCenter: () ->
     $V([100 + 200 * @getValue(), 200])
   getDisplayValue: () ->
     d3.format(".4g")(@getValue())
   subscribe: (onChange) ->
     @config.graph.subscribe @config.subj, @config.pred, null, (patch) =>
       onChange()
   continueDrag: (pos) ->
     # pos is vec2 of pixels relative to the drag start
     newValue = @dragStartValue + pos.e(1) / 200
     @config.graph.patchObject(@config.subj, @config.pred, @config.graph.Literal(newValue), @_ctx)
 Polymer
   is: 'light9-timeline-editor'
   behaviors: [ Polymer.IronResizableBehavior ]
   properties:
@@ @@ -32,13 +87,13 @@ Polymer @@
         duration: 190
         t1: 102
         t2: 161
       cursor:
         t: 105
-    @fullZoomX = d3.scale.linear().domain([0, @viewState.zoomSpec.duration]).range([0, @offsetWidth])
+    @fullZoomX = d3.scaleLinear().domain([0, @viewState.zoomSpec.duration]).range([0, @offsetWidth])
     animCursor = () =>
       @viewState.cursor.t = 130 + 20 * Math.sin(Date.now() / 2000)
       @$.dia.setCursor(@$.audio.offsetTop, @$.audio.offsetHeight,
                        @$.zoomed.$.time.offsetTop, @$.zoomed.$.time.offsetHeight,
                        @viewState.zoomSpec, @viewState.cursor)
@@ @@ -46,26 +101,34 @@ Polymer @@
       @set('viewState.zoomSpec.t1', 80 + 10 * Math.sin(Date.now() / 3000))
     setInterval(animCursor, 50)
     setTimeout(() =>
       @adjs = @persistDemo() #@makeZoomAdjs().concat(@persistDemo())
     , 3000)
     , 100)
   persistDemo: ->
     adj = new Adjustable({
       getValue: () => (graph.floatValue(
         graph.Uri(':demoResource'),
         graph.Uri(':startTime')))
     ctx = graph.Uri('http://example.com/')
     return [
       new AdjustableFloatObject({
         graph: graph
         subj: graph.Uri(':demoResource')
         pred: graph.Uri(':startTime')
         ctx: ctx
       getTarget: () => $V([200, 300])
       getSuggestedTargetOffset: () => $V([-30, 0])
       })
     console.log(adj.config.getValue())
     return [adj]
       new AdjustableFloatObject({
         graph: graph
         subj: graph.Uri(':demoResource')
         pred: graph.Uri(':endTime')
         ctx: ctx
         getTarget: () => $V([300, 300])
         getSuggestedTargetOffset: () => $V([30, 0])
       })
+      ]
   makeZoomAdjs: ->
     left = new Adjustable({
       getValue: () => (@viewState.zoomSpec.t1)
       getTarget: () => $V([@fullZoomX(@viewState.zoomSpec.t1), @$.audio.offsetTop + @$.audio.offsetHeight / 2])
       getSuggestedTargetOffset: () => $V([-30, 0])
@@ @@ -82,43 +145,32 @@ Polymer @@
 Polymer
   is: 'light9-timeline-adjuster'
   properties:
     adj:
       type: Object
       notify: true
       observer: 'onAdj'
     target:
       type: Object
       notify: true
-    value:
+    displayValue:
       type: String
       computed: '_value(adj.value)'
     centerStyle:
       computed: '_centerStyle(adj.center)'
   _value: (adjValue) ->
     d3.format(".4g")(adjValue)
       type: Object
   _centerStyle: (center) ->
+    {
       x: center.e(1)
       y: center.e(2)
+    }
   onAdj: (adj) ->
     console.log('adj is here', adj, @adj)
     @adj.subscribe () =>
       @displayValue = @adj.getDisplayValue()
       center = @adj.getCenter()
       @centerStyle = {x: center.e(1), y: center.e(2)}
   ready: ->
     subj = graph.Uri(':demoResource')
     pred = graph.Uri(':startTime')
     ctx = graph.Uri('http://example.com/')
     graph.subscribe subj, pred, null, (patch) =>
       for q in patch.addQuads
         @set('adj.value', graph.toJs(q.object))
     drag = d3.behavior.drag()
   attached: ->
     drag = d3.drag()
     sel = d3.select(@$.label)
     sel.call(drag)
     drag.origin((d) -> {x: @offsetLeft, y: @offsetTop})
     drag.on 'dragstart', () =>
       drag._startValue = @adj.getValue()
     drag.subject((d) -> {x: @offsetLeft, y: @offsetTop})
     drag.container(@offsetParent)
     drag.on('start', () => @adj?.startDrag())
     drag.on 'drag', () =>
       console.log('drag', d3.event)
       newValue = drag._startValue + d3.event.x * .1
       graph.patchObject(subj, pred, graph.Literal(newValue), ctx)
       @adj?.continueDrag($V([d3.event.x, d3.event.y]))
     drag.on('end', () => @adj?.endDrag())

show/dance2016/timelinedemo.n3

➞

Show inline comments

 @prefix : <http://light9.bigasterisk.com/> .
 @prefix effect: <http://light9.bigasterisk.com/effect/> .
 @prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
 @prefix dev: <http://light9.bigasterisk.com/device/> .
 :song1 a :Timeline;
   :note :n1 .
 :n1
   :fadeIn 1.3;
   :start 1.5;
   :endSustain 2.0;
   :endRelease 2.4;
   :effectClass :usa;
   :attrOverride :ao0, :ao1 .
 :ao0 :effectAttr :chaseTempo; :value 100 .
 :a01 :effectAttr :chaseOffset; :value 0.12 .

0 comments (0 inline, 0 general)