<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Iconolab</title>
<link rel="stylesheet" href="/static/iconolab/css/iconolab.css">
<style>
body {
margin-top: 40px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div id="wrapper">
<image-annotator ref="annotator" image="img/main-image.jpg"></image-annotator>
</div>
</div>
<div class="col-md-3">
<div class="alert alert-success" style="display: none;">Annotation saved in LocalStorage!</div>
<pre id="annotation"></pre>
</div>
</div>
</div>
<script src="/static/iconolab/js/vendor.js"></script>
<script src="/static/iconolab/js/iconolab.js"></script>
<script>
function showAlert() {
$('.alert-success').show();
setTimeout(function() {
$('.alert-success').hide();
}, 3000);
}
var vm = new Vue({
el: '#wrapper'
});
var data = localStorage.getItem('annotation');
if (data) {
var annotation = JSON.parse(data);
vm.$refs.annotator.setAnnotation(annotation);
$('#annotation').text(JSON.stringify(annotation, null, 2));
}
vm.$refs.annotator.$on('save', function(data) {
console.log('Saving in localStorage', JSON.stringify(data));
showAlert();
localStorage.setItem('annotation', JSON.stringify(data));
});
</script>
</body>
</html>