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="python-loading">Please wait for Python to load...</p> 15</x-frame> 16<x-frame is="main-area"> 17<x-buttonbox id="shape-selector"> 18<button class="button-flat" title="rectangle" id="shape-bbox"> 19<iconify-icon icon="mdi:square"></iconify-icon> 20</button> 21<button class="button-flat" title="oriented rectangle" id="shape-o-bbox"> 22<iconify-icon icon="mdi:rhombus"></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:circle"></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> 49<x-buttonbox style="display: none;" id="shape-options"> 50<button class="button-flat" title="cancel" disabled> 51<iconify-icon icon="mdi:close"></iconify-icon> 52</button> 53<button class="button-flat" title="apply" disabled> 54<iconify-icon icon="mdi:check"></iconify-icon> 55</button> 56</x-buttonbox> 57</x-frame> 58<script type="py" src="/static/picture-annotation.py"></script> 59{% endblock %}