time-dependent rasters

[michaelchin]

@matthewmerkas Let's try to connect the time slider and play button with the time-dependent rasters.

Checkout the test_animation() function. By the way, the comments on the test_animation() function is outdated and you may remove them.

https://github.com/GPlates/gplates-app/blob/8e7fcae8ae3472fc58ab4c1951d00a982da9fbeb/src/pages/Main.tsx#L38-L59

There are two options to provide time-dependent rasters.

1. local storage fast, but limited storage space https://github.com/GPlates/gplates-app/blob/334685e569734383d2b822c0fbabe80367ad0ca8/src/pages/Main.tsx#L43-L53

2. geoserver depends on the network speed. not sure if fast enough for animation. I highly doubt this will be fast enough. Maybe use local rasters for animation and switch back to geoserver raster when the
   animation stops? This one is a bit tricky. Maybe need more thinking.

   url: 'https://geosrv.earthbyte.org/geoserver/Lithodat/wms', FORMAT': 'image/png', 'VERSION': '1.1.1',
   "STYLES": '', "LAYERS": 'Lithodat:continental_polygons_100Ma', https://github.com/GPlates/gplates-app/blob/334685e569734383d2b822c0fbabe80367ad0ca8/src/pages/Main.tsx#L103-L114

[matthew-merkas]

Hi @michaelchin, just trying to get started on this issue. I'm thinking to tackle the network speed issue, we can try to stream the rasters on the first animation playthrough and save/cache them along the way so we can then play back from local storage for subsequent loops. Also, do you have any pointers on how to get different images using the geoserver? It seems Cesium uses JulianDate to define time intervals, but that only goes back to ~4700BC. Is there API documentation for the wmts URL? Do I use different layer strings to achieve this? Sorry for all the questions. Thanks

[michaelchin]

Hi @michaelchin, just trying to get started on this issue. I'm thinking to tackle the network speed issue, we can try to stream the rasters on the first animation playthrough and save/cache them along the way so we can then play back from local storage for subsequent loops. Also, do you have any pointers on how to get different images using the geoserver? It seems Cesium uses JulianDate to define time intervals, but that only goes back to ~4700BC. Is there API documentation for the wmts URL? Do I use different layer strings to achieve this? Sorry for all the questions. Thanks

Thanks @matthewmerkas . We have created our own time slider, so we don't need Cesium's JulianDate. I have added one time-dependent raster on our geoserver. The time is coded in the layer name, for example Lithodat:continental_polygons_100Ma. Change the number to get rasters for different time.

url: 'https://geosrv.earthbyte.org/geoserver/Lithodat/wms', FORMAT': 'image/png', 'VERSION': '1.1.1', "STYLES": '', "LAYERS": 'Lithodat:continental_polygons_100Ma',

[michaelchin]

You can try to use the local storage as cache. But it seems to me more difficult than using SingleTileImageryProvider and local images.

[michaelchin]

and the size of local storage might not big enough for our purpose.

[matthew-merkas]

You're right, implementing a cache would be more difficult but if we're using local images we'll still have to store them somehow, so local storage size will be a concern either way. Is the plan to package all the animation images with the app bundle, so users are downloading everything from the app store? How big would that be and is it possible to dynamically download the animation images as needed?

[michaelchin]

https://forum.ionicframework.com/t/is-there-a-localstorage-limit-on-ios-when-app-is-built/37852

The plan was to package the low resolution rasters with the app. See the test_animation() function below. If you connect to the geoserver with WebMapTileServiceImageryProvider, you got lots of map tiles(high resolution). The SingleTileImageryProvider uses only one low resolution image file. So, if you try to implement a cache, you might need to implement a customised ImageryProvider and deal with all the map tiles. It could be a bit complicated.

If you can download the low resolution rasters on the fly, it is good.

https://github.com/GPlates/gplates-app/blob/68d7a88c68ffcbe7d63cb5a23408b2ebeff0c578/src/pages/Main.tsx#L42-L56

[michaelchin]

We can use the low resolution images when playing animation and dragging slider. Once the animation stopped, we can switch back to the high resolution raster.

[michaelchin]

The low resolution image can be downloaded from geoserver with this url https://geosrv.earthbyte.org/geoserver/Lithodat/wms?service=WMS&version=1.1.0&request=GetMap&layers=Lithodat%3Acontinental_polygons_100Ma&bbox=-180.0%2C-90.0%2C180.0%2C90.0&width=768&height=384&srs=EPSG%3A4326&styles=&format=image%2Fpng%3B%20mode%3D8bit

[michaelchin]

You may also try to use SingleTileImageryProvider with the remote low resolution rasters. Not sure if it will be fast enough.

[matthew-merkas]

Thank you! That's cleared everything up for me, I should be able to get started now

[matthew-merkas]

Just a little update. I've been trying to download + cache the images (rather than bundle them with the app). I've set up the @capacitor-community/sqlite plugin for native SQLite access. I tried to build a solution which worked for both SingleTile & WebMapTileServiceImageryProviders but like you said, I think I'd have to write something custom. I tried:

• Creating a custom Proxy --> getUrl must return a string (but we need to make async calls to the db with Promises)
• Creating a Request with custom requestFunction and feeding it to the providers' url option --> seems that they just grab the url property and don't execute requestFunction

I don't see another way I could integrate caching. I haven't tested the SQLite plugin on a real device yet, but I will before I submit a pull request. The current solution (6281555) will allow low resolution images for SingleTileImageryProvider to be downloaded on the fly and saved to the device in an SQLite db (in the animation function, stored in base64) but there's no solution for WebMapTileServiceImageryProvider.

[michaelchin]

The current solution (6281555) will allow low resolution images for SingleTileImageryProvider to be downloaded on the fly and saved to the device in an SQLite db (in the animation function, stored in base64) but there's no solution for WebMapTileServiceImageryProvider.

At this stage, I think saving low resolution images in SQLite is good enough. We can think about the solution for WebMapTileServiceImageryProvider in the future. The WebMapTileServiceImageryProvider caching should not be a high priority task for now. It is a bit difficult to deal with those tiles and they might take up too much storage on the device. Let's try the animation with low resolution images first.

[michaelchin]

@matthewmerkas this is a good progress. well done!

https://github.com/GPlates/gplates-app/blob/5b477d3269c7c1da6b8162b47e76ed3d3975c925/src/pages/Main.tsx#L217

The above line slow down the animation significantly. Please open an Issue and assign it to @yiyanw . Thanks.

[michaelchin]

The fastforward/rewind buttons are actually "prev/next" button. When the buttons pressed, the animation should go one step forward/backward. The "step" is configured in the Settings called "Increment".

[matthew-merkas]

The fastforward/rewind buttons are actually "prev/next" button. When the buttons pressed, the animation should go one step forward/backward. The "step" is configured in the Settings called "Increment".

Fixed with #130

[michaelchin]

This issue is growing too old. We should close this one. If anything needs to be done with the animation functionality, we should open new issues.