Mercurial > hg > webaudioevaluationtool
comparison interfaces/discrete.js @ 2538:464c6c6692d6
Beautified entire project.
author | Nicholas Jillings <nicholas.jillings@mail.bcu.ac.uk> |
---|---|
date | Mon, 14 Nov 2016 14:17:03 +0000 |
parents | 2a1f42b5614a |
children | 342ef7948c47 |
comparison
equal
deleted
inserted
replaced
2536:527020a63203 | 2538:464c6c6692d6 |
---|---|
1 // Once this is loaded and parsed, begin execution | 1 // Once this is loaded and parsed, begin execution |
2 loadInterface(); | 2 loadInterface(); |
3 | 3 |
4 function loadInterface() { | 4 function loadInterface() { |
5 // Use this to do any one-time page / element construction. For instance, placing any stationary text objects, | 5 // Use this to do any one-time page / element construction. For instance, placing any stationary text objects, |
6 // holding div's, or setting up any nodes which are present for the entire test sequence | 6 // holding div's, or setting up any nodes which are present for the entire test sequence |
7 | 7 |
8 // The injection point into the HTML page | 8 // The injection point into the HTML page |
9 interfaceContext.insertPoint = document.getElementById("topLevelBody"); | 9 interfaceContext.insertPoint = document.getElementById("topLevelBody"); |
10 var testContent = document.createElement('div'); | 10 var testContent = document.createElement('div'); |
11 testContent.id = 'testContent'; | 11 testContent.id = 'testContent'; |
12 | 12 |
13 // Create the top div for the Title element | 13 // Create the top div for the Title element |
14 var titleAttr = specification.title; | 14 var titleAttr = specification.title; |
15 var title = document.createElement('div'); | 15 var title = document.createElement('div'); |
16 title.className = "title"; | 16 title.className = "title"; |
17 title.align = "center"; | 17 title.align = "center"; |
18 var titleSpan = document.createElement('span'); | 18 var titleSpan = document.createElement('span'); |
19 titleSpan.id = "test-title"; | 19 titleSpan.id = "test-title"; |
20 | 20 |
21 // Set title to that defined in XML, else set to default | 21 // Set title to that defined in XML, else set to default |
22 if (titleAttr != undefined) { | 22 if (titleAttr != undefined) { |
23 titleSpan.textContent = titleAttr; | 23 titleSpan.textContent = titleAttr; |
24 } else { | 24 } else { |
25 titleSpan.textContent = 'Listening test'; | 25 titleSpan.textContent = 'Listening test'; |
26 } | 26 } |
27 // Insert the titleSpan element into the title div element. | 27 // Insert the titleSpan element into the title div element. |
28 title.appendChild(titleSpan); | 28 title.appendChild(titleSpan); |
29 | 29 |
30 var pagetitle = document.createElement('div'); | 30 var pagetitle = document.createElement('div'); |
31 pagetitle.className = "pageTitle"; | 31 pagetitle.className = "pageTitle"; |
32 pagetitle.align = "center"; | 32 pagetitle.align = "center"; |
33 var titleSpan = document.createElement('span'); | 33 var titleSpan = document.createElement('span'); |
34 titleSpan.id = "pageTitle"; | 34 titleSpan.id = "pageTitle"; |
35 pagetitle.appendChild(titleSpan); | 35 pagetitle.appendChild(titleSpan); |
36 | 36 |
37 // Create Interface buttons! | 37 // Create Interface buttons! |
38 var interfaceButtons = document.createElement('div'); | 38 var interfaceButtons = document.createElement('div'); |
39 interfaceButtons.id = 'interface-buttons'; | 39 interfaceButtons.id = 'interface-buttons'; |
40 interfaceButtons.style.height = '25px'; | 40 interfaceButtons.style.height = '25px'; |
41 | 41 |
42 // Create playback start/stop points | 42 // Create playback start/stop points |
43 var playback = document.createElement("button"); | 43 var playback = document.createElement("button"); |
44 playback.innerHTML = 'Stop'; | 44 playback.innerHTML = 'Stop'; |
45 playback.id = 'playback-button'; | 45 playback.id = 'playback-button'; |
46 playback.style.float = 'left'; | 46 playback.style.float = 'left'; |
47 // onclick function. Check if it is playing or not, call the correct function in the | 47 // onclick function. Check if it is playing or not, call the correct function in the |
48 // audioEngine, change the button text to reflect the next state. | 48 // audioEngine, change the button text to reflect the next state. |
49 playback.onclick = function() { | 49 playback.onclick = function () { |
50 if (audioEngineContext.status == 1) { | 50 if (audioEngineContext.status == 1) { |
51 audioEngineContext.stop(); | 51 audioEngineContext.stop(); |
52 this.innerHTML = 'Stop'; | 52 this.innerHTML = 'Stop'; |
53 var time = audioEngineContext.timer.getTestTime(); | 53 var time = audioEngineContext.timer.getTestTime(); |
54 console.log('Stopped at ' + time); // DEBUG/SAFETY | 54 console.log('Stopped at ' + time); // DEBUG/SAFETY |
55 } | 55 } |
56 }; | 56 }; |
57 | 57 |
58 // Create outside reference holder | 58 // Create outside reference holder |
59 var outsideRef = document.createElement("div"); | 59 var outsideRef = document.createElement("div"); |
60 outsideRef.id = "outside-reference-holder"; | 60 outsideRef.id = "outside-reference-holder"; |
61 | 61 |
62 // Create Submit (save) button | 62 // Create Submit (save) button |
63 var submit = document.createElement("button"); | 63 var submit = document.createElement("button"); |
64 submit.innerHTML = 'Next'; | 64 submit.innerHTML = 'Next'; |
65 submit.onclick = buttonSubmitClick; | 65 submit.onclick = buttonSubmitClick; |
66 submit.id = 'submit-button'; | 66 submit.id = 'submit-button'; |
67 submit.style.float = 'left'; | 67 submit.style.float = 'left'; |
68 // Append the interface buttons into the interfaceButtons object. | 68 // Append the interface buttons into the interfaceButtons object. |
69 interfaceButtons.appendChild(playback); | 69 interfaceButtons.appendChild(playback); |
70 interfaceButtons.appendChild(submit); | 70 interfaceButtons.appendChild(submit); |
71 | 71 |
72 // Create a slider box | 72 // Create a slider box |
73 var sliderBox = document.createElement('div'); | 73 var sliderBox = document.createElement('div'); |
74 sliderBox.style.width = "100%"; | 74 sliderBox.style.width = "100%"; |
75 sliderBox.style.height = window.innerHeight - 200+12 + 'px'; | 75 sliderBox.style.height = window.innerHeight - 200 + 12 + 'px'; |
76 sliderBox.style.marginBottom = '10px'; | 76 sliderBox.style.marginBottom = '10px'; |
77 sliderBox.id = 'slider'; | 77 sliderBox.id = 'slider'; |
78 var scaleHolder = document.createElement('div'); | 78 var scaleHolder = document.createElement('div'); |
79 scaleHolder.id = "scale-holder"; | 79 scaleHolder.id = "scale-holder"; |
80 scaleHolder.style.marginLeft = "107px"; | 80 scaleHolder.style.marginLeft = "107px"; |
81 sliderBox.appendChild(scaleHolder); | 81 sliderBox.appendChild(scaleHolder); |
82 var scaleText = document.createElement('div'); | 82 var scaleText = document.createElement('div'); |
83 scaleText.id = "scale-text-holder"; | 83 scaleText.id = "scale-text-holder"; |
84 scaleText.style.height = "25px"; | 84 scaleText.style.height = "25px"; |
85 scaleText.style.width = "100%"; | 85 scaleText.style.width = "100%"; |
86 scaleHolder.appendChild(scaleText); | 86 scaleHolder.appendChild(scaleText); |
87 var scaleCanvas = document.createElement('canvas'); | 87 var scaleCanvas = document.createElement('canvas'); |
88 scaleCanvas.id = "scale-canvas"; | 88 scaleCanvas.id = "scale-canvas"; |
89 scaleCanvas.style.marginLeft = "150px"; | 89 scaleCanvas.style.marginLeft = "150px"; |
90 scaleHolder.appendChild(scaleCanvas); | 90 scaleHolder.appendChild(scaleCanvas); |
91 var sliderObjectHolder = document.createElement('div'); | 91 var sliderObjectHolder = document.createElement('div'); |
92 sliderObjectHolder.id = 'slider-holder'; | 92 sliderObjectHolder.id = 'slider-holder'; |
93 sliderObjectHolder.align = "center"; | 93 sliderObjectHolder.align = "center"; |
94 sliderBox.appendChild(sliderObjectHolder); | 94 sliderBox.appendChild(sliderObjectHolder); |
95 | 95 |
96 // Global parent for the comment boxes on the page | 96 // Global parent for the comment boxes on the page |
97 var feedbackHolder = document.createElement('div'); | 97 var feedbackHolder = document.createElement('div'); |
98 feedbackHolder.id = 'feedbackHolder'; | 98 feedbackHolder.id = 'feedbackHolder'; |
99 | 99 |
100 testContent.style.zIndex = 1; | 100 testContent.style.zIndex = 1; |
101 interfaceContext.insertPoint.innerHTML = ""; // Clear the current schema | 101 interfaceContext.insertPoint.innerHTML = ""; // Clear the current schema |
102 | 102 |
103 // Inject into HTML | 103 // Inject into HTML |
104 testContent.appendChild(title); // Insert the title | 104 testContent.appendChild(title); // Insert the title |
105 testContent.appendChild(pagetitle); | 105 testContent.appendChild(pagetitle); |
106 testContent.appendChild(interfaceButtons); | 106 testContent.appendChild(interfaceButtons); |
107 testContent.appendChild(outsideRef); | 107 testContent.appendChild(outsideRef); |
108 testContent.appendChild(sliderBox); | 108 testContent.appendChild(sliderBox); |
109 testContent.appendChild(feedbackHolder); | 109 testContent.appendChild(feedbackHolder); |
110 interfaceContext.insertPoint.appendChild(testContent); | 110 interfaceContext.insertPoint.appendChild(testContent); |
111 | 111 |
112 // Load the full interface | 112 // Load the full interface |
113 testState.initialise(); | 113 testState.initialise(); |
114 testState.advanceState(); | 114 testState.advanceState(); |
115 }; | 115 }; |
116 | 116 |
117 function loadTest(page) | 117 function loadTest(page) { |
118 { | 118 // Called each time a new test page is to be build. The page specification node is the only item passed in |
119 // Called each time a new test page is to be build. The page specification node is the only item passed in | 119 var id = page.id; |
120 var id = page.id; | 120 |
121 | 121 var feedbackHolder = document.getElementById('feedbackHolder'); |
122 var feedbackHolder = document.getElementById('feedbackHolder'); | |
123 feedbackHolder.innerHTML = ""; | 122 feedbackHolder.innerHTML = ""; |
124 var interfaceObj = page.interfaces; | 123 var interfaceObj = page.interfaces; |
125 if (interfaceObj.length > 1) | 124 if (interfaceObj.length > 1) { |
126 { | 125 console.log("WARNING - This interface only supports one <interface> node per page. Using first interface node"); |
127 console.log("WARNING - This interface only supports one <interface> node per page. Using first interface node"); | 126 } |
128 } | 127 interfaceObj = interfaceObj[0]; |
129 interfaceObj = interfaceObj[0]; | 128 |
130 | |
131 // Set the page title | 129 // Set the page title |
132 if (typeof page.title == "string" && page.title.length > 0) { | 130 if (typeof page.title == "string" && page.title.length > 0) { |
133 document.getElementById("test-title").textContent = page.title | 131 document.getElementById("test-title").textContent = page.title |
134 } | 132 } |
135 | 133 |
136 if(interfaceObj.title != null) | 134 if (interfaceObj.title != null) { |
137 { | 135 document.getElementById("pageTitle").textContent = interfaceObj.title; |
138 document.getElementById("pageTitle").textContent = interfaceObj.title; | 136 } |
139 } | 137 |
140 | 138 // Delete outside reference |
141 // Delete outside reference | |
142 document.getElementById("outside-reference-holder").innerHTML = ""; | 139 document.getElementById("outside-reference-holder").innerHTML = ""; |
143 | 140 |
144 var sliderBox = document.getElementById('slider-holder'); | 141 var sliderBox = document.getElementById('slider-holder'); |
145 sliderBox.innerHTML = ""; | 142 sliderBox.innerHTML = ""; |
146 | 143 |
147 var commentBoxPrefix = "Comment on track"; | 144 var commentBoxPrefix = "Comment on track"; |
148 if (interfaceObj.commentBoxPrefix != undefined) { | 145 if (interfaceObj.commentBoxPrefix != undefined) { |
149 commentBoxPrefix = interfaceObj.commentBoxPrefix; | 146 commentBoxPrefix = interfaceObj.commentBoxPrefix; |
150 } | 147 } |
151 var loopPlayback = page.loop; | 148 var loopPlayback = page.loop; |
152 | 149 |
153 // Find all the audioElements from the audioHolder | 150 // Find all the audioElements from the audioHolder |
154 var index = 0; | 151 var index = 0; |
155 var interfaceScales = testState.currentStateMap.interfaces[0].scales; | 152 var interfaceScales = testState.currentStateMap.interfaces[0].scales; |
156 $(page.audioElements).each(function(index,element){ | 153 $(page.audioElements).each(function (index, element) { |
157 // Find URL of track | 154 // Find URL of track |
158 // In this jQuery loop, variable 'this' holds the current audioElement. | 155 // In this jQuery loop, variable 'this' holds the current audioElement. |
159 | 156 |
160 var audioObject = audioEngineContext.newTrack(element); | 157 var audioObject = audioEngineContext.newTrack(element); |
161 if (element.type == 'outside-reference') | 158 if (element.type == 'outside-reference') { |
162 { | 159 // Construct outside reference; |
163 // Construct outside reference; | 160 var orNode = new interfaceContext.outsideReferenceDOM(audioObject, index, document.getElementById("outside-reference-holder")); |
164 var orNode = new interfaceContext.outsideReferenceDOM(audioObject,index,document.getElementById("outside-reference-holder")); | 161 audioObject.bindInterface(orNode); |
165 audioObject.bindInterface(orNode); | 162 } else { |
166 } else { | 163 // Create a slider per track |
167 // Create a slider per track | 164 switch (audioObject.specification.parent.label) { |
168 switch(audioObject.specification.parent.label) { | |
169 case "none": | 165 case "none": |
170 label = ""; | 166 label = ""; |
171 break; | 167 break; |
172 case "letter": | 168 case "letter": |
173 label = String.fromCharCode(97 + index); | 169 label = String.fromCharCode(97 + index); |
174 break; | 170 break; |
175 case "capital": | 171 case "capital": |
176 label = String.fromCharCode(65 + index); | 172 label = String.fromCharCode(65 + index); |
177 break; | 173 break; |
178 default: | 174 default: |
179 label = ""+index; | 175 label = "" + index; |
180 break; | 176 break; |
181 } | 177 } |
182 var sliderObj = new discreteObject(audioObject,label,interfaceScales); | 178 var sliderObj = new discreteObject(audioObject, label, interfaceScales); |
183 sliderBox.appendChild(sliderObj.holder); | 179 sliderBox.appendChild(sliderObj.holder); |
184 audioObject.bindInterface(sliderObj); | 180 audioObject.bindInterface(sliderObj); |
185 interfaceContext.commentBoxes.createCommentBox(audioObject); | 181 interfaceContext.commentBoxes.createCommentBox(audioObject); |
186 index += 1; | 182 index += 1; |
187 } | 183 } |
188 | 184 |
189 }); | 185 }); |
190 | 186 |
191 var interfaceOptions = specification.interfaces.options.concat(interfaceObj.options); | 187 var interfaceOptions = specification.interfaces.options.concat(interfaceObj.options); |
192 for (var option of interfaceOptions) | 188 for (var option of interfaceOptions) { |
193 { | 189 if (option.type == "show") { |
194 if (option.type == "show") | 190 switch (option.name) { |
195 { | |
196 switch(option.name) { | |
197 case "playhead": | 191 case "playhead": |
198 var playbackHolder = document.getElementById('playback-holder'); | 192 var playbackHolder = document.getElementById('playback-holder'); |
199 if (playbackHolder == null) | 193 if (playbackHolder == null) { |
200 { | |
201 playbackHolder = document.createElement('div'); | 194 playbackHolder = document.createElement('div'); |
202 playbackHolder.style.width = "100%"; | 195 playbackHolder.style.width = "100%"; |
203 playbackHolder.align = 'center'; | 196 playbackHolder.align = 'center'; |
204 playbackHolder.appendChild(interfaceContext.playhead.object); | 197 playbackHolder.appendChild(interfaceContext.playhead.object); |
205 feedbackHolder.appendChild(playbackHolder); | 198 feedbackHolder.appendChild(playbackHolder); |
206 } | 199 } |
207 break; | 200 break; |
208 case "page-count": | 201 case "page-count": |
209 var pagecountHolder = document.getElementById('page-count'); | 202 var pagecountHolder = document.getElementById('page-count'); |
210 if (pagecountHolder == null) | 203 if (pagecountHolder == null) { |
211 { | |
212 pagecountHolder = document.createElement('div'); | 204 pagecountHolder = document.createElement('div'); |
213 pagecountHolder.id = 'page-count'; | 205 pagecountHolder.id = 'page-count'; |
214 } | 206 } |
215 pagecountHolder.innerHTML = '<span>Page '+(testState.stateIndex+1)+' of '+testState.stateMap.length+'</span>'; | 207 pagecountHolder.innerHTML = '<span>Page ' + (testState.stateIndex + 1) + ' of ' + testState.stateMap.length + '</span>'; |
216 var inject = document.getElementById('interface-buttons'); | 208 var inject = document.getElementById('interface-buttons'); |
217 inject.appendChild(pagecountHolder); | 209 inject.appendChild(pagecountHolder); |
218 break; | 210 break; |
219 case "volume": | 211 case "volume": |
220 if (document.getElementById('master-volume-holder') == null) | 212 if (document.getElementById('master-volume-holder') == null) { |
221 { | |
222 feedbackHolder.appendChild(interfaceContext.volume.object); | 213 feedbackHolder.appendChild(interfaceContext.volume.object); |
223 } | 214 } |
224 break; | 215 break; |
225 case "comments": | 216 case "comments": |
226 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder,true); | 217 interfaceContext.commentBoxes.showCommentBoxes(feedbackHolder, true); |
227 break; | 218 break; |
228 } | 219 } |
229 } | 220 } |
230 } | 221 } |
231 | 222 |
232 $(page.commentQuestions).each(function(index,element) { | 223 $(page.commentQuestions).each(function (index, element) { |
233 var node = interfaceContext.createCommentQuestion(element); | 224 var node = interfaceContext.createCommentQuestion(element); |
234 feedbackHolder.appendChild(node.holder); | 225 feedbackHolder.appendChild(node.holder); |
235 }); | 226 }); |
236 | 227 |
237 // Auto-align | 228 // Auto-align |
238 resizeWindow(null); | 229 resizeWindow(null); |
239 } | 230 } |
240 | 231 |
241 function discreteObject(audioObject,label,interfaceScales) | 232 function discreteObject(audioObject, label, interfaceScales) { |
242 { | 233 // An example node, you can make this however you want for each audioElement. |
243 // An example node, you can make this however you want for each audioElement. | 234 // However, every audioObject (audioEngineContext.audioObject) MUST have an interface object with the following |
244 // However, every audioObject (audioEngineContext.audioObject) MUST have an interface object with the following | 235 // You attach them by calling audioObject.bindInterface( ) |
245 // You attach them by calling audioObject.bindInterface( ) | 236 if (interfaceScales == null || interfaceScales.length == 0) { |
246 if (interfaceScales == null || interfaceScales.length == 0) | 237 console.log("WARNING: The discrete radio's are built depending on the number of scale points specified! Ensure you have some specified. Defaulting to 5 for now!"); |
247 { | 238 numOptions = 5; |
248 console.log("WARNING: The discrete radio's are built depending on the number of scale points specified! Ensure you have some specified. Defaulting to 5 for now!"); | 239 } |
249 numOptions = 5; | 240 this.parent = audioObject; |
250 } | 241 |
251 this.parent = audioObject; | 242 this.holder = document.createElement('div'); |
252 | 243 this.title = document.createElement('div'); |
253 this.holder = document.createElement('div'); | 244 this.discreteHolder = document.createElement('div'); |
254 this.title = document.createElement('div'); | 245 this.discretes = []; |
255 this.discreteHolder = document.createElement('div'); | 246 this.play = document.createElement('button'); |
256 this.discretes = []; | 247 |
257 this.play = document.createElement('button'); | 248 this.holder.className = 'track-slider'; |
258 | 249 this.holder.style.width = window.innerWidth - 200 + 'px'; |
259 this.holder.className = 'track-slider'; | 250 this.holder.appendChild(this.title); |
260 this.holder.style.width = window.innerWidth-200 + 'px'; | 251 this.holder.appendChild(this.discreteHolder); |
261 this.holder.appendChild(this.title); | 252 this.holder.appendChild(this.play); |
262 this.holder.appendChild(this.discreteHolder); | 253 this.holder.setAttribute('trackIndex', audioObject.id); |
263 this.holder.appendChild(this.play); | 254 this.title.textContent = label; |
264 this.holder.setAttribute('trackIndex',audioObject.id); | 255 this.title.className = 'track-slider-title'; |
265 this.title.textContent = label; | 256 |
266 this.title.className = 'track-slider-title'; | 257 this.discreteHolder.className = "track-slider-range"; |
267 | 258 this.discreteHolder.style.width = window.innerWidth - 500 + 'px'; |
268 this.discreteHolder.className = "track-slider-range"; | 259 for (var i = 0; i < interfaceScales.length; i++) { |
269 this.discreteHolder.style.width = window.innerWidth-500 + 'px'; | 260 var node = document.createElement('input'); |
270 for (var i=0; i<interfaceScales.length; i++) | 261 node.setAttribute('type', 'radio'); |
271 { | 262 node.className = 'track-radio'; |
272 var node = document.createElement('input'); | |
273 node.setAttribute('type','radio'); | |
274 node.className = 'track-radio'; | |
275 node.disabled = true; | 263 node.disabled = true; |
276 node.setAttribute('position',interfaceScales[i].position); | 264 node.setAttribute('position', interfaceScales[i].position); |
277 node.setAttribute('name',audioObject.specification.id); | 265 node.setAttribute('name', audioObject.specification.id); |
278 node.setAttribute('id',audioObject.specification.id+'-'+String(i)); | 266 node.setAttribute('id', audioObject.specification.id + '-' + String(i)); |
279 this.discretes.push(node); | 267 this.discretes.push(node); |
280 this.discreteHolder.appendChild(node); | 268 this.discreteHolder.appendChild(node); |
281 node.onclick = function(event) | 269 node.onclick = function (event) { |
282 { | 270 if (audioEngineContext.status == 0) { |
283 if (audioEngineContext.status == 0) | 271 event.currentTarget.checked = false; |
284 { | 272 return; |
285 event.currentTarget.checked = false; | 273 } |
286 return; | 274 var time = audioEngineContext.timer.getTestTime(); |
287 } | 275 var id = Number(event.currentTarget.parentNode.parentNode.getAttribute('trackIndex')); |
288 var time = audioEngineContext.timer.getTestTime(); | 276 var value = event.currentTarget.getAttribute('position') / 100.0; |
289 var id = Number(event.currentTarget.parentNode.parentNode.getAttribute('trackIndex')); | 277 audioEngineContext.audioObjects[id].metric.moved(time, value); |
290 var value = event.currentTarget.getAttribute('position') / 100.0; | 278 console.log('slider ' + id + ' moved to ' + value + ' (' + time + ')'); |
291 audioEngineContext.audioObjects[id].metric.moved(time,value); | 279 }; |
292 console.log('slider '+id+' moved to '+value+' ('+time+')'); | 280 } |
293 }; | 281 |
294 } | 282 this.play.className = 'track-slider-button'; |
295 | 283 this.play.textContent = "Loading..."; |
296 this.play.className = 'track-slider-button'; | 284 this.play.value = audioObject.id; |
297 this.play.textContent = "Loading..."; | 285 this.play.disabled = true; |
298 this.play.value = audioObject.id; | 286 this.play.setAttribute("playstate", "ready"); |
299 this.play.disabled = true; | 287 this.play.onclick = function (event) { |
300 this.play.setAttribute("playstate","ready"); | 288 var id = Number(event.currentTarget.value); |
301 this.play.onclick = function(event) | 289 //audioEngineContext.metric.sliderPlayed(id); |
302 { | |
303 var id = Number(event.currentTarget.value); | |
304 //audioEngineContext.metric.sliderPlayed(id); | |
305 if (event.currentTarget.getAttribute("playstate") == "ready") | 290 if (event.currentTarget.getAttribute("playstate") == "ready") |
306 audioEngineContext.play(id); | 291 audioEngineContext.play(id); |
307 else if (event.currentTarget.getAttribute("playstate") == "playing") | 292 else if (event.currentTarget.getAttribute("playstate") == "playing") |
308 audioEngineContext.stop(); | 293 audioEngineContext.stop(); |
309 }; | 294 }; |
310 this.resize = function(event) | 295 this.resize = function (event) { |
311 { | 296 this.holder.style.width = window.innerWidth - 200 + 'px'; |
312 this.holder.style.width = window.innerWidth-200 + 'px'; | 297 this.discreteHolder.style.width = window.innerWidth - 500 + 'px'; |
313 this.discreteHolder.style.width = window.innerWidth-500 + 'px'; | 298 //text.style.left = (posPix+150-($(text).width()/2)) +'px'; |
314 //text.style.left = (posPix+150-($(text).width()/2)) +'px'; | 299 for (var i = 0; i < this.discretes.length; i++) { |
315 for (var i=0; i<this.discretes.length; i++) | 300 var width = $(this.discreteHolder).width() - 20; |
316 { | 301 var node = this.discretes[i]; |
317 var width = $(this.discreteHolder).width() - 20; | 302 var nodeW = $(node).width(); |
318 var node = this.discretes[i]; | 303 var position = node.getAttribute('position'); |
319 var nodeW = $(node).width(); | 304 var posPix = Math.round(width * (position / 100.0)); |
320 var position = node.getAttribute('position'); | 305 node.style.left = (posPix + 10 - (nodeW / 2)) + 'px'; |
321 var posPix = Math.round(width * (position / 100.0)); | 306 } |
322 node.style.left = (posPix+10 - (nodeW/2)) + 'px'; | 307 }; |
323 } | 308 this.enable = function () { |
324 }; | 309 // This is used to tell the interface object that playback of this node is ready |
325 this.enable = function() | 310 this.play.disabled = false; |
326 { | 311 this.play.textContent = "Play"; |
327 // This is used to tell the interface object that playback of this node is ready | 312 $(this.slider).removeClass('track-slider-disabled'); |
328 this.play.disabled = false; | 313 for (var radio of this.discretes) { |
329 this.play.textContent = "Play"; | |
330 $(this.slider).removeClass('track-slider-disabled'); | |
331 for (var radio of this.discretes) | |
332 { | |
333 radio.disabled = false; | 314 radio.disabled = false; |
334 } | 315 } |
335 }; | 316 }; |
336 this.updateLoading = function(progress) | 317 this.updateLoading = function (progress) { |
337 { | 318 // progress is a value from 0 to 100 indicating the current download state of media files |
338 // progress is a value from 0 to 100 indicating the current download state of media files | 319 if (progress != 100) { |
339 if (progress != 100) | |
340 { | |
341 progress = String(progress); | 320 progress = String(progress); |
342 progress = progress.split('.')[0]; | 321 progress = progress.split('.')[0]; |
343 this.play.textContent = progress+'%'; | 322 this.play.textContent = progress + '%'; |
344 } else { | 323 } else { |
345 this.play.textContent = "Play"; | 324 this.play.textContent = "Play"; |
346 } | 325 } |
347 }; | 326 }; |
348 | 327 |
349 this.startPlayback = function() | 328 this.startPlayback = function () { |
350 { | |
351 // Called by audioObject when playback begins | 329 // Called by audioObject when playback begins |
352 this.play.setAttribute("playstate","playing"); | 330 this.play.setAttribute("playstate", "playing"); |
353 $(".track-slider").removeClass('track-slider-playing'); | 331 $(".track-slider").removeClass('track-slider-playing'); |
354 $(this.holder).addClass('track-slider-playing'); | 332 $(this.holder).addClass('track-slider-playing'); |
355 var outsideReference = document.getElementById('outside-reference'); | 333 var outsideReference = document.getElementById('outside-reference'); |
356 this.play.textContent = "Listening"; | 334 this.play.textContent = "Listening"; |
357 if (outsideReference != null) { | 335 if (outsideReference != null) { |
358 $(outsideReference).removeClass('track-slider-playing'); | 336 $(outsideReference).removeClass('track-slider-playing'); |
359 } | 337 } |
360 if (this.parent.specification.parent.playOne || specification.playOne) { | 338 if (this.parent.specification.parent.playOne || specification.playOne) { |
361 $('.track-slider-button').text = "Wait"; | 339 $('.track-slider-button').text = "Wait"; |
362 $('.track-slider-button').attr("disabled","true"); | 340 $('.track-slider-button').attr("disabled", "true"); |
363 } | 341 } |
364 } | 342 } |
365 this.stopPlayback = function() | 343 this.stopPlayback = function () { |
366 { | |
367 // Called by audioObject when playback stops | 344 // Called by audioObject when playback stops |
368 if (this.play.getAttribute("playstate") == "playing") { | 345 if (this.play.getAttribute("playstate") == "playing") { |
369 this.play.setAttribute("playstate","ready"); | 346 this.play.setAttribute("playstate", "ready"); |
370 $(this.holder).removeClass('track-slider-playing'); | 347 $(this.holder).removeClass('track-slider-playing'); |
371 $('.track-slider-button').text = "Play"; | 348 $('.track-slider-button').text = "Play"; |
372 this.play.textContent = "Play"; | 349 this.play.textContent = "Play"; |
373 $('.track-slider-button').removeAttr("disabled"); | 350 $('.track-slider-button').removeAttr("disabled"); |
374 } | 351 } |
375 } | 352 } |
376 | 353 |
377 this.getValue = function() | 354 this.getValue = function () { |
378 { | 355 // Return the current value of the object. If there is no value, return -1 |
379 // Return the current value of the object. If there is no value, return -1 | 356 var value = -1; |
380 var value = -1; | 357 for (var i = 0; i < this.discretes.length; i++) { |
381 for (var i=0; i<this.discretes.length; i++) | 358 if (this.discretes[i].checked == true) { |
382 { | 359 value = this.discretes[i].getAttribute('position') / 100.0; |
383 if (this.discretes[i].checked == true) | 360 break; |
384 { | 361 } |
385 value = this.discretes[i].getAttribute('position') / 100.0; | 362 } |
386 break; | 363 return value; |
387 } | 364 }; |
388 } | 365 this.getPresentedId = function () { |
389 return value; | 366 // Return the presented ID of the object. For instance, the APE has sliders starting from 0. Whilst AB has alphabetical scale |
390 }; | 367 return this.title.textContent; |
391 this.getPresentedId = function() | 368 }; |
392 { | 369 this.canMove = function () { |
393 // Return the presented ID of the object. For instance, the APE has sliders starting from 0. Whilst AB has alphabetical scale | 370 // Return either true or false if the interface object can be moved. AB / Reference cannot, whilst sliders can and therefore have a continuous scale. |
394 return this.title.textContent; | 371 // These are checked primarily if the interface check option 'fragmentMoved' is enabled. |
395 }; | 372 return true; |
396 this.canMove = function() | 373 }; |
397 { | 374 this.exportXMLDOM = function (audioObject) { |
398 // Return either true or false if the interface object can be moved. AB / Reference cannot, whilst sliders can and therefore have a continuous scale. | 375 // Called by the audioObject holding this element to export the interface <value> node. |
399 // These are checked primarily if the interface check option 'fragmentMoved' is enabled. | 376 // If there is no value node (such as outside reference), return null |
400 return true; | 377 // If there are multiple value nodes (such as multiple scale / 2D scales), return an array of nodes with each value node having an 'interfaceName' attribute |
401 }; | 378 // Use storage.document.createElement('value'); to generate the XML node. |
402 this.exportXMLDOM = function(audioObject) { | 379 var node = storage.document.createElement('value'); |
403 // Called by the audioObject holding this element to export the interface <value> node. | 380 node.textContent = this.getValue(); |
404 // If there is no value node (such as outside reference), return null | 381 return node; |
405 // If there are multiple value nodes (such as multiple scale / 2D scales), return an array of nodes with each value node having an 'interfaceName' attribute | 382 }; |
406 // Use storage.document.createElement('value'); to generate the XML node. | 383 this.error = function () { |
407 var node = storage.document.createElement('value'); | 384 // audioObject has an error!! |
408 node.textContent = this.getValue(); | |
409 return node; | |
410 }; | |
411 this.error = function() { | |
412 // audioObject has an error!! | |
413 this.playback.textContent = "Error"; | 385 this.playback.textContent = "Error"; |
414 $(this.playback).addClass("error-colour"); | 386 $(this.playback).addClass("error-colour"); |
415 } | 387 } |
416 }; | 388 }; |
417 | 389 |
418 function resizeWindow(event) | 390 function resizeWindow(event) { |
419 { | 391 // Called on every window resize event, use this to scale your page properly |
420 // Called on every window resize event, use this to scale your page properly | 392 var numObj = document.getElementsByClassName('track-slider').length; |
421 var numObj = document.getElementsByClassName('track-slider').length; | 393 var totalHeight = (numObj * 66) - 30; |
422 var totalHeight = (numObj * 66)-30; | 394 document.getElementById('scale-holder').style.width = window.innerWidth - 220 + 'px'; |
423 document.getElementById('scale-holder').style.width = window.innerWidth-220 + 'px'; | 395 // Cheers edge for making me delete a canvas every resize. |
424 // Cheers edge for making me delete a canvas every resize. | 396 var canvas = document.getElementById('scale-canvas'); |
425 var canvas = document.getElementById('scale-canvas'); | |
426 var new_canvas = document.createElement("canvas"); | 397 var new_canvas = document.createElement("canvas"); |
427 new_canvas.id = 'scale-canvas'; | 398 new_canvas.id = 'scale-canvas'; |
428 new_canvas.style.marginLeft = "150px"; | 399 new_canvas.style.marginLeft = "150px"; |
429 canvas.parentElement.appendChild(new_canvas); | 400 canvas.parentElement.appendChild(new_canvas); |
430 canvas.parentElement.removeChild(canvas); | 401 canvas.parentElement.removeChild(canvas); |
431 new_canvas.width = window.innerWidth-520; | 402 new_canvas.width = window.innerWidth - 520; |
432 new_canvas.height = totalHeight; | 403 new_canvas.height = totalHeight; |
433 for (var i in audioEngineContext.audioObjects) | 404 for (var i in audioEngineContext.audioObjects) { |
434 { | 405 if (audioEngineContext.audioObjects[i].specification.type != 'outside-reference') { |
435 if (audioEngineContext.audioObjects[i].specification.type != 'outside-reference'){ | 406 audioEngineContext.audioObjects[i].interfaceDOM.resize(event); |
436 audioEngineContext.audioObjects[i].interfaceDOM.resize(event); | 407 } |
437 } | 408 } |
438 } | |
439 document.getElementById('slider-holder').style.height = totalHeight + 'px'; | 409 document.getElementById('slider-holder').style.height = totalHeight + 'px'; |
440 document.getElementById('slider').style.height = totalHeight + 70 + 'px'; | 410 document.getElementById('slider').style.height = totalHeight + 70 + 'px'; |
441 drawScale(); | 411 drawScale(); |
442 } | 412 } |
443 | 413 |
444 function drawScale() | 414 function drawScale() { |
445 { | 415 var interfaceObj = testState.currentStateMap.interfaces[0]; |
446 var interfaceObj = testState.currentStateMap.interfaces[0]; | 416 var scales = testState.currentStateMap.interfaces[0].scales; |
447 var scales = testState.currentStateMap.interfaces[0].scales; | 417 scales = scales.sort(function (a, b) { |
448 scales = scales.sort(function(a,b) { | 418 return a.position - b.position; |
449 return a.position - b.position; | 419 }); |
450 }); | 420 var canvas = document.getElementById('scale-canvas'); |
451 var canvas = document.getElementById('scale-canvas'); | 421 var ctx = canvas.getContext("2d"); |
452 var ctx = canvas.getContext("2d"); | 422 var height = canvas.height; |
453 var height = canvas.height; | 423 var width = canvas.width; |
454 var width = canvas.width; | 424 var textHolder = document.getElementById('scale-text-holder'); |
455 var textHolder = document.getElementById('scale-text-holder'); | 425 textHolder.innerHTML = ""; |
456 textHolder.innerHTML = ""; | 426 ctx.fillStyle = "#000000"; |
457 ctx.fillStyle = "#000000"; | 427 ctx.setLineDash([1, 4]); |
458 ctx.setLineDash([1,4]); | 428 for (var scale of scales) { |
459 for (var scale of scales) | 429 var posPercent = scale.position / 100.0; |
460 { | 430 var posPix = Math.round(width * posPercent); |
461 var posPercent = scale.position / 100.0; | 431 if (posPix <= 0) { |
462 var posPix = Math.round(width * posPercent); | 432 posPix = 1; |
463 if(posPix<=0){posPix=1;} | 433 } |
464 if(posPix>=width){posPix=width-1;} | 434 if (posPix >= width) { |
465 ctx.moveTo(posPix,0); | 435 posPix = width - 1; |
466 ctx.lineTo(posPix,height); | 436 } |
467 ctx.stroke(); | 437 ctx.moveTo(posPix, 0); |
468 | 438 ctx.lineTo(posPix, height); |
469 var text = document.createElement('div'); | 439 ctx.stroke(); |
470 text.align = "center"; | 440 |
471 var textC = document.createElement('span'); | 441 var text = document.createElement('div'); |
472 textC.textContent = scale.text; | 442 text.align = "center"; |
473 text.appendChild(textC); | 443 var textC = document.createElement('span'); |
474 text.className = "scale-text"; | 444 textC.textContent = scale.text; |
475 textHolder.appendChild(text); | 445 text.appendChild(textC); |
476 text.style.width = $(text.children[0]).width()+'px'; | 446 text.className = "scale-text"; |
477 text.style.left = (posPix+150-($(text).width()/2)) +'px'; | 447 textHolder.appendChild(text); |
478 } | 448 text.style.width = $(text.children[0]).width() + 'px'; |
449 text.style.left = (posPix + 150 - ($(text).width() / 2)) + 'px'; | |
450 } | |
479 } | 451 } |
480 | 452 |
481 function buttonSubmitClick() // TODO: Only when all songs have been played! | 453 function buttonSubmitClick() // TODO: Only when all songs have been played! |
482 { | 454 { |
483 var checks = []; | 455 var checks = []; |
484 checks = checks.concat(testState.currentStateMap.interfaces[0].options); | 456 checks = checks.concat(testState.currentStateMap.interfaces[0].options); |
485 checks = checks.concat(specification.interfaces.options); | 457 checks = checks.concat(specification.interfaces.options); |
486 var canContinue = true; | 458 var canContinue = true; |
487 | 459 |
488 // Check that the anchor and reference objects are correctly placed | 460 // Check that the anchor and reference objects are correctly placed |
489 if (interfaceContext.checkHiddenAnchor() == false) {return;} | 461 if (interfaceContext.checkHiddenAnchor() == false) { |
490 if (interfaceContext.checkHiddenReference() == false) {return;} | 462 return; |
491 | 463 } |
492 for (var i=0; i<checks.length; i++) { | 464 if (interfaceContext.checkHiddenReference() == false) { |
493 if (checks[i].type == 'check') | 465 return; |
494 { | 466 } |
495 switch(checks[i].name) { | 467 |
496 case 'fragmentPlayed': | 468 for (var i = 0; i < checks.length; i++) { |
497 // Check if all fragments have been played | 469 if (checks[i].type == 'check') { |
498 var checkState = interfaceContext.checkAllPlayed(); | 470 switch (checks[i].name) { |
499 if (checkState == false) {canContinue = false;} | 471 case 'fragmentPlayed': |
500 break; | 472 // Check if all fragments have been played |
501 case 'fragmentFullPlayback': | 473 var checkState = interfaceContext.checkAllPlayed(); |
502 // Check all fragments have been played to their full length | 474 if (checkState == false) { |
503 var checkState = interfaceContext.checkAllPlayed(); | 475 canContinue = false; |
504 if (checkState == false) {canContinue = false;} | 476 } |
505 console.log('NOTE: fragmentFullPlayback not currently implemented, performing check fragmentPlayed instead'); | 477 break; |
506 break; | 478 case 'fragmentFullPlayback': |
507 case 'fragmentMoved': | 479 // Check all fragments have been played to their full length |
508 // Check all fragment sliders have been moved. | 480 var checkState = interfaceContext.checkAllPlayed(); |
509 var checkState = interfaceContext.checkAllMoved(); | 481 if (checkState == false) { |
510 if (checkState == false) {canContinue = false;} | 482 canContinue = false; |
511 break; | 483 } |
512 case 'fragmentComments': | 484 console.log('NOTE: fragmentFullPlayback not currently implemented, performing check fragmentPlayed instead'); |
513 // Check all fragment sliders have been moved. | 485 break; |
514 var checkState = interfaceContext.checkAllCommented(); | 486 case 'fragmentMoved': |
515 if (checkState == false) {canContinue = false;} | 487 // Check all fragment sliders have been moved. |
516 break; | 488 var checkState = interfaceContext.checkAllMoved(); |
517 case 'scalerange': | 489 if (checkState == false) { |
518 // Check the scale has been used effectively | 490 canContinue = false; |
519 var checkState = interfaceContext.checkScaleRange(checks[i].min,checks[i].max); | 491 } |
520 if (checkState == false) {canContinue = false;} | 492 break; |
521 break; | 493 case 'fragmentComments': |
522 default: | 494 // Check all fragment sliders have been moved. |
523 console.log("WARNING - Check option "+checks[i].check+" is not supported on this interface"); | 495 var checkState = interfaceContext.checkAllCommented(); |
524 break; | 496 if (checkState == false) { |
525 } | 497 canContinue = false; |
526 | 498 } |
527 } | 499 break; |
528 if (!canContinue) {break;} | 500 case 'scalerange': |
529 } | 501 // Check the scale has been used effectively |
530 | 502 var checkState = interfaceContext.checkScaleRange(checks[i].min, checks[i].max); |
503 if (checkState == false) { | |
504 canContinue = false; | |
505 } | |
506 break; | |
507 default: | |
508 console.log("WARNING - Check option " + checks[i].check + " is not supported on this interface"); | |
509 break; | |
510 } | |
511 | |
512 } | |
513 if (!canContinue) { | |
514 break; | |
515 } | |
516 } | |
517 | |
531 if (canContinue) { | 518 if (canContinue) { |
532 if (audioEngineContext.status == 1) { | 519 if (audioEngineContext.status == 1) { |
533 var playback = document.getElementById('playback-button'); | 520 var playback = document.getElementById('playback-button'); |
534 playback.click(); | 521 playback.click(); |
535 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options | 522 // This function is called when the submit button is clicked. Will check for any further tests to perform, or any post-test options |
536 } else | 523 } else { |
537 { | 524 if (audioEngineContext.timer.testStarted == false) { |
538 if (audioEngineContext.timer.testStarted == false) | 525 interfaceContext.lightbox.post("Warning", 'You have not started the test! Please press start to begin the test!'); |
539 { | 526 return; |
540 interfaceContext.lightbox.post("Warning",'You have not started the test! Please press start to begin the test!'); | 527 } |
541 return; | 528 } |
542 } | 529 testState.advanceState(); |
543 } | 530 } |
544 testState.advanceState(); | |
545 } | |
546 } | 531 } |
547 | 532 |
548 function pageXMLSave(store, pageSpecification) | 533 function pageXMLSave(store, pageSpecification) { |
549 { | 534 // MANDATORY |
550 // MANDATORY | 535 // Saves a specific test page |
551 // Saves a specific test page | 536 // You can use this space to add any extra nodes to your XML <audioHolder> saves |
552 // You can use this space to add any extra nodes to your XML <audioHolder> saves | 537 // Get the current <page> information in store (remember to appendChild your data to it) |
553 // Get the current <page> information in store (remember to appendChild your data to it) | 538 // pageSpecification is the current page node configuration |
554 // pageSpecification is the current page node configuration | 539 // To create new XML nodes, use storage.document.createElement(); |
555 // To create new XML nodes, use storage.document.createElement(); | |
556 } | 540 } |