# HG changeset patch
# User Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
# Date 1493112652 -3600
# Node ID ee3059744a6e0c5a24eaea875780cf5b72b73730
# Parent  622671f2ac13e207db0297067547143e3a06ae85
Add fixed images to ABX with an example

diff -r 622671f2ac13 -r ee3059744a6e interfaces/ABX.css
--- 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;
 }
diff -r 622671f2ac13 -r ee3059744a6e interfaces/ABX.js
--- 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);
diff -r 622671f2ac13 -r ee3059744a6e tests/examples/ABX_example.xml
--- 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>