Add indicator for feed rate, remove vac

This commit is contained in:
Skylar Grant 2024-12-07 14:25:14 -05:00
parent 83c040b800
commit 7ba0fe5c79
3 changed files with 44 additions and 35 deletions

View File

@ -48,18 +48,6 @@ export class State {
communicator.send(config.mqtt.topics.pof, JSON.stringify(this.pof));
}
};
this.vacuum = {
on: false,
name: "vacuum",
topic: config.mqtt.topics.vacuum,
publisher: 'backend',
power: (communicator) => {
// This *should* toggle the state, asks if state is true, if it is set it false, otherwise set it true
this.vacuum.on ? this.vacuum.on = false : this.vacuum.on = true;
communicator.send(config.mqtt.topics.vacuum, JSON.stringify(this.vacuum));
}
};
console.log(`State initialized.`)
};
};

View File

@ -10,7 +10,6 @@ const config = {
"exhaust": "hestia/status/exhaust",
"auger": "hestia/status/auger",
"pof": "hestia/status/pof",
"vacuum": "hestia/status/vacuum"
}
},
"states": {
@ -19,42 +18,64 @@ const config = {
"exhaust",
"auger",
"pof",
"vacuum"
]
},
"feedRates": {
"low": 500,
"medium-low": 625,
"medium": 750,
"medium-high": 875,
"high": 1000,
"reverse": {
"500": "Low",
"625": "Medium-Low",
"750": "Medium",
"875": "Medium-High",
"1000": "High",
}
}
};
// Create a new state and communicator
const psState = new State(config);
const comms = new Communicator(psState);
// Grab elements from the DOM
const setFeedRateButton = document.getElementById("set-feed-rate");
export function refreshState(doc, state) {
const igniterStatus = doc.getElementById("igniter-status");
const exhaustStatus = doc.getElementById("exhaust-status");
const augerStatus = doc.getElementById("auger-status");
const pofStatus = doc.getElementById("pof-status");
const vacuumStatus = doc.getElementById("vacuum-status");
let statusString;
const feedRateStatus = document.getElementById("feed-rate-status");
statusString = '';
export function refreshState(doc, state) {
let statusString = new String('Loading...');
// Igniter
if (state.igniter.on) statusString = "On"; else statusString = "Off";
igniterStatus.innerHTML = statusString;
statusString = '';
// Exhaust
statusString = 'Loading...';
if (state.exhaust.on) statusString = "On"; else statusString = "Off";
exhaustStatus.innerHTML = statusString;
statusString = '';
// Auger
statusString = 'Loading...';
if (state.auger.on) statusString = "On"; else statusString = "Off";
augerStatus.innerHTML = statusString;
statusString = '';
// Proof of Fire
statusString = 'Loading...';
if (state.pof.on) statusString = "On"; else statusString = "Off";
pofStatus.innerHTML = statusString;
statusString = '';
if (state.vacuum.on) statusString = "On"; else statusString = "Off";
vacuumStatus.innerHTML = statusString;
// This is needlessly complicated but it matches the other status updates
statusString = 'Loading...';
const { feedRate } = state.auger;
if (config.feedRates.reverse[feedRate]) statusString = config.feedRates.reverse[feedRate];
else statusString = feedRate;
feedRateStatus.innerHTML = statusString;
console.log('State refreshed.');
}
@ -72,6 +93,7 @@ export function shutdown() {
comms.shutdown();
}
// Run stuff once the page loads
window.onload = function() {
comms.init(psState, config);
refreshState(window.document, psState);

View File

@ -45,16 +45,16 @@
<td class="py-2 px-4">Auger</td>
<td class="py-2 px-4" id="auger-status">Placeholder</td>
</tr>
<!-- Feed Rate -->
<tr class="border-b border-gray-700">
<td class="py-2 px-4">Feed Rate</td>
<td class="py-2 px-4" id="feed-rate-status">Placeholder</td>
</tr>
<!-- PoF -->
<tr class="border-b border-gray-700">
<td class="py-2 px-4">Proof of Fire</td>
<td class="py-2 px-4" id="pof-status">Placeholder</td>
</tr>
<!-- Vacuum -->
<tr>
<td class="py-2 px-4">Vacuum</td>
<td class="py-2 px-4" id="vacuum-status">Placeholder</td>
</tr>
</tbody>
</table>
<div class="button-container flex">
@ -67,10 +67,10 @@
<input class="btn bg-gray-700 hover:bg-purple-600 text-white py-2 w-full rounded mx-auto" type="submit" id="auger-toggle-btn" value="Toggle Auger" name="augerToggle" onclick="togglePower('auger')">
</div>
<div class="button-container flex mt-4">
<input class="btn bg-gray-700 hover:bg-purple-600 text-white py-2 w-full rounded mx-auto" type="submit" id="start-btn" value="Startup" name="startButton" onclick="startup()">
<input class="btn bg-gray-700 hover:bg-purple-600 text-white py-2 w-full rounded mx-auto" type="submit" id="start-btn" value="[Disabled]" name="startButton" onclick="">
</div>
<div class="button-container flex mt-4">
<input class="btn bg-gray-700 hover:bg-purple-600 text-white py-2 w-full rounded mx-auto" type="submit" id="stop-btn" value="Shutdown" name="stopButton" onclick="shutdown()">
<input class="btn bg-gray-700 hover:bg-purple-600 text-white py-2 w-full rounded mx-auto" type="submit" id="stop-btn" value="[Disabled]" name="stopButton" onclick="">
</div>
<!-- Set feed rates -->
<div class="form-group mt-4">
@ -94,7 +94,6 @@
<div class="controls-container bg-gray-800 p-6 rounded-lg shadow-lg" id="quitContainer">
<input class="btn bg-green-200 hover:bg-green-400 text-black font-bold py-2 px-4 rounded w-full" type="submit" id="reload" value="Refresh State" name="refresh">
<input class="btn bg-red-600 hover:bg-red-700 text-white py-2 font-bold rounded w-full mt-4" type="submit" id="quit" value="Quit!!" name="quit">
</div>
</div>
</body>