ba1507ee by David LaPalomento

Save and restore params from the fragment identifier

Read location.hash when the switcher loads and use the parameters parsed out of it for the initial network conditions. Update location.hash after every simulation run completes so that it's easy to save scenarios for later re-use.
1 parent 6cde85b7
......@@ -85,6 +85,13 @@
capacity.
<button type=button class=add-time-period>Add time period</button>
</p>
<p>
If you've created a complex scenario you'd like to retry
later, run the simulation and then save the URL of this
page. All of the network conditions you specify are
saved into the URL fragment after the results of a
simulation run are displayed.
</p>
The video is available at
<ul>
<li><input class=bitrate type=number min=1 value=65536> bits per second</li>
......
......@@ -29,10 +29,10 @@
// a dynamic number of time-bandwidth pairs may be defined to drive the simulation
(function() {
var addTimePeriod = document.querySelector('.add-time-period'),
var params,
networkTimeline = document.querySelector('.network-timeline'),
timePeriod = networkTimeline.querySelector('li:last-child').cloneNode(true);
addTimePeriod.addEventListener('click', function() {
timePeriod = networkTimeline.querySelector('li:last-child').cloneNode(true),
appendTimePeriod = function() {
var clone = timePeriod.cloneNode(true),
count = networkTimeline.querySelectorAll('input.bandwidth').length,
time = clone.querySelector('.time'),
......@@ -41,6 +41,31 @@
time.name = 'time' + count;
bandwidth.name = 'bandwidth' + count;
networkTimeline.appendChild(clone);
};
document.querySelector('.add-time-period')
.addEventListener('click', appendTimePeriod);
// apply any simulation parameters that were set in the fragment identifier
if (!window.location.hash) {
return;
}
// time periods are specified as t<seconds>=<bitrate>
// e.g. #t15=450560&t150=65530
params = window.location.hash.substring(1)
.split('&')
.map(function(param) {
return ((/t(\d+)=(\d+)/i).exec(param) || [])
.map(window.parseFloat).slice(1);
}).filter(function(pair) {
return pair.length === 2;
});
networkTimeline.innerHTML = '';
params.forEach(function(param) {
appendTimePeriod();
networkTimeline.querySelector('li:last-child .time').value = param[0];
networkTimeline.querySelector('li:last-child input.bandwidth').value = param[1];
});
})();
......@@ -242,6 +267,11 @@
clock.restore();
fakeXhr.restore();
// update the fragment identifier so this scenario can be re-run easily
window.location.hash = '#' + options.bandwidths.map(function(interval) {
return 't' + interval.time + '=' + interval.bandwidth;
}).join('&');
done(null, results);
}, 0);
});
......