gallery.html
HTML document, ASCII text
1{% extends "default.html" %} 2 3{% block title %}Gallery {{ gallery.title }} | gigadata{% endblock %} 4 5{% block content %} 6<x-frame style="--width: 768px" class="vbox"> 7<h1>{{ gallery.title }}</h1> 8<p>{{ gallery.description }}</p> 9{% if have_permission %} 10<form class="buttonbox" method="POST" action="/gallery/{{ gallery.id }}/add-picture"> 11<input name="picture_id" type="text" placeholder="Picture ID" required aria-label="Picture ID"> 12<button type="submit">Add picture</button> 13</form> 14{% endif %} 15<h2>Pictures</h2> 16<ul class="thumbnail-list"> 17{% for picture in gallery.pictures %} 18<li> 19<a href="/picture/{{ picture.resource.id }}"> 20<div class="annotation-zone"> 21<img src="/raw/picture/{{ picture.resource.id }}" alt="{{ picture.resource.title }}"> 22{% for region in picture.resource.regions %} 23{% if region.json.type == "bbox" %} 24<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}"> 25<rect x="{{ region.json.shape.x * picture.resource.width }}" 26y="{{ region.json.shape.y * picture.resource.height }}" 27width="{{ region.json.shape.w * picture.resource.width }}" 28height="{{ region.json.shape.h * picture.resource.height }}" 29fill="none" class="shape-bbox shape" 30></rect> 31</svg> 32{% elif region.json.type == "polygon" %} 33<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}"> 34<polygon points="{% for point in region.json.shape %}{{ point.x * picture.resource.width }},{{ point.y * picture.resource.height }} {% endfor %}" fill="none" class="shape-polygon shape"></polygon> 35</svg> 36{% elif region.json.type == "polyline" %} 37<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}"> 38<polyline points="{% for point in region.json.shape %}{{ point.x * picture.resource.width }},{{ point.y * picture.resource.height }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline> 39</svg> 40{% elif region.json.type == "point" %} 41<svg class="shape-container" viewBox="0 0 {{ picture.resource.width }} {{ picture.resource.height }}"> 42<circle cx="{{ region.json.shape.x * picture.resource.width }}" cy="{{ region.json.shape.y * picture.resource.height }}" r="0" fill="none" class="shape-point shape"></circle> 43</svg> 44{% endif %} 45{% endfor %} 46</div> 47<div class="list-detail"> 48{{ picture.resource.title }} 49</div> 50</a> 51<div class="list-more"> 52<form action="/gallery/{{ gallery.id }}/remove-picture" method="POST"> 53<input type="hidden" name="picture_id" value="{{ picture.resource.id }}"> 54<button type="submit" class="button-flat">Remove</button> 55</form> 56</div> 57</li> 58{% endfor %} 59</ul> 60</x-frame> 61{% endblock %}