event handler timeline

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

Is it possible to tie into the timeline to watch for events?

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

Is it possible to watch for the availability of this entity as the timeline progresses?

{

“id” : “BER2”,

“name” : “Bearing2”,

“availability” : “2012-08-04T10:16:00Z/2012-08-04T10:32:00Z”,

“my_type” : bearing

“my_parent”: some other entity id

“polyline” : {

“positions” : {

“cartographicDegrees” : [

-1.81, -3.02, 0,

-1.90, 2.51, 0

]

},

“material” : {

“solidColor” : {

“color” : {

“rgba” : [255, 0, 0, 255]

}

}

},

“width” : 2,

“clampToGround” : true

}

}

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

I would like additional JavaScript to fire during the presentation. Maybe I want to change the color of that polyline, or update a textbox somewhere on the screen, or change a property on some other entity.

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

1.47, Windows10, Firefox and Chrome.

Here is a good codepen of a leaflet map that reacts to events on the screen. This one watches for the mouse but it’s the same concept. I want to fire styleMarkers. (see codepen)

Hi Jody,

If you want to change certain properties of an Entity depending on thing happening in your app, try using a CallbackProperty to define a function which will return the proper value.

You can watch for the mouse position through ScreenSpaceEventHandler events like in this example, or other JS interfaces.

I’m not sure exactly how the leaflet example would relate to the timeline. If you’re looking for something more specific, let me know.

Thanks,

Gabby

So, I got to the time data by attaching interval data to some custom properties. Now I can get a true or false from an object by timeslide during playback.

So, this is what I am trying…

All my objects have a custom property called “parent”. I can get the parent using this.

parent = $.grep(entities, function(parent){return parent.id === bearings[0].properties.parent.getValue();})[0]

``

That parent is an ellipse somewhere on the map. I want to change the outline color of that ellipse based on that boolean value;

if (bearings[0].properties.status.getValue(viewer.clock.currentTime) === true)
{
dataSourcePromise.then(function(ds) {
ds.entities.getById(parent._id).ellipse.outlineColor = Cesium.Color.RED;
})}

``

But, that seems to throw an error. Are there another properties other than ellipse.outlineColor that I should try to set?

this is my codepen:

https://codepen.io/anon/pen/eLzaJQ?editors=0011

Thanks!!

Jody

here’s a better pen.

https://codepen.io/jody-robert-ford/pen/jvVbLJ?editors=0011

well, this will show me the color is red or green but the circle’s color on the map is not changing.

if (
bearings[0].properties.status.getValue(viewer.clock.currentTime) === true)
{

  dataSourcePromise.then(function(ds) {
    ds.entities.suspendEvents();
    ds.entities.getById(parent._id).ellipse.outlinColor = Cesium.Color.RED;
    console.log(ds.entities.getById(parent._id).name);
    console.log(ds.entities.getById(parent._id).ellipse.outlinColor);
    ds.entities.resumeEvents();
  });
} else {
  dataSourcePromise.then(function(ds) {
    ds.entities.suspendEvents();    
    ds.entities.getById(parent._id).ellipse.outlinColor = Cesium.Color.GREEN;
    ds.entities.resumeEvents();
    console.log(ds.entities.getById(parent._id).name);
    console.log(ds.entities.getById(parent._id).ellipse.outlinColor);
  });
}

``

For the first example, if you initially set the entity outline to a color, that property will be marked at constant, and the viewer wont expect the value to change. That’s why it’s not getting updated. You can create a new Property and mark it as not constant, or use that CallbackProperty I linked to.

For your last example, make sure you’re using outlinColor instead of outlineColor. You’re creating a new property which is why the console logs work.

Thanks,

Gabby