Changing the animation clock and limit them

CesiumJS
1

Hey there, i cant figure out how i can setup the clock and animation after i initialized the layer. I tried by setting viewer.clock = new Clock (...) but is there some sort of refresh method ?

Also how does it work to initalize the Clock and Timeline with other values since it somehow does not change the values although not bringing any errors when i add the new Clock (...) to the parameters when i create the viewer.

Anyone has some advice or info on this ? I read the documentation for the classes but cannot figure out how it works.

2

The viewer.clock property is readonly. You can manipulate the clock properties themselves.

viewer.clock.startTime = xxx

viewer.clock.currentTime = xxx

viewer.clock.stopTime = xxx

The timeline still needs some manual code for the news settings to reflect there. These two lines makes sure it updates to the new settings.

timeline.updateFromClock();

timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime);

3

Hey thank you works like a charm. Another problem now i have is adding Tracks to the timeline:

var startdate = Cesium.JulianDate.fromDate(startd);
var enddate = Cesium.JulianDate.fromDate(endd);
                var tInterval1 = new Cesium.TimeInterval(startdate, enddate);
    viewer.timeline.addTrack(tInterval1,8, Cesium.Color.BLUE, Cesium.Color.BLACK);
               
But nothing is added. I also do not find any information for addTrack in the Timeline class ? Is there also a function to call to update the TimeLine or to show the added tracks ? I looked at the function in the .js and it calls resize. However nothing happens.

4

Ah ok i found out that it actually works but isnt displayed and is hard to recognize in the html markup due to the canvas. I solved by always adding a height to the .cesium-viewer-timelineContainer class :

So everytime i add a Track e.g.
  viewer.timeline.addTrack(tInterval1,8, Cesium.Color.GREEN, Cesium.Color.BLACK);
i additionally increase the height of the container:
                $('.cesium-viewer-timelineContainer').height("+=8");