Swipe events on 2d layer

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.

Recky

Trainee

Posts: 44

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)

Go to the top of the page

sachagriffin

Master

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

Tuesday, January 12th 2016, 3:54pm

http://krpano.com/plugins/scrollarea/#top

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

Go to the top of the page

jordi

Professional

Posts: 583

Location: Barcelona

Occupation: creating ideas & coding them

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 step beyond 360

Go to the top of the page

sachagriffin

Master

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

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

Go to the top of the page

panomaster

Intermediate

Posts: 296

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

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

Leszek Cuper
Panoramy 360
Wirtualne spacery

Go to the top of the page

panomaster

Intermediate

Posts: 296

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

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

	<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).

Leszek Cuper
Panoramy 360
Wirtualne spacery

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

Go to the top of the page

Tuur

Sage

Posts: 3,784

Location: Netherlands

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

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*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Go to the top of the page

panomaster

Intermediate

Posts: 296

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

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

Leszek Cuper
Panoramy 360
Wirtualne spacery

Go to the top of the page

jordi

Professional

Posts: 583

Location: Barcelona

Occupation: creating ideas & coding them

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 step beyond 360

Go to the top of the page

panomaster

Intermediate

Posts: 296

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

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

	<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

	<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).

Leszek Cuper
Panoramy 360
Wirtualne spacery

Go to the top of the page

sachagriffin

Master

Posts: 1,857

Occupation: Virtual Tours - Photography - Krpano developer

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

Go to the top of the page

Tuur

Sage

Posts: 3,784

Location: Netherlands

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

Friday, January 15th 2016, 12:19am

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Go to the top of the page

ramirox3

Intermediate

Posts: 351

Location: La Ceja, Colombia

Occupation: photographer

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

Go to the top of the page

panomaster

Intermediate

Posts: 296

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

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

Leszek Cuper
Panoramy 360
Wirtualne spacery

Go to the top of the page

panomaster

Intermediate

Posts: 296

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

Thursday, February 4th 2016, 9:04am

Since now Swipe Gallery became a plugin.

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

Leszek Cuper
Panoramy 360
Wirtualne spacery

Go to the top of the page

Tuur

Sage

Posts: 3,784

Location: Netherlands

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

Thursday, February 4th 2016, 2:52pm

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Go to the top of the page

wilsan

Trainee

Posts: 66

Location: Nederland

Occupation: Logistics Specialist – Planning & Logistics

Friday, February 5th 2016, 7:13pm

Great plugin Panomaster.
Thank you.

*thumbsup*

Wilsan

andrewils

Go to the top of the page

Islander

Trainee

Posts: 103

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.

Go to the top of the page

Ukrajinec

Beginner

Posts: 33

Location: Ukraine, Lviv

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)

Go to the top of the page

panomaster

Intermediate

Posts: 296

Location: Kobyłka, Poland

Occupation: Virtual Tours - Spherical Panoramas - Krpano developer

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.

Leszek Cuper
Panoramy 360
Wirtualne spacery

Go to the top of the page

Similar threads

- User-Plugins »
- Side Menu Plugin (new plugin from today) (Jul 16th 2013, 10:03pm)
- Examples »
- More advanced image gallery (Oct 1st 2012, 10:34am)
- Beginners Questions »
- multiples actions intricates (Jan 8th 2016, 4:15am)
- krpano Panorama Viewer »
- How to put a semi-transparent image on top of panorama which cover the whole screen? (Jan 5th 2016, 8:11am)
- krpano HTML5 Viewer »
- iPhone iPad Simulator problem (May 11th 2011, 4:35pm)