Develop Reference

How to lock slider and prevent updating of values with mouse into dat.GUI menu

I try to implement a way to prevent the updating of values with mouse (actually when the three.js animation has started, launched with a click on button).
For the moment, I have the following dat.GUI menu:
Once "start" button is clicked, I would like to prevent user from modifying with mouse the parameters "Rotation x" and "Rotation y".
Here is the concerned part of code for this menu:
// Create GUI
var gui = new dat.GUI({
autoplace: false,
width: 350,
height: 9 * 32 - 1
});
var params = {
GreatCircle : '',
Rotationx : torusRotationInitX,
Rotationy : torusRotationInitY,
StartingVector : '',
ComponentVectorTheta : 15.0,
ComponentVectorPhi : 15.0,
CovariantDerivativeVector : '',
ComponentCovariantDerivativeTheta : 15.0,
ComponentCovariantDerivativePhi : 15.0
};
// Set parameters for GUI
gui.add(params, 'GreatCircle').name('Great Circle ');
controllerRotationx = gui.add(params, 'Rotationx', 0, 2*Math.PI, 0.001).name('Rotation x ');
controllerRotationy = gui.add(params, 'Rotationy', 0, 2*Math.PI, 0.001).name('Rotation y ');
...
When I click on reset button, I call the following function:
// Reset Button
resetButton.onclick = function ResetParameters() {
...
// Reinitialize parameters into gui
params.Rotationx = torusRotationInitX;
params.Rotationy = torusRotationInitY;
for (var i in gui.__controllers) {
gui.__controllers[i].updateDisplay();
}
render();
}
I don't know if there is an option for controller to lock these sliders which usually change their values. Is it possible?
Update 1
Maybe I could wrapper the dat.GUI menu into a div and make this div not clickable, is it a solution?
Update 2
I tried to apply the method used on Method for disabling a button in dat.gui?
Following this solution, I have added the extension into dat.gui, just after:
dat.controllers.FunctionController = (function (Controller, dom, common) {
...
});
The following added code snippet is:
function blockEvent(event)
{
event.stopPropagation();
}
Object.defineProperty(dat.controllers.FunctionController.prototype, "disabled", {
get: function()
{
return this.domElement.hasAttribute("disabled");
},
set: function(value)
{
if (value)
{
this.domElement.setAttribute("disabled", "disabled");
this.domElement.addEventListener("click", blockEvent, true);
}
else
{
this.domElement.removeAttribute("disabled");
this.domElement.removeEventListener("click", blockEvent, true);
}
},
enumerable: true
});
Is extension code well located into dat.GUI source?
Then, I set the property "disabled" into my code to prevent user from sliding "controllerRotationx" with mouse (once start button is pressed):
if (animation)
controllerRotationx.__li.disabled = true;
Unfortunately, my method doesn't work : when animation is started, I can still move the slider contained into "controllerRotationx".
I saw that above link (Method for disabling a button in dat.gui?), this was about a button and not for a slider, does it change anything for my case?
I didn't find an explicit controller for the slider.

I would do this. The slider is not a form element, there's nothing to disable in the traditional w3c sense. Luckily we can use pointer-events and disable it properly as if it were a form element using just public dat.gui properties.
var speeder = menu.add(text, 'speed', -5, 5);
speeder.domElement.style.pointerEvents = "none"
speeder.domElement.style.opacity = .5;

The solution given by #Radio works pretty well. But, with sliders, the slider is a sibling of the text box's DOM element. We need to disable pointer events on the div which contains all the controls (and which is not exposed directly by dat.gui). So,
var speeder = menu.add(text, 'speed', -5, 5);
// disables the text box
speeder.domElement.style.pointerEvents = "none"
// disables all controller elements related to "speeder"
speeder.domElement.parentElement.style.pointerEvents = 'none'

When the Start button is pressed, set:
controllerRotationx.__li.setAttribute( "style", "display: none" );

thanks for tips
on my side i hack the Common controller
so able to chainning.
gui.add(this, '_screenW').disable(true);
Common.extend(controller, {
disable: function disable(v) {
this.domElement.style.pointerEvents = v?"none":"auto";
this.domElement.style.opacity = v?.5:1;
return controller;
},

How to display html as firefox panel without using sdk

I need to display html elements as contents of a popup panel using javascript in my firefox addon.
Displaying popup using SDK is what I'm looking for but I don't want to use SDK.
panel:
<popupset id="mainPopupSet">
<panel id="htmlPanel" type="arrow">
i want to use html elements like p,div,span, etc here.
</panel>
</popupset>
javascript to open panel:
document.getElementById('htmlPanel').innerHTML = 'my custom contents';
document.getElementById('htmlPanel').openPopup(null, "before_start", 0, 0, false, false);
it seems some elements are allowed but with different behavior! i also need to set CSS for elements inside panel.

I figure it out how to do it using an iframe
changed the XUL as follow:
<popupset id="mainPopupSet">
<panel id="htmlPanel" type="arrow">
<html:iframe id="htmlContainer"/>
</panel>
</popupset>
and create a javascript function to set html contents:
function setupPanel(contents, width, height)
{
var iframe = document.getElementById("htmlContainer");
iframe.setAttribute("src","data:text/html;charset=utf-8," + escape(contents));
iframe.width = width || 300; //default width=300
iframe.height = height || 300; //default height=300
}
and usage:
setupPanel("<p>this is raw HTML.</p>");
document.getElementById('htmlPanel').openPopup(null, "before_start", 0, 0, false, false);
thanks for your hints.

With animation can copy paste to scratchpad to run it.
var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var props = {
type: 'arrow',
style: 'width:300px;height:100px;'
}
for (var p in props) {
panel.setAttribute(p, props[p]);
}
win.document.querySelector('#mainPopupSet').appendChild(panel);
panel.addEventListener('popuphiding', function (e) {
e.preventDefault();
e.stopPropagation();
//panel.removeEventListener('popuphiding', arguments.callee, false); //if dont have this then cant do hidepopup after animation as hiding will be prevented
panel.addEventListener('transitionend', function () {
//panel.hidePopup(); //just hide it, if want this then comment out line 19 also uncomment line 16
panel.parentNode.removeChild(panel); //remove it from dom //if want this then comment out line 18
}, false);
panel.ownerDocument.getAnonymousNodes(panel)[0].setAttribute('style', 'transform:translate(0,-50px);opacity:0.9;transition: transform 0.2s ease-in, opacity 0.15s ease-in');
}, false);
panel.openPopup(null, 'overlap', 100, 100);
to display html in it, do createElementNS('html namespace i cant recall right now','iframe') then set the src of this to the html you want it to display
the type:'arrow' here is important

Since this appears to be an overlay of browser.xul, if your panel will display static content or a simple template, you can take advantage of the fact that the XHTML namespace is already declared.
<popupset id="mainPopupSet">
<panel id="htmlPanel" type="arrow">
<html:div id="htmlplaceholder">
<html:p>Lorem ipsum</html:p>
<html:p>foo <html:strong>bar</html:strong></html:p>
</html:div>
</panel>
</popupset>
The Add-on SDK hosts the html content inside an iframe, perhaps you should consider this for more complex cases.

Animate color change of shape for certain number of frames EaselJs

I am using EaselJS and want to create a flashing color rectangle that will flash a certain number of times when a button is pressed, displaying random colors from an array. It should stop after 10 color flashes and then I want to extract the final color.
So far the relevant code I have is:
var colorArray = ["#FE7B62","#CB2DD3","#F1FD66","#004CE8","#FFD068", "#02A97E"];
square = new createjs.Shape();
square.graphics.beginFill("#000").drawRoundRect(850, 50, 100, 100, 20);
function pushButton(event) {
square.graphics.inject(animateColor);
}
function animateColor(event) {
this.fillStyle = colorArray[parseInt(Math.random()*6)];
}
This code successfully triggers the flashing of colors from my color array, but I am not sure what the best method of running the animation for a limited number of frames is. I tried pausing the ticker and restarting it on the onclick of the button but that failed. I also tried using a for loop in the pushButton function but that caused a "too much recursion error" in the browser. Here is my full file link https://github.com/RMehta95/sherman-land/blob/master/main.js.

I would suggest creating an event to trigger your action (xamountOfFrames). Here is a link to some information that might help
http://www.w3schools.com/tags/ref_eventattributes.asp

I ended up not using the inject function and instead redrawing the shape each time, creating a couple counter and timer variables to ensure that it looped through the proper amount of times.
function pushButton() {
if (timer === false) {
animate = setInterval(animateColor, 200);
timer = true;
}
}
function animateColor() {
square.graphics.clear();
displayColor = colorArray[Math.floor(Math.random()*colorArray.length)];
square.graphics.beginFill(displayColor).drawRoundRect(850, 50, 100, 100, 20);
counter++;
if (counter===15) {
clearInterval(animate);
counter=0;
movePlayer(displayColor);
timer = false;
return;
}
}

Add transition to images on my website

I have this code:
<script type="text/javascript">
var aImages = [
"images/gaming/GTAV/GTAVReviewImage1.jpg",
"images/gaming/GTAV/GTAVReviewImage2.jpg",
"images/gaming/GTAV/GTAVReviewImage3.jpg",
"images/gaming/GTAV/GTAVReviewImage4.jpg",
"images/gaming/GTAV/GTAVReviewImage5.jpg",
"images/gaming/GTAV/GTAVReviewImage6.jpg",
"images/gaming/GTAV/GTAVReviewImage7.jpg"];
var oImage = null;
var iIdx = 0;
function play() {
try {
if (oImage===null) { oImage=window.document.getElementById("review-images"); }
oImage.src = aImages[(++iIdx)%(aImages.length)];
setTimeout('play()',5000);
} catch(oEx) {
}
}
</script>
which changes the image on this page: http://chrisbrighton.co.uk/GTAV.php every five seconds.
How can I add image transition to it?
UPDATE: When I add -webkit-transition to the img tag nothing happens.
Thanks.

There are different ways to do it. A lot of people have went to CSS3 now that there is some really cool animating and transition effects... You can control your ccs3 effects using javascript. For a detailed tutorial check - controlling animations with javascript

Fading script will not work in IE?

I'm pretty new to Javascript and have been trying to achieve some fading effects on a website.
I've managed to hammer together the effects I want and everything's working fine on Firefox & Safari. However IE doesn't like it. The first script to change the background colour works but the second script to fade in the content does nothing.
I'm calling the scripts from the head as follows:
window.onload=siteIntro;
And the Javacript which is not working is here. Any help or suggestions would be appreciated, the live site can be viewed if needed.
Many Thanks
// ################# Fade Divs ###############################
function Fade(objID,CurrentAlpha,TargetAlpha,steps){
var obj = document.getElementById(objID);
CurrentAlpha = parseInt(CurrentAlpha);
if (isNaN(CurrentAlpha)){
CurrentAlpha = parseInt(obj.style.opacity*100);
if (isNaN(CurrentAlpha))CurrentAlpha=100;
}
var DeltaAlpha=parseInt((CurrentAlpha-TargetAlpha)/steps);
var NewAlpha = CurrentAlpha - DeltaAlpha;
if (NewAlpha == 100 && (navigator.userAgent.indexOf('Gecko') != -1 && navigator.userAgent.indexOf('Safari') == -1)) NewAlpha = 99.99;
obj.style.opacity = (NewAlpha / 100);
obj.style.MozOpacity = obj.style.opacity;
obj.style.KhtmlOpacity = obj.style.opacity;
obj.style.filter = 'alpha(opacity='+NewAlpha+')';
if (steps>1){
setTimeout('Fade("'+objID+'",'+NewAlpha+','+TargetAlpha+','+(steps-1)+')', 50);
}
}
// ################# Toggle content div visibility ###############################
function mainVis(showMain) {
document.getElementById(showMain).style.visibility ="visible";
}
function pageSwitch(show0, hide0, hide1, hide2, hide3) {
document.getElementById(show0).style.visibility ="visible";
document.getElementById(hide0).style.visibility ="hidden";
document.getElementById(hide1).style.visibility ="hidden";
document.getElementById(hide2).style.visibility ="hidden";
document.getElementById(hide3).style.visibility ="hidden";
}
function pg1() {
pageSwitch('prices', 'icon', 'about', 'map', 'news');
Fade('prices','0',100,30)
}
function pg2() {
pageSwitch('about', 'icon', 'prices', 'map', 'news');
Fade('about','0',100,30)
}
function pg3() {
pageSwitch('map', 'icon', 'about', 'prices', 'news');
Fade('map','0',100,30)
}
function pg4() {
pageSwitch('news', 'icon', 'map', 'about', 'prices');
Fade('news','0',100,30)
}
// ################# Site Intro Functions ###############################
function siteIntro() {
setTimeout("NLBfadeBg('b1','#FFFFFF','#000000','3000')",2000);
mainVis('main');
setTimeout("Fade('main','',100,30)",5000);
}

MS filters only apply to elements that "have layout".
To force layout, you can give the element a width or a height, or use the old zoom: 1; trick.
Not sure if this is the cause of your problems, but you could try it.
You can read more about hasLayout here.
Another thing, instead of:
setTimeout('Fade("'+objID+'",'+NewAlpha+','+TargetAlpha+','+(steps-1)+')', 50)`
you can simply write:
setTimeout(function() { Fade(objID, NewAlpha, TargetAlpha, steps-1); }, 50)`
Unless you are doing it just for fun and/or learning, just use an existing JS library instead of re-inventing the wheel.

Maybe you can take advantage of an out-of-the-box cross browser script like this
http://brainerror.net/scripts/javascript/blendtrans/
Or use jQuery (which is great with animating and effects) or any other JS library

This might not be an answer you are looking for, but you shouldn't be doing this: you can use jQuery to do this for you. One or two lines of code, and it is cross browser compatible.