Initial commit
This commit is contained in:
Martino Ferrari
138
hmi/hmi_web.py
Normal file
138
hmi/hmi_web.py
Normal file
@@ -0,0 +1,138 @@
|
||||
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)
|
||||
Reference in New Issue
Block a user