nick/xterra-overland-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add multi-screen dashboard simulator UI

Browse Source
This commit is contained in:
root
2026-06-03 00:02:31 -06:00
parent a7d007d1c5
commit f0878babd2
2 changed files with 232 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
simulator/static/style.css
+107 -19
View File
@@ -1,69 +1,157 @@
body {
margin: 0;
font-family: Arial, sans-serif;
background: #111;
background: #101010;
color: #eee;
}
main {
max-width: 900px;
margin: 0 auto;
padding: 24px;
padding: 18px 18px 96px;
}
header {
text-align: center;
margin-bottom: 16px;
}
h1 {
margin: 0 0 8px;
font-size: 1.8rem;
}
h2 {
margin-top: 0;
}
#statusLine {
color: #aaa;
font-size: 0.95rem;
}
.screen {
display: none;
}
.screen.active {
display: block;
}
.big-card {
background: #222;
border: 1px solid #333;
border-radius: 16px;
padding: 24px;
text-align: center;
margin-bottom: 16px;
}
.big-card p {
font-size: 4rem;
margin: 0;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 14px;
}
.card {
background: #222;
border: 1px solid #333;
border-radius: 12px;
padding: 18px;
border-radius: 14px;
padding: 16px;
text-align: center;
}
.card h2 {
font-size: 1rem;
margin: 0 0 12px;
color: #aaa;
}
.card p {
font-size: 2rem;
font-size: 2.1rem;
margin: 0;
}
.controls {
margin-top: 24px;
.relay-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
margin-top: 16px;
}
.relay-pill {
flex: 1;
background: #252525;
border: 1px solid #444;
border-radius: 999px;
padding: 14px;
text-align: center;
font-size: 1.2rem;
}
.detail-list {
background: #222;
border: 1px solid #333;
border-radius: 14px;
overflow: hidden;
margin-bottom: 18px;
}
.detail-list div {
display: flex;
justify-content: space-between;
padding: 16px;
border-bottom: 1px solid #333;
font-size: 1.2rem;
}
.detail-list div:last-child {
border-bottom: none;
}
button {
font-size: 1rem;
padding: 14px 20px;
font-size: 1.1rem;
padding: 16px 20px;
border: none;
border-radius: 10px;
border-radius: 12px;
background: #444;
color: white;
cursor: pointer;
min-width: 130px;
}
button:hover {
background: #666;
}
.status {
margin-top: 24px;
text-align: center;
color: #aaa;
#power button,
#system button {
display: block;
width: 100%;
margin-bottom: 14px;
font-size: 1.4rem;
padding: 22px;
}
nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #181818;
border-top: 1px solid #333;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
padding: 8px;
}
nav button {
min-width: 0;
padding: 14px 4px;
font-size: 0.9rem;
border-radius: 10px;
}
simulator/templates/index.html
+93 -50
View File
@@ -6,85 +6,128 @@
</head>
<body>
<main>
<header>
<h1>Xterra Dashboard</h1>
<div id="statusLine">RS-485: -- | WiFi: --</div>
</header>
<section class="grid">
<div class="card">
<section id="dashboard" class="screen active">
<div class="big-card">
<h2>Battery</h2>
<p><span id="soc">--</span>%</p>
<small><span id="voltage">--</span>V / <span id="current">--</span>A</small>
<p><span id="dashSoc">--</span>%</p>
<small><span id="dashRuntime">--</span> hr runtime</small>
</div>
<div class="card">
<h2>Runtime</h2>
<p><span id="runtime">--</span> hr</p>
<small><span id="remaining">--</span> Ah remaining</small>
<div class="grid">
<div class="card"><h2>Fridge A</h2><p><span id="dashFridge1">--</span>°F</p></div>
<div class="card"><h2>Fridge B</h2><p><span id="dashFridge2">--</span>°F</p></div>
<div class="card"><h2>Rear Seat</h2><p><span id="dashRear">--</span>°F</p></div>
<div class="card"><h2>Outside</h2><p><span id="dashOutside">--</span>°F</p></div>
</div>
<div class="card">
<h2>Fridge Zone 1</h2>
<p><span id="fridge1">--</span>°F</p>
</div>
<div class="card">
<h2>Fridge Zone 2</h2>
<p><span id="fridge2">--</span>°F</p>
</div>
<div class="card">
<h2>Rear Seat</h2>
<p><span id="rear">--</span>°F</p>
</div>
<div class="card">
<h2>Outside</h2>
<p><span id="outside">--</span>°F</p>
<div class="relay-row">
<div id="dashStarlink" class="relay-pill">Starlink: --</div>
<div id="dashFridgeRelay" class="relay-pill">Fridge: --</div>
</div>
</section>
<section class="controls">
<section id="battery" class="screen">
<h2>Battery Detail</h2>
<div class="detail-list">
<div>SOC <strong><span id="batSoc">--</span>%</strong></div>
<div>Voltage <strong><span id="batVoltage">--</span> V</strong></div>
<div>Current <strong><span id="batCurrent">--</span> A</strong></div>
<div>Remaining <strong><span id="batRemaining">--</span> Ah</strong></div>
<div>Runtime <strong><span id="batRuntime">--</span> hr</strong></div>
<div>Battery Temp <strong><span id="batTemp">--</span>°F</strong></div>
</div>
</section>
<section id="temps" class="screen">
<h2>Temperatures</h2>
<div class="grid">
<div class="card"><h2>Fridge Zone 1</h2><p><span id="tempFridge1">--</span>°F</p></div>
<div class="card"><h2>Fridge Zone 2</h2><p><span id="tempFridge2">--</span>°F</p></div>
<div class="card"><h2>Rear Seat</h2><p><span id="tempRear">--</span>°F</p></div>
<div class="card"><h2>Outside</h2><p><span id="tempOutside">--</span>°F</p></div>
</div>
</section>
<section id="power" class="screen">
<h2>Power Control</h2>
<button onclick="toggleRelay('starlink')" id="starlinkBtn">Starlink</button>
<button onclick="toggleRelay('fridge')" id="fridgeBtn">Fridge</button>
<button onclick="enableWifi()">Enable WiFi 10 min</button>
</section>
<section class="status">
<p>RS-485: <span id="rs485">--</span></p>
<p>WiFi: <span id="wifi">--</span></p>
<section id="system" class="screen">
<h2>System</h2>
<div class="detail-list">
<div>RS-485 <strong id="sysRs485">--</strong></div>
<div>WiFi <strong id="sysWifi">--</strong></div>
<div>WiFi Override <strong id="sysWifiOverride">--</strong></div>
</div>
<button onclick="enableWifi()">Enable WiFi 10 min</button>
</section>
</main>
<nav>
<button onclick="showScreen('dashboard')">Dashboard</button>
<button onclick="showScreen('battery')">Battery</button>
<button onclick="showScreen('temps')">Temps</button>
<button onclick="showScreen('power')">Power</button>
<button onclick="showScreen('system')">System</button>
</nav>
<script>
let relayState = {};
function showScreen(id) {
document.querySelectorAll('.screen').forEach(screen => {
screen.classList.remove('active');
});
document.getElementById(id).classList.add('active');
}
function onOff(value) {
return value ? 'ON' : 'OFF';
}
async function loadStatus() {
const res = await fetch('/status');
const data = await res.json();
document.getElementById('soc').textContent = data.battery.soc;
document.getElementById('voltage').textContent = data.battery.voltage;
document.getElementById('current').textContent = data.battery.current;
document.getElementById('runtime').textContent = data.battery.runtime_hours;
document.getElementById('remaining').textContent = data.battery.remaining_ah;
document.getElementById('fridge1').textContent = data.temps.fridge_zone_1;
document.getElementById('fridge2').textContent = data.temps.fridge_zone_2;
document.getElementById('rear').textContent = data.temps.rear_seat;
document.getElementById('outside').textContent = data.temps.outside;
relayState = data.relays;
document.getElementById('starlinkBtn').textContent =
relayState.starlink ? 'Starlink: ON' : 'Starlink: OFF';
document.getElementById('statusLine').textContent =
`RS-485: ${data.network.rs485_connected ? 'Connected' : 'Lost'} | WiFi: ${data.network.wifi_enabled ? 'Enabled' : 'Disabled'}`;
document.getElementById('fridgeBtn').textContent =
relayState.fridge ? 'Fridge: ON' : 'Fridge: OFF';
document.getElementById('dashSoc').textContent = data.battery.soc;
document.getElementById('dashRuntime').textContent = data.battery.runtime_hours;
document.getElementById('dashFridge1').textContent = data.temps.fridge_zone_1;
document.getElementById('dashFridge2').textContent = data.temps.fridge_zone_2;
document.getElementById('dashRear').textContent = data.temps.rear_seat;
document.getElementById('dashOutside').textContent = data.temps.outside;
document.getElementById('dashStarlink').textContent = `Starlink: ${onOff(data.relays.starlink)}`;
document.getElementById('dashFridgeRelay').textContent = `Fridge: ${onOff(data.relays.fridge)}`;
document.getElementById('rs485').textContent =
data.network.rs485_connected ? 'Connected' : 'Disconnected';
document.getElementById('batSoc').textContent = data.battery.soc;
document.getElementById('batVoltage').textContent = data.battery.voltage;
document.getElementById('batCurrent').textContent = data.battery.current;
document.getElementById('batRemaining').textContent = data.battery.remaining_ah;
document.getElementById('batRuntime').textContent = data.battery.runtime_hours;
document.getElementById('batTemp').textContent = data.battery.temperature_f;
document.getElementById('wifi').textContent =
data.network.wifi_enabled ? 'Enabled' : 'Disabled';
document.getElementById('tempFridge1').textContent = data.temps.fridge_zone_1;
document.getElementById('tempFridge2').textContent = data.temps.fridge_zone_2;
document.getElementById('tempRear').textContent = data.temps.rear_seat;
document.getElementById('tempOutside').textContent = data.temps.outside;
document.getElementById('starlinkBtn').textContent = `Starlink: ${onOff(data.relays.starlink)}`;
document.getElementById('fridgeBtn').textContent = `Fridge: ${onOff(data.relays.fridge)}`;
document.getElementById('sysRs485').textContent = data.network.rs485_connected ? 'Connected' : 'Disconnected';
document.getElementById('sysWifi').textContent = data.network.wifi_enabled ? 'Enabled' : 'Disabled';
document.getElementById('sysWifiOverride').textContent = data.network.wifi_override_active ? 'Active' : 'Inactive';
}
async function toggleRelay(name) {