Configuration to Continusously Update the Canvas Based on Time

Matt1 · October 29, 2019, 2:21pm

1. A concise explanation of the problem you’re experiencing.

When
time-line animation is enabled, the canvas is not updated automatically. The below code should update the tiles every 10-minutes on the ticker. (I’ve staged tiles at 16:50Z, 17:00Z, 17:10Z) I’d like it to appear to the user like they are viewing an animated GIF.

e.g.
https://cdn.star.nesdis.noaa.gov/GOES16/ABI/CONUS/02/GOES16-ABI-CONUS-02-625x375.gif
(This is a CONUS image, FD below is the full hemisphere)

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

var start = ‘2019-10-15T16:50:00Z’;
var current = ‘2019-10-15T17:00:00Z’;
var stop = ‘2019-10-15T17:20:00Z’;
var startTime = Cesium.JulianDate.fromIso8601(start);
var currentTime = Cesium.JulianDate.fromIso8601(current);
var stopTime = Cesium.JulianDate.fromIso8601(start);

Cesium.JulianDate.addSeconds(startTime, 1800, stopTime); // I have no idea what this does, but if I comment it out we get a console error
var round = 1000 * 60 * 10; // round 10 minutes

var clock = new Cesium.Clock({
startTime : startTime,
currentTime : currentTime,
stopTime : stopTime,
clockRange : Cesium.ClockRange.LOOP_STOP,
clockStep : Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
multiplier : 600.0,
});

var viewer = new Cesium.Viewer(‘cesiumContainer’, {
imageryProvider : Cesium.createWorldImagery({
style : Cesium.IonWorldImageryStyle.AERIAL_WITH_LABELS
}),
timeline: true,
shouldAnimate: false,
clockViewModel : new Cesium.ClockViewModel(clock),
baseLayerPicker : false
});

var layers = viewer.scene.imageryLayers;
var blackMarble = layers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3812 }));

blackMarble.alpha = 0.5;

blackMarble.brightness = 2.0;

layers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
url : ‘https://d11vmysgektmfh.cloudfront.net/GOES16/ABI/FD/02/tiles/{Time}/{z}/{x}/{reverseY}.png’,
credit : ‘NOAA’,
tilingScheme : new Cesium.WebMercatorTilingScheme({
numberOfLevelZeroTilesX: 1,
numberOfLevelZeroTilesY: 1
}),
hasAlphaChannel : true,
minimumLevel : 0,
maximumLevel : 6,
customTags : {
Time: function(imageryProvider, x, y, level) {
var now = viewer.clock.currentTime.clone (); // Thanks, Omar!
var result = now.toString().replace(/(\d{4}-\d{2}-\d{2}T\d{2}:\d)(.*)/, ‘$1’+“0:00Z”);
return result
}
}
})
);

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I
plan on producing weather satellite imagery in 10, 5, and 1-minute increments, and would like the tiles to automatically update as the time
ticks by.

http://www.nsc2017.org/wp-content/uploads/presentations/NSC2017_Session_9.2_Tim_Schmit.pdf

Eventually,
I’d like a drop-down menu to choose between different satellites, but one step at a time… Having the imagery properly refresh/animate is far more important.

4. The Cesium version you’re using, your operating system and browser.

Current, from npm install cesium, CentOS 7 via Google Chrome.

omar · October 30, 2019, 12:26am

I’m honored that I’ve made it as a comment in your codebase! Does this currently update correctly if you zoom and move the camera to force trigger loading new tiles? I’m noticing tiles will stop loading (and the console will be full of errors).

When it does update, I think there’s a problem in this line:

var result = now.toString().replace(/(\d{4}-\d{2}-\d{2}T\d{2}:\d)(.*)/, ‘$1’+“0:00Z”);

``

I think now.toString() may now always be in that format. If you move the time a bit, and log the output you’ll get:

2019-10-16T10:36:06.0461162112042075Z

``

It might be easier to convert the JulianDate to a JavaScript date:

https://cesium.com/docs/cesiumjs-ref-doc/JulianDate.html?classFilter=Julian#.toDate

Which you can then operate on without having to parse it as a string, or with a library like momentjs etc:

https://momentjs.com/

Also for this line:

Cesium.JulianDate.addSeconds(startTime, 1800, stopTime); // I have no idea what this does, but if I comment it out we get a console error

``

It sets stopTime to be a time 1800 seconds after startTime. Without it you’ll be setting a simulation with the same start and end time which isn’t a valid setup.

Matt1 · October 30, 2019, 1:48pm

Hi Omar,

I’ll give credit where it’s due.

Before I use the toDate operation,

Enter code here…
2019-10-16T10:36:06.0461162112042075Z is properly matched by (\d{4}-\d{2}-\d{2}T\d{2}:\d)(.*) For this data type I only need the most recent 10-minute increment

``

I also fixed the start/stop and adding seconds issue, I didn’t notice the preceeding line set the stopTime to start.

var stopTime = Cesium.JulianDate.fromIso8601(stop); //(start);
//Cesium.JulianDate.addSeconds(startTime, 1800, stopTime); // I now know what this did

``

Does this currently update correctly if you zoom and move the camera to force trigger loading new tiles? I’m noticing tiles will stop loading (and the console will be full of errors).

Yes and no, it correctly updates the tiles I’m looking at when I zoom in or out, but it reverts to what I think is the cached tiles from the previous refresh at other zoom levels. Ultimately, the functionality I’m looking for is for the canvas to refresh automatically every 10-minutes(for this data type) on the Cesium clock. Making it look like an animated GIF.

Thanks again, I do really appreciate the assistance!