Sie sind nicht angemeldet.

Swipe events on 2d layer

  • 1
  • 2

Recky

Schüler

  • »Recky« ist der Autor dieses Themas

Beiträge: 44

  • Nachricht senden

1

Montag, 11. Januar 2016, 21:16

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*

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Recky« (11. Januar 2016, 21:55)

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

  • Nachricht senden

2

Dienstag, 12. Januar 2016, 15:54

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

jordi

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

  • Nachricht senden

3

Dienstag, 12. Januar 2016, 18:12

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

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

  • Nachricht senden

4

Mittwoch, 13. Januar 2016, 18:03

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

Fortgeschrittener

Beiträge: 297

Wohnort: Kobyłka, Poland

Beruf: Virtual Tours - Spherical Panoramas - Krpano developer

  • Nachricht senden

5

Mittwoch, 13. Januar 2016, 18:58

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

panomaster

Fortgeschrittener

Beiträge: 297

Wohnort: Kobyłka, Poland

Beruf: Virtual Tours - Spherical Panoramas - Krpano developer

  • Nachricht senden

6

Donnerstag, 14. Januar 2016, 02:47

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:

Quellcode

 
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).
Leszek Cuper
Panoramy 360
Wirtualne spacery

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »panomaster« (14. Januar 2016, 03:16)

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

7

Donnerstag, 14. Januar 2016, 13:50

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

panomaster

Fortgeschrittener

Beiträge: 297

Wohnort: Kobyłka, Poland

Beruf: Virtual Tours - Spherical Panoramas - Krpano developer

  • Nachricht senden

8

Donnerstag, 14. Januar 2016, 13:59

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

jordi

Profi

Beiträge: 583

Wohnort: Barcelona

Beruf: creating ideas & coding them

  • Nachricht senden

9

Donnerstag, 14. Januar 2016, 17:13

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

panomaster

Fortgeschrittener

Beiträge: 297

Wohnort: Kobyłka, Poland

Beruf: Virtual Tours - Spherical Panoramas - Krpano developer

  • Nachricht senden

10

Donnerstag, 14. Januar 2016, 18:57

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

How to use?

There are just two layers:

Quellcode

 
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:

Quellcode

 
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:

Quellcode

 
1

make_gallery(gallery1);


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

Quellcode

 
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.

Quellcode

 
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

sachagriffin

Meister

Beiträge: 1 857

Beruf: Virtual Tours - Photography - Krpano developer

  • Nachricht senden

11

Donnerstag, 14. Januar 2016, 21:15

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

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

12

Freitag, 15. Januar 2016, 00:19

*thumbup*
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

ramirox3

Fortgeschrittener

Beiträge: 354

Wohnort: La Ceja, Colombia

Beruf: photographer

  • Nachricht senden

13

Freitag, 15. Januar 2016, 01:37

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

Fortgeschrittener

Beiträge: 297

Wohnort: Kobyłka, Poland

Beruf: Virtual Tours - Spherical Panoramas - Krpano developer

  • Nachricht senden

14

Freitag, 15. Januar 2016, 11:05

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

panomaster

Fortgeschrittener

Beiträge: 297

Wohnort: Kobyłka, Poland

Beruf: Virtual Tours - Spherical Panoramas - Krpano developer

  • Nachricht senden

15

Donnerstag, 4. Februar 2016, 09:04

Since now Swipe Gallery became a plugin.

http://krpano.com/plugins/userplugins/swipegallery/#top
Leszek Cuper
Panoramy 360
Wirtualne spacery

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

16

Donnerstag, 4. Februar 2016, 14:52

*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

wilsan

Schüler

Beiträge: 66

Wohnort: Nederland

Beruf: Logistics Specialist – Planning & Logistics

  • Nachricht senden

17

Freitag, 5. Februar 2016, 19:13

Great plugin Panomaster.
Thank you.

*thumbsup*


Wilsan
andrewils

Islander

Schüler

Beiträge: 104

  • Nachricht senden

18

Samstag, 20. Februar 2016, 05:19

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

Anfänger

Beiträge: 33

Wohnort: Ukraine, Lviv

  • Nachricht senden

19

Mittwoch, 13. April 2016, 17:12

Why your plugin work only in your example?

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

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Ukrajinec« (13. April 2016, 21:37)

panomaster

Fortgeschrittener

Beiträge: 297

Wohnort: Kobyłka, Poland

Beruf: Virtual Tours - Spherical Panoramas - Krpano developer

  • Nachricht senden

20

Mittwoch, 13. April 2016, 23:56

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
  • 1
  • 2

Ähnliche Themen