Zoom image function:

[spacemauro]

Hi.

Exist a LZX function that allow image zoom?

EG: I have the code as follows:

<view id="topview" width="320" height="240" bgcolor="#000000">
<view id="map" clip="true" width="250" height="200" x="5" y="20" >
<view id="image" resource="images/geo.jpg"/>
<scrollbar axis="x"/>
<scrollbar axis="y"/>
</view>
<button onclick="image.ZoomIn()" text="Zoom +" x="96" y="0" width="15%" height="8%" />
<button onclick="image.ZoomOut()" text="Zoom -" x="144" y="0" width="15%" height="8%" />
</view>


Thank you in advance.
Mauro.

[jks_pdx]

Here is an example that shows one way that you could implement zoom. Note that I changed your uses of id to name, because this is how I work. It's not relevant to the zoom code itself.

<canvas height="100%" width="100%" debug='true'>
<view name="topview" width="320" height="240" bgcolor="#000000">
<view name="map" clip="true" width="250" height="200" x="5" y="20" >
<view name="image" stretches='both' resource="http://www.travelportland.com/update/graphics/hdr_city_logo.jpg"/>
<scrollbar axis="x"/>
<scrollbar axis="y"/>
<method name='ZoomIn'>
var lCurZoom = this.image.width/image.resourcewidth;
lCurZoom += 0.10;
this.image.setWidth(this.image.resourcewidth * lCurZoom);
this.image.setHeight(this.image.resourceheight * lCurZoom);
</method>
<method name='ZoomOut'>
var lCurZoom = this.image.width/image.resourcewidth;
lCurZoom -= 0.10;
this.image.setWidth(this.image.resourcewidth * lCurZoom);
this.image.setHeight(this.image.resourceheight * lCurZoom);
</method>
</view>
<button onclick="this.parent.map.ZoomIn()" text="Zoom +" x="96" y="0" width="15%" height="8%" />
<button onclick="this.parent.map.ZoomOut()" text="Zoom -" x="144" y="0" width="15%" height="8%" />
</view>
</canvas>

[spacemauro]

Thanks a lot for the reply, excellent code!! :)

If I want to select a rectangular area and zoom it in this way:
first click on left mouse button and start drawing the rectangle
moove the mouse on the map and
second click on left mouse button to stop drawing the rectangle.
In the end zoom this area.


Some ideas in how to draw the rectangle with the mouse?

Thank you in advance

Mauro.

[jks_pdx]

Sorry I don't have time to code that up this morning. Here is the brief outline:
Have a drawview inside a state. Upperleft corner is moved on mouse down, height and width are constrained to mouse position. Drawview draw just a rectangle. On mouse down set the state on, on mouse up clear the state and do your scroll+zoom. Ends up using a lot of OpenLaszlo concepts to do this, not the easiest place to start. Read the software developers guide chapeters on drawviews, constraints, and states (plus all the rest of it as you have time).

http://www.openlaszlo.org/lps/docs/guide/drawview-intro.html
http://www.openlaszlo.org/lps/docs/guide/constraints.html
http://www.openlaszlo.org/lps/docs/guide/states.html

[spacemauro]

Thank you a lot for all.

Mauro.