Using knockout to change the color of an entity

CesiumJS
1

Hi guys,

I would like to change the color of an entity (just the alpha for my example) using a drag bar/slider.

I’ve attached a sandcastle example where I can change the position using Cesium.CallbackProperty but the same approach doesn’t work for colors.

The error I get is:

TypeError: materialProperty.getType is not a function

Any help would be appreciated as I’m sure there is an easy answer to this.
If there isn’t perhaps I should stick to switching colors with a button of preset values instead of a slider like this.

A slider would be great to play with HSL and RGB though.

Example source originally: https://groups.google.com/forum/embed/?place=forum/cesium-dev&showsearch=true&showpopout=true&hideforumtitle=true&fragments=true&parenturl=https%3A%2F%2Fcesiumjs.org%2Fforum.html#!searchin/cesium-dev/entity$20knockout/cesium-dev/8lWFpiEjFjI/eb3C0hylYx4J

Hello World (1).html (4.51 KB)

2

Hello,

Here is an example for how to change the color with a combobox. You should be able to do the same thing with a slider, you’ll just have to create a new Cesium.Color with the values from the slider instead of from the combobox;

@import url(../templates/bucket.css); #toolbar { background: rgba(42, 42, 42, 0.8); padding: 4px; border-radius: 4px; } #toolbar input { vertical-align: middle; padding-top: 2px; padding-bottom: 2px; } #toolbar .header { font-weight: bold; }

Loading...

Model Color
Color

``

var viewer = new Cesium.Viewer(‘cesiumContainer’);

// The viewModel tracks the state of our mini application.
var viewModel = {
color : ‘Red’,
colors : [‘White’, ‘Red’, ‘Green’, ‘Blue’, ‘Yellow’, ‘Gray’]
};

// Convert the viewModel members into knockout observables.
Cesium.knockout.track(viewModel);

// Bind the viewModel to the DOM elements of the UI that call for it.
var toolbar = document.getElementById(‘toolbar’);
Cesium.knockout.applyBindings(viewModel, toolbar);

Cesium.knockout.getObservable(viewModel, ‘color’).subscribe(
function(newValue) {
entity.box.material = Cesium.Color[newValue.toUpperCase()];
}
);

var entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
box : {
dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material : Cesium.Color.RED
}
});

``

Best,

Hannah

3

Wow thanks for the quick response.

I’ve managed to get what I was after working in the sandbox now (brief changes attached for anyone searching).

However, what if I just want to change 1 parameter of the material (eg the alpha) without having to take the whole material creation into a new function?

Do you know how this would work?

Thanks

Enter code here…var viewer = new Cesium.Viewer(‘cesiumContainer’);

``

// The viewModel tracks the state of our mini application.

var viewModel = {

alpha : '0.5',

};

// Convert the viewModel members into knockout observables.

Cesium.knockout.track(viewModel);

// Bind the viewModel to the DOM elements of the UI that call for it.

var toolbar = document.getElementById(‘toolbar’);

Cesium.knockout.applyBindings(viewModel, toolbar);

Cesium.knockout.getObservable(viewModel, ‘alpha’).subscribe(

function(newValue) {

    entity.box.material = Cesium.Color.fromAlpha(Cesium.Color.BLUE,[newValue]);

}

);

var entity = viewer.entities.add({

position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),

box : {

    dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),

    material : Cesium.Color.fromAlpha(Cesium.Color.BLUE,viewModel.alpha)

}

});

@import url(../templates/bucket.css); #toolbar { background: rgba(42, 42, 42, 0.8); padding: 4px; border-radius: 4px; } #toolbar input { vertical-align: middle; padding-top: 2px; padding-bottom: 2px; } #toolbar .header { font-weight: bold; }

Loading...

Model Alpha
Alpha

``

4

And a follow-up question is do you know how you apply this to a collection of entities?

Thanks a lot!

5

Cesium.knockout.getObservable(viewModel, ‘alpha’).subscribe(

function(newValue) {

for (var i = 0; i < 4; ++i) {

entity[i].box.material = Cesium.Color.fromAlpha(Cesium.Color.BLUE,[newValue]);

}

}

);

``

Okay I figured out how to loop over entities.

6

Hi Simon,

I just tried exactly this and it didn’t work. Any ideas?

It fails with 18022:133 Uncaught TypeError: Cannot read property ‘ellipse’ of undefined

I am using ellipse rather than box .

It works without the for loop using

circles.ellipse.material = Cesium.Color.RED.withAlpha([newValue]);

but only the first ellipse is changed, so I need to cycle through them all somehow.

Cheers

brian

7

Hi All,

Solved this, finally.

When the entities are created, add a unique id, eg

for (i = 0; i < taskCircles.length; ++i){

var circles = viewer.entities.add({

id: ‘waypointCircle’ + i,

name: taskCircles[i].title,

Then refer to them using viewer.entities.getById in a loop as follows

Cesium.knockout.getObservable(viewModel, ‘alpha’).subscribe(

function (newValue) {

for (var ic = 0; ic < taskCircles.length; ++ic) {

var entity = viewer.entities.getById(‘waypointCircle’ + ic);

entity.ellipse.material = Cesium.Color.RED.withAlpha([newValue]);

}

}

);

Brian

8

Hi Brian,

Glad you got it working! Checkout the Managing Entities section of our Visualizing Spatial Data Tutorial if you need more info.

Thanks,

Gabby

9

Hi Gabby,

Yes thanks for that, that was the clue that I found to begin getting it working. Unfortunately the example previously was incorrect which sent me off on the wrong track.

Cheers

Brian