Develop Reference

Capture zoom out event in Cesium

I want to capture zoom out event as soon as user reduces the map size to an extent i have to change the Map image layer.
var viewer = new Cesium.Viewer("cesiumContainer");
var scene = viewer.scene;
var clock = viewer.clock;
var referenceFramePrimitive;
var camera = viewer.camera;
....
camera.changed.addEventListener(function()
{
var height = Cesium.Cartographic.fromCartesian(camera.position).height;
if(height<4251907)
{
var layers = viewer.imageryLayers;
var baseLayer = layers.get(0);
layers.remove(baseLayer);
layers.addImageryProvider(new Cesium.IonImageryProvider({ assetId: 3812, maximumLevel : 5 }));
}
console.log(height);
}.bind(camera));
Is there any way to achieve this.
Thanks

This is one of the very simple solutions.
const viewer = new Cesium.Viewer("cesiumContainer");
const camera = viewer.camera;
const scratchCartesian1 = new Cesium.Cartesian3();
const scratchCartesian2 = new Cesium.Cartesian3();
let startPos, endPos;
camera.moveStart.addEventListener(function () {
startPos = camera.positionWC.clone(scratchCartesian1);
});
camera.moveEnd.addEventListener(function () {
endPos = camera.positionWC.clone(scratchCartesian2);
const startHeight = Cesium.Cartographic.fromCartesian(startPos).height;
const endHeight = Cesium.Cartographic.fromCartesian(endPos).height;
if (startHeight > endHeight) {
console.log("zoom in");
} else {
console.log("zoom out");
}
});

How to change slider value on dat.GUI and how to reset dat.GUI

1) I'm working on a dat.GUI application on which I have 2 sliders. I want to reset one when the other is changed. For example :
var FizzyText = function() {
this.slider1 = 0;
this.slider2 = 0;
};
var gui = new dat.GUI();
var text = new FizzyText();
var slider1 = gui.add(text, 'slider1', 0, 5);
var slider2 = gui.add(text, 'slider2', 0, 5);
slider1.onChange(function(value){
console.log(value);
text.slider2 = 0; // this doesn't work
});
slider2.onChange(function(value){
console.log(value);
text.slider1 = 0; // this doesn't work
});
This is just an example but it is very important that the slider is reseted or set to its default value (in FizzyText).
The example above comes from https://workshop.chromeexperiments.com/examples/gui/#9--Updating-the-Display-Automatically where I can't automatically update the slider
2) I want to add a reset button in which all sliders will be reseted. But with the previous answer I'd be able to reset all values

I found the answer :
gui.__controllers is and array of controllers. So I just added something like that :
var FizzyText = function () {
this.slider1 = 0;
this.slider2 = 0;
};
var gui = new dat.GUI();
var text = new FizzyText();
var slider1 = gui.add(text, 'slider1', 0, 5);
var slider2 = gui.add(text, 'slider2', 0, 5);
/* Here is the update */
var resetSliders = function (name) {
for (var i = 0; i < gui.__controllers.length; i++) {
if (!gui.__controllers.property == name)
gui.__controllers[i].setValue(0);
}
};
slider1.onChange(function (value) {
console.log(value);
resetSliders('slider1');
});
slider2.onChange(function (value) {
console.log(value);
resetSliders('slider2');
});

It's best to reset dat.GUI's values by using the controller's .initialValue instead of hard coding it, so the following would be preferable: gui.__controllers[i].setValue(gui.__controllers[i]);
You can reset all of a GUI's controllers by using gui.__controllers.forEach(controller => controller.setValue(controller.initialValue));

Indesign script update window?

Edit: I am also open to other suggestions on what I could do.
How can I update my window with the onChange event? My solution works, but I need the groups to collapse when not visible.
w.DD.onChange = function() {
switch (this.selection.text){
case 'Headline':
if(w.visiblegroup)
w.visiblegroup.visible = false;
w.visiblegroup = w.texted;
w.texted.visible = true;
break;
}
}
I have tried to use w.show, w.update(with documentation, still not sure what .update actually does) after adding the elements in the case itself. But I can't figure this out.
w.DD.onChange = function() {
switch (this.selection.text){
case 'Headline':
w.add('checkbox', undefined, 'User-Color');
//w.show();
w.update();
break;
}
}
Does anyone have a clue how this might work?

I generally avoid using LayoutManager and do all teh maths by myself which I trust better but that's my humble opinion…
var w = new Window("dialog");
w.preferredSize = [200,200];
w.DD = w.add( 'dropdownlist', undefined, ["A","B"] );
w.DD.selection = 0;
w.DD.alignment = ["fill","top"];
//Setting a stacked group to items overlay
w.gp = w.add('group');
w.gp.orientation = 'stack';
w.gp.alignment = ["fill","top"];
w.gp.alignChildren = ["fill","top"];
w.gp.p1 = w.gp.add('panel',undefined, "A");
w.gp.p2 = w.gp.add('panel',undefined, "B");
//dummy text to show "collapsing"
w.st = w.add('statictext',undefined, "Collapse ?");
w.DD.onChange = function() {
w.gp.p1.visible = w.DD.selection==0;
w.gp.p2.visible = !w.gp.p1.visible;
w.gp.p2.size.height =100;
w.gp.size.height = w.gp.p1.visible? 50 : 100;
w.st.location.y = w.gp.location.y+w.gp.size.height+10;
}
w.onShow = function() {
w.gp.p2.visible=false;
w.gp.size.height = w.gp.p1.size.height = 50;
w.st.location.y = w.gp.location.y+w.gp.size.height+10;
}
w.show();
Loic

To collapse the groups and window you will need to use the layout() method of your window. This will load the LayoutManager that controls the automatic layout behavior for a window or container. The LayoutManager has a method called layout() too, this method invokes the automatic layout behaviour and invoked automatically the first time the window is displayed. Thereafter, the script must invoke it explicitly like so:
window.layout().layout();
An example of how to use the layout manager by Gerald Singelmann:
function main() {
var win = new Window("dialog");
var maingroup = win.add("panel");
maingroup.orientation = "column";
add_group( maingroup );
var show_btn = win.add("button", undefined, "show");
show_btn.onClick = function() {
var txt = "";
for (var n = 0; n < maingroup.children.length; n++) {
txt += maingroup.children[n].edit.text + "\n";
}
alert("Da steht: \n" + txt );
}
win.show();
function add_group( maingroup ) {
var group = maingroup.add( "group" );
group.edit = group.add("edittext", [undefined, undefined, 200, 20], maingroup.children.length );
group.plus = group.add("button", undefined, "+");
group.plus.onClick = add_btn;
group.minus = group.add("button", undefined, "-");
group.minus.onClick = minus_btn;
group.index = maingroup.children.length - 1;
win.layout.layout( true );
return group;
}
function add_btn ( e ) {
add_group( maingroup );
}
function minus_btn ( e ) {
var ix = this.parent.index;
maingroup.remove( maingroup.children[ix] );
win.layout.layout( true );
}
}
source

Javascript for loop doesn't work (adding numbers to a total)

I am using Jasmine for JS testing, and unfortunately I can't get the following test to pass.
it('should know the total game score', function() {
frame1 = new Frame;
frame2 = new Frame;
game = new Game;
frame1.score(3, 4);
frame2.score(5, 5);
expect(game.totalScore()).toEqual(17)
});
The error message I get is as follows: Error: Expected 0 to equal 17.
The code is as follows:
function Game() {
this.scorecard = []
};
Game.prototype.add = function(frame) {
this.scorecard.push(frame)
};
// Why is this not working!!???
Game.prototype.totalScore = function() {
total = 0;
for(i = 0; i < this.scorecard.length; i++)
{
total +=this.scorecard[i].rollOne + this.scorecard[i].rollTwo;
}
return total;
};
function Frame() {};
Frame.prototype.score = function(first_roll, second_roll) {
this.rollOne = first_roll;
this.rollTwo = second_roll;
return this
};
Frame.prototype.isStrike = function() {
return (this.rollOne === 10);
};
Frame.prototype.isSpare = function() {
return (this.rollOne + this.rollTwo === 10) && (this.rollOne !== 10)
};
Adding the numbers together manually seems to work e.g. total = game.scorecard[0].rollOne + this.scorecard[0].rollTwo , but the for loop (even though it looks correct) doesn't seem to work. Any help would be greatly appreciated :)

I am not pretty sure, but it seems that you are not calling the "Add" method, so no data is added to the scorecard.

You have to add the Frames to your game i guess
it('should know the total game score', function () {
frame1 = new Frame;
frame2 = new Frame;
game = new Game;
// those lines are missing
game.add(frame1);
game.add(frame2);
frame1.score(3, 4);
frame2.score(5, 5);
expect(17).toEqual(game.totalScore())
});
otherwise, the scorecard-array is empty and the total score is therefore equal to 0.

missing (so no data is added to the scorecard.)
game.Add(frame1);
game.Add(frame2);

objects in an array alerted randomly

I have built this code using javascript that makes a few objects called monster. I then put those monsters in an array and finally am trying to call one of thous monsters to the console randomly. Unfortunately it displays in my console log as undefined. Any advice on how to get a random monster in the console log every time I refresh the page?
function Monster(type, level, mAttack, mAgility, mHP) {
this.type = type;
this.level = level;
this.mAttack = mAttack;
this.mAgility = mAgility;
this.mHP = mHP;
}
Monster.prototype.logInfo = function() {
console.log("I am a : ", this.type);
console.log("I am level : ", this.level);
console.log("I have the attack of : ", this.mAttack);
console.log("I have the agility : ", this.mAgility);
console.log("I have the health : ", this.mHP);
}
var troll = new Monster("troll", 1, 10, 10, 10);
var skeleton = new Monster("skeleton", 1, 10, 10, 10);
var slime = new Monster("slime", 1, 10, 10);
var boar = new Monster("boat", 1, 10, 10);
var monsterList = new Array();
monsterList[0] = troll;
monsterList[1] = skeleton;
monsterList[3] = slime;
monsterList[4] = boar;
var summonRandomMonster = function (){
monsterSummoner = monsterList[Math.floor(Math.random() * monsterList.length)];
}
console.log(monsterSummoner);

You create a function but never call it. Therefor monsterSummoner is never set.
// THIS IS NEVER CALLED
var summonRandomMonster = function (){
monsterSummoner = monsterList[Math.floor(Math.random() * monsterList.length)];
}
console.log(monsterSummoner);
Try this instead. Notice that now that the function is called the value is set.
var monsterSummoner;
var summonRandomMonster = function (){
monsterSummoner = monsterList[Math.floor(Math.random() * monsterList.length)];
}
summonRandomMonster();
console.log(monsterSummoner);

You're close... Change your last four lines as follows -
var monsterList = [troll,skeleton,slime,boar];
var summonRandomMonster = function (){
monsterSummoner = monsterList[Math.floor(Math.random() * monsterList.length)];
console.log(monsterSummoner);
}
for (var i = 0; i < 100; i++) {
summonRandomMonster();
}

There are atleast two problems in this code. The variable "monsterSummoner" is not defined, and the function "summonRandomMonster" is not called.