call api for source "press" action "pan right/left"

[firey]

hi,

I see in the document the api for pan right/left with click event
My question is "how can i make a button which makes tour pan right/left when being pressed?"
i tried with onmousedown but not work, the tour pan one time and stop

[Don]

I assume you mean a button on the web page, not a button on the tour skin? Did you see this Garden Gnome example?
http://gardengnomesoftware.com/wiki/Pan ... Script_API

I'm not sure how much you know about javascript, so here is a simple example of a button onClick event, in a form, on a web page:
http://www.w3schools.com/jsref/tryit.as ... ef_onclick

[firey]

hi,

I have read the document and i have tested it successfully
But i can only make the "onclick" event, i want to make the "press" or we should assume the "onmousedown" event
For example, u press and KEEP HOLDING the button to make the panorama panning

[Don]

Here is a list of events you can use. Each event on the list comes with an example:
http://www.w3schools.com/jsref/dom_obj_event.asp

Assigning the OnMouseDown event to a button in a form looks like this:

<form>
<input type="button" value="test button" onmousedown="javascript:alert('Hello World');" />
</form>

Update: Stick with the "Mouse Events". I didn't realize that w3schools list is so long. You just want the mouse events.

[firey]

hi,

I said before that i did test with onMouseDown event, and i know u haven't tried it yet (combine with Pano2vr API)
Actually it doesn't make "effect" as i want
Click: trigger an action when an element is clicked on.
Press: The action will be triggered when an element is clicked and PRESSED (with the mouse button)
the onMouseDown works a little different compared to Click: Click = Mouse Down and then Up, but it doesn't make "pressed" effect

[Don]

...this works for me. Left Button:
<input type="button" id="button1" value="Pan Left" onmousedown="javascript:pano.startAutorotate(-1,0,0);" onmouseup="javascript:pano.stopAutorotate();" />

Right Button:
<input type="button" id="button2" value="Pan Right" onmousedown="javascript:pano.startAutorotate(1,0,0);" onmouseup="javascript:pano.stopAutorotate();" />

[firey]

Wow, what a smart way to do it
Thanks so much, then i wonder how about the Tilt Up/Down and change FoV ?

[360Texas]

In this code string

="javascript:pano.startAutorotate(-1,0,0);"

(-1,0,0) means (pan,tilt,FoV) values
PAN -1 means -1° left of 0 center point could also use -270 rotate to left OR 270 rotate to right
As measured = from the mid center point of the panorama (50% from top to bottom AND 50% left to right)

TILT 0, means no tilt up or down (0 is on the center point on horizon) like -20° down and 20° up

FoV 0 means use default initial view) say use Angle [field] of View 50 or 50°degrees on the horizon.

[Don]

In this code string = "javascript:pano.startAutorotate(-1,0,0);" means (pan,tilt,FoV) values...

Not true. I guessed the same, but that did not work for me. So I looked it up. The "setAutoRotate" javascript function is not in the Javascript API. However, the "startAutoRotate(a,c,b) function is. I have not tested the 'c' and 'b' parameters yet, but the 'a' parameter works. I am pretty sure the parameters are (a = speed, c = whether or not to return to the horizon, b = delay). References:

1. Use a text editor (or a code editor if you have one) and read the JS files found in your output folder.
2. http://gardengnomesoftware.com/forum/vi ... 16&p=29726

I am working on other things today, but here are the functions I have found so far for TILT and FoV. Unfortunately, these only work one click at a time at the moment. I will look for a smooth TILT and FoV as time allows:

Tilt Down Button
<input type="button" id="button3" value="Tilt Down" onclick="javascript:pano.changeTilt(-1,true);" />

Tilt Up Button
<input type="button" id="button4" value="Tilt Up" onclick="javascript:pano.changeTilt(1,true);" />

FoV OUT Button
<input type="button" id="button5" value="FoV Out" onclick="javascript:pano.changeFovLog(1,true);" />

FoV IN Button
<input type="button" id="button6" value="FoV In" onclick="javascript:pano.changeFovLog(-1,true);" />

[360Texas]

Hmmm ok... sorry, but thanks for your button code list.. it explains the process.

[firey]

@don:
Yes u're right, i haved guessed the same when i saw your example but it's not work too
For the Tilt and FoV, we done your solution and it's acceptable, because the tour often "longer" and it does not require much click for Tilt and FoV
However, thanks a lot

[Don]

These functions and four buttons placed in my Pano2vr Pro 4.0 HTML page work for me. Note: I re-did the PAN button above, because the startAutoRotate function does a little jig when switching from Left pan to Right pan. Hopefully the gnomes will give us something cleaner than my solution below in the future.

Code: Select all

<script>
   // START Pan, Tilt & FoV control functions. The number 10 is the speed in milliseconds.

   var timer,direction;

   function startPan(ap) { direction=ap; timer=setInterval("myChangePan(direction)", 10); }
   function myChangePan(ap) { direction = ap; pano.changePan(direction, true); }

   function startTilt(at) { direction=at; timer=setInterval("myChangeTilt(direction)", 10); }
   function myChangeTilt(at) {direction=at;pano.changeTilt(direction,true);}

   function startFovLog(af) { direction=af; timer=setInterval("myChangeFovLog(direction)", 10); }
   function myChangeFovLog(af) { direction=af; pano.changeFovLog(direction, true); }

   function stopThat() { window.clearInterval(timer); }

   // END Pan, Tilt & FoV control functions.
</script>

Code: Select all

<form>
   <input type="button" id="button1" value="Pan Left" onmousedown="javascript:startPan(1);" onmouseup="javascript:stopThat();" />
   &nbsp;
   <input type="button" id="button2" value="Pan Right" onmousedown="javascript:startPan(-1);" onmouseup="javascript:stopThat();" />
   &nbsp;
   <input type="button" id="button3" value="Tilt Down" onmousedown="javascript:startTilt(-1);" onmouseup="javascript:stopThat();" />
   &nbsp;
   <input type="button" id="button4" value="Tilt Up" onmousedown="javascript:startTilt(1);" onmouseup="javascript:stopThat();" />
   &nbsp;
   <input type="button" id="button5" value="FoV Out" onmousedown="javascript:startFovLog(1);" onmouseup="javascript:stopThat();" />
   &nbsp;
   <input type="button" id="button6" value="FoV In" onmousedown="javascript:startFovLog(-1);" onmouseup="javascript:stopThat();" />
</form>