joe/PlatformIO_Esp32C3_BedCooler
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Add temp sensor.

Browse Source
This commit is contained in:
Joe Tretter
2026-06-28 13:25:14 -05:00
parent 0f2a03044c
commit e188930755
6 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
data/www/admin.html
View File

@@ -6,7 +6,7 @@
<link rel="stylesheet" href="/css/app.css">
<script defer src="/js/app.js"></script>
<script type="module" src="/components/status-card.js"></script>
<script type="module" src="/components/uptime-card.js"></script>
<script type="module" src="/components/temperature-card.js"></script>
<script type="module" src="/components/led-card.js"></script>
<script type="module" src="/components/add-card.js"></script>
</head>
@@ -30,7 +30,7 @@
</div>
<div id="dashboard" class="panel active"><div class="grid">
<status-card></status-card>
<uptime-card></uptime-card>
<temperature-card></temperature-card>
<led-card></led-card>
<add-card></add-card>
</div></div>

16
data/www/components/uptime-card.js → data/www/components/temperature-card.js
View File

@@ -1,4 +1,4 @@
class UptimeCard extends HTMLElement {
class TemperatureCard extends HTMLElement {
constructor() {
super();
this.source = null;
@@ -7,12 +7,13 @@ class UptimeCard extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<style>
:host{display:block}section{height:100%;box-sizing:border-box}.liveValue{font-size:34px;font-weight:700;line-height:1.15;margin-top:10px}.state{display:inline-flex;align-items:center;gap:6px;margin-top:6px}.dot{width:9px;height:9px;border-radius:50%;background:#b3261e}.dot.on{background:#188038}
:host{display:block}section{height:100%;box-sizing:border-box}.liveValue{font-size:34px;font-weight:700;line-height:1.15;margin-top:10px}.secondaryValue{font-size:18px;font-weight:600;margin-top:2px}.state{display:inline-flex;align-items:center;gap:6px;margin-top:6px}.dot{width:9px;height:9px;border-radius:50%;background:#b3261e}.dot.on{background:#188038}
</style>
<section>
<h3>Live temperature</h3>
<div class="muted">Server-Sent Events</div>
<div class="liveValue"><span id="temperature">--</span>&deg;C</div>
<div class="liveValue"><span id="temperatureC">--</span>&deg;C</div>
<div class="secondaryValue"><span id="temperatureF">--</span>&deg;F</div>
<div class="muted state"><span id="dot" class="dot"></span><span id="state">Disconnected</span></div>
</section>`;
window.addEventListener('app:login', event => this.start(event.detail.token));
@@ -36,13 +37,14 @@ class UptimeCard extends HTMLElement {
return;
}
this.setState('Connecting', false);
this.source = new EventSource('/api/uptime/events?token=' + encodeURIComponent(token));
this.source = new EventSource('/api/temperature/events?token=' + encodeURIComponent(token));
this.source.addEventListener('open', () => this.setState('Connected', true));
this.source.addEventListener('temperature', event => {
try {
const json = JSON.parse(event.data);
const connected = !!json.sensorConnected && json.temperatureC !== null;
this.querySelector('#temperature').textContent = connected ? Number(json.temperatureC).toFixed(2) : '--';
const connected = !!json.sensorConnected && json.temperatureC !== null && json.temperatureF !== null;
this.querySelector('#temperatureC').textContent = connected ? Number(json.temperatureC).toFixed(2) : '--';
this.querySelector('#temperatureF').textContent = connected ? Number(json.temperatureF).toFixed(2) : '--';
this.setState(connected ? 'Connected' : 'Sensor unavailable', connected);
} catch (error) {
this.setState('Invalid event', false);
@@ -57,4 +59,4 @@ class UptimeCard extends HTMLElement {
}
}
customElements.define('uptime-card', UptimeCard);
customElements.define('temperature-card', TemperatureCard);