HTML document, ASCII text
1
{% extends "default.html" %}
2
{% block title %}Picture | gigadata{% endblock %}
3
{% block content %}
4
<style>
5
py-script {
6
display: none;
7
}
8
/* Full PyScript style is too much, but we still need to hide the Python code */
9
</style>
10
<script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>
11
<x-frame style="--width: 768px">
13
<h1>Annotating: {{ resource.title }}</h1>
14
<p id="annotation-helper-message">Please wait for Python to load...</p>
15
</x-frame>
16
<x-frame id="main-area">
17
<x-buttonbox id="shape-selector">
18
<button class="button-flat" title="selection" id="select">
19
<iconify-icon icon="mdi:cursor-default"></iconify-icon>
20
</button>
21
<button class="button-flat" title="rectangle" id="shape-bbox">
22
<iconify-icon icon="mdi:square"></iconify-icon>
23
</button>
24
<button class="button-flat" title="polygon" id="shape-polygon">
25
<iconify-icon icon="mdi:pentagon"></iconify-icon>
26
</button>
27
<button class="button-flat" title="line" id="shape-line">
28
<iconify-icon icon="mdi:graph-line-variant"></iconify-icon>
29
</button>
30
<button class="button-flat" title="point" id="shape-point">
31
<iconify-icon icon="mdi:crosshairs-gps"></iconify-icon>
32
</button>
33
<button class="button-flat" title="whole picture" id="shape-all">
34
<iconify-icon icon="mdi:image"></iconify-icon>
35
</button>
36
</x-buttonbox>
37
<div id="annotation-zone">
38
<img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="">
39
<div id="annotation-ruler-vertical" class="annotation-ruler"></div>
40
<div id="annotation-ruler-horizontal" class="annotation-ruler"></div>
41
<div id="annotation-ruler-vertical-secondary" class="annotation-ruler"></div>
42
<div id="annotation-ruler-horizontal-secondary" class="annotation-ruler"></div>
43
</div>
44
<x-buttonbox style="display: none;" id="shape-options">
45
<button class="button-flat" title="cancel" id="annotation-cancel">
46
<iconify-icon icon="mdi:close"></iconify-icon>
47
</button>
48
<button class="button-flat" title="apply" id="annotation-confirm">
49
<iconify-icon icon="mdi:check"></iconify-icon>
50
</button>
51
<button class="button-flat" title="remove last point" id="annotation-backspace">
52
<iconify-icon icon="mdi:backspace"></iconify-icon>
53
</button>
54
<button class="button-flat" title="delete shape" id="annotation-delete">
55
<iconify-icon icon="mdi:delete"></iconify-icon>
56
</button>
57
<button class="button-flat" title="select previous shape" id="annotation-previous">
58
<iconify-icon icon="mdi:chevron-left"></iconify-icon>
59
</button>
60
<button class="button-flat" title="select next shape" id="annotation-next">
61
<iconify-icon icon="mdi:chevron-right"></iconify-icon>
62
</button>
63
</x-buttonbox>
64
<x-vbox id="object-types" style="--gap-box: 0.25rem; --padding-box: 1rem;">
65
</x-vbox>
66
</x-frame>
67
<script type="py" src="/static/picture-annotation.py"></script>
68
{% endblock %}