Better polygon editing

static/picture-annotation.py

@@ -9,11 +9,13 @@ image = document.getElementById("annotation-image")

                                
                                
                                
                            
                                
                                    
                                        
                                            9  
                                            zone = document.getElementById("annotation-zone")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            10  
                                            confirm_button = document.getElementById("annotation-confirm")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            11  
                                            cancel_button = document.getElementById("annotation-cancel")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        12 +
                                        backspace_button = document.getElementById("annotation-backspace")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        13 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            14  
                                            object_list = document.getElementById("object-types")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            15  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            16  
                                            confirm_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            17  
                                            cancel_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 +
                                        backspace_button.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            19  
                                            shape_type = ""
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            20  
                                            bbox_pos = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            21  
                                            new_shape = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -147,7 +149,7 @@ def cancel_bbox(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            149  
                                                global bbox_pos, new_shape
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            150  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            151  
                                                # Key must be ESCAPE
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        150 -
                                            if event is not None and event.key != "Escape":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        152 +
                                            if event is not None and hasattr(event, "key") and event.key != "Escape":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            153  
                                                    return
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            154  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            155  
                                                if new_shape is not None and event is not None:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -229,23 +231,52 @@ def make_polygon(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            231  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            232  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            233  
                                            def close_polygon(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        234 +
                                            if event is not None and hasattr(event, "key") and event.key != "Enter":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        235 +
                                                return
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            236  
                                                # Polygon is already there, but we need to remove the events
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            237  
                                                zone.removeEventListener("click", make_polygon_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        234 -
                                            zone.removeEventListener("keydown", close_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        238 +
                                            document.removeEventListener("keydown", close_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        239 +
                                            document.removeEventListener("keydown", cancel_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        240 +
                                            confirm_button.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        241 +
                                            cancel_button.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        242 +
                                            confirm_button.removeEventListener("click", close_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        243 +
                                            cancel_button.removeEventListener("click", cancel_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        244 +
                                            polygon_points.clear()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            245  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            246  
                                                document.body.style.cursor = "auto"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            247  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            248  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            249  
                                            def cancel_polygon(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        250 +
                                            if event is not None and hasattr(event, "key") and event.key != "Escape":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        251 +
                                                return
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            252  
                                                # Delete the polygon
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            253  
                                                new_shape.remove()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            254  
                                                zone.removeEventListener("click", make_polygon_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        243 -
                                            zone.removeEventListener("keydown", close_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        255 +
                                            document.removeEventListener("keydown", close_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        256 +
                                            document.removeEventListener("keydown", cancel_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        257 +
                                            confirm_button.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        258 +
                                            cancel_button.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        259 +
                                            confirm_button.removeEventListener("click", close_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        260 +
                                            cancel_button.removeEventListener("click", cancel_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        261 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        262 +
                                            polygon_points.clear()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            263  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            264  
                                                document.body.style.cursor = "auto"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            265  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            266  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        267 +
                                        def backspace_polygon(event):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        268 +
                                            if event is not None and hasattr(event, "key") and event.key != "Backspace":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        269 +
                                                return
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        270 +
                                            if not polygon_points:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        271 +
                                                return
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        272 +
                                            polygon_points.pop()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        273 +
                                            polygon = new_shape.children[0]
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        274 +
                                            polygon.setAttribute("points", " ".join([f"{point[0] * image.naturalWidth},{point[1] * image.naturalHeight}" for point in polygon_points]))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        275 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        276 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            277  
                                            close_polygon_proxy = create_proxy(close_polygon)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        278 +
                                        cancel_polygon_proxy = create_proxy(cancel_polygon)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        279 +
                                        backspace_polygon_proxy = create_proxy(backspace_polygon)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            280  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            281  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            282  
                                            def open_shape(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -275,12 +306,20 @@ def open_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            306  
                                                    document.body.style.cursor = "crosshair"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            307  
                                                elif shape_type == "shape-polygon":
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            308  
                                                    helper_message.innerText = ("Click on the image to define the points of the polygon, "
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        278 -
                                                                            "press escape to cancel, "
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        279 -
                                                                            "or press enter to close")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        309 +
                                                                            "press escape to cancel, enter to close, or backspace to "
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        310 +
                                                                            "remove the last point")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            311  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            312  
                                                    if not polygon_points:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            313  
                                                        zone.addEventListener("click", make_polygon_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            314  
                                                        document.addEventListener("keydown", close_polygon_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        315 +
                                                    document.addEventListener("keydown", cancel_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        316 +
                                                    document.addEventListener("keydown", backspace_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        317 +
                                                    cancel_button.addEventListener("click", cancel_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        318 +
                                                    cancel_button.style.display = "block"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        319 +
                                                    confirm_button.addEventListener("click", close_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        320 +
                                                    confirm_button.style.display = "block"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        321 +
                                                    backspace_button.addEventListener("click", backspace_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        322 +
                                                    backspace_button.style.display = "block"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            323  
                                                        polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            324  
                                                        polygon.setAttribute("fill", "none")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            325  
                                                        polygon.setAttribute("data-object-type", "")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/picture-annotation.html

@@ -21,21 +21,12 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            21  
                                                        <button class="button-flat" title="rectangle" id="shape-bbox">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            22  
                                                            <iconify-icon icon="mdi:square"></iconify-icon>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            23  
                                                        </button>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 -
                                                    <button class="button-flat" title="ellipse" id="shape-ellipse">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 -
                                                        <iconify-icon icon="mdi:circle"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        26 -
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            24  
                                                        <button class="button-flat" title="polygon" id="shape-polygon">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            25  
                                                            <iconify-icon icon="mdi:pentagon"></iconify-icon>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            26  
                                                        </button>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 -
                                                    <button class="button-flat" title="freehand closed" id="shape-freehand-polygon">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 -
                                                        <iconify-icon icon="mdi:lasso"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 -
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            27  
                                                        <button class="button-flat" title="line" id="shape-line">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            28  
                                                            <iconify-icon icon="mdi:graph-line-variant"></iconify-icon>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            29  
                                                        </button>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        36 -
                                                    <button class="button-flat" title="freehand open" id="shape-freehand-line">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        37 -
                                                        <iconify-icon icon="mdi:gesture"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        38 -
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            30  
                                                        <button class="button-flat" title="point" id="shape-point">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            31  
                                                            <iconify-icon icon="mdi:crosshairs-gps"></iconify-icon>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            32  
                                                        </button>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -57,6 +48,9 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            48  
                                                        <button class="button-flat" title="apply" id="annotation-confirm">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            49  
                                                            <iconify-icon icon="mdi:check"></iconify-icon>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            50  
                                                        </button>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        51 +
                                                    <button class="button-flat" title="remove last point" id="annotation-backspace">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        52 +
                                                        <iconify-icon icon="mdi:backspace"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 +
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            54  
                                                    </x-buttonbox>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            55  
                                                    <x-vbox id="object-types" style="--gap-box: 0.25rem; --padding-box: 1rem;">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            56  
                                                    </x-vbox>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/picture.html

@@ -9,7 +9,8 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            9  
                                                    <p>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            10  
                                                        <a href="{{ resource.origin_url }}">Original source</a> |
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            11  
                                                        <a href="/raw/picture/{{ resource.id }}">View</a> |
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        12 -
                                                    <a href="/raw/picture/{{ resource.id }}" download="GigadataPicture_{{ resource.id }}{{ file_extension }}">Download</a>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        12 +
                                                    <a href="/raw/picture/{{ resource.id }}" download="GigadataPicture_{{ resource.id }}{{ file_extension }}">Download</a> |
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        13 +
                                                    <a href="/picture/{{ resource.id }}/annotate">Annotate</a>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            14  
                                                    </p>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            15  
                                                </x-frame>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            16  
                                            {% endblock %}