pushed waves tools to a separate js file

diff --git a/timeside/server/templates/timeside/base.html b/timeside/server/templates/timeside/base.html
index c3d5ee8eef9ee0b61cef2e1ed0752c7d976982b6..da537df4314b8ab6c42542ba7141914a3351680e 100644 (file)
--- a/timeside/server/templates/timeside/base.html
+++ b/timeside/server/templates/timeside/base.html
@@ -16,10 +16,10 @@
 {% block javascript %}
     <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
     <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
-    <script src="{{ STATIC_URL }}timeside/lib/sm2/soundmanager2-nodebug-jsmin.js"></script>
-    <script src="{{ STATIC_URL }}timeside/js/timeside.js"></script>
     <script src="{{ STATIC_URL }}timeside/lib/waves/ui/waves-ui.umd.js"></script>
     <script src="{{ STATIC_URL }}timeside/lib/waves/loaders/loaders.min.js"></script>
+    <script src="{{ STATIC_URL }}timeside/js/timeside.js"></script>
+    <script src="{{ STATIC_URL }}timeside/js/timeside-waves.js"></script>
 {% endblock %}
 
 {% block extra_javascript %}{% endblock %}

diff --git a/timeside/server/templates/timeside/item_detail.html b/timeside/server/templates/timeside/item_detail.html
index de88308d0728492a0ebd7c2f9c0024e801bc3d93..776cb46faa05651e4335aea5ea096a6d20fdd24b 100644 (file)
--- a/timeside/server/templates/timeside/item_detail.html
+++ b/timeside/server/templates/timeside/item_detail.html
@@ -5,260 +5,9 @@
 {% endblock %}
 
 {% block extra_javascript %}
-
 <script type="text/javascript">
-var d3 = wavesUI.d3;
-var loader = new loaders.AudioBufferLoader();
-
-var waveform = function(div_id) {
-
-    // add waveform
-    loader.load('download/ogg').then(function(audioBuffer) {
-        try {
-
-            var id = '#' + div_id;
-            var id_sub = '#' + div_id + '_sub';
-
-            var data = [{
-                start: audioBuffer.duration/4,
-                duration: audioBuffer.duration/2
-            }];
-
-            var buffer = audioBuffer.getChannelData(0).buffer
-
-            // 1. creat graph
-            var graph = wavesUI.timeline()
-                .xDomain([0, audioBuffer.duration])
-                .width(1024)
-                .height(140);
-
-            // 2. create layers
-            var waveformLayer = wavesUI.waveform()
-                .data(buffer)
-                .sampleRate(audioBuffer.sampleRate)
-                .color('purple')
-                // .opacity(0.8);
-
-            var segmentLayer = wavesUI.segment()
-                .params({
-                    interactions: { editable: true },
-                    opacity: 0.4,
-                    handlerOpacity: 0.6
-                })
-                .data(data)
-                .color('steelblue');
-
-            // 3. add layers to graph
-            graph.add(waveformLayer);
-            graph.add(segmentLayer);
-
-            // 4. draw graph
-            d3.select(id).call(graph.draw);
-
-            var graph_sub = wavesUI.timeline()
-                .xDomain([0, audioBuffer.duration])
-                .width(1024)
-                .height(140);
-
-            var waveformLayerSub = wavesUI.waveform()
-                .data(buffer)
-                .sampleRate(audioBuffer.sampleRate)
-                .color('purple')
-                // .opacity(0.8);
-
-            graph_sub.add(waveformLayerSub);
-
-            d3.select(id_sub).call(graph_sub.draw);
-
-            var zoomLayer = wavesUI.zoomer()
-            .select(id_sub)
-            .on('mousemove', function(e) {
-               // update graph xZoom
-               graph_sub.xZoom(e);
-            })
-            .on('mouseup', function(e) {
-                // set the final xZoom value of the graph
-                graph_sub.xZoomSet();
-            });
-
-        } catch (err) {
-            console.log(err);
-        }
-    }, function() {});
-}
-
-
-var timeline_get_data = function(json_url, div_id) {
-    $.getJSON(json_url, function(data_list) {
-       
-       for (var i = 0; i < data_list.length; i++) {
-           var data = data_list[i];
-           timeline_result(data, div_id);
-       }
-    });
-}
-
-var timeline_result = function(data, div_id) {
-   
-    var time_mode = data.time_mode
-    var data_mode = data.data_mode
-    var id = data.id_metadata.id
-    
-    switch (time_mode) {
-    case 'global':
-       console.log(id, time_mode, data_mode);
-       break;
-    case 'event':
-       switch (data_mode) {
-       case 'value':
-           console.log(id, time_mode, data_mode);
-           break;
-       case 'label':
-           timeline_event_label(data, div_id);
-           break;
-       }
-       break;
-    case 'segment':
-       switch (data_mode) {
-       case 'value':
-           timeline_segment_value(data, div_id);
-           break;
-           
-       case 'label':
-           console.log(id, time_mode, data_mode);
-           break;
-       }
-       break;
-    case 'framewise':
-       console.log(id, time_mode, data_mode);
-       break;
-    }   
-}
-
-
-var timeline_segment_value = function(data, div_id) {
-    var duration = data.audio_metadata.duration;
-    var durations = data.data_object.duration.numpyArray;
-    var starts = data.data_object.time.numpyArray;
-    var values = data.data_object.value.numpyArray;
-    // format data
-    var data = durations.map(function(dummy, index) {
-        return {
-            start: starts[index],
-            duration: durations[index],
-            height: values[index]
-        };
-    });
-    
-    
-    // var minValue = Math.min.apply(null, values);
-    var max_value = Math.max.apply(null, values);
-    
-    var graph = wavesUI.timeline()
-        .xDomain([0, duration])
-        .yDomain([0, max_value])
-        .width(1024)
-        .height(140);
-    
-    var segmentLayer = wavesUI.segment()
-        .data(data)
-        .color('steelblue')
-        .opacity(0.8);
-    
-    // 3. add layers to graph
-    graph.add(segmentLayer);
-   
-    // 4. draw graph
-    d3.select('#'+div_id).call(graph.draw);
-    
-    var zoomLayer = wavesUI.zoomer()
-        .select('#'+div_id)
-        .on('mousemove', function(e) {
-           // update graph xZoom
-           graph.xZoom(e);
-        })
-        .on('mouseup', function(e) {
-            // set the final xZoom value of the graph
-            graph.xZoomSet();
-        });
-    
-    // to update the data, add it to the data array and redraw the graph
-    $('#add-data').on('click', function(e) {
-        e.preventDefault();
-       
-        var datum = {
-            start: 2,
-            duration: 1,
-            height: 1000
-        };
-       
-        data.push(datum);
-        graph.update();
-    });
-}
-
-var timeline_event_label = function(data, div_id) {
-    var duration = data.audio_metadata.duration;
-    var starts = data.data_object.time.numpyArray;
-    var values = data.data_object.label
-    // format data
-    var data = starts.map(function(dummy, index) {
-        return {
-            x: starts[index],
-            height: values[index]
-        };
-    });
-    
-    
-    // var minValue = Math.min.apply(null, values);
-    var max_value = Math.max.apply(null, values);
-    
-    var graph = wavesUI.timeline()
-        .xDomain([0, duration])
-        .yDomain([0, max_value])
-        .width(1024)
-        .height(140);
-    
-    var markerLayer = wavesUI.marker()
-        .data(data)
-        .color('steelblue')
-        .opacity(0.8);
-    
-    // 3. add layers to graph
-    graph.add(markerLayer);
-   
-    // 4. draw graph
-    d3.select('#'+div_id).call(graph.draw);
-    
-    var zoomLayer = wavesUI.zoomer()
-        .select('#'+div_id)
-        .on('mousemove', function(e) {
-           // update graph xZoom
-           graph.xZoom(e);
-        })
-        .on('mouseup', function(e) {
-            // set the final xZoom value of the graph
-            graph.xZoomSet();
-        });
-    
-    // to update the data, add it to the data array and redraw the graph
-    $('#add-data').on('click', function(e) {
-        e.preventDefault();
-       
-        var datum = {
-            start: 2,
-            duration: 1,
-            height: 1000
-        };
-       
-        data.push(datum);
-        graph.update();
-    });
-}
-
 
 $(window).ready(function() {
-
     waveform("waveform");
 
     $('.timeline').each( function (){
@@ -266,12 +15,8 @@ $(window).ready(function() {
         var json_url = $(this).attr('json');
         timeline_get_data(json_url, div_id);
     });
-
 });
-
 </script>
-
-
 {% endblock %}
 
 {% block content %}