Making Mobile Offline Apps

CesiumJS
1

Hi, I've been trying to utilize Cesium to make an offline Android app, but I seem to be having trouble with the "offline" bit of things.

Using this site:
https://cesiumjs.org/2016/05/18/An-Introduction-to-Cesium-Android-Apps-with-Cordova/

I have successfully created an instance of the Hello World Cesium app. However, in trying to use any app already made in Sandcastle - most importantly, CZML.html - in conjunction with the original app code (such that it creates an app version of CZML.html), I either just get the Hello World instance of Cesium or the message "You must host this on a web server. See the Contributor's Guide for more information?"

Which, if I cancel, will attempt to open an instance of CZML which then takes up all the memory on my computer within seconds and crashes it.

I guess my question is sort of twofold. The first is, is it even possible to use Sandcastle scripts in an app after creating it as described above? And the second, if so, how can I make CZML.html work as an offline app?

My thinking is that if I could somehow create a localhost in the app that then opens and runs CZML.html, that might manage it, but everything I try I keep hitting walls.

Please note that this is my first time writing an app, working in html, or working with Javascript. I'm just interning and this is the first step to a summer project that I'd really like to get working, but I need to be able to build the app first.

Any help is appreciated!
Thanks,

~Brent

2

Hello Brent,

If you copy/paste the sandcastle code snippet into the script tag of your hello world app, it should work. You can’t take the entire CZML.html file and load it because the Sandcastle files have a little bit of extra code baked into them to make them work in the Sandcastle application.

Best,

Hannah

3

Hi Hannah and thanks -
Which are the essential parts of the sandcastle code to add to index.html?
Many of my attempts result in Cesium being loaded, but without any of the buttons or functions from CZML.html.

I know that some of the filepaths must be altered so as to access the appropriate locations, but even this isn't sufficient to get the app running without an instance of localhost - and if localhost is required, then I don't know how to incorporate any of the sandcastle features into an app.

Thanks again,
~Brent

4

You’ll have to handle creating your own buttons. Functions like Sandcastle.addToolbarButton are added for convenience in the Sandcastle app, but are not included in Cesium. However, you anything that references Cesium should work, so you can use the code inside those functions as handlers for your buttons.

-Hannah

5

I see. Is the code inside Sandcastle.addToolbarButton viable as a starting point for making whatever buttons are necessary? Or does it depend too much on the Sandcastle implementation (inheritance or whatever) such that its code isn't very extensible?

6

Also, shouldn't the paths be showing up on the world model regardless of whether I have created a button? In Sandcastle they show up right when you load up CZML.html.

7

Sandcastle automatically calls the function for one of the buttons.
If you add this line of code to your app, the paths should show up as long as it can find the CZML file:

viewer.dataSources.add(Cesium.CzmlDataSource.load('../../SampleData/simple.czml'));

``

Best,

Hannah

8

Hm... it doesn't appear to be working, still.
Any idea why this code isn't working? Like I've said, I really haven't used HTML or Javascript, so if it's something totally basic I'm definitely missing it.
Thank you so much for your help so far, by the way!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Raven's Eye View</title>
    <script src="Cesium/Cesium.js"></script>
    <style>
        @import url(Cesium/Widgets/widgets.css);
        html, body, #cesiumContainer {
            height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
  var viewer = new Cesium.Viewer('cesiumContainer');

  viewer.dataSources.add(Cesium.CzmlDataSource.load('C:/Cesium/Apps/SampleData/simple.czml'));
    
</script>
</body>
</html>

9

I'm still stuck on this.
Does anyone understand what's going wrong? If it's a problem with my code or is it just not possible in app form?

10 
    viewer.dataSources.add(Cesium.CzmlDataSource.load('C:/Cesium/Apps/SampleData/simple.czml'));

This is trying to load a local file path, not a URL.

11

Well, I'm confused. Aren't all the paths local paths? Especially if I'm trying to do something offline. If that's where it's located it should work, right? Or should I just go up another directory and back down into the appropriate spot for the czml file? Because all those ../ just mean "up a directory", so aren't they exact filepaths as well, just relative to the native app rather than the C drive?

12

Either way, I've tried doing ..\..\Apps\SampleData\simple.czml with no change in results.

13

URIs and file paths are very different things, in addition to not using windows style drive letters, you also need to use / instead of \ as path separators.

You can read more about file uris here: https://en.wikipedia.org/wiki/File_URI_scheme

I’m not sure if that’s your problem in this case, but it’s an important distinction to keep in mind when transitioning to browser-based technologies.

14

Noted, and thank you... still doesn't appear to be the problem in this case, though. =/

15

I really don't mean to be a bother, but I really need to figure this out. Especially if it's a simple solution, knowing how to resolve it in the future would be even more important. Please, if anyone can figure out what the problem is, please let me know!

16

Oh also, please note that by following the instructions linked in my first post pretty much anyone could be where I am stuck in about five minutes, if anyone is willing to help me like that.