Changeset 34809
- Timestamp:
- 2021-02-05T01:01:52+13:00 (3 years ago)
- Location:
- gs3-extensions/mars-src/trunk/src
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
gs3-extensions/mars-src/trunk/src/wavesurfer-player/wavesurfer-player.js
r34671 r34809 17 17 //renderer: SpectrumMultiCanvas, // class name does not appear to be in scope (resorted to chaning default in wavesurfer.js) 18 18 colorMap: viridisColorMap, 19 avDataUrl: gs.collectionMetadata['httpPath']+'/index/assoc/'+gs.documentMetadata["assocfilepath"] + '/av.json', 19 20 plugins: [ 20 21 -
gs3-extensions/mars-src/trunk/src/wavesurfer-renderer/drawer.spectrummulticanvas.js
r34671 r34809 255 255 this.colorMap.push([val, val, val, 1]); 256 256 } 257 } 258 } 259 257 } 258 259 if (params.avDataUrl) { 260 this.avDataUrl = params.avDataUrl; 261 } 262 } 263 264 /** 265 * Initialize the drawer 266 */ 267 init() { 268 super.init(); 269 270 if (this.avDataUrl) { 271 this.loadFrequenciesData(this.avDataUrl); 272 } else { 273 console.error("No Arousal+Valence (AV) Data URL provided"); 274 } 275 } 276 277 normaliseAVVals(vals) 278 { 279 var norm_vals = new Array(vals.length); 280 281 var max_val = 0; 282 for (var i=0; i<vals.length; i++) { 283 var abs_val = Math.abs(vals[i]); 284 if (abs_val > max_val) { 285 max_val = abs_val; 286 } 287 } 288 289 var scale_factor = (max_val < 0.8) ? 0.8 : max_val; 290 291 for (var i=0; i<vals.length; i++) { 292 var val = vals[i]; 293 var norm_val = scale_factor * val / max_val; 294 norm_vals[i] = norm_val; 295 } 296 297 return norm_vals; 298 } 299 300 createAVProgressTimelineData(arousal_vals,valence_vals, my) 301 { 302 console.log("**** createAVProgressTimelineData"); 303 var canvas_width = this.canvases[0].wave.width; 304 console.log("canvas width = " + canvas_width); 305 306 //this.arousal_vals = arousal_vals; 307 //this.valence_vals = valence_vals; 308 309 this.arousal_vals.unshift(0); 310 this.valence_vals.unshift(0); 311 312 this.norm_arousal_vals = this.normaliseAVVals(arousal_vals); 313 this.norm_valence_vals = this.normaliseAVVals(valence_vals); 314 315 const time_slice = 6; // 6 secs 316 const frame_overlap = 3; // 3 secs 317 318 this.timeline_steps = new Array(); 319 this.timeline_steps.unshift(0); 320 321 var num_vals = arousal_vals.length; 322 var t = time_slice; 323 var n = 1; 324 325 while (n<num_vals) { 326 this.timeline_steps[n] = t; 327 t += frame_overlap; 328 n++; 329 } 330 const total_duration = t; 331 console.log("*** total duration = " + total_duration); 332 333 this.timeline_steps[n] = total_duration; 334 this.norm_arousal_vals[n] = 0; 335 this.norm_valence_vals[n] = 0; 336 num_vals++; 337 338 this.arousal_progress_timeline = new Array(); 339 this.valence_progress_timeline = new Array(); 340 341 for (var i=1; i<num_vals; i++) { 342 const start_t = this.timeline_steps[i-1]; 343 const end_t = this.timeline_steps[i]; 344 345 const start_ts = Math.round((start_t / total_duration) * canvas_width); 346 const end_ts = Math.round((end_t / total_duration) * canvas_width); 347 348 const start_arousal = this.norm_arousal_vals[i-1]; 349 const start_valence = this.norm_valence_vals[i-1]; 350 351 const end_arousal = this.norm_arousal_vals[i]; 352 const end_valence = this.norm_valence_vals[i]; 353 354 const ts_diff = end_ts - start_ts; 355 const arousal_diff = end_arousal - start_arousal; 356 const valence_diff = end_valence - start_valence; 357 358 var local_ts = 0; 359 console.log("*** start_ts = " + start_ts + ", end_ts = " + end_ts + " (ts_diff = " + ts_diff +")"); 360 console.log("*** start_arousal = " + start_arousal + ", end_arousal = " + end_arousal); 361 362 for (var ts=start_ts; ts<end_ts; ts++) { 363 var local_proportion = local_ts / ts_diff; 364 var interpolated_arousal = start_arousal + (local_proportion * arousal_diff); 365 var interpolated_valence = start_valence + (local_proportion * valence_diff); 366 367 this.arousal_progress_timeline[ts] = interpolated_arousal; 368 this.valence_progress_timeline[ts] = interpolated_valence; 369 370 local_ts++; 371 } 372 } 373 374 console.log(this); 375 console.log("*** done interpolated AV progress timeline"); 376 } 377 378 loadFrequenciesData(url) { 379 //var that = this; 380 381 const request = this.wavesurfer.util.fetchFile({ url: url }); 382 383 request.on('success', data => { 384 console.log("loadFrequenceisData: Retrieved AV URL data"); 385 console.log(data); 386 //console.log("*** this = "); 387 //console.log(this); 388 //console.log("*** that = "); 389 //console.log(that); 390 this.arousal_vals = data.arousal; 391 this.valence_vals = data.valence; 392 393 //this.createAVProgressTimelineData(arousal_vals, valence_vals, this); // **** need to pass in 'this' ?? 394 }); 395 396 request.on('error', e => this.fireEvent('error', e)); 397 398 return request; 399 } 260 400 261 401 /** … … 397 537 } 398 538 } 539 540 my.createAVProgressTimelineData(my.arousal_vals, my.valence_vals, my); // **** need to pass in 'this' ?? 399 541 } 400 542 … … 504 646 this.style(this.progressWave, { width: position + 'px' }); 505 647 } 506 */ 648 */ 649 650 /** 651 * Render the new progress 652 * 653 * @param {number} position X-offset of progress position in pixels 654 */ 655 updateProgress(position) { 656 var canvas_width = this.canvases[0].wave.width; 657 console.log("position = " + position + "/" + canvas_width); 658 console.log(this); 659 var arousal_val = this.arousal_progress_timeline[position]; 660 var valence_val = this.valence_progress_timeline[position]; 661 662 console.log("position = " + position + ", arousal = " + arousal_val + ", valence = " + valence_val); 663 664 // shift [-1,1] scale 665 var css_arousal_alpha = 0.5 + (arousal_val + 1.0)/4.0; 666 var css_valence_width = (arousal_val + 1.0) * 20; 667 668 this.style(this.progressWave, { 669 borderRightWidth: css_valence_width+'px', 670 borderRightColor: 'rgba(255,255,255,'+css_arousal_alpha+')' 671 }); 672 673 super.updateProgress(position); 674 } 675 507 676 } -
gs3-extensions/mars-src/trunk/src/wavesurfer-renderer/wavesurfer.js
r34668 r34809 260 260 progressColor: '#555', 261 261 removeMediaElementOnDestroy: true, 262 renderer: SpectrumMultiCanvas, 262 renderer: SpectrumMultiCanvas, // **** GS3 mod 263 263 responsive: false, 264 264 rtl: false,
Note:
See TracChangeset
for help on using the changeset viewer.