Quantcast

Announcing YouTubeFilter

YouTubeFilter is a simple tool that scrapes the MetaFilter RSS feed and embeds the YouTube videos inline. I wrote it to make it easier to find cool videos to watch on my Wii.

Unfortunately, the Wii runs out memory when loading YouTubeFilter! And of course, Firefox bugs on the mac prevent some of the embedded videos from showing up unless you resize the window just right. Stupid firefox.

The code is checked into SourceForge. I use Beautiful Soup for parsing the RSS. Someone please help me make it work on the wii!

Announcing TikiCards: Flashcards for the Web

sweet.pngI was inspired by peliom’s web-2.0 Japanese flashcards, so I made some Hindi flashcards this weekend. Or rather, I made an open-source framework for javascript-powered flashcards called TikiCards, and pre-populated it with vocabulary words from the awesome Door Into Hindi lessons that I’ve been working on. I’ll work on adding more words and more languages soon. The code is checked in here.

Unfortunately, Firefox on the Mac doesn’t ship with a Devanagari fonts, and it doesn’t use the OS X system font, so all the characters show up as question marks. And unlike peliom’s Japanese flashcards that work great on the iPhone, the Devanagari characters show up as square boxes on the iPhone. So if you want to use these for Hindi, use Safari on a Mac or FF on unix.

Anyway, check it out and let me know what you think.

Announcing ChatBubble!

I’ve finally made it easy to post good-looking iChat transcripts to the blog! We use CSS to style DIVs to look like iChat speech balloons.

Cool! Where I can get the CSS?

All the code is checked into SourceForge. You can browse it here.

But how does it work?

A brief description is here. Scott Schiller came up with the Even More Rounded Corners technique that we use. There is a CSS file to include and a python script that turns transcripts into html that you can paste into a blog post. We need more documentation, CSS cleanup, cross-bowswer support, and more speech balloon colors, if you feel like contributing patches.

Doesn’t WordPress completely bork the formatting in Safari by adding unmatched </p> tags?

Yup! WordPress is crap! You can use the wp-unformatted plugin to disable autop() on posts that contain ChatBubbles.

uDuino: low-cost Arduino

Tymm has developed a low-cost, breadboard-based Arduino. His Diecimila-compatible design separates the programming adapter (which you only need one of) from the Arduino board to keep costs down.

So after an initial investment of under $25, you can put together cores for breadboard-based Arduino prototypes for $8-10… the Diecimila auto-reset works… and you actually get 2 I/O pins out of the deal

Cool project, Tymm!

How To Quickly Find the Size of an Image

To find the size of an image, I usually use ImageMagick’s identify command. Unfortuantely, identify is horribly slow, especially for JPEG 2000 images (thanks to a very slow libjasper).

So instead of using identify:
identify -format "%wx%h" image.jp2

Use exiftool instead:
exiftool -s -s -s -ImageSize image.jp2

exiftool is 62.5 times faster(!!!) than identify for finding image size on my dual 2.0Ghz Athlon.

Bluetooth HotSync your Palm with Linux

Here is a script, pilot-xfer-bt, that will HotSync your Palm over Bluetooth on Linux. I use a Treo 700p here, but this will probably work with other Palms with Bluetooth.

First, make sure your host computer and Palm are paired. Then make sure your copy of rfcomm is at least version 3.23 or later by running ‘rfcomm –help’. As of the writing of this post, very few machines are using this rev, since it is recent. If yours is older, either try updating your bluez-utils package, or download, compile, and install the latest bluez-utils source. All you need is the ‘rfcomm’ binary.

Then edit that pilot-xfer-bt script and make sure that its internal path to rfcomm points to the install directory. /usr/local/bin/rfcomm is probably what you want if you installed from source.

Anyway, to use: pilot-xfer-bt passes its args to pilot-xfer. So in other words, to sync your Palm to a repository located in /home/username/palm, run ’sudo ./pilot-xfer-bt -s /home/username/palm’.

Getting this thing working a few months ago was a bear. There was this nasty timing-dependent bug in rfcomm vs. udev. That took days to puzzle through. At least it’s been fixed upstream.  Anyway, I now know why they call these tools “bluez”

Bluetooth Networking with Treo 700p and Linux

Perhaps you are the owner of a Treo phone (or really just any Bluetooth phone) and wish to use it as a Bluetooth “modem” with your Linux box with EVDO or EDGE or HSDPA or whatever.

Maybe you have spent hours trying to get the devices to connect, only to see a weird “Bluetooth connection starting…” message on your Treo, but nothing else happens. (Caused by connecting to the OBEX RFCOMM channel, not the DUN RFCOMM channel.)

Or maybe you have spent hours trying to figure out why your Treo complains “ERROR” “ERROR” “ERROR” to your Linux box when you send it an AT command. (Caused by connecting to the headset audio RFCOMM channel, not the DUN RFCOMM channel.)

Or maybe you haven’t yet wasted any moments of your rapidly dwindling life on this crap at all and Just Want Things To Work and Don’t Understand Why They Don’t.

If any of this sounds familar, maybe this script, start-bt-modem, may help.

You will need to save it to your local disk, and edit it to replace the “aa:bb:cc:dd:ee:ff” with your phone’s Bluetooth address. To find this, go to your Treo’s Bluetooth application, and change the “Visible” dropdown to “Temporary.” Then on your Linux box, run “hcitool -i hci0 scan” - your phone’s Bluetooth address should appear.

You also need to already have paired your phone with your computer before running the script. To do this, I suggest making your computer discoverable and doing the scan from your Treo, rather than the other way around. Probably the easiest way on your Linux box is to use the GUI tools for this. Look for a weird-looking B in a dark blue oval on your menu bar (aka panel). If it isn’t there, you can try running ‘bluetooth-applet’ from a terminal. (This is part of the bluez-gnome 0.8 package on my machine). Right-click on the panel Bluetooth icon, choose “Preferences”, select “Visible and connectable for other devices”, and click “Close.” Then you will need to go to the Bluetooth application on your Treo, click “Setup Devices”, click “Trusted Devices”, click “Add Device”, click on your computer’s name, and click “Okay”. You’ll go through the pairing process - your Treo will display a number - make sure you enter the same number on your Linux box when the dialog box pops up. Then you should be set.

Finally, you will need to run the script as root - for example, ’sudo sh ./start-bt-modem’. If all goes well, you should see some IP addresses appear after about 30 seconds.

I guess if you don’t use Verizon, you might also have to edit that “#777″ that appears at the bottom of the script.

How To Style a DIV to look like an iChat speech balloon using CSS

This technique works in standards compliant browsers, such as FireFox 3 and Safari 3. You can make it work in non-standards compliant browsers if you want to, but it requires some tweaking.

These instructions are simplified. When posting a chat transcript, you will want to have speech balloons originating from the left alternating with balloons alternating on the right. In this example, we will only discuss the case of the balloons originating from the right. We will generalize ‘CBmsgR’ and ‘CBmsgL’ as just ‘CBmsg’.

1. Start with a container div with its css display property set to ‘table’. We will set the css class of this div to be CBmsg.

2. Add two table-cells to the CBmsg div. The CBmsg will contain a CBtxt and a CBicon. This will create the following layout:

The CSS for this will look like this:

CSS:
  1. <style type=“text/css”>
  2.  
  3. div.CBmsg {
  4.                   display: table;
  5.             margin-bottom: 0.5em;
  6.                     float: right;
  7.                text-align: right;
  8.            }
  9.          
  10. div.CBtxt {
  11.                   display: table-cell
  12.                  position: relative;
  13.                    margin: 0px auto;
  14.                 min-width: 8em;
  15.                 max-width: 760px;
  16.                   z-index: 1;
  17.               margin-left: 12px;
  18.            }
  19.  
  20. div.CBicon {
  21.                   display: table-cell;
  22.            vertical-align: bottom;
  23.              padding-left: 10px;
  24.             }
  25. </style>

And the HTML will look this this:

HTML:
  1. <div class=“CBmsg”>
  2.   <div class=“CBtxt”>txt</div>
  3.   <div class=“CBicon”>icon</div>
  4. </div>

3. Add the user’s chat icon. It looks like this:

This is what the CSS looks like. The padding property is only necessary if your blog template sets padding for all images, like ours does.

CSS:
  1. div.CBicon> img {
  2.           padding: 0px;
  3.             width: 32px;
  4.            height: 32px;
  5.         }

And this is the HTML:

HTML:
  1. <div class=“CBicon”><img src=“IconRajbot.jpg”></div>

4. OK, now comes the complicated part. We use the Even More Rounded Corners technique to draw a bubble. We use a 800×1600 png that looks like an empty iChat bubble. Here is what it looks like:

We copy the ‘content’, ‘t’, and ‘b’ CSS classes from Even More Rounded Corners verbatim:

CSS:
  1. .CBtxt .CBcontent,
  2. .CBtxt .CBt,
  3. .CBtxt .CBb,
  4. .CBtxt .CBb div {
  5.  background:transparent url(BubbleBlueR800×1600.png) no-repeat top right;
  6. }
  7.  
  8. .CBtxt .CBcontent {
  9.  position:relative;
  10.  zoom:1;
  11.  _overflow-y:hidden;
  12.  padding:0px 12px 0px 0px;
  13. }
  14.  
  15. .CBtxt .CBt {
  16.  /* top+left vertical slice */
  17.  position:absolute;
  18.  left:0px;
  19.  top:0px;
  20.  width:12px; /* top slice width */
  21.  margin-left:-12px;
  22.  height:100%;
  23.  _height:1600px; /* arbitrary long height, IE 6 */
  24.  background-position:top left;
  25. }
  26.  
  27. .CBtxt .CBb {
  28.  /* bottom */
  29.  position:relative;
  30.  width:100%;
  31. }
  32.  
  33. .CBtxt .CBb,
  34. .CBtxt .CBb div {
  35.  height:10px; /* height of bottom cap/shade */
  36.  font-size:1px;
  37. }
  38.  
  39. .CBtxt .CBb {
  40.  background-position:bottom right;
  41. }
  42.  
  43. .CBtxt .CBb div {
  44.  position:relative;
  45.  width:12px; /* bottom corner width */
  46.  margin-left:-12px;
  47.  background-position:bottom left;
  48. }

And the HTML now looks like this:

HTML:
  1. <div class=“CBmsg”>
  2.   <div class=“CBtxt”>
  3.     <div class=“CBcontent”>
  4.       <div class=“CBt”></div>
  5.       txt
  6.     </div>
  7.     <div class=“CBb”><div></div></div>
  8.   </div>
  9.   <div class=“CBicon”><img src=“IconRajbot.jpg”></div>
  10. </div>

Announcing TikiChart!

I hacked up a front end to google charts api using jquery. You can play with it at TikiChart.com. It’s GPLed, so please help make it better!

Creative Commons Radio from archive.org

Shag and I are testing a netradio station, streaming CC ShareAlike-licensed tracks from archive.org. Give these a listen and let us know what you think!

Ambient Drone Electronic Folk Indie IDM Pop

Ambient:
Drone:
Electronic:
Folk:
Indie:
IDM:
Pop:

How to quickly convert a bunch of JPEG2000s to JPEGs

Let’s say you have a directory full of jp2 files, and you want to convert them to jpg. The usual way of doing something like this is to use ImageMagick’s mogrify command:
mogrify -format jpg *.jp2
ImageMagick uses JasPer to decompress the jp2, and it is unbelievably slow. If you want to do the same conversion, but five times faster, use the free Kakadu software instead.

Here is a script that will quickly convert the jp2s in the current directory to jpegs. You will have to edit the paths to the Kakadu binary and library.

PYTHON:
  1. #!/usr/bin/python
  2.  
  3. “”
  4. mogrify -format jpg *.jp2 is taking 24.5 seconds/image.
  5. The same jp2->jpg process takes 4.5 seconds/image on the same box when using
  6. Kakadu, even when creating a temporary ppm file.
  7. You can get the free Kakadu binary here:
  8. http://www.kakadusoftware.com/
  9. This script operates on jp2 files in the current dir.
  10. “”
  11.  
  12. import commands
  13. import glob
  14.  
  15. files = glob.glob(“*.jp2″)
  16.  
  17. for file in files:
  18.     print “Processing “ + file
  19.    
  20.     cmd = “LD_LIBRARY_PATH=/usr/local/lib/kakadu /usr/local/bin/kdu_expand -i %s -o tmp.ppm” %(file)   
  21.     retval = commands.getstatusoutput(cmd)[0]
  22.     assert (0 == retval)
  23.  
  24.     cmd = “pnmtojpeg tmp.ppm> %s” % (file.replace(‘.jp2′, ‘.jpg’))
  25.     retval = commands.getstatusoutput(cmd)[0]
  26.     assert (0 == retval)
  27.  
  28. from os import unlink
  29. unlink(‘tmp.ppm’)

QuickSilver Now Open Source

QuickSilver is now open source! Check it out on Google Code..

Shoes, a Tiny Toolkit for Making Web-like Desktop Apps

Shoes is a new project by the infamous why:

Shoes is a very informal GUI toolkit. It’s for making regular old windowing apps. It’s a blend of my favorite things from the Web, some Ruby style, and a sprinkling of cross-platform widgets. (More in the README.)

Check out the book reader tutorial on Hackety.org

simple screenshots:

Linking WordPress to DokuWiki

I wrote a WordPress plugin that turns any CamelCase word into a link to our DokuWiki, assuming a wiki page of the same name exists.

For example, you can link to RanchTronix or KiteSurfing or whatever, just by typing a word in CamelCase. The wiki is really out of date, so please update it!

DokuWiki is not case-sensitive, so you can use RaNChTroNiX style capitalization :)

You can also use double-square brackets to surround a non-camelcase word to turn it into automagic wiki link like so: [[AVR]]

If you want to use it on your own site, the source is here.

reCAPTCHA: stop spam and help digitize books

reCaptcha is a project by Prof. Luis van Ahn at CMU.

Over 60 million CAPTCHAs are solved every day by people around the world. reCAPTCHA channels this human effort into helping to digitize books from the Internet Archive. When you solve a reCAPTCHA, you help preserve literature by deciphering a word that was not readable by computers.

reCAPTCHA is a great project. I added the WordPress plugin to TikiRobot, which will hopefully reduce all the crap that Akismet fails to catch. If you haven’t seen Prof. van Ahn’s TechTalk on Human Computation, check it out. It’s very good!

His other projects are The ESP Game and PeekABoom.

Update: Here is a quote from Brewster:

“I think it’s a brilliant idea — using the Internet to correct OCR mistakes,” said Brewster Kahle, director of the Internet Archive, in a statement. “This is an example of why having open collections in the public domain is important. People are working together to build a good, open system.”

Make a grid using ImageMagick

I needed a jpeg with gridlines on it. Here is a python script that will generate the arguments to ImageMagick to create a grid:

PYTHON:
  1. #!/usr/bin/python
  2.  
  3. cmd = ‘convert -size 1000×1000 xc:white -strokewidth 1 ‘
  4.  
  5. for i in range(0, 999, 100):
  6.   cmd += “-draw ‘line “+str(i)+“,0 “+str(i)+“,999′ “
  7.  
  8. for i in range(0, 999, 100):
  9.   cmd += “-draw ‘line 0,”+str(i)+” 999,”+str(i)+“‘ “
  10.  
  11. cmd += “grid.jpg”
  12.  
  13. print cmd

Canvas3D

This video of a canvas3d/javascript demo in Firefox gives me hope. Some parts of my canvas(2d) web app runs 100x slower in Firefox/linux than Safari/OSX. It looks like they have hardware acceleration working, finally :)

Here is some info on Canvas3d in javascript.

How to keep WordPress from borking your post

Sometimes you just want to post a code snippet or some xml on your blog, but WordPress borks the formatting. So we installed the iG Syntax Hilighter, which mostly works great. It uses GeSHi under the hood.

But sometimes, the syntax highlighter does too much highlighting. I wrote a minimal GeSHi language file for ‘nocode’, which basically lets me use the syntax highlighter like a glorified pre tag. No more worrying about wptexturize() pulling a Swedish Chef on your post! Here is the language file if you want to use it:

NOCODE:
  1. <?php
  2. /*************************************************************************************
  3.  * nocode.php
  4.  * ——-
  5.  * Author: rajbot
  6.  * I wanted a <pre> that didn’t fuck everything up..
  7.  ************************************************************************************/
  8.  
  9. $language_data = array (
  10.     ‘LANG_NAME’ => ‘NOCODE’,
  11.     ‘COMMENT_SINGLE’ => array(),
  12.     ‘QUOTEMARKS’ => array(),
  13.     ‘KEYWORDS’ => array(),
  14.     ‘OBJECT_SPLITTERS’ => array(
  15.         ),
  16.     ‘REGEXPS’ => array(),
  17.     ‘SCRIPT_DELIMITERS’ => array(
  18.         )
  19. );
  20. ?>

Announcing the TikiWikiFormatting WordPress plugin!

I wrote a plugin that lets us use UseMod Wiki’s formatting syntax to format posts more easily… You can read more about it here. It’s already installed here, so go nuts!

I’m sure the first thing that jumped into your head is why not just use MarkDown? Well, I don’t like MarkDown’s link format. UseMod’s is much easier!

Compare Markdown:

NOCODE:
  1. [The TikiRobot Blog!](http://tikirobot.net/)

And UseMod links:

NOCODE:
  1. [http://tikirobot.net The TikiRobot Blog!]

Also,

  • I like the way
    • UseMod syntax
      • lets me easily create sublists

Are there any other UseMod syntax elements I should add?

Example Scripts: REST web services and system calls

I’ve been translating all the new perl and php scripts I write into Python and Ruby in order to learn more about those two languages. I checked some more example scripts into SourceForge, which might be useful for others who know one of these languages and want to learn a new one.

These scripts are available in perl, php, python, and ruby:


The REST Web Service PHP and Perl scripts don’t work in Mac OS X, because OS X doesn’t ship with Perl’s XML::Simple or PHP’s simplexml. More surprisingly, OS X doesn’t ship with Perl’s LWP module.

I’m starting to like Ruby more every day. It would be nice if Ruby and Python had a XML::Simple equivalent in their standard distributions.

Example scripts: directory listing in perl, php, python, and ruby

I remember when I fell in love with Perl. It was the summer of 1995, and peliom and I had just met, and were working at the Lab. Postscript hacking using MacPerl on OS 8. It was beautiful.

That was more than ten years ago, and even though I’ve remained a Perl hacker the whole time, I see massive amounts of development happening on Python and Ruby, and the Perl community seems to be slowing down (what’s up with Perl 6 anyway?), so, despite the lack of block-level scope, I think it might finally be time to move on.

I don’t know enough about either Python or Ruby to figure out which to learn, so I’ll learn them both, and deal with choosing one later. Along the way I’ll post some example scripts. Anyone else making the jump from Perl or PHP to something modern might find these useful. Here is the first example: printing out a directory listing using readdir and glob in your favorite scripting language:

(more…)

How to render text using HTML Canvas

I’ve been using HTML5 Canvas for a few web apps, and for the last year I’ve been avoiding rendering any text because Canvas lacks text support. Over the last year, several people have come up with workarounds.

  • Firefox decided to add a non-standard method called drawWindow(), which lets you composite a hidden iframe with html text.
  • The TextCanvas project adds a drawString method to the canvas api, which positions a HTML element on top of the canvas.
  • The Variable Width Canvas Fonts project pre-generates an image containing characters at known locations and then uses drawImage to display the necessary characters.
  • The very cool CanvasPaint project went nuts and implemented vector fonts in canvas! (more info here)
  • None of the above links work in Safari. Despite being the original developers of Canvas, Safari’s Canvas support is extremely buggy. Things work better with the nightly builds, but even then, many things are broken.

I’ve been thinking about giving up on supporting Safari completely, and maybe trying out dojo’s gfx 2D graphics API, which has text support but uses SVG/VML instead of Canvas. For the time being though, I found a silly workaround. Since I only need to display numbers, I can just create 10 pngs, one for each digit. Here is a bash script that creates the number pngs using ImageMagick:

CODE:
  1. for ((i=0;i<10;i++)); do
  2.      convert -size 75×100 xc:transparent -quality 100 -font Courier-Bold -pointsize 144 -fill green -