mirror of
https://github.com/Laxilef/OTGateway.git
synced 2025-12-11 10:44:29 +05:00
refactor: reworked layout and styles of the portal
This commit is contained in:
Yurii
190
data/index.html
190
data/index.html
@@ -117,101 +117,104 @@
|
|||||||
</article>
|
</article>
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
<div>
|
<div class="vars-busy" aria-busy="true"></div>
|
||||||
|
<div class="vars-table hidden">
|
||||||
<hgroup>
|
<hgroup>
|
||||||
<h2>States and sensors</h2>
|
<h2>Info</h2>
|
||||||
<p>More information and settings can be found in your home assistant after setting up network and MQTT</p>
|
<p>More information and settings can be found in your Home Assistant after setting up network and MQTT</p>
|
||||||
</hgroup>
|
</hgroup>
|
||||||
|
|
||||||
<div class="ot-busy" aria-busy="true"></div>
|
<details>
|
||||||
<table class="ot-table hidden">
|
<summary role="button" class="secondary">States and sensors</summary>
|
||||||
<tbody>
|
<table>
|
||||||
<tr>
|
<tbody>
|
||||||
<th scope="row">OpenTherm connected:</th>
|
<tr>
|
||||||
<td><input type="radio" class="ot-connected" aria-invalid="false" checked disabled /></td>
|
<th scope="row">OpenTherm connected:</th>
|
||||||
</tr>
|
<td><input type="radio" class="ot-connected" aria-invalid="false" checked disabled /></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">MQTT connected:</th>
|
<tr>
|
||||||
<td><input type="radio" class="mqtt-connected" aria-invalid="false" checked disabled /></td>
|
<th scope="row">MQTT connected:</th>
|
||||||
</tr>
|
<td><input type="radio" class="mqtt-connected" aria-invalid="false" checked disabled /></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">Emergency:</th>
|
<tr>
|
||||||
<td><input type="radio" class="ot-emergency" aria-invalid="false" checked disabled /></td>
|
<th scope="row">Emergency:</th>
|
||||||
</tr>
|
<td><input type="radio" class="ot-emergency" aria-invalid="false" checked disabled /></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">Heating:</th>
|
<tr>
|
||||||
<td><input type="radio" class="ot-heating" aria-invalid="false" checked disabled /></td>
|
<th scope="row">Heating:</th>
|
||||||
</tr>
|
<td><input type="radio" class="ot-heating" aria-invalid="false" checked disabled /></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">DHW:</th>
|
<tr>
|
||||||
<td><input type="radio" class="ot-dhw" aria-invalid="false" checked disabled /></td>
|
<th scope="row">DHW:</th>
|
||||||
</tr>
|
<td><input type="radio" class="ot-dhw" aria-invalid="false" checked disabled /></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">Flame:</th>
|
<tr>
|
||||||
<td><input type="radio" class="ot-flame" aria-invalid="false" checked disabled /></td>
|
<th scope="row">Flame:</th>
|
||||||
</tr>
|
<td><input type="radio" class="ot-flame" aria-invalid="false" checked disabled /></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">Fault:</th>
|
<tr>
|
||||||
<td><input type="radio" class="ot-fault" aria-invalid="false" checked disabled /></td>
|
<th scope="row">Fault:</th>
|
||||||
</tr>
|
<td><input type="radio" class="ot-fault" aria-invalid="false" checked disabled /></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">Diagnostic:</th>
|
<tr>
|
||||||
<td><input type="radio" class="ot-diagnostic" aria-invalid="false" checked disabled /></td>
|
<th scope="row">Diagnostic:</th>
|
||||||
</tr>
|
<td><input type="radio" class="ot-diagnostic" aria-invalid="false" checked disabled /></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">External pump:</th>
|
<tr>
|
||||||
<td><input type="radio" class="ot-external-pump" aria-invalid="false" checked disabled /></td>
|
<th scope="row">External pump:</th>
|
||||||
</tr>
|
<td><input type="radio" class="ot-external-pump" aria-invalid="false" checked disabled /></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">Modulation:</th>
|
<tr>
|
||||||
<td><b class="ot-modulation"></b> %</td>
|
<th scope="row">Modulation:</th>
|
||||||
</tr>
|
<td><b class="ot-modulation"></b> %</td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">Pressure:</th>
|
<tr>
|
||||||
<td><b class="ot-pressure"></b> <span class="pressure-unit"></span></td>
|
<th scope="row">Pressure:</th>
|
||||||
</tr>
|
<td><b class="ot-pressure"></b> <span class="pressure-unit"></span></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">DHW flow rate:</th>
|
<tr>
|
||||||
<td><b class="ot-dhw-flow-rate"></b> <span class="volume-unit"></span>/min</td>
|
<th scope="row">DHW flow rate:</th>
|
||||||
</tr>
|
<td><b class="ot-dhw-flow-rate"></b> <span class="volume-unit"></span>/min</td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">Fault code:</th>
|
<tr>
|
||||||
<td><b class="ot-fault-code"></b></td>
|
<th scope="row">Fault code:</th>
|
||||||
</tr>
|
<td><b class="ot-fault-code"></b></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">Indoor temp:</th>
|
<tr>
|
||||||
<td><b class="indoor-temp"></b> <span class="temp-unit"></span></td>
|
<th scope="row">Indoor temp:</th>
|
||||||
</tr>
|
<td><b class="indoor-temp"></b> <span class="temp-unit"></span></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">Outdoor temp:</th>
|
<tr>
|
||||||
<td><b class="outdoor-temp"></b> <span class="temp-unit"></span></td>
|
<th scope="row">Outdoor temp:</th>
|
||||||
</tr>
|
<td><b class="outdoor-temp"></b> <span class="temp-unit"></span></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">Heating temp:</th>
|
<tr>
|
||||||
<td><b class="heating-temp"></b> <span class="temp-unit"></span></td>
|
<th scope="row">Heating temp:</th>
|
||||||
</tr>
|
<td><b class="heating-temp"></b> <span class="temp-unit"></span></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">Heating setpoint temp:</th>
|
<tr>
|
||||||
<td><b class="heating-setpoint-temp"></b> <span class="temp-unit"></span></td>
|
<th scope="row">Heating setpoint temp:</th>
|
||||||
</tr>
|
<td><b class="heating-setpoint-temp"></b> <span class="temp-unit"></span></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">Heating return temp:</th>
|
<tr>
|
||||||
<td><b class="heating-return-temp"></b> <span class="temp-unit"></span></td>
|
<th scope="row">Heating return temp:</th>
|
||||||
</tr>
|
<td><b class="heating-return-temp"></b> <span class="temp-unit"></span></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">DHW temp:</th>
|
<tr>
|
||||||
<td><b class="dhw-temp"></b> <span class="temp-unit"></span></td>
|
<th scope="row">DHW temp:</th>
|
||||||
</tr>
|
<td><b class="dhw-temp"></b> <span class="temp-unit"></span></td>
|
||||||
<tr>
|
</tr>
|
||||||
<th scope="row">Exhaust temp:</th>
|
<tr>
|
||||||
<td><b class="exhaust-temp"></b> <span class="temp-unit"></span></td>
|
<th scope="row">Exhaust temp:</th>
|
||||||
</tr>
|
<td><b class="exhaust-temp"></b> <span class="temp-unit"></span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</details>
|
||||||
|
|
||||||
<!-- Diag -->
|
<details>
|
||||||
<tr>
|
<summary role="button" class="secondary">OpenTherm diagnostic</summary>
|
||||||
<th scope="row">Slave parameters:</th>
|
<pre><b>Vendor:</b> <span class="slave-vendor"></span>
|
||||||
<td>
|
|
||||||
<pre><b>Vendor:</b> <span class="slave-vendor"></span>
|
|
||||||
<b>Member ID:</b> <span class="slave-member-id"></span>
|
<b>Member ID:</b> <span class="slave-member-id"></span>
|
||||||
<b>Flags:</b> <span class="slave-flags"></span>
|
<b>Flags:</b> <span class="slave-flags"></span>
|
||||||
<b>Type:</b> <span class="slave-type"></span>
|
<b>Type:</b> <span class="slave-type"></span>
|
||||||
@@ -219,10 +222,7 @@
|
|||||||
<b>OT version:</b> <span class="slave-ot-version"></span>
|
<b>OT version:</b> <span class="slave-ot-version"></span>
|
||||||
<b>Heating limits:</b> <span class="heating-min-temp"></span>...<span class="heating-max-temp"></span> <span class="temp-unit"></span>
|
<b>Heating limits:</b> <span class="heating-min-temp"></span>...<span class="heating-max-temp"></span> <span class="temp-unit"></span>
|
||||||
<b>DHW limits:</b> <span class="dhw-min-temp"></span>...<span class="dhw-max-temp"></span> <span class="temp-unit"></span></pre>
|
<b>DHW limits:</b> <span class="dhw-min-temp"></span>...<span class="dhw-max-temp"></span> <span class="temp-unit"></span></pre>
|
||||||
</td>
|
</details>
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -23,331 +23,310 @@
|
|||||||
|
|
||||||
<main class="container">
|
<main class="container">
|
||||||
<article>
|
<article>
|
||||||
<div>
|
<hgroup>
|
||||||
<hgroup>
|
<h2>Settings</h2>
|
||||||
<h2>Portal settings</h2>
|
<p></p>
|
||||||
<p></p>
|
</hgroup>
|
||||||
</hgroup>
|
|
||||||
|
|
||||||
<div id="portal-settings-busy" aria-busy="true"></div>
|
<details>
|
||||||
<form action="/api/settings" id="portal-settings" class="hidden">
|
<summary role="button" class="secondary">Portal settings</summary>
|
||||||
<div class="grid">
|
<div>
|
||||||
<label for="portal-login">
|
<div id="portal-settings-busy" aria-busy="true"></div>
|
||||||
Login
|
<form action="/api/settings" id="portal-settings" class="hidden">
|
||||||
<input type="text" class="portal-login" name="portal[login]" maxlength="12" required>
|
<div class="grid">
|
||||||
|
<label for="portal-login">
|
||||||
|
Login
|
||||||
|
<input type="text" class="portal-login" name="portal[login]" maxlength="12" required>
|
||||||
|
</label>
|
||||||
|
<label for="portal-password">
|
||||||
|
Password
|
||||||
|
<input type="password" class="portal-password" name="portal[password]" maxlength="32" required>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label for="portal-use-auth">
|
||||||
|
<input type="checkbox" class="portal-use-auth" name="portal[useAuth]" value="true">
|
||||||
|
Use auth
|
||||||
</label>
|
</label>
|
||||||
<label for="portal-password">
|
<br>
|
||||||
Password
|
|
||||||
<input type="password" class="portal-password" name="portal[password]" maxlength="32" required>
|
<button type="submit">Save</button>
|
||||||
</label>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
</details>
|
||||||
<label for="portal-use-auth">
|
|
||||||
<input type="checkbox" class="portal-use-auth" name="portal[useAuth]" value="true">
|
|
||||||
Use auth
|
|
||||||
</label>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<button type="submit">Save</button>
|
<details>
|
||||||
</form>
|
<summary role="button" class="secondary">System settings</summary>
|
||||||
</div>
|
<div>
|
||||||
</article>
|
<div id="system-settings-busy" aria-busy="true"></div>
|
||||||
|
<form action="/api/settings" id="system-settings" class="hidden">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Unit system</legend>
|
||||||
|
<label>
|
||||||
|
<input type="radio" class="system-unit-system" name="system[unitSystem]" value="0" />
|
||||||
|
Metric (celsius)
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="radio" class="system-unit-system" name="system[unitSystem]" value="1" />
|
||||||
|
Imperial (fahrenheit)
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<label for="system-debug">
|
||||||
|
<input type="checkbox" class="system-debug" name="system[debug]" value="true">
|
||||||
|
Debug mode
|
||||||
|
</label>
|
||||||
|
<label for="system-use-serial">
|
||||||
|
<input type="checkbox" class="system-use-serial" name="system[useSerial]" value="true">
|
||||||
|
Enable serial port
|
||||||
|
</label>
|
||||||
|
<label for="system-use-telnet">
|
||||||
|
<input type="checkbox" class="system-use-telnet" name="system[useTelnet]" value="true">
|
||||||
|
Enable telnet
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<mark>After changing this settings, the ESP must be restarted for the changes to take effect.</mark>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<button type="submit">Save</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
<article>
|
<details>
|
||||||
<div>
|
<summary role="button" class="secondary">OpenTherm settings</summary>
|
||||||
<hgroup>
|
<div>
|
||||||
<h2>OpenTherm settings</h2>
|
<div id="opentherm-settings-busy" aria-busy="true"></div>
|
||||||
<p></p>
|
<form action="/api/settings" id="opentherm-settings" class="hidden">
|
||||||
</hgroup>
|
<fieldset>
|
||||||
|
<legend>Unit system</legend>
|
||||||
|
<label>
|
||||||
|
<input type="radio" class="opentherm-unit-system" name="opentherm[unitSystem]" value="0" />
|
||||||
|
Metric (celsius)
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="radio" class="opentherm-unit-system" name="opentherm[unitSystem]" value="1" />
|
||||||
|
Imperial (fahrenheit)
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
<label for="opentherm-in-gpio">
|
||||||
|
In GPIO
|
||||||
|
<input type="number" inputmode="numeric" class="opentherm-in-gpio" name="opentherm[inGpio]" min="0" max="254" step="1">
|
||||||
|
</label>
|
||||||
|
<label for="opentherm-in-gpio">
|
||||||
|
Out GPIO
|
||||||
|
<input type="number" inputmode="numeric" class="opentherm-out-gpio" name="opentherm[outGpio]" min="0" max="254" step="1">
|
||||||
|
</label>
|
||||||
|
<label for="opentherm-member-id-code">
|
||||||
|
Master MemberID code
|
||||||
|
<input type="number" inputmode="numeric" class="opentherm-member-id-code" name="opentherm[memberIdCode]" min="0" max="65535" step="1" required>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Options</legend>
|
||||||
|
<label for="opentherm-dhw-present">
|
||||||
|
<input type="checkbox" class="opentherm-dhw-present" name="opentherm[dhwPresent]" value="true">
|
||||||
|
DHW present
|
||||||
|
</label>
|
||||||
|
<label for="opentherm-sw-mode">
|
||||||
|
<input type="checkbox" class="opentherm-sw-mode" name="opentherm[summerWinterMode]" value="true">
|
||||||
|
Summer/winter mode
|
||||||
|
</label>
|
||||||
|
<label for="opentherm-heating-ch2-enabled">
|
||||||
|
<input type="checkbox" class="opentherm-heating-ch2-enabled" name="opentherm[heatingCh2Enabled]" value="true">
|
||||||
|
Heating CH2 always enabled
|
||||||
|
</label>
|
||||||
|
<label for="opentherm-heating-ch1-to-ch2">
|
||||||
|
<input type="checkbox" class="opentherm-heating-ch1-to-ch2" name="opentherm[heatingCh1ToCh2]" value="true">
|
||||||
|
Duplicate heating CH1 to CH2
|
||||||
|
</label>
|
||||||
|
<label for="opentherm-dhw-to-ch2">
|
||||||
|
<input type="checkbox" class="opentherm-dhw-to-ch2" name="opentherm[dhwToCh2]" value="true">
|
||||||
|
Duplicate DHW to CH2
|
||||||
|
</label>
|
||||||
|
<label for="opentherm-dhw-blocking">
|
||||||
|
<input type="checkbox" class="opentherm-dhw-blocking" name="opentherm[dhwBlocking]" value="true">
|
||||||
|
DHW blocking
|
||||||
|
</label>
|
||||||
|
<label for="opentherm-sync-modulation-with-heating">
|
||||||
|
<input type="checkbox" class="opentherm-sync-modulation-with-heating" name="opentherm[modulationSyncWithHeating]" value="true">
|
||||||
|
Sync modulation with heating
|
||||||
|
</label>
|
||||||
|
<label for="opentherm-get-min-max-temp">
|
||||||
|
<input type="checkbox" class="opentherm-get-min-max-temp" name="opentherm[getMinMaxTemp]" value="true">
|
||||||
|
Get min/max temp from boiler
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<button type="submit">Save</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
<div id="opentherm-settings-busy" aria-busy="true"></div>
|
<details>
|
||||||
<form action="/api/settings" id="opentherm-settings" class="hidden">
|
<summary role="button" class="secondary">MQTT settings</summary>
|
||||||
<fieldset>
|
<div>
|
||||||
<legend>Unit system</legend>
|
<div id="mqtt-settings-busy" aria-busy="true"></div>
|
||||||
<label>
|
<form action="/api/settings" id="mqtt-settings" class="hidden">
|
||||||
<input type="radio" class="opentherm-unit-system" name="opentherm[unitSystem]" value="0" />
|
<div class="grid">
|
||||||
Metric (celsius)
|
<label for="mqtt-server">
|
||||||
</label>
|
Server
|
||||||
<label>
|
<input type="text" class="mqtt-server" name="mqtt[server]" maxlength="80" required>
|
||||||
<input type="radio" class="opentherm-unit-system" name="opentherm[unitSystem]" value="1" />
|
</label>
|
||||||
Imperial (fahrenheit)
|
<label for="mqtt-port">
|
||||||
</label>
|
Port
|
||||||
</fieldset>
|
<input type="number" inputmode="numeric" class="mqtt-port" name="mqtt[port]" min="1" max="65535" step="1" required>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
<label for="mqtt-user">
|
||||||
|
User
|
||||||
|
<input type="text" class="mqtt-user" name="mqtt[user]" maxlength="32" required>
|
||||||
|
</label>
|
||||||
|
<label for="mqtt-password">
|
||||||
|
Password
|
||||||
|
<input type="password" class="mqtt-password" name="mqtt[password]" maxlength="32">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid">
|
||||||
|
<label for="mqtt-prefix">
|
||||||
|
Prefix
|
||||||
|
<input type="text" class="mqtt-prefix" name="mqtt[prefix]" maxlength="32" required>
|
||||||
|
</label>
|
||||||
|
<label for="mqtt-interval">
|
||||||
|
Publish interval <small>(sec)</small>
|
||||||
|
<input type="number" inputmode="numeric" class="mqtt-interval" name="mqtt[interval]" min="3" max="60" step="1" required>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit">Save</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
<div class="grid">
|
<details>
|
||||||
<label for="opentherm-in-gpio">
|
<summary role="button" class="secondary">Outdoor sensor settings</summary>
|
||||||
In GPIO
|
<div>
|
||||||
<input type="number" inputmode="numeric" class="opentherm-in-gpio" name="opentherm[inGpio]" min="0" max="254" step="1">
|
<div id="outdoor-sensor-settings-busy" aria-busy="true"></div>
|
||||||
|
<form action="/api/settings" id="outdoor-sensor-settings" class="hidden">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Source type</legend>
|
||||||
|
<label>
|
||||||
|
<input type="radio" class="outdoor-sensor-type" name="sensors[outdoor][type]" value="0" />
|
||||||
|
From boiler via OpenTherm
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="radio" class="outdoor-sensor-type" name="sensors[outdoor][type]" value="1" />
|
||||||
|
Manual via MQTT/API
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="radio" class="outdoor-sensor-type" name="sensors[outdoor][type]" value="2" />
|
||||||
|
External (DS18B20)
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<label for="outdoor-sensor-gpio">
|
||||||
|
GPIO
|
||||||
|
<input type="number" inputmode="numeric" class="outdoor-sensor-gpio" name="sensors[outdoor][gpio]" min="0" max="254" step="1">
|
||||||
</label>
|
</label>
|
||||||
<label for="opentherm-in-gpio">
|
<label for="outdoor-sensor-offset">
|
||||||
Out GPIO
|
|
||||||
<input type="number" inputmode="numeric" class="opentherm-out-gpio" name="opentherm[outGpio]" min="0" max="254" step="1">
|
|
||||||
</label>
|
|
||||||
<label for="opentherm-member-id-code">
|
|
||||||
Master MemberID code
|
|
||||||
<input type="number" inputmode="numeric" class="opentherm-member-id-code" name="opentherm[memberIdCode]" min="0" max="65535" step="1" required>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<legend>Options</legend>
|
|
||||||
<label for="opentherm-dhw-present">
|
|
||||||
<input type="checkbox" class="opentherm-dhw-present" name="opentherm[dhwPresent]" value="true">
|
|
||||||
DHW present
|
|
||||||
</label>
|
|
||||||
<label for="opentherm-sw-mode">
|
|
||||||
<input type="checkbox" class="opentherm-sw-mode" name="opentherm[summerWinterMode]" value="true">
|
|
||||||
Summer/winter mode
|
|
||||||
</label>
|
|
||||||
<label for="opentherm-heating-ch2-enabled">
|
|
||||||
<input type="checkbox" class="opentherm-heating-ch2-enabled" name="opentherm[heatingCh2Enabled]" value="true">
|
|
||||||
Heating CH2 always enabled
|
|
||||||
</label>
|
|
||||||
<label for="opentherm-heating-ch1-to-ch2">
|
|
||||||
<input type="checkbox" class="opentherm-heating-ch1-to-ch2" name="opentherm[heatingCh1ToCh2]" value="true">
|
|
||||||
Duplicate heating CH1 to CH2
|
|
||||||
</label>
|
|
||||||
<label for="opentherm-dhw-to-ch2">
|
|
||||||
<input type="checkbox" class="opentherm-dhw-to-ch2" name="opentherm[dhwToCh2]" value="true">
|
|
||||||
Duplicate DHW to CH2
|
|
||||||
</label>
|
|
||||||
<label for="opentherm-dhw-blocking">
|
|
||||||
<input type="checkbox" class="opentherm-dhw-blocking" name="opentherm[dhwBlocking]" value="true">
|
|
||||||
DHW blocking
|
|
||||||
</label>
|
|
||||||
<label for="opentherm-sync-modulation-with-heating">
|
|
||||||
<input type="checkbox" class="opentherm-sync-modulation-with-heating" name="opentherm[modulationSyncWithHeating]" value="true">
|
|
||||||
Sync modulation with heating
|
|
||||||
</label>
|
|
||||||
<label for="opentherm-get-min-max-temp">
|
|
||||||
<input type="checkbox" class="opentherm-get-min-max-temp" name="opentherm[getMinMaxTemp]" value="true">
|
|
||||||
Get min/max temp from boiler
|
|
||||||
</label>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<button type="submit">Save</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article>
|
|
||||||
<div>
|
|
||||||
<hgroup>
|
|
||||||
<h2>MQTT settings</h2>
|
|
||||||
<p></p>
|
|
||||||
</hgroup>
|
|
||||||
|
|
||||||
<div id="mqtt-settings-busy" aria-busy="true"></div>
|
|
||||||
<form action="/api/settings" id="mqtt-settings" class="hidden">
|
|
||||||
<div class="grid">
|
|
||||||
<label for="mqtt-server">
|
|
||||||
Server
|
|
||||||
<input type="text" class="mqtt-server" name="mqtt[server]" maxlength="80" required>
|
|
||||||
</label>
|
|
||||||
<label for="mqtt-port">
|
|
||||||
Port
|
|
||||||
<input type="number" inputmode="numeric" class="mqtt-port" name="mqtt[port]" min="1" max="65535" step="1" required>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid">
|
|
||||||
<label for="mqtt-user">
|
|
||||||
User
|
|
||||||
<input type="text" class="mqtt-user" name="mqtt[user]" maxlength="32" required>
|
|
||||||
</label>
|
|
||||||
<label for="mqtt-password">
|
|
||||||
Password
|
|
||||||
<input type="password" class="mqtt-password" name="mqtt[password]" maxlength="32">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid">
|
|
||||||
<label for="mqtt-prefix">
|
|
||||||
Prefix
|
|
||||||
<input type="text" class="mqtt-prefix" name="mqtt[prefix]" maxlength="32" required>
|
|
||||||
</label>
|
|
||||||
<label for="mqtt-interval">
|
|
||||||
Publish interval <small>(sec)</small>
|
|
||||||
<input type="number" inputmode="numeric" class="mqtt-interval" name="mqtt[interval]" min="3" max="60" step="1" required>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit">Save</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article>
|
|
||||||
<div>
|
|
||||||
<hgroup>
|
|
||||||
<h2>Outdoor sensor settings</h2>
|
|
||||||
<p></p>
|
|
||||||
</hgroup>
|
|
||||||
|
|
||||||
<div id="outdoor-sensor-settings-busy" aria-busy="true"></div>
|
|
||||||
<form action="/api/settings" id="outdoor-sensor-settings" class="hidden">
|
|
||||||
<fieldset>
|
|
||||||
<legend>Source type</legend>
|
|
||||||
<label>
|
|
||||||
<input type="radio" class="outdoor-sensor-type" name="sensors[outdoor][type]" value="0" />
|
|
||||||
From boiler via OpenTherm
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" class="outdoor-sensor-type" name="sensors[outdoor][type]" value="1" />
|
|
||||||
Manual via MQTT/API
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" class="outdoor-sensor-type" name="sensors[outdoor][type]" value="2" />
|
|
||||||
External (DS18B20)
|
|
||||||
</label>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<label for="outdoor-sensor-gpio">
|
|
||||||
GPIO
|
|
||||||
<input type="number" inputmode="numeric" class="outdoor-sensor-gpio" name="sensors[outdoor][gpio]" min="0" max="254" step="1">
|
|
||||||
</label>
|
|
||||||
<label for="outdoor-sensor-offset">
|
|
||||||
Temp offset (calibration)
|
|
||||||
<input type="number" inputmode="numeric" class="outdoor-sensor-offset" name="sensors[outdoor][offset]" min="-20" max="20" step="0.01" required>
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<button type="submit">Save</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article>
|
|
||||||
<div>
|
|
||||||
<hgroup>
|
|
||||||
<h2>Indoor sensor settings</h2>
|
|
||||||
<p></p>
|
|
||||||
</hgroup>
|
|
||||||
|
|
||||||
<div id="indoor-sensor-settings-busy" aria-busy="true"></div>
|
|
||||||
<form action="/api/settings" id="indoor-sensor-settings" class="hidden">
|
|
||||||
<fieldset>
|
|
||||||
<legend>Source type</legend>
|
|
||||||
<label>
|
|
||||||
<input type="radio" class="indoor-sensor-type" name="sensors[indoor][type]" value="1" />
|
|
||||||
Manual via MQTT/API
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" class="indoor-sensor-type" name="sensors[indoor][type]" value="2" />
|
|
||||||
External (DS18B20)
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" class="indoor-sensor-type" name="sensors[indoor][type]" value="3" />
|
|
||||||
BLE device <i>(ONLY for some ESP32 which support BLE)</i>
|
|
||||||
</label>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<label for="indoor-sensor-gpio">
|
|
||||||
GPIO
|
|
||||||
<input type="number" inputmode="numeric" class="indoor-sensor-gpio" name="sensors[indoor][gpio]" min="0" max="254" step="1">
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="grid">
|
|
||||||
<label for="indoor-sensor-offset">
|
|
||||||
Temp offset (calibration)
|
Temp offset (calibration)
|
||||||
<input type="number" inputmode="numeric" class="indoor-sensor-offset" name="sensors[indoor][offset]" min="-20" max="20" step="0.01" required>
|
<input type="number" inputmode="numeric" class="outdoor-sensor-offset" name="sensors[outdoor][offset]" min="-20" max="20" step="0.01" required>
|
||||||
</label>
|
</label>
|
||||||
<label for="indoor-sensor-ble-addresss">
|
|
||||||
BLE addresss
|
<button type="submit">Save</button>
|
||||||
<input type="text" class="indoor-sensor-ble-addresss" name="sensors[indoor][bleAddresss]" pattern="([A-Fa-f0-9]{2}:){5}[A-Fa-f0-9]{2}">
|
</form>
|
||||||
<small>ONLY for some ESP32 which support BLE</small>
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details>
|
||||||
|
<summary role="button" class="secondary">Indoor sensor settings</summary>
|
||||||
|
<div>
|
||||||
|
<div id="indoor-sensor-settings-busy" aria-busy="true"></div>
|
||||||
|
<form action="/api/settings" id="indoor-sensor-settings" class="hidden">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Source type</legend>
|
||||||
|
<label>
|
||||||
|
<input type="radio" class="indoor-sensor-type" name="sensors[indoor][type]" value="1" />
|
||||||
|
Manual via MQTT/API
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="radio" class="indoor-sensor-type" name="sensors[indoor][type]" value="2" />
|
||||||
|
External (DS18B20)
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="radio" class="indoor-sensor-type" name="sensors[indoor][type]" value="3" />
|
||||||
|
BLE device <i>(ONLY for some ESP32 which support BLE)</i>
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<label for="indoor-sensor-gpio">
|
||||||
|
GPIO
|
||||||
|
<input type="number" inputmode="numeric" class="indoor-sensor-gpio" name="sensors[indoor][gpio]" min="0" max="254" step="1">
|
||||||
</label>
|
</label>
|
||||||
</div>
|
|
||||||
|
<div class="grid">
|
||||||
|
<label for="indoor-sensor-offset">
|
||||||
|
Temp offset (calibration)
|
||||||
|
<input type="number" inputmode="numeric" class="indoor-sensor-offset" name="sensors[indoor][offset]" min="-20" max="20" step="0.01" required>
|
||||||
|
</label>
|
||||||
|
<label for="indoor-sensor-ble-addresss">
|
||||||
|
BLE addresss
|
||||||
|
<input type="text" class="indoor-sensor-ble-addresss" name="sensors[indoor][bleAddresss]" pattern="([A-Fa-f0-9]{2}:){5}[A-Fa-f0-9]{2}">
|
||||||
|
<small>ONLY for some ESP32 which support BLE</small>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit">Save</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
<button type="submit">Save</button>
|
<details>
|
||||||
</form>
|
<summary role="button" class="secondary">External pump settings</summary>
|
||||||
</div>
|
<div>
|
||||||
</article>
|
<div id="extpump-settings-busy" aria-busy="true"></div>
|
||||||
|
<form action="/api/settings" id="extpump-settings" class="hidden">
|
||||||
<article>
|
<label for="extpump-use">
|
||||||
<div>
|
<input type="checkbox" class="extpump-use" name="externalPump[use]" value="true">
|
||||||
<hgroup>
|
Use external pump
|
||||||
<h2>External pump settings</h2>
|
|
||||||
<p></p>
|
|
||||||
</hgroup>
|
|
||||||
|
|
||||||
<div id="extpump-settings-busy" aria-busy="true"></div>
|
|
||||||
<form action="/api/settings" id="extpump-settings" class="hidden">
|
|
||||||
<label for="extpump-use">
|
|
||||||
<input type="checkbox" class="extpump-use" name="externalPump[use]" value="true">
|
|
||||||
Use external pump
|
|
||||||
</label>
|
|
||||||
<br>
|
|
||||||
|
|
||||||
<div class="grid">
|
|
||||||
<label for="extpump-gpio">
|
|
||||||
Relay GPIO
|
|
||||||
<input type="number" inputmode="numeric" class="extpump-gpio" name="externalPump[gpio]" min="0" max="254" step="1">
|
|
||||||
</label>
|
</label>
|
||||||
<label for="extpump-pc-time">
|
<br>
|
||||||
Post circulation time <small>(min)</small>
|
|
||||||
<input type="number" inputmode="numeric" class="extpump-pc-time" name="externalPump[postCirculationTime]" min="1" max="120" step="1" required>
|
<div class="grid">
|
||||||
</label>
|
<label for="extpump-gpio">
|
||||||
</div>
|
Relay GPIO
|
||||||
|
<input type="number" inputmode="numeric" class="extpump-gpio" name="externalPump[gpio]" min="0" max="254" step="1">
|
||||||
<div class="grid">
|
</label>
|
||||||
<label for="extpump-as-interval">
|
<label for="extpump-pc-time">
|
||||||
Anti stuck interval <small>(days)</small>
|
Post circulation time <small>(min)</small>
|
||||||
<input type="number" inputmode="numeric" class="extpump-as-interval" name="externalPump[antiStuckInterval]" min="1" max="366" step="1" required>
|
<input type="number" inputmode="numeric" class="extpump-pc-time" name="externalPump[postCirculationTime]" min="1" max="120" step="1" required>
|
||||||
</label>
|
</label>
|
||||||
<label for="extpump-as-time">
|
</div>
|
||||||
Anti stuck time <small>(min)</small>
|
|
||||||
<input type="number" inputmode="numeric" class="extpump-as-time" name="externalPump[antiStuckTime]" min="1" max="20" step="1" required>
|
<div class="grid">
|
||||||
</label>
|
<label for="extpump-as-interval">
|
||||||
</div>
|
Anti stuck interval <small>(days)</small>
|
||||||
|
<input type="number" inputmode="numeric" class="extpump-as-interval" name="externalPump[antiStuckInterval]" min="1" max="366" step="1" required>
|
||||||
<button type="submit">Save</button>
|
</label>
|
||||||
</form>
|
<label for="extpump-as-time">
|
||||||
</div>
|
Anti stuck time <small>(min)</small>
|
||||||
</article>
|
<input type="number" inputmode="numeric" class="extpump-as-time" name="externalPump[antiStuckTime]" min="1" max="20" step="1" required>
|
||||||
|
</label>
|
||||||
<article>
|
</div>
|
||||||
<div>
|
|
||||||
<hgroup>
|
<button type="submit">Save</button>
|
||||||
<h2>System settings</h2>
|
</form>
|
||||||
<p></p>
|
</div>
|
||||||
</hgroup>
|
</details>
|
||||||
|
|
||||||
<div id="system-settings-busy" aria-busy="true"></div>
|
|
||||||
<form action="/api/settings" id="system-settings" class="hidden">
|
|
||||||
<fieldset>
|
|
||||||
<legend>Unit system</legend>
|
|
||||||
<label>
|
|
||||||
<input type="radio" class="system-unit-system" name="system[unitSystem]" value="0" />
|
|
||||||
Metric (celsius)
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<input type="radio" class="system-unit-system" name="system[unitSystem]" value="1" />
|
|
||||||
Imperial (fahrenheit)
|
|
||||||
</label>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<label for="system-debug">
|
|
||||||
<input type="checkbox" class="system-debug" name="system[debug]" value="true">
|
|
||||||
Debug mode
|
|
||||||
</label>
|
|
||||||
<label for="system-use-serial">
|
|
||||||
<input type="checkbox" class="system-use-serial" name="system[useSerial]" value="true">
|
|
||||||
Enable serial port
|
|
||||||
</label>
|
|
||||||
<label for="system-use-telnet">
|
|
||||||
<input type="checkbox" class="system-use-telnet" name="system[useTelnet]" value="true">
|
|
||||||
Enable telnet
|
|
||||||
</label>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<fieldset>
|
|
||||||
<mark>After changing this settings, the ESP must be restarted for the changes to take effect.</mark>
|
|
||||||
</fieldset>
|
|
||||||
|
|
||||||
<button type="submit">Save</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
@@ -1,15 +1,41 @@
|
|||||||
:root {
|
@media (min-width: 576px) {
|
||||||
--pico-block-spacing-horizontal: calc(1rem * 2.25);
|
article {
|
||||||
--pico-block-spacing-vertical: calc(1rem * 2.25)
|
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 0.75);
|
||||||
|
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 0.75);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
article {
|
||||||
|
--pico-block-spacing-vertical: var(--pico-spacing);
|
||||||
|
--pico-block-spacing-horizontal: var(--pico-spacing);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 1024px) {
|
||||||
|
article {
|
||||||
|
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.25);
|
||||||
|
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.25);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1280px) {
|
@media (min-width: 1280px) {
|
||||||
|
article {
|
||||||
|
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.5);
|
||||||
|
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.5);
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1536px) {
|
@media (min-width: 1536px) {
|
||||||
|
article {
|
||||||
|
--pico-block-spacing-vertical: calc(var(--pico-spacing) * 1.75);
|
||||||
|
--pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.75);
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
}
|
}
|
||||||
@@ -82,4 +108,12 @@ tr.network:hover {
|
|||||||
|
|
||||||
nav li a:has(> div.logo) {
|
nav li a:has(> div.logo) {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
details > div {
|
||||||
|
padding: 0 var(--pico-form-element-spacing-horizontal);
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
@@ -593,7 +593,7 @@ async function loadVars() {
|
|||||||
setValue('.slave-version', result.parameters.slaveVersion);
|
setValue('.slave-version', result.parameters.slaveVersion);
|
||||||
setValue('.slave-ot-version', result.parameters.slaveOtVersion);
|
setValue('.slave-ot-version', result.parameters.slaveOtVersion);
|
||||||
|
|
||||||
setBusy('.ot-busy', '.ot-table', false);
|
setBusy('.vars-busy', '.vars-table', false);
|
||||||
|
|
||||||
setValue('.temp-unit', tempUnitStr);
|
setValue('.temp-unit', tempUnitStr);
|
||||||
setValue('.pressure-unit', pressureUnitStr);
|
setValue('.pressure-unit', pressureUnitStr);
|
||||||
|
|||||||
Reference in New Issue
Block a user