More polish

app.py

@@ -36,6 +36,12 @@ def split(value, separator=None, maxsplit=-1):

                                
                                
                                
                            
                                
                                    
                                        
                                            36  
                                                return value.split(separator, maxsplit)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            37  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            38  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        39 +
                                        @app.template_filter("median")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        40 +
                                        def median(value):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        41 +
                                            value = list(value)   # prevent generators
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        42 +
                                            return sorted(value)[len(value) // 2]
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        43 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        44 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            45  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            46  
                                            with app.app_context():
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            47  
                                                class User(db.Model):
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/picture-annotation.py

@@ -116,7 +116,7 @@ def put_shapes(json_shapes):

                                
                                
                                
                            
                                
                                    
                                        
                                            116  
                                                        rectangle.setAttribute("width", str(shape["shape"]["w"] * image.naturalWidth))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            117  
                                                        rectangle.setAttribute("height", str(shape["shape"]["h"] * image.naturalHeight))
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            118  
                                                        rectangle.setAttribute("fill", "none")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        119 -
                                                    rectangle.setAttribute("data-object-type", shape["object"])
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        119 +
                                                    rectangle.setAttribute("data-object-type", shape["object"] or "")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            120  
                                                        rectangle.classList.add("shape-bbox")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            121  
                                                        rectangle.classList.add("shape")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            122  
                                                        new_shape.appendChild(rectangle)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -126,7 +126,7 @@ def put_shapes(json_shapes):

                                
                                
                                
                            
                                
                                    
                                        
                                            126  
                                                            [f"{point['x'] * image.naturalWidth},{point['y'] * image.naturalHeight}" for point in shape["shape"]])
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            127  
                                                        polygon.setAttribute("points", points)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            128  
                                                        polygon.setAttribute("fill", "none")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        129 -
                                                    polygon.setAttribute("data-object-type", shape["object"])
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        129 +
                                                    polygon.setAttribute("data-object-type", shape["object"] or "")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            130  
                                                        polygon.classList.add(f"shape-{shape['type']}")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            131  
                                                        polygon.classList.add("shape")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            132  
                                                        new_shape.appendChild(polygon)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -137,7 +137,7 @@ def put_shapes(json_shapes):

                                
                                
                                
                            
                                
                                    
                                        
                                            137  
                                                        point.setAttribute("r", "0")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            138  
                                                        point.classList.add("shape-point")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            139  
                                                        point.classList.add("shape")
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        140 -
                                                    point.setAttribute("data-object-type", shape["object"])
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        140 +
                                                    point.setAttribute("data-object-type", shape["object"] or "")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            141  
                                                        new_shape.appendChild(point)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            142  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            143  
                                                    zone.appendChild(new_shape)
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

static/style.css

@@ -130,6 +130,9 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            130  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            131  
                                            .shape-container-viewonly > .shape-point {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            132  
                                                stroke: var(--color-info);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        133 +
                                            transition: r 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        134 +
                                                        stroke-width 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        135 +
                                                        filter 0.25s cubic-bezier(0.61, 1, 0.88, 1);
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            136  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            137  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            138  
                                            .shape-label {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -162,6 +165,12 @@ iconify-icon {

                                
                                
                                
                            
                                
                                    
                                        
                                            165  
                                                transform: scale(1);
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            166  
                                            }
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            167  
                                            
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        168 +
                                        /* Hide points with a bubble */
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        169 +
                                        #annotation-zone:has(+ x-buttonbox #show-objects:checked) > .shape-container-viewonly > .shape-point:has(+ foreignObject) {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        170 +
                                            r: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        171 +
                                            border-width: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        172 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        173 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            174  
                                            #annotation-zone:has(+ x-buttonbox #show-shapes:checked) > .shape-container-viewonly > .shape {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            175  
                                                fill-opacity: 0.1;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            176  
                                                stroke-opacity: 1;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

templates/picture.html

@@ -1,5 +1,14 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            1  
                                            {% extends "default.html" %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            2  
                                            {% block title %}Picture | gigadata{% endblock %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        3 +
                                        {% macro shape_label(x, y, text) %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 +
                                            {% if text %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        5 +
                                                <foreignObject height="100%" width="100%" x="{{ x * size[0] }}" y="{{ y * size[1] }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 +
                                                    <div class="shape-label">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 +
                                                        {{ text }}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 +
                                                    </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 +
                                                </foreignObject>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        10 +
                                            {% endif %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 +
                                        {% endmacro %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            12  
                                            {% block content %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            13  
                                                <x-frame style="--width: 768px">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            14  
                                                    <h1>{{ resource.title }}</h1>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -12,10 +21,13 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            21  
                                                                <svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            22  
                                                                    <rect x="{{ region.json.shape.x * size[0] }}"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            23  
                                                                          y="{{ region.json.shape.y * size[1] }}"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        15 -
                                                                      width="{{ region.json.shape.width * size[0] }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 -
                                                                      height="{{ region.json.shape.height * size[1] }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 +
                                                                      width="{{ region.json.shape.w * size[0] }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 +
                                                                      height="{{ region.json.shape.h * size[1] }}"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            26  
                                                                          fill="none" class="shape-bbox shape"
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            27  
                                                                    ></rect>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 +
                                                                {% set centre_x = region.json.shape.x + region.json.shape.w / 2 %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        29 +
                                                                {% set centre_y = region.json.shape.y + region.json.shape.h / 2 %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 +
                                                                {{ shape_label(centre_x, centre_y, region.object_id) }}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            31  
                                                                </svg>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            32  
                                                            {% elif region.json.type == "polygon" %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            33  
                                                                <svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        

@@ -26,19 +38,20 @@

                                
                                
                                
                            
                                
                                    
                                        
                                            38  
                                                                    {% set right = region.json.shape | sort(attribute='x') | last %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            39  
                                                                    {% set centre_x = (left.x + right.x) / 2 %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            40  
                                                                    {% set centre_y = (top.y + bottom.y) / 2 %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        29 -
                                                                <foreignObject height="100%" width="100%" x="{{ centre_x * size[0] }}" y="{{ centre_y * size[1] }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 -
                                                                    <div class="shape-label">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 -
                                                                        {{ region.object_id }}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 -
                                                                    </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        33 -
                                                                </foreignObject>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        41 +
                                                                {{ shape_label(centre_x, centre_y, region.object_id) }}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            42  
                                                                </svg>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            43  
                                                            {% elif region.json.type == "polyline" %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            44  
                                                                <svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        37 -
                                                                <polyline points="{% for point in region.json.shape %}{{ point.x * size[0] }},{{ point.y * size[1] }} {% endfor %}" fill="none" class="shape-polyline shape"></polyline>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        45 +
                                                                <polyline points="{% for point in region.json.shape %}{{ point.x * size[0] }},{{ point.y * size[1] }} {% endfor %}" fill="none" class="shape-polyline shape">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        46 +
                                                                {# Median point #}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        47 +
                                                                {% set centre_x = region.json.shape | map(attribute="x") | median %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        48 +
                                                                {% set centre_y = region.json.shape | map(attribute="y") | median %}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        49 +
                                                                {{ shape_label(centre_x, centre_y, region.object_id) }}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            50  
                                                                </svg>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            51  
                                                            {% elif region.json.type == "point" %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            52  
                                                                <svg class="shape-container-viewonly" viewBox="0 0 {{ size[0] }} {{ size[1] }}">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            53  
                                                                    <circle cx="{{ region.json.shape.x * size[0] }}" cy="{{ region.json.shape.y * size[1] }}" r="0" fill="none" class="shape-point shape"></circle>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        54 +
                                                                {{ shape_label(region.json.shape.x, region.json.shape.y, region.object_id) }}
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            55  
                                                                </svg>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            56  
                                                            {% endif %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            57  
                                                        {% endfor %}