@wesionary/annotorious-openseadragon
Version:
Annotorious image annotation for OpenSeadragon
255 lines (240 loc) • 8.27 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Annotorious OpenSeadragon Example</title>
<link
href="https://fonts.googleapis.com/css?family=Lato&display=swap"
rel="stylesheet"
/>
<style>
html,
body {
margin: 0;
padding: 0;
background-color: #e2e2e2;
height: 100%;
font-family: Lato;
line-height: 160%;
}
.column {
max-width: 700px;
padding: 20px;
margin: 0 auto;
background-color: #fff;
height: 100%;
box-sizing: border-box;
}
h1 {
font-size: 21px;
font-weight: normal;
margin: 0;
padding: 0;
}
p.instructions {
padding: 10px 0 30px 0;
}
.openseadragon-canvas {
outline: none;
background-color: #efefef ;
}
</style>
<script>
window.onload = function () {
var viewer = OpenSeadragon({
id: "openseadragon",
prefixUrl: "openseadragon/images/",
tileSources: {
type: "image",
url: "1280px-Hallstatt.jpg",
},
gestureSettingsTouch: {
pinchRotate: true,
},
});
var anno = OpenSeadragon.Annotorious(viewer, {
locale: "ja",
tagVocabulary: [
{
label: "Right Lung",
value: "right_lung",
options: [
{ label: "S1", value: "S1" },
{ label: "S2", value: "S2" },
{ label: "S3", value: "S3" },
{ label: "S4", value: "S4" },
{ label: "S5", value: "S5" },
{ label: "S6", value: "S6" },
{ label: "S7", value: "S7" },
{ label: "S8", value: "S8" },
{ label: "S9", value: "S9" },
{ label: "S10", value: "S10" },
],
},
{
label: "Left Lung",
value: "left_lung",
options: [
{ label: "S1+2", value: "S1+2" },
{ label: "S3", value: "S3" },
{ label: "S4", value: "S4" },
{ label: "S5", value: "S5" },
{ label: "S6", value: "S6" },
{ label: "S8", value: "S8" },
{ label: "S9", value: "S9" },
{ label: "S10", value: "S10" },
],
},
{
label: "Stomach",
value: "stomach",
options: [
{ label: "U-Ant", value: "U-Ant" },
{ label: "U-Post", value: "U-Post" },
{ label: "U-Less", value: "U-Less" },
{ label: "U-Gre", value: "U-Gre" },
{ label: "M-Ant", value: "M-Ant" },
{ label: "M-Post", value: "M-Post" },
{ label: "M-Less", value: "M-Less" },
{ label: "M-Gre", value: "M-Gre" },
{ label: "L-Ant", value: "L-Ant" },
{ label: "L-Post", value: "L-Post" },
{ label: "L-Less", value: "L-Less" },
{ label: "L-Gre", value: "L-Gre" },
],
},
{
label: "Esophagus",
value: "esophagus",
options: [
{ label: "Ant", value: "Ant" },
{ label: "Post", value: "Post" },
{ label: "Less", value: "Less" },
{ label: "Gre", value: "Gre" },
],
},
{
label: "Cecum",
value: "cecum",
options: [{ label: "Cecum", value: "Cecum" }],
},
{
label: "Ascending colon",
value: "ascending_colon",
options: [{ label: "Ascending colon", value: "Ascending colon" }],
},
{
label: "Transverse colon",
value: "transverse_colon",
options: [
{ label: "Transverse colon", value: "Transverse colon" },
],
},
{
label: "Descending colon",
value: "descending_colon",
options: [
{ label: "Descending colon", value: "Descending colon" },
],
},
{
label: "Sigmoid colon",
value: "sigmoid_colon",
options: [{ label: "Sigmoid colon", value: "Sigmoid colon" }],
},
{
label: "Rectum",
value: "rectum",
options: [
{ label: "RS-Ant", value: "RS-Ant" },
{ label: "RS-Post", value: "RS-Post" },
{ label: "RS-Lt", value: "RS-Lt" },
{ label: "RS-Rt", value: "RS-Rt" },
{ label: "Ra-Ant", value: "Ra-Ant" },
{ label: "Ra-Post", value: "Ra-Post" },
{ label: "Ra-Lt", value: "Ra-Lt" },
{ label: "Ra-Rt", value: "Ra-Rt" },
{ label: "Rb-Ant", value: "Rb-Ant" },
{ label: "Rb-Post", value: "Rb-Post" },
{ label: "Rb-Lt", value: "Rb-Lt" },
{ label: "Rb-Rt", value: "Rb-Rt" },
],
},
{
label: "Appendico",
value: "appendico",
options: [{ label: "Appendico", value: "Appendico" }],
},
{
label: "Anus",
value: "anus",
options: [
{ label: "Ant", value: "Ant" },
{ label: "Post", value: "Post" },
{ label: "Lt", value: "Lt" },
{ label: "Rt", value: "Rt" },
],
},
],
observationOptions: [
{ label: "Surgical Materials", value: "surgical_materials" },
{ label: "Biospy", value: "biospy" },
{ label: "Autopsy", value: "autopsy" },
],
tagPlaceholder: "Enter organ",
commentPlaceholder: "Add your review",
maxCommentLength: 30,
readOnly: true,
});
anno.on("selectAnnotation", function (annotation) {
console.log("selected", annotation);
});
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.on("mouseEnterAnnotation", function (annotation) {
console.log("mouseEnter", annotation);
});
anno.on("mouseLeaveAnnotation", function (annotation) {
console.log("mouseLeave", annotation);
});
anno.loadAnnotations("annotations.w3c.json");
var toolToggle = document.getElementById("current-tool");
toolToggle.addEventListener("click", function () {
if (toolToggle.innerHTML == "RECTANGLE") {
toolToggle.innerHTML = "POLYGON";
anno.setDrawingTool("polygon");
} else {
toolToggle.innerHTML = "RECTANGLE";
anno.setDrawingTool("rect");
}
});
var toolToggle = document.getElementById("enable-draw");
toolToggle.addEventListener("click", function () {
anno.setDrawingEnabled(true);
});
};
</script>
</head>
<body>
<div class="column">
<h1>Annotorious | OpenSeadragon Example</h1>
<p class="instructions">
Click the annotation to edit. Hold <strong>SHIFT</strong> while clicking
and dragging the mouse to create a new annotation.
</p>
<p>
<button id="current-tool">RECTANGLE</button>
<button id="enable-draw">ENABLE DRAW</button>
</p>
<div id="openseadragon" style="width: 640px; height: 480px"></div>
</div>
<script src="openseadragon/openseadragon.2.4.2.min.js"></script>
<script type="text/javascript" src="openseadragon-annotorious.min.js"></script></body>
</html>