mirror of
https://github.com/UtilitechAS/amsreader-firmware.git
synced 2026-01-14 07:49:01 +00:00
139 lines
6.4 KiB
HTML
139 lines
6.4 KiB
HTML
<div class="bg-white rounded shadow p-1">
|
|
<div class="row">
|
|
<div class="col-md-3 col-6">
|
|
<div class="text-center">Up <span class="cs">{cs}</span></div>
|
|
</div>
|
|
<div class="col-md-3 col-6">
|
|
<div class="text-center">Temperature: <span class="temp">{temp}</span>°C</div>
|
|
</div>
|
|
<div class="col-md-3 col-6">
|
|
<div class="text-center">ESP volt: <span class="vcc">{vcc}</span>V</div>
|
|
</div>
|
|
<div class="col-md-3 col-6">
|
|
<div class="text-center">WiFi RSSI: <span class="rssi">{rssi}</span>dBm</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="row">
|
|
<div class="col-sm-6 mt-3">
|
|
<div class="bg-white rounded shadow p-3">
|
|
<div class="text-center">
|
|
<div id="P" class="SimpleMeter" style="display: inline;">
|
|
{P} W
|
|
</div>
|
|
<div id="im" class="GaugeMeter rounded"
|
|
style="display: none;"
|
|
data-size="180px"
|
|
data-text_size="0.15"
|
|
data-width="25"
|
|
data-style="Arch"
|
|
data-theme="Green-Gold-Red"
|
|
data-animationstep="0"
|
|
data-label="{ti}"
|
|
></div>
|
|
</div>
|
|
<div id="tPI-row" class="row" style="display: {da};">
|
|
<div class="col-12 text-right"><span class="tPI">{tPI}</span> kWh</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 mt-3" style="display: {de};">
|
|
<div class="bg-white rounded shadow p-3">
|
|
<div class="text-center">
|
|
<div id="P" class="SimpleMeter" style="display: inline;">
|
|
{PO} W
|
|
</div>
|
|
<div id="em" class="GaugeMeter rounded"
|
|
style="display: none;"
|
|
data-size="180px"
|
|
data-text_size="0.15"
|
|
data-width="25"
|
|
data-style="Arch"
|
|
data-theme="DarkGreen-LightGreen"
|
|
data-animationstep="0"
|
|
data-label="Export"
|
|
></div>
|
|
</div>
|
|
<div id="tPO-row" class="row" style="display: {da};">
|
|
<div class="col-12 text-right"><span class="tPO">{tPO}</span> kWh</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 mt-3" style="display: {dn};">
|
|
<div class="bg-white rounded shadow p-3" style="display: {da};">
|
|
<h5 class="text-center">Reactive</h5>
|
|
<div id="tQI-row" class="row">
|
|
<div class="col-4">Import</div>
|
|
<div class="col-8 text-right"><span class="tQI">{tQI}</span> kvarh</div>
|
|
<div class="col-4">Export</div>
|
|
<div class="col-8 text-right"><span class="tQO">{tQO}</span> kvarh</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 mt-3" style="display: {de};">
|
|
<div class="bg-white rounded shadow p-3" style="display: {da};">
|
|
<div id="tQO-row" class="row">
|
|
<div class="col-4 col-sm-2">Import</div>
|
|
<div class="col-8 col-sm-4 text-right"><span class="tQI">{tQI}</span> kvarh</div>
|
|
<div class="col-4 col-sm-2">Export</div>
|
|
<div class="col-8 col-sm-4 text-right"><span class="tQO">{tQO}</span> kvarh</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 mt-3">
|
|
<div class="bg-white rounded shadow p-3">
|
|
<div class="text-center">
|
|
<div id="vm" class="GaugeMeter rounded"
|
|
style="display: none;"
|
|
data-size="180px"
|
|
data-text_size="0.15"
|
|
data-width="25"
|
|
data-style="Arch"
|
|
data-theme="Voltage"
|
|
data-animationstep="0"
|
|
data-label="Volt"
|
|
></div>
|
|
</div>
|
|
<div id="U2-row" class="row" style="display: {3p};">
|
|
<div class="col-4"><span class="U1">{U1}</span>V</div>
|
|
<div class="col-4 text-center"><span class="U2">{U2}</span>V</div>
|
|
<div class="col-4 text-right"><span class="U3">{U3}</span>V</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 mb-3 mt-3">
|
|
<div class="bg-white rounded shadow p-3">
|
|
<div class="text-center">
|
|
<div id="am" class="GaugeMeter rounded"
|
|
style="display: none;"
|
|
data-size="180px"
|
|
data-text_size="0.15"
|
|
data-width="25"
|
|
data-style="Arch"
|
|
data-theme="Green-Red"
|
|
data-animationstep="0"
|
|
data-label="Ampere"
|
|
></div>
|
|
</div>
|
|
<div id="I2-row" class="row" style="display: {3p};">
|
|
<div class="col-4"><span class="I1">{I1}</span>A</div>
|
|
<div class="col-4 text-center"><span class="I2">{I2}</span>A</div>
|
|
<div class="col-4 text-right"><span class="I3">{I3}</span>A</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-sm-6 mb-3 d-none me me-1 me-2 me-3 me-4 me-5 me-6 me-7 me-8 me-9 me-10 me-11 me-12 me-13">
|
|
<div class="d-none badge badge-danger me me-1 me-2 me-5 me-6 me-7 me-8 me-9 me-12">MQTT communication error (<span id="ml">-</span>)</div>
|
|
<div class="d-none badge badge-danger me me-3">MQTT failed to connect</div>
|
|
<div class="d-none badge badge-danger me me-4">MQTT network timeout</div>
|
|
<div class="d-none badge badge-danger me me-10">MQTT connection denied</div>
|
|
<div class="d-none badge badge-danger me me-11">MQTT failed to subscribe</div>
|
|
<div class="d-none badge badge-danger me me-13">MQTT lost connection</div>
|
|
</div>
|
|
</div>
|