Files
apsbps-tools/hmi/hmi_web.py
Martino Ferrari 607e1b4dd1 Initial commit
2026-02-24 13:15:57 +01:00

139 lines
5.4 KiB
Python

from flask import Flask, render_template_string, request, jsonify
import serial
import serial.tools.list_ports
import time
app = Flask(__name__)
ser = None
HTML_TEMPLATE = """
<!DOCTYPE html>
<html>
<head>
<title>ESP32-P4 Waveform Gen Dual</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: sans-serif; max-width: 600px; margin: 20px auto; padding: 20px; background: #f4f4f9; }
.card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; }
.channel { border-left: 5px solid #007bff; padding-left: 15px; margin: 20px 0; }
.channel.b { border-left-color: #28a745; }
.group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-weight: bold; }
input[type="number"], select { width: 100%; padding: 8px; box-sizing: border-box; }
button { background: #007bff; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; margin-right: 5px; }
button.off { background: #dc3545; }
button.on { background: #28a745; }
.status { padding: 10px; border-radius: 4px; font-size: 0.9em; margin-top: 10px; }
.connected { background: #d4edda; color: #155724; }
.disconnected { background: #f8d7da; color: #721c24; }
</style>
</head>
<body>
<div class="card">
<h2>Connection</h2>
<select id="port">
{% for port in ports %}
<option value="{{ port }}">{{ port }}</option>
{% endfor %}
</select>
<button onclick="connect()" style="margin-top:10px; width:100%">Connect</button>
<div id="status" class="status disconnected">Disconnected</div>
</div>
<div class="card channel">
<h3>Channel A (Pin 33)</h3>
<div class="group">
<label>Frequency (Hz)</label>
<input type="range" id="freq_a_slider" min="0" max="5000" value="10" oninput="document.getElementById('freq_a').value=this.value">
<input type="number" id="freq_a" value="10" min="0" max="5000">
</div>
<button onclick="sendCmd('A ' + document.getElementById('freq_a').value)">Set Freq</button>
<button class="on" onclick="sendCmd('A ON')">Enable</button>
<button class="off" onclick="sendCmd('A OFF')">Disable</button>
</div>
<div class="card channel b">
<h3>Channel B (Pin 32)</h3>
<div class="group">
<label>Frequency (Hz)</label>
<input type="range" id="freq_b_slider" min="0" max="5000" value="5000" oninput="document.getElementById('freq_b').value=this.value">
<input type="number" id="freq_b" value="5000" min="0" max="5000">
</div>
<button onclick="sendCmd('B ' + document.getElementById('freq_b').value)">Set Freq</button>
<button class="on" onclick="sendCmd('B ON')">Enable</button>
<button class="off" onclick="sendCmd('B OFF')">Disable</button>
</div>
<div class="card">
<div id="response" style="font-family:monospace; font-size:0.8em;">Log waiting...</div>
</div>
<script>
async function connect() {
const port = document.getElementById('port').value;
const res = await fetch('/connect', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({port})
});
const data = await res.json();
const div = document.getElementById('status');
div.innerText = data.message;
div.className = 'status ' + (data.success ? 'connected' : 'disconnected');
}
async function sendCmd(cmd) {
const res = await fetch('/cmd', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({cmd})
});
const data = await res.json();
document.getElementById('response').innerText = "ESP: " + (data.response || "No response");
}
</script>
</body>
</html>
"""
@app.route('/')
def index():
ports = [p.device for p in serial.tools.list_ports.comports()]
return render_template_string(HTML_TEMPLATE, ports=ports)
@app.route('/connect', methods=['POST'])
def connect():
global ser
port = request.json.get('port')
try:
if ser: ser.close()
ser = serial.Serial(port, 115200, timeout=0.1)
return jsonify(success=True, message=f"Connected to {port}")
except Exception as e:
return jsonify(success=False, message=str(e))
@app.route('/cmd', methods=['POST'])
def cmd():
global ser
if not ser: return jsonify(success=False, response="Not connected")
command = request.json.get('cmd')
try:
# Clear buffer
ser.reset_input_buffer()
ser.write((command + "\n").encode())
# Wait a bit longer for the ESP to process and respond
time.sleep(0.2)
# Read the line response
resp = ser.read_all().decode(errors='replace').strip()
if not resp:
# Try one more read in case it's slow
time.sleep(0.3)
resp = ser.read_all().decode(errors='replace').strip()
return jsonify(success=True, response=resp or "Empty response")
except Exception as e:
return jsonify(success=False, response=str(e))
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000)