How to add a listener to the pause button of the animation widget?

CesiumJS
1

I need a way to know when the pause button was clicked. Any ideas?

-Thanks

2

You can observe the ClockViewModel.shouldAnimate property to detect when the clock is paused, for example:

Cesium.knockout.getObservable(viewer.animation.viewModel.clockViewModel, ‘shouldAnimate’).subscribe(function(value) {

console.log(value);

});

This will print false when the clock is paused.

3

This is a fantastic solution! Thanks.

4

Scott,

Your solution worked very well until I realized that I only want a listener for an actual "on click" event on the pause and play buttons. (Rather than listening for when the shouldAnimate variable changes.)

The problem is I manually change this variable in different places in my code and it's triggering my listener even when I haven't actually clicked on the pause/play buttons.

I want it to behave differently in different cases. I want to be able to know when the pause/play buttons have been clicked, without relying on what the status of the shouldAnimate variable is.

Do you know of a way to do that?

5

This helped me also! Thanks for your short but nice code! Now I can disable my camera flight from the pause button.

///=======================================================================================

/// Function to pause the billboards flight with the animation pause button.

///=======================================================================================

function animationButtonStatus() {

Cesium.knockout.getObservable(viewer.animation.viewModel.clockViewModel, 'shouldAnimate').subscribe(function (value) {

    

    flyBillboards = value;

});

}

///================================================================================

/// default fuction to fly to a location

/// refactor this part!

/// information about the height of the location:

/// http://stackoverflow.com/questions/28291013/get-ground-altitude-cesiumjs

/// https://groups.google.com/forum/#!msg/cesium-dev/08DYCm0z5sM/yWgltqPkDQAJ

///================================================================================

function flyTo(id, point_A, point_B, zoomin) {

try {

animationButtonStatus();

if (flyBillboards == true) {

var pointOfInterest = Cesium.Cartographic.fromDegrees(point_A.lon, point_A.lat, 5000, new Cesium.Cartographic());

Cesium.sampleTerrain(viewer.terrainProvider, 9, [pointOfInterest]).then(function (samples) {

var heading = Cesium.Math.toRadians(cameraManager.heading);

var pitch = Cesium.Math.toRadians(cameraManager.pitch);

viewer.scene.camera.flyTo({

destination: Cesium.Cartesian3.fromDegrees(point_A.lon, point_A.lat, samples[0].height + cameraManager.height),

duration: cameraManager.duration,

complete:

function () {

flyToComplete(id, point_A, point_B, samples[0].height, zoomin);

}

});

});

}

}

catch (ex) {

error(ex);

}

}