TEST annotation editor

roundabout,
created on Monday, 19 August 2024, 08:43:40 (1724057020), received on Monday, 19 August 2024, 08:43:57 (1724057037)
Author identity: vlad <vlad.muntoiu@gmail.com>

                                
                                
                                
                            
                                
                                    
                                        1 +
                                        from pyscript import document
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        2 +
                                        from pyodide.ffi import create_proxy
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        3 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 +
                                        # Remove the loading message
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        5 +
                                        document.getElementById("python-loading").remove()
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 +
                                        document.getElementById("shape-options").style.display = "flex"
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 +
                                        image = document.getElementById("annotation-image")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        10 +
                                        zone = document.getElementById("annotation-zone")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        12 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        13 +
                                        shape_type = ""
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        15 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 +
                                        def switch_shape(event):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 +
                                            global shape_type
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 +
                                            shape = event.currentTarget.id
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 +
                                            shape_type = shape
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 +
                                            print("Shape is now of type:", shape)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 +
                                        def open_shape(event):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 +
                                            print("Creating a new shape of type:", shape_type)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 +
                                            new_shape = document.createElementNS("http://www.w3.org/2000/svg", "svg")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        26 +
                                            new_shape.setAttribute("width", image.width)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 +
                                            new_shape.setAttribute("height", image.height)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        29 +
                                            if shape_type == "shape-bbox":
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 +
                                                rectangle = document.createElementNS("http://www.w3.org/2000/svg", "rect")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 +
                                                rectangle.setAttribute("x", "10")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 +
                                                rectangle.setAttribute("y", "10")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        33 +
                                                rectangle.setAttribute("width", "100")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        34 +
                                                rectangle.setAttribute("height", "100")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 +
                                                rectangle.setAttribute("fill", "hotPink")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        36 +
                                                new_shape.appendChild(rectangle)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        37 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        38 +
                                            zone.appendChild(new_shape)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        39 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        40 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        41 +
                                        for button in list(document.getElementById("shape-selector").children):
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        42 +
                                            button.addEventListener(
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        43 +
                                                "click",
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        44 +
                                                create_proxy(switch_shape)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        45 +
                                            )
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        46 +
                                            print("Shape", button.id, "is available")
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        47 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        48 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        49 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        50 +
                                        zone.addEventListener(
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        51 +
                                            "click",
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        52 +
                                            create_proxy(open_shape)
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 +
                                        )
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

                                
                                
                                
                            
                                
                                    
                                        
                                            3  
                                            :root {
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            4  
                                                --gap-navbar: 1rem;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            5  
                                                --width-navbar-button: 0;
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 -
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                
                                
                                
                            
                                
                                    
                                        6 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 +
                                        iconify-icon {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 +
                                            display: inline-block;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        10 +
                                            width: 1em;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 +
                                            height: 1em;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        12 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        13 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 +
                                        :is(#shape-selector, #shape-options) > button > iconify-icon {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        15 +
                                            font-size: 2rem;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 +
                                        #annotation-zone {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 +
                                            position: relative;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 +
                                        #annotation-zone > svg {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 +
                                            z-index: 1;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 +
                                            position: absolute;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 +
                                            top: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        26 +
                                            left: 0;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 +
                                        }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

                                
                                
                                
                            
                                
                                    
                                        
                                            7  
                                                    <link rel="stylesheet" href="/static/style.css">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            8  
                                                    <script src="/static/efficient-ui/dialogs.js"></script>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            9  
                                                    <script src="/static/efficient-ui/toasts.js"></script>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        10 +
                                                <script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            11  
                                                </head>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            12  
                                                <body>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            13  
                                                    <header>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                            
                                

                                
                                
                                
                            
                                
                                    
                                        
                                            1  
                                            {% extends "default.html" %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            2  
                                            {% block title %}Picture | gigadata{% endblock %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            3  
                                            {% block content %}
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        4 +
                                            <style>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        5 +
                                                py-script {
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 +
                                                    display: none;
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 +
                                                }
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        8 +
                                                /* Full PyScript style is too much, but we still need to hide the Python code */
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        9 +
                                            </style>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        10 +
                                            <script type="module" src="https://pyscript.net/releases/2024.8.2/core.js"></script>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        11 +
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            12  
                                                <x-frame style="--width: 768px">
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            13  
                                                    <h1>Annotating: {{ resource.title }}</h1>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        6 -
                                        
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        7 -
                                                <img src="/raw/picture/{{ resource.id }}" alt="{{ resource.title }}">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        14 +
                                                <p id="python-loading">Please wait for Python to load...</p>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        15 +
                                            </x-frame>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        16 +
                                            <x-frame is="main-area">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        17 +
                                                <x-buttonbox id="shape-selector">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        18 +
                                                    <button class="button-flat" title="rectangle" id="shape-bbox">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        19 +
                                                        <iconify-icon icon="mdi:square"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        20 +
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        21 +
                                                    <button class="button-flat" title="oriented rectangle" id="shape-o-bbox">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        22 +
                                                        <iconify-icon icon="mdi:rhombus"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        23 +
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        24 +
                                                    <button class="button-flat" title="ellipse" id="shape-ellipse">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        25 +
                                                        <iconify-icon icon="mdi:circle"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        26 +
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        27 +
                                                    <button class="button-flat" title="polygon" id="shape-polygon">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        28 +
                                                        <iconify-icon icon="mdi:pentagon"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        29 +
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        30 +
                                                    <button class="button-flat" title="freehand closed" id="shape-freehand-polygon">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        31 +
                                                        <iconify-icon icon="mdi:lasso"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        32 +
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        33 +
                                                    <button class="button-flat" title="line" id="shape-line">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        34 +
                                                        <iconify-icon icon="mdi:graph-line-variant"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        35 +
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        36 +
                                                    <button class="button-flat" title="freehand open" id="shape-freehand-line">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        37 +
                                                        <iconify-icon icon="mdi:gesture"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        38 +
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        39 +
                                                    <button class="button-flat" title="point" id="shape-point">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        40 +
                                                        <iconify-icon icon="mdi:circle"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        41 +
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        42 +
                                                    <button class="button-flat" title="whole picture" id="shape-all">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        43 +
                                                        <iconify-icon icon="mdi:image"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        44 +
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        45 +
                                                </x-buttonbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        46 +
                                                <div id="annotation-zone">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        47 +
                                                    <img id="annotation-image" src="/raw/picture/{{ resource.id }}" alt="">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        48 +
                                                </div>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        49 +
                                                <x-buttonbox style="display: none;" id="shape-options">
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        50 +
                                                    <button class="button-flat" title="cancel" disabled>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        51 +
                                                        <iconify-icon icon="mdi:close"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        52 +
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        53 +
                                                    <button class="button-flat" title="apply" disabled>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        54 +
                                                        <iconify-icon icon="mdi:check"></iconify-icon>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        55 +
                                                    </button>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        56 +
                                                </x-buttonbox>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            57  
                                                </x-frame>
                                        
                                        
                                            
                                            
                                            
                                            
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        58 +
                                            <script type="py" src="/static/picture-annotation.py"></script>
                                        
                                        
                                        
                                    
                                
                                
                                
                            
                                
                                    
                                        
                                            59  
                                            {% endblock %}