Flex: SPARQL Browser – Flex based dbPedia Semantic Web Explorer

SPARQL Explorer is an application which is a front end for the dbPedia SPARQL endpoint.

For the best explanation of what dbPedia is you should go to their website. I quote:

“DBpedia is a community effort to extract structured information from Wikipedia and to make this information available on the Web. DBpedia allows you to ask sophisticated queries against Wikipedia and to link other datasets on the Web to Wikipedia data.”

It is a Semantic Web of information linked together using RDF. The dataset available ranges from Flikr to Cyc.

The root of the idea for this application came from Slashdot. I came across this article which got me intrigued. I had a look at the dbPedia website and I noticed that there was an online application called SPARQL Explorer. A closer look using the Firebug ‘Net’ view for this web application and I saw that it was issuing queries to here. Some more digging and there is a definition of the protocol for sending SPARQL queries to the endpoint here.

Hmmm…I thought..I can issue a query and get results back in JSON or XML..that gives me an idea. What if I used the code for the Carrot2 browser to visualise queries from dbPedia? It might not only look cool but I could use it to test queries for any mashup I made against dbPedia.

I booted up Flex Builder 2 and came up with this. It issues queries using the same namespaces (read your SPARQL documentation folks) as SPARQL Explorer. The default query which it uses on startup is the same one from here. I hard coded it into the application as a first example. The query is inside a TextArea control so you can change it. Try some of the other queries on this page (section 1.3). The application has been set to fetch the results in XML form. I have nothing against the alternative of JSON except that it’s easier to parse XML data in Flex using E4X. E4X is built in to Flex and I can’t underestimate how handy it is. Mike Chambers has a tutorial on Flex and JSON here but as I say I’m not using it. Obligatory screenshot…(right click and view image for the full view).

Sample App

You can get the FB2 (NOT FB3) source code for this application here.

So I had an application which was able to send the same SPARQL queries as SPARQL Explorer. What now? My thinking was that I could adapt the code from the Carrot2 viewer to visiualise the query results so that’s what I did.

Sample App

(right click and view image for the full view).

You can access the application here. [UPDATE: This seems to be throwing an occasional error when it’s fetching the result-set for some reason. Keep trying and it will eventually work 🙁 I will investigate].

Again, try some of the other queries on this page (section 1.3).

This uses flexvizgraphlib visualisation component. The graphs are built by generating GML from the query results data.

The SPARQL queries issued use the same namespace PREFIX values as the test application and also SPARQL Explorer. An additional feature would be the ability to define these and maybe store them in the Flash player storage area (the same one used for the auto complete info from my CTV application). That way they would be there as you defined them each time you came back to the browser app. I have come to see this as a bit of an oversight I should probably address. The SPARQL prefix definitions are:


owl: www.w3.org/2002/07/owl#
xsd: www.w3.org/2001/XMLSchema#
rdfs: www.w3.org/2000/01/rdf-schema#
rdf: www.w3.org/1999/02/22-rdf-syntax-ns#
foaf: xmlns.com/foaf/0.1 
dc: purl.org/dc/elements/1.1 
dbpedia2: dbpedia.org/property
dbpedia: dbpedia.org
skos: www.w3.org/2004/02/skos/core#

An interesting twist to this application is that I had to write a proxy script which resides on the server to serve up the requested xml from queries. The application in it’s raw form cannot access the SPARQL endpoint because of course you cannot issue an HTTPService request straight from your application to a remote url. I will post some more about this and go into details.

Some of the main features of the browser app are:

– Geared towards dbPedia

– Able to auto limit the resut size

– The resulting XML is displayed in the XML tab.

– You can view the result of clicking on a URI in the Browse tab using my IFrame control. Pretty cool!!

– Result nodes which share URI’s are linked on the graph so you can see what results are related (you can’t see this on a bog standard table output). If you look at the screenshot above you can see that default query demonstrates this. A blue star node indicates a URI, a blue circle a result and a gray star a binding.

I will publish the source as soon as I have tidied it up.

Flex: flexTraffic – CCTV Images

I notice that Transport For London have upgraded their CCTV traffic ‘Jam Cam’ camera resolution. The quality of the images provided now is amazing. Spy on your friends and family.

Image here

flexTraffic is here.

There is a bug under IE where the zoomin/zoomout icons on the camera popup are not aligned correctly. Bear with me.

Map example coming soon. I am going to use the OSM slippy map inside an IFrame to demonstrate the resizing code. Just hope it was worth the wait.

Flex: IFrame Resizing

In place of a demo I thought I would try and have another stab at describing how to resize the contents of your IFrame to match the size the IFrame itself.

Firstly have a look at the communications demo mentioned in the previous post. Once you understand what’s going on between the page and the Flex app through FABridge this will all make more sense.

The trick is that you want to pass the width and height of your Flex IFrame to the hosted html page and get it to resize it’s contents accordingly. You must place your contents inside an enclosing named ‘div’ which will be resized. Bear in mind I have lifted some of this code from flexTraffic.

1) Add a resize event handler to your IFrame


mapView.addEventListener(ResizeEvent.RESIZE, onResize);

Where mapView is my IFrame instance.

The onResize function looks like this:


private function onResize(event:Event):void
{
    __controller.onResize();
}

2) In my mapController class (the _controller ref in the previous snippet) I have a handler:


public function onResize():void
{
    var ev:ResizeFrameEvent = new ResizeFrameEvent(map.width, map.height); 
    this.dispatchEvent(ev);
}

The ResizeFrameEvent is a bog standard Flex event i.e.


import flash.events.Event;

public class ResizeFrameEvent extends Event
{
	public static const EVENT_RESIZE_FRAME:String = "ResizeFrameEvent"		
	
	public var width:Number;
	public var height:Number;
		
	public function ResizeFrameEvent(width:Number, height:Number):void
	{
		super (EVENT_RESIZE_FRAME, true);
			
		this.width = width;
		this.height = height;
	}
}

The controller maintains a reference to the IFrame object i.e.


[Bindable] public var map:IFrame;

This is setup when the controller is created but basically it’s just a variable which points to the IFrame which holds the map.

You will need to examine the comms demo but what is happening is that the html page is registering an event handler with the Flex app through FABridge. When the event is triggered it’s payload is the new width and height of the Flex IFrame. NOTE that FABridge is automatically generating the functions “getHeight” and “getWidth” these aren’t defined in the ResizeFrameEvent code shown above.

All the following bits of code are javascript.


function load()
{
    this.parent.FABridge.addInitializationCallback("flash", function()
	{
	    var flexApp = parent.FABridge.flash.root();
	    
	    // ---------------------------------------------------------------
	    // Register event handler(s)
	    // ---------------------------------------------------------------
	    flexApp.addEventListener("ResizeFrameEvent", function(event) 
                  {resizeFrame(event.getWidth()-self.offset,
                                    event.getHeight()-self.offset)});
	});
}

Where ‘offset’ is a value which is different for each browser:


// Offset from the edge of the frame. Is more for IE than other browsers.
if (this.IS_IE)
{
   this.offset = 35;
}
else
{
    this.offset = 20;
}

3) You have an enclosing ‘div’ into which your html content is placed and it gets resized by a javscript function.

The javascript resize function takes the width and height and applies it to your target div (in my case it’s called “map)


resizeFrame = function(width, height)
{
    try
    {
        // Resize the frame
    	var mapDiv = document.getElementById("map");
    	mapDiv.style.width = width+"px";
    	mapDiv.style.height = height+"px";
    }
    catch(e)
    {
    	alert(e);
    }
}	

Phew..bit of a palaver and no mistake but it works a treat.

I can’t release the flexTraffic code as great big chunks of it are used in a commercial application particularly the map bit. Since this issue is causing people grief I will try and create a simple demo.

Flex: IFrame comms demo update

IFrameCommTest is an updated version of my original Flex/HTML communications demo.

I have modified it to be standalone so you no longer need to deploy it on a Web Server to work.

To recap:

Data is passed to the page using a Flex Event. The page registers an event handler through FABridge for the DirectionEvent. When the application creates and dispatches the event it is received along with the attached data. Note how FABridge creates the getter functions from the public member variable names ‘toValue’ and ‘fromValue’.

Data is received from the page by calling a function defined in the application from the javascript. Note that the IFrame has to be hidden when the alert box is displayed otherwise it cannot receive focus to close (try it out by commenting out the line to reset the visibility).

The demo is here. Right click to see the source code.

Full zipped project here.

Flex: Modest Maps CCTV Demo v1.0

Here is a modified version of my original demo. This takes the BBC Jam Cam image feed and displays them using Modest Maps.

Sample App

Simple demo here.

Source code here.

The original lat/lng positions were supplied from an early Google Maps demo by someone. The demo has long gone so I can’t give credit to the author but I believe the positions are pretty accurate.

Right click on the demo to view the source.

This uses Jim Hayes excellent image tooltip here. Jim based this on work from Rich Tretola here.

You can follow any discussion about this here.

Flex: Modest Maps Demo – v1.1

I have updated the simple Flex Modest Maps demo. The new version defines a dictionary for marker icon assets and looks up the appropriate icon based on severity. The EventMarker class has been extended to take an icon reference as a parameter.

Sample App

When a traffic event is parsed from the xml file it’s severity is used by the asset lookup dictionary to return the appropriate icon and this is passed to the marker when it is instantiated.

Simple demo here.

Source code here.

Right click on the demo to view the source. This Modest Maps bundles source also includes the fix for deleting markers.

Flex: Degrafa demo update

I have updated the ‘Jess’ demo to use a higher vector count image. There are 103 vectors in the new image. You can adust the image in both the X and Y directions as well.

Sample App

To recap, I have converted an original jpg image to an SVG vectorised representation using Vector Magic. The SVG is parsed by a Flex application and the Degrafa mxml which represents the image is generated (with hooks for the x and y scaling). This is then pasted into a Degrafa ‘Surface’ which is compiled into this Flex demo application.

Update
Here is the source code. This is a Flexbuilder2 project.

The process of turning your image into a degrafa surface is as follows:

1) Convert your target image into an SVG file using vector magic. Save it.

2) Open the SVG up in a text editor of your choice. Copy the svg definitions into the ‘svgData’ part of the XML definition up at the top of the ‘SVG2Degrafa.mxml’ file. I can’t find my original image so the best way is to examine the Jess data and compare the start of this to what you have in your SVG file.

3) Set a breakpoint on the lines where the debug statements output the fills and paths i.e.

trace(mxmlFills);
trace(mxmlPaths);

Copy the output of these into your text editor.

Abort the application.

4) Take the fills and paths and paste them into the relevant section of the ‘TestSurface.mxml’ file. Recompile and run. If all goes well you should see your image come up in all it’s glory on the test application.

I apologise for the clunky nature of this process. The parser is the important part and that seems to work okay as long as the SVG is straightforward.

If you automate this process then I would love to hear about it.

Flex: Vector Magic to Degrafa Example

My Sunday afternoon task was to take the promise of this post on the Degrafa website and put it into practise. The target was to take a source jpeg, convert it to SVG and then parse the SVG to generate Degrafa mxml which would match the original image.

This is a picture of my cat ‘Jess’ put through Vector Magic. Vector Magic is able to generate an SVG version of the vectorised image. The SVG file is essentially an XML file which can be parsed for the relevant colour and vector data in the usual way with Flex and E4X. As a quick and dirty test I took the generated SGV and pasted it directly into a AS3 XML variable.

Note the low conversion setting. A high number of vectors (and this is not an exact science remember) would cause FlexBuilder to sieze up. Not sure if this is a memory issue but is seemed happier with a low count so I left it at that because I wanted to get something working today.

Vector Magic

The XML variable is parsed with E4X and the Degrafa mxml is generated from the resulting data. Parsing the xml was not particulary onerous. Once generated the mxml was pasted into a Degrafa ‘Surface’ (fills and geometry paths) and the application compiled.

The final app looks like this. You can use the slider to scale the vector image up and down. As a vector image note that it is drawn exactly the same at each scale level. Nice.

Sample App

You can get to it here. Please note this is a proof of concept only. I am toying with making it onto something a bit more polished and submitting it to the Degrafa Derby so no code at the moment folks, sorry. Nothing stopping anyone else doing the same thing.

Update #1
Here is a link to a higher vector count version of the demo. This also lets you scale in both x and y directions seperately, here. There are 103 vectors in this image.

Update #2
Here is the source code. This is a Flexbuilder2 project.

The process of turning your image into a degrafa surface is as follows:

1) Convert your target image into an SVG file using vector magic. Save it.

2) Open the SVG up in a text editor of your choice. Copy the svg definitions into the ‘svgData’ part of the XML definition up at the top of the ‘SVG2Degrafa.mxml’ file. I can’t find my original image so the best way is to examine the Jess data and compare the start of this to what you have in your SVG file.

3) Set a breakpoint on the lines where the debug statements output the fills and paths i.e.

trace(mxmlFills);
trace(mxmlPaths);

Copy the output of these into your text editor.

Abort the application.

4) Take the fills and paths and paste them into the relevant section of the ‘TestSurface.mxml’ file. Recompile and run. If all goes well you should see your image come up in all it’s glory on the test application.

I apologise for the clunky nature of this process. The parser is the important part and that seems to work okay as long as the SVG is straightforward.

If you automate this process then I would love to hear about it.