Mercurial > hg > webaudioevaluationtool

changeset 2806:ee3059744a6e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add fixed images to ABX with an example
author Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
date Tue, 25 Apr 2017 10:30:52 +0100
parents 622671f2ac13
children 510a64224eec
files interfaces/ABX.css interfaces/ABX.js tests/examples/ABX_example.xml
diffstat 3 files changed, 22 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/interfaces/ABX.css	Tue Apr 25 09:52:44 2017 +0100
+++ b/interfaces/ABX.css	Tue Apr 25 10:30:52 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 09:52:44 2017 +0100
+++ b/interfaces/ABX.js	Tue Apr 25 10:30:52 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/tests/examples/ABX_example.xml	Tue Apr 25 09:52:44 2017 +0100
+++ b/tests/examples/ABX_example.xml	Tue Apr 25 10:30:52 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>