Sending keys events to Enyo app

I'm developing an app that is basically a 'virtual remote control' that sends keys events to an ENYO app that runs in an Iframe inside of the 'virtual remote control' page. With the version of ENYO 2.3.x and 2.4.xm it's works fine but with ENYO 2.5.x doesn't. The app still receives the key event but the Spotlight (I think) is getting on loop and I get the error 'Uncaught RangeError: Maximum call stack size exceeded'.

The event that is sent to ENYO looks like this:

KeyboardEvent {isTrusted: false, dispatchTarget: enyoConstructor, keySymbol: undefined, domEvent: KeyboardEvent, char: ""…}
allowDomDefault: ()
altKey: false
bubbles: true
cancelBubble: false
cancelable: false
char: ""
charCode: 0
ctrlKey: false
currentTarget: null
defaultPrevented: false
detail: 0
dispatchTarget: enyoConstructor
domEvent: KeyboardEvent
eventPhase: 0
isTrusted: false
isTrusted: false
key: "#"
keyCode: 40
keyIdentifier: "#"
keyLocation: 0
keySymbol: undefined
locale: ""
location: 0
metaKey: false
path: Array[2]
repeat: false
returnValue: true
shiftKey: false
sourceCapabilities: null
srcElement: document
target: document
timeStamp: 1452184141237
type: "keyup"
view: Window


The focus is on the 'virtual remote control' page but if I give it to the ENYO app, it works fine.
Is there any property of the events that I need to set? An app in ENYO 2.5.x requires the focus, all the time ,to work?

Thanks Rocha

Comments

  • Hi @rocha, though there were some tweaks made to Spotlight and event bubbling, nothing comes to mind in terms of configuring events differently. Can you share some of your code that "sends" the key events to your Enyo application?
  • edited January 2016
    I'm using the this code (https://gist.github.com/termi/4654819) to create the event. I also tried with 'vannila js' but the result is the same. I wrote a smaller example that it's not getting the exception but still not working proper. I also tried to fire a key event directly in the html file of an ENYO app an the result is the same.

    The example that I wrote:
    
    
    <html>
    <head>
        <title> Test 4 </title>
        <meta charset="UTF-8">
    
        <style type="text/css">
    
        iframe {
            width: 100%;
            height: 80%;
        }
    
        </style>
    </head>
    <body>
        
        <h1>Main Container</h1>
    
        <!-- IFrames -->
        <iframe id="app-layer" sandbox="allow-same-origin allow-forms allow-scripts" class="iframe-container" src="http://localhost/enyo/bootplate-moonstone/lib/spotlight/samples/ContainerSample.html"></iframe>
    
    
        <!-- Scripts -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="Assets/Javascripts/crossBrowser_initKeyboardEvent.js"></script>
        <script type="text/javascript">
    
        $(function  () {
    
            var $iframeContainer = $('#app-layer');
    
            $('body').on('keydown', function(event) {
                console.log('Key down');
    
                // Build the key event
                console.log('Send Keycode of ' + event.type + ' to iframe / layer: ' + event.keyCode);
                var keyEvent = window.crossBrowser_initKeyboardEvent(event.type, {
                    "bubbles": true,
                    "keyCode": event.keyCode,
                    "charCode": event.charCode,
                    "which": event.which,
                    "key": "#"
                });
    
                // Trigger / Dispatch event
                $iframeContainer[0].contentDocument.dispatchEvent(keyEvent);
    
            });
        });
    
        </script>
    
    </body>
    </html>
    
    
  • Hi @aarontam,

    I used the spotlight/ContainerSample available in the Moonstone Bootplate ZIP and on the 'ContainerSample.html' I only set a script that triggers a key down event every 10 seconds. Only the first event works fine, but happens something strange, if I move the mouse the next trigger event will work (but only the next one). the script that I used:

    <script type="text/javascript"> new enyo.Spotlight.ContainerSample().renderInto(document.body); setInterval(function () { console.log('Trigger Key Event'); /* // with cross browser code var keyEvent = window.crossBrowser_initKeyboardEvent('keydown', { "bubbles": true, "keyCode": 40, "charCode": 0, "which": 40, "key": "#" }); document.body.dispatchEvent(keyEvent); */ // with vanilla JS var eventObj = document.createEventObject ? document.createEventObject() : document.createEvent("Events"); if (eventObj.initEvent) { eventObj.initEvent("keydown", true, true); } eventObj.keyCode = 40; eventObj.which = 40; document.dispatchEvent ? document.dispatchEvent(eventObj) : document.fireEvent("onkeydown", eventObj); }, 10000); </script>
  • Hi @rocha, apologies for the delayed response! I tried out your code in Chrome 47 and was able to receive the key event at the specified interval. Which browser/environment are you using? Note that initEvent is deprecated and the Event constructor should be used instead: https://developer.mozilla.org/en-US/docs/Web/API/Event/initEvent
  • Hi @aarontam, the version of my chrome is 47.0.2526.106 (64-bit) on a Fedora OS with the Moonstone Bootplante (enyo 2.5.1.1). The example receives the event but only the first one, after 10 seconds when it triggers the second nothing happens. I will try to change the code with the Event constructor and see what happens.
Sign In or Register to comment.