How can I use Rotational Spring of Famo.us? - famo.us

I'm trying to make some examples using Famo.us Physics engine.
I had tried an example of spring. I thought rotational spring could be similar with it,so I'm trying to do but it's not that easy for me.
Here is an example using Rotational Spring, but it doesn't work
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var ImageSurface = require("famous/surfaces/ImageSurface");
var Modifier = require("famous/core/Modifier");
var Transform = require("famous/core/Transform");
var Transitionable = require("famous/transitions/Transitionable");
var PhysicsEngine = require("famous/physics/PhysicsEngine");
var Spring = require("famous/physics/forces/Spring");
var RotationalSpring = require("famous/physics/forces/RotationalSpring");
var Particle = require("famous/physics/bodies/Particle");
var Body = require("famous/physics/bodies/Body");
var Constraint = require("famous/physics/constraints/Constraint");
var MouseSync = require("famous/inputs/MouseSync");
var mainContext = Engine.createContext();
var PE = new PhysicsEngine();
content.particle = new Particle({
mass: 1,
position: [0, 0, 0],
velocity: [0, 0, 0],
axis : 0x01 //0x01 : Particle.AXES.y
});
// Create a spring that will act on the particle
var rotationalSpring = new RotationalSpring({
anchor: [0, 0, 0],
period: 400, // <= Play with these values :-)
dampingRatio: 0.07, // <= if 0 then just once / else if 1 then infinite
length: 0
});
// Link the spring, particle and surface together
PE.attach(rotationalSpring, content.particle);
PE.addBody(content.particle);
var translateMod = new Modifier({ origin: [.5,.5] });
//Get Mouse input
var position = [0, 0];
var mouseSync = new MouseSync(function() {
return position;
});
Engine.pipe(mouseSync);
// Get start when there is a Mouse input
mouseSync.on("start", function() {
FaceSequence.particle.applyForce(new Vector(0, 1.0, 0));
});
translateMod.transformFrom(function() {
var transM = FaceSequence.particle.getTransform();
return transM;
});
How can I make it works?? :)

After poking at the above code a bit, I realized that the function calls of RotationalSpring matched up with Body, not Particle. After a quick rewrite I got a number of odd results which made me think of rotational balances. They are extremely sensitive and extremely delicate, so I guessed that this might work the same way. After dropping the torque a bit I started to get some almost reasonable results. I'll leave the fine tuning, but here is some almost reasonable rotational spring code. I have tilted a surface of angle a little bit to make the rotation a little more clear. You can also see it run live at codefamo.us
Here is the code...
/* globals define */
define(function(require, exports, module) {
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var ImageSurface = require("famous/surfaces/ImageSurface");
var Modifier = require("famous/core/Modifier");
var StateModifier = require("famous/modifiers/StateModifier");
var Transform = require("famous/core/Transform");
var Transitionable = require("famous/transitions/Transitionable");
var PhysicsEngine = require("famous/physics/PhysicsEngine");
var Spring = require("famous/physics/forces/Spring");
var RotationalSpring = require("famous/physics/forces/RotationalSpring");
var Particle = require("famous/physics/bodies/Particle");
var Body = require("famous/physics/bodies/Body");
var Constraint = require("famous/physics/constraints/Constraint");
var Vector = require('famous/math/Vector');
var MouseSync = require("famous/inputs/MouseSync");
var mainContext = Engine.createContext();
var PE = new PhysicsEngine();
var surf = new Surface({
size: [200,200],
properties: {
backgroundColor:'red',
'-webkit-backface-visibility':'visible'
}
});
var tilt = new StateModifier({
transform: Transform.rotateX(Math.PI/8)
});
// Create a spring that will act on the particle
var rotationalSpring = new RotationalSpring({
anchor: new Vector(0, 1, 0),
period: 3000, // <= Play with these values :-)
dampingRatio: 0.1// <= if 0 then just once / else if 1 then infinite
});
var body = new Body({
mass: 10
});
// Link the spring, particle and surface together
PE.addBody(body);
PE.attach(rotationalSpring, body);
var translateMod = new Modifier({
origin: [.5,.5]
});
translateMod.transformFrom(function() {
return body.getTransform();
});
Engine.on('click', function() {
body.applyTorque(new Vector(0,.001,0));
});
mainContext.add(translateMod).add(tilt).add(surf);
});

Related

concurrent modifiers result in huge surface trembling in famo.us

My goal is to mimic Z-translation in perspective mode by using multiple modifiers. I can not use just z-translation of a surface because a text of translated surface became blurred (at least at Chrome but also on another browsers). The idea of using concurrent modifiers is explained in my blog: https://ozinchenko.wordpress.com/2015/02/04/how-to-avoid-blurring-of-the-text-in-famo-us-during-transition-in-z-direction/
As a result I want to have smooth translation in Z direction surface with a smooth text scaling.
the codepen code is here:
http://codepen.io/Qvatra/pen/yyPMyK?editors=001
var Engine = famous.core.Engine;
var Surface = famous.core.Surface;
var ImageSurface = famous.surfaces.ImageSurface;
var ContainerSurface = famous.surfaces.ContainerSurface;
var View = famous.core.View;
var Entity = famous.core.Entity;
var Modifier = famous.core.Modifier;
var StateModifier = famous.modifiers.StateModifier;
var Transform = famous.core.Transform;
var Transitionable = famous.transitions.Transitionable;
var TransitionableTransform = famous.transitions.TransitionableTransform;
var Easing = famous.transitions.Easing;
var Scrollview = famous.views.Scrollview;
var perspective = 1000;
var fontValue = 100; //initially font-size is 100%
var surfSize = [100,100];
var mainContext = Engine.createContext();
mainContext.setPerspective(perspective);
var transitionable = new Transitionable(0);
var mySurface = new Surface({
size: surfSize,
properties: {
backgroundColor: 'red',
textAlign: 'center',
color: 'white',
fontSize: fontValue + '%',
lineHeight: surfSize[1] + 'px'
},
content: 'Click Me'
});
var transitionModifier = new StateModifier({
origin: [.5, .5],
align: [.5, .5],
transform: Transform.translate(0,0,0.01)
});
mainContext.add(transitionModifier).add(mySurface);
function translateZ(dist, transition) {
transitionable.reset(0);
transitionable.set(dist, transition);
function prerender() {
var currentDist = transitionable.get();
//perspective formula: dist = perspective(1 - 1/scaleFactor)
var currentScale = 1 / (1 - currentDist / perspective);
var currentSize = [surfSize[0] * currentScale, surfSize[1] * currentScale];
var currentFontValue = fontValue * currentScale;
//f.e: bring closer => make projection scaleFactor times bigger
var transitionTransform = Transform.translate(0,0, currentDist);
//scaling back to avoid text blurring
var scaleTransform = Transform.scale(1/currentScale, 1/currentScale, 1);
transitionModifier.setTransform(Transform.multiply(transitionTransform, scaleTransform));
mySurface.setSize(currentSize); //resize to get correct projection size
mySurface.setOptions({
properties:{
fontSize: currentFontValue + '%', //resizing font;
lineHeight: currentSize[1] + 'px' //align text;
}
})
if (currentDist === dist) {
Engine.removeListener('prerender', prerender);
}
}
Engine.on('prerender', prerender);
}
Engine.on('click', function() {
translateZ(750, {curve: 'easeOutBounce', duration: 2000});
});
Why do I have the shaking of the image? How to avoid that?
The StateModifier is changing the size of your surface while you are setting the size of the surface. Because you are handling the size of the surface, there is no need to change (set) the StateModifier to scale. I am not sure your method will hold up in all cases, but this answers your question.
Here is a new translateZ function:
function translateZ(dist, transition) {
transitionable.reset(0);
transitionable.set(dist, transition);
function prerender() {
var currentDist = transitionable.get();
//perspective formula: dist = perspective(1 - 1/scaleFactor)
var currentScale = 1 / (1 - currentDist / perspective);
var currentSize = [surfSize[0] * currentScale, surfSize[1] * currentScale];
var currentFontValue = fontValue * currentScale;
mySurface.setSize(currentSize); //resize to get correct projection size
mySurface.setOptions({
properties:{
fontSize: currentFontValue + '%', //resizing font;
lineHeight: currentSize[1] + 'px' //align text;
}
})
if (currentDist === dist) {
Engine.removeListener('prerender', prerender);
}
console.log('trans')
}
Engine.on('prerender', prerender);
}

famo.us scale and rescale, save scale data from event to event

I have a simple problem I am stuck on. I want to implement a ScaleSync on an ImageSurface. Everytime I end the scale action the data value is reset to 1 and if I perform another scale the ImageSurfaces starts transforming from 1.
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Modifier = require('famous/core/Modifier');
var Transform = require('famous/core/Transform');
var ImageSurface = require('famous/surfaces/ImageSurface');
var Surface = require('famous/core/Surface');
var ScaleSync = require("famous/inputs/ScaleSync");
var mainContext = Engine.createContext();
var start = 1;
var update = 0;
var end = 0;
var growShrink = "";
var objectScale = 1;
var scaleSync = new ScaleSync();
var logo = new ImageSurface({
size: [200, 200],
content: '/content/images/famous_logo.png',
classes: ['backfaceVisibility']
});
var centerModifier = new Modifier({
align: [0.5, 0.5],
origin: [0.5, 0.5]
});
logo.pipe(scaleSync);
scaleSync.on("update", function(data) {
objectScale = data.scale
centerModifier.setTransform(
Transform.scale( objectScale, objectScale, 1)
);
});
scaleSync.on("start", function(){
start ++;
});
scaleSync.on("end", function() {
end++;
});
mainContext.add(centerModifier).add(logo);
});
I tried achieving this using an Accumulator, but I think that's for different purposes. I think I have to somehow alter the data in the on.update callback, but have no clue how to do that.
Your help is much appreciated!
I found the solution. Hope this helps anybody with similar issues. The modifier should have a scale variable that is referenced as follows:
var scale = 1;
var centerModifier = new Modifier({
align: [0.5, 0.5],
origin: [0.5, 0.5],
transform: function(){
return Transform.scale(scale, scale, 1);
}
});
And the state of the variable is changed on event update (I divide data.delta by 10 to normalize the value):
scaleSync.on("update", function(data) {
scale += data.delta / 10;
});

famo.us animate state of Surfaces in a GridLayout with a StateModifier

How can I attach a StateModifier to a Surface that resides in a GridLayout?
My Code looks something like this:
//...
var grid = new Gridlayout({dimensions: [2,1]});
var surfaces = [];
grid.sequenceFrom(surfaces);
var surface01 = new Surface({content: 'Surface 01'});
var surface02 = new Surface({content: 'Surface 02'});
surfaces.push(surface01,surface02);
this._node.add(grid);
//...
Since the surfaces are not added to the render tree explicitly like:
this._node.add(modifier).add(surface)
I don't know how I can attach Modifiers to the surfaces?! Am I missing something? Any help is much appreciated
You will need to add a view as your sequence from items. The example code below uses a RenderNode as the view item and adds the StateModifier and Surface
Example jsBin Code [v0.3.0 of Famo.us]
var mainContext = Engine.createContext();
var surfaces = [];
var grid = new GridLayout({
dimensions: [2, 1]
});
var counter = 0;
_getView = function(name) {
var rnode = new RenderNode();
var state = new StateModifier({
size: [undefined, 500]
});
var surface = new Surface({
content:name,
properties: {
backgroundColor: "hsl(" + (counter * 360 / 8) + ", 100%, 50%)",
lineHeight: '500px',
textAlign: 'center',
cursor: 'pointer'
}
});
rnode.add(state).add(surface);
counter += 1;
return rnode;
};
surfaces.push(_getView('Surface 1'));
surfaces.push(_getView('Surface 2'));
grid.sequenceFrom(surfaces);
mainContext.add(grid);
If I'm not missing anything you want to modify the state of your surface inside the gridLayout, by clicking on one of them??
The gridLayout has an array of state that you can access by typing gridlayout._states['index of your surface']
var mainContext = Engine.createContext();
var surfaces = [];
var GridLayout = new GridLayout({
dimensions: [4,10]
});
for (var i = 0; i<40; i++){
var surface = new Surface({
content: 'surface' + i,
size: [200, 200]
});
surface.index = i;
surfaces.push(surface);
});
GridLayout.sequenceFrom(surfaces);
//now if you want to modify the state of the surface with index 2
GridLayout._states[2].set(Transform.rotateX(Math.PI/2)); // your surface will rotate by 90° on X axis
mainContext.add(GridLayout);

Walls are in the incorrect place

When I set the balls origin to [0.5,0.5] the walls are placed correctly, when i set its transform or origin to any other location the walls move as well?
I have tried to explicitly set the engines origin but that doesn't work either
this code is copy paste able into main.js in the famous starter kit
define(function(require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var EventHandler = require('famous/core/EventHandler');
var View = require('famous/core/View');
var Transform = require('famous/core/Transform');
var $ = require('jquery');
var StateModifier = require('famous/modifiers/StateModifier');
var Modifier = require('famous/core/Modifier');
var PhysicsEngine = require('famous/physics/PhysicsEngine');
var Body = require('famous/physics/bodies/Body');
var Circle = require('famous/physics/bodies/Circle');
var Wall = require('famous/physics/constraints/Wall');
var Vector = require('famous/math/Vector');
var context = Engine.createContext();
var handler = new EventHandler();
//{origin:[0.5,0.5]}
var physicsEngine = new PhysicsEngine();
$('#game').on('click', function(event) {
console.log('x '+event.clientX);
console.log('y '+event.clientY)
createBall(event.clientX, event.clientY);
})
var leftWall = new Wall({
normal: [1, 0, 0],
distance: window.innerWidth / 2.0,
restitution: 0.5
});
var rightWall = new Wall({
normal: [-1, 0, 0],
distance: window.innerWidth / 2.0,
restitution: 0.5
});
var topWall = new Wall({
normal: [0, 1, 0],
distance: window.innerHeight / 2.0,
restitution: 0.5
});
console.log(window.innerHeight )
console.log(window.innerWidth )
var bottomWall = new Wall({
normal: [0, -1, 0],
distance: window.innerHeight / 2.0,
restitution: 0.5
});
leftWall = physicsEngine.attach(leftWall,[]);
rightWall = physicsEngine.attach(rightWall,[]);
topWall = physicsEngine.attach(topWall,[]);
bottomWall = physicsEngine.attach(bottomWall,[]);
var balls = []
function createBall(x, y) {
var ball = new Surface({
size: [100, 100],
properties: {
backgroundColor: 'red',
borderRadius: '100px'
}
})
ball.state = new StateModifier({
// transform: Transform.translate(x, y, 0)
});
ball.particle = new Circle({
radius: 50,
position : new Vector(x, y, 0)
});
physicsEngine.addBody(ball.particle);
ball.on("click", function() {
console.log('clicked ball')
ball.particle.setVelocity([1, 1, 0]);
});
context.add(ball.state).add(ball)
Engine.on('prerender', function() {
ball.state.setTransform(ball.particle.getTransform())
});
// balls.push(ball.particle);
//bottomWall = physicsEngine.attach(ball.particle,balls);
physicsEngine.attachTo(leftWall,ball.particle);
physicsEngine.attachTo(rightWall,ball.particle);
physicsEngine.attachTo(topWall,ball.particle);
physicsEngine.attachTo(bottomWall,ball.particle);
}
});
The physics collision and adding of particles is driven by the origin of the physics engine in famo.us, so you would want to set the origin of the physics engine to your render node.
As you can see from the code below or the following link:
jsFiddle Link
The placement of the walls are driven by the origin of the physics engine when they are attached. The particles you attach to the walls are bound by the origin of the physics engine also, so changing their origin is going to have an effect on their collision to the walls.
The example code does not attach a modifier to the circles, but adds them to the particles. I am not sure if you were trying to do something different, but hopefully this answers your question.
define('main', function (require, exports, module) {
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var RenderNode = require('famous/core/RenderNode');
var EventHandler = require('famous/core/EventHandler');
var View = require('famous/core/View');
var Transform = require('famous/core/Transform');
//var $ = require('jquery');
var StateModifier = require('famous/modifiers/StateModifier');
var Modifier = require('famous/core/Modifier');
var PhysicsEngine = require('famous/physics/PhysicsEngine');
var Body = require('famous/physics/bodies/Body');
var Circle = require('famous/physics/bodies/Circle');
var Wall = require('famous/physics/constraints/Wall');
var Vector = require('famous/math/Vector');
var context = Engine.createContext();
var node = new RenderNode();
var physicsOrigin = [0.5, 0.5];
var radius = 50;
context.add(new Modifier({
origin: physicsOrigin
})).add(node);
var handler = new EventHandler();
var physicsEngine = new PhysicsEngine();
node.add(physicsEngine);
console.log(window.innerHeight);
console.log(window.innerWidth);
var dimX = window.innerWidth;
var dimY = window.innerHeight;
Engine.on('click', function (event) {
console.log('x ' + event.clientX);
console.log('y ' + event.clientY)
var x = event.clientX - (dimX * physicsOrigin[0]);
var y = event.clientY - (dimY * physicsOrigin[1]);
createBall(x, y);
});
var leftWall = new Wall({
normal: [1, 0, 0],
distance: Math.round(dimX / 2.0),
restitution: 0.5
});
var rightWall = new Wall({
normal: [-1, 0, 0],
distance: Math.round(dimX / 2.0),
restitution: 0.5
});
var topWall = new Wall({
normal: [0, 1, 0],
distance: Math.round(dimY / 2.0),
restitution: 0.5
});
var bottomWall = new Wall({
normal: [0, -1, 0],
distance: Math.round(dimY / 2.0),
restitution: 0.5
});
var balls = [];
physicsEngine.attach([leftWall, rightWall, topWall, bottomWall], balls);
function createBall(x, y) {
var ball = new Surface({
size: [radius * 2, radius * 2],
properties: {
backgroundColor: 'blue',
borderRadius: (radius * 2) + 'px'
}
})
ball.particle = new Circle({
radius: radius,
position: [x, y, 0]
});
physicsEngine.addBody(ball.particle);
node.add(ball.particle).add(ball)
ball.on("click", function () {
console.log('clicked ball')
ball.setOptions({properties: {backgroundColor: 'red'}});
ball.particle.setVelocity([1, 1, 0]);
});
balls.push(ball.particle);
}
});

How to implement Slide to delete in Famo.us with proper event handling

I'm trying to implement a slide to delete. As part of that I have a layer with opacity set to 0 the idea being I'm trying to set several if clauses to gradual change the opacity of the surface so that the word Delete gentle appears as you slide it to the left. At this point I just have it switching at 10pixels for testing. The functions fire but the opacity doesn't change. I think it has something to do with not being piped/event handling being done properly on my part. Any Ideas?
var SnapTransition = require("famous/transitions/SnapTransition");
Transitionable.registerMethod('snap', SnapTransition);
var CSS = require("css/recentActivityCSS");
var Ctrl = require("controllers/recentActivityCtrl");
var homeContentWrap = new Scrollview();
var recentActivities = [];
var ContainerSize = [undefined, 100];
homeContentWrap.sequenceFrom(recentActivities);
for (var i = 0; i < Ctrl.recentActivityList.length; i++) {
var recentActivitiesContainer = new ContainerSurface({
size: ContainerSize,
properties: CSS.recentActivitiesContainer,
});
var redLayer = new Surface({
size: ContainerSize,
content: 'DELETE',
properties: CSS.redLayer,
});
var draggable = new Draggable({
xRange: [-120, 5],
yRange: [0, 0],
});
var textContainer = new ContainerSurface({
size: ContainerSize,
properties: CSS.textContainer,
});
var mod = new Modifier({});
node = new RenderNode(draggable);
node.add(mod).add(textContainer);
textContainer.pipe(draggable);
textContainer.pipe(homeContentWrap);
var opacityMod = new StateModifier({
opacity: 0
});
recentActivitiesContainer.add(node);
recentActivitiesContainer.add(opacityMod).add(redLayer);
recentActivities.push(recentActivitiesContainer);
var trans = {
method: 'snap',
period: 100,
dampingRatio: 0.3,
velocity: 5
};
draggable.on('start', function() {});
draggable.on('update', function() {
var position = this.getPosition();
if (position[0] > (-10)) {
opacityMod.halt();
opacityMod.setOpacity(0, { curve: 'easeOut', duration: 10 });
} else {
opacityMod.halt();
opacityMod.setOpacity(1, { curve: 'easeOut', duration: 10 });
}
});
draggable.on('end', function(){
var position = this.getPosition();
if (position[0] < (-100)) {
alert('delete');
}
this.setPosition([0,0,0], trans);
});
There are a couple of things I did to the draggable 'update' function to achieve what you have described.
1) You need to bind objects to your update function or else you have no real reference to them. When you use opacityMod in your 'update' function, you only alter the last cells opacityMod. Since binding will change the meaning of 'this', I also bind draggable.
2) You say you want a gradual fade. This approach is not going to give you anything gradual. You need to take the position of the draggable and calculate an opacity based on that value. To start, I declare two new variables for fadeStart and fadeEnd, that represent the positions of the draggable X position 0 and 1 opacity respectively.
Also you probably do not need the transition in your setOpacity, but I kept it in anyway.
Here is the updated 'update' function.. Good Luck!
fadeStart = -10;
fadeEnd = -100;
draggable.on('update', function() {
var draggable = this[0];
var opacityMod = this[1];
var position = draggable.getPosition();
if ( position[0] > fadeStart ) {
opacityMod.halt();
opacityMod.setOpacity(0, { curve: 'easeOut', duration: 10 });
} else if ( position[0] > fadeEnd ) {
opacity = (position[0] - fadeStart) / ( fadeEnd - fadeStart );
opacityMod.halt();
opacityMod.setOpacity(opacity, { curve: 'easeOut', duration: 10 });
} else {
opacityMod.halt();
opacityMod.setOpacity(1, { curve: 'easeOut', duration: 10 });
}
}.bind([draggable,opacityMod]));
John has clearly answered this question above, but I wanted to show an alternate approach to the problem. I've seen questions here and in the #famous irc where people are having eventing problems. I've also seen a number of people struggling with binding or the lack of it. And finally, if you work out the whole slide thing here, shouldn't you be able to put that behind you and simply drop it in elsewhere? With that in mind I wrote a program that simply puts several images into a scrollview. Then I wrote a function called createSlidePanel that encapsulated the slide functionality and then to enable the fade-in of the word "delete" I created a second helper function createModifyingView. This approach appears to hit all three points above. I broke the eventing problems down into smaller more manageable units. It completely eliminated the need for this and binding. And finally, the two helper functions can be reused.
Here is my version of "main.js" which contains fundamentally "application" behavior:
/* globals define */
define(function(require, exports, module) {
'use strict';
// import dependencies
var Engine = require('famous/core/Engine');
var ImageSurface = require('famous/surfaces/ImageSurface');
var Surface = require('famous/core/Surface');
var Scrollview = require('famous/views/Scrollview');
var SnapTransition = require('famous/transitions/SnapTransition');
var Transitionable = require('famous/transitions/Transitionable');
var createSlidePanel = require('SlidePanel');
var createModifyingView = require('ModifyingView');
Transitionable.registerMethod('snap', SnapTransition);
var trans = {
method: 'snap',
period: 100,
dampingRatio: 0.3,
velocity: 5
};
var dataSource = [
'http://www.outerspaceuniverse.org/wp-content/uploads/2009/07/outer-space1.jpg',
'http://wallpoper.com/images/00/39/95/84/outer-space_00399584.jpg',
'http://static1.businessinsider.com/image/508c649e69beddb270000005/the-only-reason-private-space-flight-isnt-laughed-at-is-nasas-11-billion-infusion.jpg'
];
var images = [];
var slideOptions = {
drag: {
xRange: [-120, 5],
projection: 'x',
},
view: {
size:[300,300]
}
};
var mainContext = Engine.createContext();
var scrollView = new Scrollview();
mainContext.add(scrollView);
dataSource.forEach(function(url,i,urls) {
var img = new ImageSurface({
content: url,
size: [300,300]
});
var dlt = new Surface({
size:[300,300],
content: 'DELETE',
properties: {
color: 'red',
zIndex: 4,
lineHeight: '200px',
fontSize:'60px'
}
});
var modView = createModifyingView();
modView.modifier.setOpacity(0);
modView.add(dlt);
var elem = createSlidePanel(slideOptions);
elem.addSlide(img)
elem.addStill(modView);
elem._eventOutput.pipe(scrollView);
elem.on('slideupdate',slideUpdateHandler);
elem.on('slideend',slideEndHandler);
images.push(elem);
});
function slideUpdateHandler(eventInfo) {
var ratio = (eventInfo.data.position[0]-slideOptions.drag.xRange[1])/(slideOptions.drag.xRange[0]-slideOptions.drag.xRange[1]);
if(ratio>.2) {
eventInfo.source.stillElements[0].modifier.setOpacity(ratio);
} else {
eventInfo.source.stillElements[0].modifier.setOpacity(0);
}
}
function slideEndHandler(eventInfo) {
if (eventInfo.data.position[0] < (-100)) {
alert('delete');
}
eventInfo.source.modifier.setPosition([0,0,0], trans);
eventInfo.source.stillElements[0].modifier.setOpacity(0);
}
scrollView.sequenceFrom(images);
});
The slide functionality is here in "SlidePanel.js":
/* globals define */
define(function(require, exports, module) {
'use strict';
// import dependencies
var Modifier = require('famous/core/Modifier');
var View = require('famous/core/View');
var Draggable = require('famous/modifiers/Draggable');
function createSlidePanel(options) {
options = options || {};
var slidePanel = new View(options.view);
slidePanel.slideElements = [];
slidePanel.stillElements = [];
slidePanel.modifier = new Draggable(options.drag);
var node = slidePanel._add(slidePanel.modifier);
slidePanel.addSlide = function addSlide(renderable) {
node.add(renderable);
renderable.pipe(slidePanel._eventOutput);
renderable.pipe(slidePanel.modifier);
slidePanel.slideElements.push(renderable);
}
slidePanel.addStill = function addStill(renderable) {
slidePanel.add(renderable);
renderable.pipe(slidePanel._eventOutput);
renderable.pipe(slidePanel.modifier);
slidePanel.stillElements.push(renderable);
}
slidePanel.modifier.on('start',function(data) {
slidePanel._eventOutput.emit('slidestart',{source:slidePanel,data:data});
});
slidePanel.modifier.on('update',function(data) {
slidePanel._eventOutput.emit('slideupdate',{source:slidePanel,data:data});
});
slidePanel.modifier.on('end',function(data) {
slidePanel._eventOutput.emit('slideend',{source:slidePanel,data:data});
});
slidePanel.modifier.activate();
return slidePanel;
}
module.exports = createSlidePanel;
});
And here is the "ModifyingView.js" code:
/* globals define */
define(function(require, exports, module) {
'use strict';
// import dependencies
var Modifier = require('famous/core/Modifier');
var View = require('famous/core/View');
function createModifyingView(options) {
options = options || {};
var view = new View(options);
view.modifier = new Modifier();
var node = view._add(view.modifier);
view.add = function add(renderable) {
node.add(renderable);
view._eventOutput.subscribe(renderable);
};
view.setPosition = function setPosition(/* passthrough */) {
view.modifier.setPosition(arguments);
};
view.setOpacity = function setOpacity(/* passthrough */) {
view.modifier.setOpacity(arguments)
}
//view.modifier.setPosition([0,0,0]);
return view;
}
module.exports = createModifyingView;
});
Several Notes:
Obviously, one of the main changes here is the functional pattern which makes all references explicit and leaves no question of binding.
Yes this is more code than the original, partly because it is complete with all of the require statements and the list of images, but also because it just is. The trade-off here is that you may get more bang for the buck if you reuse the helpers.
The ModifyingView pattern is one I use quite a bit. This comes up so often whether I'm building a login form with eight surfaces interacting in ways the main program need know nothing about, or a simple surface fading in and out, that I have a code snippet which defines a view, a modifier, a statemodifier (one of which I usually delete,) a surface and much of the common code to tie them together.
I'm specifically not recommending the "options" management used in this code, but it suffices for the example.