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;
},

Chrome App - webview.cleardata, reload and periodic refresh

I'm working on a kiosk app with a webview to display a Google Slides presentation. Basic mechanics are all working fine, but I need for the webview to refresh periodically to reflect changes made to the Slides.
Watched Chromium bug 406437 to clear webview cache (yay!), and am attempting to implement the webview.cleardata and webview.reload, but doesn't seem to work. Console log shows "Cannot read property 'reload' of null"
Am I on the right track? Is there something simple I'm overlooking, or is there a design flaw in my logic?
Contents of my browser.js (at least the first part)...
// NOTE: Refresh timing is on line 26 - in milliseconds
// 5 min: 5 x 60 (sec) x 1000 (ms)
window.onresize = doLayout;
var isLoading = false;
// Define the function
function refreshWebView() {
var webview = document.querySelector('webview');
// https://github.com/GoogleChrome/chrome-app-samples/blob/master/samples/webview-samples/browser/browser.js
// Set up the clear data variable
var clearDataType = {
appcache: true,
cookies: true,
fileSystems: true,
indexedDB: true,
localStorage: true,
webSQL: true,
cache: true
}
webview.clearData({since: 0}, clearDataType, function() { webview.reload(true); });
webview.reload(true);
setTimeout(function() { refreshWebView(); }, 60*1000);
}
// Kick off the refresh (with the delay defined above)
console.log('starting refreshWebView...');
refreshWebView();
onload = function() {
var webview = document.querySelector('webview');
doLayout();
document.querySelector('#back').onclick = function() {
webview.back();
};
... remaining code removed for brevity...

Angular-leaflet-directive Custom HTML popup

I'm attempting to create a custom popup while using the angular-leaflet-directive. I'm opening the popup from the leaflet.draw on:create event. Here:
map.on('draw:created', function(e) {
layer = e.layer;
drawnItems.addLayer(layer);
var newComment = "Enter Comment";
var newID = "ID";
var newGeoJsonFeat = layer.toGeoJSON();
newGeoJsonFeat.properties = {"comment":newComment, "id":newID};
console.log(newGeoJsonFeat);
onEachFeature(newGeoJsonFeat,layer);
layer.openPopup();
});
Then I'm using #blackjid's logic as seen here: https://github.com/tombatossals/angular-leaflet-directive/issues/238 to bind the custom popup
function onEachFeature(feature, layer) {
// Create get the view template
var popupContent = '<div ng-include="\'partials/popup_newfeat.html\'"></div>';
console.log("assigning popup");
// Bind the popup
// HACK: I have added the stream in the popup options
layer.bindPopup(popupContent,{
closeButton: false,
maxHeight: 300,
feature: feature
});
};
$scope.$on('leafletDirectiveMap.popupopen', function(event, leafletEvent){
// Create the popup view when is opened
var feature = leafletEvent.leafletEvent.popup.options.feature;
var newScope = $scope.$new();
newScope.stream = feature;
$compile(leafletEvent.leafletEvent.popup._contentNode)(newScope);
});
Long story short, Everything works fine except the popup container isn't resizing properly to fit the new content. The height seems right, but the width is off.
I tried using:
.leaflet-popup-content {
width:auto !important;
}
Which will probably suffice, but this causes the popup anchor to shift to the bottom left of the popup for some reason. AutoPan is also broken when clicking near the top of the map.
Does anyone know where and how I can get popup.update() to fire? I believe thats what needs to happen, but I don't know where to implement it. I've tried calling it after layer.openPopup() like so:
onEachFeature(newGeoJsonFeat,layer);
layer.openPopup();
layer.getPopup().update();
});
But that doesn't seem to do anything. Any help is greatly appreciated!

You need to use the 'leafletEvent'. Try this:
myApp.controller('YourController', ['$scope', 'leafletEvent', function($scope) {
// after all your crazy custom popup stuff ...
leafletData.getMap().then(function(map) {
layer.getPopup().update();
});
}]);

I ended up storing the image width in the properties of the GeoJson, and then setting the minWidth to that value in the bindPopup function.
layer.bindPopup(popupContent,{
closeButton: true,
closeOnClick: false,
minWidth: feature.properties.width,
autoPanPadding: L.point(20,20),
keepInView: false,
feature: feature
});

Why can't I get destroy() call for skrollr to work?

Hello I am trying to use skrollr on a responsive site, and I just want to turn it off for mobile and then back on for table / desktop. I keep getting this error:
Uncaught TypeError: Object # has no method 'destroy'. A point in the right direction would be helpful as I wasn't able to find an example that is using the destroy call for skrollr.
Below is the code that I am using:
var s = skrollr.init(
{
forceHeight: false,
constants:
{
box: '50p'
}
});
// set breakpoints
$(window).setBreakpoints(
{
// use only largest available vs use all available
distinct: true,
// array of widths in pixels where breakpoints
breakpoints:
[
480,
768
]
});
$(window).bind('enterBreakpoint480',function()
{
console.log("this is now 480");
s.destroy();
});
$(window).bind('enterBreakpoint768',function()
{
console.log("this is now 768");
s = skrollr.get();
});

Custom CSS / meta tag for iPad/iPhone

I am working on a web app that uses Extjs components, PHP, and MySQL.
I want to correctly display my apps on iPad. Are there special CSS rules or meta tags?

Your question is fairly vague. Here are some tips for developing a web application on iOS:
For fixed width sites, use a <meta> tag to tell mobile Safari what the width of your site should be, similar to:
<meta name = "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">
You can get a list of other <meta> tags supported by mobile Safari here.
Mobile Safari adds new events to the JavaScript DOM in order to support touch and orientation change. Here is the Apple reference to them.
Here's a useful overview of how to make a web app suitable for use on iPad.
Finally, try a Google search.

I haven't gotten a chance to test it yet, but I wrote this script to fire the contextmenu event on an element after a long press of 1.5 seconds or more. Try it out.
UPDATE: finally got a chance to test it, it works as intended. I lowered the delay from 1500 ms to 1200 ms since the delay seemed too long for my taste.
(function() {
var EM = Ext.EventManager,
body = document.body,
activeTouches = {},
onTouchStart = function(e, t) {
var be = e.browserEvent;
Ext.id(t);
if(be.touches.length === 1) {
activeTouches[t.id] = fireContextMenu.defer(1200, null, [e, t]);
} else {
cancelContextMenu(e, t);
}
},
fireContextMenu = function(e, t) {
var touch = e.browserEvent.touches[0];
var me = document.createEvent("MouseEvents");
me.initMouseEvent("contextmenu", true, true, window,
1, // detail
touch.screenX,
touch.screenY,
touch.clientX,
touch.clientY,
false, false, false, false, // key modifiers
2, // button
null // relatedTarget
);
t.dispatchEvent(me);
},
cancelContextMenu = function(e, t) {
clearTimeout(activeTouches[t.id]);
};
if(navigator.userAgent.match(/iPad/i) != null) {
Ext.onReady(function() {
EM.on(body, "touchstart", onTouchStart);
EM.on(body, "touchmove", cancelContextMenu);
EM.on(body, "touchend", cancelContextMenu);
});
}
})();