I am working with the check boxes in three js.I have created a user control panel in which I have added check boxes.What I want to do is when I click on any check box when the other check box is already checked the previous one should be unchecked.So can anyone please tell me how to that.
This is the code that I have written for check boxes.
function addDatGui(){
var gui = new dat.GUI();
parameters = {
a:false,
b:false,
c:false
}
var first = gui.addFolder("Plastic");
var pos1 = first.add(parameters,'a').name('Possitive Charge');
var neg1 = first.add(parameters,'b').name('Negative Charge');
var neu1 = first.add(parameters,'c').name('Neutral');
var second = gui.addFolder("Glass");
var pos2 = second.add(parameters,'a').name('Possitive Charge');
var neg2 = second.add(parameters,'b').name('Negative Charge');
var neu2 = second.add(parameters,'c').name('Neutral');
pos1.onChange(PCharge);
neg1.onChange(Ncharge);
neu1.onChange(NeCharge);
var show = gui.add(parameters,'a').name('Show Charge');
}
You can set .listen() to each controller and .onChange() with a function which will set all parameters to false and then the parameter you need to true:
var gui = new dat.GUI();
parameters = {
a: false,
b: false,
c: false
}
var first = gui.addFolder("Plastic");
var pos1 = first.add(parameters, 'a').name('Possitive Charge').listen().onChange(function(){setChecked("a")});
var neg1 = first.add(parameters, 'b').name('Negative Charge').listen().onChange(function(){setChecked("b")});
var neu1 = first.add(parameters, 'c').name('Neutral').listen().onChange(function(){setChecked("c")});
function setChecked( prop ){
for (let param in parameters){
parameters[param] = false;
}
parameters[prop] = true;
}
jsfiddle example
PS I just didn't get the moment, when you want to use the same object of parameters in two different folders, but it's up to you anyway.
Related
I'm working on a chrome extension to automate some work of mine. Currently it enters a value into a input, then clicks the button.
I want to get a new div element when it gets to the next page (once loaded). But it always looking a div before click event.
I hope that you understanded my problem.
Here is a code:
bSzukaj.onclick = function()
{
var url = "/game.php?screen=place";
var coords = [];
var loaded = false;
var n = inputZakres.value;
var x = parseInt(inputPobierz.value.split("|")[0] - parseInt(n/2+1));
var y = parseInt(inputPobierz.value.split("|")[1] - parseInt(n/2+1));
var newWindow = window.open(url);
var currentX = x;
var currentY = y;
var coord = currentX+"|"+currentY;
var sender = newWindow.addEventListener('load', function(){
var spearInput = newWindow.document.getElementById("unit_input_spear");
spearInput.value = 10;
var coordClass = newWindow.document.getElementsByClassName("target-input-field target-input-autocomplete")[0];
coordClass.value = coord;
var send = newWindow.document.getElementById("target_attack").click();
// NOW SCRIPT RELOAD PAGE AND CREATING SOME COMUNICATS
// AND I WANT TO GET THIS COMUNICATS TO VARIABLE
// BUT EVEN THIS ALERT BELOW DOESN'T WORK :/
newWindow.addEventListener('load', function() {
alert("now");
});
}, false);
//}
//}
}
}
I have two functions in JavaScript. One is change_BASE_ID() and the other one is Display_img(a,b).
change_BASE_ID() is called on mouseclick and internally calls Display_img(). On mouseover, Display_img() is called.
So Display_img() is used in two ways. There is a base_id_mitali variable in change_BASE_ID() which I want to be global. So even on mouseover when the Display_img() function is called independently, it should make use of the value of that variable.
If the onclick function was never clicked the value in base_id_mitali should be 01 or else if it was clicked it should be the one previously set ones.
var base_id_mitali = "";
function change_BASE_ID(base_ID, cursor_ID) { // THIS IS WHEN MOUSE IS CLICKED
//var curr_base_id = 'ch01ch01.png';
var start_name = "ch";
base_id_mitali = "01";
var bsid = document.getElementById('image').src;
//var bsidlen=bsid.charAt(bsid.length-6);
var bid1 = bsid.charAt(bsid.length - 6);
var bid2 = bsid.charAt(bsid.length - 5);
document.getElementById("mitali").innerHTML = "trying to get base id ".concat(bid1).concat(bid2);
base_id_mitali = concat(bid1).concat(bid2);
var a = base_ID;
var b = cursor_ID;
var temp_res1 = start_name.concat(base_id_mitali);
var temp_res2 = temp_res1.concat("ch");
var temp_res3 = temp_res2.concat(b);
var final = temp_res3.concat(".png");
curr_base_id = final;
document.getElementById('image').src = final;
Display_img(base_ID, cursor_ID);
document.getElementById("demo").innerHTML = "clicked on ".concat(final);
//setbaseid(base_id_mitali);
}
function Display_img(a, b) {
var start_name = "ch";
//document.getElementById("globalvar").innerHTML = "trying see global variable value ".concat(base_id_mitali);
var temp_res1 = start_name.concat(a); //want to use the global variable instead of a
var temp_res2 = temp_res1.concat("ch");
var temp_res3 = temp_res2.concat(b);
var final = temp_res3.concat(".png");
document.getElementById("demo").innerHTML = final;
document.getElementById('image').src = final;
}
I cannot see any initialization for the variable base_id_mitali in the code. Outside of your html code, initialize the variable on load using following code :
<script>
var base_id_mitali= "";
</script.
Now you can access this global variable .
var imgOut = function(){
var outImg = Math.floor(Math.random()*slideRandom.length);
document.getElementById("random").src = imgRandom[outImg];
var outSlide = slideRandom[outImg];
outSlide();
var wr = Math.floor(Math.random()*imgRandom.length);
var btl = Math.floor(Math.random()*bottle.length);
document.getElementById("bottle2").src = bottle[outImg];
document.getElementById("bottle1").src = bottle[btl];
document.getElementById("bottle3").src = bottle[wr];
/* try below but doesn't work or syntax error occured*/
var position= ['bottle[outImg]','bottle[btl]','bottle[wr]'];
var pos = Math.floor(Math.random()*position.length);
var pos1 = position[pos];
pos1();
}
what I'm try to do is
with different arrays to get different each images in different random position.
I've done different images to get but with three different arrays to put in random position doesn't work. what have I done wrong? or how to change above code?
I don't understand your requirements exactly, but consider this code:
var setImage = function(id, src) {
document.getElementById(id).src = src;
};
var chooseOne = function(array) {
return array[Math.floor(Math.random()*array.length)];
};
var setRandomImages = function() {
setImage("bottle1", chooseOne(bottle));
setImage("bottle2", chooseOne(bottle));
setImage("bottle3", chooseOne(bottle));
};
If the array bottle is a list of URLs, this will do something, though I cannot guarantee it will do what you want.
var position= ['bottle[outImg]()','bottle[btl]()','bottle[wr]()'];
var pos = Math.floor(Math.random()*position.length);
var pos1 = position[pos];
//pos1();
eval( pos1 );
// or
(new Function("return pos1"))();
In Google App Scripts (GAS), I want to be able to add and remove TextBox and TextArea elements to a FlexTable (that's being used as a form) and not worry about how many there are. I've named the text elements based on a counter to make this process easier.
So, is there a way to get the number of inputs (TextBox + TextArea) passed to e.parameter after the form is submitted?
Here's the relevant code from the FlexTable:
function doGet() {
var app = UiApp.createApplication();
var flex = app.createFlexTable().setId('myFlex');
var counter = 0;
var row_counter = 0;
...
var firstnameLabel = app.createLabel('Your FIRST Name');
var firstnameTextBox = app.createTextBox().setWidth(sm_width).setName('input' + counter).setText(data[counter]);
flex.setWidget(row_counter, 1, firstnameLabel);
flex.setWidget(row_counter, 2, firstnameTextBox);
row_counter++;
counter++;
var lastnameLabel = app.createLabel('Your LAST Name');
var lastnameTextBox = app.createTextBox().setWidth(sm_width).setName('input' + counter).setText(data[counter]);
flex.setWidget(row_counter, 1, lastnameLabel);
flex.setWidget(row_counter, 2, lastnameTextBox);
row_counter++;
counter++;
...
var submitButton = app.createButton('Submit Proposal');
flex.setWidget(row_counter, 2, submitButton);
var handler = app.createServerClickHandler('saveProposal');
handler.addCallbackElement(flex);
submitButton.addClickHandler(handler);
var scroll = app.createScrollPanel().setSize('100%', '100%');
scroll.add(flex);
app.add(scroll);
return app;
}
And here's the code for the ClickHandler (notice that I currently have 39 elements in my FlexTable):
function saveProposal(e){
var app = UiApp.getActiveApplication();
var userData = [];
var counter = 39;
for(var i = 0; i < counter; i++) {
var input_name = 'input' + i;
userData[i] = e.parameter[input_name];
}
So, is there a way to get the number of elements (in this case 39) without manually counting them and assigning this value to a variable?
I'm new at this stuff and I'd appreciate your help.
Cheers!
The simplest way is to add a hidden widget in your doGet() function that will hold the counter value like this :
var hidden = app.createHidden('counterValue',counter);// don't forget to add this widget as a callBackElement to your handler variable (handler.addCallBackElement(hidden))
then in the handler function simply use
var counter = Number(e.parameter.counterValue);// because the returned value is actually a string, as almost any other widget...
If you want to see this value while debugging you can replace it momentarily with a textBox...
You can search for arguments array based object.
function foo(x) {
console.log(arguments.length); // This will print 7.
}
foo(1,2,3,4,5,6,7) // Sending 7 parameters to function.
You could use a while loop.
var i = 0;
var userData = [];
while (e.parameter['input' + i] != undefined) {
userData[i] = e.parameter['input' + i];
i++;
};
OR:
var i = 0;
var userData = [];
var input_name = 'input0';
while (e.parameter[input_name] != undefined) {
userData[i] = e.parameter[input_name];
i++;
input_name = 'input' + i;
};
I need to know how create a simple menu with 2 menu items(A and B): the first one(A) contains 1 item (A1),the second one(B), contains 3 items inside(B1,B2,B3)
I can create an example but always fail:
CODE
var handler = app.createServerHandler();
//Create menu bar
var menuBar = app.createMenuBar(true);
var data = ss.getSheets()[LOG_SHEET_INDEX].getDataRange().getValues();
var lastRow = ss.getLastRow();
for(var row = 1; row < lastRow; row++){
var id_menu =1;
if(data[row][0]==0){
var nivel = data[row][1];
var menuItem = app.createMenuItem(data[row][2], handler);
var separator = app.createMenuItemSeparator();
menuBar.addSeparator(separator);
var subMenu = app.createMenuBar(true).setId("subMenu"+nivel);
for(var i = 1; i< lastRow; i++){
if(data[i][0]==nivel){
var sm = app.getElementById("subMenu"+nivel)
this[sm.addItem(data[row][2], handler)];
}
}menuItem.setSubMenu(sm);
}menuBar.addItem(data[row][2], app.createMenuBar(true));
}
app.add(menuBar);
RESULT
and i need something like (hidding A1,B1,B2,B3 : showing when focus A|B):
____
A
A1
____
B
B1
B2
B3
THIS IS MY SPREAD:
Please Help!!
Hmm, as Serge pointed out my prev. answer is wrong. Meanwhile I found out, what the real reason is:
The MenuItem having the submenu must not have a handler:
var menuBar=app.createMenuBar();
var subb1=app.createMenuBar(true);
subb1.addItem (app.createMenuItem("S1", handler1));
subb1.addItem (app.createMenuItem("S2", handler2));
var mi1=app.createMenuItem("X1", null); // passing null and not a handler makes submenu work...
mi1.setSubMenu(subb1);
menuBar.addItem(mi1);
app.add(menuBar);
I done it but I have a problem with handers which can't be used(both serverhandle and clienthandler) becouse the parameter 'e' is undefined or void: (Also a problem with MenuItemID)
I need to know which button is presed knowing 'e' and dont know whats wrong.
do get(){
var app = UiApp.createApplication()
var menu = menuBar();
var panel = app.createAbsolutePanel().setId("Panel");
var horizontalPanel = app.createHorizontalPanel().setId("horizontalPanel");
var verticalPanelDoc = app.createVerticalPanel().setId("verticalPanelDoc");
var verticalPanelMenu = app.createVerticalPanel().setId("verticalPanelMenu");
var scrollPanelDoc = app.createScrollPanel().setId("scrollPanelDoc").setSize('1000', '600');
verticalPanelMenu.add(menu);
verticalPanelDoc.add(scrollPanelDoc);
horizontalPanel.add(verticalPanelMenu);
horizontalPanel.add(verticalPanelDoc);
panel.add(horizontalPanel)
app.add(panel);
return app;
}
function show(e){
var ss =SpreadsheetApp.openById(TABLA_MENU);
//**testing 'e' = undefined or void**
var e_source = e.parameter.source;
ss.getSheetByName("menu").getRange("B"+6).setValue(e_source);
ss.getSheetByName("menu").getRange("C"+6).setValue(e);
//**result in cells : e_source = undefined e = {parameter={}}**
var app = UiApp.getActiveApplication();
var panel = app.getElementById("Panel");
var verticalPanelDoc = app.getElementById("verticalPanelDoc");
var horizontalPanel = app.getElementById("horizontalPanel");
var scrollPanelDoc = app.getElementById("scrollPanelDoc");
verticalPanelDoc.clear();
verticalPanelDoc.remove(scrollPanelDoc);
//**this will depend of 'e' **
var panelToShow = app.createCaptionPanel().setTitle("Show").setText("Show");
//
var label = app.createLabel().setText("Works!");
panelToShow.add(label);
verticalPanelDoc.add(panelToShow);
return app;
};
function menuBar(){
var ss = SpreadsheetApp.openById(TABLA_MENU);
var app = UiApp.getActiveApplication();
var absolutePanel = app.getElementById("absolutePanel");
var verticalPanelMenu = app.getElementById("verticalPanelMenu");
var horizontalPanel = app.getElementById("horizontalPanel");
var option_menu = app.getElementById("option_menu");
var arrayMenu = ss.getSheetByName("menu").getDataRange().getValues();
var arraySubMenu =ss.getSheetByName("submenu").getDataRange().getValues();
var arrayEnlacesSubMenu =ss.getSheetByName("enlaces").getDataRange().getValues();
var test1 = arraySubMenu[1][1];//A1
var test2 = arrayMenu[1];//A
var test3 = arrayEnlacesSubMenu[1][1]
// **create menu**
var menuBar = app.createMenuBar(true).setAnimationEnabled(true);
var handler = app.createServerHandler("show")
.addCallbackElement(verticalPanelMenu)
.addCallbackElement(horizontalPanel)
.addCallbackElement(absolutePanel);
// **add structure to menu**
for(var k=1; k<arrayMenu.length; k++) {
menuBar.addItem(arrayMenu[k][1], arrayMenu[k][1] = app.createMenuBar(true).setWidth("100%")).setWidth("100%");
for(var j=1; j<arraySubMenu[k].length; j++){
if(arraySubMenu[k][j]!=''){
var enlace = arrayEnlacesSubMenu[j][1].toString();
var a = arrayMenu[k][1];
var b = arraySubMenu[k][j];
//var c = this[arrayMenu[k][1]].addItem(arraySubMenu[k][j],handler).addSeparator(app.createMenuItemSeparator())
arrayMenu[k][1].addItem(arraySubMenu[k][j],handler).setId("1"+arraySubMenu[k][j])).addSeparator(app.createMenuItemSeparator());
//**THIS ID nither set the ID* show in navigator ID = ... class="gwt-MenuItem" id="gwt-uid-18" role="menuitem" aria-hasp....pan="1">Publicaciones 2012</td>
}
}
menuBar.addSeparator(app.createMenuItemSeparator());
}
return menuBar;
};
menuSpreadsheet
submenuSpreadsheet
Sorry, you can't have it (yet): http://code.google.com/p/google-apps-script-issues/issues/detail?id=317