Some annotator redesigns

static/picture-annotation.py

@@ -221,9 +221,9 @@ async def focus_shape(shape):

                                
                                
                                
                            
                                
                                    
                                        
                                            221  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            222  
                                                objects = await get_all_objects()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            223  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        224 -
                                            delete_button.style.display = "block"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        225 -
                                            next_button.style.display = "block"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        226 -
                                            previous_button.style.display = "block"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        224 +
                                            delete_button.style.display = "flex"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        225 +
                                            next_button.style.display = "flex"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        226 +
                                            previous_button.style.display = "flex"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            227  
                                                document.addEventListener("keydown", delete_shape_key_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            228  
                                                document.addEventListener("keydown", next_shape_key_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            229  
                                                document.addEventListener("keydown", previous_shape_key_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -233,6 +233,7 @@ async def focus_shape(shape):

                                
                                
                                
                            
                                
                                    
                                        
                                            233  
                                                new_radio = document.createElement("input")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            234  
                                                new_radio.setAttribute("type", "radio")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            235  
                                                new_radio.setAttribute("name", "object-type")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        236 +
                                            new_radio.setAttribute("tabindex", "1")      # Focus first
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            237  
                                                new_radio.setAttribute("value", "")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            238  
                                                new_label = document.createElement("label")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            239  
                                                new_label.appendChild(new_radio)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -585,7 +586,7 @@ def open_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            586  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            587  
                                                    cancel_button.addEventListener("click", cancel_bbox_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            588  
                                                    document.addEventListener("keydown", cancel_bbox_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        588 -
                                                cancel_button.style.display = "block"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        589 +
                                                cancel_button.style.display = "flex"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            590  
                                                    bbox_pos = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            591  
                                                    zone.addEventListener("click", make_bbox_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            592  
                                                    vertical_ruler.style.display = "block"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -611,11 +612,11 @@ def open_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            612  
                                                        document.addEventListener("keydown", cancel_polygon_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            613  
                                                        document.addEventListener("keydown", backspace_polygon_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            614  
                                                        cancel_button.addEventListener("click", cancel_polygon_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        614 -
                                                    cancel_button.style.display = "block"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        615 +
                                                    cancel_button.style.display = "flex"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            616  
                                                        confirm_button.addEventListener("click", close_polygon_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        616 -
                                                    confirm_button.style.display = "block"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        617 +
                                                    confirm_button.style.display = "flex"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            618  
                                                        backspace_button.addEventListener("click", backspace_polygon_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        618 -
                                                    backspace_button.style.display = "block"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        619 +
                                                    backspace_button.style.display = "flex"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            620  
                                                        if shape_type == "shape-polygon":
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            621  
                                                            polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            622  
                                                            polygon.classList.add("shape-polygon")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/style.css

@@ -63,10 +63,6 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            63  
                                                font-size: 1.5em;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            64  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            65  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        66 -
                                        :is(#shape-selector, #shape-options) > button > iconify-icon {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        67 -
                                            font-size: 2rem;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        68 -
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        69 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            66  
                                            #annotation-zone, .annotation-zone {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            67  
                                                position: relative;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            68  
                                                user-select: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -780,7 +776,10 @@ nav .button-flat .ripple-pad {

                                
                                
                                
                            
                                
                                    
                                        
                                            776  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            777  
                                            #object-types {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            778  
                                                z-index: 3;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        783 -
                                            background: var(--color-card);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        779 +
                                            background: var(--color-callout);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        780 +
                                            color: var(--color-callout-text);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        781 +
                                            --color-background-text: var(--color-callout-text);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        782 +
                                            --color-label-text: var(--color-callout-text);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            783  
                                                box-shadow: var(--shadow-card);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            784  
                                                padding: 1rem;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            785  
                                                border-radius: var(--radius-card);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -788,3 +787,28 @@ nav .button-flat .ripple-pad {

                                
                                
                                
                            
                                
                                    
                                        
                                            787  
                                                display: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            788  
                                                overflow: auto;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            789  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        790 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        791 +
                                        #annotation-controls {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        792 +
                                            display: flex;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        793 +
                                            justify-content: space-between;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        794 +
                                            gap: 1rem;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        795 +
                                            padding: 0.5rem;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        796 +
                                            align-items: stretch;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        797 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        798 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        799 +
                                        #annotation-controls > x-buttonbox {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        800 +
                                            align-items: center;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        801 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        802 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        803 +
                                        #annotation-controls > x-buttonbox > button:has(iconify-icon) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        804 +
                                            aspect-ratio: 1;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        805 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        806 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        807 +
                                        #annotation-controls > x-buttonbox > button > iconify-icon {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        808 +
                                            font-size: 1.5rem;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        809 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        810 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        811 +
                                        #annotation-helper-message {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        812 +
                                            padding: 1rem;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        813 +
                                            text-align: center;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        814 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/picture-annotation.html

@@ -13,27 +13,50 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            13  
                                                </style>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            14  
                                                <script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            15  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 -
                                            <x-frame style="--width: 768px">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 -
                                                <p id="annotation-helper-message">Please wait for Python to load...</p>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 -
                                            </x-frame>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            16  
                                                <x-frame id="main-area">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 -
                                                <x-buttonbox id="shape-selector">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 -
                                                    <button class="button-flat" title="selection" id="select">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 -
                                                        <iconify-icon icon="mdi:cursor-default"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 -
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 -
                                                    <button class="button-flat" title="rectangle" id="shape-bbox">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 -
                                                        <iconify-icon icon="mdi:square"></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="polyline" id="shape-polyline">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 -
                                                        <iconify-icon icon="mdi:graph-line-variant"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 -
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        33 -
                                                    <button class="button-flat" title="point" id="shape-point">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        34 -
                                                        <iconify-icon icon="mdi:crosshairs-gps"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 -
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        36 -
                                                </x-buttonbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 +
                                                <x-hbox id="annotation-controls">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 +
                                                    <x-buttonbox id="shape-selector">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 +
                                                        <button class="button-flat" title="selection" id="select">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 +
                                                            <iconify-icon icon="mdi:cursor-default"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 +
                                                        </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 +
                                                        <button class="button-flat" title="rectangle" id="shape-bbox">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 +
                                                            <iconify-icon icon="mdi:square"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 +
                                                        </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 +
                                                        <button class="button-flat" title="polygon" id="shape-polygon">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        26 +
                                                            <iconify-icon icon="mdi:pentagon"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 +
                                                        </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 +
                                                        <button class="button-flat" title="polyline" id="shape-polyline">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        29 +
                                                            <iconify-icon icon="mdi:graph-line-variant"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 +
                                                        </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 +
                                                        <button class="button-flat" title="point" id="shape-point">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 +
                                                            <iconify-icon icon="mdi:crosshairs-gps"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        33 +
                                                        </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        34 +
                                                    </x-buttonbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 +
                                                    <x-buttonbox style="display: none;" id="shape-options">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        36 +
                                                        <button class="button-flat" title="cancel" id="annotation-cancel">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        37 +
                                                            <iconify-icon icon="mdi:close"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        38 +
                                                        </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        39 +
                                                        <button class="button-flat" title="apply" id="annotation-confirm">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        40 +
                                                            <iconify-icon icon="mdi:check"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        41 +
                                                        </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        42 +
                                                        <button class="button-flat" title="remove last point" id="annotation-backspace">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        43 +
                                                            <iconify-icon icon="mdi:backspace"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        44 +
                                                        </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        45 +
                                                        <button class="button-flat" title="delete shape" id="annotation-delete">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        46 +
                                                            <iconify-icon icon="mdi:delete"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        47 +
                                                        </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        48 +
                                                        <button class="button-flat" title="select previous shape" id="annotation-previous">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        49 +
                                                            <iconify-icon icon="mdi:chevron-left"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        50 +
                                                        </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        51 +
                                                        <button class="button-flat" title="select next shape" id="annotation-next">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        52 +
                                                            <iconify-icon icon="mdi:chevron-right"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 +
                                                        </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        54 +
                                                        <div class="flexible-space"></div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        55 +
                                                        <button id="annotation-save">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        56 +
                                                            Save
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        57 +
                                                        </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        58 +
                                                    </x-buttonbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        59 +
                                                </x-hbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            60  
                                                    <div id="annotation-zone">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            61  
                                                        <x-vbox id="object-types" style="--gap-box: 0.25rem; --padding-box: 1rem;"></x-vbox>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            62  
                                                        <img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -42,30 +65,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            65  
                                                        <div id="annotation-ruler-vertical-secondary" class="annotation-ruler"></div>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            66  
                                                        <div id="annotation-ruler-horizontal-secondary" class="annotation-ruler"></div>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            67  
                                                    </div>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        45 -
                                                <x-buttonbox style="display: none;" id="shape-options">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        46 -
                                                    <button class="button-flat" title="cancel" id="annotation-cancel">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        47 -
                                                        <iconify-icon icon="mdi:close"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        48 -
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        49 -
                                                    <button class="button-flat" title="apply" id="annotation-confirm">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        50 -
                                                        <iconify-icon icon="mdi:check"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        51 -
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        52 -
                                                    <button class="button-flat" title="remove last point" id="annotation-backspace">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 -
                                                        <iconify-icon icon="mdi:backspace"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        54 -
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        55 -
                                                    <button class="button-flat" title="delete shape" id="annotation-delete">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        56 -
                                                        <iconify-icon icon="mdi:delete"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        57 -
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        58 -
                                                    <button class="button-flat" title="select previous shape" id="annotation-previous">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        59 -
                                                        <iconify-icon icon="mdi:chevron-left"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        60 -
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        61 -
                                                    <button class="button-flat" title="select next shape" id="annotation-next">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        62 -
                                                        <iconify-icon icon="mdi:chevron-right"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        63 -
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        64 -
                                                    <div class="flexible-space"></div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        65 -
                                                    <button id="annotation-save">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        66 -
                                                        Save
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        67 -
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        68 -
                                                </x-buttonbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        68 +
                                                <p id="annotation-helper-message">Please wait for Python to load...</p>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            69  
                                                </x-frame>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            70  
                                                <input type="hidden" id="resource-id" name="resource-id" value="{{ resource.id }}">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            71  
                                                <script type="mpy" src="/static/picture-annotation.py"></script>