CnrLwlss/index.html

## index.html
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Annotation|IMC images</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.4.0/dist/annotorious.min.css">
  <script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.4.0/dist/annotorious.min.js"></script>
  <script language="javascript" type="text/javascript">
   var key = 2;

   function changeImage() {
    var image = "http://mito.ncl.ac.uk/sqimages/P07_" + ("00000" + key).slice(-5) + ".png";
    document.getElementById("showim").src = image;
    if(key == 20){
     key = 1;
    }else{
     key++;
    }
   };
  </script>
 </head>

 <body>
  <h1>Serving & annotating images from RDW</h1>
  <button id="changeim" type="button" onclick="changeImage()" ><h2>Click to change image</h2></button></br>
  <div style="float:left;"><img id="showim" src="http://mito.ncl.ac.uk/sqimages/P07_00001.png" width = "1024" height = "1024"/></div>
  <div style="float:left;">
  <p><ul>
  <li>Click then drag to start annotating (draw polygon)</li>
  <li>Double-click to finish annotating</li>
  <li>Enter a comment and hit OK button to save & move onto next fibre</li>
  </ul></p>
  </div>

  <script>
   (function() {
     var anno = Annotorious.init({
      image: 'showim',
      locale: 'en',
      disableEditor: false,
      widgets: [
      'COMMENT',
        { widget: 'TAG', vocabulary: [ 'Animal', 'Building', 'Waterbody'] }
      ]
     });
     anno.setAuthInfo({
      id: 'http://cnr.lwlss.net',
      displayName: 'cnr'
     });

     anno.on('createAnnotation', function(a) {
      console.log('created', a);
     });

     anno.on('updateAnnotation', function(annotation, previous) {
      console.log('updated', previous, 'with', annotation);
     });

     anno.on('deleteAnnotation', function(annotation) {
      console.log('deleted', annotation);
     });

     anno.loadAnnotations('annotations.w3c.json');

     anno.setDrawingTool('polygon');

     var btnAddBody = document.getElementById('add-body');
     btnAddBody.addEventListener('click', function() {
     var selected = anno.getSelected();

     selected.body = [{
       type: 'TextualBody',
       purpose: 'tagging',
       value: 'Just a tag'
     }];

     anno.updateSelected(selected);
     //anno.saveSelected(selected);
     });

     var toolToggle = document.getElementById('current-tool');
     toolToggle.addEventListener('click', function() {
     anno.setDrawingTool('polygon');
     });
    })()
  </script>
 </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Annotation\|IMC images</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.4.0/dist/annotorious.min.css">
	<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.4.0/dist/annotorious.min.js"></script>
	<script language="javascript" type="text/javascript">
	var key = 2;

	function changeImage() {
	var image = "http://mito.ncl.ac.uk/sqimages/P07_" + ("00000" + key).slice(-5) + ".png";
	document.getElementById("showim").src = image;
	if(key == 20){
	key = 1;
	}else{
	key++;
	}
	};
	</script>
	</head>

	<body>
	<h1>Serving & annotating images from RDW</h1>
	<button id="changeim" type="button" onclick="changeImage()" ><h2>Click to change image</h2></button></br>
	<div style="float:left;"><img id="showim" src="http://mito.ncl.ac.uk/sqimages/P07_00001.png" width = "1024" height = "1024"/></div>
	<div style="float:left;">
	<p><ul>
	<li>Click then drag to start annotating (draw polygon)</li>
	<li>Double-click to finish annotating</li>
	<li>Enter a comment and hit OK button to save & move onto next fibre</li>
	</ul></p>
	</div>

	<script>
	(function() {
	var anno = Annotorious.init({
	image: 'showim',
	locale: 'en',
	disableEditor: false,
	widgets: [
	'COMMENT',
	{ widget: 'TAG', vocabulary: [ 'Animal', 'Building', 'Waterbody'] }
	]
	});
	anno.setAuthInfo({
	id: 'http://cnr.lwlss.net',
	displayName: 'cnr'
	});

	anno.on('createAnnotation', function(a) {
	console.log('created', a);
	});

	anno.on('updateAnnotation', function(annotation, previous) {
	console.log('updated', previous, 'with', annotation);
	});

	anno.on('deleteAnnotation', function(annotation) {
	console.log('deleted', annotation);
	});

	anno.loadAnnotations('annotations.w3c.json');

	anno.setDrawingTool('polygon');

	var btnAddBody = document.getElementById('add-body');
	btnAddBody.addEventListener('click', function() {
	var selected = anno.getSelected();

	selected.body = [{
	type: 'TextualBody',
	purpose: 'tagging',
	value: 'Just a tag'
	}];

	anno.updateSelected(selected);
	//anno.saveSelected(selected);
	});

	var toolToggle = document.getElementById('current-tool');
	toolToggle.addEventListener('click', function() {
	anno.setDrawingTool('polygon');
	});
	})()
	</script>
	</body>
	</html>