computers should be less friendly

I’ve always thought it would be interesting for people to see what a programmer goes through when creating a new system.  Telling the world where you are getting stuck so others can learn from and/or laugh at your mistakes.  It might also be interesting for people who create languages or frameworks to see a blow by blow of someone learning a new programming language / toolkit — how many times do you get to see that!

I also have wanted to build a Twitter ( hanger-on ) application that shows you your web friends and their friends and their friends and so on — think 6 Degrees of Kevin Bacon but, for Twitter.  I’ve thought about the visualizations for this and feel that Flex/Flash is the only way to go, which I luckily no nothing about!  So, tonight is the first episode of stuff I wish I knew about Flex while building 7DegreesOfTwitter.

I will only be working on this at night and on the weekends so, progress will be slow and sometimes painful.  I may even try and post nightly “builds” somewhere so people can see what I’m up to help give me pointers where required.

A Plan

Here is what i think the visualization should look like ( yes this was done in MS Paint, hopefully I am a better programmer then artist ):

Basically, you should see all your friends circled around your portrait then as you click on a friend it will shift the view so that your friend is now the focus on the screen, and you can move along your web of friends exploring other people’s connection.  Obviously, this whole visualization is rife with opportunity.  Adding some cool like the Mac doc magnify feature would be pretty cool, or even maybe have the whole thing look like a horizon instead of a flat web of people.

First Day 

First thing to do is get two chunks of data out of Twitter using the Twitter API.  The first bit is your list of friends:

    <mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            public var myInfo:XML;
            public var friends:XML;
            private function onFriendsResult(result:ResultEvent):void{
                friends = XML(result.result);
            }
            private function onFriendsFault(result:FaultEvent):void{
                var error:XML;
                error = XML(result.fault);
            }

        ]]>

    </mx:Script>

    <mx:HTTPService id="friendsService"
        url="http://twitter.com/statuses/friends/dan_mcweeney.xml"
        resultFormat="e4x"
        result="onFriendsResult(event)"
        fault="onFriendsFault(event)"/>

So basically, this is all it takes in Flex to get data from a web service and parse it into an XML document that is easily traversable.  If you don’t know what E4X is neither did I — go read the Wikipedia entry about E4X then have a look at the W3Schools Tutorial on E4X.  Just remember it’s actually a lot easier then you think, no big scary XSLTs here.  The next thing to do was the other piece of data I need, in this case it’s your mug shot associated with your Twitter account:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="friendsService.send()">
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            public var myInfo:XML;
            public var friends:XML;
            private function onFriendsResult(result:ResultEvent):void{
                friends = XML(result.result);
                myInfoService.send();
            }
            private function onFriendsFault(result:FaultEvent):void{
                var error:XML;
                error = XML(result.fault);
            }

            private function onMyInfoServiceResult(result:ResultEvent):void{
                myInfo = XML(result.result);
                myMug.source = myInfo.profile_image_url;
            }
            private function onMyInfoServiceFailed(result:FaultEvent):void{
                var error:XML;
                error = XML(result.fault);
            }
        ]]>

    </mx:Script>
    <mx:HTTPService id="friendsService"
                    url="http://twitter.com/statuses/friends/dan_mcweeney.xml"
                    resultFormat="e4x"
                    result="onFriendsResult(event)"
                    fault="onFriendsFault(event)"/>
    <mx:HTTPService id="myInfoService"
                    url="http://twitter.com/users/show/dan_mcweeney.xml"
                    resultFormat="e4x"
                    result="onMyInfoServiceResult(event)"
                    fault="onMyInfoServiceFailed(event)"/>
    <mx:Image id="myMug" source="" horizontalCenter="0" verticalCenter="0"
                     width="48" height="48"/>

</mx:Application>

Major additions here are a a new HTTPService to grab my information and also a small slight of hand to keep the two asynchronous services at least somewhat in sync.  In the onFriendsResult function I call the next HTTPService.  This is an easy way to create simple dependencies among asynchronous requests.

The Layout

I started tonight to try and write this myself — and I soon realized I was probably in over my head.  I got up to the point where I am able to calculate the correct radius for a circle to easily hold all of the objects and then where their positions should be in radians around the circle.  The thought of having to write this in Flex made me want to jump out a window, so I thought to myself — maybe someone has already done this. Just then the Red Sea was parted and the open source gods smiled upon me.  Circle Layout was created by Sho Kuwamoto, an Adobe Engineer, it does exactly what I want in terms of layout and some other snazzy stuff with drag and drop.  Here is a demo of the Circle Layout for Flex just press the “Change to Circle” button to see what I am talking about.  It’s a pretty impressive bit of code for my needs though I need to get rid of the drag and drop bits but, for right now I will leave all that in.

So here is the the running code for Iteration 1 of the 7DegreesOfTwitter.  If you want the source just right-click the movie and use the “View Source” menu option.  When asked for a username and password just use your Twitter Log-in info.

Current issues:

• Only works for me!
• No clue what will happen when you have lots of friends

Next time?

• Create a hover over for the images to at least show the name
• Come up with a way of Clicking on a person then moving to their “circle”

If you find more issues in the code just post a comment — if I’m doing something totally silly please tell me that too!

Once again big thanks to Sho Kuwamoto for saving me having to do any real programming

This entry was posted on Tuesday, June 12th, 2007 at 11:45 pm and is filed under Flex, UI. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.