Library - Code

Return back to project page: Avalanche Cannon - Jakub Vojtek

Python code for the Web app library:

from flask import Flask, render_template, request, Response
from flask_socketio import SocketIO
from bs4 import BeautifulSoup
from blinker import signal
import cv2

app = Flask(__name__)
socketio = SocketIO(app)

button_click_signal = signal('button-click')
button_hold_signal = signal('button-hold')
image_click_signal = signal('image-click')
textfield_change_signal = signal('textfield-change')

file = None
video_feed_path = None

css = False
css_file_path = None


def run_app(html_file_path, host='0.0.0.0', port=5000):
    global file
    file = html_file_path
    socketio.run(app, allow_unsafe_werkzeug=True, host=host, port=port, debug=True)


def read_html_file(file_path):
    with open(file_path, 'r') as file:
        html_content = file.read()
    return html_content


def add_event_listeners(html_content):
    soup = BeautifulSoup(html_content, 'html.parser')

    buttons = soup.find_all('button', {'id': True})

    for button in buttons:
        button_id = button['id']
        button['onmousedown'] = f"sendButtonHold('{button_id}')"
        button['onmouseup'] = f"sendButtonClick('{button_id}')"

    text_fields = soup.find_all('input', {'type': 'text', 'id': True})

    for text_field in text_fields:
        text_field_id = text_field['id']
        text_field['onchange'] = f"sendTextFieldContent('{text_field_id}', this.value)"

    images = soup.find_all('img', {'id': True})

    for img in images:
        img_id = img['id']
        img['onclick'] = f"sendImageClick(event, '{img_id}')"

    script_tag = soup.new_tag('script')
    script_tag.string = """
    function sendTextFieldContent(textFieldId, content) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/text_field_content', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify({textFieldId: textFieldId, content: content}));
    };
    function sendButtonClick(buttonId) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/button_click', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify({buttonId: buttonId}));
    };
    function sendButtonHold(buttonId) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/button_hold', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify({buttonId: buttonId}));
    };
    function sendImageClick(event, imgId) {
        var img = document.getElementById(imgId);
        var rect = img.getBoundingClientRect();
        var x = Math.round(event.clientX - rect.left);
        var y = Math.round(event.clientY - rect.top);
        var position = "(" + x + ", " + y + ")";
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '/image_click', true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify({imgId: imgId, position: position}));
    }
    """
    soup.head.append(script_tag)

    canvases = soup.find_all('canvas')

    for canvas in canvases:
        canvas_id = canvas['id']

        container_div = soup.new_tag('div')
        container_div['class'] = 'canvas-container'

        canvas.insert_before(container_div)

        container_div.append(canvas)

        buttons_div = soup.new_tag('div')
        buttons_div['class'] = 'canvas-buttons'

        # create buttons for drawing functionalities
        free_draw_btn = soup.new_tag('button')
        free_draw_btn['id'] = f'{canvas_id}-freeDrawBtn'
        free_draw_btn.string = 'Free Draw'
        buttons_div.append(free_draw_btn)

        line_draw_btn = soup.new_tag('button')
        line_draw_btn['id'] = f'{canvas_id}-lineDrawBtn'
        line_draw_btn.string = 'Draw Line'
        buttons_div.append(line_draw_btn)

        rectangle_draw_btn = soup.new_tag('button')
        rectangle_draw_btn['id'] = f'{canvas_id}-rectangleDrawBtn'
        rectangle_draw_btn.string = 'Draw Rectangle'
        buttons_div.append(rectangle_draw_btn)

        filled_rectangle_draw_btn = soup.new_tag('button')
        filled_rectangle_draw_btn['id'] = f'{canvas_id}-filledRectangleDrawBtn'
        filled_rectangle_draw_btn.string = 'Draw Filled Rectangle'
        buttons_div.append(filled_rectangle_draw_btn)

        oval_draw_btn = soup.new_tag('button')
        oval_draw_btn['id'] = f'{canvas_id}-ovalDrawBtn'
        oval_draw_btn.string = 'Draw Oval'
        buttons_div.append(oval_draw_btn)

        filled_oval_draw_btn = soup.new_tag('button')
        filled_oval_draw_btn['id'] = f'{canvas_id}-filledOvalDrawBtn'
        filled_oval_draw_btn.string = 'Draw Filled Oval'
        buttons_div.append(filled_oval_draw_btn)

        clear_btn = soup.new_tag('button')
        clear_btn['id'] = f'{canvas_id}-clearBtn'
        clear_btn.string = 'Clear'
        buttons_div.append(clear_btn)

        container_div.append(buttons_div)

        socket_script_tag = soup.new_tag('script',
                                         src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js",
                                         integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==",
                                         crossorigin="anonymous")
        soup.head.append(socket_script_tag)

        # javascript code for drawing functionalities
        canvas_script = f"""
        <script type="text/javascript" charset="utf-8">
            var socket = io();
            socket.on('connect', function() {{
                console.log("socket connected");
            }});
            var canvas = document.getElementById("{canvas_id}");
            var ctx_{canvas_id} = canvas.getContext("2d"); 
            var selectedMode = "freeDraw";
            var startPoint = null;
            var isDrawing = false;
            var lastX = 0;
            var lastY = 0;

            document.getElementById("{canvas_id}-freeDrawBtn").addEventListener("click", function() {{
                selectedMode = "freeDraw";
                startPoint = null; 
            }});

            document.getElementById("{canvas_id}-lineDrawBtn").addEventListener("click", function() {{
                selectedMode = "drawLine";
                startPoint = null;
            }});

            document.getElementById("{canvas_id}-rectangleDrawBtn").addEventListener("click", function() {{
                selectedMode = "drawRectangle";
                startPoint = null;
            }});

            document.getElementById("{canvas_id}-filledRectangleDrawBtn").addEventListener("click", function() {{
                selectedMode = "drawFilledRectangle";
                startPoint = null; 
            }});

            document.getElementById("{canvas_id}-ovalDrawBtn").addEventListener("click", function() {{
                selectedMode = "drawOval";
                startPoint = null; 
            }});

            document.getElementById("{canvas_id}-filledOvalDrawBtn").addEventListener("click", function() {{
                selectedMode = "drawFilledOval";
                startPoint = null; 
            }});

            document.getElementById("{canvas_id}-clearBtn").addEventListener("click", function() {{
                var canvas = document.getElementById("{canvas_id}");
                var ctx = canvas.getContext("2d");
                ctx.clearRect(0, 0, canvas.width, canvas.height); 
                selectedMode = "freeDraw"; 
            }});

            canvas.addEventListener("mousedown", function(e) {{
                if (selectedMode === "freeDraw") {{
                    isDrawing = true;
                    [lastX, lastY] = [e.offsetX, e.offsetY];
                }}
            }});

            canvas.addEventListener("mousemove", function(e) {{
                if (isDrawing && selectedMode === "freeDraw") {{
                    ctx_{canvas_id}.beginPath();
                    ctx_{canvas_id}.moveTo(lastX, lastY);
                    ctx_{canvas_id}.lineTo(e.offsetX, e.offsetY);
                    ctx_{canvas_id}.strokeStyle = "black";
                    ctx_{canvas_id}.lineWidth = 2;
                    ctx_{canvas_id}.stroke();
                    [lastX, lastY] = [e.offsetX, e.offsetY];
                }}
            }});

            canvas.addEventListener("mouseup", function() {{
                isDrawing = false;
            }});

            canvas.addEventListener("mouseout", function() {{
                isDrawing = false;
            }});

            canvas.addEventListener("click", function(e) {{
                if (selectedMode === "drawLine") {{
                    if (!startPoint) {{
                        startPoint = {{ x: e.offsetX, y: e.offsetY }};
                    }} else {{
                        drawLine(ctx_{canvas_id}, startPoint.x, startPoint.y, e.offsetX, e.offsetY);
                        startPoint = null; 
                    }}
                }} else if (selectedMode === "drawRectangle") {{
                    if (!startPoint) {{
                        startPoint = {{ x: e.offsetX, y: e.offsetY }};
                    }} else {{
                        drawRectangle(ctx_{canvas_id}, startPoint.x, startPoint.y, e.offsetX, e.offsetY);
                        startPoint = null;
                    }}
                }} else if (selectedMode === "drawFilledRectangle") {{
                    if (!startPoint) {{
                        startPoint = {{ x: e.offsetX, y: e.offsetY }};
                    }} else {{
                        drawFilledRectangle(ctx_{canvas_id}, startPoint.x, startPoint.y, e.offsetX, e.offsetY);
                        startPoint = null;
                    }}
                }} else if (selectedMode === "drawOval") {{
                    if (!startPoint) {{
                        startPoint = {{ x: e.offsetX, y: e.offsetY }};
                    }} else {{
                        drawOval(ctx_{canvas_id}, startPoint.x, startPoint.y, e.offsetX, e.offsetY);
                        startPoint = null;
                    }}
                }} else if (selectedMode === "drawFilledOval") {{
                    if (!startPoint) {{
                        startPoint = {{ x: e.offsetX, y: e.offsetY }};
                    }} else {{
                        drawFilledOval(ctx_{canvas_id}, startPoint.x, startPoint.y, e.offsetX, e.offsetY);
                        startPoint = null;
                    }}
                }}
            }});

            function drawLine(ctx, x1, y1, x2, y2, color = "black") {{
                ctx.beginPath();
                ctx.moveTo(x1, y1);
                ctx.lineTo(x2, y2);
                ctx.strokeStyle = color;
                ctx.lineWidth = 2;
                ctx.stroke();
            }}

            function drawRectangle(ctx, x1, y1, x2, y2, color = "black") {{
                ctx.beginPath();
                ctx.strokeStyle = color;
                ctx.lineWidth = 2;
                ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
            }}

            function drawFilledRectangle(ctx, x1, y1, x2, y2, color = "black") {{
                ctx.fillStyle = color;
                ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
            }}

            function drawOval(ctx, x1, y1, x2, y2, color = "black") {{
                var radiusX = Math.abs(x2 - x1) / 2;
                var radiusY = Math.abs(y2 - y1) / 2;
                var centerX = Math.min(x1, x2) + radiusX;
                var centerY = Math.min(y1, y2) + radiusY;

                ctx.beginPath();
                ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
                ctx.strokeStyle = color;
                ctx.lineWidth = 2;
                ctx.stroke();
            }}

            function drawFilledOval(ctx, x1, y1, x2, y2, color = "black") {{
                var radiusX = Math.abs(x2 - x1) / 2;
                var radiusY = Math.abs(y2 - y1) / 2;
                var centerX = Math.min(x1, x2) + radiusX;
                var centerY = Math.min(y1, y2) + radiusY;

                ctx.beginPath();
                ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
                ctx.fillStyle = color;
                ctx.fill();
            }}
            socket.on('draw_line', function(data) {{
                eval(data.script); 
            }});
            socket.on('draw_oval', function(data) {{
                eval(data.script); 
            }});
            socket.on('draw_rectangle', function(data) {{
                eval(data.script); 
            }});
            socket.on('add_text', function(data) {{
                eval(data.script); 
            }});
            </script>
            """
        soup.body.append(BeautifulSoup(canvas_script, 'html.parser'))
        buttons_div.insert_after(script_tag)

    link_tag = soup.new_tag('link', rel='stylesheet', type='text/css', href='/static/styles.css')
    soup.head.append(link_tag)

    socket_script_tag = soup.new_tag('script',
                                     src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js",
                                     integrity="sha512-q/dWJ3kcmjBLU4Qc47E4A9kTB4m3wuTY7vkFJDTZKjTs8jhyGQnaUrxa0Ytd0ssMZhbNua9hE+E7Qv1j+DyZwA==",
                                     crossorigin="anonymous")
    soup.head.append(socket_script_tag)

    socket_script_tag = """
        <script type="text/javascript" charset="utf-8">
            var socket = io();
            socket.on('connect', function() {
                socket.emit('my event', {data: 'Im connected!'});
                console.log("socket connected");
            });

            function changeLabelText(labelId, newText) {
                var label = document.getElementById(labelId);
                if (label) {
                    label.innerText = newText;
                }
            }

            socket.on('change_label', function(data) {
                eval(data.script); // Execute the provided script
            });
        </script>
        """
    soup.head.append(BeautifulSoup(socket_script_tag, 'html.parser'))

    return str(soup)


def set_img_src_to_camera(img_src, camera_index=0):
    global video_feed_path
    video_feed_path = img_src

    if video_feed_path is not None:
        @app.route(video_feed_path)
        def video_feed():
            print("Waiting for camera response")
            return Response(generate_video_frame(camera_index), mimetype='multipart/x-mixed-replace; boundary=frame')


def generate_video_frame(camera_index):
    print("Generating camera feed")
    camera = cv2.VideoCapture(camera_index)
    while True:
        success, frame = camera.read()
        if not success:
            break
        else:
            ret, buffer = cv2.imencode('.jpg', frame)
            frame = buffer.tobytes()
            yield (b'--frame\r\n'
                   b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

    camera.release()
    cv2.destroyAllWindows()


def add_css_file(css_path):
    global css_file_path
    css_file_path = css_path


def add_css(html_content):
    soup = BeautifulSoup(html_content, 'html.parser')

    link_tag = soup.new_tag('link', rel='stylesheet', type='text/css', href=f'{css_file_path}')

    soup.head.append(link_tag)

    return str(soup)


@app.route('/')
def index():
    if file is not None:
        html_file_path = file
        html_content = read_html_file(html_file_path)
        if css_file_path is not None:
            modified_html_content = add_css(html_content)
        else:
            modified_html_content = html_content
        modified_html_content = add_event_listeners(modified_html_content)
        return modified_html_content
    else:
        return "File path not provided"


@app.route('/button_click', methods=['POST'])
def button_click():
    button_id = request.json['buttonId']
    button_click_signal.send(app, button_id=button_id)
    return "Button clicked"


@app.route('/button_hold', methods=['POST'])
def button_hold():
    button_id = request.json['buttonId']
    print(f"Button '{button_id}' is being held")
    button_hold_signal.send(app, button_id=button_id)
    return "Button hold event received"


@app.route('/text_field_content', methods=['POST'])
def text_field_content():
    data = request.json
    text_field_id = data['textFieldId']
    content = data['content']
    textfield_change_signal.send(app, text_field_id=text_field_id, content=content)
    print(f"Content of text field with ID '{text_field_id}': {content}")
    return "Text field content received"


@app.route('/image_click', methods=['POST'])
def image_click():
    data = request.json
    img_id = data['imgId']
    position = data['position']
    image_click_signal.send(app, img_id=img_id, position=position)
    return "Image click data received"


@socketio.on('change_label_text')
def change_label_text(label_id, new_text):
    script = f"changeLabelText('{label_id}', '{new_text}');"
    socketio.emit('change_label', {'script': script})


@socketio.on('draw_line')
def draw_line(canvas_id, x1, y1, x2, y2, color='black'):
    script = f"drawLine(ctx_{canvas_id}, {x1}, {y1}, {x2}, {y2}, '{color}');"
    socketio.emit('draw_line', {'script': script})


@socketio.on('draw_oval')
def draw_oval(canvas_id, x1, y1, x2, y2, filled=False, color='black'):
    if filled:
        script = f"drawOval(ctx_{canvas_id}, {x1}, {y1}, {x2}, {y2}, '{color}');"
    else:
        script = f"drawFilledOval(ctx_{canvas_id}, {x1}, {y1}, {x2}, {y2}, '{color}');"
    socketio.emit('draw_oval', {'script': script})


@socketio.on('draw_rectangle')
def draw_rectangle(canvas_id, x1, y1, x2, y2, filled=False, color='black'):
    if filled:
        script = f"drawRectangle(ctx_{canvas_id}, {x1}, {y1}, {x2}, {y2}, '{color}');"
    else:
        script = f"drawFilledRectangle(ctx_{canvas_id}, {x1}, {y1}, {x2}, {y2}, '{color}');"
    socketio.emit('draw_rectangle', {'script': script})


@socketio.on('add_text')
def add_text(canvas_id, x, y, text, color='black', font='12px Arial'):
    script = f"""
    var canvas = document.getElementById("{canvas_id}");
    var ctx = canvas.getContext("2d");
    ctx.font = "{font}";
    ctx.fillStyle = "{color}";
    ctx.fillText("{text}", {x}, {y});
    """
    socketio.emit('add_text', {'script': script})