HTML document, ASCII text
1
{% extends "default.html" %}
2
{% block title %}Picture | 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
<div class="icon-explainer">
17
<span>Type:</span>
18
<span>{{ resource.nature.id }}</span>
19
<span>File format:</span>
20
<span>{{ resource.file_format }}</span>
21
<span>Size:</span>
22
<span>{{ size[0] }}×{{ size[1] }}</span>
23
</div>
24
<p>
25
<a href="{{ resource.origin_url }}">Original source</a> |
26
<a href="/raw/picture/{{ resource.id }}">View</a> |
27
<a href="/raw/picture/{{ resource.id }}" download="GigadataPicture_{{ resource.id }}{{ file_extension }}">Download</a> |
28
<a href="/picture/{{ resource.id }}/annotate">Annotate</a>
29
</p>
30
<div id="annotation-zone">
31
<img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="{{ resource.title }}">
32
{% for region in resource.regions %}
33
{% if region.json.type == "bbox" %}
34
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
35
<rect x="{{ region.json.shape.x * size[0] }}"
36
y="{{ region.json.shape.y * size[1] }}"
37
width="{{ region.json.shape.w * size[0] }}"
38
height="{{ region.json.shape.h * size[1] }}"
39
fill="none" class="shape-bbox shape"
40
></rect>
41
{% set centre_x = region.json.shape.x + region.json.shape.w / 2 %}
42
{% set centre_y = region.json.shape.y + region.json.shape.h / 2 %}
43
{{ shape_label(centre_x, centre_y, region.object_id) }}
44
</svg>
45
{% elif region.json.type == "polygon" %}
46
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
47
<polygon points="{% for point in region.json.shape %}{{ point.x * size[0] }},{{ point.y * size[1] }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon>
48
{% set top = region.json.shape | sort(attribute='y') | last %}
49
{% set left = region.json.shape | sort(attribute='x') | first %}
50
{% set bottom = region.json.shape | sort(attribute='y') | first %}
51
{% set right = region.json.shape | sort(attribute='x') | last %}
52
{% set centre_x = (left.x + right.x) / 2 %}
53
{% set centre_y = (top.y + bottom.y) / 2 %}
54
{{ shape_label(centre_x, centre_y, region.object_id) }}
55
</svg>
56
{% elif region.json.type == "polyline" %}
57
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
58
<polyline points="{% for point in region.json.shape %}{{ point.x * size[0] }},{{ point.y * size[1] }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
59
{# Median point #}
60
{% set centre_x = region.json.shape | map(attribute="x") | median %}
61
{% set centre_y = region.json.shape | map(attribute="y") | median %}
62
{{ shape_label(centre_x, centre_y, region.object_id) }}
63
</svg>
64
{% elif region.json.type == "point" %}
65
<svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
66
<circle cx="{{ region.json.shape.x * size[0] }}" cy="{{ region.json.shape.y * size[1] }}" r="0" fill="none" class="shape-point shape"></circle>
67
{{ shape_label(region.json.shape.x, region.json.shape.y, region.object_id) }}
68
</svg>
69
{% endif %}
70
{% endfor %}
71
</div>
72
<x-buttonbox>
73
<label>
74
<input type="checkbox" id="show-shapes" checked>
75
Show shapes
76
</label>
77
<label>
78
<input type="checkbox" id="show-objects" checked>
79
Show objects
80
</label>
81
</x-buttonbox>
82
</x-frame>
83
{% endblock %}