HTML document, ASCII text
1
{% extends "default.html" %}
2
{% block title %}Picture {{ resource.title }} | gigadata{% endblock %}
3
{% macro shape_label(x, y, text) %}
4
{% if text %}
5
<a class="shape-label" style="left: {{ x * 100 }}%; top: {{ y * 100 }}%" href="/object/{{ text }}">
6
{{ text }}
7
</a>
8
{% endif %}
9
{% endmacro %}
10
{% block content %}
11
<x-frame style="--width: 768px">
12
<h1>{{ resource.title }}</h1>
13
<p>{{ resource.description }}</p>
14
<p>
15
<a href="{{ resource.origin_url }}">Original source</a> |
16
<a href="/raw/picture/{{ resource.id }}">View</a> |
17
<a href="/picture/{{ resource.id }}/get-annotations">Download annotations</a> |
18
<a href="/raw/picture/{{ resource.id }}" download="GigadataPicture_{{ resource.id }}{{ file_extension }}">Download</a> {% if have_permission %}|
19
<a href="/picture/{{ resource.id }}/annotate">Annotate</a> |
20
<a href="/picture/{{ resource.id }}/put-annotations-form">Submit JSON annotations</a> |
21
<a href="/picture/{{ resource.id }}/edit-metadata">Edit title or description</a>{% endif %} {% if current_user %}|
22
<a href="/picture/{{ resource.id }}/copy">Copy</a>{% endif %}
23
</p>
24
{% if have_permission %}
25
<details>
26
<summary>Delete</summary>
27
<a href="/picture/{{ resource.id }}/delete">Delete</a>
28
</details>
29
{% endif %}
30
<div id="annotation-zone">
31
<img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="{{ resource.title }}">
32
{% for region in resource.regions %}
33
{% if region.json.type == "bbox" %}
34
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
35
<rect x="{{ region.json.shape.x * size[0] }}"
36
y="{{ region.json.shape.y * size[1] }}"
37
width="{{ region.json.shape.w * size[0] }}"
38
height="{{ region.json.shape.h * size[1] }}"
39
fill="none" class="shape-bbox shape"
40
></rect>
41
{% set centre_x = region.json.shape.x + region.json.shape.w / 2 %}
42
{% set centre_y = region.json.shape.y + region.json.shape.h / 2 %}
43
</svg>
44
{% elif region.json.type == "polygon" %}
45
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
46
<polygon points="{% for point in region.json.shape %}{{ point.x * size[0] }},{{ point.y * size[1] }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
47
{% set top = region.json.shape | sort(attribute='y') | last %}
48
{% set left = region.json.shape | sort(attribute='x') | first %}
49
{% set bottom = region.json.shape | sort(attribute='y') | first %}
50
{% set right = region.json.shape | sort(attribute='x') | last %}
51
{% set centre_x = (left.x + right.x) / 2 %}
52
{% set centre_y = (top.y + bottom.y) / 2 %}
53
</svg>
54
{% elif region.json.type == "polyline" %}
55
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
56
<polyline points="{% for point in region.json.shape %}{{ point.x * size[0] }},{{ point.y * size[1] }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
57
{# Median point #}
58
{% set centre_x = region.json.shape | map(attribute="x") | median %}
59
{% set centre_y = region.json.shape | map(attribute="y") | median %}
60
</svg>
61
{% elif region.json.type == "point" %}
62
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
63
<circle cx="{{ region.json.shape.x * size[0] }}" cy="{{ region.json.shape.y * size[1] }}" r="0" fill="none" class="shape-point shape"></circle>
64
</svg>
65
{% endif %}
66
{{ shape_label(centre_x, centre_y, region.object_id) }}
67
{% endfor %}
68
</div>
69
<x-buttonbox>
70
<label>
71
<input type="checkbox" id="show-shapes" checked>
72
Show shapes
73
</label>
74
<label>
75
<input type="checkbox" id="show-objects" checked>
76
Show objects
77
</label>
78
</x-buttonbox>
79
{% set licences = resource.licences | map(attribute="licence") | list %}
80
{% set contains = resource.regions | map(attribute="object_id") | set | select | sort | list %}
81
<x-vbox>
82
<div class="icon-explainer">
83
<span>Type</span>
84
<span>{{ resource.nature.id }}</span>
85
<span>File format</span>
86
<span>{{ resource.file_format }}</span>
87
<span>Size</span>
88
<span>{{ size[0] }}×{{ size[1] }}</span>
89
<span>Number of regions</span>
90
<span>{{ resource.regions | length }}</span>
91
<span>Number of labelled regions</span>
92
<span>{{ resource.regions | selectattr("object_id") | list | length }}</span>
93
<span>Date uploaded</span>
94
<span>{{ resource.timestamp }}</span>
95
</div>
96
Contains objects: {{ contains | join(", ") }}
97
<x-hbox style="justify-content: space-between">
98
<small class="picture-licensing-info">
99
Available under:
100
{% for licence in licences %}
101
<a href="{{ licence.info_url }}" target="_blank">
102
{{ licence.title }}
103
</a>
104
{% if not loop.last %}, {% endif %}
105
{% endfor %}
106
</small>
107
<x-vbox class="picture-licence-logos">
108
{% for licence in licences %}
109
{% if licence.logo_url %}
110
{% if licence.info_url %}
111
<a href="{{ licence.info_url }}" target="_blank" tabindex="-1">
112
{# An equivalent link already exists, only one is focusable #}
113
<img src="{{ licence.logo_url }}" alt="{{ licence.title }}" class="licence-logo">
114
</a>
115
{% else %}
116
<img src="{{ licence.logo_url }}" alt="{{ licence.title }}" class="licence-logo">
117
{% endif %}
118
{% endif %}
119
{% endfor %}
120
</x-vbox>
121
</x-hbox>
122
<h2>Copies</h2>
123
<ul class="thumbnail-list">
124
{% for copy in resource.copies %}
125
<li>
126
<a href="/picture/{{ copy.id }}">
127
<div class="annotation-zone">
128
<img src="/raw/picture/{{ copy.id }}" alt="{{ copy.title }}">
129
{% for region in copy.regions %}
131
{% if region.json.type == "bbox" %}
132
<svg class="shape-container" viewBox="0 0 {{ copy.width }} {{ copy.height }}">
133
<rect x="{{ region.json.shape.x * copy.width }}"
134
y="{{ region.json.shape.y * copy.height }}"
135
width="{{ region.json.shape.w * copy.width }}"
136
height="{{ region.json.shape.h * copy.height }}"
137
fill="none" class="shape-bbox shape"
138
></rect>
139
</svg>
140
{% elif region.json.type == "polygon" %}
141
<svg class="shape-container" viewBox="0 0 {{ copy.width }} {{ copy.height }}">
142
<polygon points="{% for point in region.json.shape %}{{ point.x * copy.width }},{{ point.y * copy.height }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
143
</svg>
144
{% elif region.json.type == "polyline" %}
145
<svg class="shape-container" viewBox="0 0 {{ copy.width }} {{ copy.height }}">
146
<polyline points="{% for point in region.json.shape %}{{ point.x * copy.width }},{{ point.y * copy.height }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
147
</svg>
148
{% elif region.json.type == "point" %}
149
<svg class="shape-container" viewBox="0 0 {{ copy.width }} {{ copy.height }}">
150
<circle cx="{{ region.json.shape.x * copy.width }}" cy="{{ region.json.shape.y * copy.height }}" r="0" fill="none" class="shape-point shape"></circle>
151
</svg>
152
{% endif %}
153
{% endfor %}
154
</div>
155
<div class="list-detail">
156
{{ copy.title }}
157
</div>
158
</a>
159
</li>
160
{% endfor %}
161
</x-vbox>
162
</x-frame>
163
{% endblock %}