problem on mouse down

[mohan]

Hi Antun,

<canvas>
<class name="horizDrag" extends="state">
<attribute name="xdmin" />
<attribute name="xdmax" />
<attribute name="xdoffset" init="this.getMouse( 'x' )" />
<attribute name="x"
value="Math.min(
Math.max(
this.immediateParent.getMouse( 'x' )
- this.xdoffset,
this.xdmin ),
this.xdmax )" />
</class>
<class name="verticalDrag" extends="state">
<attribute name="ydmin" />
<attribute name="ydmax" />
<attribute name="ydoffset" init="this.getMouse( 'y' )" />
<attribute name="y"
value="Math.min(
Math.max(
this.immediateParent.getMouse( 'y' )
- this.ydoffset,
this.ydmin ),
this.ydmax )" />
</class>
<view id="v11" x="150" y="140" stretches="both" resource="costari.gif"
onmousedown="this.xdragger.apply(); this.ydragger.apply() "
onmouseup="this.xdragger.remove(); this.ydragger.remove() ">
<horizDrag name="xdragger" xdmin="100" xdmax="200" />
<verticalDrag name="ydragger" ydmin="70" ydmax="300" />
</view>
<button x="200">Zoom+
<method event="onclick">
<![CDATA[
var maxwidth = 100;
var maxheight = 150;
var increment = 2;
var increment1 = 4;
var newWidth = Math.min( v11.width+increment, maxwidth );
var newHeight = Math.min( v11.height+increment1, maxheight );
v11.setWidth( newWidth );
v11.setHeight( newHeight );
if ( (newWidth < maxwidth) && newHeight < maxheight )
{
v11.setX(v11.x-increment/2);
v11.sety(v11.y-increment1/2);
}
]]>
</method>
</button>
</canvas>


In this code there is a problem with dragging the Image.Before click on the Zoom+ button i can easily
drag the image to anywhere,but once i click on the Zoom+ button,and if i go to drag the image, the position of the image is changing with every mousedown.
it seems it is because of the stretches attribute in the view. But i want the image should be enlarging with clicking on the zoom+ button as well as the position of the image should not change with every mousedown on the image,but it should be smoothly drag by mouse.

With Regards
Mallesh & Rudresh

[antun]

The problem was in the logic you were using to drag the view. I'm not sure whether there was an underlying bug or not, but what I found was that after the view was enlarged, calling getMouse() on it returned the x or y value with the minimum and maximum of the original image.

To get around this problem, I added in a scale that was recalculated every time the view was grown. That scale was the ratio of the new height (or width) to the initial height (or width). I then multiplied that by the value that getMouse() returned, and used that as my ydoffset (or xdoffset):


<canvas debug="true">
<class name="horizDrag" extends="state">
<attribute name="xdmin" />
<attribute name="xdmax" />
<attribute name="x"
value="Math.min(
Math.max(
this.immediateParent.getMouse( 'x' )
- this.xdoffset,
this.xdmin ),
this.xdmax )" />
</class>

<class name="verticalDrag" extends="state">
<attribute name="ydmin" />
<attribute name="ydmax" />
<attribute name="y"
value="Math.min(
Math.max(
this.immediateParent.getMouse( 'y' )
- this.ydoffset,
this.ydmin ),
this.ydmax )" />
</class>

<view id="v11" x="150" y="140" stretches="both" resource="costari.gif"
onmouseup="this.xdragger.remove(); this.ydragger.remove() ">
<method event="oninit">
this.initwidth = this.width;
this.initheight = this.height;
</method>
<method event="onmousedown">
var ydoffset = Math.round( this.getMouse('y') * this.yScale );
var xdoffset = Math.round( this.getMouse('x') * this.xScale );
this.setAttribute('ydoffset', ydoffset);
this.setAttribute('xdoffset', xdoffset);
this.xdragger.apply();
this.ydragger.apply()
</method>
<horizDrag name="xdragger" xdmin="100" xdmax="200" />
<verticalDrag name="ydragger" ydmin="70" ydmax="300" />
</view>

<button x="200">Zoom+
<method event="onclick">
<![CDATA[
var maxwidth = 100;
var maxheight = 150;
var increment = 2;
var increment1 = 4;
var newWidth = Math.min( v11.width+increment, maxwidth );
var newHeight = Math.min( v11.height+increment1, maxheight );
v11.setWidth( newWidth );
v11.setHeight( newHeight );

v11.xScale = v11.width/v11.initwidth;
v11.yScale = v11.height/v11.initheight;
if ( (newWidth < maxwidth) && newHeight < maxheight )
{
v11.setX(v11.x-increment/2);
v11.sety(v11.y-increment1/2);
}
]]>
</method>
</button>
</canvas>


Take care,

Antun

[mohan]

Hai Antun,

Thanks for your solution, it works fine now.

With regards,

Rudresh & Mallesh

[mohan]

Hai Antun,

Thanks for your solution, it works fine now.

With regards,

Rudresh & Mallesh

[mohan]

Hi Antun,


In the above code, the image i getting bigger when i clicking on the zoom+ button, but i want the image to be getting bigger when ever i clicking, as well as, press and hold the "left click" of the mouse on the zoom+ button up to the specified size.

How do i do that?

Thanks
Mallesh

[antun]

The way I would approach this would be to set up a delegate to check the state of the button when the onmousedown event is sent, after a set amount of time.

If the button was still down after the specified amount of time, then keep incrementing the size of the view at regular intervals.

To mimic a typical OS, you will probably find that the first time interval (between when the onmousedown event is sent and when the regular intervals happen) should be a little longer than the subsequent ones.

Take care,

Antun

[mohan]

Hi Antun,

I tried to setup the delegate by using lzDelegate but i still facing the problem.I don't know how to check the state of button on mousedown event and how to register mousedown event to LzDelegate,so that it call the event continuesly untill the mouse release.
It could be better if you provide example code for the above problem.
Thanks
Mallesh

[antun]

Could you post the code you wrote, and I'll tell you where you're going wrong?

-Antun

[mohan]

Hi Antun,

I tried the above code but no luck.If i click on the zoom+ button first time,the image got bigger with warning massage like "a script in this movie is causing flash run slowly".
I dont know how to set the timer for onmousedown event and also i don't know how to check the status of the mouse untill mouse realese.
Here is the code i tried as attached.



Thanks alot
Mallesh

[antun]

The reason you were getting the script running slowly error was because you had written an infinite loop:

while(onmousedown)

... is sure to cause that. It's just like writing while(false).


I dont know how to set the timer for onmousedown event and also i don't know how to check the status of the mouse untill mouse realese.


See here for more on setting timers:

http://www.laszlosystems.com/developers/community/forums/showthread.php?s=&threadid=138

As for how to test for the state of the button, I just used a flag variable that I set to true when the button went down, and set it to false when the button went up. Then I just tested for that variable:


<button name="inc" x="200">Zoom+
<method event="onmousedown">
this.onmousedown.sendEvent();
</method>
<method event="onmousedown">
this.flagIsMouseDown = true;
this.increment();
</method>

<method event="onmouseup">
this.flagIsMouseDown = false;
LzTimer.removeTimer( this.incr );
</method>

<method name="setTimer">
this.incr = new LzDelegate( this, "increment" );
LzTimer.addTimer( this.incr, 100 );
</method>

<method name="increment">
<![CDATA[
var maxwidth = 100;
var maxheight = 150;
var increment = 2;
var increment1 = 3;
var newWidth = Math.min( v11.width+increment, maxwidth );
var newHeight = Math.min( v11.height+increment1, maxheight );
v11.setWidth( newWidth );
v11.setHeight( newHeight );
if ( (newWidth < maxwidth) && newHeight < maxheight )
{
v11.setX(v11.x-increment/2);
v11.sety(v11.y-increment1/2);
}
if (this.flagIsMouseDown) {
this.setTimer();
}
]]>
</method>
</button>


-Antun