Keyboard control of wheel selection focus?

[digitalmouse]

Hey! Great stuff! Using wheelnav.js in a project I hope to share with you soon.

For a related side project, I have a customer that uses an old hardware rotary button-choose-option-on-LCD screen device that I want to upgrade to a proper 7" tablet display, but they would still like to use the rotary hardware button for 'ease of use'.

Does wheelnav.js listen for keyboard events like up-arrow/down-arrow/enter key presses to cause a wheel menu to rotate or selection focus to change? And if not, do you think it would be hard to implement (examples of how you might do it would be cool) ?

[softwaretailoring]

Hi @digitalmouse I'm curious about your project, waiting for the link! :)

The keyboard control would be a great improvement, here are my steps as I think:

1. Add an addEventListener("keydown") to the holderDiv (You must add tabindex attribute to div!).
2. Calculate next slice based on the key and current index.
3. Call navigateFunction.

I think it would be easy to implement, here is a sample code from my another project.

[scheibyem]

I would be very intersted in implementing this as well. I have tried to go through the code but I am a bit of a newbie when it comes to javascript. I have added this code to the createwheel() function:

window.addEventListener("keydown", function(e) {
    e = e || window.e;
    var keyCodeEvent = e.which || e.keyCode; 
    //console.log(keyCodeEvent);   
    if([37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
        }
    if (keyCodeEvent === 37 || keyCodeEvent === 40) {
        wheelnavItem.prototype.move_ahead(passit);
    }
    if (keyCodeEvent === 38 || keyCodeEvent === 39) {
        wheelnavItem.prototype.move_back(passit);
    }
}, false);

These are the two functions that are called:

wheelnavItem.prototype.move_ahead = function(thisit) {
wheelnav.prototype.navigateWheel(thisit+1);
}

 wheelnavItem.prototype.move_back = function (thisit) {
wheelnav.prototype.navigateWheel(thisit-1);
}

This isn't working and I get a Type:Error: Cannot read property 'setCurrentTransform' of undefined.

Any help or thoughts about further implementing this?

[softwaretailoring]

Hi @scheibyem Try this:

var thiswheelnav = this;

window.addEventListener("keydown", function(e) {
    e = e || window.e;
    var keyCodeEvent = e.which || e.keyCode; 
    //console.log(keyCodeEvent);   
    if([37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
        }
    if (keyCodeEvent === 37 || keyCodeEvent === 40) {
        thiswheelnav.navigateWheel(thiswheelnav.currentClick+1);
    }
    if (keyCodeEvent === 38 || keyCodeEvent === 39) {
        thiswheelnav.navigateWheel(thiswheelnav.currentClick-1);
    }
}, false);

Does it work for you?

[scheibyem]

Thank you so much for your quick reply. This solution rotates the wheel beautifully. However, I have a function that runs when you click a fan in the wheel and that function does not run when the arrow keys are used to turn the wheel.

In addition, if the currentClick is 0 then you cannot scroll back because I guess the currentClick becomes negative. And when the currentClick is at the maximum value the wheel can no longer be rotated further. Does that make sense? Perhaps make an if statement somewhere to fix this? Sorry my javascript skills are pretty bad.

[softwaretailoring]

Yes, you must make an if statement to handle minimum and maximum values. How did you make a click function? You must use the navigateFunction of navitem: http://wheelnavjs.softwaretailoring.net/documentation/navItem.html

[scheibyem]

Using php I took data from a server to dynamically make a list of div's like this:

<div data-wheelnav-navitemtext="item111" onmouseup='showInsert(111);'></div>
<div data-wheelnav-navitemtext="item222" onmouseup='showInsert(222);'></div>
<div data-wheelnav-navitemtext="item333" onmouseup='showInsert(333);'></div>
<div data-wheelnav-navitemtext="item444" onmouseup='showInsert(444);'></div>
<div data-wheelnav-navitemtext="item555" onmouseup='showInsert(555);'></div>

etc. the showInsert() function updates a div holding some graphical info corresponding to the navitem:

<script type="text/javascript">
function showInsert(OMIM) {
    $.ajax({
        data: 'oid='+OMIM, 
        type: $(this).attr('GET'), 
        url: '/some_url.php', 
        success: function(response) {
            $('#insert_graph').html(response); // update the DIV
        }
    });
}
</script>

I have a hard time figuring out how to use the navigateFunction of navitem. How would be the prober way to do this?

[softwaretailoring]

So you use php to dinamically create wheelnav. Can you send me an url where I may test it? Please send it to my e-mail address, I think your last question not related to this issue.