Simile Exhibit Tutorial v3
Simile Exhibit is a ‘Publishing Framework for Large-Scale Data-Rich Interactive Web Pages’. It is approachable and scales to meet your needs.
In this tutorial we we carry out a simple example based on the standard Exhibit tutorial initially developed by the SIMILE lab and has been updated and augmented subsequently for various versions. The data and and the general procedure come from the tutorial presented on the project wiki.
All the files (bundled as a zip file) to carry out this exercise are available here: ExhibitTutorialFiles. You can download them, unzip them and save them to your desktop to work with them.
The Recipe for this Hands-on Exercise
Step 1 – Combining Data with Presentation
We start some raw HTML – specifically calling for the Exhibit framework from the Simile server.
Open the two files linked below in your text editor to browse them and then open the html file in Firefox to view the result.
You should see something resembling the screen shot below.
Step 2 – Adding Facets and Search Functionality
We can now add powerful searching and browsing functionality by adding a simple set of facets to our HTML code.
In The HTML file simply paste:
<td width="25%"> Search:<div data-ex-role="facet" data-ex-facet-class="TextSearch"></div> <div data-ex-role="facet" data-ex-expression=".discipline" data-ex-facet-label="Discipline"></div> <div data-ex-role="facet" data-ex-expression=".relationship" data-ex-facet-label="Relationship"></div> <div data-ex-role="facet" data-ex-xpression=".shared" data-ex-facet-label="Shared?"></div> <div data-ex-role="facet" data-ex-expression=".deceased" data-ex-facet-label="Deceased?"></div> </td>
Into the HTML file where it currently says:
<td width="25%"> Facets Go Here </td>
When you do this you will see a series of browse facets made available as in Step 2.
Step 3 – Adding a Lens to Make it More Readable
Exhibit makes it possible to control the display of your data and make it more readable by utilising what they term ‘lenses’. By adding a ‘lens’ – basically some styling cues that explain how you would like data objects made pretty – you will see the immediate results in Step 3.
This is accomplished by adding a small lens definition thusly:
<div data-ex-role="lens" class="nobelist"> <table> <tr> <td><img data-ex-src-content=".imageURL" height="75" width="50" /></td> <td> <div data-ex-content=".label" class="name"></div> <div> <span data-ex-content=".discipline" class="discipline"></span>, <span data-ex-content=".nobel-year" class="year" </span> </div> <div data-ex-if-exists=".co-winner" class="co-winners">Co-winners: <span data-ex-content=".co-winner"></span> </div> <div data-ex-content=".relationship-detail" class="relationship"></div> </td> </tr> </table> </div>
This code is placed before the view panels we have defined to display the data. By editing your HTML file and saving it you should be able to refresh it and see the view blow. A sight prettier.
Step 4 – Adding a Timeline
To add a timeline to your Simile Exhibit, you need to do two things:
- Then you simply need to tell Exhibit where you wish the Timeline to go. Do this by adding a simple view panel below your single existing view panel:
<div data-ex-role="view" data-ex-view-class="Timeline" data-ex-start=".nobel-year" data-ex-color-key=".discipline"> </div>
These two items are all that is necessary to end up with an exhibit screen resembling the screenshot below. This screen is demonstrated on Step 4.
Step 5 – Adding a Map
To add a map to your Simile Exhibit, you need to do two things in a similar fashion to how we added the timeline above:
- First add a simple line to the HTML head section of the html file that tells Exhibit to load the map functionality. Underneath the existing script line where we have added the Timeline script, paste the following chunk of code: <link rel=”exhibit-extension” href=”http://api.simile-widgets.org/exhibit/current/extensions/map/map-extension.js”
data-ex-apikey=”AIzaSyDOiQ1E1ePl-oRqCGxIA6Bwbr5nwC5XeWs” /> This instructs Exhibit to load the functionality it needs to work with spatial data and present a visual map.
Note: And of late 2018 you now need to supply a Google Map API for your map to work. Unfortunately there is not an OpenStreetMap version anymore, so go to: Google to acquire a key if you don’t already have one. Once you have a key, it is added to the above code as “
- Then you simply need to tell Exhibit where you wish the Map to go. Do this by adding a simple view panel below your existing Timeline panel:<div data-ex-role=”view”
data-ex-autoposition = “true”
These two items are all that is necessary to end up with an exhibit screen resembling the screenshot below .This screen is demonstrated on Step 5.
Step 6 – Customising the HTML for Display
Now that we have added all of the functional viewers and interactive facets we may want to make it look more like the rest of our website.
To do this we can modify all aspects of the CSS, Header and Footer and add additional images. In this case I have added a couple images to the html and moved the facets to the top of the display simply by tweaking the HTML (the display layer).
If you now load Step 6 you will one the aesthetic changes – the objective here is simply to demonstrate that you are only limited by your own creativity and how deeply you want to dip into the HTML code.
But wait! There’s more …