HTML document, ASCII text
1
{% extends "default.html" %}
2
{% block nav_title %}{{ resource.title }}{% endblock %}
4
{% block title %}Picture {{ resource.title }} | {{ site_name }}{% endblock %}
5
{% macro shape_label(x, y, text) %}
6
{% if text %}
7
<a class="shape-label" style="left: {{ x * 100 }}%; top: {{ y * 100 }}%" href="/object/{{ text | urlencode }}">
8
{{ text }}
9
</a>
10
{% endif %}
11
{% endmacro %}
12
{% block content %}
13
<div id="picture-view">
14
<x-frame id="picture-actions">
15
<ul class="action-list">
16
<li><a href="/raw/picture/{{ resource.id }}" download="GigadataPicture_{{ resource.id }}{{ file_extension }}">
17
<iconify-icon icon="mdi:download"></iconify-icon>Download
18
</a></li>
19
<li><a href="/picture/{{ resource.id }}/get-annotations">
20
<iconify-icon icon="ic:baseline-account-tree"></iconify-icon>JSON annotations
21
</a></li>
22
<li><a href="/raw/picture/{{ resource.id }}" target="_blank">
23
<iconify-icon icon="mdi:image"></iconify-icon>View separately
24
</a></li>
25
{% if have_permission %}
26
<li><a href="/picture/{{ resource.id }}/annotate">
27
<iconify-icon icon="mdi:vector-point-select"></iconify-icon>Annotate
28
</a></li>
29
{% endif %}
30
{% if resource.origin_url %}
31
<li><a href="{{ resource.origin_url }}">
32
<iconify-icon icon="mdi:web"></iconify-icon>Original source
33
</a></li>
34
{% endif %}
35
{% if resource.replaced_by %}
36
<li><a href="/picture/{{ resource.replaced_by.id }}">
37
<iconify-icon icon="mdi:new-releases"></iconify-icon>Replacement
38
</a></li>
39
{% endif %}
40
{% if resource.replaces %}
41
<li><a href="/picture/{{ resource.replaces.id }}">
42
<iconify-icon icon="mdi:archive"></iconify-icon>Old version
43
</a></li>
44
{% endif %}
45
{% if current_user %}
46
<li><a href="/picture/{{ resource.id }}/copy">
47
<iconify-icon icon="mdi:content-copy"></iconify-icon>Copy
48
</a></li>
49
{% endif %}
50
{% if have_permission %}
51
<li><a href="/picture/{{ resource.id }}/put-annotations-form">
52
<iconify-icon icon="mdi:file-edit"></iconify-icon>Submit JSON annotations
53
</a></li>
54
<li><a href="/picture/{{ resource.id }}/edit-metadata">
55
<iconify-icon icon="mdi:edit"></iconify-icon>Edit metadata
56
</a></li>
57
{% endif %}
58
{% if have_permission %}
59
<li><details>
60
<summary>
61
<iconify-icon icon="mdi:delete"></iconify-icon>Delete
62
</summary>
63
<a href="/picture/{{ resource.id }}/delete">Confirm deletion</a>
64
</details></li>
65
{% endif %}
66
</ul>
67
</x-frame>
68
<x-frame style="--width: 768px">
69
<h1>{{ resource.title }}</h1>
70
<p>by <a href="/profile/{{ resource.author.username }}">{{ resource.author.formatted_name }}</a></p>
71
<p>{{ resource.description }}</p>
72
{% if resource.replaced_by %}
73
<div class="warning">
74
<h2>Obsolete</h2>
75
<p>
76
This picture has been replaced by <a href="/picture/{{ resource.replaced_by.id }}">{{ resource.replaced_by.title }}</a>.
77
</p>
78
{% if have_permission %}
79
<form method="POST" action="/picture/{{ resource.id }}/remove-replacement">
80
<button class="button-flat button-neutral" type="submit">Remove replacement</button>
81
</form>
82
{% endif %}
83
</div>
84
{% endif %}
85
<x-vbox>
86
<div id="annotation-zone">
87
<img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="{{ resource.title }}">
88
{% for region in resource.regions %}
89
{% if region.json.type == "bbox" %}
90
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
91
<rect x="{{ region.json.shape.x * size[0] }}"
92
y="{{ region.json.shape.y * size[1] }}"
93
width="{{ region.json.shape.w * size[0] }}"
94
height="{{ region.json.shape.h * size[1] }}"
95
fill="none" class="shape-bbox shape"
96
></rect>
97
{% set centre_x = region.json.shape.x + region.json.shape.w / 2 %}
98
{% set centre_y = region.json.shape.y + region.json.shape.h / 2 %}
99
</svg>
100
{% elif region.json.type == "polygon" %}
101
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
102
<polygon points="{% for point in region.json.shape %}{{ point.x * size[0] }},{{ point.y * size[1] }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
103
{% set top = region.json.shape | sort(attribute='y') | last %}
104
{% set left = region.json.shape | sort(attribute='x') | first %}
105
{% set bottom = region.json.shape | sort(attribute='y') | first %}
106
{% set right = region.json.shape | sort(attribute='x') | last %}
107
{% set centre_x = (left.x + right.x) / 2 %}
108
{% set centre_y = (top.y + bottom.y) / 2 %}
109
</svg>
110
{% elif region.json.type == "polyline" %}
111
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
112
<polyline points="{% for point in region.json.shape %}{{ point.x * size[0] }},{{ point.y * size[1] }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
113
{# Median point #}
114
{% set centre_x = region.json.shape | map(attribute="x") | median %}
115
{% set centre_y = region.json.shape | map(attribute="y") | median %}
116
</svg>
117
{% elif region.json.type == "point" %}
118
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
119
<circle cx="{{ region.json.shape.x * size[0] }}" cy="{{ region.json.shape.y * size[1] }}" r="0" fill="none" class="shape-point shape"></circle>
120
</svg>
121
{% endif %}
122
{{ shape_label(centre_x, centre_y, region.object_id) }}
123
{% endfor %}
124
</div>
125
<x-buttonbox id="annotation-view-controls">
126
<label>
127
<input type="checkbox" id="show-shapes" checked>
128
Show shapes
129
</label>
130
<label>
131
<input type="checkbox" id="show-objects" checked>
132
Show objects
133
</label>
134
</x-buttonbox>
135
{% set licences = resource.licences | map(attribute="licence") | list %}
136
{% set contains = resource.regions | map(attribute="object_id") | set | select | sort | list %}
137
<h2>Ratings ({{ resource.rating_totals.values() | sum }})</h2>
138
<x-hbox>
139
<x-vbox>
140
{% if resource.average_rating %}
141
<div class="rating-bar">
142
{% for i in range(1, 6) %}
143
<div class="rating-bar-segment">
144
<div class="rating-bar-filling" style="width: {{ resource.stars[i-1] }}%"></div>
145
</div>
146
{% endfor %}
147
</div>
148
<p>
149
<span>Average rating:</span>
150
<span>{{ resource.average_rating | round(2) }}</span>
151
from {{ resource.rating_totals.values() | sum }} ratings
152
</p>
153
{% endif %}
154
{% if current_user %}
155
<h3>Your rating</h3>
156
<form id="rating-form" method="POST" action="/picture/{{ resource.id }}/rate">
157
<label>
158
<input name="rating" type="radio" value="0" {% if not own_rating.rating %}checked{% endif %}>
159
Clear rating
160
</label>
161
<div class="star-rating-container">
162
<input type="radio" id="stars-5" name="rating" value="5" title="Perfect" {% if own_rating.rating == 5 %}checked{% endif %}>
163
<label for="stars-5" tabindex="0"><iconify-icon icon="mdi:star" class="star">5 stars</iconify-icon></label>
164
<input type="radio" id="stars-4" name="rating" value="4" title="Good" {% if own_rating.rating == 4 %}checked{% endif %}>
165
<label for="stars-4" tabindex="0"><iconify-icon icon="mdi:star" class="star">4 stars</iconify-icon></label>
166
<input type="radio" id="stars-3" name="rating" value="3" title="OK" {% if own_rating.rating == 3 %}checked{% endif %}>
167
<label for="stars-3" tabindex="0"><iconify-icon icon="mdi:star" class="star">3 stars</iconify-icon></label>
168
<input type="radio" id="stars-2" name="rating" value="2" title="Poor" {% if own_rating.rating == 2 %}checked{% endif %}>
169
<label for="stars-2" tabindex="0"><iconify-icon icon="mdi:star" class="star">2 stars</iconify-icon></label>
170
<input type="radio" id="stars-1" name="rating" value="1" title="Awful" {% if own_rating.rating == 1 %}checked{% endif %}>
171
<label for="stars-1" tabindex="0"><iconify-icon icon="mdi:star" class="star">1 star</iconify-icon></label>
172
</div>
173
<button type="submit">Rate</button>
174
</form>
175
{% endif %}
176
</x-vbox>
177
{% if resource.average_rating %}
178
<ul class="rating-list flexible-space">
179
{% for i in range(5, 0, -1) %}
180
<li style="grid-column-end: {{ resource.rating_totals[i] + 2 }}; background: var(--{{ i }}-star);">
181
<span>{{ i }}:</span>
182
<span>{{ resource.rating_totals[i] }}</span>
183
</li>
184
{% endfor %}
185
</ul>
186
{% else %}
187
<p>No ratings yet.</p>
188
{% endif %}
189
</x-hbox>
190
<h2>Details</h2>
191
<div class="icon-explainer">
192
<span>Type</span>
193
<span>{{ resource.nature.id }}</span>
194
<span>File format</span>
195
<span>{{ resource.file_format }}</span>
196
<span>Size</span>
197
<span>{{ size[0] }}×{{ size[1] }}</span>
198
<span>Number of regions</span>
199
<span>{{ resource.regions | length }}</span>
200
<span>Number of labelled regions</span>
201
<span>{{ resource.regions | selectattr("object_id") | list | length }}</span>
202
<span>Date uploaded</span>
203
<span>{{ resource.timestamp }}</span>
204
</div>
205
{% if contains %}
206
<p>
207
Contains objects: {% for object_id in contains %}
208
<a href="/object/{{ object_id | urlencode }}">{{ object_id }}</a>{% if not loop.last %}, {% endif %}{% endfor %}
209
</p>
210
{% else %}
211
<p>No labelled regions.</p>
212
{% endif %}
213
<h2>Licensing</h2>
214
<x-hbox style="justify-content: space-between">
215
<small class="picture-licensing-info">
216
Available under:
217
{% for licence in licences %}
218
<a href="{{ licence.info_url }}" target="_blank">
219
{{ licence.title }}
220
</a>
221
{% if not loop.last %}, {% endif %}
222
{% endfor %}
223
</small>
224
<x-vbox class="picture-licence-logos">
225
{% for licence in licences[:6] %}
226
{% if licence.logo_url %}
227
{% if licence.info_url %}
228
<a href="{{ licence.info_url }}" target="_blank" tabindex="-1">
229
{# An equivalent link already exists, only one is focusable #}
230
<img src="{{ licence.logo_url }}" alt="{{ licence.title }}" class="licence-logo">
231
</a>
232
{% else %}
233
<img src="{{ licence.logo_url }}" alt="{{ licence.title }}" class="licence-logo">
234
{% endif %}
235
{% endif %}
236
{% endfor %}
237
{% if licences | length > 6 %}
238
<details>
239
<summary>More</summary>
240
<x-vbox>
241
{% for licence in licences[6:] %}
242
{% if licence.logo_url %}
243
{% if licence.info_url %}
244
<a href="{{ licence.info_url }}" target="_blank" tabindex="-1">
245
{# An equivalent link already exists, only one is focusable #}
246
<img src="{{ licence.logo_url }}" alt="{{ licence.title }}" class="licence-logo">
247
</a>
248
{% else %}
249
<img src="{{ licence.logo_url }}" alt="{{ licence.title }}" class="licence-logo">
250
{% endif %}
251
{% endif %}
252
{% endfor %}
253
</x-vbox>
254
</details>
255
{% endif %}
256
</x-vbox>
257
</x-hbox>
258
<h2>Copies</h2>
259
{% if resource.copies %}
260
<ul class="thumbnail-list">
261
{% for copy in resource.copies %}
262
<li>
263
<a href="/picture/{{ copy.id }}">
264
<div class="annotation-zone">
265
<img src="/raw/picture/{{ copy.id }}" alt="{{ copy.title }}">
266
{% for region in copy.regions %}
268
{% if region.json.type == "bbox" %}
269
<svg class="shape-container" viewBox="0 0 {{ copy.width }} {{ copy.height }}">
270
<rect x="{{ region.json.shape.x * copy.width }}"
271
y="{{ region.json.shape.y * copy.height }}"
272
width="{{ region.json.shape.w * copy.width }}"
273
height="{{ region.json.shape.h * copy.height }}"
274
fill="none" class="shape-bbox shape"
275
></rect>
276
</svg>
277
{% elif region.json.type == "polygon" %}
278
<svg class="shape-container" viewBox="0 0 {{ copy.width }} {{ copy.height }}">
279
<polygon points="{% for point in region.json.shape %}{{ point.x * copy.width }},{{ point.y * copy.height }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
280
</svg>
281
{% elif region.json.type == "polyline" %}
282
<svg class="shape-container" viewBox="0 0 {{ copy.width }} {{ copy.height }}">
283
<polyline points="{% for point in region.json.shape %}{{ point.x * copy.width }},{{ point.y * copy.height }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
284
</svg>
285
{% elif region.json.type == "point" %}
286
<svg class="shape-container" viewBox="0 0 {{ copy.width }} {{ copy.height }}">
287
<circle cx="{{ region.json.shape.x * copy.width }}" cy="{{ region.json.shape.y * copy.height }}" r="0" fill="none" class="shape-point shape"></circle>
288
</svg>
289
{% endif %}
290
{% endfor %}
291
</div>
292
<div class="list-detail">
293
{{ copy.title }}
294
</div>
295
</a>
296
<div class="list-more">
297
<form method="POST" action="/picture/{{ copy.id }}/mark-replacement">
298
<button type="submit">Designate replacement</button>
299
</form>
300
</div>
301
</li>
302
{% endfor %}
303
</ul>
304
{% else %}
305
<p>This picture hasn't got any copies.</p>
306
{% endif %}
307
<h2>Galleries</h2>
309
{% if resource.galleries %}
310
<ul class="thumbnail-list">
311
{% for gallery in resource.galleries %}
312
<li>
313
<a href="/gallery/{{ gallery.gallery.id }}">
314
<div class="list-detail">
315
{{ gallery.gallery.title }}
316
</div>
317
</a>
318
</li>
319
{% endfor %}
320
</ul>
321
{% else %}
322
<p>This picture isn't in any galleries.</p>
323
{% endif %}
324
</x-vbox>
325
</x-frame>
326
</div>
327
<svg width="0" height="0">
328
<defs>
329
<clipPath id="star-clip">
330
<path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21z"></path>
331
</clipPath>
332
</defs>
333
</svg>
334
{% endblock %}