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