Mercurial > hg > webaudioevaluationtool

changeset 2623:d4707c4a8b98

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
#146 implemented for Mushra
author Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk>
date Thu, 08 Dec 2016 14:33:01 +0000
parents 88b1c15eb202
children a33b66ca3baa
files interfaces/mushra.css interfaces/mushra.js tests/examples/mushra_example.xml xml/test-schema.xsd
diffstat 4 files changed, 88 insertions(+), 5 deletions(-) [+]
line wrap: on
line diff
--- a/interfaces/mushra.css	Thu Dec 08 14:03:39 2016 +0000
+++ b/interfaces/mushra.css	Thu Dec 08 14:33:01 2016 +0000
@@ -7,43 +7,52 @@
     /* Set the background colour (note US English spelling) to grey*/
     background-color: #ddd
 }
+
 div.pageTitle {
     width: auto;
     height: 20px;
     margin: 10px 0px;
 }
+
 div.pageTitle span {
     font-size: 1.5em;
 }
+
 button {
     /* Specify any button structure or style */
     min-width: 20px;
     background-color: #ddd
 }
+
 div#slider-holder {
     height: inherit;
     position: absolute;
     left: 0px;
     z-index: 3;
 }
+
 div#scale-holder {
     height: inherit;
     position: absolute;
     left: 0px;
     z-index: 2;
 }
+
 div#scale-text-holder {
     position: relative;
     width: 100px;
     float: left;
 }
+
 div.scale-text {
     position: absolute;
 }
+
 canvas#scale-canvas {
     position: relative;
     float: left;
 }
+
 div.track-slider {
     float: left;
     width: 94px;
@@ -53,22 +62,27 @@
     padding: 2px;
     margin-left: 50px;
 }
+
 div#outside-reference-holder {
     display: flex;
     align-content: center;
     justify-content: center;
     margin-bottom: 5px;
 }
+
 button.outside-reference {
     position: inherit;
     margin: 0px 5px;
 }
+
 div.track-slider-playing {
     background-color: #FFDDDD;
 }
+
 input.track-slider-range {
     margin: 2px 0px;
 }
+
 input[type=range][orient=vertical] {
     writing-mode: bt-lr;
     /* IE */
@@ -78,6 +92,7 @@
     padding: 0 5px;
     color: rgb(255, 144, 144);
 }
+
 input[type=range]::-webkit-slider-runnable-track {
     width: 8px;
     cursor: pointer;
@@ -85,6 +100,7 @@
     border-radius: 4px;
     border: 1px solid #000;
 }
+
 input[type=range]::-moz-range-track {
     width: 8px;
     cursor: pointer;
@@ -92,41 +108,79 @@
     border-radius: 4px;
     border: 1px solid #000;
 }
+
 input[type=range]::-ms-track {
     cursor: pointer;
     background: #fff;
     border-radius: 4px;
     border: 1px solid #000;
 }
+
 input.track-slider-not-moved[type=range]::-webkit-slider-runnable-track {
     background: #aaa;
 }
+
 input.track-slider-not-moved[type=range]::-moz-range-track {
     background: #aaa;
 }
+
 input[type=range]::-moz-range-thumb {
     margin-left: -7px;
     cursor: pointer;
     margin-top: -1px;
     box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
 }
+
 input[type=range]::-webkit-slider-thumb {
     cursor: pointer;
     margin-top: -1px;
     margin-left: -4px;
 }
+
 input[type=range]::-ms-thumb {
     cursor: pointer;
     margin-top: -1px;
     margin-left: -4px;
 }
+
 input[type=range]::-ms-tooltip {
     visibility: hidden;
 }
+
+input.track-slider-range-disabled {}
+
+input.track-slider-range-disabled[type=range]::-webkit-slider-runnable-track {
+    cursor: not-allowed;
+}
+
+input.track-slider-range-disabled[type=range]::-moz-range-track {
+    cursor: not-allowed;
+}
+
+input.track-slider-range-disabled[type=range]::-ms-track {
+    cursor: not-allowed;
+}
+
+input.track-slider-range-disabled[type=range]::-moz-range-thumb {
+    cursor: not-allowed;
+    background-color: #888;
+}
+
+input.track-slider-range-disabled[type=range]::-webkit-slider-thumb {
+    cursor: not-allowed;
+    background-color: #888;
+}
+
+input.track-slider-range-disabled[type=range]::-ms-thumb {
+    cursor: not-allowed;
+    background-color: #888;
+}
+
 div#page-count {
     float: left;
     margin: 0px 5px;
 }
+
 div#master-volume-holder {
     position: absolute;
     top: 10px;
--- a/interfaces/mushra.js	Thu Dec 08 14:03:39 2016 +0000
+++ b/interfaces/mushra.js	Thu Dec 08 14:33:01 2016 +0000
@@ -156,7 +156,7 @@
     // Find all the audioElements from the audioHolder
     var index = 0;
     var interfaceScales = testState.currentStateMap.interfaces[0].scales;
-    var labelType = page.label;
+    var labelType = audioHolderObject.label;
     if (labelType == "default") {
         labelType = "number";
     }
@@ -171,7 +171,7 @@
             audioObject.bindInterface(orNode);
         } else {
             // Create a slider per track
-            var label = interfaceContext.getLabel(labelType, index, page.labelStart);
+            var label = interfaceContext.getLabel(labelType, index, audioHolderObject.labelStart);
             var sliderObj = new sliderObject(audioObject, label);
 
             if (typeof audioHolderObject.initialPosition === "number") {
@@ -189,6 +189,13 @@
 
     });
 
+    if (testState.currentStateMap.restrictMovement) {
+        $(".track-slider-range").addClass("track-slider-range-disabled");
+        $(".track-slider-range").each(function (i, e) {
+            e.disabled = true
+        });
+    }
+
 
     var interfaceOptions = specification.interfaces.options.concat(interfaceObj.options);
     for (var option of interfaceOptions) {
@@ -237,6 +244,7 @@
 
 function sliderObject(audioObject, label) {
     // Constructs the slider object. We use the HTML5 slider object
+    var page = testState.currentStateMap;
     this.parent = audioObject;
     this.holder = document.createElement('div');
     this.title = document.createElement('span');
@@ -302,6 +310,7 @@
         return node;
     };
     this.startPlayback = function () {
+        var self = this;
         // Called when playback has begun
         this.play.setAttribute("playstate", "playing");
         $(".track-slider").removeClass('track-slider-playing');
@@ -311,12 +320,32 @@
             $(outsideReference).removeClass('track-slider-playing');
         }
         this.play.textContent = "Stop";
+        if (page.restrictMovement) {
+            if (page.loop) {
+                $(this.slider).removeClass("track-slider-range-disabled");
+                this.slider.removeAttribute("disabled");
+            } else {
+                $(".track-slider-range").addClass("track-slider-range-disabled");
+                $(this.slider).removeClass("track-slider-range-disabled");
+                $(".track-slider-range").each(function (i, m) {
+                    if (m == self.slider) {
+                        m.removeAttribute("disabled");
+                    } else {
+                        m.setAttribute("disabled", "true");
+                    }
+                });
+            }
+        }
     };
     this.stopPlayback = function () {
         // Called when playback has stopped. This gets called even if playback never started!
         this.play.setAttribute("playstate", "ready");
         $(this.holder).removeClass('track-slider-playing');
         this.play.textContent = "Play";
+        if (page.restrictMovement && page.loop) {
+            $(this.slider).addClass("track-slider-range-disabled");
+            this.slider.setAttribute("disabled", "true");
+        }
     };
     this.getValue = function () {
         return this.slider.value;
--- a/tests/examples/mushra_example.xml	Thu Dec 08 14:03:39 2016 +0000
+++ b/tests/examples/mushra_example.xml	Thu Dec 08 14:33:01 2016 +0000
@@ -53,7 +53,7 @@
                 <interfaceoption type="show" name="volume" />
             </interface>
         </setup>
-        <page id='test-0' hostURL="media/example/" randomiseOrder='true' repeatCount='0' loop='true' loudness="-12">
+        <page id='test-0' hostURL="media/example/" randomiseOrder='true' repeatCount='0' loop='true' loudness="-12" restrictMovement="true">
             <commentboxprefix>Comment on fragment</commentboxprefix>
             <interface>
                 <scales>
@@ -82,7 +82,7 @@
                 </surveyentry>
             </survey>
         </page>
-        <page id='test-1' hostURL="media/example/" randomiseOrder='true' repeatCount='0' loop='false'>
+        <page id='test-1' hostURL="media/example/" randomiseOrder='true' repeatCount='0' loop='false' restrictMovement="true">
             <commentboxprefix>Comment on fragment</commentboxprefix>
             <interface name="preference">
                 <title>Example Test Question</title>
--- a/xml/test-schema.xsd	Thu Dec 08 14:03:39 2016 +0000
+++ b/xml/test-schema.xsd	Thu Dec 08 14:33:01 2016 +0000
@@ -102,7 +102,7 @@
                 <xs:attribute ref="preSilence" />
                 <xs:attribute ref="postSilence" />
                 <xs:attribute ref="playOne" />
-                <xs:attribute name="restrictMovement" type="xs:boolean" default="fase" use="optional" />
+                <xs:attribute name="restrictMovement" type="xs:boolean" default="false" use="optional" />
             </xs:complexType>
         </xs:element>