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