UtilitechAS.amsreader-firmware/web/index.html

<div class="bg-white rounded shadow p-1 mb-3">
    <div class="d-flex flex-wrap">
        <div class="flex-fill">
            <div class="text-center">Up <span class="ju">{cs}</span></div>
        </div>
        <div class="flex-fill rt">
            <div class="text-center">Temperature: <span class="jt">{temp}</span>&deg;C</div>
        </div>
        <div class="flex-fill rv">
            <div class="text-center">ESP volt: <span class="jv">{vcc}</span>V</div>
        </div>
        <div class="flex-fill">
            <div class="text-center">WiFi RSSI: <span class="jr">{rssi}</span>dBm</div>
        </div>
        <div class="flex-fill">
            <div class="text-center">Free mem: <span class="jm">{mem}</span>kb</div>
        </div>
        <div class="flex-fill rc">
            <div class="text-center"><span class="jc"></span></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-5"><span class="jmt"></span></div>
                <div class="col-7 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 class="col-xl-12 mb-3">
        <div class="bg-white rounded shadow pt-3 pb-3" style="font-size: 14px;">
            <strong class="mr-3 ml-3">Current use and cost</strong><br/>
            <div class="row">
                <div class="col-lg-3 col-sm-6">
                    <div class="mr-3 ml-3 d-flex">
                        <div>Hour</div>
                        <div class="flex-fill text-right">
                            <span id="each"></span> kWh
                            <span class="sp text-nowrap">(<span id="eachc"></span> <span class="cr"></span>)</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="mr-3 ml-3 d-flex">
                        <div>Day</div>
                        <div class="flex-fill text-right">
                            <span id="eacd"></span> kWh
                            <span class="sp text-nowrap">(<span id="eacdc"></span> <span class="cr"></span>)</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="mr-3 ml-3 d-flex">
                        <div>Month</div>
                        <div class="flex-fill text-right">
                            <span id="eacm"></span> kWh
                            <span class="sp text-nowrap">(<span id="eacmc"></span> <span class="cr"></span>)</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="row mr-3 ml-3">
                        <div class="col-3">Max</div>
                        <div class="col-9 text-right"><span id="eax"></span> / <span id="eat"></span> kWh</div>
                    </div>
                </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 id="tpc" class="col-xl-12 mb-3" style="display: none;">
        <div class="bg-white rounded shadow pb-3">
            <div id="tp" style="width: 100%; height: 224px;"></div>
            <a class="m-4" href="/temperature">Configuration</a>
        </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>