What's this
It's a web-app (web-interface) for Peacefair PZEM energy monitors.
It's supposed to work on a local machine with local devices and local database.
It uses Web Serial API to connect to PZEM devices and IndexedDB to store data.
Version 1.0 has been tested on PZEM-004T v2.0 and PZEM-014/016 v2.0.
PZEM-004T V3.0 and PZEM-003/017 should work also.
There are plans for further (unhasty) development of this application and support for other devices.
How to use
In a nutshell
1) You create "virtual" serial ports on the "Ports" page. Assign to them convenient name and proper settings.
2) You create a description of your PZEM devices on the "Devices" page. This description includes 
   the ID of "virtual" serial port from step one, polling interval, device type, values desired etc.
3) You go to the "Ports" page and connect (link, pair) your virtual ports to the physical ones using Web Serial API.
4) You go to the "Devices" page and start polling process.
5) You observe measurement results on "Devices" page or on "Table View"/"Chart View" pages if you used "Log to DB" option.

During subsequent runs of the application only steps 3,4,5 will be necessary, 
because description of ports and devices are stored in IndexedDB.

More detailed description:
Ports
On the "Ports" page, using JqGrid controls, you create kind of "virtual" ports. 
It is a description of serial ports that you have (or will have) in your system. 
This description is stored in the database and is later used to connect to the physical serial port 
and to link PZEM device to the particular virtual serial port.

At the bottom of the JqGrid table there is a pager with control buttons.

"Plus" button calls "Add Port" dialog, where you can assign a short name to better recognize the port later, 
port description, select port type and its settings.
After hitting "Add" button on the "Add Port" dialog the new port will be created in the database. 
This port will have some auto generated (auto incremental) digital ID and later it will be referred by this ID.
In some parts of GUI port name is displayed nex to the port ID for better understanding which port is which.

"Pencil" button is used to edit description of an existing port. 
You should click on the appropriate table row to select it before you click the "Pencil" button.
"Edit Port" dialog is a copy of "Add Port" dialog.

"Chain" or "Link" button is used to pair physical serial port to a virtual one.
Application utilizes Web Serial API to exchange data over serial ports.
At the moment of writing this is possible only in Chromium-based browsers.
Also currently there is no possibility to get some uniqe ID of the physical serial port using Web Serial API 
so even though you might have allowed the web page to access all your ports - 
I can't tell which of them is which (And I suppose there are many of them).
Therefore afer each page reloading or port reconnection you have to assign physical ports to virtual ones.

Pager also has buttons to delete virtual port and to reload table from database.

When virtual port is "chained" to the physical serial port - corresponding table 
row acquires green background and "chain" icon appears in the cell near the port ID.
RS485 ports also have a red number in the "Stats" cell. 
It's a number of commands in queue for writing. 
This number helps to see if line's throughput is not enough for the polling rate you set.

Devices
This page has a JqGrid table where you enter a description of your PZEM devices 
and link them to "virtual" ports.
The table "Available devices" has a "Plus" button which calls "Add PZEM device" dialog where you should:
- fill in preferred device name and description
- select corresponding serial port and device type from the lists of available serial ports and known device types
- choose to log measurement results to database or not
- for how long to store data in the database for this particular device

The table has "Pencil" button which has "Edit PZEM device" function and basically invokes the same dialog as "Plus" button, 
but fills it beforehand with the data of the device to be edited. Appropriate table row must be selected before clicking
"Pencil" or "Edit PZEM device" button.

The table has "Gear" button which calls connection settings dialog.
The content of this dialog depends on the type of device.
Currently there are two major types of PZEM devices supported by the application : RS232 devices and RS485 devices.

RS232 type has only one member - PZEM-004T v2.0
For such type of device you can select which values you would like to read from it:
(Voltage, Current, Power, Energy). You also must set a value for polling delay, 
considering that each parameter must be requested from the device separately
and this device requires about 500ms to respond.
So you can set polling delay to 500-600ms if you checked only Voltage, but 
you nedd 2000-2100 ms if you want all four measurements.
For unification purpuses, if you request more than one parameter from RS232 device - 
they all written to the database as one measurement, though it is not true and 
there is a time gap up to 2000ms before the first and the last measurements.

It seems that response time is deviating in a range of +- 50ms for one parameter. 
In addition, other tasks can get in a way and when time comes to get new result from RS232 device - 
port may be busy. This situation considered error and "lost packets" counter 
will be incremented by 1 for this device.

The last field that is present on the dialog for RS232 device is "Energy adjust". 
PZEM-004T v2.0 does not have command to reset it's internal energy counter so you can 
fill in this field and its value will be subtracted from device's energy counter.

Modern PZEM devices use Modbus-RTU protocol over RS485 interface. 
For such a device you also have the ability to choose parameters to request, but actually 
application always requests from device all available parameters -
they are just not shown on the iterface and are not written in database if you not checked them.
This is done because RS485 devices are fast. It takes 70-90ms to get all values 
(read 9 input registers sequentially) from my PZEM-016.
There may be many PZEM devices on one RS485 port, so "port busyness" not considered error here. 
Instead, there is a Write Queue for each RS485 port which is loaded according to 
"polling delay" provided by user and unloaded when port becomes available for the next data exchange. 
So, if you have multiple devices on one RS485 port you should sometimes check 
write queue on "Ports" page.
"Connection settings" dialog for RS485 devices also has:
- field "Slave address" to set device's slave address on the bus. 
 Next to this field there is a button "Change to" and the input field for the new slave address. 
 This buttons allows to change slave address of the current device "on the fly".
- field Polling delay as for RS232 devices.
- Button "Reset energy" which allows to reset internal enrgy counter for current device.

The table has "Two arrows" button which starts/stops polling of the device, 
corresponding to selected table row.
When polling is started  the corresponding table row has green background.
Data, requested from the device are displayed in the corresponding table cells.
In the last cell ("last update") you can see timestamp of the last received data packet, 
counter of total packets received and counter of lost packets.

Table View
It's a JqGrid which displays stored measurement results.
The more results you have the slower it works because my requests to databese are
not optimized to use indexes. I doubt that I will be able to optimize them in future.
To cope with this problem there is a setting "Delete DB records older than" which
is available when you adding a new PZEM device or editing an old one.

When table is still processing data you can see message [processing] on the tables'
header which will be replaced by [ready] at the end.
On my laptop it takes about 20 seconds to process 700K records.

Table allows to sort data by any column by clicking column's header.
Table has search dialog (invoked as usual from pager at the bottom) which
allows filtering table data by multiple parameters.

Chart view 
This page has zoommable(!) chart by Apexcharts which can display one parameter from one device 
for selected period. I hope this page uses at least datetime index...
Interface to select time interval, device and parameter is straightforward and is
placed at the top of the page.