Move object menu

static/picture-annotation.py

@@ -177,6 +177,36 @@ next_shape_key_proxy = create_proxy(lambda event: event.key == "ArrowRight" and

                                
                                
                                
                            
                                
                                    
                                        
                                            177  
                                            previous_shape_key_proxy = create_proxy(lambda event: event.key == "ArrowLeft" and previous_shape_proxy(None))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            178  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            179  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        180 +
                                        def get_centre(shape):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        181 +
                                            if shape.tagName == "rect":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        182 +
                                                x = float(shape.getAttribute("x")) + float(shape.getAttribute("width")) / 2
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        183 +
                                                y = float(shape.getAttribute("y")) + float(shape.getAttribute("height")) / 2
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        184 +
                                            elif shape.tagName == "polygon":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        185 +
                                                points = shape.getAttribute("points").split(" ")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        186 +
                                                # Average of the extreme points
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        187 +
                                                sorted_x = sorted([float(point.split(",")[0]) for point in points])
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        188 +
                                                sorted_y = sorted([float(point.split(",")[1]) for point in points])
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        189 +
                                                top = sorted_y[0]
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        190 +
                                                bottom = sorted_y[-1]
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        191 +
                                                left = sorted_x[0]
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        192 +
                                                right = sorted_x[-1]
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        193 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        194 +
                                                x = (left + right) / 2
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        195 +
                                                y = (top + bottom) / 2
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        196 +
                                            elif shape.tagName == "polyline":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        197 +
                                                points = shape.getAttribute("points").split(" ")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        198 +
                                                # Median point
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        199 +
                                                x = float(points[len(points) // 2].split(",")[0])
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        200 +
                                                y = float(points[len(points) // 2].split(",")[1])
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        201 +
                                            elif shape.tagName == "circle" and shape.classList.contains("shape-point"):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        202 +
                                                x = float(shape.getAttribute("cx"))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        203 +
                                                y = float(shape.getAttribute("cy"))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        204 +
                                            else:
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        205 +
                                                return None
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        206 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        207 +
                                            return x, y
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        208 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        209 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            210  
                                            async def focus_shape(shape):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            211  
                                                global selected_shape
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            212  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -198,6 +228,10 @@ async def focus_shape(shape):

                                
                                
                                
                            
                                
                                    
                                        
                                            228  
                                                document.addEventListener("keydown", next_shape_key_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            229  
                                                document.addEventListener("keydown", previous_shape_key_proxy)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            230  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        231 +
                                            object_list.style.display = "flex"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        232 +
                                            object_list.style.left = str(get_centre(shape)[0] / image.naturalWidth * 100) + "%"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        233 +
                                            object_list.style.top = str(get_centre(shape)[1] / image.naturalHeight * 100) + "%"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        234 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            235  
                                                object_list.innerHTML = ""
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            236  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            237  
                                                new_radio = document.createElement("input")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -294,6 +328,7 @@ def unselect_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            328  
                                                    selected_shape = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            329  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            330  
                                                object_list.innerHTML = ""
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        331 +
                                            object_list.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            332  
                                                delete_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            333  
                                                next_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            334  
                                                previous_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -310,6 +345,7 @@ def delete_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            345  
                                                selected_shape.parentNode.remove()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            346  
                                                selected_shape = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            347  
                                                object_list.innerHTML = ""
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        348 +
                                            object_list.style.display = "none"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            349  
                                                delete_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            350  
                                                next_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            351  
                                                previous_button.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -366,6 +402,12 @@ def switch_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            402  
                                                print("Shape is now of type:", shape)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            403  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            404  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        405 +
                                        def select_mode():
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        406 +
                                            global shape_type
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        407 +
                                            shape_type = "select"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        408 +
                                            document.getElementById("select").click()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        409 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        410 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            411  
                                            vertical_ruler = document.getElementById("annotation-ruler-vertical")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            412  
                                            horizontal_ruler = document.getElementById("annotation-ruler-horizontal")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            413  
                                            vertical_ruler_2 = document.getElementById("annotation-ruler-vertical-secondary")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/style.css

@@ -770,3 +770,13 @@ nav .button-flat .ripple-pad {

                                
                                
                                
                            
                                
                                    
                                        
                                            770  
                                                text-transform: uppercase;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            771  
                                                color: var(--color-accent);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            772  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        773 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        774 +
                                        #object-types {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        775 +
                                            z-index: 3;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        776 +
                                            background: var(--color-card);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        777 +
                                            box-shadow: var(--shadow-card);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        778 +
                                            padding: 1rem;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        779 +
                                            border-radius: var(--radius-card);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        780 +
                                            position: absolute;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        781 +
                                            display: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        782 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/picture-annotation.html

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

                                
                                
                                
                            
                                
                                    
                                        
                                            14  
                                                <script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            15  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            16  
                                                <x-frame style="--width: 768px">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 -
                                                <h1>Annotating: {{ resource.title }}</h1>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            17  
                                                    <p id="annotation-helper-message">Please wait for Python to load...</p>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            18  
                                                </x-frame>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            19  
                                                <x-frame id="main-area">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -36,6 +35,7 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            35  
                                                        </button>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            36  
                                                    </x-buttonbox>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            37  
                                                    <div id="annotation-zone">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        38 +
                                                    <x-vbox id="object-types" style="--gap-box: 0.25rem; --padding-box: 1rem;"></x-vbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            39  
                                                        <img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            40  
                                                        <div id="annotation-ruler-vertical" class="annotation-ruler"></div>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            41  
                                                        <div id="annotation-ruler-horizontal" class="annotation-ruler"></div>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -66,8 +66,6 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            66  
                                                            Save
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            67  
                                                        </button>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            68  
                                                    </x-buttonbox>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        69 -
                                                <x-vbox id="object-types" style="--gap-box: 0.25rem; --padding-box: 1rem;">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        70 -
                                                </x-vbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            69  
                                                </x-frame>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            70  
                                                <input type="hidden" id="resource-id" name="resource-id" value="{{ resource.id }}">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            71  
                                                <script type="mpy" src="/static/picture-annotation.py"></script>