Feature: ShineDiag mobiles Dashboard mit Canvas-Charts und SQLite-History (v2.0)
- Auto-Polling alle 30s im Hintergrund (Thread + Event) - SQLite-Persistenz in /var/lib/shinediag/history.db, 7-Tage-Retention - 4 Tabs: Dashboard, Diagramme, Sensoren, Rohdaten - Große Metrikkarten für Spannung (L1/L2/L3), Frequenz, Leistung - Canvas-Liniendiagramme (kein externes JS) mit 1h/6h/24h/7d-Auswahl - localStorage für Verbindungskonfig, Auto-Reconnect beim Seitenaufruf - Retina-fähiges Canvas (DPR-aware) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
retr0
+216
-48
@@ -4,12 +4,14 @@
|
||||
import json
|
||||
import logging
|
||||
import os
|
||||
import struct
|
||||
import sqlite3
|
||||
import sys
|
||||
import threading
|
||||
import time
|
||||
from typing import Dict, List, Optional
|
||||
|
||||
from flask import Flask, jsonify, request, send_from_directory
|
||||
|
||||
# Shared code aus dem Add-on
|
||||
sys.path.insert(0, os.path.join(os.path.dirname(__file__), "../../haos-addon/src"))
|
||||
from inverters import INVERTERS
|
||||
from modbus_client import ModbusReader
|
||||
@@ -17,11 +19,132 @@ from modbus_client import ModbusReader
|
||||
logging.basicConfig(level=logging.INFO, format="%(asctime)s %(levelname)s: %(message)s")
|
||||
log = logging.getLogger(__name__)
|
||||
|
||||
WEB_DIR = os.path.join(os.path.dirname(__file__), "web")
|
||||
SHINELANX_IP = os.environ.get("SHINELANX_IP", "10.0.0.100")
|
||||
WEB_DIR = os.path.join(os.path.dirname(__file__), "web")
|
||||
DB_PATH = os.environ.get("DB_PATH", "/var/lib/shinediag/history.db")
|
||||
POLL_SEC = int(os.environ.get("POLL_SEC", "30"))
|
||||
|
||||
app = Flask(__name__, static_folder=WEB_DIR)
|
||||
|
||||
# ── SQLite ────────────────────────────────────────────────────
|
||||
|
||||
_db_lock = threading.Lock()
|
||||
_db_conn: Optional[sqlite3.Connection] = None
|
||||
|
||||
|
||||
def _db() -> sqlite3.Connection:
|
||||
global _db_conn
|
||||
if _db_conn is None:
|
||||
os.makedirs(os.path.dirname(DB_PATH), exist_ok=True)
|
||||
_db_conn = sqlite3.connect(DB_PATH, check_same_thread=False)
|
||||
_db_conn.execute("PRAGMA journal_mode=WAL")
|
||||
_db_conn.execute("PRAGMA synchronous=NORMAL")
|
||||
_db_conn.execute("""
|
||||
CREATE TABLE IF NOT EXISTS measurements (
|
||||
inv_key TEXT NOT NULL,
|
||||
sensor_id TEXT NOT NULL,
|
||||
ts REAL NOT NULL,
|
||||
value REAL NOT NULL
|
||||
)""")
|
||||
_db_conn.execute("""
|
||||
CREATE INDEX IF NOT EXISTS idx_inv_sensor_ts
|
||||
ON measurements(inv_key, sensor_id, ts)""")
|
||||
_db_conn.commit()
|
||||
return _db_conn
|
||||
|
||||
|
||||
def db_write(inv_key: str, ts: float, values: Dict[str, float]):
|
||||
rows = [(inv_key, sid, ts, v) for sid, v in values.items()]
|
||||
with _db_lock:
|
||||
_db().executemany(
|
||||
"INSERT INTO measurements(inv_key,sensor_id,ts,value) VALUES(?,?,?,?)", rows)
|
||||
_db().commit()
|
||||
|
||||
|
||||
def db_query(inv_key: str, sensor_ids: List[str],
|
||||
from_ts: float, to_ts: float) -> Dict[str, List]:
|
||||
result = {sid: [] for sid in sensor_ids}
|
||||
placeholders = ",".join("?" * len(sensor_ids))
|
||||
with _db_lock:
|
||||
rows = _db().execute(f"""
|
||||
SELECT sensor_id, ts, value FROM measurements
|
||||
WHERE inv_key=? AND sensor_id IN ({placeholders})
|
||||
AND ts BETWEEN ? AND ?
|
||||
ORDER BY ts ASC
|
||||
""", [inv_key] + sensor_ids + [from_ts, to_ts]).fetchall()
|
||||
for sid, ts, val in rows:
|
||||
if sid in result:
|
||||
result[sid].append({"ts": ts, "v": val})
|
||||
return result
|
||||
|
||||
|
||||
def db_cleanup(days: int = 7):
|
||||
cutoff = time.time() - days * 86400
|
||||
with _db_lock:
|
||||
n = _db().execute("DELETE FROM measurements WHERE ts<?", (cutoff,)).rowcount
|
||||
_db().commit()
|
||||
if n:
|
||||
log.info("DB: %d alte Einträge gelöscht", n)
|
||||
|
||||
|
||||
# ── Poll-State ────────────────────────────────────────────────
|
||||
|
||||
_state_lock = threading.Lock()
|
||||
_poll_thread: Optional[threading.Thread] = None
|
||||
_poll_stop = threading.Event()
|
||||
_conn_cfg: Dict = {} # aktuelle Verbindungs-Config
|
||||
_last_values: Dict = {} # letzter erfolgreicher Poll
|
||||
_last_ts: float = 0.0
|
||||
_last_ok: bool = False
|
||||
_inv_key: str = ""
|
||||
|
||||
|
||||
def _poll_worker():
|
||||
global _last_values, _last_ts, _last_ok
|
||||
cfg = _conn_cfg.copy()
|
||||
inverter = INVERTERS[cfg["model"]]
|
||||
reader = ModbusReader(cfg["ip"], int(cfg["port"]), int(cfg["slave"]), timeout=5.0)
|
||||
log.info("Poll-Thread gestartet: %s @ %s alle %ds", inverter.name, cfg["ip"], POLL_SEC)
|
||||
|
||||
while not _poll_stop.is_set():
|
||||
t0 = time.time()
|
||||
values = reader.read(inverter)
|
||||
with _state_lock:
|
||||
if values:
|
||||
_last_values = values
|
||||
_last_ts = t0
|
||||
_last_ok = True
|
||||
db_write(_inv_key, t0, values)
|
||||
else:
|
||||
_last_ok = False
|
||||
_poll_stop.wait(max(0.0, POLL_SEC - (time.time() - t0)))
|
||||
|
||||
reader.close()
|
||||
log.info("Poll-Thread beendet")
|
||||
|
||||
|
||||
def _start_poll(cfg: dict):
|
||||
global _poll_thread, _conn_cfg, _inv_key, _last_values, _last_ts, _last_ok
|
||||
_stop_poll()
|
||||
with _state_lock:
|
||||
_conn_cfg = cfg
|
||||
_inv_key = f"{cfg['ip']}:{cfg['port']}:{cfg['slave']}:{cfg['model']}"
|
||||
_last_values = {}
|
||||
_last_ts = 0.0
|
||||
_last_ok = False
|
||||
_poll_stop.clear()
|
||||
_poll_thread = threading.Thread(target=_poll_worker, daemon=True, name="poll")
|
||||
_poll_thread.start()
|
||||
|
||||
|
||||
def _stop_poll():
|
||||
global _poll_thread
|
||||
_poll_stop.set()
|
||||
if _poll_thread and _poll_thread.is_alive():
|
||||
_poll_thread.join(timeout=10)
|
||||
_poll_thread = None
|
||||
|
||||
|
||||
# ── Flask ─────────────────────────────────────────────────────
|
||||
|
||||
@app.get("/")
|
||||
def index():
|
||||
@@ -37,74 +160,119 @@ def api_models():
|
||||
})
|
||||
|
||||
|
||||
@app.post("/api/connect")
|
||||
def api_connect():
|
||||
body = request.get_json(force=True) or {}
|
||||
for field in ("ip", "model"):
|
||||
if not body.get(field):
|
||||
return jsonify({"error": f"'{field}' fehlt"}), 400
|
||||
if body["model"] not in INVERTERS:
|
||||
return jsonify({"error": "Unbekanntes Modell"}), 400
|
||||
cfg = {
|
||||
"ip": body["ip"],
|
||||
"port": int(body.get("port", 502)),
|
||||
"slave": int(body.get("slave", 1)),
|
||||
"model": body["model"],
|
||||
}
|
||||
_start_poll(cfg)
|
||||
db_cleanup()
|
||||
return jsonify({"ok": True})
|
||||
|
||||
|
||||
@app.post("/api/disconnect")
|
||||
def api_disconnect():
|
||||
_stop_poll()
|
||||
return jsonify({"ok": True})
|
||||
|
||||
|
||||
@app.get("/api/status")
|
||||
def api_status():
|
||||
with _state_lock:
|
||||
connected = _poll_thread is not None and _poll_thread.is_alive()
|
||||
cfg = _conn_cfg.copy()
|
||||
values = _last_values.copy()
|
||||
ts = _last_ts
|
||||
ok = _last_ok
|
||||
|
||||
inverter = INVERTERS.get(cfg.get("model", ""), None)
|
||||
sensors = []
|
||||
if inverter:
|
||||
sensors = [{"id": s.id, "name": s.name, "unit": s.unit,
|
||||
"device_class": s.device_class, "icon": s.icon}
|
||||
for s in inverter.sensors]
|
||||
|
||||
return jsonify({
|
||||
"connected": connected,
|
||||
"modbus_ok": ok,
|
||||
"last_ts": ts,
|
||||
"cfg": cfg,
|
||||
"values": values,
|
||||
"sensors": sensors,
|
||||
"inv_name": inverter.name if inverter else "",
|
||||
})
|
||||
|
||||
|
||||
@app.get("/api/chart-data")
|
||||
def api_chart_data():
|
||||
sensors = request.args.get("sensors", "")
|
||||
hours = min(float(request.args.get("hours", "24")), 24 * 7)
|
||||
if not sensors:
|
||||
return jsonify({"error": "sensors required"}), 400
|
||||
sensor_ids = [s.strip() for s in sensors.split(",") if s.strip()]
|
||||
to_ts = time.time()
|
||||
from_ts = to_ts - hours * 3600
|
||||
with _state_lock:
|
||||
key = _inv_key
|
||||
if not key:
|
||||
return jsonify({sid: [] for sid in sensor_ids})
|
||||
return jsonify(db_query(key, sensor_ids, from_ts, to_ts))
|
||||
|
||||
|
||||
@app.post("/api/scan")
|
||||
def api_scan():
|
||||
"""Liest alle definierten Sensoren eines Geräts aus."""
|
||||
body = request.get_json(force=True) or {}
|
||||
"""Einmal-Scan ohne Polling — für schnelle Diagnose."""
|
||||
body = request.get_json(force=True) or {}
|
||||
model_id = body.get("model", "MIC_1500_TL_X")
|
||||
ip = body.get("ip", SHINELANX_IP)
|
||||
port = int(body.get("port", 502))
|
||||
slave = int(body.get("slave", 1))
|
||||
|
||||
inverter = INVERTERS.get(model_id)
|
||||
if not inverter:
|
||||
return jsonify({"error": f"Unbekanntes Modell: {model_id}"}), 400
|
||||
|
||||
reader = ModbusReader(host=ip, port=port, slave=slave, timeout=5.0)
|
||||
reader = ModbusReader(body.get("ip", "10.0.0.100"),
|
||||
int(body.get("port", 502)),
|
||||
int(body.get("slave", 1)), timeout=5.0)
|
||||
values = reader.read(inverter)
|
||||
reader.close()
|
||||
|
||||
if values is None:
|
||||
return jsonify({"ok": False, "error": "Keine Verbindung zum ShineLAN-X"}), 502
|
||||
|
||||
sensors_out = []
|
||||
for s in inverter.sensors:
|
||||
sensors_out.append({
|
||||
"id": s.id,
|
||||
"name": s.name,
|
||||
"value": values.get(s.id),
|
||||
"unit": s.unit,
|
||||
"device_class": s.device_class,
|
||||
"icon": s.icon,
|
||||
})
|
||||
|
||||
return jsonify({"ok": False, "error": "Keine Verbindung"}), 502
|
||||
return jsonify({"ok": True, "model": inverter.name,
|
||||
"manufacturer": inverter.manufacturer, "sensors": sensors_out})
|
||||
"sensors": [{"id": s.id, "name": s.name, "value": values.get(s.id),
|
||||
"unit": s.unit} for s in inverter.sensors]})
|
||||
|
||||
|
||||
@app.post("/api/raw")
|
||||
def api_raw():
|
||||
"""Liest einen rohen Register-Bereich aus — für Diagnose unbekannter Werte."""
|
||||
body = request.get_json(force=True) or {}
|
||||
ip = body.get("ip", SHINELANX_IP)
|
||||
port = int(body.get("port", 502))
|
||||
slave = int(body.get("slave", 1))
|
||||
body = request.get_json(force=True) or {}
|
||||
start = max(0, int(body.get("start", 0)))
|
||||
count = min(125, max(1, int(body.get("count", 100))))
|
||||
|
||||
from pymodbus.client import ModbusTcpClient
|
||||
client = ModbusTcpClient(ip, port=port, timeout=5.0)
|
||||
client = ModbusTcpClient(body.get("ip", "10.0.0.100"),
|
||||
port=int(body.get("port", 502)), timeout=5.0)
|
||||
if not client.connect():
|
||||
return jsonify({"ok": False, "error": "Verbindung fehlgeschlagen"}), 502
|
||||
|
||||
try:
|
||||
result = client.read_input_registers(start, count, slave=slave)
|
||||
if result.isError():
|
||||
return jsonify({"ok": False, "error": str(result)}), 502
|
||||
regs = []
|
||||
for i, val in enumerate(result.registers):
|
||||
regs.append({
|
||||
"addr": start + i,
|
||||
"hex": f"0x{val:04X}",
|
||||
"dec": val,
|
||||
"signed": val if val < 0x8000 else val - 0x10000,
|
||||
})
|
||||
return jsonify({"ok": True, "registers": regs})
|
||||
r = client.read_input_registers(start, count, slave=int(body.get("slave", 1)))
|
||||
if r.isError():
|
||||
return jsonify({"ok": False, "error": str(r)}), 502
|
||||
return jsonify({"ok": True, "registers": [
|
||||
{"addr": start + i, "hex": f"0x{v:04X}",
|
||||
"dec": v, "signed": v if v < 0x8000 else v - 0x10000}
|
||||
for i, v in enumerate(r.registers)
|
||||
]})
|
||||
finally:
|
||||
client.close()
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
_db()
|
||||
port = int(os.environ.get("PORT", "80"))
|
||||
log.info("ShineDiag startet auf Port %d — ShineLAN-X: %s", port, SHINELANX_IP)
|
||||
log.info("ShineDiag auf Port %d", port)
|
||||
app.run(host="0.0.0.0", port=port, threaded=True)
|
||||
|
||||
+522
-201
@@ -5,276 +5,597 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>ShineDiag</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: system-ui, sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; }
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
body{font-family:system-ui,sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh}
|
||||
|
||||
header { background: #1e293b; padding: 16px 20px; border-bottom: 1px solid #334155;
|
||||
display: flex; align-items: center; gap: 12px; }
|
||||
header svg { flex-shrink: 0; }
|
||||
header h1 { font-size: 1.2rem; font-weight: 700; color: #f8fafc; }
|
||||
header p { font-size: .75rem; color: #94a3b8; }
|
||||
/* Header */
|
||||
header{background:#1e293b;padding:12px 16px;border-bottom:1px solid #334155;
|
||||
display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:0;z-index:10}
|
||||
.header-left{display:flex;align-items:center;gap:10px}
|
||||
header h1{font-size:1.1rem;font-weight:700;color:#f8fafc}
|
||||
header p{font-size:.7rem;color:#94a3b8}
|
||||
.status-dot{width:10px;height:10px;border-radius:50%;background:#334155;flex-shrink:0}
|
||||
.status-dot.ok{background:#22c55e;box-shadow:0 0 6px #22c55e88}
|
||||
.status-dot.err{background:#ef4444}
|
||||
|
||||
main { padding: 16px; max-width: 640px; margin: 0 auto; }
|
||||
/* Tabs */
|
||||
.tabs{display:flex;background:#1e293b;border-bottom:1px solid #334155;overflow-x:auto;scrollbar-width:none}
|
||||
.tabs::-webkit-scrollbar{display:none}
|
||||
.tab{flex:1;min-width:80px;padding:10px 4px;border:none;background:none;color:#64748b;
|
||||
font-size:.8rem;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
|
||||
.tab.active{color:#60a5fa;border-bottom-color:#3b82f6}
|
||||
|
||||
.card { background: #1e293b; border: 1px solid #334155; border-radius: 12px;
|
||||
padding: 16px; margin-bottom: 16px; }
|
||||
.card h2 { font-size: .85rem; font-weight: 600; color: #94a3b8;
|
||||
text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
|
||||
/* Main */
|
||||
main{padding:12px;max-width:640px;margin:0 auto}
|
||||
.card{background:#1e293b;border:1px solid #334155;border-radius:12px;padding:14px;margin-bottom:12px}
|
||||
.card-title{font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;
|
||||
letter-spacing:.05em;margin-bottom:10px}
|
||||
|
||||
label { display: block; font-size: .8rem; color: #94a3b8; margin-bottom: 4px; margin-top: 10px; }
|
||||
input, select {
|
||||
width: 100%; padding: 10px 12px; border-radius: 8px;
|
||||
border: 1px solid #334155; background: #0f172a; color: #f1f5f9;
|
||||
font-size: .9rem;
|
||||
}
|
||||
input:focus, select:focus { outline: 2px solid #3b82f6; border-color: transparent; }
|
||||
/* Connect form */
|
||||
label{display:block;font-size:.78rem;color:#94a3b8;margin-bottom:3px;margin-top:8px}
|
||||
input,select{width:100%;padding:9px 11px;border-radius:8px;border:1px solid #334155;
|
||||
background:#0f172a;color:#f1f5f9;font-size:.9rem}
|
||||
input:focus,select:focus{outline:2px solid #3b82f6;border-color:transparent}
|
||||
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
|
||||
|
||||
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||||
button{width:100%;padding:11px;border-radius:8px;border:none;cursor:pointer;
|
||||
font-size:.9rem;font-weight:600;margin-top:10px;transition:opacity .15s}
|
||||
button:disabled{opacity:.4;cursor:not-allowed}
|
||||
.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover:not(:disabled){background:#2563eb}
|
||||
.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover:not(:disabled){background:#b91c1c}
|
||||
.btn-secondary{background:#475569;color:#e2e8f0}.btn-secondary:hover:not(:disabled){background:#334155}
|
||||
.btn-success{background:#059669;color:#fff}.btn-success:hover:not(:disabled){background:#047857}
|
||||
|
||||
button { width: 100%; padding: 12px; border-radius: 8px; border: none; cursor: pointer;
|
||||
font-size: .95rem; font-weight: 600; margin-top: 14px; transition: opacity .15s; }
|
||||
button:disabled { opacity: .4; cursor: not-allowed; }
|
||||
.btn-primary { background: #3b82f6; color: #fff; }
|
||||
.btn-primary:hover:not(:disabled) { background: #2563eb; }
|
||||
.btn-raw { background: #475569; color: #e2e8f0; }
|
||||
.btn-raw:hover:not(:disabled) { background: #334155; }
|
||||
.btn-export { background: #059669; color: #fff; }
|
||||
.btn-export:hover:not(:disabled) { background: #047857; }
|
||||
/* Metric cards grid */
|
||||
.metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-bottom:4px}
|
||||
.metric{background:#0f172a;border:1px solid #334155;border-radius:10px;padding:12px 10px}
|
||||
.metric-label{font-size:.7rem;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
|
||||
.metric-value{font-size:1.5rem;font-weight:700;color:#f1f5f9;line-height:1}
|
||||
.metric-unit{font-size:.75rem;color:#94a3b8;margin-top:2px}
|
||||
.metric.highlight .metric-value{color:#60a5fa}
|
||||
.metric.warn .metric-value{color:#f59e0b}
|
||||
.metric.ok .metric-value{color:#4ade80}
|
||||
|
||||
.status { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
|
||||
border-radius: 8px; font-size: .85rem; margin-top: 12px; }
|
||||
.status.ok { background: #052e16; color: #4ade80; border: 1px solid #166534; }
|
||||
.status.error { background: #1c0a09; color: #f87171; border: 1px solid #7f1d1d; }
|
||||
.status.info { background: #0c1a2e; color: #60a5fa; border: 1px solid #1e3a5f; }
|
||||
/* Chart */
|
||||
.chart-wrap{position:relative;margin-top:8px}
|
||||
canvas.chart{width:100%;border-radius:8px;display:block}
|
||||
.chart-legend{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;padding:0 4px}
|
||||
.legend-item{display:flex;align-items:center;gap:5px;font-size:.75rem;color:#94a3b8}
|
||||
.legend-dot{width:10px;height:10px;border-radius:50%}
|
||||
|
||||
.sensor-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
|
||||
.sensor-table th { text-align: left; font-size: .75rem; color: #64748b;
|
||||
padding: 6px 8px; border-bottom: 1px solid #334155; }
|
||||
.sensor-table td { padding: 8px; font-size: .85rem; border-bottom: 1px solid #1e293b; }
|
||||
.sensor-table tr:last-child td { border-bottom: none; }
|
||||
.sensor-table .val { font-weight: 600; color: #f1f5f9; text-align: right; }
|
||||
.sensor-table .unit { color: #64748b; font-size: .75rem; text-align: right; }
|
||||
.sensor-name { color: #cbd5e1; }
|
||||
/* Range selector */
|
||||
.range-btns{display:flex;gap:4px;margin-bottom:10px}
|
||||
.range-btn{flex:1;padding:7px 4px;border-radius:6px;border:1px solid #334155;
|
||||
background:transparent;color:#94a3b8;font-size:.75rem;cursor:pointer}
|
||||
.range-btn.active{background:#3b82f6;color:#fff;border-color:#3b82f6}
|
||||
|
||||
.tabs { display: flex; gap: 4px; margin-bottom: 12px; }
|
||||
.tab { flex: 1; padding: 8px; border-radius: 6px; border: 1px solid #334155;
|
||||
background: transparent; color: #94a3b8; font-size: .8rem; cursor: pointer; }
|
||||
.tab.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
|
||||
/* Sensor table */
|
||||
.sensor-table{width:100%;border-collapse:collapse}
|
||||
.sensor-table th{text-align:left;font-size:.72rem;color:#64748b;padding:5px 6px;border-bottom:1px solid #334155}
|
||||
.sensor-table td{padding:7px 6px;font-size:.83rem;border-bottom:1px solid #1e293b}
|
||||
.sensor-table tr:last-child td{border-bottom:none}
|
||||
.sensor-table .v{font-weight:600;color:#f1f5f9;text-align:right}
|
||||
.sensor-table .u{color:#64748b;font-size:.72rem;text-align:right}
|
||||
|
||||
.raw-table { width: 100%; border-collapse: collapse; font-family: monospace; font-size: .8rem; }
|
||||
.raw-table th { text-align: left; color: #64748b; padding: 4px 8px;
|
||||
border-bottom: 1px solid #334155; }
|
||||
.raw-table td { padding: 5px 8px; border-bottom: 1px solid #1e293b; color: #cbd5e1; }
|
||||
.raw-table td:first-child { color: #60a5fa; }
|
||||
/* Raw table */
|
||||
.raw-table{width:100%;border-collapse:collapse;font-family:monospace;font-size:.78rem}
|
||||
.raw-table th{text-align:left;color:#64748b;padding:4px 6px;border-bottom:1px solid #334155}
|
||||
.raw-table td{padding:4px 6px;border-bottom:1px solid #1e293b;color:#cbd5e1}
|
||||
.raw-table td:first-child{color:#60a5fa}
|
||||
.raw-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
|
||||
|
||||
#results { display: none; }
|
||||
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #ffffff44;
|
||||
border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
/* Status bar */
|
||||
.update-bar{font-size:.72rem;color:#475569;text-align:right;margin-bottom:4px}
|
||||
|
||||
/* Alert */
|
||||
.alert{padding:10px 12px;border-radius:8px;font-size:.83rem;margin-bottom:10px}
|
||||
.alert-info{background:#0c1a2e;color:#60a5fa;border:1px solid #1e3a5f}
|
||||
.alert-ok{background:#052e16;color:#4ade80;border:1px solid #166534}
|
||||
.alert-err{background:#1c0a09;color:#f87171;border:1px solid #7f1d1d}
|
||||
|
||||
.spinner{display:inline-block;width:14px;height:14px;border:2px solid #fff4;
|
||||
border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
|
||||
@keyframes spin{to{transform:rotate(360deg)}}
|
||||
|
||||
.hidden{display:none!important}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/>
|
||||
<line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
||||
<line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
||||
</svg>
|
||||
<div>
|
||||
<h1>ShineDiag</h1>
|
||||
<p>Vor-Ort Diagnose via ShineLAN-X</p>
|
||||
<div class="header-left">
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="5"/>
|
||||
<line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
||||
<line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
||||
</svg>
|
||||
<div><h1>ShineDiag</h1><p id="hdrSub">Nicht verbunden</p></div>
|
||||
</div>
|
||||
<div id="statusDot" class="status-dot"></div>
|
||||
</header>
|
||||
|
||||
<div class="tabs">
|
||||
<button class="tab active" onclick="showTab('dashboard')">Dashboard</button>
|
||||
<button class="tab" onclick="showTab('charts')">Diagramme</button>
|
||||
<button class="tab" onclick="showTab('sensors')">Sensoren</button>
|
||||
<button class="tab" onclick="showTab('raw')">Rohdaten</button>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="card">
|
||||
<h2>Verbindung</h2>
|
||||
|
||||
<!-- ── Dashboard ── -->
|
||||
<div id="tabDashboard">
|
||||
<!-- Connect card (shown when disconnected) -->
|
||||
<div class="card" id="connectCard">
|
||||
<div class="card-title">Verbindung</div>
|
||||
<label>ShineLAN-X IP</label>
|
||||
<input id="ip" type="text" value="10.0.0.100" placeholder="10.0.0.100">
|
||||
|
||||
<div class="row">
|
||||
<div>
|
||||
<label>Port</label>
|
||||
<input id="port" type="number" value="502">
|
||||
</div>
|
||||
<div>
|
||||
<label>Modbus-Adresse</label>
|
||||
<input id="slave" type="number" value="1" min="1" max="247">
|
||||
</div>
|
||||
<input id="cfgIp" value="10.0.0.100">
|
||||
<div class="row2">
|
||||
<div><label>Port</label><input id="cfgPort" type="number" value="502"></div>
|
||||
<div><label>Modbus-Adresse</label><input id="cfgSlave" type="number" value="1"></div>
|
||||
</div>
|
||||
|
||||
<label>Wechselrichter-Modell</label>
|
||||
<select id="model"></select>
|
||||
|
||||
<button class="btn-primary" id="btnScan" onclick="scan()">
|
||||
Auslesen
|
||||
</button>
|
||||
<label>Modell</label>
|
||||
<select id="cfgModel"></select>
|
||||
<button class="btn-primary" id="btnConnect" onclick="connect()">Verbinden & Aufzeichnen</button>
|
||||
</div>
|
||||
|
||||
<div class="card" id="results">
|
||||
<div class="tabs">
|
||||
<button class="tab active" onclick="showTab('sensors')">Sensoren</button>
|
||||
<button class="tab" onclick="showTab('raw')">Rohdaten</button>
|
||||
<!-- Live data (shown when connected) -->
|
||||
<div id="liveCard" class="hidden">
|
||||
<div class="update-bar" id="updateBar">—</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">Spannung</div>
|
||||
<div class="metrics" id="voltageMetrics"></div>
|
||||
</div>
|
||||
|
||||
<div id="statusMsg"></div>
|
||||
<div class="card">
|
||||
<div class="card-title">Frequenz & Leistung</div>
|
||||
<div class="metrics" id="powerMetrics"></div>
|
||||
</div>
|
||||
|
||||
<div id="tabSensors">
|
||||
<table class="sensor-table">
|
||||
<thead><tr><th>Sensor</th><th style="text-align:right">Wert</th><th style="text-align:right">Einheit</th></tr></thead>
|
||||
<tbody id="sensorBody"></tbody>
|
||||
<div class="card" id="extraCard" style="display:none">
|
||||
<div class="card-title">Weitere</div>
|
||||
<div class="metrics" id="extraMetrics"></div>
|
||||
</div>
|
||||
|
||||
<button class="btn-danger" onclick="disconnect()">Verbindung trennen</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Charts ── -->
|
||||
<div id="tabCharts" class="hidden">
|
||||
<div class="card" id="noDataCard">
|
||||
<div class="alert alert-info">Zuerst im Dashboard verbinden und einige Messpunkte sammeln.</div>
|
||||
</div>
|
||||
|
||||
<div id="chartSection" class="hidden">
|
||||
<div class="range-btns">
|
||||
<button class="range-btn active" onclick="setRange(1,this)">1 Std</button>
|
||||
<button class="range-btn" onclick="setRange(6,this)">6 Std</button>
|
||||
<button class="range-btn" onclick="setRange(24,this)">24 Std</button>
|
||||
<button class="range-btn" onclick="setRange(168,this)">7 Tage</button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">Spannung (V)</div>
|
||||
<div class="chart-wrap"><canvas id="chartVoltage" class="chart" height="160"></canvas></div>
|
||||
<div class="chart-legend" id="legendVoltage"></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">Frequenz (Hz)</div>
|
||||
<div class="chart-wrap"><canvas id="chartFreq" class="chart" height="120"></canvas></div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">Leistung (W)</div>
|
||||
<div class="chart-wrap"><canvas id="chartPower" class="chart" height="140"></canvas></div>
|
||||
<div class="chart-legend" id="legendPower"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Sensors ── -->
|
||||
<div id="tabSensors" class="hidden">
|
||||
<div class="card">
|
||||
<table class="sensor-table">
|
||||
<thead><tr><th>Sensor</th><th style="text-align:right">Wert</th><th style="text-align:right">Einheit</th></tr></thead>
|
||||
<tbody id="sensorBody"><tr><td colspan="3" style="color:#475569;padding:12px">Noch nicht verbunden.</td></tr></tbody>
|
||||
</table>
|
||||
<button class="btn-success" id="btnExport" onclick="exportJson()" style="margin-top:10px">Export JSON</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Raw ── -->
|
||||
<div id="tabRaw" class="hidden">
|
||||
<div class="card">
|
||||
<div class="raw-controls">
|
||||
<div><label>Start</label><input id="rawStart" type="number" value="0"></div>
|
||||
<div><label>Anzahl (max 125)</label><input id="rawCount" type="number" value="100"></div>
|
||||
</div>
|
||||
<button class="btn-secondary" onclick="rawScan()">Register lesen</button>
|
||||
<div id="rawAlert" style="margin-top:8px"></div>
|
||||
<div style="overflow-x:auto;margin-top:8px">
|
||||
<table class="raw-table">
|
||||
<thead><tr><th>Addr</th><th>Hex</th><th>Dez</th><th>Signed</th></tr></thead>
|
||||
<tbody id="rawBody"></tbody>
|
||||
</table>
|
||||
<button class="btn-export" id="btnExport" onclick="exportJson()" style="margin-top:12px">
|
||||
Export JSON
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="tabRaw" style="display:none">
|
||||
<div class="row" style="margin-bottom:10px">
|
||||
<div>
|
||||
<label>Start-Register</label>
|
||||
<input id="rawStart" type="number" value="0" min="0">
|
||||
</div>
|
||||
<div>
|
||||
<label>Anzahl</label>
|
||||
<input id="rawCount" type="number" value="100" min="1" max="125">
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-raw" onclick="rawScan()">Register lesen</button>
|
||||
<div style="overflow-x:auto; margin-top:12px">
|
||||
<table class="raw-table">
|
||||
<thead><tr><th>Addr</th><th>Hex</th><th>Dez</th><th>Signed</th></tr></thead>
|
||||
<tbody id="rawBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<script>
|
||||
let lastScan = null;
|
||||
// ── State ────────────────────────────────────────────────────
|
||||
|
||||
let currentStatus = null;
|
||||
let chartHours = 1;
|
||||
let refreshTimer = null;
|
||||
|
||||
const COLORS = ['#60a5fa','#fbbf24','#4ade80','#f87171','#a78bfa'];
|
||||
|
||||
// Sensor-IDs je Messtyp
|
||||
const VOLTAGE_IDS = ['voltage_l1','voltage_l2','voltage_l3','ac_voltage','bat_voltage'];
|
||||
const FREQ_IDS = ['frequency'];
|
||||
const POWER_IDS = ['total_power','ac_power','ac_power_total','pv_power','bat_charge_power','bat_discharge_power'];
|
||||
const EXTRA_IDS = ['temperature','bat_soc','bat_current'];
|
||||
|
||||
const LABELS = {
|
||||
voltage_l1:'Spannung L1', voltage_l2:'Spannung L2', voltage_l3:'Spannung L3',
|
||||
ac_voltage:'Spannung AC', bat_voltage:'Batterie',
|
||||
frequency:'Frequenz',
|
||||
total_power:'Netzleistung', ac_power:'AC Leistung', ac_power_total:'AC Leistung',
|
||||
pv_power:'PV Leistung', bat_charge_power:'Bat. Laden', bat_discharge_power:'Bat. Entladen',
|
||||
temperature:'Temperatur', bat_soc:'Ladezustand', bat_current:'Bat. Strom',
|
||||
};
|
||||
|
||||
// ── Tabs ─────────────────────────────────────────────────────
|
||||
|
||||
function showTab(name) {
|
||||
['dashboard','charts','sensors','raw'].forEach(t => {
|
||||
document.getElementById('tab'+cap(t)).classList.toggle('hidden', t !== name);
|
||||
});
|
||||
document.querySelectorAll('.tab').forEach((btn, i) => {
|
||||
btn.classList.toggle('active', ['dashboard','charts','sensors','raw'][i] === name);
|
||||
});
|
||||
if (name === 'charts') loadCharts();
|
||||
}
|
||||
const cap = s => s[0].toUpperCase() + s.slice(1);
|
||||
|
||||
// ── Models ───────────────────────────────────────────────────
|
||||
|
||||
async function loadModels() {
|
||||
const res = await fetch('/api/models');
|
||||
const res = await fetch('/api/models');
|
||||
const data = await res.json();
|
||||
const sel = document.getElementById('model');
|
||||
const sel = document.getElementById('cfgModel');
|
||||
sel.innerHTML = '';
|
||||
for (const [id, m] of Object.entries(data)) {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = id;
|
||||
opt.textContent = `${m.name} (${m.sensor_count} Sensoren)`;
|
||||
sel.appendChild(opt);
|
||||
const o = document.createElement('option');
|
||||
o.value = id;
|
||||
o.textContent = `${m.name}`;
|
||||
sel.appendChild(o);
|
||||
}
|
||||
// restore from localStorage
|
||||
const saved = localStorage.getItem('shinediag_model');
|
||||
if (saved) sel.value = saved;
|
||||
}
|
||||
|
||||
function showTab(tab) {
|
||||
document.getElementById('tabSensors').style.display = tab === 'sensors' ? '' : 'none';
|
||||
document.getElementById('tabRaw').style.display = tab === 'raw' ? '' : 'none';
|
||||
document.querySelectorAll('.tab').forEach((t, i) =>
|
||||
t.classList.toggle('active', (i === 0) === (tab === 'sensors')));
|
||||
}
|
||||
// ── Connect ──────────────────────────────────────────────────
|
||||
|
||||
function setStatus(msg, type) {
|
||||
const el = document.getElementById('statusMsg');
|
||||
el.innerHTML = `<div class="status ${type}">${msg}</div>`;
|
||||
}
|
||||
|
||||
async function scan() {
|
||||
const btn = document.getElementById('btnScan');
|
||||
async function connect() {
|
||||
const btn = document.getElementById('btnConnect');
|
||||
btn.disabled = true;
|
||||
btn.innerHTML = '<span class="spinner"></span> Verbinde…';
|
||||
document.getElementById('results').style.display = 'block';
|
||||
setStatus('Verbinde mit ShineLAN-X…', 'info');
|
||||
btn.innerHTML = '<span class="spinner"></span>';
|
||||
const cfg = {
|
||||
ip: document.getElementById('cfgIp').value,
|
||||
port: parseInt(document.getElementById('cfgPort').value),
|
||||
slave: parseInt(document.getElementById('cfgSlave').value),
|
||||
model: document.getElementById('cfgModel').value,
|
||||
};
|
||||
localStorage.setItem('shinediag_model', cfg.model);
|
||||
const res = await fetch('/api/connect', {method:'POST',
|
||||
headers:{'Content-Type':'application/json'}, body: JSON.stringify(cfg)});
|
||||
const d = await res.json();
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Verbinden & Aufzeichnen';
|
||||
if (d.ok) startRefresh();
|
||||
}
|
||||
|
||||
async function disconnect() {
|
||||
await fetch('/api/disconnect', {method:'POST'});
|
||||
stopRefresh();
|
||||
showDisconnected();
|
||||
}
|
||||
|
||||
// ── Refresh ──────────────────────────────────────────────────
|
||||
|
||||
function startRefresh() {
|
||||
stopRefresh();
|
||||
pollStatus();
|
||||
refreshTimer = setInterval(pollStatus, 30000);
|
||||
}
|
||||
|
||||
function stopRefresh() {
|
||||
if (refreshTimer) { clearInterval(refreshTimer); refreshTimer = null; }
|
||||
}
|
||||
|
||||
async function pollStatus() {
|
||||
try {
|
||||
const res = await fetch('/api/scan', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({
|
||||
ip: document.getElementById('ip').value,
|
||||
port: parseInt(document.getElementById('port').value),
|
||||
slave: parseInt(document.getElementById('slave').value),
|
||||
model: document.getElementById('model').value,
|
||||
})
|
||||
});
|
||||
const data = await res.json();
|
||||
|
||||
if (!data.ok) {
|
||||
setStatus('⚠ ' + (data.error || 'Fehler'), 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
lastScan = data;
|
||||
setStatus(`✓ ${data.manufacturer} ${data.model} — ${data.sensors.length} Sensoren gelesen`, 'ok');
|
||||
|
||||
const tbody = document.getElementById('sensorBody');
|
||||
tbody.innerHTML = '';
|
||||
for (const s of data.sensors) {
|
||||
const val = s.value !== null ? s.value : '—';
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `
|
||||
<td class="sensor-name">${esc(s.name)}</td>
|
||||
<td class="val">${val}</td>
|
||||
<td class="unit">${esc(s.unit || '')}</td>`;
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
} catch (e) {
|
||||
setStatus('⚠ Netzwerkfehler: ' + e.message, 'error');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = 'Auslesen';
|
||||
const res = await fetch('/api/status');
|
||||
currentStatus = await res.json();
|
||||
renderDashboard(currentStatus);
|
||||
} catch(e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Dashboard ────────────────────────────────────────────────
|
||||
|
||||
function renderDashboard(s) {
|
||||
const dot = document.getElementById('statusDot');
|
||||
const hdr = document.getElementById('hdrSub');
|
||||
|
||||
if (!s.connected) { showDisconnected(); return; }
|
||||
|
||||
document.getElementById('connectCard').classList.add('hidden');
|
||||
document.getElementById('liveCard').classList.remove('hidden');
|
||||
|
||||
dot.className = 'status-dot ' + (s.modbus_ok ? 'ok' : 'err');
|
||||
hdr.textContent = s.inv_name || s.cfg.model;
|
||||
|
||||
if (s.last_ts) {
|
||||
const ago = Math.round(Date.now()/1000 - s.last_ts);
|
||||
document.getElementById('updateBar').textContent =
|
||||
`Letztes Update: ${ago < 60 ? ago+'s' : Math.round(ago/60)+'min'} · alle 30s`;
|
||||
}
|
||||
|
||||
const v = s.values;
|
||||
|
||||
// Spannung
|
||||
const voltIds = VOLTAGE_IDS.filter(id => v[id] !== undefined);
|
||||
renderMetrics('voltageMetrics', voltIds.map(id => ({
|
||||
label: LABELS[id], value: v[id]?.toFixed(1), unit: 'V', cls: 'highlight'
|
||||
})));
|
||||
|
||||
// Frequenz + Leistung
|
||||
const pm = [];
|
||||
if (v.frequency !== undefined)
|
||||
pm.push({label:'Frequenz', value: v.frequency?.toFixed(2), unit:'Hz', cls:'ok'});
|
||||
const pwrId = POWER_IDS.find(id => v[id] !== undefined);
|
||||
if (pwrId) {
|
||||
const pval = v[pwrId];
|
||||
pm.push({label: LABELS[pwrId], value: pval?.toFixed(0), unit:'W',
|
||||
cls: pval < 0 ? 'ok' : 'warn'});
|
||||
}
|
||||
renderMetrics('powerMetrics', pm);
|
||||
|
||||
// Extras (Temperatur, SoC, …)
|
||||
const extras = EXTRA_IDS.filter(id => v[id] !== undefined)
|
||||
.map(id => ({label: LABELS[id], value: v[id]?.toFixed(1),
|
||||
unit: id==='bat_soc'?'%':id==='temperature'?'°C':'A'}));
|
||||
document.getElementById('extraCard').style.display = extras.length ? '' : 'none';
|
||||
if (extras.length) renderMetrics('extraMetrics', extras);
|
||||
|
||||
// Sensor-Tabelle aktualisieren
|
||||
if (s.sensors.length) {
|
||||
const tbody = document.getElementById('sensorBody');
|
||||
tbody.innerHTML = s.sensors.map(sen => {
|
||||
const val = v[sen.id] !== undefined ? v[sen.id] : '—';
|
||||
return `<tr><td>${esc(sen.name)}</td>
|
||||
<td class="v">${val}</td>
|
||||
<td class="u">${esc(sen.unit||'')}</td></tr>`;
|
||||
}).join('');
|
||||
}
|
||||
}
|
||||
|
||||
function renderMetrics(containerId, items) {
|
||||
document.getElementById(containerId).innerHTML = items.map(m =>
|
||||
`<div class="metric ${m.cls||''}">
|
||||
<div class="metric-label">${esc(m.label)}</div>
|
||||
<div class="metric-value">${esc(m.value??'—')}</div>
|
||||
<div class="metric-unit">${esc(m.unit||'')}</div>
|
||||
</div>`
|
||||
).join('');
|
||||
}
|
||||
|
||||
function showDisconnected() {
|
||||
document.getElementById('connectCard').classList.remove('hidden');
|
||||
document.getElementById('liveCard').classList.add('hidden');
|
||||
document.getElementById('statusDot').className = 'status-dot';
|
||||
document.getElementById('hdrSub').textContent = 'Nicht verbunden';
|
||||
}
|
||||
|
||||
// ── Charts ───────────────────────────────────────────────────
|
||||
|
||||
function setRange(h, btn) {
|
||||
chartHours = h;
|
||||
document.querySelectorAll('.range-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
loadCharts();
|
||||
}
|
||||
|
||||
async function loadCharts() {
|
||||
if (!currentStatus?.connected) {
|
||||
document.getElementById('noDataCard').classList.remove('hidden');
|
||||
document.getElementById('chartSection').classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
document.getElementById('noDataCard').classList.add('hidden');
|
||||
document.getElementById('chartSection').classList.remove('hidden');
|
||||
|
||||
const v = currentStatus.values || {};
|
||||
const voltIds = VOLTAGE_IDS.filter(id => v[id] !== undefined);
|
||||
const pwrIds = POWER_IDS.filter(id => v[id] !== undefined);
|
||||
|
||||
const sensors = [...voltIds, 'frequency', ...pwrIds].join(',');
|
||||
const res = await fetch(`/api/chart-data?sensors=${sensors}&hours=${chartHours}`);
|
||||
const data = await res.json();
|
||||
|
||||
drawLineChart('chartVoltage', voltIds.map((id,i) => ({
|
||||
label: LABELS[id], color: COLORS[i], points: data[id]||[]
|
||||
})), 'legendVoltage');
|
||||
|
||||
drawLineChart('chartFreq', [{
|
||||
label:'Frequenz', color: COLORS[2], points: data.frequency||[]
|
||||
}], null, {yMin:49, yMax:51});
|
||||
|
||||
drawLineChart('chartPower', pwrIds.map((id,i) => ({
|
||||
label: LABELS[id], color: COLORS[i], points: data[id]||[]
|
||||
})), 'legendPower');
|
||||
}
|
||||
|
||||
function drawLineChart(canvasId, series, legendId, opts={}) {
|
||||
const canvas = document.getElementById(canvasId);
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
const W = canvas.parentElement.clientWidth;
|
||||
const H = canvas.height || 140;
|
||||
canvas.width = W * dpr;
|
||||
canvas.height = H * dpr;
|
||||
canvas.style.width = W + 'px';
|
||||
canvas.style.height = H + 'px';
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
const PAD = {top:10, right:10, bottom:28, left:42};
|
||||
const iW = W - PAD.left - PAD.right;
|
||||
const iH = H - PAD.top - PAD.bottom;
|
||||
|
||||
ctx.clearRect(0, 0, W, H);
|
||||
ctx.fillStyle = '#0f172a';
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
|
||||
const allPts = series.flatMap(s => s.points);
|
||||
if (allPts.length < 2) {
|
||||
ctx.fillStyle = '#475569';
|
||||
ctx.font = '13px system-ui';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText('Noch keine Daten', W/2, H/2);
|
||||
return;
|
||||
}
|
||||
|
||||
const tsMin = Math.min(...allPts.map(p => p.ts));
|
||||
const tsMax = Math.max(...allPts.map(p => p.ts));
|
||||
let vMin = opts.yMin ?? Math.min(...allPts.map(p => p.v));
|
||||
let vMax = opts.yMax ?? Math.max(...allPts.map(p => p.v));
|
||||
if (vMin === vMax) { vMin -= 1; vMax += 1; }
|
||||
const vPad = (vMax - vMin) * 0.08;
|
||||
vMin -= vPad; vMax += vPad;
|
||||
|
||||
const tx = ts => PAD.left + (ts - tsMin) / (tsMax - tsMin) * iW;
|
||||
const ty = v => PAD.top + (1 - (v - vMin) / (vMax - vMin)) * iH;
|
||||
|
||||
// Grid
|
||||
ctx.strokeStyle = '#1e293b'; ctx.lineWidth = 1;
|
||||
for (let i = 0; i <= 4; i++) {
|
||||
const y = PAD.top + iH * i / 4;
|
||||
ctx.beginPath(); ctx.moveTo(PAD.left, y); ctx.lineTo(PAD.left + iW, y); ctx.stroke();
|
||||
const val = vMax - (vMax - vMin) * i / 4;
|
||||
ctx.fillStyle = '#475569'; ctx.font = '10px system-ui'; ctx.textAlign = 'right';
|
||||
ctx.fillText(val.toFixed(val > 100 ? 0 : 1), PAD.left - 4, y + 4);
|
||||
}
|
||||
|
||||
// X-Achse Zeitstempel
|
||||
const fmtTs = ts => {
|
||||
const d = new Date(ts * 1000);
|
||||
if (chartHours <= 6) return d.toLocaleTimeString('de',{hour:'2-digit',minute:'2-digit'});
|
||||
return d.toLocaleDateString('de',{weekday:'short',hour:'2-digit',minute:'2-digit'});
|
||||
};
|
||||
ctx.fillStyle = '#475569'; ctx.font = '10px system-ui'; ctx.textAlign = 'center';
|
||||
[0, 0.25, 0.5, 0.75, 1].forEach(f => {
|
||||
const ts = tsMin + (tsMax - tsMin) * f;
|
||||
ctx.fillText(fmtTs(ts), PAD.left + iW * f, H - 6);
|
||||
});
|
||||
|
||||
// Series
|
||||
series.forEach(s => {
|
||||
if (!s.points.length) return;
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = s.color;
|
||||
ctx.lineWidth = 2;
|
||||
ctx.lineJoin = 'round';
|
||||
s.points.forEach((p, i) => {
|
||||
const x = tx(p.ts), y = ty(p.v);
|
||||
i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
|
||||
});
|
||||
ctx.stroke();
|
||||
});
|
||||
|
||||
// Legend
|
||||
if (legendId) {
|
||||
document.getElementById(legendId).innerHTML = series.map(s =>
|
||||
`<div class="legend-item">
|
||||
<div class="legend-dot" style="background:${s.color}"></div>
|
||||
<span>${esc(s.label)}</span>
|
||||
</div>`
|
||||
).join('');
|
||||
}
|
||||
}
|
||||
|
||||
// ── Raw ──────────────────────────────────────────────────────
|
||||
|
||||
async function rawScan() {
|
||||
setStatus('Lese Register…', 'info');
|
||||
const alert = document.getElementById('rawAlert');
|
||||
const s = currentStatus;
|
||||
const cfg = s?.cfg || {ip:'10.0.0.100', port:502, slave:1};
|
||||
alert.innerHTML = '<div class="alert alert-info">Lese Register…</div>';
|
||||
try {
|
||||
const res = await fetch('/api/raw', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
const res = await fetch('/api/raw', {method:'POST',
|
||||
headers:{'Content-Type':'application/json'},
|
||||
body: JSON.stringify({
|
||||
ip: document.getElementById('ip').value,
|
||||
port: parseInt(document.getElementById('port').value),
|
||||
slave: parseInt(document.getElementById('slave').value),
|
||||
ip: cfg.ip, port: cfg.port, slave: cfg.slave,
|
||||
start: parseInt(document.getElementById('rawStart').value),
|
||||
count: parseInt(document.getElementById('rawCount').value),
|
||||
})
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!data.ok) { setStatus('⚠ ' + data.error, 'error'); return; }
|
||||
|
||||
const tbody = document.getElementById('rawBody');
|
||||
tbody.innerHTML = '';
|
||||
for (const r of data.registers) {
|
||||
const tr = document.createElement('tr');
|
||||
tr.innerHTML = `<td>${r.addr}</td><td>${r.hex}</td><td>${r.dec}</td><td>${r.signed}</td>`;
|
||||
tbody.appendChild(tr);
|
||||
}
|
||||
setStatus(`✓ ${data.registers.length} Register gelesen`, 'ok');
|
||||
} catch (e) {
|
||||
setStatus('⚠ ' + e.message, 'error');
|
||||
const d = await res.json();
|
||||
if (!d.ok) { alert.innerHTML = `<div class="alert alert-err">${esc(d.error)}</div>`; return; }
|
||||
document.getElementById('rawBody').innerHTML = d.registers.map(r =>
|
||||
`<tr><td>${r.addr}</td><td>${r.hex}</td><td>${r.dec}</td><td>${r.signed}</td></tr>`
|
||||
).join('');
|
||||
alert.innerHTML = `<div class="alert alert-ok">✓ ${d.registers.length} Register</div>`;
|
||||
} catch(e) {
|
||||
alert.innerHTML = `<div class="alert alert-err">${esc(e.message)}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Export ───────────────────────────────────────────────────
|
||||
|
||||
function exportJson() {
|
||||
if (!lastScan) return;
|
||||
const blob = new Blob([JSON.stringify(lastScan, null, 2)], {type: 'application/json'});
|
||||
if (!currentStatus) return;
|
||||
const blob = new Blob([JSON.stringify(currentStatus, null, 2)], {type:'application/json'});
|
||||
const a = document.createElement('a');
|
||||
a.href = URL.createObjectURL(blob);
|
||||
a.download = `shinediag_${new Date().toISOString().slice(0,19).replace(/:/g,'-')}.json`;
|
||||
a.click();
|
||||
}
|
||||
|
||||
// ── Helpers ──────────────────────────────────────────────────
|
||||
|
||||
function esc(s) {
|
||||
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||||
return String(s??'').replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
|
||||
}
|
||||
|
||||
loadModels();
|
||||
// ── Init ─────────────────────────────────────────────────────
|
||||
|
||||
async function init() {
|
||||
await loadModels();
|
||||
const savedIp = localStorage.getItem('shinediag_ip');
|
||||
if (savedIp) document.getElementById('cfgIp').value = savedIp;
|
||||
|
||||
// Reconnect if server already polling
|
||||
const res = await fetch('/api/status');
|
||||
const s = await res.json();
|
||||
if (s.connected) {
|
||||
currentStatus = s;
|
||||
renderDashboard(s);
|
||||
startRefresh();
|
||||
}
|
||||
}
|
||||
|
||||
init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user