OLPC Bookreader Demonstration

By webchick

Open Library recently launched a web demonstration designed to illustrate how Internet Archive book collections can be viewed on the OLPC XO Laptop.

We invite you to take a look!

It is still in the early stages, and is built on open source software using an embeddable AJAX reader and a software component known as Carousel which scrolls through the collection of books on the right.

We would like to have feedback on how to improve the user experience of this demonstration and its underlying components for users of the OLPC XO and Open Library.

There are a few known bugs in the collections (i.e., Carousel) navigation:

  • A user cannot quickly scroll to the top and bottom of the collection
  • A user cannot view multiple collections, and sub-collections, or filter book selections on a variable such as author or subject
  • More books should be revealed in the collections carousel on screen rotate
  • Book titles should be truncated so they do not break into two lines (this interferes with the viewable area of the carousel)

At this time, it is not fully functional in tablet mode on the XO yet – this has dependencies on the GnuBook reader (the embeddable reader that enables scrolling through the individual book pages). We need it to:

  • Respond to the arrow keys when in tablet mode (book and collection navigation)
  • The book should zoom to fit width in the book viewable area
  • A two-page view on default is preferable to a single page view

We created an OLPC bundle for browsing books offline on the XO. It currently contains 5 books, and uses low resolution images to improve download speed:

Demo: http://openlibrary.org/static/olpc_bundle/openlibrary/
Bundle: http://openlibrary.org/static/olpc_bundle/openlibrary.xol

We encourage anyone interested in these two projects to help betatest the software components. The primary focus is on GnuBook:

Documentation: http://openlibrary.org/dev/docs/bookreader
Bug Tracker: https://bugs.launchpad.net/gnubook/
Source Code: http://github.com/openlibrary/bookreader/tree/master

We also have a demonstration of the GnuBook reader without the Carousel navigation here.

Enjoy! (And be sure to check out a 2008 Google Summer of Code project for a Sugar app book viewer by Aleksander Kalev!)

Tags: , , , , , , ,

4 Responses to “OLPC Bookreader Demonstration”

  1. [...] most promising is GnuBook, which uses HTML and JavaScript to render pages in an easy-to-browse interface. There’s also [...]

  2. Arne Solli says:

    Hi

    The GnuBookDemo works OK after modifying the url var in GnuBookSimpleJS.js. So I have tried to modify the index.php in GnuBookIA, but got into some problems. There are a setup.inc file in index.php and I wonder what kind of information/data/variables that are initiated in setup.inc file

  3. raj says:

    You don’t need index.php to get the bookreader to work. Use GnuBookDemo/index.html instead. Grab the GnuBookDemo folder from here:

    http://github.com/openlibrary/bookreader/tree/master

  4. Bill Janssen says:

    I’ve got the book reader hooked up to UpLib now. Nice!

    A couple of comments:

    I had to modify the main source file (GnuBook.js and GnuBook.css) to replace the calls for the various button images. My Web server doesn’t allow hierarchical directories; everything has to go through a function, so I had to change each instance of “images/left-button.png” to “images?imgname=left-button.png”. It would be nice if all those UI images were fetched through a Javascript function which I could override in my book-specific JS file.

    I couldn’t go to the end of the book in two-page mode till I overrode lastDisplayableIndex() in my code — there seems to be some idea in the code that the last couple of pages can’t be displayed in two-page mode.

    I’d like to be able to override the logo image and URL in the upper left corner with my own logo and link. It would be nice to have hooks to do this.

    How about text selection? In UpLib, we had to implement “wordboxes” to do that — basically, a description mapping each word in the text to a rectangle on the page image.