mirror of
https://github.com/dalathegreat/Battery-Emulator.git
synced 2025-10-03 17:59:27 +02:00
Refactor Settings page with cards
This commit is contained in:
Daniel Öster
parent
00a820f007
commit
9ee0dffb33
2 changed files with 100 additions and 38 deletions
|
|
@ -18,6 +18,8 @@ std::vector<BatteryType> supported_battery_types() {
|
|||
|
||||
const char* name_for_chemistry(battery_chemistry_enum chem) {
|
||||
switch (chem) {
|
||||
case battery_chemistry_enum::Autodetect:
|
||||
return "Autodetect";
|
||||
case battery_chemistry_enum::LFP:
|
||||
return "LFP";
|
||||
case battery_chemistry_enum::NCA:
|
||||
|
|
|
|||
|
|
@ -864,6 +864,21 @@ const char* getCANInterfaceName(CAN_Interface interface) {
|
|||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
background-color: #3a4b54; /* Slightly lighter than main background */
|
||||
padding: 15px 20px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 20px; /* Less rounded than 50px for a more card-like feel */
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.settings-card h3 {
|
||||
color: #fff;
|
||||
margin-top: 0;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #4d5f69;
|
||||
}
|
||||
|
||||
form .if-battery, form .if-inverter, form .if-charger, form .if-shunt { display: contents; }
|
||||
form[data-battery="0"] .if-battery { display: none; }
|
||||
form[data-inverter="0"] .if-inverter { display: none; }
|
||||
|
|
@ -960,7 +975,11 @@ const char* getCANInterfaceName(CAN_Interface interface) {
|
|||
</div>
|
||||
|
||||
<div style='background-color: #404E47; padding: 10px; margin-bottom: 10px; border-radius: 50px'>
|
||||
<form action='saveSettings' method='post' style='display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; align-items: center;'>
|
||||
<form action='saveSettings' method='post'>
|
||||
|
||||
<div class="settings-card">
|
||||
<h3>Battery config</h3>
|
||||
<div style='display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; align-items: center;'>
|
||||
|
||||
<label for='battery'>Battery: </label>
|
||||
<select name='battery' id='battery'>
|
||||
|
|
@ -1000,7 +1019,7 @@ const char* getCANInterfaceName(CAN_Interface interface) {
|
|||
</div>
|
||||
|
||||
<div class="if-battery">
|
||||
<label for='BATTCOMM'>Battery comm I/F: </label><select name='BATTCOMM' id='BATTCOMM'>
|
||||
<label for='BATTCOMM'>Battery interface: </label><select name='BATTCOMM' id='BATTCOMM'>
|
||||
%BATTCOMM%
|
||||
</select>
|
||||
|
||||
|
|
@ -1023,12 +1042,29 @@ const char* getCANInterfaceName(CAN_Interface interface) {
|
|||
<input name='BATTCVMIN' pattern="^[0-9]+$" type='text' value='%BATTCVMIN%' />
|
||||
</div>
|
||||
|
||||
<label>Double battery: </label>
|
||||
<input type='checkbox' name='DBLBTR' value='on' %DBLBTR% />
|
||||
|
||||
<div class="if-dblbtr">
|
||||
<label>Battery 2 interface: </label>
|
||||
<select name='BATT2COMM'>
|
||||
%BATT2COMM%
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-card">
|
||||
<h3>Inverter config</h3>
|
||||
<div style='display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; align-items: center;'>
|
||||
|
||||
<label>Inverter protocol: </label><select name='inverter'>
|
||||
%INVTYPE%
|
||||
</select>
|
||||
|
||||
<div class="if-inverter">
|
||||
<label>Inverter comm I/F: </label><select name='INVCOMM'>
|
||||
<label>Inverter interface: </label><select name='INVCOMM'>
|
||||
%INVCOMM%
|
||||
</select>
|
||||
</div>
|
||||
|
|
@ -1067,12 +1103,19 @@ const char* getCANInterfaceName(CAN_Interface interface) {
|
|||
<input type='checkbox' name='INVICNT' value='on' %INVICNT% />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-card">
|
||||
<h3>Optional components config (optional)</h3>
|
||||
<div style='display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; align-items: center;'>
|
||||
|
||||
<label>Charger: </label><select name='charger'>
|
||||
%CHGTYPE%
|
||||
</select>
|
||||
|
||||
<div class="if-charger">
|
||||
<label>Charger comm I/F: </label><select name='CHGCOMM'>
|
||||
<label>Charger interface: </label><select name='CHGCOMM'>
|
||||
%CHGCOMM%
|
||||
</select>
|
||||
</div>
|
||||
|
|
@ -1082,11 +1125,21 @@ const char* getCANInterfaceName(CAN_Interface interface) {
|
|||
</select>
|
||||
|
||||
<div class="if-shunt">
|
||||
<label>Shunt comm I/F: </label><select name='SHUNTCOMM'>
|
||||
<label>Shunt interface: </label><select name='SHUNTCOMM'>
|
||||
%SHUNTCOMM%
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-card">
|
||||
<h3>Hardware config</h3>
|
||||
<div style='display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; align-items: center;'>
|
||||
|
||||
<label>Use CanFD as classic CAN: </label>
|
||||
<input type='checkbox' name='CANFDASCAN' value='on' %CANFDASCAN% />
|
||||
|
||||
<label>CAN addon crystal (Mhz): </label>
|
||||
<input name='CANFREQ' type='text' value="%CANFREQ%" pattern="^[0-9]+$" />
|
||||
|
||||
|
|
@ -1097,17 +1150,7 @@ const char* getCANInterfaceName(CAN_Interface interface) {
|
|||
%EQSTOP%
|
||||
</select>
|
||||
|
||||
<label>Use CanFD as classic CAN: </label>
|
||||
<input type='checkbox' name='CANFDASCAN' value='on' %CANFDASCAN% />
|
||||
|
||||
<label>Double battery: </label>
|
||||
<input type='checkbox' name='DBLBTR' value='on' %DBLBTR% />
|
||||
|
||||
<div class="if-dblbtr">
|
||||
<label>Battery 2 comm I/F: </label>
|
||||
<select name='BATT2COMM'>
|
||||
%BATT2COMM%
|
||||
</select>
|
||||
<label>Contactor control via GPIO double battery: </label>
|
||||
<input type='checkbox' name='CNTCTRLDBL' value='on' %CNTCTRLDBL% />
|
||||
</div>
|
||||
|
|
@ -1149,6 +1192,17 @@ const char* getCANInterfaceName(CAN_Interface interface) {
|
|||
<input type='checkbox' name='NOINVDISC' value='on' %NOINVDISC% />
|
||||
</div>
|
||||
|
||||
<label for='LEDMODE'>Status LED pattern: </label><select name='LEDMODE' id='LEDMODE'>
|
||||
%LEDMODE%
|
||||
</select>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-card">
|
||||
<h3>Connectivity settings</h3>
|
||||
<div style='display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; align-items: center;'>
|
||||
|
||||
<label>Broadcast Wifi access point: </label>
|
||||
<input type='checkbox' name='WIFIAPENABLED' value='on' %WIFIAPENABLED% />
|
||||
|
||||
|
|
@ -1191,28 +1245,6 @@ const char* getCANInterfaceName(CAN_Interface interface) {
|
|||
<div></div>
|
||||
</div>
|
||||
|
||||
<label>Enable performance profiling: </label>
|
||||
<input type='checkbox' name='PERFPROFILE' value='on' %PERFPROFILE% />
|
||||
|
||||
<label>Enable CAN logging via USB serial: </label>
|
||||
<input type='checkbox' name='CANLOGUSB' value='on' %CANLOGUSB% />
|
||||
|
||||
<label>Enable logging via USB serial: </label>
|
||||
<input type='checkbox' name='USBENABLED' value='on' %USBENABLED% />
|
||||
|
||||
<label>Enable logging via Webserver: </label>
|
||||
<input type='checkbox' name='WEBENABLED' value='on' %WEBENABLED% />
|
||||
|
||||
<label>Enable CAN logging via SD card: </label>
|
||||
<input type='checkbox' name='CANLOGSD' value='on' %CANLOGSD% />
|
||||
|
||||
<label>Enable logging via SD card: </label>
|
||||
<input type='checkbox' name='SDLOGENABLED' value='on' %SDLOGENABLED% />
|
||||
|
||||
<label for='LEDMODE'>Status LED pattern: </label><select name='LEDMODE' id='LEDMODE'>
|
||||
%LEDMODE%
|
||||
</select>
|
||||
|
||||
<label>Enable MQTT: </label>
|
||||
<input type='checkbox' name='MQTTENABLED' value='on' %MQTTENABLED% />
|
||||
|
||||
|
|
@ -1240,6 +1272,34 @@ const char* getCANInterfaceName(CAN_Interface interface) {
|
|||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="settings-card">
|
||||
<h3>Debug options</h3>
|
||||
<div style='display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; align-items: center;'>
|
||||
|
||||
<label>Enable performance profiling on main page: </label>
|
||||
<input type='checkbox' name='PERFPROFILE' value='on' %PERFPROFILE% />
|
||||
|
||||
<label>Enable CAN message logging via USB serial: </label>
|
||||
<input type='checkbox' name='CANLOGUSB' value='on' %CANLOGUSB% />
|
||||
|
||||
<label>Enable general logging via USB serial: </label>
|
||||
<input type='checkbox' name='USBENABLED' value='on' %USBENABLED% />
|
||||
|
||||
<label>Enable general logging via Webserver: </label>
|
||||
<input type='checkbox' name='WEBENABLED' value='on' %WEBENABLED% />
|
||||
|
||||
<label>Enable CAN message logging via SD card: </label>
|
||||
<input type='checkbox' name='CANLOGSD' value='on' %CANLOGSD% />
|
||||
|
||||
<label>Enable general logging via SD card: </label>
|
||||
<input type='checkbox' name='SDLOGENABLED' value='on' %SDLOGENABLED% />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style='grid-column: span 2; text-align: center; padding-top: 10px;'><button type='submit'>Save</button></div>
|
||||
|
||||
<div style='grid-column: span 2; text-align: center; padding-top: 10px;' class="%SAVEDCLASS%">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue