Rectangle SVG scaled to the image

static/picture-annotation.py

@@ -42,15 +42,17 @@ def make_bbox(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            42  
                                                zone_rect = zone.getBoundingClientRect()
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            43  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            44  
                                                if bbox_pos is None:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        45 -
                                                bbox_pos = [event.clientX - zone_rect.left, event.clientY - zone_rect.top]
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        46 -
                                                vertical_ruler_2.style.left = str(bbox_pos[0]) + "px"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        47 -
                                                horizontal_ruler_2.style.top = str(bbox_pos[1]) + "px"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        45 +
                                                bbox_pos = [(event.clientX - zone_rect.left) / zone_rect.width,
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        46 +
                                                            (event.clientY - zone_rect.top) / zone_rect.height]
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        47 +
                                                vertical_ruler_2.style.left = str(bbox_pos[0] * 100) + "%"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        48 +
                                                horizontal_ruler_2.style.top = str(bbox_pos[1] * 100) + "%"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            49  
                                                    vertical_ruler_2.style.display = "block"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            50  
                                                    horizontal_ruler_2.style.display = "block"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            51  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            52  
                                                else:
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            53  
                                                    x0, y0 = bbox_pos
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 -
                                                x1, y1 = event.clientX - zone_rect.left, event.clientY - zone_rect.top
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        54 +
                                                x1 = (event.clientX - zone_rect.left) / zone_rect.width
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        55 +
                                                y1 = (event.clientY - zone_rect.top) / zone_rect.height
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            56  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            57  
                                                    rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            58  
                                                    minx = min(x0, x1)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -58,10 +60,10 @@ def make_bbox(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            60  
                                                    maxx = max(x0, x1)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            61  
                                                    maxy = max(y0, y1)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            62  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        61 -
                                                rectangle.setAttribute("x", str(minx))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        62 -
                                                rectangle.setAttribute("y", str(miny))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        63 -
                                                rectangle.setAttribute("width", str(maxx - minx))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        64 -
                                                rectangle.setAttribute("height", str(maxy - miny))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        63 +
                                                rectangle.setAttribute("x", str(minx * image.naturalWidth))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        64 +
                                                rectangle.setAttribute("y", str(miny * image.naturalHeight))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        65 +
                                                rectangle.setAttribute("width", str((maxx - minx) * image.naturalWidth))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        66 +
                                                rectangle.setAttribute("height", str((maxy - miny) * image.naturalHeight))
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            67  
                                                    rectangle.setAttribute("fill", "none")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            68  
                                                    rectangle.classList.add("shape-bbox")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            69  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -71,7 +73,7 @@ def make_bbox(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            73  
                                                    horizontal_ruler.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            74  
                                                    vertical_ruler_2.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            75  
                                                    horizontal_ruler_2.style.display = "none"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        74 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        76 +
                                                document.body.style.cursor = "auto"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            77  
                                                    zone.removeEventListener("click", create_proxy(make_bbox))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            78  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            79  
                                                return
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -88,8 +90,10 @@ def open_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            90  
                                                global last_click_position, new_shape
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            91  
                                                print("Creating a new shape of type:", shape_type)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            92  
                                                new_shape = document.createElementNS("http://www.w3.org/2000/svg", "svg")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        91 -
                                            new_shape.setAttribute("width", image.width)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        92 -
                                            new_shape.setAttribute("height", image.height)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        93 +
                                            new_shape.setAttribute("width", "100%")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        94 +
                                            new_shape.setAttribute("height", "100%")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        95 +
                                            zone_rect = zone.getBoundingClientRect()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        96 +
                                            new_shape.setAttribute("viewBox", f"0 0 {image.naturalWidth} {image.naturalHeight}")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            97  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            98  
                                                if shape_type == "shape-bbox":
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            99  
                                                    bbox_pos = None
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -99,8 +103,7 @@ def open_shape(event):

                                
                                
                                
                            
                                
                                    
                                        
                                            103  
                                                    )
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            104  
                                                    vertical_ruler.style.display = "block"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            105  
                                                    horizontal_ruler.style.display = "block"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        102 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        103 -
                                            zone.appendChild(new_shape)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        106 +
                                                document.body.style.cursor = "crosshair"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            107  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            108  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            109  
                                            for button in list(document.getElementById("shape-selector").children):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/style.css

@@ -24,6 +24,8 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            24  
                                                position: absolute;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            25  
                                                top: 0;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            26  
                                                left: 0;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 +
                                            width: 100%;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 +
                                            height: 100%;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            29  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            30  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            31  
                                            .annotation-ruler {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -47,5 +49,8 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            49  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            50  
                                            .shape-bbox {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            51  
                                                stroke: var(--color-accent);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        52 +
                                            fill: var(--color-accent);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 +
                                            fill-opacity: 0.1;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            54  
                                                stroke-width: 2px;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        55 +
                                            vector-effect: non-scaling-stroke;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            56  
                                            }