Filter object types

static/picture-annotation.py

@@ -16,6 +16,8 @@ next_button = document.getElementById("annotation-next")

                                
                                
                                
                            
                                
                                    
                                        
                                            16  
                                            save_button = document.getElementById("annotation-save")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            17  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            18  
                                            object_list = document.getElementById("object-types")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 +
                                        object_list_content = document.getElementById("object-types-content")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 +
                                        object_list_filter = document.getElementById("filter-object-types")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            21  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            22  
                                            confirm_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            23  
                                            cancel_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -207,6 +209,15 @@ def get_centre(shape):

                                
                                
                                
                            
                                
                                    
                                        
                                            209  
                                                return x, y
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            210  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            211  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        212 +
                                        async def update_object_list_filter(event):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        213 +
                                            filter_text = event.currentTarget.value
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        214 +
                                            for label in object_list_content.children:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        215 +
                                                if label.innerText.lower().find(filter_text.lower()) == -1:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        216 +
                                                    label.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        217 +
                                                else:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        218 +
                                                    label.style.display = "flex"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        219 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        220 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            221  
                                            async def focus_shape(shape):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            222  
                                                global selected_shape
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            223  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -228,8 +239,7 @@ async def focus_shape(shape):

                                
                                
                                
                            
                                
                                    
                                        
                                            239  
                                                document.addEventListener("keydown", next_shape_key_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            240  
                                                document.addEventListener("keydown", previous_shape_key_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            241  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        231 -
                                            object_list.innerHTML = ""
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        232 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        242 +
                                            object_list_content.innerHTML = ""
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            243  
                                                new_radio = document.createElement("input")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            244  
                                                new_radio.setAttribute("type", "radio")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            245  
                                                new_radio.setAttribute("name", "object-type")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -238,7 +248,7 @@ async def focus_shape(shape):

                                
                                
                                
                            
                                
                                    
                                        
                                            248  
                                                new_label = document.createElement("label")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            249  
                                                new_label.appendChild(new_radio)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            250  
                                                new_label.append("Undefined")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        241 -
                                            object_list.appendChild(new_label)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        251 +
                                            object_list_content.appendChild(new_label)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            252  
                                                new_radio.addEventListener("change", change_object_type_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            253  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            254  
                                                selected_object = selected_shape.getAttribute("data-object-type")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -255,10 +265,12 @@ async def focus_shape(shape):

                                
                                
                                
                            
                                
                                    
                                        
                                            265  
                                                    new_label = document.createElement("label")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            266  
                                                    new_label.appendChild(new_radio)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            267  
                                                    new_label.append(object)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        258 -
                                                object_list.appendChild(new_label)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        268 +
                                                object_list_content.appendChild(new_label)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            269  
                                                    new_radio.addEventListener("change", change_object_type_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            270  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            271  
                                                object_list.style.display = "flex"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        272 +
                                            object_list_filter.focus()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        273 +
                                            object_list_filter.addEventListener("input", update_object_list_filter)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            274  
                                                object_list.style.left = str(get_centre(shape)[0] / image.naturalWidth * 100) + "%"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            275  
                                                object_list.style.top = str(get_centre(shape)[1] / image.naturalHeight * 100) + "%"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            276  
                                                object_list.style.right = "auto"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -342,7 +354,7 @@ def unselect_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            354  
                                                    selected_shape.classList.remove("selected")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            355  
                                                    selected_shape = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            356  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        345 -
                                            object_list.innerHTML = ""
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        357 +
                                            object_list_content.innerHTML = ""
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            358  
                                                object_list.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            359  
                                                delete_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            360  
                                                next_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -359,7 +371,7 @@ def delete_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            371  
                                                # Shape is SVG shape inside SVG so we need to remove the parent SVG
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            372  
                                                selected_shape.parentNode.remove()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            373  
                                                selected_shape = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        362 -
                                            object_list.innerHTML = ""
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        374 +
                                            object_list_content.innerHTML = ""
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            375  
                                                object_list.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            376  
                                                delete_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            377  
                                                next_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -388,7 +400,7 @@ follow_cursor_proxy = create_proxy(follow_cursor)

                                
                                
                                
                            
                                
                                    
                                        
                                            400  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            401  
                                            def switch_shape(event):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            402  
                                                global shape_type
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        391 -
                                            object_list.innerHTML = ""
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        403 +
                                            object_list_content.innerHTML = ""
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            404  
                                                unselect_shape(None)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            405  
                                                shape = event.currentTarget.id
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            406  
                                                shape_type = shape
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/picture-annotation.html

@@ -58,7 +58,10 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            58  
                                                        </x-buttonbox>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            59  
                                                    </x-hbox>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            60  
                                                    <div id="annotation-zone">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        61 -
                                                    <x-vbox id="object-types" style="--gap-box: 0.25rem; --padding-box: 1rem;"></x-vbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        61 +
                                                    <x-vbox id="object-types" style="--gap-box: 0.25rem; --padding-box: 1rem;">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        62 +
                                                        <input type="text" id="filter-object-types" placeholder="Search" aria-label="Search object types">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        63 +
                                                        <x-vbox id="object-types-content"></x-vbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        64 +
                                                    </x-vbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            65  
                                                        <img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            66  
                                                        <div id="annotation-ruler-vertical" class="annotation-ruler"></div>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            67  
                                                        <div id="annotation-ruler-horizontal" class="annotation-ruler"></div>