UtilitechAS.amsreader-firmware/web/index.html

<div class="bg-white rounded shadow p-1 mb-3">
    <div class="row">
        <div class="col-md-2 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-2 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 class="col-md-2 col-6">
            <div class="text-center">Free mem: <span class="jm">{mem}</span>kb</div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-3 col-sm-6 mb-3">
        <div class="bg-white rounded shadow p-3">
            <div class="text-center overlay-plot">
                <div id="ip" class="plot1"></div>
                <span class="plot-overlay">
                    <span class="ipo">{P}</span> 
                    <span class="ipoa">W</span>
                    <br/>
                    <span class="pol">{ti}</span>
                </span>
            </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-lg-3 col-sm-6 mb-3" style="display: {de};">
        <div class="bg-white rounded shadow p-3">
            <div class="text-center overlay-plot">
                <div id="xp" class="plot1"></div>
                <span class="plot-overlay">
                    <span class="xpo">{PO}</span> 
                    <span class="xpoa">W</span>
                    <br/>
                    <span class="pol">Export</span>
                </span>
            </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-lg-3 col-sm-6 mb-3">
        <div class="bg-white rounded shadow p-3">
            <div class="text-center">
                <div id="vp" class="plot2"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6 mb-3">
        <div class="bg-white rounded shadow p-3">
            <div class="text-center">
                <div id="ap" class="plot2"></div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6 mb-3" style="display: {dn};">
        <div class="bg-white rounded shadow p-3" style="display: {da};">
            <h5 class="text-center">Reactive</h5>
            <div class="row rri">
                <div class="col-12 font-weight-bold">Instant</div>
                <div class="col-4">In</div>
                <div class="col-8 text-right"><span class="jri">{Q}</span> VAr</div>
                <div class="col-4">Out</div>
                <div class="col-8 text-right"><span class="jre">{QO}</span> VAr</div>
            </div>
            <div class="row rric">
                <div class="col-12 font-weight-bold">Total</div>
                <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-lg-6 mb-3" style="display: {de};">
        <div class="bg-white rounded shadow p-3" style="display: {da};">
            <div class="row rrec">
                <div class="col-sm-4 font-weight-bold">Instant reactive</div>
                <div class="col-4 col-sm-1">In</div>
                <div class="col-8 col-sm-3 text-right"><span class="jri">{Q}</span> VAr</div>
                <div class="col-4 col-sm-1">Out</div>
                <div class="col-8 col-sm-3 text-right"><span class="jre">{QO}</span> VAr</div>
            </div>
        </div>
    </div>
    <div class="col-lg-6 mb-3" style="display: {de};">
        <div class="bg-white rounded shadow p-3" style="display: {da};">
            <div class="row rrec">
                <div class="col-sm-4 font-weight-bold">Total reactive</div>
                <div class="col-4 col-sm-1">In</div>
                <div class="col-8 col-sm-3 text-right"><span class="jric">{tQI}</span> kVArh</div>
                <div class="col-4 col-sm-1">Out</div>
                <div class="col-8 col-sm-3 text-right"><span class="jrec">{tQO}</span> kVArh</div>
            </div>
        </div>
    </div>

    <div id="ppc" class="col-xl-12 mb-3" style="display: none;">
        <div class="bg-white rounded shadow" id="pp" style="width: 100%; height: 224px;"></div>
    </div>
    <div class="col-xl-12 mb-3">
        <div class="bg-white rounded shadow" id="ep" style="width: 100%; height: 224px;"></div>
    </div>
    <div class="col-xl-12 mb-3">
        <div class="bg-white rounded shadow" id="mp" style="width: 100%; height: 224px;"></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>