In my last post about connectable nodes in Silverlight, my code had an annoying problem where if you moved the mouse too quickly the selected shape would fall behind and stop moving.  I corrected this problem by moving the move logic to the containing Page rather than keep it inside the shape user control.  The containing Page is aware of mouse movement outside of each shape, and therefore can control shape movement when the mouse speeds ahead outside of a shape while dragging it around. 

New code and example app are available:

Source: nodeconnect2.zip

Example App: http://www.kindohm.com/sl/nodeconnect/testpage.html

I saw this image advertisement on Facebook yesterday:

I wish I would have come up with the idea for the business behind this marketing campaign.  Get people to ask you how to get in shape like an athlete.  Charge $50 and send them an informational packet consisting of a Post-It note with these instructions:

1. Eat right
2. Quit your day job and exercise and train all day

Why am I not a millionaire yet?

This week I finished constructing and hanging six broadband acoustic absorption panels in the studio.  The purpose of these panels is to improve the overall quality of sound in the studio by dampening problematic frequencies (frequencies that the room naturally amplifies).  I have a small studio with parallel walls - which in the acoustic engineer's world is a recipe for disaster!  You can buy professional products to address these problems, or you can build your own if you're slightly handy.  In the brief research I did, you can buy a panel similar to the ones I made for about $250.  My entire project (six panels) was less than $200. 

For the panel design, I basically followed a design I found on johnlsayers.com: http://www.johnlsayers.com/phpBB2/viewtopic.php?t=10297&highlight=bass+trap.  It's a very simple design:

1. Lightweight 1x3 frame
2. 2' x 4' Owens Corning 703 fiberglass insulation panel
3. Cover with fabric
4. Picture frame hooks

The Owens Corning 700-series insulation is actually in the form of a rigid panel.  You can read up on it here: http://owenscorning.com/comminsul/products.asp?product=1&system=80.  I couldn't find a local dealer in the Twin Cities area so I bought it online from ATS Acoustics: http://www.atsacoustics.com/item--Owens-Corning-703-Case-of-6--1004.html.  It's pretty neat stuff and really is what makes these panels so easy to make on your own.

For the frame, it was just a matter of measuring, cutting, gluing, and stapling.  I chose to glue the joints because the boards were thin (only 1x3's) and there wasn't a lot of surface area for screws.  The glued joints are reinforced with staples:

After gluing and stapling the frames, I needed to attach the insulation to them.  I simply did this with some 3M 45 General Purpose Spray Adhesive.  I sprayed both the frame and the insulation and the bond was a lot stronger than I anticipated.  There's no way you could detach the insulation from the frame without ripping the insulation.  After spraying and attaching all of the frames to the insulation, I just stacked them so that they could dry with a little bit of pressure:

Next, Nikki helped me cover the panels with fabric.  The typical fabric you see with these homemade panels is burlap, but Nikki convinced me to find something a little less rugged.  The fabric stores we went to were all a bit expensive.  We ended up finding about 33 yards of a really nice looking fabric at Wal Mart for $1/yard. 

Nikki helped me measure and attach the fabric to the panels.  This step was actually a lot more time consuming than I expected as folding the corners so that they look neat took some care.  I used staples to attach the fabric to the back of the wood frame:

Next, I added some hardware to each panel so that I could mount them on the studio walls.  I decided to use standard D Ring picture hooks and just screwed them onto the backs of the panels.  The D Rings are strong enough to hold large pictures or paintings. 

I ruled out using picture wire because I felt that it would be too difficult to place each panel at the same height on the walls.  Each panel would have to have an equal amount of wire, and that seemed like an impossible task.  Instead I just used a level and hung each D Ring on a screw in the wall.  I used drywall anchors for support in the walls:

Now I have six acoustic panels in the studio:

So what does the room sound like now?  It's better, but not perfect.  There is still some room reverberation but it is significantly better than it used to be.  I think I may build some more panels in the future, or potentially some larger "wedge" bass traps in the corners.  However, I'm at the point right now where I want to use my studio and stop working on it.  I think I'll try out the room first and then revisit any acoustic improvements later.

This is strictly just a UI concept at this point, but it's a very simple Silverlight implementation of drawing some shapes on the screen, connecting them with lines, then clicking and dragging the shapes around while maintaining the line connections. 

Source Code: nodeconnect2.zip [552 kb]

Example App: http://kindohm.com/sl/NodeConnect/TestPage.html

It's hard to explain the highlights with only small code snippets (I don't want to paste the entire source code into this post), but here is a shot at some of the key features...

The nodes/shapes were implemented as Silverlight user controls. Clicking and dragging was simply handled on the user control's MouseMove event in combination with up/down state of the left mouse button.  The MoveNode method does the dirty work:

Point lastPoint;

//declared as a XAML element...
TranslateTransform translation;

void MoveNode(Point currentPosition)
{
  double deltaX = currentPosition.X - this.lastPoint.X;
  double deltaY = currentPosition.Y - this.lastPoint.Y;
  this.translation.X = this.translation.X + deltaX;
  this.translation.Y = this.translation.Y + deltaY;  
  this.lastPoint = position;
}

As for drawing and re-drawing the lines, I created a Connection class that is just a data structure that describes a Line and where it starts from. To update the lines when a shape is moved, I just iterate through a Dictionary that stores a Connection for each control that the moved control is connected to. The Dictionary is maintained for all controls so that each control is aware of everything it is connected to:

public class NodeControl
{

...

  void MoveConnections()
  {
    foreach (NodeControl key in this.connections.Keys)
    {
      Connection connection = this.connections[key];
      Point newPosition = 
        NodeControl.GetCoordinatesForControl(this);
      Line line = connection.Line;
  
      //IsPrimary determines if this 
      //control holds the start or end
      //of the line
      if (connection.IsPrimary)
      {
        line.X1 = newPosition.X;
        line.Y1 = newPosition.Y;
      }
      else
      {
        line.X2 = newPosition.X;
        line.Y2 = newPosition.Y;
      }                
    }
  }

...

}

Oh the data visualization possibilities...

Enjoy.

Deep-fried, salty goodness at the Minnesota State Fair:

The term "Mall Rat" is a bit dated, but I've discovered a new breed: Target Rats.  What exactly is a Target Rat?  A Target Rat is the same as a Mall Rat, except Target Rats live in outer-ring suburbs where there are no malls.  Instead, Target Rats hang out at Target. 

Ha ha ha.  Very funny Hodnick.  Very clever. 

I'm dead serious - the Target Rat phenomena is in full force in Chaska, MN. 

Yesterday, I observed a variety of Target Rats at the Chaska Super Target:

1. Three teenagers talking and "hanging out" in the produce section.
2. Two teenagers sitting and gossiping on a bench near the cash registers.
3. A large group of teenagers eating at Food Avenue (Target's in-store eatery).
4. A small group of teenagers convening and talking outside the entrance (green side).

None of the kids looked like they were just passing through and paused to stop and talk to a friend who they happened to see.  It also seemed very unlikely that this large quantity of teenagers just happened to be there with their parents and they all started mingling and hanging out at the store since they were already there.    Instead, I believe that Target has become a prioritized destination among bored adolescents.  It's just too far to drive to the closest mall. 

I think Target could capitalize on this.  I smell a money-maker.  Any entrepreneurs out there?

Download Source Code: SilverlightRadialGraph.zip [582 KB]

Recently I've been looking into some challenges with data visualization - particularly with viewing relationships between a large number of entities.  Social Networking is a classic example.  A great example of how to visualize a large network of "friends" on Facebook is to use the Nexus application (developed by Ivan Kozik):

Click to enlarge

This is very close to what I know as a "radial graph".  I couldn't find a good definition of a radial graph anywhere, but here is an academic publication that at least describes the concept: http://bailando.sims.berkeley.edu/papers/infovis01.htm

I decided to try and implement this type of radial graph using Silverlight.  Given a set of entities that are connected to each other, I figured it should be easy enough to come up with a basic algorithm to put this on a screen.

The general idea was to start with an initial entity and then compute and render its first "ring" of connections.  Then for each entity in the first ring, find its connections and create a second ring.  Entities can only be added to the graph once, so if an entity in the first ring is a connection of an entity in a fourth ring, the entity in the first ring is not added to a fifth ring. 

I used Silverlight user controls to represent an entity on the screen.  Each user control is placed using basic trigonometry computation and an constant radian increment on each ring for the spacing along the ring.  "Basic" trigonometry computation may be a contradiction in terms, but that's a different topic :)

Here's what it looks like:

The direct connections between each entity are drawn with a line.  When there are a lot of connections, it can be difficult to read or becomes a distraction.  There is a bit of eye candy in there though to help make the connection visualization easier: when you hover over an entity its direct connections are highlighted.  You can see this by looking at the selected (yellow) entity and its connections highlighted in green.

The model relies on a central entity to start with (highlighted in blue).  When you click on another entity, the screen re-draws and the graph re-builds around the selected entity.

I know you're probably looking for code, but I need to clean up some .NET namespaces first in order to protect the innocent :)  Stay tuned for an update...

--UPDATE--

Here is the source code as promised:

Download Source Code: SilverlightRadialGraph.zip [582 KB]

A co-worker showed me Dipity yesterday.  Here's a vanity timeline:

http://www.sharepointmn.com/modig