Skip to content

Setup

Jump to bottom
Blue Pigeons edited this page Jul 27, 2017 · 5 revisions

University of Edinburgh Polyanno

Setup

Contents

Dependencies

This package is dependent on:

  • JQuery
  • JQueryUI
  • Bootstrap
  • Leaflet
  • Leaflet Draw
  • Leaflet IIIF
  • Dragon Drop
  • All The Unicode

So these need to be included into your HTML document in the relevant places.

In the head:


<!-- Meta data -->

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

<!-- Stylesheets -->

	<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

    <link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
	<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet.draw/master/dist/leaflet.draw.css" />

	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

	<link rel="stylesheet" type="text/css" href="https://rawgit.com/BluePigeons/dragon_drop/master/dragondrop.css" />
	<link rel="stylesheet" type="text/css" href="https://rawgit.com/BluePigeons/alltheunicode/master/alltheunicode.css" />

	<link rel="stylesheet" type="text/css" href="polyanno.css" />


<!-- Javascript libraries -->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
	<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script src="javascripts/leaflet-iiif.js"></script>
	<script src="https://cdn.rawgit.com/Leaflet/Leaflet.draw/master/dist/leaflet.draw.js"></script>

At the bottom of the body:


	<script src="https://rawgit.com/BluePigeons/dragon_drop/master/dragondrop.js"></script>
	<script src="https://rawgit.com/BluePigeons/alltheunicode/master/alltheunicode.js"></script>

	<script src="polyanno.js"></script>
	<script src="example1.js"></script>

Page Structure

For the components to lad into, you need to have certain HTML objects on the page:

	<div data-role="main" class="ui-content">
		<div id="main page" class="container polyanno-page-body">

			<div class="row" id="polyanno-top-bar">

				<!-- The minimising bar with keyboard buttons go here-->

			</div>

			<div class="row" id="polyanno-page-body">

				<!-- Image Viewer Panel -->

				<!-- Editor Boxes go here -->

			</div>

		</div>

	</div>

The Image

Firstly you need to define the imageSelected variable. These needs to be the URL for the image in the IIIF info.json format.

For example:

imageSelected = "https://images.is.ed.ac.uk/luna/servlet/iiif/UoEwmm~2~2~77099~164515/info.json";

In the application for the University of Edinburgh Polyglot website, this definition is dynamic using the website URL to change it.

Setup Function

To get started you need to run polyanno_setup function.

polyanno_setup(opts);

The function that takes one input, opts, a JSON object of the following format :

{
  "highlighting": Boolean,
  "minimising": Boolean,
  "storage": Object
}

highlighting

Type: Boolean Default: False

If false then this disables the highlighting functionality that enables any annotation targets present on the page to be 'highlighted' whenever a cursor hovers over an annotation.

The default, non-highlighted colours of objects can be defined by setting the variable polyanno_default_colours_array before running the setup. This is an array of three HTML colours in the format [editor_box, vector, span]. The default values are:

//[editor_box, vector, span]
polyanno_default_colours_array = ["buttonface","#03f","transparent"];

The highlighted colours that the objects change to are similarly defined by polyanno_highlight_colours_array with the defaults as follows:

//[editor_box, vector, span]
polyanno_highlight_colours_array = ["#EC0028","#EC0028","#EC0028"];

minimising

Type: Boolean Default: True

If false then the editor boxes displaying the annotations and the image cannot be minimised, only opened and closed.

storage

Type: JSON object Default: the base_url is set to the current host address of the web page running.

The storage field takes format:

{
  "base_url": String,
  "transcription": String,
  "translation": String,
  "vector": String,
  "annotation": String
}

If nothing is specified other than base_url then it simply assumes base_url + "/transcriptions", "/translations", "/vectors", and "/annotations".

Polyanno + Polyanno Storage

The storage assumes you are using polyanno_storage and so the request mapping to function is assumed to be:

Table

Each of the functions can be accessed individually if wanted, but the whole Express router (except the users routes for now) can be imported using polyanno.router allowing you to simply include the following in your server.js (or equivalent) file:

	var polyanno = require('polyanno_storage');
	app.use('/api', polyanno.router);

Clone this wiki locally