Home » Forums and Help » Using Flash to deliver panoramas » PanoSalado : The Open Source viewer

Using keyboard event to change URL

Fabulous site - what a great resource - thanks.

Hi, I'd be greatful if anyone can give me a helping hand, please?

I am setting up a virtual tour Kiosk that will have no mouse facility. I'm trying to change webpage by keyboard key press. I can add such a keyboard command in the html page no problem, but when I give the flash panorama 'focus' (so the up,down,left,down keys can control its movement) the html key commands no longer work. So I thought i might be able to add this open URL code to the xml file. I can do this by clicking hotspot button(see below), but can it be done with keyboard key by using say 'onKeyPress' event or other?

<hotspots>
<global>
<spot
 id="myLink"
 url="hotspot_img.png"
 onclick="openURL(index2.htm, _self)"
/>
</global>
</hotspots>

Or if there's any other way of returning focus to the html page? I'm using Firefox so I don't think changing focus is something it can handle.

Many thanks in advance.
David.

__________________

DAL 808

‹ embedding rev 128 modify / extend PanoSalado.as ›

re: Using keyboard event to change URL

Hey David:

Hmm... Interesting about getting focus to move between the swf and the web page. I'll need to think on that.

--
Are you using an interface and/or moduleloader swf to load the PanoSalado presentation? If so, then you can absolutely use an event listener to capture specific keyboard events, and do things based on them (including open a URL).

?

__________________

Patrick Cheatham
FlashPanos.com creator, Panoramic Photographer
Got PanoSalado?

re: Using keyboard event to change URL

Hi Patrick,

Many thanks for your reply.

Basically it's identical to a simple example on one of the tutorial pages. I've added focus to it using the 'window.document["pano"].focus();' line, and this allows arrow keys to be used to move pano around(alternativily just click within pano to give it focus). Now as the pano has focus, no html scripts work, so I am hoping some sort of 'event listener' code as you suggested could be added to the xml file to move to another html page(not necessarily page with another pano as it is a multimedia kiosk) by pressing a key on keyboard (e.g. say by pressing button 'a').

http://www.flashpanos.com/flashpanos_files/examples/doubledrop/fullscree...

In short, once on the example above, what code could I add to xml file of this example that would allow user to change to another webpage by pressing a keyboard key? Or can it be done?

Many thanks,
David.

__________________

DAL 808

re: Using keyboard event to change URL

DAL wrote:

Basically it's identical to a simple example on one of the tutorial pages. I've added focus to it using the 'window.document["pano"].focus();' line, and this allows arrow keys to be used to move pano around(alternativily just click within pano to give it focus). Now as the pano has focus, no html scripts work, so I am hoping some sort of 'event listener' code as you suggested could be added to the xml file to move to another html page(not necessarily page with another pano as it is a multimedia kiosk) by pressing a key on keyboard (e.g. say by pressing button 'a').

http://www.flashpanos.com/flashpanos_files/examples/doubledrop/fullscreen_tutorial/fullscreen.html

Hey David:

Understood -- but, just to be clear, that example you link to is using FPP and not PanoSalado.

DAL wrote:

In short, once on the example above, what code could I add to xml file of this example that would allow user to change to another webpage by pressing a keyboard key? Or can it be done?

You'll need to add this listener code to your Interface or ModuleLoader SWF -- not the XML. You can't currently use the PanoSalado XML to reference a keyboard key/key event. Interesting idea though. I'll put it on the list of possibilities...

Cheers,

Patrick

__________________

Patrick Cheatham
FlashPanos.com creator, Panoramic Photographer
Got PanoSalado?

openURL function added to PanoSalado

Hi there,

I just added an openURL command to PanoSalado. I haven't tested it yet, so let me know.

onClick="openURL:http://www.somewhere.com/index.html,_self"

Zephyr

Hi Zephyr, Thanks for the

Hi Zephyr,

Thanks for the post. That code is similar in function to that in my initial post, however 'onClick' is a mouse event not a keyboard event which I'm looking for.

Would you know how to do similar for keyboard key press?

Thanks,
David.

__________________

DAL 808

re: Using keyboard event to change URL

Hi Patrick,

Yes that example is FPP, but I'd be happy to use either FPP or PanoSalado if I can get around this problem!!! To be honest I was using FPP before I found your site. They seem similar panorama set ups though from what I have seen so far? But I could be completely wrong - I'm no expert on these matters.

I'll have a look around for this kind of code and experiment adding it to the ModuleLoader.

Love the site - will spread the word.

Thanks again,
David.

__________________

DAL 808

RE: adding key listeners to PanoSalado

I suppose key listeners could be added to panosalado. I will have to think about how to do that, as there are a lot of keys. Also I think maybe this is more of a particular user interface sort of thing, and less of a PanoSalado sort of thing, so maybe the better place for it to be done is in an interface swf.

One thing that you could do is this:

create another swf with the key listeners you need, and then pass the function calls in to panosalado. for example if you want to pan/tilt in response to a key press, look at how the user interface examples handle the pan / tilt buttons. They respond to clicks (but they could be key presses), and then send calls to the keyDown and keyUp functions in PanoSalado.

Let me know how it goes, and feel free to ask questions.

Zephyr

RE: adding key listeners to PanoSalado

zephyr wrote:

as there are a lot of keys

Yes there are... Wink

I agree Z -- I think this might best happen in an interface which sits on top of PanoSalado. Yor tip about tapping into the current events in the example interface is a good way to go I think.

David, this would let you use the example "UserInterface" code, and tailor it to exactly the keyboard keys/events you need to capture. You could map multiple keyboard keys to single events, or the other way around.

?

Cheers,

Patrick

__________________

Patrick Cheatham
FlashPanos.com creator, Panoramic Photographer
Got PanoSalado?

RE: adding key listeners to PanoSalado

Thanks guys,

I'll work on adding it to Userinterface file and if I get it sorted I'll post a link to it working so if anyone else needs to do something similar.

Well here goes...

Thanks again Patrick and Zephyr.

__________________

DAL 808

RE: adding key listeners to PanoSalado

Hi Patrick and Zephyr,

Since my last post above, I've been trying to add the keyboard listner to the userinterface actionscipt, but I can't seem to get it working properly. I have code that works if I make a standalone flash swf+html files.

I know this is more a flash problem (i.e. because I have a limited knowledge of actionscript coding & architecture) but can you give me any pointers as to how to properly add it to userinterface.as so userinterface.fla will publish it correctly.

Here's the code I have:

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

       
function keyDownHandler(event:KeyboardEvent):void
{

        trace("keyDownHandler: " + event.keyCode);
        var code:Number = event.keyCode;
        switch (code)
        {
        case 78:
// these lines may not be needed>>      import flash.Keyboard;
// these lines may not be needed>>      import flash.navigateToURL;
// these lines may not be needed>>      import flash.URLRequest;

        var request:URLRequest = new URLRequest("index2.htm");
        navigateToURL(request, "_self");
        }
}

(case 78 is code for keyboard key 'n' which when pressed should open next web page - index2.htm)

I hope you can help.

Thanks, David.

__________________

DAL 808

RE: adding key listeners to PanoSalado

Hey David:

What sort of debug/trace information do you get? Where is this in your UserInterface code?

Here's an example of what I use in UserInterface.as, which works. I've truncated the code for readability (ie, don't ditch all the other stuff that's already in there!):

import flash.events.KeyboardEvent;
import flash.ui.Keyboard;

private function layersReady(e:Event):void {
        //...snip...
        stage.addEventListener( KeyboardEvent.KEY_DOWN, zoomKeyDownHandler, false, 100, true );
        stage.addEventListener( KeyboardEvent.KEY_UP, zoomKeyUpHandler, false, 0, true);
}

private function zoomKeyDownHandler(e:KeyboardEvent):void {
        if( e.keyCode == Keyboard.SHIFT ||  e.keyCode == Keyboard.CONTROL) {
                       
            //do something
                       
        }
}

private function zoomKeyUpHandler(e:KeyboardEvent):void {
         if( e.keyCode == Keyboard.SHIFT ||  e.keyCode == Keyboard.CONTROL) {
                       
            //do something else
                       
        }
}

--
edit:
having to deal with character codes was annoying me... Wink here's an easy way to get "n", rather than "78":

var myKeyCode:String = e.charCode.toString();
myKeyCode = String.fromCharCode(myKeyCode);
trace("myKeyCode: "+myKeyCode);
__________________

Patrick Cheatham
FlashPanos.com creator, Panoramic Photographer
Got PanoSalado?

RE: adding key listeners to PanoSalado

Hi Patrick,

Thanks a million for that code example and updated edit - I've got it all working perfectly now. I used the key codes for this version, but will try add the character recognition as it would help make it easier. I've pasted part of the code below if anyone needs it.

For anyone who needs to know how - in Flash, just publish the UserInterface.fla (which has UserInterface.as as a linked class file) which creates a UserInterface.swf file that is called in the PanoSalado XML file - not great terminology but you get the idea....

import flash.events.KeyboardEvent;
import flash.net.navigateToURL;
import flash.net.URLRequest;

//~ ~ ~ ~ ~ ~ ~

private function layersReady(e:Event):void
                               
    stage.addEventListener(KeyboardEvent.KEY_DOWN, zoomKeyDownHandler, false, 100, true);

//~ ~ ~ ~ ~ ~ ~

private function zoomKeyDownHandler(e:KeyboardEvent):void {
// Start.htm - s key (83)
        if(e.keyCode == 83){
                navigateToURL(new URLRequest('start.htm'), '_self');
        }
// End.htm - e key (69)
        else if(e.keyCode == 69){
                navigateToURL(new URLRequest('end.htm'), '_self');
        }
// Previous - p (80)
        else if(e.keyCode == 80){
                navigateToURL(new URLRequest('1.htm'), '_self');
        }
// Next - n (78)
        else if(e.keyCode == 78){
                navigateToURL(new URLRequest('2.htm'), '_self');
        }
}

Thanks again patrick. This site is an amazing resoure and excellent quality pano software.

__________________

DAL 808