Using Clock functions with my own buttons

CesiumJS
1

I am trying to use the Animation functions pause, reverse and forward with my own buttons I have made. Does this need to be done in the Animation.js file? And could somebody give me an idea of how to achieve this?

Thanks.

2

You can construct an AnimationViewModel yourself, which contains the logic for the Animation widget, without any of the HTML controls (like all of the Cesium widgets, the Animation widget is built using the Model View ViewModel (MVVM) design pattern).

Then, you can call the appropriate function on the viewModel when each of your own buttons is pressed, for example, the pause button should call animationViewModel.pauseViewModel.command() There are similar commands for playing forward, reverse, etc.

Alternatively, you can use the lower-level API by directly manipulating the Clock object itself, by setting shouldAnimate to false when you want to pause, negating the multiplier to play backwards, etc.

3

I have tried the second suggestion but it hasn't worked. How would I go about constructing an AnimationViewModel?

4

You can construct an AnimationViewModel instance just like any other Cesium type, for example:

var widget = new Cesium.CesiumWidget(‘cesiumContainer’);

var clockViewModel = new Cesium.ClockViewModel(widget.clock);

var animationViewModel = new Cesium.AnimationViewModel(clockViewModel);

Then, when your buttons are pressed, you can call the commands I mentioned earlier, e.g. animationViewModel.playForwardViewModel.command();

Check the documentation for the other commands that you can hook into:

http://cesium.agi.com/Cesium/Build/Documentation/AnimationViewModel.html?classFilter=AnimationViewModel&show=js

5

I have got it working now thank you very much!

6

I also have a slider to use instead of the shuttle ring. How would I go about using my own slider for the same function?

7

That might be more complicated. The AnimationViewModel has a “shuttleRingAngle” property which represents the rotation in degrees, and translates that rotation into the multiplier value. For a non-circular display, you’re probably better off setting the clockViewModel.multiplier property directly, based on the value of your slider instead.

8

Okay thanks for all your help!

9

I want to trigger custom code when user clicks play, pause, reverse and changes speed. How to do that.

Thanks