Features (Demo)

• Mouse clicks within the browser window are shown as an animated png.
• All keys typed within the browser window are shown in a popup display (positioned using CSS).
• Options are available to show or hide the shift and/or delete key.
• Meta (shift, alt and control) keys can be set to show when released.
• Drag the bookmarklet (on the demo page) to your browser bookmarks to add keycaster to any page without installing the plugin.

Default Setup

• Page Head

  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
  
  <!-- Keycaster script -->
  <link href="css/keycaster.css" type="text/css" rel="stylesheet" />
  <script src="js/jquery.keycaster.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(document).ready(function(){
      keycaster({
          key : 'value'
      });
  })
  </script>

• CSS: (contents of "keycaster.css" shown)

  /* display window */
  #keycaster {
      list-style: none;
      width: 500px;
      text-align: left;
      background: #222;
      border: #555 1px solid;
      border-radius: 1em;
      -moz-border-radius: 1em;
      -webkit-border-radius: 1em;
      padding: 20px;
      position: absolute;
      right : 10px;
      top: 10px;
  }
  
  /* all keys */
  .keycasterKey {
      font-size: 18px;
      font-weight: 900;
      padding: .2em .5em;
      line-height: 2.2em;
      border: transparent 5px solid;
      white-space: nowrap;
  }
  
  /* named keys (e.g. Shift, Alt, Insert, etc.) */
  .keycasterKey.namedKeys {
      border-color: #555;
      border-radius: .5em;
      -moz-border-radius: .5em;
      -webkit-border-radius: .5em;
  }
  
  /* animated png default z-index */
  .clickedArea {
      z-index: 9999;
  }
  /* animated png must be under radio buttons & link so they work */
  .underArea {
      z-index: -10;
  }

Default Options

keycaster({
    // display window
    abbrevName  : true,                    // if true, abbreviated key names will show (not all unicode symbols work in IE, so set this to false)
    lines       : 4,                       // number of lines shown in the window
    displayTime : 1500,                    // time in milliseconds to display the line
    showShift   : false,                   // if true, show shift key
    showBksp    : false,                   // if true, the backspace key will show
    showUnKey   : false,                   // if true, releasing meta keys will add an "un-" meta key message
    unMessage   : 'Un-',                   // Un- message, just because I'm crazy like that

    // animated png - shown when mouse clicked on screen
    imgUrl      : 'images/click-blue.png', // image with frame blocks for animation 
    imgFrames   : 6,                       // number of frames to animate
    imgsize     : 150,                     // image height & width
    imgtime     : 75,                      // time in milliseconds between images

    // class names applied to keys
    keyWrapper  : 'kbd',                   // HTML tag wrapped around the displayed key
    namedKey    : 'namedKeys',             // named key class - found in keycaster.keys
    regKey      : 'regKeys'                // un-named key class
});

Option Details

• abbrevName

  • If true, the script uses the abbreviated key name from the keycaster.keys object.

  • If false, the full key name as set in the keycaster.keys object will be displayed.

  • Each key is defined in the keycaster.keys object as follows:

    (event.which value) : [ 'Full key name', 'Abbreviated key name/symbol' ]

  • The abbreviated names include some unicode symbols which don't work in all browsers (namely IE).

  • Default is true.

• lines

  • Number of lines to show in the keycaster display window. Each line is an <li>
  • Default is 4 lines.

• displayTime

  • Time in milliseconds to display each line; started from the last key type.
  • The script removes each line in sequence from the top to bottom, with the bottom containing the most recent key pressed.
  • Default time is 1500.

• showShift

  • If true, when the user pressed the shift key, the shift key name or abbreviation will show as pressed in the display window.
  • If false, the shift key will not display in the display window.
  • Default is false.

• showBksp

  • If true, the backspace key name or abbreviation will show as pressed in the display window.
  • If false, the backspace will not show and will remove the last pressed key in the display window.
  • Default is false.

• showUnKey

  • If true, when the control, alt, shift or command key is released, it will show as "Un-" key in the display window.
  • If false, released keys will be ignored.
  • Default is false.

• unMessage

  • If the showUnKey is set to true, this text is added to the beginning of the key name in the display window to show that the key was released.
  • Default is 'Un-'.

• imgUrl

  • Set the path to the image file that is used when a mouse click is displayed at that position in the browser window.
  • There are other default images to choose from: 'click-red.png', 'click-green.png', 'click-blue.png' and 'click-grey.png'.
  • Default is 'images/click-blue.png'.

• imgFrames

  • The image to show a mouse click is by default a png image with six frames to cycle through.
  • The first image is on the far left and the script progressively cycles through each frame or block to animate the image.
  • Default is 6.

• imgsize

  • The default animation images have six frames each being 150 pixels in height and width.
  • The script assumes the imgsize applies to both the image height and width.
  • Default is 150.

• imgtime

  • Time in milliseconds to show each image frame.
  • Default is 75.

• keyWrapper

  • Each key in the display window is wrapped by this HTML tag.
  • kbd was used by default, but can be changed to any HTML tag as the style is set in the css to the "keycasterKey" class added to these tags.
  • Default is 'kbd'.

• namedKey

  • Named keys (keys found in the keycaster.keys object) will have this class name added to the keyWrapper.
  • These keys are styled in the CSS to have a rounded border
  • Default is 'namedKeys'.

• regKey

  • Regular keys (keys not found in the keycaster.keys object) will have this class name added to the keyWrapper.
  • Default is 'regKeys'.

Change Log

Version 1.1.3

• Modified bookmarklet settings popup css to be more independent of page styling.

Version 1.1.2

• Fixed script loading problem (moved jQuery.noConflict() statement) so now it only takes one click to open the options panel.

Version 1.1.1

• Added missing color css.
• Changed a bunch of css class names to lessen the chance of interference.
• Set jQuery noConflict mode if script needs to load jQuery.

Version 1.1

• Added bookmarklet code, so you can now use this plugin without needing to install it on your site.
• Rearrange some code to better work with the bookmarklet option panel.
• Fixed the keycaster window so it's visible while scrolling the page (duh!).

Version 1.0 beta

• Mapped shifted keys
• The click animation now occurs on "mouseup" to allow interaction with page elements (links and radio buttons).
• By default, the click animation occurs above the page elements, but you can now force the animation to occur below these elements by using shift-click.
• Optimized code to now work with jQuery versions 1.2.6+ (instead of only jQuery 1.4+).
• Typing the tab key will now start a new line in the display window (previously it only included the enter and escape key).
• Removed the undefined unicode characters (browser dependent) and replaced them with a short description (mostly in IE).
• Added black and white click images.

Version 0.9 alpha

• Initial Commit on Github

Todo:

• Figure out how to make the bookmarklet option panel and keycaster window be above YouTube videos ( they don't have wmode set =/ )
• Test with international keyboard (if I ever get one).