Sie sind nicht angemeldet.

prjoshi091

Anfänger

  • »prjoshi091« ist der Autor dieses Themas

Beiträge: 17

Wohnort: India

Beruf: Web Developer

  • Nachricht senden

1

Dienstag, 16. Mai 2017, 09:24

Zoom in krpano Layer

Hello,

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

Thank You

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »prjoshi091« (17. Mai 2017, 13:59)


2

Mittwoch, 17. Mai 2017, 14:27

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

Beiträge: 770

Wohnort: Russian Federation

Beruf: Interpreting, Building virtual tours

  • Nachricht senden

3

Mittwoch, 17. Mai 2017, 15:07

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

Alexey

prjoshi091

Anfänger

  • »prjoshi091« ist der Autor dieses Themas

Beiträge: 17

Wohnort: India

Beruf: Web Developer

  • Nachricht senden

4

Donnerstag, 18. Mai 2017, 08:27

Zoom in <layer>

Thank You Klaus! It is Working

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »prjoshi091« (18. Mai 2017, 09:13)


prjoshi091

Anfänger

  • »prjoshi091« ist der Autor dieses Themas

Beiträge: 17

Wohnort: India

Beruf: Web Developer

  • Nachricht senden

5

Donnerstag, 18. Mai 2017, 09:15

Zoom in <layer>

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

6

Dienstag, 6. Juni 2017, 09:46

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

Dienstag, 6. Juni 2017, 15:03

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

Dienstag, 6. Juni 2017, 16:08

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

Sonntag, 6. August 2017, 23:29

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.

Quellcode

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

Sonntag, 6. August 2017, 23:52

onmousewheel event is not fired / Found it!

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

Quellcode

1
mwheel=false 


Sorry for bothering you.
Pavel

11

Samstag, 19. August 2017, 16:58

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)

Quellcode

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« hat folgende Datei angehängt:
  • Zoom_forum.zip (282,87 kB - 159 mal heruntergeladen - zuletzt: Heute, 09:13)

12

Montag, 4. September 2017, 20:46

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« hat folgende Datei angehängt:

13

Montag, 11. September 2017, 09:10

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

Montag, 11. September 2017, 11:37

mwheel-touch-zooming.xml

when mouse ondown also cause onup

add callwith action in asyncloop

Quellcode

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

Dienstag, 19. September 2017, 21:14

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« hat folgende Datei angehängt:

16

Donnerstag, 12. Oktober 2017, 16:36

Magnification on the cursor

http://novosibpano.ru/VT/Zoom_and_drag_4/
»San7« hat folgende Datei angehängt:

Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von »San7« (13. Oktober 2017, 05:29)


17

Donnerstag, 12. Oktober 2017, 20:59

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« hat folgende Datei angehängt:

18

Freitag, 13. Oktober 2017, 05:24

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« hat folgende Datei angehängt:

19

Sonntag, 8. Juli 2018, 15:16

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

Sonntag, 8. Juli 2018, 15:17

not reponsive for smatphone

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


Thank you,

Suso