Tutorial 2 (super-fast): using Bootstrap to make the images responsive to screen size

In order to make sure that my floorplan images are responsive to screen size, I used the Bootstrap framework.

You have to add a few lines to the header of your HTML file, and then you can tap a huge range of design shortcuts all masterminded by someone else.

For instance, to make my floorplan images resize for any screen, I just had to call the image as 'fluid':

<object type="image/svg+xml"  class="img-fluid" height="80%" preserveAspectRatio="xMidYMid meet"  data="http://users.sussex.ac.uk/~alfi1/tutorial/sample-floorplan.svg">

Try resizing my sample image here.

 Using the cleverness of Bootstrap, I saved myself a vast amount of time in all aspects of the design and prototyping, and the end product was much more professional visually than I could ever have created.

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.

Github - the core code

I have put the principal files onto Github:

https://github.com/alfi1/floorplans

These files contain the core functionality behind the system.

Because the code is written for all the University of Sussex classmarks, it will be overly long for any of you wanting to adapt it for your own institutions. It will also be full of repetition, and Sussex-specific bits.

Do not be put off!

I will add some tutorials on how the model works, and include some simplified examples to explain the basic process.

Basically, it is a straightforward model that I should be able to explain succinctly with example files.

Various prototypes: the cutting room floor!

In this version, I wanted to see what the classmarks looked like as solid blocks of colour:

http://wwwnewdev.sussex.ac.uk/library/tim/maps-mobile/librarymap_with_array_classmarkblocks.php?location=b_classmark

Here is a version in which I indicate the shelving bay (a la Stackmap):

http://wwwnewdev.sussex.ac.uk/library/tim/maps-mobile/librarymap_with_array.php?location=d_classmark

A student forum immediately dismissed this idea as overkill.  They told me they just needed guiding to the general classmark area, and they could use their own intelligence from that point to get to the book.

For a while, I wondered whether I could use Google Maps for the floorplan images.  Below is a mock up of how that might have looked:

http://wwwnewdev.sussex.ac.uk/library/tim/maps-mobile/librarymap.php?location=p_classmark

I had hopes that I could use GPRS to deliver the whole floorplan concept: with users seeing their current location using their phone's position.  Background reading and experimentation on the current state of geolocation inside buildings persuaded me this was an aspiration to postpone for the still-distant future.

My Powerpoint from Holloway

Speaker's notes and all.

In the interests of transparency, you are welcome behind the curtain:

https://sussex.box.com/s/2fx47bcy4wa8h1d5au9qge7lfoy1wpcz

Where to find the floorplans?

Couldn't be easier:

http://www.sussex.ac.uk/library/floorplans/

Why a blog?

In the first instance, I will use this blog as a way to share my code for our digital floorplans.

At the UX In Libraries conference in Royal Holloway, there was interest from other sites in adapting this model for their own use.

This will give me a place to record what I did, and advise other people on how to carry it forwards for themselves.

A run through of my presentation from UXLibs 2019

A dry run of my presentation from Holloway, on the design process of our digital floorplans.

It lacks the improvised live quality, but is the closest thing to a repeat you will get:

https://drive.google.com/file/d/1p0jT0g_jQ37ssJGjF64VLhDvNRkWJlSe/view