Git Product home page Git Product logo

beehive_poster_viewer's Introduction

Beehive Design Collective Online Poster Viewer

In Github at http://github.com/jrochkind/beehive_poster_viewer

Originally by Jonathan Rochkind, beehive people please feel free to contact Jonathan at any time with issues, questions, problems. [email protected]

This code is installed on the beehive web server under beehivecollective.org/posterViewer, accessible on the web at [TBD]

The application is simply HTML and Javascript -- just files on the server, there is no special software running on the server.

The hard parts of large image display and UI are done by the open source OpenSeadragon project.

For techies, see other notes on software

How the posterViewer URL works

The particular poster to be viewed is given in a query parameter in the URL, poster=:

/posterViewer/?poster=mr

That will try to load the tile images designated as 'mr', and by default, that will try to load an english language narrative file for 'mr'. If other language narrative files are available, you can add an additional language parameter with the code for the language (matching the filename for the narrative file):

/posterViewer/?poster=mr&lang=es

(This actually accesses the file viewer.html, but you can leave the filename out of the URL, because we set it as a default "index" file in the .htaccess)

Features of the posterViewer you may miss

Notice the small honeycomb-shaped icons in the upper left corner.

  • If you click on the one that looks like a dotted square with a line through it, you can go into FULL SCREEN mode, where your entire monitor will be taken up with poster -- this is highly recommended for the beehive posters, they really look awesome this way.

  • If you click on the the one that looks like a chain link, you can get a URL that will point to whatever portion of the poster you are looking at at that moment (zoom level and boundaries), so you can send to someone else or bookmark or put in a web page to refer to that particular portion of poster. (I plan to try to make this work better in the future, so you can always just copy and paste the URL from the browser location bar; but not yet)

  • If you just want to explore the poster without the narrative, click the up arrow in the top right corner of the narrative box, and it will disappear to give you a full screen of poster. A honeycomb button representing lines of text will appear, which you can click on to restore the narrative box.

Editing and adding new posters

A poster is defined simply by a set of image tiles in the tiles directory, and an XML file that defines the scenes for the narrative tour (as well as the title of the poster and other maybe such metadata) in the narrative directory.

To add a new poster, you need to pick a unique short name that will be used in URLs and filenames to refer to that poster. The unique short name should not have any spaces: for instance, mr.

Then you will simply add tiles and narrative file in the right places in the posterViewer directory using that name you picked. To change the narrative (scenes, order, text, boundaries on the poster of a scene, etc.,), you simply edit the narrative XML file.

Please note that narratives and HTML/CSS/JS code are controlled by a git repository on github.com, please try to make changes through git if possible. See my instructions on git and github

You should also add facebook summary information:

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.