Range slider player

plotly.js
1

Hi,
http://jbigdata.fr/webapps/17-air/
You do have a showcase topic in this forum.

2

Can’t update former post, new link : http://jbigdata.fr/webapps/18-tseries/

Some snippets to share reusable JS devs.

1/ AngularJS timer control

1.1/ Play-Pause button callback

$scope.clickPlay = function() {
  if ($scope.buttonIconPlay == 'play_circle_outline') {
    if (angular.isDefined(Interval)) return;
      Interval = $interval(function(){ $scope.callAtInterval(); }, 500);
      $scope.buttonIconPlay = 'pause_circle_outline';
    }
    else {
      if (angular.isDefined(Interval)) {
        $interval.cancel(Interval);
        Interval = undefined;
        $scope.buttonIconPlay = 'play_circle_outline';
      }
    }
  }

1.2/ Timer callback.

$scope.callAtInterval = function() {
  if (ActiveIndex >= RSliderData['max']) {
    $scope.clickPlay();
    return;
  }
  ActiveIndex += 1;
  _setRSliderIndex();
  console.log("Interval occurred.");
}

2/ RangeSlider update.

function _setRSliderIndex() {
  var aData = JSON.parse(JSON.stringify(RSliderData[ActivePolluant].data));
  aData.text.splice(0, ActiveIndex);
  aData.x.splice(0, ActiveIndex);
  aData.y.splice(0, ActiveIndex);
  var aLayout = JSON.parse(JSON.stringify(RSliderData[ActivePolluant].layout));
  // if splice then do a copy of layout at newPlot
  aLayout.xaxis.range[0] = RSliderData['times'][ActiveIndex];
  // aLayout.xaxis.range.splice(0, ActiveIndex);
  aLayout.xaxis.rangeslider.range[0] = RSliderData['times'][ActiveIndex];;
  // aLayout.xaxis.rangeslider.range.splice(0, ActiveIndex);
  aLayout.yaxis.title = aLayout.yaxis.title.split('').reverse().join('');
  Plotly.relayout('RangeSlider', aLayout);
  console.log("Plotly.react done");
}