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