retr0
fe1bdb057d
- 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>
602 lines
23 KiB
HTML
602 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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}
|
|
|
|
/* 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}
|
|
|
|
/* 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}
|
|
|
|
/* 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}
|
|
|
|
/* 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}
|
|
|
|
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}
|
|
|
|
/* 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}
|
|
|
|
/* 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%}
|
|
|
|
/* 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}
|
|
|
|
/* 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 */
|
|
.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}
|
|
|
|
/* 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>
|
|
<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>
|
|
|
|
<!-- ── 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="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>Modell</label>
|
|
<select id="cfgModel"></select>
|
|
<button class="btn-primary" id="btnConnect" onclick="connect()">Verbinden & Aufzeichnen</button>
|
|
</div>
|
|
|
|
<!-- 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 class="card">
|
|
<div class="card-title">Frequenz & Leistung</div>
|
|
<div class="metrics" id="powerMetrics"></div>
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<script>
|
|
// ── 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 data = await res.json();
|
|
const sel = document.getElementById('cfgModel');
|
|
sel.innerHTML = '';
|
|
for (const [id, m] of Object.entries(data)) {
|
|
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;
|
|
}
|
|
|
|
// ── Connect ──────────────────────────────────────────────────
|
|
|
|
async function connect() {
|
|
const btn = document.getElementById('btnConnect');
|
|
btn.disabled = true;
|
|
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/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() {
|
|
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'},
|
|
body: JSON.stringify({
|
|
ip: cfg.ip, port: cfg.port, slave: cfg.slave,
|
|
start: parseInt(document.getElementById('rawStart').value),
|
|
count: parseInt(document.getElementById('rawCount').value),
|
|
})
|
|
});
|
|
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 (!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,'>');
|
|
}
|
|
|
|
// ── 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>
|