HTML5: Click & drag not responsive outside of vieweable area

[kirby]

Let's say you had a 500x500 sized tour playing in a browser windows. You are now clicking and dragging to view the preferred area. If you drag outside of the 500x500 area, the dragging is no longer responsive. How do you guys get around this or is this not considered an issue? I believe streetview uses Flash to get around this.

[360Texas]

You : Let's say you had a 500x500 sized tour playing in a browser windows.
Reply: ... you could specify 'full screen' then the whole monitor would be an active area.

You: are now clicking and dragging to view the preferred area.
Reply: must not be using a touch screen device like a mouse driven PC or Mac

You:If you drag outside of the 500x500 area, the dragging is no longer responsive.
Reply: You are mouse dragging outside the 500x500 object ACTIVE area.

You: How do you guys get around this or is this not considered an issue?
Reply: Maybe changing the 500x500 pixel ACTIVE area to be 'Full Screen'

You: I believe streetview uses Flash to get around this.
Reply: I just looked at Google Earth 'Streetview' at our home [image date 2/2013] and they use full screen. When right mouse clicking I did NOT get a screen box reply like 'you are using Flash version xxxx'. So it could be they are using a propriatory viewer. The screen seemed to loadup in very large cube face tiles. Try rotate up to the zenith and down to the bottom nadir and viewer seemed to be loading individual tiles.

[kirby]

You : Let's say you had a 500x500 sized tour playing in a browser windows.
Reply: ... you could specify 'full screen' then the whole monitor would be an active area.
Kirby: For our purposes, similar to streetview, we require some of the screen to be used for website navigation (so users can access other areas of the website while still interacting with the tour). Please see *** below for related question.

You: are now clicking and dragging to view the preferred area.
Reply: must not be using a touch screen device like a mouse driven PC or Mac
Kirby: Yes, I am referring to desktop usage.

You:If you drag outside of the 500x500 area, the dragging is no longer responsive.
Reply: You are mouse dragging outside the 500x500 object ACTIVE area.
Kirby: Yes.

You: How do you guys get around this or is this not considered an issue?
Reply: Maybe changing the 500x500 pixel ACTIVE area to be 'Full Screen'
***Kirby: Can this be done without affecting the viewable size of the virtual tour? If so, how to go about this?

You: I believe streetview uses Flash to get around this.
Reply: I just looked at Google Earth 'Streetview' at our home [image date 2/2013] and they use full screen. When right mouse clicking I did NOT get a screen box reply like 'you are using Flash version xxxx'. So it could be they are using a propriatory viewer. The screen seemed to loadup in very large cube face tiles. Try rotate up to the zenith and down to the bottom nadir and viewer seemed to be loading individual tiles.
Kirby: This is likely a moot point, but in case you're interested... turn off flash and attempt to access: https://maps.google.com/?ll=41.207507,- ... 89.38,,0,1. You'll be told you need to download flash.

[kirby]

Is it possible to make the responsive dragging area larger (for desktop machines) larger than the viewing area?

[Hopki]

Hi,
Normally you would only click and drag in the pano.
Can't say I'v seen a website where clicking anywhere on the page causes interaction with a pano that has other content such as web site navigation pictures or text.

However if you wanted this you can make a fullscreen HTML5 output then set the Z-Indezing so the pano is behind other page elements. You can't do this with Flash as you specify the SWF size and location within the page

But as said not normally how you would do this.
Regards,
Hopki

[kirby]

Sorry, let me clarify what I meant:

- Here is a video of the behavior in Flash: http://screencast.com/t/aAbsYjQ5tFz
Notice how when I drag outside of the "viewable area", the tour still responds

- Here is the same tour in HTML5: http://screencast.com/t/GTu7rL61cvfh
Notice how when I drag outside of the "viewable area", the tour no longer responds?

Is it possible to obtain the flash functionality? If not, no biggy. Thanks.

[360Texas]

Back in year 2000 Professor Dersch designed a java script applet called ptviewer.jar that contained a ptviwer.class element that essentially would let you define the Applet window to be say 758 wide and 270 pixels high. This box had a white background area for placing a hotspot map. The Panorama viewer window box area could be positioned left or right inside the box.

Code: Select all

<APPLET archive = "code/ptviewer.jar" code = "ptviewer.class" width = 758 height = 270>

Inside that mouse active applet window you could define starting point in upper left corner x = 5 and y = 0
You could define the smaller panorama window display window say 385 x 270.

Code: Select all

<PARAM NAME="view_x" value = 5>
<PARAM NAME="view_y" value = 0>
<PARAM NAME="view_width" value = 385>
<PARAM NAME="view_height" value = 270>

Just guessing here.... the larger applet window with a colored background would be layer 0. The panorama display viewer might have been on overlay layer 1. The loading bar layer 2 and toolbar would be on layer 3. Active hotspots would be on layer 4.

All Hotspot had mouse over click boxes defining the 4 corners x,y,a and b of the "static hot spot" or shotspots 0 through how many you needed value. The values are in pixels measured from the defined upper left corner of the larger applet window.

Code: Select all

<PARAM name = shotspot0 value = " x291 y227 a311 b247 u'ptviewer:startAutoPan(-1.0,0,1.0)' ">

So in practice you could put static hotspots over the map picture that when clicked trigger the map hotspot would activate a new pano from list.

Code: Select all

<PARAM name = shotspot6 value = " x489 y23 a525 b59 i'pix/dotred.gif' q u'ptviewer:newPanoFromList(0)' ">

The list looked something like this:

Code: Select all

<PARAM name = pano0 value = 
	"{file=pix/lobby1.jpg}
	{auto=0.4}
	{panmin=-180}
	{panmax=180}
	{panini=0}
	{tiltmin=-90}
	{tiltmax=90}
	{tiltini=0}
	{fovmin=42}
	{fovmax=119}
	{fov=90}">

We have since stopped using this java applet because Java itself has changed alot and we were getting alot of java errors.

Note that all this was done by hand coding. The coding almost reads "english" so it was easy once you were familiar with parameters and syntax.

[kirby]

Thanks for the great explanation. I was thinking there may be a more of a "native" way of doing this. I notice Google maps has done something similar: http://bit.ly/1aYl8ic

[360Texas]

Yes.. as I recall... our map was also on left with panorama on right side of the applet box.

Google appears to have a sophisticated variable floating man over map. When released at a new location.. displays streetview at that location.

Professor Dersch's open source applet as like Google code was also covered by "creative commons" copyright.

Helmut Dersch appears to still have a website: http://webuser.hs-furtwangen.de/~dersch/

[kirby]

I'm completely confused now :S

Are you saying that Helmut Dersch's page outlines how to allow html5 tour dragability even when outside the viewing area?

Please let me know if my explanation is not as clear as it should be.

[360Texas]

Ah Sorry, actually no.... I was only explaining that that your layered and space concept is not anything new. Dersch built one 10 years ago only using Java. Since then concept has evolved through Adobe Flash ... and is now evolving in HTML5.

[kirby]

I forgot all about this issue. Is there a solution to allow for click and dragging the view when drag extends outside of the tours' viewable boundaries?

A reminder of what I'm referring to:

The issue: http://screencast.com/t/GTu7rL61cvfh
Google's solution: http://bit.ly/1aYl8ic (notice you can still control the tour when click and drag occurs outside viewable area)

[JimWatters]

Your example shows the panning continuing outside of the pano. It only stops when the mouse is released. This looks like the same behavior as the GSV example.

In the flash example the object in front of the pano on the right is allowing mouse input to be feed down to the pano. In the html5 example the mouse input is being captured but doing nothing with them.

Are there any actions defined for the object in front of the pano on the right?

[kirby]

Are there any actions defined for the object in front of the pano on the right?

Apologies for the delay. I'm not sure I understand the question. The example shows an HTML5 tour exported with the default settings in pano2vr.

[kirby]

Anyone know how to resolve this? I assume there are other people who aren't displaying their virtual tours in full screen only.