spacecruft
/
satnogs-network
1
0
Fork 0
Code Releases Activity

Wait for DOM before drawing waveform

merge-requests/138/head
Nikos Roussos 2015-07-01 19:01:20 +03:00
parent 4f8ea0239f
commit 9e3ffb24df
1 changed files with 43 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
network/static/js/observation_view.js
View File

@ -1,46 +1,50 @@
observation_start = 1000 * $('#observation-info').data('start');
observation_end = 1000 * $('#observation-info').data('end');
$(document).ready(function() {
'use strict';
var observation_data = [];
var observation_start = 1000 * $('#observation-info').data('start');
var observation_end = 1000 * $('#observation-info').data('end');
$('.observation-data').each(function( index ){
var data_groundstation = $(this).data('groundstation');
var data_time_start = 1000 * $(this).data('start');
var data_time_end = 1000 * $(this).data('end');
observation_data.push({label : data_groundstation, times : [{starting_time: data_time_start, ending_time: data_time_end}]});
});
var observation_data = [];
var chart = d3.timeline()
.stack()
.beginning(observation_start)
.ending(observation_end)
.hover(function (d, i, datum) {
var div = $('#hoverRes');
var colors = chart.colors();
div.find('.coloredDiv').css('background-color', colors(i))
div.find('#name').text(datum.label);
})
.margin({left:140, right:10, top:0, bottom:50})
.tickFormat({format: d3.time.format("%H:%M"), tickTime: d3.time.minutes, tickInterval: 30, tickSize: 6});
var svg = d3.select("#timeline").append("svg").attr("width", 1140)
.datum(observation_data).call(chart);
// Waveform loading
$('.observation-data').each(function( index ){
var wavesurfer = Object.create(WaveSurfer);
var data_payload_url = $(this).data('payload');
var container_el = '#data-' + $(this).data('id');
wavesurfer.init({
container: container_el,
waveColor: '#bf7fbf',
progressColor: 'purple'
$('.observation-data').each(function( index ){
var data_groundstation = $(this).data('groundstation');
var data_time_start = 1000 * $(this).data('start');
var data_time_end = 1000 * $(this).data('end');
observation_data.push({label : data_groundstation, times : [{starting_time: data_time_start, ending_time: data_time_end}]});
});
$(this).find('.playpause').click( function(){
wavesurfer.playPause();
});
var chart = d3.timeline()
.stack()
.beginning(observation_start)
.ending(observation_end)
.hover(function (d, i, datum) {
var div = $('#hoverRes');
var colors = chart.colors();
div.find('.coloredDiv').css('background-color', colors(i))
div.find('#name').text(datum.label);
})
.margin({left:140, right:10, top:0, bottom:50})
.tickFormat({format: d3.time.format("%H:%M"), tickTime: d3.time.minutes, tickInterval: 30, tickSize: 6});
wavesurfer.load(data_payload_url);
var svg = d3.select("#timeline").append("svg").attr("width", 1140)
.datum(observation_data).call(chart);
// Waveform loading
$('.observation-data').each(function( index ){
var wavesurfer = Object.create(WaveSurfer);
var data_payload_url = $(this).data('payload');
var container_el = '#data-' + $(this).data('id');
wavesurfer.init({
container: container_el,
waveColor: '#bf7fbf',
progressColor: 'purple'
});
$(this).find('.playpause').click( function(){
wavesurfer.playPause();
});
wavesurfer.load(data_payload_url);
});
});