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