HTML document, ASCII text
1
{% extends "default.html" %}
2
{% block nav_title %}{{ resource.title }}{% endblock %}
4
{% block title %}Annotating picture {{ resource.title }} | {{ site_name }}{% endblock %}
5
{% set back_url = "/picture/" + resource.id|string %}
6
{% set fixed_content_area = true %}
7
{% block content %}
9
<style>
10
py-script {
11
display: none;
12
}
13
/* Full PyScript style is too much, but we still need to hide the Python code */
14
</style>
15
<script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>
16
<x-frame id="annotation-main-area">
18
<x-hbox id="annotation-controls">
19
<x-buttonbox id="shape-selector">
20
<button class="button-flat" title="selection" id="select">
21
<iconify-icon icon="mdi:cursor-default"></iconify-icon>
22
</button>
23
<button class="button-flat" title="rectangle" id="shape-bbox">
24
<iconify-icon icon="mdi:square"></iconify-icon>
25
</button>
26
<button class="button-flat" title="polygon" id="shape-polygon">
27
<iconify-icon icon="mdi:pentagon"></iconify-icon>
28
</button>
29
<button class="button-flat" title="polyline" id="shape-polyline">
30
<iconify-icon icon="mdi:graph-line-variant"></iconify-icon>
31
</button>
32
<button class="button-flat" title="point" id="shape-point">
33
<iconify-icon icon="mdi:crosshairs-gps"></iconify-icon>
34
</button>
35
</x-buttonbox>
36
<x-buttonbox style="display: none;" id="shape-options">
37
<button class="button-flat" title="cancel" id="annotation-cancel">
38
<iconify-icon icon="mdi:close"></iconify-icon>
39
</button>
40
<button class="button-flat" title="apply" id="annotation-confirm">
41
<iconify-icon icon="mdi:check"></iconify-icon>
42
</button>
43
<button class="button-flat" title="remove last point" id="annotation-backspace">
44
<iconify-icon icon="mdi:backspace"></iconify-icon>
45
</button>
46
<button class="button-flat" title="delete shape" id="annotation-delete">
47
<iconify-icon icon="mdi:delete"></iconify-icon>
48
</button>
49
<button class="button-flat" title="select previous shape" id="annotation-previous">
50
<iconify-icon icon="mdi:chevron-left"></iconify-icon>
51
</button>
52
<button class="button-flat" title="select next shape" id="annotation-next">
53
<iconify-icon icon="mdi:chevron-right"></iconify-icon>
54
</button>
55
<div class="flexible-space"></div>
56
<button id="annotation-save">
57
Save
58
</button>
59
</x-buttonbox>
60
</x-hbox>
61
<div id="annotation-zoom-container">
62
<div id="annotation-zone">
63
<x-vbox id="object-types" style="--gap-box: 0.25rem; --padding-box: 1rem;">
64
<input type="text" id="filter-object-types" placeholder="Search" aria-label="Search object types">
65
<x-vbox id="object-types-content"></x-vbox>
66
</x-vbox>
67
<img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="">
68
<div id="annotation-ruler-vertical" class="annotation-ruler"></div>
69
<div id="annotation-ruler-horizontal" class="annotation-ruler"></div>
70
<div id="annotation-ruler-vertical-secondary" class="annotation-ruler"></div>
71
<div id="annotation-ruler-horizontal-secondary" class="annotation-ruler"></div>
72
</div>
73
</div>
74
<p id="annotation-helper-message">Please wait for Python to load...</p>
75
</x-frame>
76
<input type="hidden" id="resource-id" name="resource-id" value="{{ resource.id }}">
77
<script type="mpy" src="/static/picture-annotation.py"></script>
78
{% endblock %}
79