UtilitechAS.amsreader-firmware/web/index.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="ju">{cs}</span></div>
        </div>
        <div class="col-md-3 col-6">
            <div class="text-center">Temperature: <span class="jt">{temp}</span>&deg;C</div>
        </div>
        <div class="col-md-3 col-6">
            <div class="text-center">ESP volt: <span class="jv">{vcc}</span>V</div>
        </div>
        <div class="col-md-3 col-6">
            <div class="text-center">WiFi RSSI: <span class="jr">{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 class="SimpleMeter ji" 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 class="row ric" style="display: {da};">
                        <div class="col-12 text-right"><span class="jic">{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 class="SimpleMeter je" 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 class="row rec" style="display: {da};">
                        <div class="col-12 text-right"><span class="jec">{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 class="row rric">
                        <div class="col-4">In</div>
                        <div class="col-8 text-right"><span class="jric">{tQI}</span> kvarh</div>
                        <div class="col-4">Out</div>
                        <div class="col-8 text-right"><span class="jrec">{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 class="row rrec">
                        <div class="col-4 col-sm-2">In</div>
                        <div class="col-8 col-sm-4 text-right"><span class="jric">{tQI}</span> kvarh</div>
                        <div class="col-4 col-sm-2">Out</div>
                        <div class="col-8 col-sm-4 text-right"><span class="jrec">{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 class="row ru2" style="display: {3p};">
                <div class="col-4"><span class="ju1">{U1}</span>V</div>
                <div class="col-4 text-center"><span class="ju2">{U2}</span>V</div>
                <div class="col-4 text-right"><span class="ju3">{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-Gold-Red"
                    data-animationstep="0"
                    data-label="Ampere"
                ></div>
            </div>
            <div class="row ru2" style="display: {3p};">
                <div class="col-4"><span class="ji1">{I1}</span>A</div>
                <div class="col-4 text-center"><span class="ji2">{I2}</span>A</div>
                <div class="col-4 text-right"><span class="ji3">{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>