Mercurial > hg > webaudioevaluationtool

changeset 2809:3a2dbff86da9

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
#138 Added timeline specific images
author Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
date Tue, 25 Apr 2017 11:08:12 +0100
parents d5d374b399cb
children d618889715d7
files interfaces/timeline.css interfaces/timeline.js tests/examples/timeline.xml
diffstat 3 files changed, 31 insertions(+), 16 deletions(-) [+]
line wrap: on
line diff
--- a/interfaces/timeline.css	Tue Apr 25 10:55:39 2017 +0100
+++ b/interfaces/timeline.css	Tue Apr 25 11:08:12 2017 +0100
@@ -10,7 +10,6 @@
     padding: 20px;
 }
 div.timeline-element-canvas-holder {
-    display: flex;
     width: inherit;
     height: 160px;
     margin: auto;
@@ -37,6 +36,12 @@
     background-color: gray;
 }
 div.timeline-element-comment-holder {}
+img.timeline-element-image {
+    height: 150px;
+    max-width: 20%;
+    display: inline-block;
+    float: right;
+}
 div.comment-entry {
     border: 1px solid #444444;
     max-width: 600px;
--- a/interfaces/timeline.js	Tue Apr 25 10:55:39 2017 +0100
+++ b/interfaces/timeline.js	Tue Apr 25 11:08:12 2017 +0100
@@ -98,9 +98,7 @@
         document.getElementById("page-title").textContent = interfaceObj.title;
     }
 
-    if (interfaceObj.image !== undefined || page.audioElements.some(function (elem) {
-            return elem.image !== undefined;
-        })) {
+    if (interfaceObj.image !== undefined) {
         document.getElementById("timeline-test-content").parentElement.insertBefore(interfaceContext.imageHolder.root, document.getElementById("timeline-test-content"));
         interfaceContext.imageHolder.setImage(interfaceObj.image);
     }
@@ -375,18 +373,30 @@
     this.canvas.layer2.className = "timeline-element-canvas canvas-layer2";
     this.canvas.layer3.className = "timeline-element-canvas canvas-layer3";
     this.canvas.layer4.className = "timeline-element-canvas canvas-layer3";
-    this.canvas.layer1.height = "150";
-    this.canvas.layer2.height = "150";
-    this.canvas.layer3.height = "150";
-    this.canvas.layer4.height = "150";
-    canvasHolder.appendChild(this.canvas.layer1);
-    canvasHolder.appendChild(this.canvas.layer2);
-    canvasHolder.appendChild(this.canvas.layer3);
-    canvasHolder.appendChild(this.canvas.layer4);
+    this.canvas.layer1.height = "160";
+    this.canvas.layer2.height = "160";
+    this.canvas.layer3.height = "160";
+    this.canvas.layer4.height = "160";
+    var canvasDiv = document.createElement("div");
+    canvasDiv.appendChild(this.canvas.layer1);
+    canvasDiv.appendChild(this.canvas.layer2);
+    canvasDiv.appendChild(this.canvas.layer3);
+    canvasDiv.appendChild(this.canvas.layer4);
+    canvasHolder.appendChild(canvasDiv);
     this.canvas.layer1.addEventListener("mousemove", this.canvas);
     this.canvas.layer1.addEventListener("mouseleave", this.canvas);
     this.canvas.layer1.addEventListener("click", this.canvas);
 
+    if (audioObject.specification.image) {
+        canvasDiv.style.width = "80%";
+        var image = document.createElement("img");
+        image.src = audioObject.specification.image;
+        image.className = "timeline-element-image";
+        canvasHolder.appendChild(image);
+    } else {
+        canvasDiv.style.width = "100%";
+    }
+
     var canvasIntervalID = null;
 
     this.playButton = {
--- a/tests/examples/timeline.xml	Tue Apr 25 10:55:39 2017 +0100
+++ b/tests/examples/timeline.xml	Tue Apr 25 11:08:12 2017 +0100
@@ -30,8 +30,8 @@
                     <scalelabel position="100">(5) Inaudible</scalelabel>
                 </scales>
             </interface>
-            <audioelement url="0.wav" id="track-1" />
-            <audioelement url="1.wav" id="track-2" />
+            <audioelement url="0.wav" id="track-1" image="https://upload.wikimedia.org/wikipedia/commons/0/0a/Drumkit-icon.png" />
+            <audioelement url="1.wav" id="track-2" image="https://upload.wikimedia.org/wikipedia/commons/0/0a/Drumkit-icon.png" />
             <commentquestions>
                 <commentradio id="preference">
                     <statement>Please enter your overall preference</statement>
@@ -61,8 +61,8 @@
                     <scalelabel position="100">(5) Inaudible</scalelabel>
                 </scales>
             </interface>
-            <audioelement url="0.wav" id="track-3" />
-            <audioelement url="1.wav" id="track-4" />
+            <audioelement url="0.wav" id="track-3" image="https://upload.wikimedia.org/wikipedia/commons/0/0a/Drumkit-icon.png" />
+            <audioelement url="1.wav" id="track-4" image="https://upload.wikimedia.org/wikipedia/commons/0/0a/Drumkit-icon.png" />
             <commentquestions>
                 <commentradio id="preference1">
                     <statement>Please enter your overall preference</statement>