A Vue.js component for crowdsourcing Web Annotations using a IIIF viewer.
The component can by installed via npm.
npm install libcrowds-viewer --saveInstall 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: 'https://www.example.org/image-service/abcd123/info.json',
target: 'https://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># 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