84 lines
3.8 KiB
HTML
84 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Image Annotation Control</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.3.2/mocha.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/chai/4.3.4/chai.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/10.0.1/sinon.min.js"></script>
|
|
<script src="shared.js"></script>
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mocha/8.3.2/mocha.min.css">
|
|
<link rel="stylesheet" href="display-png.css">
|
|
</head>
|
|
<body>
|
|
<!-- Start of PNG Annotation HTML -->
|
|
<div class="annotator-png">
|
|
<div class="annotator-png-toolbox">
|
|
<input type="file" class="annotator-png-upload-image" accept="image/png" aria-label="Upload image">
|
|
<button class="annotator-png-add-arrow" aria-label="Add arrow">Add Arrow</button>
|
|
<button class="annotator-png-add-textbox" aria-label="Add textbox">Add Textbox</button>
|
|
<select class="annotator-png-add-symbol" aria-label="Select and add symbol">
|
|
<option value="">Select Symbol</option>
|
|
</select>
|
|
<input type="color" class="annotator-png-colour-picker" value="#ff0000" aria-label="Colour picker">
|
|
<button class="annotator-png-erase-mode" aria-label="Toggle erase mode">Erase Mode</button>
|
|
<button class="annotator-png-save-image" aria-label="Save annotated image">Save Image</button>
|
|
</div>
|
|
<div class="annotator-png-container-annotation" style="height: 600px; width: 800px;">
|
|
<canvas class="annotator-png-canvas-annotation" height="600px" width="800px" aria-label="Image canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
<!-- End of PNG Annnotation HTML -->
|
|
|
|
<div id="mocha"></div>
|
|
<script class="mocha-init">
|
|
mocha.setup({
|
|
ui: 'bdd',
|
|
globals: [
|
|
'flagAnnotatorPNG', 'flagToolbox', 'flagContainer', 'flagContainerAnnotation',
|
|
'flagUploadImage', 'flagAddArrow', 'flagAddTextbox', 'flagAddSymbol',
|
|
'flagColourPicker', 'flagEraseMode', 'flagSaveImage', 'flagCanvasAnnotation',
|
|
'keyFabric', 'keyIsEraseMode', 'annotatorSettings', 'flagInitialised'
|
|
]
|
|
});
|
|
mocha.checkLeaks();
|
|
const expect = chai.expect;
|
|
</script>
|
|
|
|
<script src="plugin_display_png,js"></script>
|
|
<script src="test_plugin_display_png_Mocha.js"></script>
|
|
|
|
<script class="mocha-exec">
|
|
// mocha.run();
|
|
</script>
|
|
</body>
|
|
|
|
<!-- Start of PNG Annotation JavaScript -->
|
|
<script>
|
|
var flagAnnotatorPNG = "annotator-png";
|
|
var flagToolbox = "annotator-png-toolbox";
|
|
var flagContainer = "annotator-png-container";
|
|
var flagContainerAnnotation = "annotator-png-container-annotation";
|
|
var flagUploadImage = "annotator-png-upload-image";
|
|
var flagAddArrow = "annotator-png-add-arrow";
|
|
var flagAddTextbox = "annotator-png-add-textbox";
|
|
var flagAddSymbol = "annotator-png-add-symbol";
|
|
var flagColourPicker = "annotator-png-colour-picker";
|
|
var flagEraseMode = "annotator-png-erase-mode";
|
|
var flagSaveImage = "annotator-png-save-image";
|
|
var flagCanvasAnnotation = "annotator-png-canvas-annotation";
|
|
var keyFabric = "fabric";
|
|
var keyIsEraseMode = "isEraseMode";
|
|
|
|
var annotatorSettings = {};
|
|
$(document).ready(function() {
|
|
$("." + flagAnnotatorPNG).annotatorPNG(annotatorSettings);
|
|
});
|
|
</script>
|
|
<!-- End of PNG Annotation JavaScript -->
|
|
</html> |