Twitternice

Silverlight 2 beta 2
screenshot
source code

GENERAL

Why ?

I wanted to use existing non random/generated data in a visualisation.

Is it useful ?

Not as an Silverlight app but it is as a source code collection of techniques.

What’s with the name ?

erm ... I could not think of anything better :(

What are the red circle things with arms ?

Each circle is a twitter user and each arm is a message sent by that user.
The arms rotate about the Users center and fade out.
If the same user creates another message before the circle fades out another arm is added.
Some eager users can end up with many arms all rotating about their User circle.
Arm length is determined by message length.

What is the rotating thing in the top right corner ?

What is the 'pulse' emanating from the center every now and then ?

The twitter data is received from the public time line http://twitter.com/statuses/public_timeline.xml but this is not accessible to Silverlight so I created a little web service that acts as a proxy, or it reads static xml files in order to simulate the retrieval of twitter data.
Whenever the server is polled for new data the 'pulse' in the middle fires and the 'network activity tracker' starts to spin and will only stop once the data has been retrieved.

What are the collection of red squares at the bottom ?

What are the spinning yellow squares and why do they make the squares they hit yellow ?

These also represent each individual user collected but these never fade or disappear.
The spinning squares are noted replies from new twitter messages to users that have already been captured.
They hit the user associated with the reply and make them yellow.
The more users you have the smaller the squares get, so not to fill up the screen too quickly.

Why can I not click on the URLs that scroll down the screen rapidly and where do they come from ?

Any URLs found in messages are dropped down the screen.
Due to the maximum length of twitter messages most users post mini obsficated URLs and they would be unsafe to visit due to their unknowable destination address.

What is the Red text at the top and why are some words pink or white ?

Random words are displayed from the collected messages.
I was going to do more analysis of these but in the end I just counted their usage, the more frequently used words are made brighter.
So expect to see "I, a ,the, in" etc in white fairly quickly.

Why do I see 'squares' or strange characters instead of letters ?

Twitter is global and many users are from countries not using the Ascii character set.

CODE / TECHNIQUES

where did you get the semi-circle thing for the 'network activity tracker' ?

It was created in InkScape and converted to XAML using the ViewerSVG tool.
By setting the CenterX/Y the 'tracker' appears to go around the white center.
There is a copy of the 'tracker' that always runs but is very dim just to show the app is still running.

How does the center 'pulse' work ?

It uses a RadialGradient with five stops and has two distinct issues.
1. the 'pulse' does not start in the middle, else it would interfere with the center gradient. This actually produces a nice 'firing pulse' effect.
2. the 'pulse' never extends beyond the boundaries of the app this is because the location is given as a value between 0.0 - 1.0.
I get around this by having the black 'wipe out' the gray at the end. When the pulse was white this looked awful and obvious.

How does the 'Random words' wipe effect work ?

I created a elliptical Clip and animated it expanding from the top center.

What’s with the 'User' circles and the way the arms appear to protrude ?

There is a background circle that has the white border then the message arms, also with white borders; finally there is another red circle with no border overlaid above the messages.

There is a lot of dynamic animation how do you recycle objects ?

Originally I walked through the visual tree and removed objects that contained named objects.
But the correct way is to name every root object and the use the FindName and Remove methods.

Anything else ?

The mouse over messages for users and messages have a IsHitTestVisible set to false so that their appearance does not initiate the mouseOut event for the object below them.
Messages are visualised after they are collected form the network, it is important to note that one can not create an anonymous delegate in a loop but instead must attach the required
data to some external list and then handle the processing of the data elsewhere e.g. calling a void function(void) from a looped anonymous delegate.
There is some simple XML to LINQ code for extracting the twitter data.
Examples of;

dynamic rotational animation.
dynamic translation animation (through Canvas.Top and Canvas.Left).
dynamic opacity animation.
dynamic colour changing animation.
elliptical clip animation.
dynamic elliptical scale animation.
dynamic radial gradient stop setting animation.
dynamic object creation/manipulation including Canvas,StoryBoard,Rectangle,Ellipse,DoubleAnimation,TextBlock,ScaleTransform,RotateTransform and others
stackpanel object addition.
ASP.NET webservice calls (WCF calls are treated differently).
dynamic mouse events attaching to dynamic objects.

Any bad stuff ?

No error checking with the proxy web service. ~ now has automated full back to XML static files
Some unnecessary tree walking to find things because at the time I did not realise all objects could be named via object.SetValue(Canvas.NameProperty,"some_unique_name");
Lacking the use of 'styles' which work much like CSS.
In static XML fall back mode all user data has been anonomised including most URLs user names and some messages.

email silverlight (AT) jumpstation.co.uk

more silverlight

root

Disclaimer:
This page is by me for me, if you are not me then please be aware of the following


I am not responsible for anything that works or does not work including files and pages made available at www.jumpstation.co.uk
I am also not responsible for any information(or what you or others do with it) available at www.jumpstation.co.uk

In fact I'm not responsible for anything ever, so there!