Prefuse Flare is a visualisation library for AS3.
This is a demo I have been cobbling together for about a week now. Right click to examine the source code.
I am extremely impressed at how well designed and implemented the Flare library is. There are, however, a few problems.
The edges sometimes get left behind when dragging the graph. I would like to get to the bottom of this as it’s a bit of a showstopper.
The DataSprite class which is a base class for the graph nodes always calls it’s renderer in the constructor. You can reassign the node renderer when you build the graph (to say use images instead, see below) but it’s too late as the node will have draw it’s default shape.
There are also a few things I have added.
– Modified Button class with the ability to anchor it’s position and display tooltip text.
– EdgeLabelLayout ‘operator’ class which keeps EdgeLabel objects positioned at the mid-point of the graph edges.
– ShapePalette and ImageRenderer classes to implement rendering PNGs on the nodes. I have left the functionality switched-out for now as the library code always renders the default node shape regardless if you plug in a different node renderer.
This is a bit of a try-out to see if I could reimplement the Social Graph Browser with a different graph component. I really like the Flare library and hope to use it more.
The issue with the DragControl has been resolved. You can pass in a predefined filter function to limit the items which can be selected:
Right-click to view updated source.
I have created an AIR version of this demo which uses the latest version of the Flare library. All of the issues in this original demo have been fixed. Go here.
This now has added ‘favicon’ goodness!
After all the graft required to add support for 4,8 and 24bpp bitmap types to the flexlib IconLoader class I wasn’t sure if it was going to be worth all the groundwork but I have to say I reckon this looks pretty good.
You can find a full FlexBuilder2 project here.
You can find a full FlexBuilder3 project here.
These are complete the complete projects. If you have FB2 or Fb3 the instructions to get them to run are:
- Unzip the whole project to a directory on your computer.
- Boot up Flexbuilder (2 or 3)
- Right click on the projects view and select ‘Import’.
- Select the ‘Existing projects into workspace’
- Set the root directory to where you unzipped the project. <dir>/social-graph-viewer. You should see the project name’SocialGraphViewer.
- Press ‘Finish’. This will import the whole project which should be ready to run.
Probably the last update I’ll make. I have added the ability to double cllick on a favicon and it will requery the Google API for the supplied URI. I.e. it will perform a search on that node. I wanted to implement back and forward buttons for the queries but I find that I’ve run out of steam. If you want to go back you must select ‘Edges In’, requery where you came from and it should appear as one of the nodes.
There is a whole bunch of stuff I am supposed to be getting on with as regards the IFrame component but I can’t help myself from coming back to this application and tweaking it.
I have now hooked the grid into the visible nodes of the graph so the grid rows represent all the nodes you can see. I have removed the ‘double-click to navigate’ from the node icons and instead you now double click the row in the grid to indicate where you want to navigate to. Remember your original root node is always in the list but if you navigate away from this you should always be able to go back by selecting ‘Edges In’ and double clicking the node you jumped from. As I have said before this interface is pretty experimental and I am just trying out new things. The best ideas should stick.
Some of the favicons for obvious sites like ‘linkedin’ weren’t getting loaded. This was due to a fault in the regular expression used to parse the source url and turn it into one which can fetch the favicon for the site. This was the reason for some of the blank favicons on the end of nodes. The other that some sites use GIF files and not ICO files. Currently GIF files are not handled.
I have made quite a few fixes to this plus I have generated a Flex3 version of the project.
– Graph builder generates all the nodes with relationships then tries to join the primary nodes (those generated from valid urls in the initial query) with a relationship and then as a plain edge. The reason for this was that urls in the query were not appearing on the graph unless there was a proper relationship.
– I have had to modify the base graphing library to fix an irritating bug where the mouse-up wasn’t getting captured when dragging the graph.
– GIF icons will cause the graph builder to attempt to match an appropriate icon for the relationship.
– If you switch the favicon proxy off it will use default icons.
– I am no longer using the socgraph proxy script since Google have deployed a crossdomain.xml file for the endpoint. The switch is still there though.
I should really stop fannying around with this and do some work on the IFrame but I am starting to get bloody minded about this – I will get this working with no errors if it kills me.
– Definitive bug fix for loading icon (for now at least). There should be _no_ more exceptions to do with these anymore.
– Integrated a new edge renderer. This one now indicates the direction of the label relationship. Can’t decide if this looks better or worse than the old one.
– I _think_ the bug where dragging the graph gets stuck is fixed.
I started to bring in some of the other layouts that are available for flexvizgraphlib but there are issues with the rendering of the labels so I had to leave them out for now.
– The autofit seems flaky as to when it gets applied.
– From a large graph, if you make a query with no nodes the old node connectors sometimes ‘ghost’ i.e. they are still there.
– I am seeing occasional query failures. Strangely this never happened with the proxy.
A query with a large number of nodes will cause your browser to come to a standstill. Try focussing your search to ‘Edges In’ or on a particular uri.
The IconLoader is still occasionally throwing errors for parsing icons. As I see them I will try to track them down. If your site causing an exception mail/comment me and I will try and figure out what’s going on.
I am sometimes seeing an exception from the processing of the graph data. Haven’t tracked that one down yet. It happens after a query but before the graph has been drawn.
Nodes which should get the default favicon don’t have anything. I think this is because the favicon is being returned but the bitmap is corrupt or blank. Strange.
This application FaviconGrabber loads a remote icon from a specified url.
This was developed to test out the technique of pulling a favicon from a remote url for display in a Flex application. The application I had in mind was the Social Graph Browser where the favicon for a results urls would be embedded into the graph nodes (where available). I thought that pulling favicon files from a site would be simple to do but it turned out to be a bit of an adventure.
Firstly you can’t use HTTPService to get the icon directly. If you run the app locally it will fetch the data but since the service only deals with xml and text it will throw a ‘decode’ error. I.e the binary data in the icon contains bytes which are not accepted by the service. What’s more if you deploy the request to the web site it will simply throw a security error since this is an illegal type of operation unless the remote site has a crossdomain.xml file.
My final recourse was to write a Python cgi script to fetch the icon and then encode it into Base64. This is an encoding scheme which lets you embed binary data into xml. You can see the script bundled into the source.
Okay, so I had my Base64 encoded data. I can use HTTPService to execute the script and get the data back. Flex has a built in class Base64Decoder which you can use to decode the result of the proxy query. i.e.
var decoder:Base64Decoder = new Base64Decoder(); decoder.decode(encodedData); var rawData:ByteArray = decoder.flush();
Having got the data I realised that I had no means to display it. The ICO format is not a format that AS3 recognises.
A bit of a rummage around the internet and I discovered that flexlib has an IconLoader class which will display ICO format files. The problem is that it will only do it from an embedded resource or local url. It doesn’t take raw data.
This was already starting to become a pain in the backside for what was supposed to be a ‘nice to have’ feature of an application that was pretty esoteric to begin with. Still I soldiered on.
After modifying the IconLoader class to take raw data I got the Facebook icon working. Ah that sweet feeling of success how fleeting it is! The next icon I tried was from google. Didn’t work. Eh! Tracing through the code in debug mode it turned out that IconLoader didn’t support that particular icon format (8 bits per pixel [bpp] as it turns out). In fact all it supports is the easy peasy 32 bits per pixel which handily enough matches the AS3 bitmap format exactly. Since most of the favicons I subsequently looked at were either 8bpp or 4bpp I was well and truly stuffed.
There was nothing for it but to write the code for loading the other icon types into the control. This was a bit of work and I am now on familiar terms with Microsoft bitmap formats. More so than I wanted to be. I will be submitting this code back into flexlib so that others can use it. The extended component is bundled with the source for FaviconGrabber. It now supports 4bpp, 8bpp, 24bpp and of course 32bpp Windows icon formats.
Source code here.
All that and I still haven’t incorporated it on the graph! That’s my next task.
– Fixed bug in loading multiple icons from the same ICO image.
– Altered FaviconGrabber to accept any url. You don’t have to stick ‘favicon.ico’ onto the end. Just put in the url and it will attempt to get the associated favicon.
I have updated the IFrame demos source code to Flexbuilder 3. You can find them on the project page here.
A recent correspondence reminded me that there is a problem with loading local html when developing with Flexbuilder. I haven’t figured out the problem yet but if you use IE as your browser with Flexbuilder then local html doesn’t render. If you deploy it to a web server it works fine, aaargh!
I am thinking that it has to be an IE security setting but after a fair bit of playing around with the settings I am none the wiser. My advice is to use Firefox for now.
You can set the default browser for execution/debugging through the Flexbuilder preferences settings:
Choose Firefox (assuming you have it installed). If you don’t have Firefox installed then I suggest as a web developer you do.
If you are using the IFrame then I would like to hear from you. I know some people have employed it in various ways. If you make general improvement that you think would benefit others then email me and I will include it into the demo sources.
Social Graph Browser
As I don’t have any updates as yet to show I thought it might be worth mentioning that I have been working on this to extend the rendering of the nodes to show ‘favicons’. I thought this would be straightforward but it’s turned out to take more focus than the entire graph browser took to write.. and it’s still not complete. I have 75% of it done but I am finding myself immersed in documentation for icon file formats which was something I hadn’t expected.
As part of this I have created an application called Favicongrabber which demonstrates the technique. It’s not for everybody as it uses a Python script to download the icon and compress it to Base64 which is then decoded on the Flex side (somebody please tell me there is an easier way). I am completely bloody minded at finishing stuff so I hope to have something to show soon which I think is probably going to be of interest to anyone who want to grab images from remote sites using AS3 and in particular ‘favicons’.