7 Oct 2013, 10:07am
javascript:

1 comment




  • Anzeige
  • Callback Method for Twitter’s Typeahead

    When you start using Twitter’s typea­head, e.g. because you switched from Boot­strap 2.3 to 3.0, you will notice that it is NOT a sim­ple drop-in replace­ment for Bootstrap’s orig­i­nal typea­head!
    Before, you gen­er­ated the sug­ges­tions shown to the user by imple­ment­ing a call­back method while cre­at­ing the typea­head like this:

    $(field).typeahead({
      source: function(query, process) { 
        ... return a list of suggestions (see doc for details) 
      }
    });

    Since ver­sion 3, Boot­strap does not pro­vide its own typea­head any more, instead it is using Twitter’s own imple­men­ta­tion which seems to be a good choice at least on the long run. But it does not pro­vide any mean for defin­ing a call­back method to pro­vide the sug­ges­tions — no clue why.
    Instead you can pro­vide a pre­de­fined array locally, a pre­de­fined array that will be loaded on start-up, or a remote ser­vice defined by a URL.
    You will find sev­eral good exam­ples of why you need a call­back method sometimes.

    • You want/have to use a Javascript library to access the service.
    • There is no data­base for the sug­ges­tions, they a gen­er­ated on the fly, e.g.if you want to sug­gest sen­tence com­ple­tion while the user types.
    • You are using Meteor’s col­lec­tions hold­ing your sug­ges­tions, thus, there is no URL you could point to.

    But tak­ing a look into the inter­nals revealed fol­low­ing solu­tion: com­pletely by-pass the inter­nal sug­ges­tion aggre­ga­tion of Twitter’s typea­head by replac­ing the getSuggestions(query, callback) method of the first dataset, which we defined by local: [];.

    (t = $("field")).typeahead({ local: [] });
    t.data("ttView").datasets[0].getSuggestions = function(query, callback) {
      var suggestions = ... gather your suggestions here ...
      var data = [];
      for (suggestion in suggestions) { data.push(this._transformDatum(suggestion)); }
      callback(data)
    }

    (Trans­lated from Cof­fee­script on-the-fly — con­sider as a draft than an out-of-the-box solution.)

    Happy hack­ing. :)

    p.s. for Meteor users: The call­back breaks each time the tem­plate gets re-rendered — despite that you use the pack­age preserve-inputs or <#constant> due to a bug. Some­how, con­stant areas and that par­tic­u­lar pack­age do not get along with each other. Solu­tion: removed the pack­age and use con­stant areas around typea­head input fields works. This should be fixed as soon as the new tem­plate engine gets rolled out.

    29 Jul 2009, 10:30pm
    hci:

    leave a comment




  • Anzeige
  • good & bad usablity
    the tap example

    Every­one inter­ested in HCI and Usabil­ity saw the cover pic­ture of The Design of Every­day Things by Don­ald Nor­man. But there are exam­ples about good and bad usabil­ity all around us, every day and I want to share one of mine.

    I real­ized how much more com­fort­able the shower tap at my par­ents place is, com­pared to the one in my shared flat.

    don't move! If you are lucky, the water gets only turned of... otherwise you get frozen or boiled...

    Don’t move! If you touch it and you are lucky, the water gets only turned off… oth­er­wise you get frozen or boiled.

    an good example of a water-tap for a shower

    A good exam­ple of a water-tap for a shower.

    .

    The exam­ple to the left  is a typ­i­cal one — most prob­a­bly fol­low­ing an assump­tion like “this tap is work­ing for the wash­bowl, so it will do for a shower as well”. As it is mounted waist-high, it is easy to reach, also by mis­take, which can be quite dan­ger­ous as it can eas­ily be turned towards hot water by a slight touch. The re-engineered exam­ple on the right shows a func­tional and easy-to-use solu­tion, in addi­tion, the water tem­per­a­ture can be set up very pre­cisely, but most impor­tant, there is no way to change the water tem­per­a­ture by acci­dent as it is selected with a knob. Addi­tion­ally, due to the knob, its almost impos­si­ble to reach the han­dle, which is used to set up the water amount, by accident.

    9 Jan 2008, 12:02am
    projects:

    leave a comment




  • Anzeige
  • use all your fingers
    multi-touch!

    Screenshot of the final appliation.

    Heard about those home-made multi-touch screens using infrared LEDs? We did it :)

    » read more »

    17 Apr 2007, 10:10pm
    projects:

    2 comments




  • Anzeige
  • magnet v0

    Screenshot of the current version.I fin­ished the first pro­to­type imple­men­ta­tion of mag­net, a generic tool to visu­al­ize coherences/similarities between eni­ties of any data set.

    » user test & more info »

    6 Mar 2007, 7:50pm
    projects:

    leave a comment




  • Anzeige
  • sign selector

    While test­ing some ideas for a juke­box appli­ca­tion for my “media cen­ter” com­puter, I came to a point, where the user should be able to select an inter­pret or song from a huge list. If he knew the exact name, scrolling through a sorted list should be ok, but still a way to nar­row the list by typ­ing some ini­tial let­ters would be much faster and con­vinient. This should not be dif­fi­cult on a thouch screen, but as I also wanted  this appli­ca­tion to work on mouse-only devices, as a key­board was for exam­ple too space con­sum­ing in my con­fig­u­ra­tion. So I ended up try­ing to find an inter­face com­po­nent, allow­ing an user to enter a view let­ters with a point­ing device like a mouse or a track ball.

    It is basi­cally a pop-out tech­nique, but mak­ing use of mov­ing the mouse pointer in two dimen­sions, than the com­mon lin­ear approach. Oper­ati­ing this first pro­to­type ver­sion on the left is still a lit­tle rough though.

    7 Dec 2005, 12:22pm
    projects:

    leave a comment




  • Anzeige
  • Content and navigation as zoomable UI and masked floating layer

    See the Zoomable UI/floating layer navigational approach of my old (unmaintained!) home page

    See the Zoomable UI/floating layer nav­i­ga­tional approach of my old (unmain­tained!) home page (in german).

    This ver­sion of my home­page fea­tures a new nav­i­ga­tional con­cept com­bin­ing the idea of zoomable inter­faces and a masked float­ing layer. I cre­ated this appli­ca­tion as exper­i­ment while search­ing for con­cepts and idea about how to inte­grate con­tents and nav­i­ga­tional layer.

    After infor­mal feed back of user i asked to give it a trail, I had to find, in the end, this RIA will stay more an exper­i­ment than a easy to use infor­ma­tion portal.

    The text and media con­tained is in ger­man and has not been update ever since, addi­tion­ally the guest book is deac­ti­vated. There­fore give it a trail but do not take the con­tent seri­ous :) .