UtilitechAS.amsreader-firmware/web/index.html

<div class="my-3 p-3 bg-white rounded shadow">
    <div class="row">
        <div class="col-sm-6 col-lg-3">
            <div class="text-center">
                <div id="P" class="SimpleMeter" style="display: inline;">
                    ${data.P} W
                </div>
                <div id="importMeter" class="GaugeMeter rounded"
                    style="display: none;"
                    data-size="200px"
                    data-text_size="0.11"
                    data-width="25"
                    data-style="Arch"
                    data-theme="Green-Gold-Red"
                    data-animationstep="0"
                    data-label="${text.import}"
                ></div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div id="U1-row" class="row" style="display: ${display.P1};">
                <div class="col-2">L1</div>
                <div class="col-5 text-right"><span id="U1">${data.U1}</span> V</div>
                <div class="col-5 text-right"><span id="I1">${data.I1}</span> A</div>
            </div>
            <div id="U2-row" class="row" style="display: ${display.P2};">
                <div class="col-2">L2</div>
                <div class="col-5 text-right"><span id="U2">${data.U2}</span> V</div>
                <div class="col-5 text-right"><span id="I2">${data.I2}</span> A</div>
            </div>
            <div id="U3-row" class="row" style="display: ${display.P3};">
                <div class="col-2">L3</div>
                <div class="col-5 text-right"><span id="U3">${data.U3}</span> V</div>
                <div class="col-5 text-right"><span id="I3">${data.I3}</span> A</div>
            </div>
            <hr/>
            <div id="tPI-row" class="row" style="display: ${display.accumulative};">
                <div class="col-6">Active in</div>
                <div class="col-6 text-right"><span id="tPI">${data.tPI}</span> kWh</div>
            </div>
            <div id="tPO-row" class="row" style="display: ${display.accumulative};">
                <div class="col-6">Active out</div>
                <div class="col-6 text-right"><span id="tPO">${data.tPO}</span> kWh</div>
            </div>
            <div id="tQI-row" class="row" style="display: ${display.accumulative};">
                <div class="col-6">Reactive in</div>
                <div class="col-6 text-right"><span id="tQI">${data.tQI}</span> kvarh</div>
            </div>
            <div id="tQO-row" class="row" style="display: ${display.accumulative};">
                <div class="col-6">Reactive out</div>
                <div class="col-6 text-right"><span id="tQO">${data.tQO}</span> kvarh</div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="text-center" style="display: ${display.export};">
                <div id="P" class="SimpleMeter" style="display: inline;">
                    ${data.PO} W
                </div>
                <div id="exportMeter" class="GaugeMeter rounded"
                    style="display: none;"
                    data-size="200px"
                    data-text_size="0.11"
                    data-width="25"
                    data-style="Arch"
                    data-theme="DarkGreen-LightGreen"
                    data-animationstep="0"
                    data-label="Export"
                ></div>
            </div>
    </div>
        <div class="col-sm-6 col-lg-3">
            <hr class="d-md-inline"/>
            <div class="row">
                <div class="col-6">Vcc</div>
                <div class="col-6 text-right"><span id="vcc">${vcc}</span> V</div>
            </div>
            <div class="row" style="display: ${display.temp};">
                <div class="col-6">Temperature</div>
                <div class="col-6 text-right"><span id="temp">${temp}</span> &deg;C</div>
            </div>
            <div class="row" style="display: none;">
                <div class="col-6">Uptime</div>
                <div class="col-6 text-right"><span id="currentMillis">${currentMillis}</span></div>
            </div>
            <hr/>
            <div class="row">
                <div class="col-6">SSID</div>
                <div class="col-6 text-right"><span id="ssid">${wifi.ssid}</span></div>
            </div>
            <div class="row">
                <div class="col-6">Channel</div>
                <div class="col-6 text-right"><span id="channel">${wifi.channel}</span></div>
            </div>
            <div class="row">
                <div class="col-6">RSSI</div>
                <div class="col-6 text-right"><span id="rssi">${wifi.rssi}</span> dBm</div>
            </div>
            <hr class="d-none mqtt-error mqtt-error-1 mqtt-error-2 mqtt-error-3 mqtt-error-4 mqtt-error-5 mqtt-error-6 mqtt-error-7 mqtt-error-8 mqtt-error-9 mqtt-error-10 mqtt-error-11 mqtt-error-12 mqtt-error-13"/>
            <div class="d-none badge badge-danger mqtt-error mqtt-error-1 mqtt-error-2 mqtt-error-5 mqtt-error-6 mqtt-error-7 mqtt-error-8 mqtt-error-9 mqtt-error-12">MQTT communication error (<span id="mqtt-lastError">-</span>)</div>
            <div class="d-none badge badge-danger mqtt-error mqtt-error-3">MQTT failed to connect</div>
            <div class="d-none badge badge-danger mqtt-error mqtt-error-4">MQTT network timeout</div>
            <div class="d-none badge badge-danger mqtt-error mqtt-error-10">MQTT connection denied</div>
            <div class="d-none badge badge-danger mqtt-error mqtt-error-11">MQTT failed to subscribe</div>
            <div class="d-none badge badge-danger mqtt-error mqtt-error-13">MQTT lost connection</div>
        </div>
    </div>
</div>