Mercurial > hg > webaudioevaluationtool

changeset 2811:d618889715d7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Merge branch 'vnext' into Dev_main
author Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
date Tue, 25 Apr 2017 12:11:42 +0100
parents 3a2dbff86da9 (diff) 939d5fdfdc32 (current diff)
children 2c4a060965a4 6669951d4856
files
diffstat 9 files changed, 76 insertions(+), 35 deletions(-) [+]
line wrap: on
line diff
--- a/interfaces/ABX.css	Tue Apr 25 12:11:33 2017 +0100
+++ b/interfaces/ABX.css	Tue Apr 25 12:11:42 2017 +0100
@@ -46,6 +46,17 @@
     display: block;
     margin: auto;
 }
+div.comparator-image {
+    background-color: rgba(255, 255, 255, 0);
+}
+img.comparator-image {
+    width: inherit;
+    height: inherit;
+    z-index: -1;
+    position: absolute;
+    display: inline;
+    right: 0px;
+}
 div.disabled {
     background-color: #AAA;
 }
--- a/interfaces/ABX.js	Tue Apr 25 12:11:33 2017 +0100
+++ b/interfaces/ABX.js	Tue Apr 25 12:11:42 2017 +0100
@@ -208,6 +208,15 @@
         this.playback.className = 'comparator-button';
         this.playback.disabled = true;
         this.playback.textContent = "Listen";
+        if (element.specification.image) {
+            this.selector.className += " comparator-image";
+            var image = document.createElement("img");
+            image.src = element.specification.image;
+            image.className = "comparator-image";
+            this.selector.appendChild(image);
+        } else if (label === "X") {
+            this.selector.classList.add('inactive');
+        }
         this.box.appendChild(this.selector);
         this.box.appendChild(this.playback);
         this.selectorClicked = function (event) {
@@ -391,7 +400,6 @@
     var label;
     var audioObject = audioEngineContext.newTrack(element);
     node = buildElement.call(this, 3, audioObject);
-    node.box.children[0].classList.add('inactive');
     audioObject.bindInterface(node);
     this.X = node;
     this.boxHolders.appendChild(node.box);
--- a/interfaces/discrete.js	Tue Apr 25 12:11:33 2017 +0100
+++ b/interfaces/discrete.js	Tue Apr 25 12:11:42 2017 +0100
@@ -137,7 +137,7 @@
         document.getElementById("pageTitle").textContent = interfaceObj.title;
     }
 
-    if (interfaceObj.image !== undefined || audioHolderObject.audioElements.some(function (elem) {
+    if (interfaceObj.image !== undefined || page.audioElements.some(function (elem) {
             return elem.image !== undefined;
         })) {
         document.getElementById("testContent").insertBefore(interfaceContext.imageHolder.root, document.getElementById("slider"));
--- a/interfaces/horizontal-sliders.js	Tue Apr 25 12:11:33 2017 +0100
+++ b/interfaces/horizontal-sliders.js	Tue Apr 25 12:11:42 2017 +0100
@@ -137,7 +137,7 @@
         document.getElementById("pageTitle").textContent = interfaceObj.title;
     }
 
-    if (interfaceObj.image !== undefined || audioHolderObject.audioElements.some(function (elem) {
+    if (interfaceObj.image !== undefined || page.audioElements.some(function (elem) {
             return elem.image !== undefined;
         })) {
         document.getElementById("testContent").insertBefore(interfaceContext.imageHolder.root, document.getElementById("slider"));
--- a/interfaces/timeline.css	Tue Apr 25 12:11:33 2017 +0100
+++ b/interfaces/timeline.css	Tue Apr 25 12:11:42 2017 +0100
@@ -3,17 +3,16 @@
     justify-content: center;
 }
 div.timeline-element-content {
-    max-width: 800px;
+    width: 90%;
     min-width: 200px;
     border: 1px solid black;
     margin: 10px 0px;
     padding: 20px;
 }
 div.timeline-element-canvas-holder {
-    display: flex;
     width: inherit;
     height: 160px;
-    margin-left: 50px;
+    margin: auto;
 }
 canvas.canvas-layer1 {
     position: absolute;
@@ -36,10 +35,12 @@
 canvas.canvas-disabled {
     background-color: gray;
 }
-div.timeline-element-comment-holder {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+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;
@@ -49,14 +50,22 @@
     padding: 5px;
     height: 80px;
     border-radius: 10px;
-    display: flex;
-    flex-direction: column;
+    display: inline-block;
+    text-align: center;
 }
 div.comment-entry-header {
-    display: flex;
-    justify-content: space-between;
+    display: table;
+    text-align: unset;
+    width: 100%;
+}
+div.comment-entry-header span {
+    float: left;
+}
+div.comment-entry-header button {
+    float: right;
 }
 textarea.comment-entry-text {
     resize: none;
     margin: auto;
+    width: 90%;
 }
--- a/interfaces/timeline.js	Tue Apr 25 12:11:33 2017 +0100
+++ b/interfaces/timeline.js	Tue Apr 25 12:11:42 2017 +0100
@@ -98,6 +98,11 @@
         document.getElementById("page-title").textContent = interfaceObj.title;
     }
 
+    if (interfaceObj.image !== undefined) {
+        document.getElementById("timeline-test-content").parentElement.insertBefore(interfaceContext.imageHolder.root, document.getElementById("timeline-test-content"));
+        interfaceContext.imageHolder.setImage(interfaceObj.image);
+    }
+
     // Delete outside reference
     var outsideReferenceHolder = document.getElementById("outside-reference-holder");
     outsideReferenceHolder.innerHTML = "";
@@ -249,7 +254,8 @@
         layer2: document.createElement("canvas"),
         layer3: document.createElement("canvas"),
         layer4: document.createElement("canvas"),
-        resize: function (w) {
+        resize: function () {
+            var w = $(this.layer1.parentElement).width();
             this.layer1.width = w;
             this.layer2.width = w;
             this.layer3.width = w;
@@ -367,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 = {
@@ -402,12 +420,7 @@
     buttonHolder.appendChild(this.playButton.DOM);
 
     this.resize = function () {
-        var w = window.innerWidth;
-        w = Math.min(w, 800);
-        w = Math.max(w, 200);
-        root.style.width = w + "px";
-        var c_w = w - 100;
-        this.canvas.resize(c_w);
+        this.canvas.resize();
     };
 
     this.enable = function () {
Binary file media/TEA/TEA-anchor-2.wav has changed
--- a/tests/examples/ABX_example.xml	Tue Apr 25 12:11:33 2017 +0100
+++ b/tests/examples/ABX_example.xml	Tue Apr 25 12:11:42 2017 +0100
@@ -58,8 +58,8 @@
             <interface>
                 <title>Depth</title>
             </interface>
-            <audioelement url="0.wav" id="track-0" />
-            <audioelement url="1.wav" id="track-1" />
+            <audioelement url="0.wav" id="track-0" image="https://upload.wikimedia.org/wikipedia/commons/0/0a/Drumkit-icon.png" />
+            <audioelement url="1.wav" id="track-1" image="https://upload.wikimedia.org/wikipedia/commons/0/0a/Drumkit-icon.png" />
             <survey location="before">
                 <surveyentry type="statement" id="test-0-intro">
                     <statement>A two way comparison using randomised element order, automatic loudness and synchronised looping.</statement>
--- a/tests/examples/timeline.xml	Tue Apr 25 12:11:33 2017 +0100
+++ b/tests/examples/timeline.xml	Tue Apr 25 12:11:42 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>