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