Server: generate WavesUI grapher for all aubio_temporal results

diff --git a/timeside/server/templates/timeside/item_detail.html b/timeside/server/templates/timeside/item_detail.html
index 896a33abff57feac309f7d7730be9a15f7ec73c7..2c329ee5dfd3d615a6c075b57a1f848848bfc4af 100644 (file)
--- a/timeside/server/templates/timeside/item_detail.html
+++ b/timeside/server/templates/timeside/item_detail.html
@@ -4,14 +4,47 @@
 {% block extra_stylesheets %}
 {% endblock %}
 
-{% block extra_javascript %}
+{% block content %}
+
+<h1>{{ object.title }}</h1>
+
+{% block html5-player %}
+ <audio controls>
+  <source src="download/ogg" type="audio/ogg">
+  <source src="download/mp3" type="audio/mpeg">
+Your browser does not support the audio element.
+</audio>
+{% endblock html5-player %}
+
+<div id="timeline"></div>
+
+<ul>
+   <li>File: {{ object.file }}</li>
+   {% if object.url %}<li>url : {{ object.url }}</li>{% endif %}
+   <li>mime_type : {{ object.mime_type }}</li>
+   <li>sha1 : {{ object.sha1 }}</li>
+   <li>hdf5 : {{ object.hdf5 }}</li>
+   <li>uuid : {{ object.uuid }}</li>
+   <li>author: {{ object.author }}</li>
+   <li>lock : {{ object.lock }}</li>
+</ul>
+
+Results:
+
+<ul>
+{% for result in object.results.all %}
+<li><a href="{% if 'image' in result.mime_type %}{% url "timeside-result-png" result.id %}{% elif 'audio' in result.mime_type %}{% url "timeside-result-audio" result.id %}{% else %}{% url "timeside-result-json" result.id %}{% endif %}">{{ result.preset.processor }}</a> ({{ result.uuid }})</li>
+{% if 'aubio_temporal' in result.preset.processor|safe %}
+<div id="graph-{{ result.id }}" ></div>
 <button id="add-data">add</button>
 <script type="text/javascript">
 var d3 = wavesUI.d3;
 var loader = new loaders.AudioBufferLoader();
-
+var testtt = '{{result.preset.processor|safe}}'
 var segmentExample = function() {
-    $.getJSON('http://localhost:8000/results/21/json/', function(data) {
+        var result_url = '{% url "timeside-result-json" result.id %}'
+        var div_id = '#graph-{{ result.id }}'
+        $.getJSON('{% url "timeside-result-json" result.id %}', function(data) {
 
         var trackDuration = data[0].audio_metadata.duration;
         var durations = data[0].data_object.duration.numpyArray;
@@ -30,7 +63,7 @@ var segmentExample = function() {
         // var minValue = Math.min.apply(null, values);
         var maxValue = Math.max.apply(null, values);
 
-        // to update the data, add it to the data araay and redraw the graph
+        // to update the data, add it to the data array and redraw the graph
         $('#add-data').on('click', function(e) {
             e.preventDefault();
 
@@ -72,7 +105,7 @@ var segmentExample = function() {
                 graph.add(segmentLayer);
 
                 // 4. draw graph
-                d3.select('#timeline').call(graph.draw);
+                d3.select(div_id).call(graph.draw);
             } catch (err) {
                 console.log(err);
             }
@@ -85,38 +118,7 @@ $(window).ready(function() {
 });
 
 </script>
-{% endblock %}
-
-{% block content %}
-
-<h1>{{ object.title }}</h1>
-
-{% block html5-player %}
- <audio controls>
-  <source src="download/ogg" type="audio/ogg">
-  <source src="download/mp3" type="audio/mpeg">
-Your browser does not support the audio element.
-</audio>
-{% endblock html5-player %}
-
-<div id="timeline"></div>
-
-<ul>
-   <li>File: {{ object.file }}</li>
-   {% if object.url %}<li>url : {{ object.url }}</li>{% endif %}
-   <li>mime_type : {{ object.mime_type }}</li>
-   <li>sha1 : {{ object.sha1 }}</li>
-   <li>hdf5 : {{ object.hdf5 }}</li>
-   <li>uuid : {{ object.uuid }}</li>
-   <li>author: {{ object.author }}</li>
-   <li>lock : {{ object.lock }}</li>
-</ul>
-
-Results:
-
-<ul>
-{% for result in object.results.all %}
-  <li><a href="{% if 'image' in result.mime_type %}{% url "timeside-result-png" result.id %}{% elif 'audio' in result.mime_type %}{% url "timeside-result-audio" result.id %}{% else %}{% url "timeside-result-json" result.id %}{% endif %}">{{ result.preset.processor }}</a> ({{ result.uuid }})</li>
+{% endif %}
 {% endfor %}
 <ul>