Add EVS control portal, io_mode switching, and DAC-only speaker path
Some checks failed
Build and Push EVS Bridge Image / docker (push) Has been cancelled
Some checks failed
Build and Push EVS Bridge Image / docker (push) Has been cancelled
This commit is contained in:
Kai
16
control-portal/Dockerfile
Normal file
16
control-portal/Dockerfile
Normal file
@@ -0,0 +1,16 @@
|
||||
FROM python:3.11-slim
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY requirements.txt .
|
||||
RUN pip install --no-cache-dir -r requirements.txt
|
||||
|
||||
COPY app.py .
|
||||
COPY templates ./templates
|
||||
|
||||
ENV PORTAL_BIND_HOST=0.0.0.0
|
||||
ENV PORTAL_BIND_PORT=8088
|
||||
|
||||
EXPOSE 8088
|
||||
|
||||
CMD ["python", "app.py"]
|
||||
59
control-portal/README.md
Normal file
59
control-portal/README.md
Normal file
@@ -0,0 +1,59 @@
|
||||
# EVS Control Portal
|
||||
|
||||
Web UI to publish EVS MQTT command payloads without manually crafting JSON.
|
||||
|
||||
## Features
|
||||
|
||||
- Device picker (`evs/<device_id>/command`)
|
||||
- Buttons/forms for:
|
||||
- `status`
|
||||
- `mode` (`idle` / `stream`)
|
||||
- `io_mode` (`mic` / `spk`)
|
||||
- `udp_stream` start/stop
|
||||
- `mic_gain` set/up/down
|
||||
- Raw JSON publish for advanced commands
|
||||
|
||||
## Environment
|
||||
|
||||
- `MQTT_HOST` (default `127.0.0.1`)
|
||||
- `MQTT_PORT` (default `1883`)
|
||||
- `MQTT_USER` (optional)
|
||||
- `MQTT_PASSWORD` (optional)
|
||||
- `MQTT_BASE_TOPIC` (default `evs`)
|
||||
- `PORTAL_BIND_HOST` (default `0.0.0.0`)
|
||||
- `PORTAL_BIND_PORT` (default `8088`)
|
||||
|
||||
## Build + Run
|
||||
|
||||
```bash
|
||||
docker build -f control-portal/Dockerfile -t evs-control-portal:latest control-portal
|
||||
docker run --rm -p 8088:8088 \
|
||||
-e MQTT_HOST=10.100.3.247 \
|
||||
-e MQTT_PORT=1883 \
|
||||
-e MQTT_BASE_TOPIC=evs \
|
||||
evs-control-portal:latest
|
||||
```
|
||||
|
||||
Then open:
|
||||
|
||||
`http://<host>:8088`
|
||||
|
||||
## Portainer Service Example
|
||||
|
||||
```yaml
|
||||
services:
|
||||
evs-control-portal:
|
||||
image: git.khnm-zimmerling.de/kai/evs-control-portal:latest
|
||||
container_name: evs-control-portal
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "8088:8088"
|
||||
environment:
|
||||
MQTT_HOST: "10.100.3.247"
|
||||
MQTT_PORT: "1883"
|
||||
MQTT_USER: ""
|
||||
MQTT_PASSWORD: ""
|
||||
MQTT_BASE_TOPIC: "evs"
|
||||
PORTAL_BIND_HOST: "0.0.0.0"
|
||||
PORTAL_BIND_PORT: "8088"
|
||||
```
|
||||
60
control-portal/app.py
Normal file
60
control-portal/app.py
Normal file
@@ -0,0 +1,60 @@
|
||||
import json
|
||||
import os
|
||||
from typing import Any, Dict
|
||||
|
||||
from flask import Flask, jsonify, render_template, request
|
||||
import paho.mqtt.client as mqtt
|
||||
|
||||
|
||||
MQTT_HOST = os.getenv("MQTT_HOST", "127.0.0.1")
|
||||
MQTT_PORT = int(os.getenv("MQTT_PORT", "1883"))
|
||||
MQTT_USER = os.getenv("MQTT_USER", "")
|
||||
MQTT_PASSWORD = os.getenv("MQTT_PASSWORD", "")
|
||||
MQTT_BASE_TOPIC = os.getenv("MQTT_BASE_TOPIC", "evs")
|
||||
PORTAL_BIND_HOST = os.getenv("PORTAL_BIND_HOST", "0.0.0.0")
|
||||
PORTAL_BIND_PORT = int(os.getenv("PORTAL_BIND_PORT", "8088"))
|
||||
|
||||
|
||||
app = Flask(__name__)
|
||||
mqtt_client = mqtt.Client(mqtt.CallbackAPIVersion.VERSION2, client_id="evs-control-portal")
|
||||
if MQTT_USER:
|
||||
mqtt_client.username_pw_set(MQTT_USER, MQTT_PASSWORD)
|
||||
mqtt_client.connect(MQTT_HOST, MQTT_PORT, keepalive=30)
|
||||
mqtt_client.loop_start()
|
||||
|
||||
|
||||
def _topic_for_device(device_id: str) -> str:
|
||||
return f"{MQTT_BASE_TOPIC}/{device_id}/command"
|
||||
|
||||
|
||||
def _publish(device_id: str, payload: Dict[str, Any]) -> Dict[str, Any]:
|
||||
topic = _topic_for_device(device_id)
|
||||
encoded = json.dumps(payload, separators=(",", ":"))
|
||||
info = mqtt_client.publish(topic, encoded, qos=0, retain=False)
|
||||
return {
|
||||
"ok": info.rc == mqtt.MQTT_ERR_SUCCESS,
|
||||
"topic": topic,
|
||||
"payload": payload,
|
||||
"mqtt_rc": info.rc,
|
||||
}
|
||||
|
||||
|
||||
@app.get("/")
|
||||
def index():
|
||||
return render_template("index.html", mqtt_host=MQTT_HOST, mqtt_port=MQTT_PORT, base_topic=MQTT_BASE_TOPIC)
|
||||
|
||||
|
||||
@app.post("/api/publish")
|
||||
def api_publish():
|
||||
body = request.get_json(force=True, silent=True) or {}
|
||||
device_id = str(body.get("device_id", "")).strip()
|
||||
payload = body.get("payload")
|
||||
if not device_id:
|
||||
return jsonify({"ok": False, "error": "device_id is required"}), 400
|
||||
if not isinstance(payload, dict):
|
||||
return jsonify({"ok": False, "error": "payload must be a JSON object"}), 400
|
||||
return jsonify(_publish(device_id, payload))
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
app.run(host=PORTAL_BIND_HOST, port=PORTAL_BIND_PORT, debug=False)
|
||||
2
control-portal/requirements.txt
Normal file
2
control-portal/requirements.txt
Normal file
@@ -0,0 +1,2 @@
|
||||
flask==3.0.3
|
||||
paho-mqtt==2.1.0
|
||||
214
control-portal/templates/index.html
Normal file
214
control-portal/templates/index.html
Normal file
@@ -0,0 +1,214 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>EVS Control Portal</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f3f6f4;
|
||||
--card: #ffffff;
|
||||
--line: #d3ddd7;
|
||||
--text: #1c2721;
|
||||
--muted: #5d6c62;
|
||||
--accent: #1f7a4f;
|
||||
--accent-2: #16613f;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Segoe UI", Tahoma, sans-serif;
|
||||
background: linear-gradient(145deg, #eaf2ec, #f8fbf9);
|
||||
color: var(--text);
|
||||
}
|
||||
.wrap {
|
||||
max-width: 1100px;
|
||||
margin: 20px auto;
|
||||
padding: 0 14px;
|
||||
}
|
||||
.head {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
padding: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.head h1 {
|
||||
margin: 0 0 6px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.meta {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
padding: 12px;
|
||||
}
|
||||
.card h2 {
|
||||
margin: 0 0 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin: 8px 0 4px;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
input, select, textarea {
|
||||
width: 100%;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 10px;
|
||||
padding: 9px;
|
||||
font: inherit;
|
||||
background: #fff;
|
||||
}
|
||||
textarea { min-height: 120px; resize: vertical; }
|
||||
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
||||
button {
|
||||
margin-top: 10px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
padding: 10px 12px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
background: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
button:hover { background: var(--accent-2); }
|
||||
.log {
|
||||
margin-top: 12px;
|
||||
background: #101612;
|
||||
color: #d8e7dc;
|
||||
border-radius: 12px;
|
||||
padding: 10px;
|
||||
font-family: Consolas, monospace;
|
||||
font-size: 12px;
|
||||
min-height: 90px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="head">
|
||||
<h1>EVS Control Portal</h1>
|
||||
<div class="meta">MQTT: {{ mqtt_host }}:{{ mqtt_port }} | Base Topic: {{ base_topic }}/<device_id>/command</div>
|
||||
<label>Device ID</label>
|
||||
<input id="deviceId" value="esp32-evs-1">
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="card">
|
||||
<h2>Status / Mode</h2>
|
||||
<button onclick="sendCmd({cmd:'status'})">Status anfordern</button>
|
||||
<div class="row">
|
||||
<button onclick="sendCmd({cmd:'mode',value:'idle'})">Mode Idle</button>
|
||||
<button onclick="sendCmd({cmd:'mode',value:'stream'})">Mode Stream</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>IO Mode</h2>
|
||||
<div class="row">
|
||||
<button onclick="sendCmd({cmd:'io_mode',value:'mic'})">IO mic</button>
|
||||
<button onclick="sendCmd({cmd:'io_mode',value:'spk'})">IO spk</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>UDP Stream</h2>
|
||||
<label>Target Host</label>
|
||||
<input id="udpHost" value="10.100.3.247">
|
||||
<label>Target Port</label>
|
||||
<input id="udpPort" type="number" value="5004">
|
||||
<div class="row">
|
||||
<button onclick="sendUdp(true)">UDP Start</button>
|
||||
<button onclick="sendCmd({cmd:'udp_stream',enabled:false})">UDP Stop</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Mic Gain</h2>
|
||||
<label>Absoluter Wert</label>
|
||||
<input id="gainValue" type="number" step="0.1" value="2.0">
|
||||
<button onclick="setGain()">Set Gain</button>
|
||||
<div class="row">
|
||||
<button onclick="sendCmd({cmd:'mic_gain',action:'up',step:0.1})">Gain +0.1</button>
|
||||
<button onclick="sendCmd({cmd:'mic_gain',action:'down',step:0.1})">Gain -0.1</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Raw JSON</h2>
|
||||
<label>Payload (JSON Objekt)</label>
|
||||
<textarea id="rawPayload">{"cmd":"status"}</textarea>
|
||||
<button onclick="sendRaw()">Publish Raw</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="log" id="log"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const logEl = document.getElementById("log");
|
||||
|
||||
function log(msg) {
|
||||
const ts = new Date().toISOString();
|
||||
logEl.textContent = `[${ts}] ${msg}\n` + logEl.textContent;
|
||||
}
|
||||
|
||||
function getDeviceId() {
|
||||
return (document.getElementById("deviceId").value || "").trim();
|
||||
}
|
||||
|
||||
async function publish(payload) {
|
||||
const deviceId = getDeviceId();
|
||||
if (!deviceId) {
|
||||
log("ERROR: device_id fehlt");
|
||||
return;
|
||||
}
|
||||
const res = await fetch("/api/publish", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ device_id: deviceId, payload })
|
||||
});
|
||||
const body = await res.json();
|
||||
if (!res.ok || !body.ok) {
|
||||
log("FAIL: " + JSON.stringify(body));
|
||||
} else {
|
||||
log("OK topic=" + body.topic + " payload=" + JSON.stringify(body.payload));
|
||||
}
|
||||
}
|
||||
|
||||
function sendCmd(payload) { publish(payload); }
|
||||
|
||||
function sendUdp(enabled) {
|
||||
const host = document.getElementById("udpHost").value.trim();
|
||||
const port = parseInt(document.getElementById("udpPort").value, 10);
|
||||
publish({ cmd: "udp_stream", enabled, target_host: host, target_port: port });
|
||||
}
|
||||
|
||||
function setGain() {
|
||||
const value = parseFloat(document.getElementById("gainValue").value);
|
||||
publish({ cmd: "mic_gain", value });
|
||||
}
|
||||
|
||||
function sendRaw() {
|
||||
try {
|
||||
const payload = JSON.parse(document.getElementById("rawPayload").value);
|
||||
publish(payload);
|
||||
} catch (e) {
|
||||
log("ERROR: ungültiges JSON");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user