graphical-query-pictures-results.html
HTML document, ASCII text
1{% extends "default.html" %} 2 3{% block title %}Picture query results | gigadata{% endblock %} 4 5{% block content %} 6<x-frame style="--width: 768px" class="vbox"> 7<h1>Picture query results</h1> 8<details> 9<summary>Query YAML</summary> 10<pre>{{ query }}</pre> 11</details> 12<p> 13Found {{ resources.total }} pictures. 14</p> 15<ul class="thumbnail-list"> 16{% for resource in resources %} 17<li> 18<a href="/picture/{{ resource.id }}"> 19<div class="annotation-zone"> 20<img src="/raw/picture/{{ resource.id }}" alt="{{ resource.title }}"> 21{% for region in resource.regions %} 22{% if region.json.type == "bbox" %} 23<svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}"> 24<rect x="{{ region.json.shape.x * resource.width }}" 25y="{{ region.json.shape.y * resource.height }}" 26width="{{ region.json.shape.w * resource.width }}" 27height="{{ region.json.shape.h * resource.height }}" 28fill="none" class="shape-bbox shape" 29></rect> 30</svg> 31{% elif region.json.type == "polygon" %} 32<svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}"> 33<polygon points="{% for point in region.json.shape %}{{ point.x * resource.width }},{{ point.y * resource.height }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon> 34</svg> 35{% elif region.json.type == "polyline" %} 36<svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}"> 37<polyline points="{% for point in region.json.shape %}{{ point.x * resource.width }},{{ point.y * resource.height }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline> 38</svg> 39{% elif region.json.type == "point" %} 40<svg class="shape-container" viewBox="0 0 {{ resource.width }} {{ resource.height }}"> 41<circle cx="{{ region.json.shape.x * resource.width }}" cy="{{ region.json.shape.y * resource.height }}" r="0" fill="none" class="shape-point shape"></circle> 42</svg> 43{% endif %} 44{% endfor %} 45</div> 46<div class="list-detail"> 47{{ resource.title }} 48</div> 49</a> 50</li> 51{% endfor %} 52</ul> 53{% include "pagination.html" %} 54</x-frame> 55{% endblock %} 56