Project:Keyboard driven counter

Specifications

Keyboard Driven Counter Project

Version 1.1

• Category: Interactivity
• Author: SpinetiX S.A.
• License: GPL Version 3
• Target: HMD

Description

This is sample-project that can be used to display some texts (especially numbers) on the screen following the input received from a keyboard. It can be used anywhere there's a need for a counter-like display, for instance, to display the next ticket / customer in line, to display the number of the order in a restaurant etc.

• It consists of a single SVG file (index.svg) which must remain the index of your project as well (i.e. you cannot include it into another SVG file, even if it's set as full-screen).
• By default, up to 7 texts are displayed, the latest one being highlighted.
• To enter a text, simply type the text and press the "Enter" key at the end. With every new entry, the previous entries are pushed on the next position and the last entry is discarded.
  • Entering just a "0" (zero followed by "Enter" key) or pressing the "Down" key, has the opposite effect (i.e. the latest entry is discarded).
  • Entering "000" (3 times zero, followed by "Enter" key) will clear all the values currently displayed.
  • When the latest text is a number, pressing the "Up" key will add a new entry with the number incremented by a predefined value (the "step").
  • Pressing the "Left" or "Right" key before the "Enter" key will clear the text entered but not submitted (useful in case of mistyping).
• To remove some of the text boxes, simply delete the text layers within HMD and set the value of the n_max variable to the new number of elements.
• To add more text boxes, add more text layers within HMD (ensuring that the textArea element or the g element holding it has the xml:id attribute set to n7, n8 ... etc.) and set the value of the n_max variable to the new number of elements.

var n_max = 6; // the maximum index for the n array (which has n+1 elements)
var step = 1; // the step used for incrementing

var n = new Array(); // array with textArea elements
var buffer = new String(""); // string buffer for the characters received from the keyboard

// function to push a value into the array
function do_push(val){
  for(var i=n_max; i>0; i--){
    n[i].textContent = n[i-1].textContent;
  }
  n[0].textContent = val;
}

// function to remove a value from the array
function do_shift(){
  for(var i=0; i<n_max; i++){
    n[i].textContent = n[i+1].textContent;
  }
  n[n_max].textContent = "";
}

// function to clear all the values of the array
function do_clear(){
  for(var i=0; i<=n_max; i++){
    n[i].textContent = "";
  }
}

// textInput callback function
function textInput( evt ){
  buffer += evt.data;
}

// keydown callback function
function keydown(evt){
  if( evt.keyIdentifier == "Enter" ){
    if( buffer == "0" ){
      do_shift();
    } else if(buffer == "000"){
      do_clear();
    } else {
      do_push(buffer);
    }
    buffer = new String("");
  } else if( evt.keyIdentifier == "Down" ){
    do_shift();
    buffer = new String("");
  } else if( evt.keyIdentifier == "Up" ){
    var v = parseInt(n[0].textContent) + step;
    if( !isNaN(v)) {
      do_push(v);
    }
    buffer = new String("");
  } else if( evt.keyIdentifier == "Left" || evt.keyIdentifier == "Right" ){
    buffer = new String("");
  }
}

// set the values of the n array
for(var i=0; i<=n_max; i++){
  el = document.getElementById( "n" + i );
  if (el){
    if (el.localName == "g"){
      for ( var c=el.firstElementChild; c!=null; c=c.nextElementSibling ){
        if ( c.localName=="textArea"){
          n[i] = c; 
          break;
        }
      }
    } else {
      n[i] = el;
    }
  } else {
    n_max = i-1;
    alert("Error: element n" + i + " was not found, therefore setting the n_max value to " + n_max);
  }
}

// add the two event listeners
var svg = document.documentElement;
svg.addEventListener( "textInput", textInput, false );
svg.addEventListener( "keydown", keydown, false );