You are currently browsing the archives for the keyboard tag.

JavaScript key binder

A simple script which allows to bind keys (or sequence of keys) to actions in javascript.

// initialize the binde
Bind.init();

// the function to bind
function aux () {
  alert('42 !');
}

// let's bind it to 't'
Bind.bind('t', aux);

// let's bind an anonymous function
Bind.bind('a', function () { alert('a')});

// binding some modifiers
Bind.bind('ctrl-a', aux);
Bind.bind('alt-a', auxi;
Bind.bind('shift-a', aux);
Bind.bind('ctrl-shift-a', aux);

// binding sequences
Bind.bind('alt-a return', aux);
Bind.bind('tab tab', aux);

That was the basic environment. The following is a little more advanced:

// limit to a single element of the page
Bind.init('id_de_mon_element');

Some pages require different states (or modes), it's possible to bind a key to a function if the page is in a particular state:

var state='state0';
Bind.init(window, 'state');

// bind t when state is state0
Bind.bind('t', function () {
  alert ('t in 0');
}, 'state0');

// bind t when state is state1
Bind.bind('t', function () {
  alert ('t in 1');
}, 'state1');

// change the current state
Bind.bind('s', function () {
  state = state == 'state0' ? 'state1' : 'state0';
});

Of course, you can also bind the following keys : tab, return, up, down, left, right, delete, backspace, escape, space. By the way, it is not case sensitive, so alt-t and AlT-T are equivalent.

The code is right below, and requires Prototype.

Downloaded : 141 times
File : bind.js
Size: 3 ko

Jim, the JavaScript modal framework

Nowadays, there are a lot of Ajax and Web 2.0 JavaScript frameworks. This actually is a good thing, but I believe that a good ol' geek aspect is missing. That's why I developed Jim.

Jim is not :

  • An ajax framework
  • An animation framework

What Jim does:

  • Jim adds a command line interface to a webpage, inspired by vi
  • Jim allows easy developement of keyboard based applications

I know what you think, it sound like WTF?. Here is a simple example to help you understand. The commands are straightforward:

  • : opens the CLI
  • ESC closes the CLI
  • TAB autocompletion
  • Return to execute

If you've ever used a terminal emulator, it won't be difficult…
I've implemented 4 commands in the example:

  • echo : echo pli prints "pli"
  • eval : evaluates a javascript statement : eval "echo(1+1)"
  • set field value : sets the field field to value
  • submit : submit the pseudo form

You might ask how this is a framework, and I'd reply that it was made in such manner that it is possible to define custom commands the way you want. Here is the configuration file used in the example:

_('echo', echo);
_('eval', eval);

_('set', function(what, value) {
  $$('#'+what+' .value')[0].update(value);
},{
  suggestions: function (n, a) {
    switch (n) {
      case 1:
        return $$('.settable').pluck('id');
      case 2:
        switch (a.last())
        {
          case 'name':
            var names;
            new Ajax.Request('names.htm', {
              method: 'get',
              onSuccess: function (e) {
                names = eval(e.responseText);
              },
              asynchronous: false
            });
            return names;
          default:
            return Array();
        }
      default:
        return Array();
    }
  },
  callback: function (id, a) {
    $$('.settable').each(function(e) {
      e.down('.field').removeClassName('highlight');
    });
    if (id)
      if (a.length == 0)
       {
        $$('#'+id+'.settable')[0].down('.field').addClassName('highlight');
       }
  }
});

_('submit', function () {
  var params = {};
  var submit = true;
  $$('.settable').each(function (e) {
    var val = e.down('.value').innerHTML;
    if (val.blank())
     {
      err('Please fill in <b>all</b> fields');
      submit = false;
     }
    params[e.id] = val;
  });
  if (submit)
    new Ajax.Request('names.php', {
      parameters: params,
      onSuccess: function (e) {
        echo(e.responseText);
      }
    });
});

This is highly modular and allows almost all possible commands. I have had a few hesitations about polluting the namespace, but I add only three function echo err _, which can be renamed.

Downloaded : 103 times
File : jim-0.32.tar.gz
Size: 63 ko

Keyboard use

I've been talking about how much I loved the keyboard over the mouse (for all discrete tasks) for quite some time now, and I think it's time for me to write something about my bad habits.

As most people, I have ten fingers, but I recently realized I didn't use them in the same way when I was typing. In fact, it's quite heterogeneous… I mainly use my left hand's index, middle finger and ring finger as well as my right hand's middle finger and index to type text (which means that my right ring finger is often idle. This also means that my right hand moves a lot (too much?) and this is not efficient.

This represents only half of my fingers. Little fingers are mainly used by the modifiers ctrl> and shift, the right thumb to the space bar, the left thumb to the meta key (which is the modifier used to access all my wm's features) and the right ring finger is bounded to backspace

This means I have a non-optimized way of typing : I use 5 of my fingers to access 8 keys, and the other 5 to use almost all the rest of the keyboard… That's why I'm looking for a way to correct that. Now, the problem is that I'm so used to typing on my keyboard that I do not need any keyboard anymore, I can basically visualize the keyboard and intuitively know where I should place my fingers. That means I have some sort of virtual keyboard somewhere in my brain, and thus I won't be able to optimize my usage of an azerty keyboard.

However, I seriously start to think about switching to a dvorak layout, so that I can take good habits from the start. The only problem I can see is that I will have to loose 12 years of azerty reflex… So, any comments about switching from Azerty to Dvorak (fr) are welcome

Binding volume keys in Ion3

After quite some time wondering how to do so, I finally understood how to bind the volume keys on my keyboard using Ion3