Server: WavesUI : add x-ticks

diff --git a/timeside/player/static/timeside/js/timeside-waves.js b/timeside/player/static/timeside/js/timeside-waves.js
index aea53dc1dbfba3586ed61c8fe473cc9a5028188f..ddd93326f457a8248f82f016dd5ff8a18349046b 100644 (file)
--- a/timeside/player/static/timeside/js/timeside-waves.js
+++ b/timeside/player/static/timeside/js/timeside-waves.js
@@ -1,14 +1,16 @@
 var d3 = wavesUI.d3;
 var loader = new loaders.AudioBufferLoader();
 
-function waveform(div_id) {
+var graph_width = 1024
 
+function waveform(div_id) {
+    var id_sub = '#' + div_id + '_sub';
     // 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,
@@ -20,7 +22,7 @@ function waveform(div_id) {
             // 1. creat graph
             var graph = wavesUI.timeline()
                 .xDomain([0, audioBuffer.duration])
-                .width(1024)
+                .width(graph_width)
                 .height(140);
 
             // 2. create layers
@@ -45,10 +47,10 @@ function waveform(div_id) {
 
             // 4. draw graph
             d3.select(id).call(graph.draw);
-
+           
             var graph_sub = wavesUI.timeline()
                 .xDomain([0, audioBuffer.duration])
-                .width(1024)
+                .width(graph_width)
                 .height(140);
 
             var waveformLayerSub = wavesUI.waveform()
@@ -61,15 +63,45 @@ function waveform(div_id) {
 
             d3.select(id_sub).call(graph_sub.draw);
 
-            var zoomLayer = wavesUI.zoomer()
+           // Add X-Ticks addTicks(id_sub, graph_sub);
+           // Create a svg element for the zoomer
+           var zoomerSvg = d3.select(id_sub).append('svg')
+               .attr('width', graph_width)
+               .attr('height', 30);
+
+           // Create the time axis - here a common d3 axis
+           // Graph must be drawn in order to have `graph.xScale` up to date
+           var xAxis = d3.svg.axis()
+               .scale(graph_sub.xScale)
+               .tickSize(1)
+               .tickFormat(function(d) {
+                   var form = '%S:%L';
+                   var date = new Date(d * 1000);
+                   var format = d3.time.format(form);
+                   return format(date);
+               });
+
+           // Add the axis to the newly created svg element
+           var axis = zoomerSvg.append('g')
+               .attr('class', 'x-axis')
+               .attr('transform', 'translate(0, 0)')
+               .attr('fill', '#555')
+               .call(xAxis);
+
+           var zoomLayer = wavesUI.zoomer()
             .select(id_sub)
             .on('mousemove', function(e) {
-               // update graph xZoom
-               graph_sub.xZoom(e);
+               // update graph xZoom
+               graph_sub.xZoom(e);
+               // update axis
+               axis.call(xAxis);
+               
             })
             .on('mouseup', function(e) {
                 // set the final xZoom value of the graph
                 graph_sub.xZoomSet();
+               // update axis
+               axis.call(xAxis);
             });
 
         } catch (err) {
@@ -79,6 +111,7 @@ function waveform(div_id) {
 }
 
 
+
 function timeline_get_data(json_url, div_id) {
     $.getJSON(json_url, function(data_list) {
 
@@ -148,7 +181,7 @@ function timeline_segment_value(data, div_id) {
     var graph = wavesUI.timeline()
         .xDomain([0, duration])
         .yDomain([0, max_value])
-        .width(1024)
+        .width(graph_width)
         .height(140);
 
     var segmentLayer = wavesUI.segment()
@@ -207,7 +240,7 @@ function timeline_event_label(data, div_id) {
     var graph = wavesUI.timeline()
         .xDomain([0, duration])
         .yDomain([0, max_value])
-        .width(1024)
+        .width(graph_width)
         .height(140);
 
     var markerLayer = wavesUI.marker()

diff --git a/timeside/server/templates/timeside/item_detail.html b/timeside/server/templates/timeside/item_detail.html
index 776cb46faa05651e4335aea5ea096a6d20fdd24b..16c2b6195a6f34ce78816945c4c9fd8d8ff16d90 100644 (file)
--- a/timeside/server/templates/timeside/item_detail.html
+++ b/timeside/server/templates/timeside/item_detail.html
@@ -8,8 +8,7 @@
 <script type="text/javascript">
 
 $(window).ready(function() {
-    waveform("waveform");
-
+    div_wav_sub = waveform("waveform");
     $('.timeline').each( function (){
         var div_id = $(this).attr('id');
         var json_url = $(this).attr('json');