<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Annotorious | Firebase Demo</title>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<style>
html, body {
padding:20px;
margin:0px;
}
p.caption {
font-family:Arial, Helvetica, sans-serif;
color:#8f8f8f;
}
p.caption a {
color:#3f3f3f;
}
</style>
<script src="https://recogito.github.io/annotorious/annotorious.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.3/firebase-firestore.js"></script>
<script>
// Firebase will auto-generate this config for you when you create your app.
// Just paste your own settings in here.
var firebaseConfig = {
apiKey: "-- your firebase api key here --",
authDomain: "-- your authdomain here --",
databaseURL: "-- your database url --",
projectId: "-- your project id --",
storageBucket: "-- your storage bucket --",
messagingSenderId: "...",
appId: "..."
};
firebase.initializeApp(firebaseConfig);
var db = firebase.firestore();
// Helper to find a Firebase doc by annotation ID
var findById = function(id) {
var query = db.collection('annotations').where('id', '==', id);
return query.get().then(function(querySnapshot) {
return query.docs[0];
});
}
window.onload = function() {
var image = document.getElementById('hallstatt');
var anno = Annotorious.init({ image });
// Load annotations for this image
db.collection('annotations').where('target.source', '==', image.src).get().then(function(querySnapshot) {
var annotations = querySnapshot.docs.map(function(doc) { return doc.data() });
anno.setAnnotations(annotations);
});
anno.on('createAnnotation', function(a) {
db.collection('annotations').add(a).then(function() {
console.log('Stored annotation');
});
});
anno.on('updateAnnotation', function(annotation, previous) {
findById(previous.id).then(function(doc) {
doc.ref.update(annotation);
});
});
anno.on('deleteAnnotation', function(annotation) {
findById(annotation.id).then(function(doc) {
doc.ref.delete();
});
});
// Bonus coolness: listen for realtime updates on this image
// and roll your own GoogleDrive-like realtime collab!
db.collection('annotations').where('target.source', '==', image.src).onSnapshot(function(querySnapshot) {
querySnapshot.docChanges().forEach(function(change) {
console.log(change.type, change.doc.data());
});
});
}
</script>
</head>
<body>
<div id="content">
<img id="hallstatt" src="https://recogito.github.io/annotorious/640px-Hallstatt.jpg">
<p class="caption">
Sample image source: <a href="http://commons.wikimedia.org/wiki/File:Hallstatt_300.jpg">Hallstatt,
Austria</a>, by Nick Csakany/Wikimedia Commons. Public Domain.
</p>
</div>
</body>
</html>