Wonder how hard it'd be to do this in Laszlo?

[whisperstorm]

If you visit this site:

http://h10030.www1.hp.com/you/us/en/flash/flashyou.html

And click the explore the gallery link, you get this neat sorta floating gallery if images with interesting rollovers. I wonder how hard that'd be to do in laszlo, I'm guessing it'd be actually fairly simple using some kind of layout..

[antun]

You could use a wrappinglayout to position the images, inside of a container view that is larger than, and lives inside of a view with clipping turned on (call it the clip view).

Then you might write an image class that calls a method and passes its coordinates to the container view, so that it knows where to scroll to:


<canvas width="800" height="800" debug="true">
<debug y="190" width="400" height="300"/>

<class name="floaterImg" width="80" height="45" bgcolor="red">
<method event="onmouseover">
parent.scrollToShow( this );
</method>

<method event="oninit">
var col = Math.round(Math.random() * 16777215);
this.setAttribute( "bgcolor", col );
</method>
</class>

<view name="clipper" clip="true" width="300" height="155" x="20" y="20">
<view name="container" x="0" y="0"
bgcolor="green" width="800" height="600">
<wrappinglayout axis="x" spacing="10"/>

<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />
<floaterImg />


<method name="scrollToShow" args="f">
<![CDATA[
var relImgX = Math.round((f.x) + f.width/2);
var relImgY = Math.round((f.y) + f.height/2);

var distX = Math.round(parent.width/2 - relImgX);
var distY = Math.round(parent.height/2 - relImgY);

// Stop at edges
var actualX = Math.max( Math.min(distX,0) , -this.width/2 );
var actualY = Math.max( Math.min(distY,0) , -this.height/2 );

this.animate( "x", actualX, 1000, false );
this.animate( "y", actualY, 1000, false );
]]>
</method>
</view>
</view>

</canvas>


I have to stress that this example is really rough. You'd have to:

- Disable the method from running EVERY time an onmouseover event happens. Right now, a lot of events are getting sent because the movement causes more onmouseover events to happen. A timer that blocks the method from being called until the animation has stopped would help here.
- Optimize view usage. If your floaterImg classes were more complicated (contained more views each) they would slow down startup. Instead, have the floaterImg replicate on a datapath and have the replication attribute of that attribute set to lazy. This means that only 12 floaterImg's would be created (only those visible at any one time).

-Antun

[whisperstorm]

Wow, that's really nice. Even in rough form this is very cool. I'll play with this to see if the scrolling can be smoothed out a bit.

[antun]

In my opinion, a lot of the fun of front-end development is in establishing what looks and behaves "normal".

If you look at the URL you pointed to, you'll notice that it doesn't slide the center of the image to the center of the screen; rather it lands it within a certain amount of pixels of the center.

If you tweak it a bit, post it on mylaszlo.com

-Antun

[maritimesource]

Any suggestions on how to wrap it around, so when they are at the left most edge, then it would continue to the right most?

Think of a carousel....

I'm trying to create an image carousel-like scroller, that will continually scroll images round-n-round endlessly.

Thanks