Good morning all,
Cesium is driving my animation of the Battle of Mons (the first battle between Britain and Germany during the Great War). If you click through you’ll see where things currently stand. You will also see that the animation is crying out for a description or context.
I would like to create a text box whose text (or even a timeline of entries that expand to a larger text box) scroll along with the time in the Cesium animation. For example, if the user is looking at 10:00 AM on August 23rd, the text box will display all of the timestamped entries on or around 1914-08-23 10:00:00.
I see that D3 might be an option.
Have you any thoughts about what I’ve described? Do you know of examples where Cesium’s time slider controls an external timeline? Do you recommend a js library?
All thoughts greatly appreciated. Cheers, erik
Hi,
I’m extremely new to Cesium, so this probably isn’t what you are looking for, but I noticed in the visualizing spatial data tutorial you can create a box with text. Then you might be able to take the timeline output and assign that to a variable inside that box. Hope you the best of luck.
Cesium is drawn on a HTML5 canvas. You can place an HTML element over it, such as a div. Just make sure the http://www.w3schools.com/cssref/pr_pos_z-index.asp is high enough so that it is visible. You can even make it transparent http://www.w3schools.com/css/css_image_transparency.asp .
Regarding the builtInCzml, I’m not sure how you’d tap into that data. I’m sure there’s an easy way to get the current interpolated position for a given time. Matthew Amato is probably the best person to ask.
Neat app BTW, I didn’t realize how detailed the models were until I zoomed way with an oblique view.
Thanks Hyper and Akemi.
Food for thought. Using builtInCzml to access coordinate-less data in an accompanying table would be slick. I can see several possibilities.
Must every czml object have a geographic reference? Could we get around the interpolating times by assigning availabilities to each object (i.e. 24 hrs)?
And thanks for your note about the app, Hyper. It will soon be getting a final polish, and your observation is right on. Cheers, erik
Actually accessing builtInCzml is very easy, I just entered builtInCzml into the console and it came up as an array of 577 length.
builtInCzml[1].id is “British Expeditionary Force, 1”
builtInCzml[1].availability is “1914-08-21T00:00:00Z/1914-08-25T23:59:59Z”
builtInCzml[1].position.cartographicDegrees is [“1914-08-24T05:00:00Z”, 3.542, 50.107, 0] an array of time,lon,lat.alt
Can availability be composed of an array of time segments, or only one time segment?
I suppose you’d have to perform nested loops on the array to check all of the timestamps and compare then the current simulation time, unless you have a sorted array elsewhere. You could create a JavaScript routine to sort the dates into a sorted array.
CZML objects do not require a geographic reference (or any visualization for the matter). You can have an object that is merely holding data uses elsewhere by the app.
I’m not sure what you mean by “get around the interpolating times” CZML has 4 ways of specifying data. Constant values, interval values, interpolated values, and composite of the previous 3. If you want values that change over time but are not interpolated, you can use interval values to do so.
Thanks, Hyper. Standby while my noodle grasps this…
I take it that this app is doing interpolation rather than constant or interval? The bulk of the app comprises of position arrays with are a series of lon/lat/alt/time values. Sometimes the models stop, I suppose that is due to 2 adjacent values having the same lon/lat/alt values but different time values? Also can availability be an array of start/stop times?
If you wanted to sort by date/time
http://www.w3schools.com/jsref/jsref_sort.asp
and use JulianDate.compare as the compare function
https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Core/JulianDate.js#L662
JulianDate.secondsDifference and JulianDate.daysDifference can be used to determine time difference.