"Museum Book Kiosk" displays a book, digitized from the collection of the Walters Art Museum in Baltimore, Maryland.
A small, one-page website runs locally on an iPad or other tablet. index.html
displays the book, using related JavaScript images.
This git repository uses a different branch for different projects, which display different books.
This project uses a variety of apps, command-line utilities, HTML, and JavaScript/jQuery.
- The Internet Archive BookReader tool for creating a simple book-like web interface
- The Digital Walters repository of images digitized from books in the collection of the Walters Art Museum
- Wget (for linux, mac, and windows) for downloading images of digitized books
- ImageMagick for editing images
- Kiosk Pro Plus for running an iPad in "kiosk mode"
- iMazing for managing files on iPads without iTunes. Or you can use iTunes.
Use WGET to download images from the book you want to display:
cd assets/book/ && wget -r -l1 -nd -e robots=off -R*thumb* -A "jpg" https://www.thedigitalwalters.org/Data/WaltersManuscripts/W934/data/W.934/sap/
... where W934
and W.934
above correspond to the shelf number of the book whose images you want to retrieve.
After you've run the command, images of a Walters manuscript go to assets/book/
. Beautiful!
note: The server's directory structure varies at times. You may need to do something like:
wget -r -l1 -nd -e robots=off -R*thumb* -A "jpg" https://thedigitalwalters.org/Data/WaltersManuscripts/92808/data/92.808/sap/
For scholarly reasons, each image of a page shows a sliver of the facing page. The sliver proves the position of each page within the book. The right-side images show a sliver of the left-side pages, and vice versa. For a more realistic, bookish interface, you can remove the slivers.
- Use Pan image editor like Photoshop or GIMP to measure the average pixel width of the "slivers" for this book e.g. 25px
cd
into theassets/book/
directory- Use ImageMagick's
mogrify
to trim from the left edges from the odd-numbered images
mogrify -chop 25x0 -gravity West *[13579]_sap.jpg
- Then trim the right edge of the even-numbered images
mogrify -chop 25x0 -gravity East *[24680]_sap.jpg
Edit BookReaderJSAdvanced.js
to change the display to a different book.
For the function getNumLeafs
, change the number to match the filename numbering. Review the filenames for the images you downloaded. For example, if the largest number is 622 for example, enter 622
for the "total number of leafs."
If necessary, adjust getPageWidth
and getPageHeight
to match the image dimensions.
The function getPageURI
has important variables to check.
- The function assumes images paths are like
assets/book/W934_000008_sap.jpg
for example, but you can adjust this. leafStr
contains leading zeroes for image filenames. If your filenames use 6 digit numbers, enter 6 zeroes:000000
url
determines the path to the book images
Later in the file, look for bookTitle
and other metadata variables.
With the files in place, and the JavaScript configured, you can browse to index.html
to view the book.
Choose which specific pages to display by default. Edit BookReader URL parameters: index.html#page/64/mode/2up
uses 64 as the pagenumber to show, and 2up mode shows the pages side-by-side.
Check for new releases of The Internet Archive BookReader, to upgrade the version in this project.
- Copy the download's
/BookReader
directory, replacing the one here. - Also copy
src/assets/images
, replacing this project'sassets/images/
Copy the finished project files to a tablet.
Put the site on an iPad (with iMazing or iTunes) or publish on a web server.
Configure the tablet's settings
Using Kiosk Pro, you have a "timeout" option. If a user flips through the book's pages on the iPad, and then goes away, the browser can reset to a default URL (like index.html#page/64/mode/2up
). This will "reset" the book view, so that it is open to the specified page(s).
You may also want to consider any settings in the tablet's operating system to put it in "lock-down" or "kiosk" mode. Restrict access to only the kiosk app, disable wifi, multi-touch gestures, etc.
- Developer: @dylan-k
- Homepage: thewalters.org
- Email: waltersweb@thewalters.org
- See Also: https://api.thewalters.org