Key Events in Javascript

Question

I'm working on a Quaternion program that allows a user to 3D rotate an image on the right hand side, so that it matches an image on the left hand side. So far, I have a solution that allows user to update the updateRotation() in the HTML file using buttons:

<span class="rbText">X : </span><input type="button" id="xDn" class="btn" value="-" onclick="updateRotation( -5, 0, 0);" disabled/>
<span class="rbText">&nbsp;</span><input type="button" id="xUp" class="btn" value="+" onclick="updateRotation( 5, 0, 0);" disabled/></br>
<span class="rbText">Y : </span><input type="button" id="yDn" class="btn" value="-" onclick="updateRotation(  0,-5, 0);" disabled/>
<span class="rbText">&nbsp;</span><input type="button" id="yUp" class="btn" value="+" onclick="updateRotation( 0, 5, 0);" disabled/></br>

I know want to allow the user to use key inputs to update the rotation.

Here's my JS

var currentId=0;
var maxTrials = 6;
var dateStart, dateEnd;
var value;

//user clicks start to begin trial
function clickedStart(){
    //get the current pattern
    parsePattern(trialData[currentId],currentPattern);
    forceUpdate.right='show';
    forceUpdate.left='show';
    document.getElementById('btnStart').disabled = true; //disable start button
    getKeyInput();
    timerOperation(true); //start clock
}

function parsePattern(unparsedStr, patSet){
    var spl = unparsedStr.split("-");
    var i=0;
    patSet.pattern = spl[i++];
    patSet.xL = spl[i++];
    patSet.yL = spl[i++];
    patSet.zL = spl[i++];
    patSet.xR = spl[i++];
    patSet.yR = spl[i++];
    patSet.zR = spl[i++];
}

function getKeyInput(){
    document.getElementById('canvasRight').onkeyclick = function(e){
        e = e || event
        switch(e.keyCode) {
            case 37: // left
                updateRotation(0,0,5);
                return false
        case 38: // up
                updateRotation(0,5,0);
                return false
        case 39: // right
                updateRotation(5,0,0);
                return false
        case 40: // down
                updateRotation(0,-5,0);
                return false
        }
    }
}

//we apply global rotation and not local rotation
function updateRotation(xRot, yRot,zRot){
    //the rotation is in terms of absolute rotation, so note the quaternion rotation order
    var q = getQuaternion(xRot, yRot, zRot);// get rotation provided by current interaction

    q.multiply(t3DRQuat); //apply to existing orientation   
    q.normalize();        //keep the quaternion normalized... accrual of rounding errors causes drift
    t3DRQuat.copy(q);     //copy the new orientation into t3DRQuat

    t3DRight_shape.quaternion.copy(q);  //apply orientation to shape
    //if there has been one update, then we can enable the end button
    if(document.getElementById('btnEnd').disabled) document.getElementById('btnEnd').disabled = false;
}

And my HTML file:

<div id="base" class="main">

<div id="topBand" class="div-band"></div>

<div id="canvasLeft" class="div-float-left">

</div>

<div id="canvasRight" class="div-float-right" tabindex = "0">

</div>

<div id="bottomBand" class="control-band">
    <span class = "controlHelp">Control Panel</span>
    <div id="startControl" class="startDoneTextBox">
        <button type="controlButton" onclick="clickedStart();" id="btnStart"><span class="btn" id="btnStartText">Start!</span></button></br>
        <dir></dir>
        <button type="controlButton" onclick="clickedEnd();" id="btnEnd" disabled><span class="btn" id="btnEndText">Done!</span></button></br>
    </div>

    <div>
    <span class = "guideHelp">Match the 3D shape on the left by rotating the shape on the right</span></br>
    <span class = "userHelp">1. Press Start to load the images</span></br>
    <span class = "userHelp">2. Press the image on the right and use the arrow keys to change position</span></br>
    <span class = "userHelp">3. Press Done, when you think the shapes are matched</span></br>
    </div>

  </div>
</div>

My updateRotation() works fine with the button approach. But when I try to use the keys, absolutely nothing happens. Is my getKeyInput() the source of the problem?

Answer 1

Use onkeydown or onkeypress or onkeyup instead of onkeyclick.