Allow making polygons

static/picture-annotation.py

@@ -70,11 +70,17 @@ async def select_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            70  
                                                object_list.appendChild(new_label)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            71  
                                                new_radio.addEventListener("change", change_object_type_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            72  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        73 +
                                            selected_object = selected_shape.getAttribute("data-object-type")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        74 +
                                            if not selected_object:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        75 +
                                                new_radio.setAttribute("checked", "")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        76 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            77  
                                                for object, description in objects.items():
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            78  
                                                    new_radio = document.createElement("input")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            79  
                                                    new_radio.setAttribute("type", "radio")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            80  
                                                    new_radio.setAttribute("name", "object-type")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            81  
                                                    new_radio.setAttribute("value", object)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        82 +
                                                if selected_object == object:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        83 +
                                                    new_radio.setAttribute("checked", "")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            84  
                                                    new_label = document.createElement("label")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            85  
                                                    new_label.appendChild(new_radio)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            86  
                                                    new_label.append(object)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -91,6 +97,8 @@ def unselect_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            97  
                                                    selected_shape.classList.remove("selected")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            98  
                                                    selected_shape = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            99  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        100 +
                                            object_list.innerHTML = ""
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        101 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            102  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            103  
                                            select_shape_proxy = create_proxy(select_shape)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            104  
                                            unselect_shape_proxy = create_proxy(unselect_shape)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -99,6 +107,7 @@ unselect_shape_proxy = create_proxy(unselect_shape)

                                
                                
                                
                            
                                
                                    
                                        
                                            107  
                                            # These are functions usable in JS
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            108  
                                            cancel_bbox_proxy = create_proxy(lambda event: cancel_bbox(event))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            109  
                                            make_bbox_proxy = create_proxy(lambda event: make_bbox(event))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        110 +
                                        make_polygon_proxy = create_proxy(lambda event: make_polygon(event))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            111  
                                            follow_cursor_proxy = create_proxy(follow_cursor)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            112  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            113  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -137,6 +146,10 @@ helper_message.innerText = "Select a shape type then click on the image to begin

                                
                                
                                
                            
                                
                                    
                                        
                                            146  
                                            def cancel_bbox(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            147  
                                                global bbox_pos, new_shape
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            148  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        149 +
                                            # Key must be ESCAPE
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        150 +
                                            if event is not None and event.key != "Escape":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        151 +
                                                return
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        152 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            153  
                                                if new_shape is not None and event is not None:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            154  
                                                    # Require event so the shape is kept when it ends normally
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            155  
                                                    new_shape.remove()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -197,17 +210,56 @@ def make_bbox(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            210  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            211  
                                                    cancel_bbox(None)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            212  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        213 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        214 +
                                        polygon_points = []
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        215 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        216 +
                                        def make_polygon(event):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        217 +
                                            global new_shape, polygon_points
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        218 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        219 +
                                            print(new_shape.outerHTML)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        220 +
                                            polygon = new_shape.children[0]
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        221 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        222 +
                                            zone_rect = zone.getBoundingClientRect()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        223 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        224 +
                                            polygon_points.append(((event.clientX - zone_rect.left) / zone_rect.width,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        225 +
                                                                   (event.clientY - zone_rect.top) / zone_rect.height))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        226 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        227 +
                                            # Update the polygon
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        228 +
                                            polygon.setAttribute("points", " ".join([f"{point[0] * image.naturalWidth},{point[1] * image.naturalHeight}" for point in polygon_points]))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        229 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        230 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        231 +
                                        def close_polygon(event):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        232 +
                                            # Polygon is already there, but we need to remove the events
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        233 +
                                            zone.removeEventListener("click", make_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        234 +
                                            zone.removeEventListener("keydown", close_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        235 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        236 +
                                            document.body.style.cursor = "auto"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        237 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        238 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        239 +
                                        def cancel_polygon(event):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        240 +
                                            # Delete the polygon
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        241 +
                                            new_shape.remove()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        242 +
                                            zone.removeEventListener("click", make_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        243 +
                                            zone.removeEventListener("keydown", close_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        244 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        245 +
                                            document.body.style.cursor = "auto"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        246 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        247 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        248 +
                                        close_polygon_proxy = create_proxy(close_polygon)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        249 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        250 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            251  
                                            def open_shape(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            252  
                                                global new_shape, bbox_pos
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            253  
                                                if bbox_pos or shape_type == "select":
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            254  
                                                    return
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            255  
                                                print("Creating a new shape of type:", shape_type)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        205 -
                                            new_shape = document.createElementNS("http://www.w3.org/2000/svg", "svg")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        206 -
                                            new_shape.setAttribute("width", "100%")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        207 -
                                            new_shape.setAttribute("height", "100%")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        208 -
                                            zone_rect = zone.getBoundingClientRect()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        209 -
                                            new_shape.setAttribute("viewBox", f"0 0 {image.naturalWidth} {image.naturalHeight}")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        210 -
                                            new_shape.classList.add("shape-container")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        256 +
                                            if not polygon_points:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        257 +
                                                new_shape = document.createElementNS("http://www.w3.org/2000/svg", "svg")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        258 +
                                                new_shape.setAttribute("width", "100%")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        259 +
                                                new_shape.setAttribute("height", "100%")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        260 +
                                                zone_rect = zone.getBoundingClientRect()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        261 +
                                                new_shape.setAttribute("viewBox", f"0 0 {image.naturalWidth} {image.naturalHeight}")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        262 +
                                                new_shape.classList.add("shape-container")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            263  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            264  
                                                if shape_type == "shape-bbox":
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            265  
                                                    helper_message.innerText = ("Define the first point at the intersection of the lines "
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -221,6 +273,22 @@ def open_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            273  
                                                    vertical_ruler.style.display = "block"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            274  
                                                    horizontal_ruler.style.display = "block"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            275  
                                                    document.body.style.cursor = "crosshair"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        276 +
                                            elif shape_type == "shape-polygon":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        277 +
                                                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")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        280 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        281 +
                                                if not polygon_points:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        282 +
                                                    zone.addEventListener("click", make_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        283 +
                                                    document.addEventListener("keydown", close_polygon_proxy)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        284 +
                                                    polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        285 +
                                                    polygon.setAttribute("fill", "none")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        286 +
                                                    polygon.setAttribute("data-object-type", "")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        287 +
                                                    polygon.classList.add("shape-polygon")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        288 +
                                                    polygon.classList.add("shape")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        289 +
                                                    new_shape.appendChild(polygon)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        290 +
                                                    zone.appendChild(new_shape)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        291 +
                                                    document.body.style.cursor = "crosshair"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            292  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            293  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            294  
                                            for button in list(document.getElementById("shape-selector").children):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/picture-annotation.html

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

                                
                                
                                
                            
                                
                                    
                                        
                                            13  
                                                    <h1>Annotating: {{ resource.title }}</h1>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            14  
                                                    <p id="annotation-helper-message">Please wait for Python to load...</p>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            15  
                                                </x-frame>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 -
                                            <x-frame is="main-area">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 +
                                            <x-frame id="main-area">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            17  
                                                    <x-buttonbox id="shape-selector">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            18  
                                                        <button class="button-flat" title="selection" id="select">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            19  
                                                            <iconify-icon icon="mdi:cursor-default"></iconify-icon>