Initialize piNail project with modern piNail2 web controller
This commit is contained in:
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>piNail2 Controller</title>
|
||||
<link rel="icon" type="image/png" href="/static/img/pi_favicon.png">
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="brand">
|
||||
<img class="brand-logo" src="/static/img/pinail_logo.svg" alt="PINAIL logo">
|
||||
<h1>Controller</h1>
|
||||
</div>
|
||||
<div class="conn-wrap">
|
||||
<span id="last-ack" class="last-ack">Last command: none</span>
|
||||
<span id="backend-status" class="backend-status">Backend: Online</span>
|
||||
<div id="connection-status" class="status-dot connected" title="Connected"></div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Top row: Big temp display + power toggle -->
|
||||
<section class="hero">
|
||||
<div class="temp-display">
|
||||
<span id="current-temp" class="temp-value">---</span>
|
||||
<span class="temp-unit">°F</span>
|
||||
</div>
|
||||
<div class="hero-right">
|
||||
<div class="setpoint-display">
|
||||
Target: <span id="current-setpoint">---</span>°F
|
||||
</div>
|
||||
<div id="autotune-pill" class="autotune-pill idle">Autotune: Idle</div>
|
||||
<button id="power-btn" class="power-btn off" onclick="togglePower()">OFF</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Safety alert banner (hidden by default) -->
|
||||
<section id="safety-banner" class="safety-banner hidden">
|
||||
<span id="safety-message"></span>
|
||||
<button onclick="resetSafety()">Reset</button>
|
||||
</section>
|
||||
|
||||
<section id="action-banner" class="action-banner hidden">
|
||||
<span id="action-message"></span>
|
||||
</section>
|
||||
|
||||
<!-- Chart -->
|
||||
<section class="chart-section">
|
||||
<canvas id="temp-chart"></canvas>
|
||||
</section>
|
||||
|
||||
<!-- Controls -->
|
||||
<section class="controls">
|
||||
<!-- Setpoint -->
|
||||
<div class="control-group">
|
||||
<h3>Setpoint</h3>
|
||||
<div class="setpoint-controls">
|
||||
<button class="adj-btn" onclick="adjustSetpoint(-10)">-10</button>
|
||||
<button class="adj-btn" onclick="adjustSetpoint(-5)">-5</button>
|
||||
<input type="number" id="setpoint-input" value="530" min="0" max="800" step="5">
|
||||
<button class="adj-btn" onclick="adjustSetpoint(+5)">+5</button>
|
||||
<button class="adj-btn" onclick="adjustSetpoint(+10)">+10</button>
|
||||
<button class="apply-btn" onclick="applySetpoint()">Set</button>
|
||||
</div>
|
||||
<div class="presets" id="presets-container">
|
||||
<!-- Filled by JS -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PID Tuning -->
|
||||
<div class="control-group">
|
||||
<h3>PID Tuning</h3>
|
||||
<div class="pid-controls">
|
||||
<label>
|
||||
kP
|
||||
<input type="number" id="pid-kp" step="0.1" value="10">
|
||||
</label>
|
||||
<label>
|
||||
kI
|
||||
<input type="number" id="pid-ki" step="0.1" value="5">
|
||||
</label>
|
||||
<label>
|
||||
kD
|
||||
<input type="number" id="pid-kd" step="0.1" value="1">
|
||||
</label>
|
||||
<label>
|
||||
P Mode
|
||||
<select id="pid-pmode">
|
||||
<option value="error">P-on-Error</option>
|
||||
<option value="measurement">P-on-Measurement</option>
|
||||
</select>
|
||||
</label>
|
||||
<button class="apply-btn" onclick="applyPID()">Apply</button>
|
||||
<button class="apply-btn" onclick="resetPID()">Reset I</button>
|
||||
</div>
|
||||
<div class="autotune-controls">
|
||||
<button id="autotune-start-btn" class="apply-btn" onclick="startAutotune()">Start Autotune</button>
|
||||
<button id="autotune-stop-btn" class="adj-btn" onclick="stopAutotune()">Stop Autotune</button>
|
||||
<span id="autotune-status" class="autotune-status idle">Idle</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Status bar -->
|
||||
<section class="status-bar">
|
||||
<div class="status-item">
|
||||
<span class="label">Output</span>
|
||||
<span id="status-output" class="value">0</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="label">Relay</span>
|
||||
<span id="status-relay" class="value relay-off">OFF</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="label">Uptime</span>
|
||||
<span id="status-uptime" class="value">--</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="label">Loops</span>
|
||||
<span id="status-loops" class="value">0</span>
|
||||
</div>
|
||||
<div class="status-item">
|
||||
<span class="label">TC</span>
|
||||
<span id="status-tc" class="value">--</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="app-footer">
|
||||
<span>{{ app_version }}</span>
|
||||
<span>Copyright © {{ copyright_year }} SethPC Labs</span>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
<script src="/static/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user