Tutorial 1: easy explanation of the trick at the heart of the floorplans

My whole floorplan model is based on one simple trick in SVG

My floorplans all rely on the fact that, in an SVG (Scalable Vector Graphics) file, you can change the image in real-time based on simple programming logic.  Importantly, you can add and hide elements from display.

I have put a simple example of a floorplan here to explain how this works.

I created my SVG file using Photoshop, and then opened it in a text editor (Notepad ++ in my case).

All the instructions needed to draw the image onto the screen are stored inside the file, between the tags <svg> and </svg>

So, I start adding instructions of my own.

First, I add a marker pin to indicate 'Collection A':

<g id="myPin" transform="rotate(330)">
<image x="55" y="120" width="150" height="150" xlink:href="pulsing-pin.svg" />
</g>

Then, I immediately use javascript to hide the pin:

document.getElementById("myPin").style.visibility = "hidden";

Then, also in javascript, I then look to see if there are any parameters appended to the URL.

This example works on the parameter 'show=a':

http://users.sussex.ac.uk/~alfi1/tutorial/sample-floorplan.svg?show=a

If the parameter is 'a', I simply unhide the marker pin inside the SVG:

var split_it_up = window.location.search.split('=');
var showMe = split_it_up[1];
// Collection A: unhide the pin if required
if (showMe == 'a') {
document.getElementById("myPin").style.visibility = "visible";
}

So, in this example, this form of the URL will not show a marker pin:

http://users.sussex.ac.uk/~alfi1/tutorial/sample-floorplan.svg

, but this one will:

http://users.sussex.ac.uk/~alfi1/tutorial/sample-floorplan.svg?show=a

Here is a quick screencast walkthough of the code for this tutorial.

The code for sample_floorplan.svg can be found on my Github.