/dev/null

Force directed node interface 2

Here’s an example of the force directed node interface that I’ve been talking about. It’s not complete. It’s just a working prototype. You still cannot load project details, but I’m waiting to add that if I decide I want to take this any further.

Since the dimensions of the interface have been reduced to fit in this blog post, things might be a bit small (try zooming in). You can also drag nodes around. Helpful when things get pushed off the screen. Nodes can be opened and closed by clicking on them.

Force directed node interface

I’ve been working on the experimental Flash front-end I spoke about in the last post. The idea is to use a force directed or force based system for displaying categories, keywords, projects and their relationships. I was curious about what kind of user experience that would create.

Here’s a video of the force directed layout interface in action.

So, what is a force directed layout?

It is a method for positioning nodes of a graph in a way that is aesthetically pleasing as well as easy to digest. This is accomplished by creating a simulated physical system where all nodes are like electrically charged particles (Coulomb’s law) and the connections or associations are like springs (Hooke’s law). After running through thousands of iterations, the entire system begins to become stable until all the forces are in somewhat of an equilibrium.

Fig. 1 Interface with only the category and technology nodes expanded.

Fig. 1 is a screenshot of the layout. In this example there are only a few nodes expanded, but it gives you an idea of how things end up looking. There are two base nodes: “Category” and “Technology”. Clicking these returns the appropriate set of subnodes. The association of these subnodes is shown with a line connecting the child and parent node. When clicking on a specific technology keyword or category, that category/keyword subnode expands into another set of nodes which are projects.

Fig. 2 Interface with more nodes expanded

Fig. 2 shows the cross associations between categories and keywords.

So far it’s been a cool and somewhat successful little experiment. I’m not sure it would work as an interface as the node labels overlap too much and when there a lot of cross associations, things don’t look as organized and it’s much harder to read.

I still need to add node collapsing and make it so projects can be viewed. I’ll try to post a working example soon.

PHP5 + JSON + as3corelib = a beautiful thing

I’ve decided to play around with an experimental front end for viewing projects in Flash. Since I OOPified (yes, that’s a technical term) the site and modeled the data, all of my objects can be easily serialized into JSON strings and passed back to the front end. Then using the as3corelib’s JSON classes, I can deserialize those objects and blammo. So much easier than having PHP output XML, then parsing that XML in flash, and then creating objects from… yeah, that sucks.

So I’ve got all of my stuff coming back into Flash in a format that’s really easy to consume and use and did it with very little work. I like that.

If I wanted to pass back a project object to the front end. I would make a request that would execute something like the following in PHP:

$prj = Alien109DAO::getProjectByPageRef($_REQUEST['p']);
$key = Alien109DAO::getKeywordsByProjectId($prj['id']);
$results = ProjectFactory::createProject($prj, $key);
print_r(json_encode($results));

First I get the project from the database. Then I get all of the associated keywords for that project. I then pass both of those results as arguments to my ProjectFactory which is a static class whose primary job is to just return a full Project object. Then the object is serialized, and returned in the response.

In Flash, in my event listener, I simply deserialize the JSON string back into an ActionScript object using the as3corelib’s JSON decoder class.

private function dataLoaded(e:DataReadyEvent):void
{
var projectObject:Object = JSON.decode(e.data);
...

w00t!

Wordpress XML Parsing Error

XML Parsing Error: XML or text declaration not at start of entity

> Warning: MagpieRSS: Failed to parse RSS file. (Reserved XML Name at
> line 3, column 38) in [...]
>
> Warning: Invalid argument supplied for foreach() in [...]

Yesterday it was called to my attention that the RSS parser that was pulling the feed from my blog into my web site was throwing some rather nasty errors. Upon further investigation I discovered that the feed itself was the culprit.

Something was throwing in extra white space before the document declaration in the XML file. Some people have found that old plug-ins or themes can cause this problem. I searched through every PHP file and finally found the issue in my config (wp-conifg.php) file.

I just updated to the latest version of WordPress yesterday and when updating the config with the most recent settings, I accidentally added two empty lines before the opening PHP tag.

Ooops. Thanks to Jared over at ShareBrained Technologies for noticing!

Free web based imaging software

Aviary has recently released another web-based application. Raven, which is still in beta (all of their applications are. that’s so web 2.0!), is a web-based vector editor. Their product suite consists of four applications at the moment:

• Peacock – a visual laboratory
• Raven – vector editor
• Phoenix – image editor
• Toucan – colors watches

Peacock is kinda cool. Image generation is done by patching together generators, effects, controllers and resources. Fun to play with, I must say. Pretty amazing use of Flash. Pretty cool to have this sort of development going out there…

The products, at the moment, are all free to play with. Go check ‘em out: http://aviary.com/

Flash is (or is not) coming to the iPhone

Somewhat of a sore spot for Flash and iPhone developers, the hope that the Flash player would make its way to the iPhone is still very much up for debate. A recent quote from Adobe CEO, Shantanu Narayen, has some left some believing it’s very much on its way and others thinking it’ll never make it.

“It’s a hard technical challenge, and that’s part of the reason Apple and Adobe are collaborating,” [Adobe CEO Shantanu] Narayen told Bloomberg Television at the World Economic Forum in Davos, Switzerland. “The ball is in our court. The onus is on us to deliver.”

Some claim the Flash Player could never be written in a way that would sit well with the ARM processor. The power requirements of running such an app would be too much for a mobile device. Others have said it’s a political/business decision on Apple’s part.

Who knows. I just hope it finally makes its way to the iPhone platform. I think it would open development up to a lot more people that don’t feel like trying to wrap their brain around Objective C. Apple still has very strict control over what applications make it to the iTunes store, so the concern about quality of apps shouldn’t be an issue.

I personally feel that it’s more political than anything else. But, I’m a cynic.

Rewriting the back-end, again…

I’ve decided to rewrite the back end for alien109.com again, taking advantage of OOP in PHP. Man, such a difference. Everything is so much easier to maintain and follow now. Plus, I’ve implemented more of an MVC pattern. Seemed like overkill for such a small site, but proved to be educational, if nothing else.

Site updates!

So I’ve finally updated my web site.
www.alien109.com

• Ported all of the javascript over to jQuery and ditched those ancient JavaScript libraries I’d written years ago
• Implemented some keyword searching on projects so you can see projects based on languages or technologies.
• Reworked the backend so that everything was a little more search engine friendly (url rewritting for prettier urls and hidden javascript calls)
• Added a bunch of new (and old) work into the mix.

Creating a search engine friendly ajax app is a pain in the butt, if it’s an after thought