Zoom

static/picture-annotation.py

@@ -49,8 +49,8 @@ async def get_all_objects():

                                
                                
                                
                            
                                
                                    
                                        
                                            49  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            50  
                                            def follow_cursor(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            51  
                                                rect = zone.getBoundingClientRect()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        52 -
                                            x = event.clientX - rect.left
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 -
                                            y = event.clientY - rect.top
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        52 +
                                            x = (event.clientX - rect.left) / scale
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 +
                                            y = (event.clientY - rect.top) / scale
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            54  
                                                vertical_ruler.style.left = str(x) + "px"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            55  
                                                horizontal_ruler.style.top = str(y) + "px"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            56  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -278,16 +278,21 @@ async def focus_shape(shape):

                                
                                
                                
                            
                                
                                    
                                        
                                            278  
                                                object_list.style.bottom = "auto"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            279  
                                                object_list.style.maxHeight = str(image.height - get_centre(shape)[1] / image.naturalHeight * image.height) + "px"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            280  
                                                object_list.style.maxWidth = str(image.width - get_centre(shape)[0] / image.naturalWidth * image.width) + "px"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        281 +
                                            transform_origin = ["top", "left"]
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            282  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            283  
                                                if get_centre(shape)[0] / image.naturalWidth * image.width + object_list.offsetWidth > image.width:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            284  
                                                    object_list.style.left = "auto"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            285  
                                                    object_list.style.right = str((image.naturalWidth - get_centre(shape)[0]) / image.naturalWidth * 100) + "%"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            286  
                                                    object_list.style.maxWidth = str(get_centre(shape)[0] / image.naturalWidth * image.width) + "px"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        287 +
                                                transform_origin[1] = "right"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            288  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            289  
                                                if get_centre(shape)[1] / image.naturalHeight * image.height + object_list.offsetHeight > image.height:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            290  
                                                    object_list.style.top = "auto"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            291  
                                                    object_list.style.bottom = str((image.naturalHeight - get_centre(shape)[1]) / image.naturalHeight * 100) + "%"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            292  
                                                    object_list.style.maxHeight = str(get_centre(shape)[1] / image.naturalHeight * image.height) + "px"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        293 +
                                                transform_origin[0] = "bottom"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        294 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        295 +
                                            object_list.style.transformOrigin = " ".join(transform_origin)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            296  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            297  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            298  
                                            async def select_shape(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -475,6 +480,7 @@ def cancel_bbox(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            480  
                                                cancel_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            481  
                                                helper_message.innerText = "Select a shape type then click on the image to begin defining it"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            482  
                                                new_shape = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        483 +
                                            update_transform()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            484  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            485  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            486  
                                            def make_bbox(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -561,6 +567,8 @@ def reset_polygon():

                                
                                
                                
                            
                                
                                    
                                        
                                            567  
                                                zone.style.cursor = "auto"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            568  
                                                new_shape = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            569  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        570 +
                                            update_transform()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        571 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            572  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            573  
                                            def close_polygon(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            574  
                                                if event is not None and hasattr(event, "key") and event.key != "Enter":
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -667,6 +675,8 @@ def open_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            675  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            676  
                                                    new_shape = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            677  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        678 +
                                            update_transform()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        679 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            680  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            681  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            682  
                                            for button in list(document.getElementById("shape-selector").children):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -676,6 +686,80 @@ for button in list(document.getElementById("shape-selector").children):

                                
                                
                                
                            
                                
                                    
                                        
                                            686  
                                            zone.addEventListener("mousemove", follow_cursor_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            687  
                                            zone.addEventListener("click", create_proxy(open_shape))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            688  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        689 +
                                        # Zoom
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        690 +
                                        zoom_container = document.getElementById("annotation-zoom-container")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        691 +
                                        scale = 1
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        692 +
                                        translate_x = 0
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        693 +
                                        translate_y = 0
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        694 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        695 +
                                        def update_transform():
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        696 +
                                            zone.style.transform = f"scale({scale}) translate({translate_x}px, {translate_y}px)"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        697 +
                                            object_list.style.transform = f"scale({1/scale})"   # neutralise the zoom
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        698 +
                                            vertical_ruler.style.transform = f"scale({1/scale})"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        699 +
                                            horizontal_ruler.style.transform = f"scale({1/scale})"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        700 +
                                            vertical_ruler_2.style.transform = f"scale({1/scale})"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        701 +
                                            horizontal_ruler_2.style.transform = f"scale({1/scale})"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        702 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        703 +
                                            for svg in zone.getElementsByClassName("shape-container"):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        704 +
                                                # Because vector-effect="non-scaling-stroke" doesn't work when an HTML ancestor is
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        705 +
                                                # scaled, we need to scale the shapes down then scale them back up
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        706 +
                                                svg.style.transform = f"scale({1/scale})"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        707 +
                                                svg.style.transformOrigin = "0 0"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        708 +
                                                for shape in svg.children:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        709 +
                                                    shape.setAttribute("transform", f"scale({scale})")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        710 +
                                                    shape.setAttribute("transform-origin", "0 0")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        711 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        712 +
                                        scale_exponent = 0
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        713 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        714 +
                                        zoom_offset = (0, 0)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        715 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        716 +
                                        def on_wheel(event):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        717 +
                                            global scale, scale_exponent, translate_x, translate_y
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        718 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        719 +
                                            event.preventDefault()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        720 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        721 +
                                            scale_exponent += (-1 if event.deltaY > 0 else 1) / 16
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        722 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        723 +
                                            new_scale = 2 ** scale_exponent
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        724 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        725 +
                                            rect = zoom_container.getBoundingClientRect()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        726 +
                                            pointer_x = event.clientX - rect.left
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        727 +
                                            pointer_y = event.clientY - rect.top
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        728 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        729 +
                                            translate_x = pointer_x - (pointer_x - translate_x) * (new_scale / scale)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        730 +
                                            translate_y = pointer_y - (pointer_y - translate_y) * (new_scale / scale)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        731 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        732 +
                                            scale = new_scale
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        733 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        734 +
                                            update_transform()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        735 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        736 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        737 +
                                        is_dragging = False
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        738 +
                                        start_x = 0
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        739 +
                                        start_y = 0
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        740 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        741 +
                                        def on_mouse_down(event):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        742 +
                                            global is_dragging, start_x, start_y
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        743 +
                                            is_dragging = True
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        744 +
                                            start_x = event.clientX
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        745 +
                                            start_y = event.clientY
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        746 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        747 +
                                        def on_mouse_move(event):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        748 +
                                            global translate_x, translate_y
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        749 +
                                            if is_dragging:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        750 +
                                                translate_x += event.movementX / scale
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        751 +
                                                translate_y += event.movementY / scale
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        752 +
                                                update_transform()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        753 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        754 +
                                        def on_mouse_up(event):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        755 +
                                            global is_dragging
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        756 +
                                            is_dragging = False
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        757 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        758 +
                                        zoom_container.addEventListener("wheel", on_wheel)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        759 +
                                        zoom_container.addEventListener("mousedown", on_mouse_down)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        760 +
                                        document.addEventListener("mousemove", on_mouse_move)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        761 +
                                        document.addEventListener("mouseup", on_mouse_up)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        762 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            763  
                                            # Load existing annotations, if any
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            764  
                                            put_shapes(await load_shapes())
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            765  
                                            print("Ready!")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/style.css

@@ -66,14 +66,12 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            66  
                                            #annotation-zone, .annotation-zone {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            67  
                                                position: relative;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            68  
                                                user-select: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        69 -
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        70 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        71 -
                                        .annotation-zone {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            69  
                                                overflow: hidden;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        70 +
                                            transform-origin: 50% 50%;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            71  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            72  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        75 -
                                        #annotation-zone {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        76 -
                                            overflow: hidden;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        73 +
                                        #annotation-zoom-container > #annotation-zone {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        74 +
                                            overflow: visible;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            75  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            76  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            77  
                                            #annotation-image, .annotation-image {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -115,6 +113,7 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            113  
                                                fill: var(--color-accent);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            114  
                                                fill-opacity: 0.1;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            115  
                                                stroke-width: 2px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        116 +
                                            --shape-stroke-width: 2px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            117  
                                                vector-effect: non-scaling-stroke;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            118  
                                                pointer-events: auto;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            119  
                                                transition: filter 0.25s cubic-bezier(0.61, 1, 0.88, 1),
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -131,6 +130,7 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            130  
                                            .shape-point {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            131  
                                                stroke: var(--color-accent);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            132  
                                                stroke-width: 2px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        133 +
                                            --shape-radius: 2px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            134  
                                                fill-opacity: 1;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            135  
                                                r: 2;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            136  
                                                transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -141,12 +141,14 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            141  
                                            .shape.selected {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            142  
                                                fill-opacity: 0.2;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            143  
                                                stroke-width: 4px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        144 +
                                            --shape-stroke-width: 4px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            145  
                                                filter: drop-shadow(0 0 2px var(--text-soft));
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            146  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            147  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            148  
                                            .shape-point.selected {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            149  
                                                fill-opacity: 1;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            150  
                                                r: 6;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        151 +
                                            --shape-radius: 6px;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            152  
                                                stroke-width: 6px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            153  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            154  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -154,10 +156,6 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            156  
                                                pointer-events: none;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            157  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            158  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        157 -
                                        #annotation-helper-message {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        158 -
                                            min-height: 2lh;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        159 -
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        160 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            159  
                                            .shape-container-viewonly > .shape, .thumbnail-list > li .shape {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            160  
                                                fill: var(--color-info);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            161  
                                                stroke: var(--color-info);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -812,6 +810,44 @@ nav .button-flat .ripple-pad {

                                
                                
                                
                            
                                
                                    
                                        
                                            810  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            811  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            812  
                                            #annotation-helper-message {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        815 -
                                            padding: 1rem;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        813 +
                                            padding: 0.75rem;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            814  
                                                text-align: center;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        815 +
                                            flex: 1 0 auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        816 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        817 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        818 +
                                        #annotation-zoom-container {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        819 +
                                            overflow: hidden;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        820 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        821 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        822 +
                                        #annotation-zoom-container {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        823 +
                                            flex: 0 1 auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        824 +
                                            overflow: scroll;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        825 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        826 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        827 +
                                        #annotation-zoom-container > #annotation-zone {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        828 +
                                            transform: scale(1);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        829 +
                                            transition: transform 0.125s ease;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        830 +
                                            max-width: 100%;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        831 +
                                            max-height: 100%;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        832 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        833 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        834 +
                                        #annotation-main-area {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        835 +
                                            display: flex;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        836 +
                                            flex-direction: column;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        837 +
                                            flex: 1 1 auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        838 +
                                            overflow: auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        839 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        840 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        841 +
                                        body.fixed-content-area {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        842 +
                                            max-width: 100vw;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        843 +
                                            max-height: 100vh;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        844 +
                                            display: flex;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        845 +
                                            flex-direction: column;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        846 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        847 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        848 +
                                        body.fixed-content-area > main {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        849 +
                                            flex: 0 1 auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        850 +
                                            overflow: auto;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        851 +
                                            display: flex;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        852 +
                                            flex-direction: column;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            853  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/default.html

@@ -14,7 +14,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            14  
                                                        }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            15  
                                                    }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            16  
                                                </style>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 -
                                            <body>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 +
                                            <body {% if fixed_content_area %}class="fixed-content-area"{% endif %}>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            18  
                                                    <dialog id="hamburger" class="sheet-left">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            19  
                                                        <nav>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            20  
                                                            <ul>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/picture-annotation.html

@@ -3,6 +3,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            3  
                                            {% block nav_title %}{{ resource.title }}{% endblock %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            4  
                                            {% block title %}Annotating picture {{ resource.title }} | {{ site_name }}{% endblock %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            5  
                                            {% set back_url = "/picture/" + resource.id|string %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 +
                                        {% set fixed_content_area = true %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            7  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            8  
                                            {% block content %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            9  
                                                <style>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -13,7 +14,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            14  
                                                </style>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            15  
                                                <script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            16  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 -
                                            <x-frame id="main-area">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 +
                                            <x-frame id="annotation-main-area">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            18  
                                                    <x-hbox id="annotation-controls">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            19  
                                                        <x-buttonbox id="shape-selector">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            20  
                                                            <button class="button-flat" title="selection" id="select">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -57,16 +58,18 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            58  
                                                            </button>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            59  
                                                        </x-buttonbox>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            60  
                                                    </x-hbox>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        60 -
                                                <div id="annotation-zone">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        61 -
                                                    <x-vbox id="object-types" style="--gap-box: 0.25rem; --padding-box: 1rem;">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        62 -
                                                        <input type="text" id="filter-object-types" placeholder="Search" aria-label="Search object types">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        63 -
                                                        <x-vbox id="object-types-content"></x-vbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        64 -
                                                    </x-vbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        65 -
                                                    <img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        66 -
                                                    <div id="annotation-ruler-vertical" class="annotation-ruler"></div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        67 -
                                                    <div id="annotation-ruler-horizontal" class="annotation-ruler"></div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        68 -
                                                    <div id="annotation-ruler-vertical-secondary" class="annotation-ruler"></div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        69 -
                                                    <div id="annotation-ruler-horizontal-secondary" class="annotation-ruler"></div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        61 +
                                                <div id="annotation-zoom-container">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        62 +
                                                    <div id="annotation-zone">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        63 +
                                                        <x-vbox id="object-types" style="--gap-box: 0.25rem; --padding-box: 1rem;">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        64 +
                                                            <input type="text" id="filter-object-types" placeholder="Search" aria-label="Search object types">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        65 +
                                                            <x-vbox id="object-types-content"></x-vbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        66 +
                                                        </x-vbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        67 +
                                                        <img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        68 +
                                                        <div id="annotation-ruler-vertical" class="annotation-ruler"></div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        69 +
                                                        <div id="annotation-ruler-horizontal" class="annotation-ruler"></div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        70 +
                                                        <div id="annotation-ruler-vertical-secondary" class="annotation-ruler"></div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        71 +
                                                        <div id="annotation-ruler-horizontal-secondary" class="annotation-ruler"></div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        72 +
                                                    </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            73  
                                                    </div>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            74  
                                                    <p id="annotation-helper-message">Please wait for Python to load...</p>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            75  
                                                </x-frame>