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
<foreignObject height="100%" width="100%" x="{{ x * size[0] }}" y="{{ y * size[1] }}">
6
<div class="shape-label">
7
{{ text }}
8
</div>
9
</foreignObject>
10
{% endif %}
11
{% endmacro %}
12
{% block content %}
13
<x-frame style="--width: 768px">
14
<h1>{{ resource.title }}</h1>
15
<p>{{ resource.description }}</p>
16
<p>
17
<a href="{{ resource.origin_url }}">Original source</a> |
18
<a href="/raw/picture/{{ resource.id }}">View</a> |
19
<a href="/raw/picture/{{ resource.id }}" download="GigadataPicture_{{ resource.id }}{{ file_extension }}">Download</a> |
20
<a href="/picture/{{ resource.id }}/annotate">Annotate</a> |
21
<a href="/picture/{{ resource.id }}/put-annotations-form">Submit JSON annotations</a> |
22
<a href="/picture/{{ resource.id }}/get-annotations">Download annotations</a>
23
</p>
24
<div id="annotation-zone">
25
<img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="{{ resource.title }}">
26
{% for region in resource.regions %}
27
{% if region.json.type == "bbox" %}
28
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
29
<rect x="{{ region.json.shape.x * size[0] }}"
30
y="{{ region.json.shape.y * size[1] }}"
31
width="{{ region.json.shape.w * size[0] }}"
32
height="{{ region.json.shape.h * size[1] }}"
33
fill="none" class="shape-bbox shape"
34
></rect>
35
{% set centre_x = region.json.shape.x + region.json.shape.w / 2 %}
36
{% set centre_y = region.json.shape.y + region.json.shape.h / 2 %}
37
{{ shape_label(centre_x, centre_y, region.object_id) }}
38
</svg>
39
{% elif region.json.type == "polygon" %}
40
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
41
<polygon points="{% for point in region.json.shape %}{{ point.x * size[0] }},{{ point.y * size[1] }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
42
{% set top = region.json.shape | sort(attribute='y') | last %}
43
{% set left = region.json.shape | sort(attribute='x') | first %}
44
{% set bottom = region.json.shape | sort(attribute='y') | first %}
45
{% set right = region.json.shape | sort(attribute='x') | last %}
46
{% set centre_x = (left.x + right.x) / 2 %}
47
{% set centre_y = (top.y + bottom.y) / 2 %}
48
{{ shape_label(centre_x, centre_y, region.object_id) }}
49
</svg>
50
{% elif region.json.type == "polyline" %}
51
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
52
<polyline points="{% for point in region.json.shape %}{{ point.x * size[0] }},{{ point.y * size[1] }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
53
{# Median point #}
54
{% set centre_x = region.json.shape | map(attribute="x") | median %}
55
{% set centre_y = region.json.shape | map(attribute="y") | median %}
56
{{ shape_label(centre_x, centre_y, region.object_id) }}
57
</svg>
58
{% elif region.json.type == "point" %}
59
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
60
<circle cx="{{ region.json.shape.x * size[0] }}" cy="{{ region.json.shape.y * size[1] }}" r="0" fill="none" class="shape-point shape"></circle>
61
{{ shape_label(region.json.shape.x, region.json.shape.y, region.object_id) }}
62
</svg>
63
{% endif %}
64
{% endfor %}
65
</div>
66
<x-buttonbox>
67
<label>
68
<input type="checkbox" id="show-shapes" checked>
69
Show shapes
70
</label>
71
<label>
72
<input type="checkbox" id="show-objects" checked>
73
Show objects
74
</label>
75
</x-buttonbox>
76
{% set licences = resource.licences | map(attribute="licence") | list %}
77
{% set contains = resource.regions | map(attribute="object_id") | set | sort | select | list %}
78
<x-vbox>
79
<div class="icon-explainer">
80
<span>Type</span>
81
<span>{{ resource.nature.id }}</span>
82
<span>File format</span>
83
<span>{{ resource.file_format }}</span>
84
<span>Size</span>
85
<span>{{ size[0] }}×{{ size[1] }}</span>
86
<span>Number of regions</span>
87
<span>{{ resource.regions | length }}</span>
88
<span>Number of labelled regions</span>
89
<span>{{ resource.regions | selectattr("object_id") | list | length }}</span>
90
<span>Date uploaded</span>
91
<span>{{ resource.timestamp }}</span>
92
</div>
93
Contains objects: {{ contains | join(", ") }}
94
<x-hbox style="justify-content: space-between">
95
<small class="picture-licensing-info">
96
Available under:
97
{% for licence in licences %}
98
<a href="{{ licence.info_url }}" target="_blank">
99
{{ licence.title }}
100
</a>
101
{% if not loop.last %}, {% endif %}
102
{% endfor %}
103
</small>
104
<x-vbox class="picture-licence-logos">
105
{% for licence in licences %}
106
{% if licence.logo_url %}
107
{% if licence.info_url %}
108
<a href="{{ licence.info_url }}" target="_blank" tabindex="-1">
109
{# An equivalent link already exists, only one is focusable #}
110
<img src="{{ licence.logo_url }}" alt="{{ licence.title }}" class="licence-logo">
111
</a>
112
{% else %}
113
<img src="{{ licence.logo_url }}" alt="{{ licence.title }}" class="licence-logo">
114
{% endif %}
115
{% endif %}
116
{% endfor %}
117
</x-vbox>
118
</x-hbox>
119
</x-vbox>
120
</x-frame>
121
{% endblock %}