Question: Accumulation problem

[mcbain]

I took your dragging example an limited the size of the red surface is limited to 500px.
When moving over the limit the red surface keeps at 500px but the accumulation still counts.
So when again try to scale down, one have first to "walk all the way back" before the red surface will reduce size.
Any idea how to solve this?

http://codepen.io/anon/pen/QjPamX

btw. i try to build http://www.thinkandbuild.it/implementing-the-twitter-ios-app-ui/ with samara

[dmvaldman]

What is the effect you are going for? Would you like to stop the translation from happening once the size has reached its maximum value?

In this case it's better to limit the maximum displacement at its source, before you map it to the size and translation. This can be accomplished using the filter method on a stream.

var boundedDisplacement = displacement.filter(function(type, value){
  return value <= 400;
})

Here boundedDisplacement will be just like displacement except it will stop emitting events once the value exceeds 400. You can then map this stream to the size and transform nodes. The filter method takes a function that when true passes events merrily along, but when false cuts off the events.

Let me know if this helps!

[mcbain]

Even when using a filter the accumulation real value is increasing. When you filter all events > 100 but move the mouse 100 more the accumulation value is 200. To again send events the mouse must be moved back 100 - which when is a 2nd move fells strange since no visual feedback to the user. IMHO the accumulation must be prevented to grow.

[dmvaldman]

Ah, I see what you mean. I think that would be a good feature! I'll implement it soon.

[dmvaldman]

I've pointed to a new trial samsara.js file and forked your codepen here http://codepen.io/samsaraJS/pen/BoEVXz

Now Accumulator can be created with optional parameters for clamping. You can instantiate it with

new Accumulator(0, {min : -100, max : 200});

with defaults set to -Infinity and Infinity for min and max if unspecified.

Let me know if this is what you're looking for.

[mcbain]

Here is another example

The header-picture landscape change can be ignored.
I see two phases.

1. touch move down, header picture resizes, plane is rotating
2. touch release, header bounces back, plane can be ignored

1. while dragging the header size is using the mouse-accumulator
2. after release it uses a bounce transition

How can this be made with streams?

[mcbain]

The new version http://codepen.io/samsaraJS/pen/BoEVXz is a little strange...

1. increase size by mouse move right - release mouse
2. 2nd mouse move, starts again with 100px red box, seems that accumulator is reset to 0 somehow

btw. even without {max: 100} the accumulator seems to be reset

[dmvaldman]

Sorry I introduced a bug. It's fixed now.

For your example, I think it's a perfect thing to build in Samsara. For reference you it might be helpful to see how this example works, which also has a "drag to bounce" transition as in your example. The demo relies on the built-in widget DrawerLayout

The way I would think about your example in terms of streams is to have the position of the header be given by an accumulator stream. The accumulator should subscribe to two other streams, one providing deltas from the mouse, the other providing deltas from the "bounce transition" (which should be a Transitionable). Take a look at how this is done inside of DrawerLayout. But it looks something like this:

var position = new Accumulator(0);
var mouseInput = new MouseInput({scale : .5});
var bounce = new Transitionable(0);

// Transitionable only outputs absolute values, so to get deltas, subscribe it to a differential stream
var bounceDeltas = new Differential();
bounceDeltas.subscribe(bounce);

// now position can listen to both the bounce transition and the mouse
position.subscribe(mouseInput.pluck('delta'));
position.subscribe(bounceDeltas);

// when user lets go, transition the bounce
mouseInput.on('end', function(){
    bounce.set(position.get());
    bounce.set(0, {duration : 300, curve : 'easeOutBounce'});
});

You may be trying to limit the accumulator, so that the user can't drag the picture all the way down, but a better approach is to provide a scale option for the mouseInput. If scale = 1/2 for instance, if the user drags 100px, the accumulation will only be 50px.

[dmvaldman]

I believe your issue has been addressed with the min/max capping. Let me know if it's still a problem, otherwise I will close.