I had a MRI today, and afterwards I was given a CD of my scan. The data on the CD was stored in DICOM format, and after some searching I was able to find some open source software to view the data. I especially liked Aeskulap which allowed interactive viewing of the data in multiple dimensions.

I wanted to put my scans online, so I found another set of tools, medcon, that allowed me to convert the DICOM images into png/gif format, and then I used ffmpeg to create the following videos:

I don’t know the exact layout, but on the CD I seemed to have 12 different scans, each with a series of images. The name of the files were all 8 digits numbers, with the first three being the scan number (0 to 11), and the following five digits being (0 to whatever). For example:

DICOM/185723/00000000: DICOM medical imaging data
DICOM/185723/00000001: DICOM medical imaging data
DICOM/185723/00000002: DICOM medical imaging data
...
DICOM/185723/00100000: DICOM medical imaging data
DICOM/185723/00100001: DICOM medical imaging data
DICOM/185723/00100002: DICOM medical imaging data
...

To create videos the first thing I did was to convert the images from DICOM to PNG

sudo apt-get install medcon
mkdir png
for i in DICOM/185723/*; do medcon -f $i -c png -o png/`basename $i`.png ; done;

Now to batch the images I started by creating animated gifs.

sudo apt-get install imagemagick

# Create animated gifs
for i in `seq -w 000 011`; do convert -delay 20 -loop 0 png/$i*.png $i.gif; done;

However, those gifs were huge, up to 20mb. So next I created a set of videos (that were a order of magnitude smaller than the gifs):

sudo apt-get install ffmpeg

# Create MP4
for i in `seq -w 000 011`; do avconv -r 5 -i png/$i%05d.png -r 24 $i.mp4; done;

# Create webm
for i in `seq -w 000 011`; do avconv -r 5 -i png/$i%05d.png -r 24 $i.webm; done;

# Create ogg video
for i in `seq -w 000 011`; do avconv -r 5 -i png/$i%05d.png -r 24 $i.ogg; done;

easy!

In the on going battle to make my lunch time more optimised I decided to learn some Javascript, and how to use the HTML5 Canvas element. Turns out it’s not that hard, and I have now created

The Lunch Wheel]3. It helps me find lunch close to my office in the Courthouse area of Arlington, VA.

While making this I found that information on the Canvas element seemed to be lacking. For example, not many sites talked about ways to optimise or profile the javascript. Also I was disappointed to see that not all browsers supported the Canvas completely. Here is a quick list of the problems:

1. Firefox 3.5 (linux) doubled the size of the fonts when I was setting the font in “pt”. When I switched to “em” things seemed to work consistently across browsers. 30fps

2. Android 2.2 (Droid 2) works well but slowly. It also didn’t support the Audio tag. 6fps

3. Android 3.0 (Xoom Tablet) seemed to have some issues rendering half of the wheel. It looked like a bug with the hardware acceleration. I made some minor tweaks to the rendering and things started to work. 15fps

4. iPhone 3 didn’t render any of the text, but played the sound and spun the wheel. 3fps

5. iPhone 4 rendered fine but as slowly as the Android 2.2 device. 5fps

6. Chrome (linux) worked great, and was the platform I was developing on. 30fps (max)

I was also using the clip() method to ensure the text didn’t go outside of the wheel, but this heavily impacted performance. So instead I just chopped the text manually and performance doubled.

I realise HTML5 is new, but I’m really hoping all browsers will start to support it consistently and across the board. I’d hate to start writing large blocks of code to cope with all the browser quirks.

Also, thanks to jQuery, TinySort and ExplorerCanvas (which I still haven’t made work).

Update: Soon to come, the ability to find your own lunch places, as well as integration with foursquare so you can see how popular the venues are with your friends.