Files
EMS-ESP32/src/custom.htm
2019-10-02 19:20:55 +02:00

262 lines
12 KiB
HTML

<div id="customcontent">
<br>
<legend>Custom Settings</legend>
<h6 class="text-muted">Please refer to the Help for configuration options</h6>
<br>
<div class="row form-group">
<label class="col-xs-3">LED<i style="margin-left: 10px;"
class="glyphicon glyphicon-exclamation-sign text-danger" aria-hidden="true" data-toggle="popover"
data-trigger="hover" data-placement="right"
data-content="Please choose if you want to enable an LED to show status"></i></label>
<div class="col-xs-9">
<form>
<label class="radio-inline">
<input type="radio" value="1" name="led">Enabled</label>
<label class="radio-inline">
<input type="radio" value="0" name="led" checked>Disabled</label>
</form>
</div>
</div>
<div class="row form-group">
<label class="col-xs-3">LED Pin<i style="margin-left: 10px;"
class="glyphicon glyphicon-exclamation-sign text-danger" aria-hidden="true" data-toggle="popover"
data-trigger="hover" data-placement="right"
data-content="Select with GPIO pin the LED is on"></i></label>
<span class="col-xs-9 col-md-5">
<select class="form-control input-sm" id="led_gpio">
<option value="0">GPIO-0</option>
<option selected="selected" value="2">GPIO-2 (onboard LED)</option>
<option value="4">GPIO-4</option>
<option value="5">GPIO-5</option>
<option value="12">GPIO-12</option>
<option value="14">GPIO-14</option>
<option value="16">GPIO-16</option>
</select>
</span>
</div>
<div class="row form-group">
<label class="col-xs-3">Dallas Parasite<i style="margin-left: 10px;"
class="glyphicon glyphicon-exclamation-sign text-danger" aria-hidden="true" data-toggle="popover"
data-trigger="hover" data-placement="right"
data-content="Enable if Dallas sensors are powered via parasite"></i></label>
<div class="col-xs-9">
<form>
<label class="radio-inline">
<input type="radio" value="1" name="dallas_parasite">Enabled</label>
<label class="radio-inline">
<input type="radio" value="0" name="dallas_parasite" checked>Disabled</label>
</form>
</div>
</div>
<div class="row form-group">
<label class="col-xs-3">Dallas Pin<i style="margin-left: 10px;"
class="glyphicon glyphicon-exclamation-sign text-danger" aria-hidden="true" data-toggle="popover"
data-trigger="hover" data-placement="right"
data-content="Select GPIO pin to where the Dallas sensor is connected"></i></label>
<span class="col-xs-9 col-md-5">
<select class="form-control input-sm" id="dallas_gpio">
<option value="0">GPIO-0</option>
<option value="4">GPIO-4</option>
<option value="5">GPIO-5</option>
<option value="12">GPIO-12</option>
<option selected="selected" value="14">GPIO-14</option>
<option value="16">GPIO-16</option>
</select>
</span>
</div>
<div class="row form-group">
<label class="col-xs-3">Listen Mode<i style="margin-left: 10px;" class="glyphicon glyphicon-info-sign"
aria-hidden="true" data-toggle="popover" data-trigger="hover" data-placement="right"
data-content="Listen mode disables Tx. Used when debugging."></i></label>
<div class="col-xs-9">
<form>
<label class="radio-inline">
<input type="radio" value="1" name="listen_mode">Enabled</label>
<label class="radio-inline">
<input type="radio" value="0" name="listen_mode" checked>Disabled</label>
</form>
</div>
</div>
<div class="row form-group">
<label class="col-xs-3">Shower Timer<i style="margin-left: 10px;" class="glyphicon glyphicon-info-sign"
aria-hidden="true" data-toggle="popover" data-trigger="hover" data-placement="right"
data-content="Monitors and sends MQTT message on shower duration"></i></label>
<div class="col-xs-9">
<form>
<label class="radio-inline">
<input type="radio" value="1" name="shower_timer">Enabled</label>
<label class="radio-inline">
<input type="radio" value="0" name="shower_timer" checked>Disabled</label>
</form>
</div>
</div>
<div class="row form-group">
<label class="col-xs-3">Shower Alert<i style="margin-left: 10px;" class="glyphicon glyphicon-info-sign"
aria-hidden="true" data-toggle="popover" data-trigger="hover" data-placement="right"
data-content="Tells boiler to blast 3 shots of cold water after a specific duration has exceeded (7 mins)"></i></label>
<div class="col-xs-9">
<form>
<label class="radio-inline">
<input type="radio" value="1" name="shower_alert">Enabled</label>
<label class="radio-inline">
<input type="radio" value="0" name="shower_alert" checked>Disabled</label>
</form>
</div>
</div>
<div class="row form-group">
<label class="col-xs-3">Publish Time<i style="margin-left: 10px;" class="glyphicon glyphicon-info-sign"
aria-hidden="true" data-toggle="popover" data-trigger="hover" data-placement="right"
data-content="How often to send MQTT topics with stats (in seconds)"></i></label>
<span class="col-xs-9">
<input class="form-control input-sm" placeholder="120" value="" style="display:inline;max-width:185px"
id="publish_time" type="text">
</span>
<br>
</div>
<div class="row form-group">
<label class="col-xs-3">Tx mode<i style="margin-left: 10px;"
class="glyphicon glyphicon-exclamation-sign text-danger" aria-hidden="true" data-toggle="popover"
data-trigger="hover" data-placement="right"
data-content="Tx mode settings for sending data to the EMS bus"></i></label>
<span class="col-xs-9 col-md-5">
<select class="form-control input-sm" id="tx_mode">
<option selected="selected" value="1">1 (EMS generic)</option>
<option value="2">2 (EMS+)</option>
<option value="3">3 (Junkers Heatronic)</option>
</select>
</span>
</div>
<br>
<div class="row form-group">
<div class="col-xs-9 col-md-8">
<button onclick="savecustom()" class="btn btn-primary btn-sm pull-right">Save</button>
</div>
</div>
<h6 class="text-muted">Note: any setting marked with a <span
class="glyphicon glyphicon-exclamation-sign text-danger"></span> requires a system restart after saving.
</h6>
</div>
<div id="custom_statuscontent">
<br>
<div class="row text-left">
<div class="col-md-8 col-md-offset-2">
<h2>EMS Dashboard</h2>
<h6>Real-time values from the EMS-ESP device are shown here</h6>
</div>
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default table-responsive">
<table class="table table-hover table-striped table-condensed">
<caption>EMS Bus Status</caption>
<tr>
<td colspan="2">
<b>
<div id="msg" role="alert"></div>
</b>
</td>
</tr>
<tr>
<th id="devicesshow">Discovered Devices:</th>
<td>
<ul class="list-group">
<div id="devices"></div>
</ul>
</td>
</tr>
</table>
</div>
<div class="panel panel-success table-responsive" id="boiler_show">
<div class="panel-heading"><b>Boiler</b>:&nbsp;<span id="bm"></span></div>
<table class="table table-hover table-bordered table-condensed">
<tr>
<th>Hot Tap Water:</th>
<td id="b1"></td>
<th>Central Heating:</th>
<td id="b2"></td>
</tr>
<tr>
<th>Selected Flow Temperature:</th>
<td id="b3"></td>
<th>Current Flow Temperature:</th>
<td id="b4"></td>
</tr>
<tr>
<th>Boiler Temperature:</th>
<td id="b5"></td>
<th>Return Temperature:</th>
<td id="b6"></td>
</tr>
</table>
</div>
<div class="panel panel-info table-responsive" id="thermostat_show">
<div class="panel-heading"><b>Thermostat</b>:&nbsp;<span id="tm"></span></div>
<table class="table table-hover table-bordered table-condensed">
<tr>
<th>Setpoint Temperature:</th>
<td id="ts"></td>
<th>Current Temperature:</th>
<td id="tc"></td>
</tr>
<tr>
<th>Mode:</th>
<td colspan="3" id="tmode"></td>
</tr>
</table>
</div>
<div class="panel panel-warning table-responsive" id="sm_show">
<div class="panel-heading"><b>Solar Module</b>:&nbsp;<span id="sm"></span></div>
<table class="table table-hover table-bordered table-condensed">
<tr>
<th>Colector Temperature:</th>
<td id="sm1"></td>
<th>Bottom Temperature:</th>
<td id="sm2"></td>
</tr>
<tr>
<th>Pump Modulation:</th>
<td id="sm3"></td>
<th>Pump Active:</th>
<td id="sm4"></td>
</tr>
<tr>
<th>Energy Last Hour:</th>
<td id="sm5"></td>
<th>Energy Today:</th>
<td id="sm6"></td>
<th>Energy Total:</th>
<td id="sm7"></td>
</tr>
</table>
</div>
<div class="panel panel-success table-responsive" id="hp_show">
<div class="panel-heading"><b>Heat Pump</b>:&nbsp;<span id="hm"></span></div>
<table class="table table-hover table-bordered table-condensed">
<tr>
<th>Pump Modulation:</th>
<td id="hp1"></td>
<th>Pump Speed:</th>
<td id="hp2"></td>
</tr>
</table>
</div>
</div>
</div>
<div class="row form-group" style="text-align: center;">
<button onclick="refreshEMS()" class="btn btn-info">Refresh</button>
</div>
</div>