Annoyances: Input box not accepting focus

I’ve been using the excellent JQuery core library and JQuery-UI libraries for a web application that I’ve been developing. As I wanted to have a desktop application feel to the app, I used a script that prevented the user from being able to select text in the interface, so that when drag and drop functions are used, the user doesn’t end up accidentally selecting swathes of UI text by accident.

I noticed however when developing a user text input box prompt, that I couldn’t get the inputbox in focus. I presumed at first that it was a browser glitch, but testing showed that it occurred in every browser and every text input box element. I set to trawling through my JavaScript (the most likely culprit when a web page suddenly breaks, well, assuming that you’re not using Flash…) and found that one of my drag and drop scripts was handling the “.mousedown” event, and munching the result with a “return false”. As the script had document-level scope, it munched all mouse clicks including the one to gain focus on the text input boxes.
http://blog.matthewashrafi.com/?p=101&preview=true
The solution then; ensure that you don’t have something like this anywhere in your code:

$(document).mousedown(function() {
    // blah
    // blah
    // blah
    return false;
});

A better way of handling the problem whilst still preventing the user from selecting UI text, is to use the “return false;” statement, but with a more specific scope. So for instance if you specified items that you explicitly didn’t want to allow users to click on with the class “no-select”, then you could use the following:

$(".no-select").mousedown{
    return false;
});

Thus the document level scope isn’t involved at all, and you can avoid the sort of annoying problem I encountered. This one also goes down on the list of reasons not to trust third-party scripts blindly, as it was within one of those that the problem originated…

SL4A: Speech Recognition and Transcription

SL4A gives you access to a simplified Android API, but it’s still got plenty of functionality to make some functional apps using small amounts of code. The following Python script starts a speech recognition dialogue, then outputs that as text in the terminal.

# SL4A Demos - Transcribe Speech
# http://blog.matthewashrafi.com/

import android

droid = android.Android()

print "########################################"
print "# SL4A Demos - Transcribe Speech       #"
print "# From http://blog.matthewashrafi.com/ #"
print "########################################"
print "nSay something at the prompt."

speech = droid.recognizeSpeech("Talk Now",None,None)
print "You said: "
print speech[1]

transcribe-speech.py

Alternatively, you can use a barcode scanner to scan in the script from the following QR code:

Screenshots

The editor view within SL4A.

transcribe-speech.py in the terminal.

The voice recognition dialogue processing speech.

After the script has run, the transcribed speech,  in this case “cheat sheet”, is displayed after the “You said:” line.


Streaming a web cam in Ubuntu

It’s pretty easy to get a webcam to stream in Ubuntu, or indeed any Debian distribution. In this example I’m using Ubuntu 10.04 (Karmic) and a Microsoft Lifecam VX-1000 web cam.

First get root access with the usual command.

$ sudo bash
[sudo] password for user: *********

Next open up a terminal window and install webcam-server as follows:

$ apt-get install webcam-server

Now go to the /dev directory and list the contents. From your home directory type:

$ cd ..
$ cd ..
$ cd /dev
$ ls

You’ll now see a list of files that will look similar to this:

input            ram11               tty32  vcsa4
kmsg             ram12               tty33  vcsa5
log              ram13               tty34  vcsa6
loop0            ram14               tty35  vcsa7
loop1            ram15               tty36  tty7   vcsa8
loop2            ram2                tty37  tty8   zero
loop3            ram3                tty38  tty9
loop4            ram4                tty39  ttyS0

Now plug in your webcam into one of the USB ports, wait a couple of seconds then type the same command again:

$ ls

You should see another file has appeared that starts with video. Mine’s shown up as video0 as it’s the first video device connected to the system. If you have an integrated webcam, subsequent webcam handles will be incremented, i.e. video1, video2 etc..

Now to start the webcam-server daemon, type the following:

$ webcam-server -d /dev/video0

If it’s working, you’ll just see the cursor continue to blink. To confirm that the daemon is running, go to http://localhost:8888. You should see a JPEG image with a timestamp, showing what your webcam can see.

If not, check the terminal for errors.

libv4lconvert: Error decompressing JPEG: fill_nbits error: need 6 more bits

If you see the above message or similar, you’ll need to try and run your webcam in compatibility mode, as follows:

$ LD_PRELOAD=/usr/lib/libv4l/v4l1compat.so  webcam-server -d /dev/video0

Now check http://localhost:8888 again, and all things being well, you’ll see the JPEG snapshot. (if not, check the Ubuntu forums to check that your device is supported)

Now as that’s not strictly speaking a stream, there’s one last thing to do.

$ cp /usr/share/doc/webcam-server/applet/* /var/www/

This will copy some files, including the Java streaming applet, to your web accessible directory, /var/www. Now if you go to http://localhost/webcam.html, you’ll see an applet load, followed by a live stream from your webcam.

Note: The useful thing about this, is that you can run as many daemons as your system can handle, so you can plug in a number of webcams to the same system and with some additional webcam-server switches, you can assign each camera to a different port.

Removing an entire directory/folder (that still contains files) in Linux

This one’s easy, but I’ve just been asked by someone new to Linux so here it is:

$ rm -r <path to directory>

So for example if you want to delete a folder called temporary from your home directory:

$ rm -r ~/temporary

The -r switch stands for recursive, so you’re not actually deleting the directory with the files within it, you’re deleting each file within the directory first, then removing the directory afterwards.

Simples.

Get Windows 7 snap window resizing in XP

I’m not a fan of Windows 7’s bloat and visual and marketing fluff, but one killer feature that I’ve found genuinely useful in Redmond’s most recent offering is the ability to resize a window to exactly half of the screen by simply dragging it all the way to the left or right of the screen.

As I use an XP development machine at work, I wanted the same functionality on the older generation operating system. Unsusprisingly Microsoft do not provide a way for this feature to be added to XP themselves, but there is a free alternative that does the job; WinSplit-Revolution.

In fact WinSplit-Revolution does more than Windows 7, by allowing you to define a range of sizes for your snap-resized window to take. Whilst this adds a little more complexity to the configuration options, I’ve found it to strike just the right balance between configurable and easy to use, without being a pain to set up. Highly recommended.

Add A Directory to PATH in Ubuntu 10.04

Open up your user’s .bashrc file in whichever text editor you like, I usually use gedit for quick things like this.
gedit ~/.bashrc
Now add the following lines to the bottom of the file, replace the somefolder path with the path to the folder that you want to add to PATH. Then save the file, and close the text editor.
PATH=$PATH:/home/user/somefolder
export PATH
To make the changes take, run the following in the terminal.
source ~/.bashrc

Done! You can now access anything in that folder from the bash prompt without typing the path.