• The ability to turn off the game and continue at a later time
• A small indicator of current time (for when you’re playing Jamtris while waiting for the bus, for example)
• An alternative pause button (for phones that don’t properly map the current pause button)

Please add a comment below with your other wishes for the next version!

Due to the great interest in my little php-upload-with-progress-bar script I have now created a sourceforge project for it and released a new version of the code, based on all the great feedback in the original blog post. The new version can be downloaded here. The changes are mostly to make it easier to get started with the script. If you’ve already got it working, don’t bother downloading this one.

If you’ve got ideas for the next version, please leave a message in the comments or on the Sourceforge project page. Already planned features for next version are ability to print progress (in percentages), as suggested by Travis, and download speed.

The script has also been given a name, tesUpload, and a permanent home.

 m = new SpinBox('minutes',0,59);
 h  = new SpinBox('hours',0,23);
 m.registerOverflowObserver(h);

Now whenever the first spinbox gets below 0 or above 59, the second one will be decreased or increased by 1. This is useful when you want to use spinboxes to enter time, which is one of the most common things spinboxes are used for.

The demo has been updated to display this new functionality. I have also created a sourceforge project for the spinbox which can be found here, so if you need any kind of support or want to file a bug then please go there.

The complete archive can be downloaded here.

The Spinbox

The spinbox is also called spinbutton, spincontrol or UpDown button. You can see it in the picture on the right. It is commonly used to enter, for example, time and dates in desktop applications but isn’t available as an HTML form element.

Placing the arrows

The greatest challenge by far was positioning the arrow images. I started trying to do it using css, but soon gave up when I encountered too many browser inconsistensies, bugs and missing features (such as missing inline-block in Firefox), and decided to do it the old-fashioned way instead: using tables. In my solution, a table is created dynamically around the textbox and made inline so that more than one spinbox can be laid out on the same line. Only problem is, Firefox and IE both don’t understand display:inline-table, they want display:inline instead, which Safari & Opera don’t like. The solution to that:

table.style.display='inline';
try {
    table.style.display = 'inline-table';
} catch(e) {}

Firefox just silently drops the inline-table declaration that it doesn’t understand but IE throws and error. That’s why the try/catch statement is needed.

PeriodicalExecuter

When one of the arrows is clicked, the value in the textbox should increase or decrease while the mouse button is held down. To accomplish this I created a Prototype PeriodicalExecuter which updates the textbox with increasing frequency. Only problem is, for some reason they’ve decided to not include a stop method for the PeriodicalExecuter. Luckily, someone else also ran into this problem. I’ve included that solution in my source.

Disable context menu

In Firefox on Mac, the context menu pops up when you hold down the left mouse button for a second or so anywhere in the window. This is obviously a bit annoying when you are trying to use the spinbox. Turns out that you can stop it from happening by denying the onContextMenu action from firing. In Prototype code:

Event.observe(img,'contextmenu',function(evt){Event.stop(evt);});

In HTML this would be:

<img src="pic.gif" oncontextmenu="return false;">

Files

Download the files here: tesSpinbox. You can try a live demo here: Demo.

Usage

Include prototype first, and then spinbox.js. Change the path to the images in spinbox.js (sb_imgpath) to point to where you uploaded the images. Then to convert any textbox into a spinbox:

new SpinBox(id_of_textbox,min_value,max_value,padded_length);

Padded_length is the desired length of the string in the textbox. If the string is shorter than this value, it will be padded with zeros. A padded_length of 3 would mean that 7 becomes 007, for example. A spinbox example:

<input type="text" id="myspin" size="2">
<script language="javascript">
    new SpinBox('myspin',0,59);
</script>

Will turn the textbox into a spinbox with a minimum value of 0, maximum value of 59 which is not zero-padded at all.

The Solution

If you right click a column header in iTunes, you are able to select which fields are shown. My idea was to put the sort information I wanted into one of these fields. I settled for Grouping, since it’s one of the fields you can change when you edit the properties of a song. If I put the name of the artist followed by year and then by album into this field, sorting by this field should mean the songs are sorted the way I want them to be. Naturally, manually entering the information into this field would be quite tedious, so I wrote a quick Applescript to do it for me.

The Code

tell application “iTunes”
  if selection is not {} then
    repeat with this_track in selection
      set this_year to (get this_track’s year)
      set this_artist to (get this_track’s artist)
      set this_album to (get this_track’s album)
      if this_year > 0 then
        set this_track’s grouping to this_artist & “,” & this_year & “,” & this_album
      else
        set this_track’s grouping to this_artist & “,” & this_album
      end if
    end repeat
  else
    display dialog “Select some tracks first…” buttons {“Cancel”} default button 1 with icon 2
  end if
end tell 

Instructions

Copy and paste this code into a file (or download it here). Save the file to Library/iTunes/Scripts/ in your home directory (you might have to create the Scripts directory if it doesn’t exist). The script should now show up in the scripts menu in iTunes. Select a few songs and then select the script from the scripts menu. The songs’ artist, year and album should be written to the grouping field. To sort by this field, right-click a column header and click grouping in the list that pops up. Click the grouping header once to sort by this field. Done! To get easier access to this script you can bind it to a shortcut key, see here.

Asynchronous file upload

I wanted to use an asynchronous file upload, like the one on gmail. This means that the file is uploaded in the background, allowing you to still use the page while the file is being uploaded. Since the XMLHttpRequest object doesn’t support file uploads, this had to be done using iframes. Whenever the file input changes, the file is uploaded to the cgi-script in a hidden iframe. The cgi-script writes the total size of the upload and the actual uploaded file to temporary files.

The progress bar

When the upload starts, a Prototype Ajax.PeriodicalUpdater object is created. This object calls a PHP file twice every second using AJAX. The PHP file checks the temporary files while they are being written by the perl file, and returns the total progress in percentage of total upload size. The percentage value is used to set the width of the progress bar.

File & Links

You can download the complete source code here. There is no live demo at this point (sorry!). Similar projects are PHP Upload Progress which can’t report total file size and therefore can’t be used to create a progress bar, and Asynchronous image file upload without AJAX (seems to be down at the moment) which has asynchronous upload of files, but no progress bar. Since it always comes up, I’m also going to mention Filechucker, which is pure perl, doesn’t do asynchronous file uploads and isn’t free.

Limitations & Possible improvements

It can’t currently upload two files concurrently in IE or Firefox, but it can in Safari. Haven’t tested other browsers. It requires Prototype at the moment (included in the archive above) which some see as a downside because of its size. It doesn’t report speed of download. Upload speed is printed when using MegaUpload, so porting that to work with this code wouldn’t be difficult.

Update: The script now has a permanent home and a name: tesUpload.