picture-annotation.html
HTML document, ASCII text
1{% extends "default.html" %} 2{% block title %}Picture | gigadata{% endblock %} 3{% block content %} 4<style> 5py-script { 6display: none; 7} 8/* Full PyScript style is too much, but we still need to hide the Python code */ 9</style> 10<script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script> 11 12<x-frame style="--width: 768px"> 13<h1>Annotating: {{ resource.title }}</h1> 14<p id="annotation-helper-message">Please wait for Python to load...</p> 15</x-frame> 16<x-frame id="main-area"> 17<x-buttonbox id="shape-selector"> 18<button class="button-flat" title="selection" id="select"> 19<iconify-icon icon="mdi:cursor-default"></iconify-icon> 20</button> 21<button class="button-flat" title="rectangle" id="shape-bbox"> 22<iconify-icon icon="mdi:square"></iconify-icon> 23</button> 24<button class="button-flat" title="ellipse" id="shape-ellipse"> 25<iconify-icon icon="mdi:circle"></iconify-icon> 26</button> 27<button class="button-flat" title="polygon" id="shape-polygon"> 28<iconify-icon icon="mdi:pentagon"></iconify-icon> 29</button> 30<button class="button-flat" title="freehand closed" id="shape-freehand-polygon"> 31<iconify-icon icon="mdi:lasso"></iconify-icon> 32</button> 33<button class="button-flat" title="line" id="shape-line"> 34<iconify-icon icon="mdi:graph-line-variant"></iconify-icon> 35</button> 36<button class="button-flat" title="freehand open" id="shape-freehand-line"> 37<iconify-icon icon="mdi:gesture"></iconify-icon> 38</button> 39<button class="button-flat" title="point" id="shape-point"> 40<iconify-icon icon="mdi:crosshairs-gps"></iconify-icon> 41</button> 42<button class="button-flat" title="whole picture" id="shape-all"> 43<iconify-icon icon="mdi:image"></iconify-icon> 44</button> 45</x-buttonbox> 46<div id="annotation-zone"> 47<img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt=""> 48<div id="annotation-ruler-vertical" class="annotation-ruler"></div> 49<div id="annotation-ruler-horizontal" class="annotation-ruler"></div> 50<div id="annotation-ruler-vertical-secondary" class="annotation-ruler"></div> 51<div id="annotation-ruler-horizontal-secondary" class="annotation-ruler"></div> 52</div> 53<x-buttonbox style="display: none;" id="shape-options"> 54<button class="button-flat" title="cancel" id="annotation-cancel"> 55<iconify-icon icon="mdi:close"></iconify-icon> 56</button> 57<button class="button-flat" title="apply" id="annotation-confirm"> 58<iconify-icon icon="mdi:check"></iconify-icon> 59</button> 60</x-buttonbox> 61<x-vbox id="object-types" style="--gap-box: 0.25rem; --padding-box: 1rem;"> 62</x-vbox> 63</x-frame> 64<script type="py" src="/static/picture-annotation.py"></script> 65{% endblock %}