From: Guillaume Pellerin <yomguy@parisson.com>
Date: Thu, 5 Mar 2015 14:41:23 +0000 (+0100)
Subject: pushed waves tools to a separate js file
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=5ab4ef9f5542c3487bea827086a317815a723bda;p=timeside.git

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 c3d5ee8..da537df 100644
--- 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 de88308..776cb46 100644
--- 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 %}