mrblack.co.uk weblog

I’m no designer. This webpage is perhaps proof of that. However, taking that into account, I have to create webpages with at least some design to them. Notably business apps and admin control areas.

Now in this day and age we all should be using CSS to control layout and typeface definitions, none of that inline stuff too. This however can be a rather tedious and painful business for somebody such as myself.

The problem with this perhaps is that the only help rails give you in the term of CSS is a helper method that creates the html head CSS import and a standard and slightly ugly scaffold.css document. So my overriding issue is that whilst rolling around in Ruby joy, my CSS is gets messy. It ends up in an near unmaintainable heap, laden with IE hacks and unorganised in nature. Grr horrid.

What I really need to do is make some code that I can reuse over and over again.

A CSS FRAMEWORK if you will, which can be extended and reused for each project.

So I’m exploring this right now. There are a few lying around the net, including one by the behemoth that is Yahoo!

Content with style CSS framework - http://www.contentwithstyle.co.uk/Articles/17/
Yahoo! CSS Grids - http://developer.yahoo.com/yui/grids/

Now if Rails could help with its scaffold function, producing something of more than scaffold.css, that would be swell.

I would love to have a single place where all my music and videos are stored rather than having a bunch of stuff hanging around on laptops, PCs and iPods. So I bit the bullet and began Le Grande Media Server project.

First thing I wanted to do was to set up a music server, so this post is basically stage one. Now, as specs go, we all use iTunes at home and I use it at work, so ideally my music should be served to that piece of software. That about it for specs..

The server I’ll be using is my old desktop running a P4, 512mb ram and about 130gig of hard drive space. Of cause I could throw more hard drives in if need be. This is more than enough power for this task, but meh it was just sitting there.

Step 1 : Install Ubuntu
I chose to install the latest beta of Ubuntu, feisty fawn, as I was rather eager but I’m sure all this will work with Dapper Drake. Feisty really is an impressive operating system, much better than the XP it replaces on my old machine, and, thankfully, makes this task relatively simple.

Installation is pretty straight forward, and documented best over at www.ubuntu.com/

Step 2 : Install mt-daapd
iTunes uses Digital Audio Access Protocol (DAAP) to share content. Now this is ideal for us, as some clever chaps have reverse engineered the protocol and made mt-daapd, an open program that uses this protocol to share a media directory to our local network. So in theory our little Linux box can be seen by any copy of iTunes on our local network.

First of all install ID3 tag support (so mt-daapd can read mp3 files)

sudo apt-get install libid3tag0

Then for mt-daap itself. Its best to grab the latest debian package rather than apt-get to be sure of a working copy (iTunes changes so often).

wget http://prdownloads.sourceforge.net/mt-daapd/mt-daapd_0.2.4-1_i386.deb?download

and then install it

sudo dpkg -i mt-daapd_0.2.4-1_i386.deb

Then, once installed, you need to edit /etc/mt-daapd.conf with whatever you use (vi, nano, gedit, I don’t care). Within this file, point the server to your media directory then restart mt-daapd.

sudo /etc/init.d/mt-daapd restart

Now on another machine you should see your share appear in iTunes and will be able to play music! If not, check to see your Ubuntu box has tcp port 3689 and udp port 5959 open and that iTunes is actually listening for shared music.

Thats sorted me and my family out at home. Hurrah.

Step 3: But I wanna listen at work! *throws tantrum*
DAAP was never supposed to work over the internet. There is a way though, and below are instructions on how I did it for a mac. For windows, it will be possible with putty, but I’m not sure how to complete the entire process.

However, for Ubuntu make sure ssh is installed on your server.

sudo apt-get install ssh

Once thats out of the way check to see if port 22 (the ssh port) is open on your Ubuntu box’s firewall (firestarter is a nice tool for this). Now we want to be able to get to this port from outside our network for that on-the-go-music-server-accessness. So set up port 22 to forward to your server on your modem/router.

If all goes well you should be able to type the following on your Mac and get to your Ubuntu server.

ssh your_user_name@your_external_ip

If not, check your router/modem firewall (or that your pipes aren’t clogged) .

Now we want to set up the tunnel between the server and your shinny mac so the music can flow to you as if you were on your home network.

ssh your_user_name@your_external_ip -L 3689:localhost:3689

Once you have put your password in and agreed to accepting keys, the tunnel is now set up. This is not it though, for iTunes to see the share you need to broadcast its presence. To do this I used Network Beacon, which is set up like in this picture.

Once that chap is up and going, you should be able to see your media server in iTunes.

Hope that’s of use. For me its ace, all that music, at work and at home. Bliss.

Reading
I must point out that most of this was thanks to the following so if you are lost visit these.
Matt’s Blog : Setting up mt-daapd on Ubuntu 5.10
Firefly media server
mt-daapd wiki - ssh tunnel
Ubuntu
Firestarter linux firewall
Network Beacon
iTunes

This is great news, you can send a email containing a photo directly to flickr from an O2 phone. This means that my previous work should become redundant. However flickr still doesn’t support the attached text message that you may slap with your photo. In my script I have implemented this, and here is how.

Essentially this is what needs to be done.

1) Use wget as before to grab
http://139.2.165.14/mms2legacy/showMessage2.do?encMmsId= ID NUMBER
2) Run through the downloaded page and look for the line containing the string ‘div style=”color: #000000;” ‘
3) When you get to that line, the next line will be blank, skip through to next line.
4) you are now on the line with the text message on, copy that to a variable.
5) remove the tabs and spaces from before the message text

Now you have the message attached to the photo. I would just add this to the email text, flickr would add this to the photo description. Here is a link to the code I used to extract the message written in php. Sorry for the shitness in code, but it works. I hope this is of use to somebody.

Ok I have the mobile to flickr thing almost sorted, email me if you want to be a tester by the way, O2 UK only (andy DOT shearer AT gmail.com). I will leave that to run for a few weeks before I set up an automated service where people can sign up for it.

A guy on b3ta asked me why did I do this considering flickr has a great mobile upload facility on its mobile site? Well to be honest I should have searched for this sooner, flickr’s mobile site is pretty good. If I hadn’t already made my little work around I would have no doubt used this, but having said that I would point out the clicking of ‘send’ on a picture then selecting the email address is much simpler and quicker than playing around with WAP. Plus later on I might add to it so you can send the photo to multiple address, not just to flickr.

Leading on from this post, I have implemented a way of sending an email from my phone to Flickr containing a full sized image. With thanks to James at Purple Cloud (my host) who installed a newer version of wget for me, everything is now working a-ok. I can now send an email to a pop3 account (based here at mrblack.co.uk) and every minute that account is checked, if everything is fine the email is read, photo extracted, and sent on to flickr as a proper email with a full sized photo attached. Yay!

I am currently thinking about making this available for everybody on O2 who wants to send full sized photos emails from their phone to people or to flickr directly rather than sending them an O2 advert. I might also see if I can set this up for any other carriers who fail to offer full sized email photo attachments. As for the code, I will make it available when I have fully tested the system, and cleaned up all the filthy comments.

My flickr stream

Ok let me start of with a little story. Once upon a time Andy brought a really nice phone, it had a great little camera and was capable of sending MMS, SMS and even emails. Andy was really happy with his phone, he even went to go see Green Day, took some photos and then posted them straight to flickr via email! Andy was the talk of the town, he was super cool, totally fab and now with his new toy, a touch bit sexier.

But then out of the blue 02 changed something which made Andy a very unhappy bunny. 02 in their wisdom had decided to change the way photos were sent by email from a phone. Now instead of attaching the photo file (a happy little .Jpeg) to a fairly blank email, they in its place sent an email in HTML format with no attachments.

Why was (is) Andy so upset with this? Well doing this upset(s) Andy for a few reasons

When Andy found out about this he was very upset. He cried for a little bit, found somebody to hug, cried a little more but then he decided to write an email to the nasty O2 people that had brought him so much anguish. The email Andy sent basically stated the problems above, pushing the issues of possible breaches in privacy and the fact that he is not actually sending a photo by email. This was Friday, Andy wasn’t expecting anything to be done till next week sometime, so you would think he would have to wait to see the result. Oh, then you don’t know Andy. With a pack of Jaffa cakes, beer, tea and Diet Pepsi, Andy took on 02’s crappy new email in an attempt to make a work around.

Ok, I am going to change and start speaking in the first person to explain what is going on. I am attempting on my webserver to set up an email account which effectively receives this new shitty O2 email, strips it down, rips out the information, finds and downloads the full sized image from 02’s site and then email it on to flickr. No small feat. I have however found out how O2’s end work, and if you interested in code and how this works, please read on, if not, I would run away.

First thing I needed was to connect to an email account via pop3 which I would send the email to from my swanky phone. I am going to skip on how to get a script to connect to a pop3 server, and then go through a new email line by line. Although this is complicated, there are some fine examples around. For what it’s worth I just grabbed my trusty wordpress installation and read through the code of wp-mail.php. I then took out all the bits I didn’t need and was left with a script which looks at a pop3 account for a message, if it finds one, it runs through it line by line to make it ready for a post or with a little alteration in our case, an email.

After that we need to get the URL of the full sized photo stored at O2’s crappy site. To get this URL from the new O2’s photo email there are 2 values that you need to extract from the email message source. These two values are the mmsId and encmmsId. The emcmmsId can be found in the URL labelled “View Message� if you so happen to view the vile email. Here are some fun facts about it

Ok that’s the first part. Now we need the mmsId. This took me ages to find, but the mmsId is the file name of the image displayed in the email, but without the .jpg extension. Again here are some facts.

Now with these 2 numbers you can grab the actual full sized photo. O2 store these images in some crazy database, so you can’t get a direct link to it like http://www.o2.com/myacephoto.jpg. Oh no, to get the full sized image of our particular example we would use a URL like this

http://139.2.165.14/mms2legacy/downloadMedia2.d……..

As you might have spotted we have both Id numbers in there, encMmsId and mmsId. In front of those is what I think is a static IP and script which accept these two variables and another called selectedItem. selectedItem refers to the webpage that we were supposed to visit to get the full sized image, it simply refers to which image is selected to download. So if the message sent from our phone contained more than one picture, this would increment by one, I would presume (not tested).

Now that is ace, but how on earth do I get a script to automate downloading this image. Well on a Linux/unix/*nix based box you should have wget installed. If you do and its up to date you can run this command. (slightly phpified)

wget -O /path/to/your/photo/cache/' . $encMmsId . '.jpg --post-data=encMmsId=' . $encMmsId . '&mmsId=' . $mmsId . '&selectedItem=1 http://139.2.165.14/mms2legacy/downloadMedia2.do?

In php you would wrap all of this within the system() command. If you put this in a loop where it checks through each email, you should be able to collect a nice cache of images which you could then email on using commands such as php’s mail() method.

Unfortunately, this is where I stop as I have asked my webhosts to upgrade wget to something which can handle the –post-data flag. However, it should give anybody a head start into this sort of thing. For people using Orange phones, I think you have the same problem but I have yet to investigate it. As for other networks I might get round to you :)

Anyhow, as for now I hope this is of use to somebody. I would actually love it if flickr themselves put it inside their system if O2 don’t see sense and revert back to emailing people their photos. I shouldn’t have to do this, O2 should see google, amazon, flickr and the BBC opening up their API’s to random people, not for short term profit but to encourage people to play around with new technology. I fear O2 have done this to make people think twice about emailing photos, in an effort to push people into MMSing to other phones, something which costs the earth in the UK at least.

*the title might be a slight take on a film