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