Code Example: Key Events

Overview

The following is part of a series of test-based HTML5 applications designed to run on the ActiveVideo platform. These applications incorporate the use of HTML5, JavaScript, and CSS3, and will be used as examples for further development of applications. These are not designed as tutorials for how to run each of the programs, but more of an exploration into some of the useful coding techniques presented.

KeyPress

This application relays the last ten keys the user has pushed/released.

Code Highlights

The majority of the code in this application is aesthetic, and can be found in the .css file. The core functionality of the keypress application exists within the javascript code. An eventListener is added to the main element, which listens for both keydown and keyup presses.

var topMenu = document.getElementById('main'); topMenu.addEventListener('keydown', keypressListenerDown, true);
topMenu.addEventListener('keyup', keypressListenerUp, true);

The keypressListenerDown function is called whenever a key is pressed. The updateArray command appends the new keypress to an array of already pressed and formatted keys, which is known as downPresses or upPresses depending upon the column. These arrays are then appended to the correct positional element in the DOM, and are displayed on screen.

var downPresses = [];
var upPresses = [];
var cap = 10;
var keypressListenerDown = function(evt){
updateArray(evt, downPresses);
var leftMenu = document.getElementById("leftMenu");
leftMenu.innerHTML = downPresses.join("");
}
var updateArray = function(evt, arrayToUpdate){
if(arrayToUpdate.length > cap){
arrayToUpdate.shift();
}
arrayToUpdate.push(evt.keyCode + " (" + evt.keyIdentifier + ")<br>");
}

 

  • Thursday, 01 August 2013

Your destination to find out more about just how easy it is to develop advanced applications that leverage the “write-once, deploy-everywhere” content creation environment of ActiveVideo’s CloudTV™ platform. You will be able to significantly reduce app time-to-market for connected devices of all types, as well as cable settop boxes that have no additional connectivity. Manufacturers and virtual service providers, as well as cable and IPTV operators around the world are currently benefiting from the advantages of ActiveVideo’s CloudTV platform.

© 2017 Active Video Networks. All Rights Reserved