Zoom in krpano Layer

    Hi,

    here's an example:
    https://krpano.com/examples/118/e…ch-zooming.html

    xml:
    https://krpano.com/examples/118/examples/xml-usage/image-mwheel-touch-zooming/mwheel-touch-zooming.xml

    It uses the onmousewheel event (which will be called also on touch devices on gesture zooms) and
    touch devices the wheeldelta_touchscale variable for getting a scale value related to the zooming-gesture.

    Best regards,
    Klaus

    I used this code, but got a strange problem. When the code is inside the scene, it works for the layer. But if I write this code outside the scenes, in order for it to work on all scenes, it does not work.
    Here is an example:

    <layer name="info_button_open" url="skin/info_hide_open.png" keep="true" align="righttop" align.mobile="righttop" width="20%" width.mobile="60%" height="prop"
    onclick="set(layer[info].visible, false);
    set(layer[info_button_close].visible, true);
    set(visible, false);"
    onover=" tween(layer[info_button_open].alpha, 1.0, 0.9)"
    onout="tween(layer[info_button_open].alpha, 0.5, 0.9)"
    x="0" x.mobile="0" scale="0.75" alpha="0.7" visible="false" crop="286|0|286|51" />

    <layer name="info_button_close" url="skin/info_hide_open.png" keep="true" align="righttop" align.mobile="righttop" width="20%" width.mobile="60%" height="prop"
    onclick="set(layer[info].visible, true);
    set(layer[info_button_open].visible, true);
    set(visible, false);"
    onover=" tween(layer[info_button_close].alpha, 1.0, 0.9)"
    onout="tween(layer[info_button_close].alpha, 0.5, 0.9)"
    x="0" x.mobile="0" scale="0.75" alpha="0.7" crop="0|0|286|51" />


    <layer name="info" url="info.png" scale="0.6" align="center" edge="center" keep="true" visible="false"
    onover="
    set(iszoom, true);
    set(startzoom, true);
    copy(copy_mousefovchange, control.mousefovchange);
    copy(copy_touchzoom, control.touchzoom);
    set(control.mousefovchange, 0);
    set(control.touchzoom, false);
    "
    onout="
    set(iszoom, false);
    copy(control.mousefovchange, copy_mousefovchange);
    copy(control.touchzoom, copy_touchzoom);
    "
    ondown.touch="onover();"
    onup.touch="onout();"
    />

    <!-- mouse wheel event for zooming -->
    <events name="image_zoom_events" onmousewheel="image_onmousewheel();" />

    <!-- the action for zooming either via the mouse wheel for via touch gestures -->
    <action name="image_onmousewheel">
    if(iszoom,
    if(wheeldelta_touchscale GT 0,
    <!-- touch zoom -->
    if(startzoom,
    set(startzoom,false);
    copy(start_wheeldelta_touchscale, wheeldelta_touchscale);
    copy(start_imagescale, layer[info].scale);
    );

    div(tmp, wheeldelta_touchscale, start_wheeldelta_touchscale);
    mul(layer[info].scale, start_imagescale, tmp);
    ,
    <!-- mouse wheel zoom -->
    mul(sit,get(wheeldelta),0.05);
    mul(sit,layer[info].scale);
    add(layer[info].scale,sit);
    );
    );
    </action>

    Hi all,

    Based on Klaus' example for zooming an image
    I tried to use the scrollarea.swf (krpano 1.19-pr12 ScrollArea Plugin (build 2017-08-04)).
    Now the image is draggable but the onmousewheel event is not fired.


    Am I missing something?
    Thank you,
    Pavel

    Hi all,

    Please,
    help me with the zooming action, which should keep focus when zooming under the mouse location.
    I upgraded the Klaus' example for zooming an image from 1.18 to 1.19pr12.
    The basic action calc_mouse_offset() works well when staying on starting mouse position. After moving the mouse there is an offset, which I can't find out.

    (There are two actions in the code. The basic and my test attempt)


    Hoping you direct me to the right logic.
    Thank you to all.
    Pavel

    Quote from klaus.krpano

    mwheel-touch-zooming.xml


    when mouse ondown also cause onup

    add callwith action in asyncloop

    Hi Klaus, tmhok, *...

    Thank you for an attempt to help me though it's still not solved.
    1) The attached example does zoom on the whole pano until the image is dragged or zoomed.
    Not sure why the mouse wheel event over the whole pano is not working after the image is dragged/zoomed.

    2) I separated the zooming offset from the dragging and mouse movement of the image.
    The dragging and mouse movement makes change in the layer[image].ox while the image zooming sets the layer[image].x
    The zoom is not working 100%. Apparently there is something wrong with me...
    (My example is by now only for the x-direction).
    Any help is appreciated.

    Thank you,
    Pavel

    Quote from pur

    San,

    Quote from pur

    Thank you for your input. My attached solution works aswell. But when applied in a container and scrollarea, it's not precise. I will check your code and will see. Please if possible let me know whether my code is running well on touch screen (iPad/iPhone/Android). I haven't tested it there.
    Thank you again for your solution.

    Quote from pur

    Pavel

    I removed all the excess for ease of understanding of code Added
    ondown.touch="onover();draglayer();"
    now is dragged on the touch screen

    http://novosibpano.ru/VT/Zoom_and_drag_4/

    Quote from San7

    I removed all the excess for ease of understanding of code Added
    ondown.touch="onover();draglayer();"
    now is dragged on the touch screen

    [quote='pur','index.php?page=Thread&postID=72957#post72957']Pavel

    I removed all the excess for ease of understanding of code Added
    ondown.touch="onover();draglayer();"
    now is dragged on the touch screen

    http://novosibpano.ru/VT/Zoom_and_drag_4/ if the image is big, when the zoom is activated, it do not reponsive for smatphone


    Thank you,

    Suso

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login