Embed Size (px)
Citation preview
Tamara MetzSystems Librarian
Diné College LibraryTsaile, AZ
(Navajo Nation)
The Development of a Stacks Map Program Using The HTML5 <canvas> Tag
The Idea
• Geoffrey Timms and Jeremy Brown from Mercer University shared their program at LITA in October, 2012.
• Their development included server-side scripting and a back-end database
• Great idea, but our development options are limited
• This is a side/learning project
Our Resources
• One Systems Librarian (myself)• 2 other professional librarians and 8
paraprofessionals spread out over three widely separate locations
• Library web and database servers are two of the only three *NIX servers on the campus
• Web server is run under Ex Libris structure and setup, which makes major changes difficult and undesirable
Our Resources (Cont’d)
• Programming language options:– Perl (Already installed and functional)– PHP (Not installed or functional -- would require
an Apache re-compile or a move to a different server – and I am by no means an Apache expert)
– Java (Never investigated the requirements)• Graphics options:– Very limited. I am not an artist or graphics
designer.
Our Library
• Small Community/Tribal College• Extremely rural• Serves 1671 students from the Navajo reservation• 3 Library locations geographically far from each
other• 3 additional classroom locations for which we are
trying to improve library services• Serve community members as well as our own
students
Our Library (cont’d)
(Map from www.discovernavajo.com)
Our Library (cont’d)
• Students can take courses at any college site, and often take courses at more than one location during their college career – so the first time they walk into one of the libraries could be the last course they take!
• Ex Libris Voyager ILS• Approximately 124,000 items, mostly physical
books
First Steps
• The idea solidified when looking at HTML5 specifications
• <canvas> tag allows on-the-fly manipulation of graphics without using a server-side programming language or graphics library.
• Since the only requirements were HTML5 and some Javascript, and no art skills required, it seemed like a good option
First Steps (Cont’d)
• Drew a map of our main library (Tsaile) in MS Word (again – I’m not an artist!)
• Very roughly mapped the call numbers on each shelf (e.g. A through E, F through G, etc.). Later on went more granular
• Created a simple launch page with a form to send the location and call number via URL query string to the actual map page
First Steps (cont’d)
• URL looked like this:http://library.dinecollege.edu/maprouter.htm?location=TSMain&callnumber=E99.N3_B498_1996
Router (maprouter.htm)• Decides the location of the item (which of the 3
libraries)• Strips the first two letters from the “location”
parameter (e.g. TSMain is sent to the Tsaile (TS) map page with a stacks location of “Main”).
• Replaces spaces and + signs with underscores• Adds a parameter to show QR code• New URL:http://library.dinecollege.edu/mapts.htm?
collection=Main&callnumber=E99.N3_B498_1996&qr=yes
Filling Up The Canvas
• Created the canvas• First layer: the image file of the map + text
describing each map (caption)• Second layer: a blue rectangle that “peeks out” from
underneath the top rectangle to highlight the appropriate side of the shelf
• Top layer: a red rectangle overlaid on the shelf that holds the item
• Coordinates, length and width for the rectangles are determined by parsing the call number
Filling Up The Canvas (cont’d)Load the pre-made map and captions:
<canvas id="myCanvas" width = "1100" height = "520">Sorry, your browser does not support the HTML5 canvas tag. Please try IE 9 or above, Firefox, or Chrome.</canvas>
<script>var c=document.getElementById('myCanvas');var ctx=c.getContext('2d');var imageObj = new Image();var imageObj2 = new Image();ctx.globalCompositeOperation="destination-over";
imageObj.onload = function() { ctx.drawImage(imageObj, 0, 0);};imageObj2.onload = function() { ctx.drawImage(imageObj2, 527, 0);};imageObj2.src = 'images/upstairsmap.jpg';imageObj.src = 'images/downstairsmap.jpg';
ctx.font="20px Arial";ctx.fillText("Downstairs",220,510);ctx.fillText("Upstairs",770,510);ctx.font="40px Arial";ctx.fillText("Tsaile",470,30);
Filling Up The Canvas (cont’d)• Coordinates of the shelf were determined through a
horrific series of if and switch statements – this was later remedied.
switch (qsParm['collection']) { case "Main": width = 89; length = 12; xcoord = 581; switch (qsParm['callnumber'].charAt(0)) { case "a": case "A": ycoord = 346; shelf_side = 1; break; // cases ‘B’ through ‘Z’ follow //(use your imagination) } break;
// similar case statements for all other collections (reference, oversize, etc.)
}
Filling Up The Canvas (cont’d)Draw the rectangles:
ctx.fillStyle='#FF0000'; ctx.fillRect(xcoord,ycoord,width,length);
Shelf Sides
• As the program progressed, we attempted to become more granular by indicating the side of the shelf to look on
• Once the side of the shelf was determined, we used a blue rectangle underneath the full rectangle to “highlight” the appropriate side
• We had 4 possibilities for highlighting: below (1) or above (2) the shelf (horizontal shelves), and to the left (3) or right (4) of a shelf (vertical shelves).
Shelf Side (cont’d)
if (shelf_side > 0) { ctx.fillStyle='#003399'; switch(shelf_side) { case 1: ctx.fillRect(xcoord-3,ycoord+10,width+6,length/2); break; case 2: ctx.fillRect(xcoord-3,ycoord-4,width+6,length/2); break; case 3: ctx.fillRect(xcoord-4, ycoord-3, width/2, length+6); break; case 4: ctx.fillRect(xcoord + 9, ycoord - 3, width/2, length + 6); break; } }
QR Codes
• Somewhat of an afterthought• Used Google Charts API for QR Codes• Example:
qrcode.src = 'https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=http://library.dinecollege.edu/mapts.htm?collection=' + qsParm['collection'] + '%26callnumber=' + qsParm['callnumber'] + %26qr=no';
Integrating With Our ILS
• Our original ILS: Voyager 7.2.1 with Classic OPAC
• Following the example to integrate Syndetics book covers into the OPAC, we added the following lines to our displayh.cfg file:
Map: +No map available
HTML:852||bhi:<strong><a target="_blank" style = "color:#540069" href = "http://library.dinecollege.edu/maprouter.htm?location={b}&callnumber={h}_{i}">Click here for a map!</a></strong>
Integrating With Our ILS (Cont’d)
• We moved from Voyager’s Classic OPAC to the Tomcat OPAC in the summer of 2013
• Somewhat more difficult to integrate• Took advantage of the change to also pass the title
in the query string• Following the instructions in chapter 10 of the
WebVoyage Architecture Manual, we created a file: /m1/voyager/xxxxdb/tomcat/vwebv/context/vwebv/ui/[skin]/xsl/contentLayout/local_locMapLink.xsl
Integrating With Our ILS (Cont’d)
• Contents of local_locMapLink.xsl:<!--Note: sample link to map based on loc code** Version : 1.0** Created : 16-Nov-2007** Created By :--><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"xmlns:page="http://www.exlibrisgroup.com/voyager/webvoyage/page"xmlns:fo="http://www.w3.org/1999/XSL/Format"><!-- ###################################################################### --><xsl:template name="locMapLink"><xsl:param name="mfhd"/><xsl:variable name="locCode"><xsl:call-template name="BMDProcessMarcTags"><xsl:with-param name="field" select="'852'"/><xsl:with-param name="indicator1" select="'X'"/><xsl:with-param name="indicator2" select="'X'"/><xsl:with-param name="subfield" select="'b'"/><xsl:with-param name="mfhdID" select="$mfhd"/><xsl:with-param name="recordType" select="'mfhd'"/></xsl:call-template></xsl:variable>
Integrating With Our ILS (Cont’d)
• Contents of local_locMapLink.xsl:<xsl:variable name="callCode"><xsl:call-template name="BMDProcessMarcTags"><xsl:with-param name="field" select="'852'"/><xsl:with-param name="indicator1" select="'X'"/><xsl:with-param name="indicator2" select="'X'"/><xsl:with-param name="subfield" select="'hi'"/><xsl:with-param name="mfhdID" select="$mfhd"/><xsl:with-param name="recordType" select="'mfhd'"/></xsl:call-template></xsl:variable>
<xsl:variable name="titleCode"><xsl:call-template name="BMDProcessMarcTags"><xsl:with-param name="field" select="'245'"/><xsl:with-param name="indicator1" select="'X'"/><xsl:with-param name="indicator2" select="'X'"/><xsl:with-param name="subfield" select="'ab'"/><xsl:with-param name="mfhdID" select="$mfhd"/><xsl:with-param name="recordType" select="'bib'"/></xsl:call-template></xsl:variable>
Integrating With Our ILS (Cont’d)
• Contents of local_locMapLink.xsl<!-- you must create your web site to display maps --><xsl:variable name="baseURL">http://library.dinecollege.edu/betasite/maprouter.htm?location=</xsl:variable><xsl:variable name="callnum">&callnumber=</xsl:variable><xsl:variable name="title">&title=</xsl:variable><div class="locationMap">Show me a <a id="locMap" href="{$baseURL}{$locCode}{$callnum}{$callCode}{$title}{$titleCode}“ target="_new">map</a>.</div></xsl:template><!-- ###################################################################### --></xsl:stylesheet></xsl:stylesheet>
Integrating With Our ILS (Cont’d)
• We then added this to the includes section of /m1/voyager/xxxdb/tomcat/vwebv/context/vwebv/ ui/[skin]/xsl/contentLayout/display/display.xsl:
<xsl:import href="../local_locMapLink.xsl"/>
Integrating With Our ILS (Cont’d)
• We also modified the BMD1000 template of display.xsl as follows:<xsl:template name="BMD1000"><xsl:param name="mfhdID"/>
<xsl:for-each select="$HoldXML/mfhd:mfhdRecord[@mfhdId = $mfhdID]/mfhd:mfhdData[@name='locationDisplayName']"> <xsl:if test="string-length(.)"> <xsl:value-of select="."/><!-- ## add a map link ## --><xsl:call-template name="locMapLink" ><xsl:with-param name="mfhd" select="$mfhdID"/></xsl:call-template><br/> </xsl:if> </xsl:for-each></xsl:template>
Transitioning To Perl Script
• We wanted to normalize the call numbers so we wouldn’t have to modify code every time there was a shelf shift
• We looked around for a call number normalizer. There are a few out there, but many have issues.
• We finally found that Michael Doran wrote a great call number sorter library in Perl that seemed stable and usable. See http://rocky.uta.edu/doran/sortlc/
• We decided to pass the URL to a Perl script which would use Doran’s library and return the necessary information (x coordinate, y coordinate, etc.) to the browser
Transitioning To Perl Script (Cont’d)
• We modified maprouter.htm to pass to the Perl script instead of directly to each site’s map page (except in a few special cases of non-rectangular shaped rooms and multiple locations)
• We also had to strip out an additional space (%20) from the beginning of the call number that the old “Classic” OPAC did not have
Transitioning To Perl Script (Cont’d)
if (qsParm['location'] == "TSMedia") { window.location = "mapts.htm?collection=" + qsParm['location'].substring(2) + "&callnumber=" + qsParm['callnumber'] + "&title=" + qsParm['title'] + "&qr=yes";}else if (qsParm['location'] == "TSGorman") { window.location = "mapts.htm?collection=" + qsParm['location'].substring(2) + "&callnumber=" + qsParm['callnumber'] + "&title=" + qsParm['title'] + "&qr=yes";}else if (qsParm['location'] == "SRMedia") { window.location = "mapsr.htm?collection=" + qsParm['location'].substring(2) + "&callnumber=" + qsParm['callnumber'] + "&title=" + qsParm['title'] + "&qr=yes";}else if (qsParm['location'] == "CPMedia") { window.location = "mapcp.htm?collection=" + qsParm['location'].substring(2) + "&callnumber=" + qsParm['callnumber'] + "&title=" + qsParm['title'] + "&qr=yes";}else { window.location = "vwebv/stacksmap.cgi?collection=" + qsParm['location'] + "&callnumber=" + qsParm['callnumber'] + "&title=" + qsParm['title'];}
From maprouter.htm:
Transitioning To Perl Script (Cont’d)
• We began keeping track of the following information in a Google Drive spreadsheet:
-First and last call numbers on each shelf-x and y coordinates, and length and width of each shelf on our map-Location
• Example line from the spreadsheet:LOCATION SIDE 1 First Book SIDE 1 Last Book SIDE 2 First Book SIDE 2 Last Book xcoord ycoord w l
SRGeneral1 AC1 .E8 CS1129 .B552 2008 CS2377 .M37 1997 E141 .A28313 2002 192 169 66 10
Transitioning To Perl Script (Cont’d)• We used a shell script to pull the spreadsheet from Google Drive as a
tab-delimited text file. This ran nightly in cron.• Contents of the shell script (this is all one line):
• Now our Perl script could just read in the file from the same directory on the server. No worries about FTPing a new file every time a change is made.
• Because it’s in Google Drive, staff at all 3 sites could easily update the spreadsheet themselves without having to call the systems librarian!
/usr/sfw/bin/wget --output-document=/m1/voyager/xxxxdb/tomcat/vwebv/context/vwebv/htdocs/vwebvcallnumbers.tsv 'https://docs.google.com/spreadsheet/pub?key={our key for the document}&single=true&gid=0&output=txt'
Transitioning To Perl Script (Cont’d)
• In the summer of 2013, our web server died. In the transition to a different server, we discovered that the version of “wget” on that server was not compiled with SSL support, so could not download from Google Docs (no https!).
• As an alternative to wget, we found/modified a Java class that would do the same thing:
Transitioning To Perl Script (Cont’d)• Java class:
/* Modified version of Alvin Alexander's script from http://alvinalexander.com/blog/post/java/simple-https-example*/
import java.net.URL;import java.io.*;import javax.net.ssl.HttpsURLConnection;
public class JavaHttpsExample{ public static void main(String[] args) throws Exception { String httpsURL = "https://docs.google.com/spreadsheet/pub?key={our key}&single=true&gid=0&output=txt"; URL myurl = new URL(httpsURL); HttpsURLConnection con = (HttpsURLConnection)myurl.openConnection(); InputStream ins = con.getInputStream(); InputStreamReader isr = new InputStreamReader(ins); BufferedReader in = new BufferedReader(isr);
String inputLine; File file = new File("/m1/voyager/xxxxdb/tomcat/vwebv/context/vwebv/htdocs/vwebv/callnumbers.tsv");
Transitioning To Perl Script (Cont’d)• Java class (cont’d)
if (!file.exists()) {file.createNewFile();
}FileWriter fw = new FileWriter(file.getAbsoluteFile());BufferedWriter bw = new BufferedWriter(fw);
while ((inputLine = in.readLine()) != null) { /* System.out.println(inputLine); */ bw.write(inputLine); bw.write("\n"); }
in.close(); bw.close(); }}
Transitioning To Perl Script (Cont’d)
• Now our shell script runs the Java (we decided it would be cleaner to set the class path within a shell script and run the shell script in cron than to run the Java directly from cron)
• The shell script contains the following:java -cp /m1/voyager/xxxxdb/tomcat/vwebv/context/vwebv/htdocs/vwebv/java/ JavaHttpsExample
Transitioning To Perl Script (Cont’d)• Placed the Perl script in
/m1/voyager/xxxxdb/tomcat/vwebv/context/vwebv/htdocs/vwebv (which we had already created to run Michael Doran’s “New Books” program)
• Script places the call number in the 0th position in an array of size 5. It then rotates through each line of the spreadsheet (now a tab-delimited text file), and for every line whose location matches, places 4 elements (first and last call numbers of the first shelf side, and first and last call numbers of the opposite shelf side) into the other array positions. Then uses Michael Doran’s sortLC library to sort the array.
• If the call number sorts to somewhere between the call numbers from the spreadsheet, we have found the correct shelf. If not, the loop iterates again and grabs the next line of the text file….
Transitioning To Perl Script (Cont’d)• Grab the data from the query string and put the call number into an array:
#!/usr/bin/perl
require "sortLC.lib"; #Michael Doran's call number sorter library
# Get the data from the query string:if (length ($ENV{'QUERY_STRING'}) > 0){ $buffer = $ENV{'QUERY_STRING'}; @pairs = split(/&/, $buffer); foreach $pair (@pairs){ ($name, $value) = split(/=/, $pair); $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; $FORM{$name} = $value; }}
# Replace all underscores (_) with spaces:$FORM{'callnumber'} =~ s/_/ /g;
# Create an array and make the first element the call number from the query string:@unsorted_list[0] = $FORM{'callnumber'};
Transitioning To Perl Script (Cont’d)
• Open the call numbers tab-delimited file and discard the first two lines
open (FILE, 'callnumbers.tsv');$firstline = <FILE>;$secondline = <FILE>;
Transitioning To Perl Script (Cont’d)• Go through each line of the file. For lines where the location matches our location, grab the
call numbers, throw them in the array, sort, and see if our call number is in that range.
while (<FILE>) { chomp; ($location, $call1, $call2, $call3, $call4, $xcoord, $ycoord, $width, $length) = split("\t"); if ($location =~ /$FORM{'collection'}/) { @unsorted_list[1] = $call1; @unsorted_list[2] = $call2; @unsorted_list[3] = $call3; @unsorted_list[4] = $call4; @sorted_list = &sortLC(@unsorted_list); # Use Michael Doran's library to sort the 5 call numbers if (scalar(@sorted_list) == 5) { # If the sorted array is size 5, there were no duplicates if (@sorted_list[1] eq $FORM{'callnumber'}) { $shelf_side = 1; last; } elsif (@sorted_list[3] eq $FORM{'callnumber'}) { $shelf_side = 2; last; } } else { # There were duplicates, so figure out which end of the range our call number is if ((@sorted_list[0] eq $FORM{'callnumber'})||(@sorted_list[1] eq $FORM{'callnumber'})) { $shelf_side = 1; last; } elsif ((@sorted_list[2] eq $FORM{'callnumber'})||(@sorted_list[3] eq $FORM{'callnumber'})) { $shelf_side = 2; last; } } }}close(FILE);
Transitioning To Perl Script (Cont’d)
• Determine which HTML page to send the query string to, based on the location
if ($location =~ /TS/) { $where = "mapts.htm"; if ($width < $length) { # Tsaile is the only location where the shelves also go "vertical" $shelf_side = $shelf_side + 2; # Tsaile also uses shelf sides 3 and 4 }}elsif ($location =~ /SR/) { $where = "mapsr.htm";}elsif ($location =~ /CP/) { $where = "mapcp.htm";}$FORM{'callnumber'} =~ s/ /_/g; # Replace spaces with underscores so we can send it back to the browser
Transitioning To Perl Script (cont’d)
• Once the correct shelf is found, we set a variable ($where) to the correct URL (e.g. mapts.htm), then pass the entire query string with the coordinates, etc. read from the spreadsheet back along to the correct map program:
$FORM{collection} = substr($FORM{collection}, 2);$location = "Location: http://library.dinecollege.edu/";$location .= $where;$location .= "?collection=" . $FORM{collection} . "&callnumber=" . $FORM{callnumber};$location .= "&xcoord=" . $xcoord . "&ycoord=" . $ycoord . "&shelf_side=" . $shelf_side . "&width=" . $width . "&length=" . $length . "&title=" . $FORM{title} . "&qr=yes\n\n";print "Content-type: text/html\n";print $location;
Transitioning To Perl Script (cont’d)
• The specific map pages are now much shorter. They just grab the x and y coordinates, length and width from the query string and draw the rectangles – no horrible “if” statements. They also now display the book titles.
What Worked Well
• The program fairly accurately determines where a book is located and creates a printable map that a patron can take with them (or scan to their phone) while searching the stacks
• Very easy to draw a rectangle or multiple rectangles on top of an image (pre-made map) using the <canvas> tag
• Using Google Drive precludes the need for advanced database program (library staff can just update the spreadsheet on Google and the data is automatically pulled using Google’s export URL every night)
What Didn’t Work Well
• <canvas> tag does not work with IE 8 or below, and we have several computers still running Windows XP with IE 8
• Not degradable (map is useless to users with Javascript turned off)
What I Would Have Done Differently
• Standardized the map images (same size rectangles, same size maps, same amount of description, etc.)
• Studied call number structure more thoroughly
• I would have looked for a way to normalize call numbers first, before writing an if-statement-filled chunk of Javascript the length of War and Peace.
