picture.html
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] }}" 23y="{{ region.json.shape.y * size[1] }}" 24width="{{ region.json.shape.w * size[0] }}" 25height="{{ region.json.shape.h * size[1] }}" 26fill="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> 62Show shapes 63</label> 64<label> 65<input type="checkbox" id="show-objects" checked> 66Show 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 %}