You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

prjoshi091

Beginner

  • "prjoshi091" started this thread

Posts: 17

Location: India

Occupation: Web Developer

  • Send private message

1

Tuesday, May 16th 2017, 9:24am

Zoom in krpano Layer

Hello,

i want zoom in krpano <layer> in mobile(touch) device, How can i do this?

Thank You

This post has been edited 1 times, last edit by "prjoshi091" (May 17th 2017, 1:59pm)


2

Wednesday, May 17th 2017, 2:27pm

Hi,

here's an example:
https://krpano.com/examples/118/examples…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

Alexey Tkachenko

Professional

Posts: 750

Location: Sevastopol, Crimea, Russian Federation

Occupation: Interpreting, Building virtual tours

  • Send private message

3

Wednesday, May 17th 2017, 3:07pm

Wow! Very nice feature, Klaus! Many thanks!! *thumbup*
Regards,

Alexey

prjoshi091

Beginner

  • "prjoshi091" started this thread

Posts: 17

Location: India

Occupation: Web Developer

  • Send private message

4

Thursday, May 18th 2017, 8:27am

Zoom in <layer>

Thank You Klaus! It is Working

This post has been edited 1 times, last edit by "prjoshi091" (May 18th 2017, 9:13am)


prjoshi091

Beginner

  • "prjoshi091" started this thread

Posts: 17

Location: India

Occupation: Web Developer

  • Send private message

5

Thursday, May 18th 2017, 9:15am

Zoom in <layer>

Can we set the minimum and maximum range of a zoom in <layer> because it the image in higher range?

6

Tuesday, June 6th 2017, 9:46am

Code out of scene

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>

7

Tuesday, June 6th 2017, 3:03pm

Hi,
But if I write this code outside the scenes, in order for it to work on all scenes, it does not work.
add - keep="true" - to the <events name="image_zoom_events" ... /> element, then that event would be kept working when loading other scenes.

Best regards,
Klaus

8

Tuesday, June 6th 2017, 4:08pm

Code out of scene

Thank you very much, Klaus !!!
It really helped me and gave me a reason to watch documents more often!
*thumbsup*

9

Sunday, August 6th 2017, 11:29pm

onmousewheel event is not fired

Hi all,

Based on Klaus' examplefor 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.

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<krpano version="1.19.12" onstart="showlog(true);" > 
<preview type="grid();" /> 
<layer name="zoom_canvas" 
url="%SWFPATH%/plugins/scrollarea.swf" alturl="%SWFPATH%/plugins/scrollarea.js" 
align="center" width="500" height="PROP" direction="all" 
> 

<layer name="image" url="img/Rychleby.jpg" scale="0.1" align="center" edge="center" 
onover=" 
trace( %0,'(', %1 %2,') name=',name, ' ONOVER: control.mousefovchange=',control.mousefovchange, ' =', , ' tick=', timertick); 
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();" 
/> 
</layer> 
<!-- mouse wheel event for zooming 
--> 
<events name="image_zoom_events" onmousewheel="image_onmousewheel();" keep="true" /> 


<!-- the action for zooming either via the mouse wheel or 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[image].scale); 
); 
div(tmp, wheeldelta_touchscale, start_wheeldelta_touchscale); 
mul(layer[image].scale, start_imagescale, tmp); 
, 
<!-- mouse wheel zoom --> 
mul(sit,get(wheeldelta),0.01); 
mul(sit,layer[image].scale); 
add(layer[image].scale,sit); 
); 
); 
</action> 

</krpano>


Am I missing something?
Thank you,
Pavel

10

Sunday, August 6th 2017, 11:52pm

onmousewheel event is not fired / Found it!

I found the post and it works now right. The mwheel attribute by default is true.

Source code

1
mwheel=false 


Sorry for bothering you.
Pavel

11

Saturday, August 19th 2017, 4:58pm

How to keep focus when zooming

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)

Source code

1
2
3
4
5
6
7
8
9
10
11
<action name="calc_mouse_offset"> 
<!-- to stay focused on the zoom in/out place of the image 
%1 output 
%2 [x,y] the x- or y- direction 
--> 
calc(stage_half, stagewidth/2 ); 
if(%2 == 'y', calc(stage_half, stageheight/2 );); 
calc(mouse_im%2, (stage_half - mouse.%2)); 
calc(%1, ((layer[image].scale - 1.0)*mouse_im%2) BOR 0); 
dbg_swp(trace( %0,'(', %1 %2,')=',get(%1), ' mouse_im%2/mouse.%2=',mouse_im%2,'/',mouse.%2, ' IMAGE: ..scale=',layer[image].scale, ' ..stage_half=',stage_half, ' ..pixelwidth*=',layer[image].pixelwidth, ' ..pixel%2*=',layer[image].pixel%2, ' ..o%2=',layer[image].o%2, ' tick=', calc(timertick BOR 0));); 
</action>



Hoping you direct me to the right logic.
Thank you to all.
Pavel
pur has attached the following file:
  • Zoom_forum.zip (282.87 kB - 14 times downloaded - latest: Apr 28th 2019, 4:05am)

12

Monday, September 4th 2017, 8:46pm

Zoom keeping focus + draggable NOT perfect

Klaus, please help!

I want to zoom in/out a draggable layer with a mwheel/swipe. Attached is my attempt but it works just in the middle of the image.
Would you be so kind giving me a clue what am I doing wrong?

The working test is based on your mwheel example.
Thank you,

Pavel
pur has attached the following file:

13

Monday, September 11th 2017, 9:10am

Hi,

sorry, but I can't analyze or debug your code, but here attached the original mwheel-touch-zooming.xml extended with some code for dragging:
mwheel-touch-zooming.xml

Best regards,
Klaus

14

Monday, September 11th 2017, 11:37am

mwheel-touch-zooming.xml

when mouse ondown also cause onup

add callwith action in asyncloop

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!--  some code for layer dragging  -->
<action name="image_ondown_dragging">
copy(mstartx, mouse.x); 
copy(mstarty, mouse.y); 
copy(lstartx, x); 
copy(lstarty, y); 
asyncloop(pressed, 
calc(x, lstartx + mouse.x - mstartx); 
calc(y, lstarty + mouse.y - mstarty);
,
callwith(layer[image],onover);
 );

</action>

15

Tuesday, September 19th 2017, 9:14pm

How to keep mouse focus when zooming still not solved

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
pur has attached the following file:

16

Thursday, October 12th 2017, 4:36pm

Magnification on the cursor

http://novosibpano.ru/VT/Zoom_and_drag_4/
San7 has attached the following file:

This post has been edited 5 times, last edit by "San7" (Oct 13th 2017, 5:29am)


17

Thursday, October 12th 2017, 8:59pm

Zoom and drag on simple Image (Solved)

San,

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.

Pavel
pur has attached the following file:

18

Friday, October 13th 2017, 5:24am

San,
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.
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/
San7 has attached the following file:

19

Sunday, July 8th 2018, 3:16pm

responsive zoom

San,
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.
Pavel
I removed all the excess for ease of understanding of code Added
ondown.touch="onover();draglayer();"
now is dragged on the touch screen

San,
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.
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

20

Sunday, July 8th 2018, 3:17pm

not reponsive for smatphone

if the image is big, when the zoom is activated, it do not reponsive for smatphone


Thank you,

Suso