LibCrowds Viewer

A Vue.js component for crowdsourcing Web Annotations using a IIIF viewer.

Try the demo

Read the documentation

Installation

The component can by installed via npm.

npm install libcrowds-viewer --save

Usage

Install the component:

// main.js
import Vue from 'vue';
import LibcrowdsViewer from 'libcrowds-viewer';
 
Vue.use(LibcrowdsViewer);

Use it in your templates (minimal configuration options shown):

<template>
  <div class="container">
    <libcrowds-viewer
      :task-opts="taskOpts">
    </libcrowds-viewer>
  </div>
</template>
 
<script>
  export default {
    data () {
      return {
        taskOpts: [
          {
            mode: 'select',
            objective: 'Draw rectangles around stuff'
            tileSource: 'http://www.example.org/image-service/abcd123/info.json',
            target: 'http://example.org/iiif/book1/canvas/p1'
          }
        ]
      }
    }
  }
</script>
 
<style lang="scss">
  @import "~libcrowds-viewer/dist/scss/libcrowds-viewer.scss";
 
  // A height must be set on the viewer container.
  .viewer-container {
    margin: 0;
    height: 100vh;
  }
</style>

Development

# install dependencies
npm install
 
# serve demo at localhost:8080
npm run dev
 
# deploy to gh-pages (rights permitting)
npm run demo:deploy
 
# test
npm run test
 
# serve docs
gitbook install
gitbook serve