Pixi.js: How to do mouse and keyboard navigation?

[EloB]

Hello,

For of all I want to thank you for an awesome library!

I'm wondering if there is something like geospatial navigation (https://github.com/luke-chang/js-spatial-navigation) or something similiar inside Pixi. I seen that you have PIXI.accessibility but what I understand that you only navigate by using the key tab. I would like to use arrow keys. The reason why I ask is because I'm creating a Smart TV app and they can both be navigated through mouse and keyboard.

Best regards
Olle

[themoonrat]

@EloB Did you by any chance have a go at adding this? It does sound like a useful improvement for the accessibility manager!

[EloB]

@themoonrat I have very limited time but if I have to time I can try to implement it!

[EloB]

I haven't had time to start this feature. However, I wish that it is not dependent on html tags. It may be an additional feature that adds the html tags because the performance when it comes to DOM is very bad on smart tv. That's one of the big reasons why I use PIXI instead of HTML/CSS. 😺

[jchprj]

Hello,

I investigated both js-spatial-navigation and PIXI.accessibility, at first I want to make a pull request to PIXI.accessibility. But suddenly, I tried a simple way, without modify any code of both source code, just use them. I created a jsfiddle here:
http://jsfiddle.net/jchprj/epqwun84/

First init the SpatialNavigation, then add focusable objects with all button elements. That's because the accessibility in PIXI is implemented by button element. Every object in the stage has a corresponding button element when using accessibility. At last, add 'keydown' event listener to respond arrow key events, this step is used to activate the accessibility in PIXI, the real move is still implemented in SpatialNavigation.

It runs well. I'm not sure if it is a good way to do it. Is there any performance issue? Some any suggestions?

Or is it better to integrate the function into AccessibilityManager? If this way, more function could be added, such as press right arrow key on the most right object result in the most left object on the next row.

[EloB]

@jchprj I think this will work for desktop computers but for smart tvs that I'm developing you can't even touch the DOM without something breaks or getting flickering etc 😄

[jchprj]

@EloB Can you use the AccessibilityManager in Pixi to switch focus by tab key on your developing smart tvs?

In the implementation, it would create div elements dynamically. Using document.createElement('button'). Then set many styles and attributes. I'm afraid there is also performance issue. The dynamically created html elements are updated every frame to change their sizes and positions.
Not sure the exact restrictions on smart tv platform.

                AccessibilityManager.prototype.addChild = function addChild(displayObject) {
                    //    this.activate();

                    var div = this.pool.pop();

                    if (!div) {
                        div = document.createElement('button');
                        div.style.width = DIV_TOUCH_SIZE + 'px';
                        div.style.height = DIV_TOUCH_SIZE + 'px';

[EloB]

@jchprj I can't use AccessibilityManager at the moment because it uses DOM manipulation for instance document.createElement(). I can't even change style on elements on heavy views without getting flickering. So I barely use any HTML. I think my app only have 2 divs and a canvas tag thats all :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.