HTML document, ASCII text
1
{% extends "default.html" %}
2
{% block title %}Picture | gigadata{% endblock %}
3
{% block content %}
4
<x-frame style="--width: 768px">
5
<h1>{{ resource.title }}</h1>
6
<p>{{ resource.description }}</p>
7
<p>{{ resource.file_format }}</p>
8
<div id="annotation-zone">
9
<img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="{{ resource.title }}">
10
{% for region in resource.regions %}
11
{% if region.json.type == "bbox" %}
12
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
13
<rect x="{{ region.json.shape.x * size[0] }}"
14
y="{{ region.json.shape.y * size[1] }}"
15
width="{{ region.json.shape.width * size[0] }}"
16
height="{{ region.json.shape.height * size[1] }}"
17
fill="none" class="shape-bbox shape"
18
></rect>
19
</svg>
20
{% elif region.json.type == "polygon" %}
21
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
22
<polygon points="{% for point in region.json.shape %}{{ point.x * size[0] }},{{ point.y * size[1] }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
23
{% set top = region.json.shape | sort(attribute='y') | last %}
24
{% set left = region.json.shape | sort(attribute='x') | first %}
25
{% set bottom = region.json.shape | sort(attribute='y') | first %}
26
{% set right = region.json.shape | sort(attribute='x') | last %}
27
{% set centre_x = (left.x + right.x) / 2 %}
28
{% set centre_y = (top.y + bottom.y) / 2 %}
29
<foreignObject height="100%" width="100%" x="{{ centre_x * size[0] }}" y="{{ centre_y * size[1] }}">
30
<div class="shape-label">
31
{{ region.object_id }}
32
</div>
33
</foreignObject>
34
</svg>
35
{% elif region.json.type == "polyline" %}
36
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
37
<polyline points="{% for point in region.json.shape %}{{ point.x * size[0] }},{{ point.y * size[1] }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
38
</svg>
39
{% elif region.json.type == "point" %}
40
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
41
<circle cx="{{ region.json.shape.x * size[0] }}" cy="{{ region.json.shape.y * size[1] }}" r="0" fill="none" class="shape-point shape"></circle>
42
</svg>
43
{% endif %}
44
{% endfor %}
45
</div>
46
<x-buttonbox>
47
<label>
48
<input type="checkbox" id="show-shapes" checked>
49
Show shapes
50
</label>
51
<label>
52
<input type="checkbox" id="show-objects" checked>
53
Show objects
54
</label>
55
</x-buttonbox>
56
<p>
57
<a href="{{ resource.origin_url }}">Original source</a> |
58
<a href="/raw/picture/{{ resource.id }}">View</a> |
59
<a href="/raw/picture/{{ resource.id }}" download="GigadataPicture_{{ resource.id }}{{ file_extension }}">Download</a> |
60
<a href="/picture/{{ resource.id }}/annotate">Annotate</a>
61
</p>
62
</x-frame>
63
{% endblock %}