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.

1

Monday, January 11th 2016, 9:16pm

Swipe events on 2d layer

Hi everybody! Can't figure out how to organize swipe touch events on specific layer? I can catch the event via js in plugin but how to attach it to specific layer? Any ideas? *confused*

This post has been edited 1 times, last edit by "Recky" (Jan 11th 2016, 9:55pm)


Posts: 1,850

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

2

Tuesday, January 12th 2016, 3:54pm

KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

jordi

Intermediate

Posts: 428

Location: Barcelona

Occupation: creating ideas & coding them

  • Send private message

3

Tuesday, January 12th 2016, 6:12pm

But scrollarea does not swipe, it scrolls... Can be an easy workaround and can do the job but it s not the same.

I have in my todo list, a swipe effect directly in krpano, no external libraries.
everpano.com smart virtual tours

Posts: 1,850

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

4

Wednesday, January 13th 2016, 6:03pm

You can check it's position ondown versus onup and then move it if the difference is great enough, check if positive or negative to swipe in the right direction, if it's not large enough, tween back to initial position.

I need something like this too, but I have too much on my plate to code this up. I can donate to whomever does a good swipe that works exactly like the photos app on IOS devices.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

panomaster

Intermediate

Posts: 276

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

  • Send private message

5

Wednesday, January 13th 2016, 6:58pm

Sometime ago Tuur made 2 examples of flat galleries:

http://krpano.com/forum/wbb/index.php?pa…0691&highlight=

one of them uses slide effect.

BTW, good idea Sacha. I'll try to do it in my free time

panomaster

Intermediate

Posts: 276

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

  • Send private message

6

Thursday, January 14th 2016, 2:47am

OK, my first attempt:

http://www.ai360.pl/projekty/swipe/

This is an example using Sacha's idea.

Should work on mobiles, tablets and PC. On PC you can launch context menu and switch between two galleries. Switching orientation on mobile should recalculate gallery and display it properly (however it starts with the first image). Galleries can be stored in data containers like this:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
	<gallery name="gallery1" title="Title of gallery 1">
		<img name="img1" url="img/pic1.jpg" title="Escalator" />
		<img name="img2" url="img/pic2.jpg" title="Mask" />
		<img name="img3" url="img/pic3.jpg" title="Wallpaper" />
		<img name="img4" url="img/pic4.jpg" title="F/A-18 C Hornet" />
		<img name="img5" url="img/pic5.jpg" title="Forest" />
		<img name="img6" url="img/pic1.jpg" title="Escalator" />
		<img name="img7" url="img/pic2.jpg" title="Mask" />
		<img name="img8" url="img/pic3.jpg" title="Wallpaper" />
		<img name="img9" url="img/pic4.jpg" title="F/A-18 C Hornet" />
	</gallery>
	
	<gallery name="gallery2" title="Some other pictures">
		<img name="img6" url="img/pic6.jpg" title="A dog" />
		<img name="img7" url="img/pic7.jpg" title="My cat" />
		<img name="img8" url="img/pic8.jpg" title="Watching movie" />
		<img name="img10" url="img/pic10.jpg" title="St. Jacob's church in Skierniewice" />
	</gallery>


There's no title, image counter, pic's title and many other things. But can be tomorrow. What I'm going to do:

- scalable pics (they should fit the screen size if there are bigger)
- remembering pic's position while change of orientation
- text infos (gallery info, pic info, pic counter)
- etc...

Would you like to hmmm... donate this... 'plugin'' (not sure if it is plugin - just a piece of code)?

Any bugs and suggestions appreciated (I'm not able to test it on all devices).

This post has been edited 2 times, last edit by "panomaster" (Jan 14th 2016, 3:16am)


Tuur

Sage

Posts: 3,128

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

7

Thursday, January 14th 2016, 1:50pm

Nice one Panomaster,

seems to work more stable (better) then my old version.
Will you share base code?

(btw.. are you on mac?)

Cheers!
Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

panomaster

Intermediate

Posts: 276

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

  • Send private message

8

Thursday, January 14th 2016, 1:59pm

Yes, I'm going to share the code as far as I finished. I've noticed on iPhone sweep is done only after moving picture by a certain (minimum) distance (at least 50px?). If not, picture gets back to the previous position. This is another thing I have to fix.

No - I'm on PC and WIN7

jordi

Intermediate

Posts: 428

Location: Barcelona

Occupation: creating ideas & coding them

  • Send private message

9

Thursday, January 14th 2016, 5:13pm

Looks good for a first attempt,


my suggestions :



-What I would do is not to generate all the layers at the same time, just 3 layers and then dynamically adding and removing, that way you can have unlimited number of images, without memory issues...

- I would do it without scrollarea, just dragging the layers

works very good on android mobile !
everpano.com smart virtual tours

panomaster

Intermediate

Posts: 276

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

  • Send private message

10

Thursday, January 14th 2016, 6:57pm

Ok. I've uploaed an update and not encrypted xml.

How to use?

There are just two layers:

Source code

1
2
3
4
	<layer name="gallery" type="container" align="center" width="100%" height="100%" bgcolor="0x336699" bgalpha="0.5" >
		<layer name="gallery_scrollarea" url="%SWFPATH%/plugins/scrollarea.swf" alturl="%SWFPATH%/plugins/scrollarea.js" align="left" width="0" height="100%" zorder="1" direction="h" ondown="set(gallery_scrollarea_start_pos, get(x))" onloaded="setcenter(0,0); make_gallery(gallery1);">
		</layer>
	</layer>


Of course you can add close button and set alpha to 0 or visible to false. Then create gallery and to make it visible.

Data section:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	<gallery name="gallery1" title="Title of gallery 1">
		<img name="img1" url="img/pic1.jpg" title="Escalator" />
		<img name="img2" url="img/pic2.jpg" title="Mask" />
		<img name="img3" url="img/pic3.jpg" title="Wallpaper" />
		<img name="img4" url="img/pic4.jpg" title="F/A-18 C Hornet" />
		<img name="img5" url="img/pic5.jpg" title="Forest" />
		<img name="img6" url="img/pic1.jpg" title="Escalator" />
		<img name="img7" url="img/pic2.jpg" title="Mask" />
		<img name="img8" url="img/pic3.jpg" title="Wallpaper" />
		<img name="img9" url="img/pic4.jpg" title="F/A-18 C Hornet" />
	</gallery>
	
	<gallery name="gallery2" title="Some other pictures">
		<img name="img1" url="img/pic6.jpg" title="A dog" />
		<img name="img2" url="img/pic7.jpg" title="My cat" />
		<img name="img3" url="img/pic8.jpg" title="Watching movie" />
		<img name="img4" url="img/pic9.jpg" title="My wife" />
		<img name="img5" url="img/pic10.jpg" title="St. Jacob's church in Skierniewice" />
	</gallery>


You can use as many galleries as you want.

Creating gallery:

Just call the action with parameter (name of gallery) eg:

Source code

1
make_gallery(gallery1);


If you want to show another gallery just call it again with new gallery name:

Source code

1
make_gallery(gallery2);


All existing pictures in previous gallery will be remove and then new pictures will be created. The name of actual gallery is stored in 'activeGallery' variable.

We also recommend use onresize event to recalculate gallery while changing phone orientation.

Source code

1
<events onresize="make_gallery(get(activeGallery));" />


Link to xml file: http://www.ai360.pl/projekty/swipe/index.xml

Feel free to use it in commercial projects. Donations are greatly appreciated (Paypal account: biuro@ai360.pl).

Posts: 1,850

Occupation: Virtual Tours - Photography - Krpano developer

  • Send private message

11

Thursday, January 14th 2016, 9:15pm

wow! great work.

Just needs a manual hook for move_image to go left or right, so on desktop you can have the action via buttons in addition to swipe.

I guess the nicest way is to break apart move_image into two more sub functions.
KRPano Developer: Portfolio ::Gigapixel Tagging Solutions - Porfolio 2 :: Facebook :: Twitter :: reddit.com/r/VirtualTour

Tuur

Sage

Posts: 3,128

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

12

Friday, January 15th 2016, 12:19am

*thumbup*
http://www.virtualtuur.com
Skype:studiotuur

ramirox3

Intermediate

Posts: 198

Location: La Ceja, Colombia

Occupation: photographer

  • Send private message

13

Friday, January 15th 2016, 1:37am

Hi Panomaster,
his gallery looks great, but can not find how to execute it in a pano by clicking on a hotspot.
I included the .xml, but failed doing the exact code to run and then close it. Could you tell me how?
Thanks, Ramiro

panomaster

Intermediate

Posts: 276

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

  • Send private message

14

Friday, January 15th 2016, 11:05am

Nice to hear that, especially from you Sacha.

Another update - arrows added.

There's no device detection (you can add it on your own) but in make_gallery action you can configure whether arrows have to be visible or not.

I also added complex example how to use gallery in tours. You can watch it at http://www.ai360.pl/projekty/swipe/example.html

panomaster

Intermediate

Posts: 276

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

  • Send private message

15

Thursday, February 4th 2016, 9:04am

Since now Swipe Gallery became a plugin.

http://krpano.com/plugins/userplugins/swipegallery/#top

Tuur

Sage

Posts: 3,128

Location: Netherlands

Occupation: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

16

Thursday, February 4th 2016, 2:52pm

*thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

wilsan

Trainee

Posts: 65

Location: Nederland

Occupation: Logistics Specialist – Planning & Logistics

  • Send private message

17

Friday, February 5th 2016, 7:13pm

Great plugin Panomaster.
Thank you.

*thumbsup*


Wilsan

18

Saturday, February 20th 2016, 5:19am

Text in galleries.

This plugin gives surely another dimension to the Panoramas. But as in common lightbox galleries out there on the net would it be possible to add a text description field that would appear on the bottom to label each photos? Please take this as a suggestion in your future coding.

Ukrajinec

Beginner

Posts: 33

Location: Ukraine, Lviv

  • Send private message

19

Wednesday, April 13th 2016, 5:12pm

Why your plugin work only in your example?

Thank you for a good plugin!
With regards, Igor.

This post has been edited 1 times, last edit by "Ukrajinec" (Apr 13th 2016, 9:37pm)


panomaster

Intermediate

Posts: 276

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

  • Send private message

20

Wednesday, April 13th 2016, 11:56pm

Ukrajinec: What do you exactly mean saying "Why your plugin work only in your example?"

Igor: It's good idea. I even added description attributes to data section. I'll do it in my free time.