The Mozmonkey Blog

A split button element is a submit button with a built-in menu of actions. My goal was to create a split button form control that is both semantic and accessible.

Stylized controls, like this, should only be used when there is a solid reason to do so. In general the default browser controls work fine and provide a pattern that users are familiar with. For certain situations, however, it is useful to provide a simple way to choose a single action using stylized controls.

Split Button HTML

<script type="text/javascript" src="splitbutton.js"></script>

<p class="splitButton">
   <select name="actions" id="actions" title="Choose Action">
      <option>Send Message</option>
      <option>Flag</option>
      <option>Chug Pixie Stick</option>
   </select>
   <input type="submit" value="Go" />
</p>

This will create a split button with 3 options and the default button name will be “Choose Action” (see example above). The key elements here are:

• A surrounding element with the splitButton class.
• A select element with an optional title attribute.
• A submit button.

If the select element has a title attribute, that text will be used as the default button name; otherwise, it will use the first (or selected) option as the button name.

When an action is selected the JavaScript will send a click event (via the click() function) to the submit button element in order submit the form.

The menu is also accessible with the keyboard. When you bring focus to control, the menu will open and you can use your arrows to select an option. Pressing ESC will close the menu.

Dependencies

This code uses YUI 2.6 with the Selector beta library and can easily be ported to jQuery or any other framework.

Download

Split button

Usage

You are free to download, modify and use this code anywhere you want. There are no restrictions.

This funny little robot has eyes, eyebrows and a mouth and will verbally read your latest Twitter status to you. It uses an Arduino Decima to control the head actions and receives the latest Twitter status information over USB from a host computer.

For those who don’t know, Twitter is a micro blogging tool where users announce what they’re doing with 140 characters or less. (see Twitter in Plain English)

You can also send the robot something to say directly from the command line with a few Ganzbot moods to choose from. More information after the videos.

Steve’s Reaction

Background

A couple months ago a few people at LinkedIn decided to create a Twitter account called “Ganzbot”, named after Steve Ganz, as a joke. Then when Steve left to compete in the PDGA World Championships we decided to build a “real” Ganz Robot to occupy his cube when he returns.

How it works

At a high level, there is a Java program on the host computer which retrieves the latest Twitter status, passes facial and word data to the head and then speaks the Twitter status through the computer speakers using FreeTTS, an open source Java text-to-speech synthesis library. I would have liked to put a speech synthesis chip in the head instead, but didn’t have the time.

LED Lips — how to make them talk

Getting the LED lips to be synchronized with the words was a bit tricky. Unfortunately FreeTTS doesn’t implement 100% of the JSAPI, so when it’s speaking there is no way to know when one word ends and another begins. Instead, the Java program on the computer splits up the text into individual words, sets the volume to zero and speaks each one to figure out how long it takes to say. Then the program passes the word times to the head and starts speaking the entire sentence with the volume at the normal level. The lip synchronization isn’t perfect, but it’s pretty good.

Another option might be to light up the LED lips from an audio spectrum analyzer.

Circuit

To keep it simple I took a standard perf board from Radio Shack and added header pins to turn it into an Arduino shield. This makes it really easy to connect it to the Arduino and ensures all the pins are in the correct sockets. The circuit below was created to show the pins and voltage source as they appear on the board. More details on the circuit after the diagram.

Download circuit schematic

Transistors

Unfortunately there wasn’t enough juice coming from the Arduino chip to power the LEDs very bright, so I had to use standard NPN transistors to feed the LEDs power directly from the board.

Lips and Eyes

I only included half of the lips and eyes in the circuit diagram since the other halves are simply connected in parallel and I didn’t want to clutter it up. I’m sure you can figure it out. If you have trouble, leave a comment below.

Eyes

The eyes are simple multi-color LEDs I picked up from Radio shack. They can output red, green and blue, but the Ganzbot only uses red and blue. The longest pin is positive and the color depends on which pin you put to ground. I suggest testing it on a breadboard before soldering it into place.

Software

On the host computer a Java program retrieves the Twitter information (or command line message) and sends the word times to Arduino over the USB cable. All the robot needs to know is the mood it should be in (neutral, sad, angry) and how many milliseconds each word takes the speech synthesis program to say. If the program is started in “-twitter” mode, it’ll continue checking Twitter for updates every 2 minutes until you stop it.

Download

Go to the download section.

Requirements

OS: Any
Java: version 1.5 or greater

I compiled the program using Java 1.5, so as long as you have version or greater you should be able to use it out of the box. If not, you can simply compile the app to your version Java (see the Build section below).

Libraries

The GanzBot program relies on the following libraries, which are all included in the download:

• FreeTTS (javax.speech)
• org.json
• RXTX (gnu.io)

Build

To build the Ganzbot source code you first need to install the Apache Ant build tool. Then go into the “src” directory and simply run “ant”. It should take care of compiling both Ganzbot and JSON and placing their Jar files in the correct locations.

FreeTTS comes precompiled from Java 1.4. If you are using an older version of Java you’ll need to download their source code and build it manually. Once completed put the jar files it created in it’s lib directory in the Ganzbot lib directory.

RXTX is the same as FreeTTS and comes precompiled. To compile it to another OS or version of Java, follow the instructions on their wiki.

Installer

In the download I’ve included an “install.sh” script that will install the RXTX library and Mac USB drivers that are needed to communicate with the Arduino. The installer is specific to Apple and wont work on other operating systems. The simplest way to make it work on other systems is to install the Arduino software. Otherwise you can always install RXTX and the FTDI USB/Serial driver manually.

Running the Program

• To run the progam start by plugging in the Ganzbot and then open up a command line terminal.
• In the command line, go to the place you downloaded and extracted the program.
• For a simple “Hello World” test type java -jar ganzbot.jar "Hello World" (be patient, It might take awhile to process)

If the program gave you an error, it’s likely because it doesn’t know which USB/Comm port that the Arduino is plugged into. It should list the available ports you can choose from in the error message. Then run the command again with the “-port” flag, like this:

java -jar ganzbot.jar -port '/dev/tty.usbserial-A6004oQf' "Hello World"

For windows you’ll probably use something like “COM1″ instead of the “/dev/tty…” string.

You can also type java -jar ganzbot.jar -help for more options.

Reading Twitter

To speak a Twitter status message enter a command like this (where jgillick is the twitter user) :

java -jar ganzbot.jar -twitter jgillick

Ganzbot wont read the same twitter message twice. The program saves the last tweet ID in a file called “.tweetid”, remove this file to have it say the last Twitter message again.

Moods

Ganzbot can be a bit moody sometimes. To define the mood he should speak in, add the mood text to the very beginning of the message. Here are a few examples:

• “[angry]I am very angry right now. Destroy, Destroy.”
• “[sad]When I’m sad I whine alot.”
• “I am not angry or sad, for I am a robot.”

Rails Application

For fun I also created a super simple rails application that let anyone queue up messages to be spoken instead of using Twitter. If the Ganzbot program is in Twitter mode it’ll automatically check that queue if there isn’t a new Twitter status message. The app is hardcoded to look at http://localhost:1024/ for the queue. You can change that in GanzBot.java if you need.

In order to run the web application you first need to make sure you have both Ruby and Ruby on Rails installed. Then download the package (see download section), extract it and run the following from the command line in the “GanzbotRails” directory.:

./script/server --port 1024

This will start the server and put your Ganzbot queue at http://localhost:1024.

Downloads

• Arduino Sketch
• Ganzbot Java Program
• Ganzbot Queue (Rails Application)
• Circuit
  • PDF
  • Schematic File

Tonight I was working on rewriting the event creation flow for MixerMixer, the social event community I’ve been building, and couldn’t figure out why the Hash#except method wasn’t working.

My goal was to exclude users who were already invited to the event so they wouldn’t be reinvited when the user edits it. So I have 2 hashes: one with the users that are selected and the other with the users who have already been invited to the event. Should be simple:

# Hash format: user_id => user_id
# current_invites = { 567 => 567, 890 => 890}
# selected_invites = { 123 => 123, 567 => 567, 890 => 890}

add = selected_invites.except(@current_invites.keys)

# Should return { 123 => 123 }
# It actually returns { 123 => 123, 567 => 567, 890 => 890}

As you can see, it returns the full hash and doesn’t remove anything. This will not do.

It tuns out that I missunderstood the Rails documentation. Hash#except doesn’t take in an array of keys to remove it takes in a list of arguments. Here’s a simple example:

add = selected_invites.except(567, 890)
# Returns { 123 => 123 }

Now I needed to figure out how to convert the @current_invites.keys array into an argument list. It turns out to be as easy as adding an asterisk in front of it:

add = selected_invites.except(*@current_invites.keys)
# Returns { 123 => 123 }

Success!

Enjoy.

One of the most requested features for the TinyUrl Creator extension is to support other URL shrinking services like bit.ly and is.gd. After some dedicated research and development I have been able to add the following seven URL shrinking services to the latest version of TinyUrl (v2.0):

• Bit.ly
• Is.gd
• Rurl.org
• Shrunklink.com
• Tinyurl.com
• Tiny.pl
• Wapurl.co.uk

To change the service you’re using click Tools > Options and select the service from the dropdown list.

If you prefer another URL shrinking service and would like it to be added to this extension, leave a comment here to let me konw. Be sure to check if the service has an API, because if they don’t the extension will have to resort to screen scraping; which is pretty ugly.

Install TinyUrl Creator

Thanks for all your support.

Along with upgrading all my extensions to work in Firefox 3 I also added a new feature to the TinyUrl creator extension: Link Preview.

Now the extension will find all links which have a tinyurl.com address and add a tooltip to tell you what the actual URL is. Simply hover your mouse over the link for a moment and the tooltip will appear with the full URL. Here’s an example:

I can’t actually take full credit for this idea, last month my friend Stephanie Trimble suggested it over twitter. Thanks Stephanie for the idea!

I also plan to add support for other URL shrinking services in this feature. Please post a comment here with your favorite URL shrinking service so I can be sure to add it to the list.

You can install the extension from this page: http://mozmonkey.com

As always, I really appreciate the support of my users. Thanks.

I just finished updating all my extensions for Firefox 3! Thank you for your support and patients during this upgrade. The Firefox code and extension API changed a bit which required me to go back and refactor some of the code and deployment scripts. Currently the Firefox 3 versions are only available from my site (http://mozmonkey.com) and I’m working on getting them to the official addons site now.

If you have problems with any of the extensions, please leave a comment to this blog post.

Thanks for all your support.

This is just a quick blog post to let everyone know that I will be upgrading all my extensions to support Firefox 3 by the end of this week. I’m sorry for the delay, it has been hard to find time for extension development in recent months.

On a related note, I feel bad that I have not had the opportunity to spend time on my extensions and would like to see if anybody wants to step up and either help me maintain them or take them over completely. If you’re interested, please post a comment to this blog post. I do not check my mozmonkey email much anymore, due to the amount of spam it gets, so the blog comments are the best way to reach me.

Last week I explained how to convert the IE6 - IE8 VirtualPC disk images to VirtualBox on the Mac. This week I noticed something critically wrong, I can’t access localhost or any LAN IP address from inside VirtualBox. This is a huge problem if you want to do local testing in IE.

The problem is that Mac support is still rather early with VirtualBox and they only provide a NAT networking option. I wont explain what NAT is because I don’t completely understand it myself. If you’re on Linux or Windows you can simply use the bridged network and it’ll work fine.

As with any problem, there is a solution! You could go buy VMWare Fusion, which should support this out of the box, but what’s the fun and challenge in that? The fun and free solution is to use a service called DynDNS.

What is DynDNS

If you’re like most people your ISP gives you a dynamic IP, which means that your home network doesn’t always have the same IP address and every so often your ISP will assign you a different one. DynDNS will give you a free domain name that always points to your ever changing home network IP address.

This means that when you’re done you’ll load a URL like “http://<you>.dyndns.org/” instead of “localhost” inside VirtualBox. This also assumes that you have some sort of web server running on your computer to serve up the pages.

Step 1 - Web Server

Setup a simple web server like Apache or the free version of LightSpeed (free version is at the bottom of the download page).

Make sure the server is installed and running properly before proceeding.

Step 2 - DynDNS Account

Go to DynDNS, register an account and create a new host. The site has good help sections to assist you through any issues or questions you run into. (see the DynDNS How-To section)

After creating the new host, download, install and run the DNS update program. This will update the service with your new IP address every time it changes.

Step 3 - Router

If your network uses a router, you might need to update it’s settings to let the requests through to your computer inside the network. At this point it is important to realize that your router has the “main” IP, which is provided by your ISP, and each computer inside your network will get their own “internal” IP address, provided by the router itself.

First test the new DynDNS URL you created. When you load the URL in your browser does it show pages from your local web server or does the browser sit there and mock you as it endlessly spins the “loading” animation?

If your web server didn’t load anything, you might need to alter your firewall settings and/or setup port forwarding in your router. Start by checking your router manual for information on how to login and change settings on it. On my SMC wireless router after logging in I found the settings I needed under Advanced Setup > NAT > Virtual Server. There I entered the last number from my “internal” IP address (IP on my computer) and the port that should direct to that computer. So if my internal IP is 192.160.2.53 and my web server is setup to respond to port 80, I enter “53″ and “80″ into the fields.

Step 4 - Static Internal IP

If you had to setup port forwarding in the last step, you should also create a static internal IP on your computer. Otherwise next time you restart your computer it’s IP might be different and your URL wont work.

This step is surprisingly simple:

1. Open your network preferences
2. Go to the network you use (in my case “Airport”)
3. Click Advanced (or similar button — I’m using Mac Leopard)
4. Go to the “TCP/IP” area.
5. Change the dropdown menu from “Using DHCP” to “Using DHCP with manual address”
6. Enter the internal IP address you added to the port forwarding setting in your router.
7. Done

Troubleshooting

If you have any problems with the setup, check out the troubleshooting page at DynDns.

Done

Now you should be able to access your local computer from inside VirtualBox with your new URL.

In a few hours (5.5 to be exact) I’m jumping on a plane to travel from San Francisco to Chennai, India. PayPal is sending me to do the JavaScript training for the Web Development team there.

My plane leaves tonight at 12:05a and lands in Singapore for an 8 hour layover. I expect to leave the airport of a few hours of sight seeing and sampling the local food. Then I jump back on the plain to hop over to India.

I’ll be in India for 2 weeks and doing the “Intro to JavaScript and DOM Scripting” class for half the team each week. Over the weekend my boss, Kimberly Blessing, and I will be traveling up to Agra to see the amazing Taj Mahal. I’ll be taking lots of pictures and posting them on Flickr along the way. I love how every time I tell someone I’m going to India their eyes light up and they instantly have stories and advice for places to go and things to do — it’s fantastic! (and yes I’ve had my shots, pills and will avoid the water)

OK, off to finish packing now. Wish me luck!

OK. So I’m not running for President (damn), but I did submit a panel to SXSW: “Documentation Blues — How to Keep Your Stuff Documented”. Well the title isn’t the best since I’ve always been bad at coming up with catchy titles (and tunes for that matter). Basically it’s a panel that will discuss how to maintain documentation for your website, APIs and/or product. Anybody who has done this before knows it can be a nightmare to create and even more to maintain. However, some projects have been very successful at either using automated tools or encouraging an active community.

This panel will explore these solutions and talk to the people who helped to create them in an effort to find the perfect recipe for self maintaining documentation.

The only way panels make it into the conference schedule is if people vote for them. Vote for it here:
http://panelpicker.sxsw.com/ideas/view/241

You only have until Friday September 21!

Thanks for your vote! <Presidential Wave>