Skip to content

Overview

Jump to bottom
Micah Alex edited this page May 31, 2024 · 1 revision

Beehive Poster Viewer: A Comprehensive Guide

Overview

The Beehive Poster Viewer is an innovative application designed to display large, high-resolution images in an interactive and zoomable format. Originally developed by Jonathan Rochkind, this viewer leverages HTML, JavaScript, and CSS, with no special server-side software required. The application utilizes OpenSeadragon for image display and the Annotorious-Openseadragon plugin for annotations.

Architecture

The architecture of the Beehive Poster Viewer is straightforward, consisting of static files delivered by a web server. The main components include:

  • HTML: The primary HTML file links to local JavaScript and CSS files, as well as third-party JavaScript dependencies.
  • JavaScript: The core functionality is powered by OpenSeadragon and Annotorious, with additional libraries like easyModal.js for displaying popups.
  • CSS: Custom styles are defined in a single CSS file.
  • XML: Scene definitions and narratives are stored in XML files.
  • Image Tiles: High-resolution images are broken into smaller tiles for efficient display.

Key Features

  1. Zoomable Image Display: OpenSeadragon handles the display of large images, allowing users to zoom in and out seamlessly.
  2. Annotations: Annotorious-Openseadragon plugin enables users to add and view annotations directly on the images.
  3. Full-Screen Mode: Users can enter full-screen mode for an immersive viewing experience.
  4. Shareable URLs: Generate URLs that point to specific portions of the poster, including zoom level and boundaries.
  5. Narrative Toggle: Hide or show the narrative box to focus on the poster.

URL Parameters

The Beehive Poster Viewer uses query parameters to specify which poster to display and in which language. For example:

  • /posterViewer/?poster=mr loads the poster designated as 'mr'.
  • /posterViewer/?poster=mr&lang=es loads the 'mr' poster with a Spanish language narrative.

Creating DZI Images Using VIPS

Deep Zoom Image (DZI) format allows efficient display of high-resolution images by breaking them into smaller tiles. Here’s how to create DZI images using the vips tool:

The Narrative Files

Narrative files define the text and scene boundaries for the 'narrative tour' portion of a poster. These files are stored in the narrative directory and are controlled by a Git repository.

Structure of Narrative Files

  • Header Info: Includes <title> and <link> tags.
  • Scene/Story List: Each scene is defined by a <story> tag, which includes a label, region boundaries, and narrative text.

Example XML Structure

<data>
  <title>Mesoamérica Resiste (Front) from the Beehive Design Collective</title>
  <link>http://beehivecollective.org/beehive_poster/mesoamerica-resiste/</link>
  <stories>
    <story>
      <label>The Colonizers' view</label>
      <region x="0" y="0" width="1.0" height="1.0"/>
      <html>
        This poster folds to create a square with shutters that open to a larger image inside...
      </html>
    </story>
  </stories>
</data>

Development and Local Setup

To develop the Beehive Poster Viewer locally, use http-server with the --cors option:

npx http-server --cors

This command starts a local server with CORS enabled, allowing you to test the application in a local environment.

For more detailed instructions and documentation, visit the Beehive Poster Viewer documentation.

Clone this wiki locally