Robot at 21:44, 22 May 2024

2024-05-22T21:44:55Z

Robot at 21:39, 22 May 2024

2024-05-22T21:39:45Z

Robot: Created page with "Return back to project page: Game Controller - Jakub Vojtek Python code for the Web app library:
2024-05-22T21:38:54Z

Created page with "Return back to project page: Game Controller - Jakub Vojtek Python code for the Web app library: <syntaxhighlight lang=pytho..."

New page
Return back to project page: [[Spike Prime - Game Controller - Jakub Vojtek|Game Controller - Jakub Vojtek]]

Python code for the Web app library:

<syntaxhighlight lang=python>
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
# app.run(host=host, port=port, debug=True)
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')

# Find all buttons with IDs
buttons = soup.find_all('button', {'id': True})

# Add event listener for each button copy
for button in buttons:
button_id = button['id']
button['onmousedown'] = f"sendButtonHold('{button_id}')"
button['onmouseup'] = f"sendButtonClick('{button_id}')"

# Find all text fields with IDs
text_fields = soup.find_all('input', {'type': 'text', 'id': True})

# Add event listener for each text field
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})

# Add event listener for each img element
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)

# Create div to contain buttons
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')

# Create a <link> tag for the CSS file
link_tag = soup.new_tag('link', rel='stylesheet', type='text/css', href=f'{css_file_path}')

# Append the <link> tag to the <head> section of the HTML
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']
# You can handle the button hold event here
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})

</syntaxhighlight>

← Older revision		Revision as of 21:39, 22 May 2024
Line 1:		Line 1:
−	Return back to project page: [[Spike Prime - ~~Game Controller~~ - Jakub Vojtek\|~~Game Controller~~ - Jakub Vojtek]]	+	Return back to project page: [[Spike Prime - Avalanche Cannon - Jakub Vojtek\| Avalanche Cannon - Jakub Vojtek]]

	Python code for the Web app library:		Python code for the Web app library:

@@ Line 28: / Line 28: @@
      global file
      file = html_file_path
      socketio.run(app, allow_unsafe_werkzeug=True, host=host, port=port, debug=True)
@@ Line 41: / Line 40: @@
      soup = BeautifulSoup(html_content, 'html.parser')
      buttons = soup.find_all('button', {'id': True})
      for button in buttons:
          button_id = button['id']
@@ Line 50: / Line 47: @@
          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']
@@ Line 60: / Line 55: @@
      images = soup.find_all('img', {'id': True})
      for img in images:
          img_id = img['id']
@@ Line 111: / Line 105: @@
          container_div.append(canvas)
          buttons_div = soup.new_tag('div')
          buttons_div['class'] = 'canvas-buttons'
-         # Create buttons for drawing functionalities
+         # create buttons for drawing functionalities
          free_draw_btn = soup.new_tag('button')
          free_draw_btn['id'] = f'{canvas_id}-freeDrawBtn'
@@ Line 159: / Line 152: @@
          soup.head.append(socket_script_tag)
-         # JavaScript code for drawing functionalities
+         # javascript code for drawing functionalities
          canvas_script = f"""
          <script type="text/javascript" charset="utf-8">
@@ Line 409: / Line 402: @@
      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)
@@ Line 443: / Line 434: @@
 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)
@@ Line 508: / Line 498: @@
      """
      socketio.emit('add_text', {'script': script})
 </syntaxhighlight>

Library - Code - Revision history

Robot at 21:44, 22 May 2024

Robot at 21:39, 22 May 2024