ENERGY MONITOR for PV PANELS

MONITOR di ENERGIA per PANNELLI FOTOVOLTAICI ENERGY MONITOR for PV PANELS

Il sistema permette il monitoraggio in tempo reale del bilancio energetico di una casa dotata di pannelli fotovoltaici e produce uno storico.
I dati raccolti in ogni istante sono visualizzabili sia attraverso uno schermo OLED collegato alla scheda Arduino che collegandosi alla pagina web del monitoraggio. Da quest'ultima e' possibile poi accedere ai dati dello storico che vengono organizzati in appositi grafici.
Informazioni sulla scheda Arduino e la sua programmazione tramite il relativo ambiente di sviluppo integrato (IDE) sono ampiamente disponibili su Internet e non rientrano nello scopo di questa pagina.

Per la realizzazione del progetto sono necessari:

-1 scheda Arduino UNO
-1 chip con Wi-Fi integrato ESP8266
-1 Schermo OLED I2C SSD1306 128x64
-1 Touch Sensor TTP223B
-4 Resistenze da 1kOhm(R8, R9, R10, R11^*)
-1 Resistenza da 100kOhm(R7^**)
-3 Resistenze da 4.7kOhm(R1, R2, R6^**)
-3 Resistenze da 10kOhm(R3, R4, R5)
-1 Condensatore da 10uF (indifferentemente ceramico o elettrolitico)
-1 LED
-3 sensori di corrente SCT-013-XXX (dove XXX si riferisce alla corrente massima attesa su ciascun specifico ramo)
-1 Trasformatore AC-AC per il riferimento della tensione di rete

^*Il valore di R11 deve essere scelto in modo da non bruciare il LED cui la resistenza e' messa in serie, ma puo' variare a seconda dell'intensita' luminosa che si desidera
^**R6 ed R7 sono poste a formare un partitore di tensione che adatti la tensione in uscita dal trasformatore AC-AC agli intervalli misurabili dall'Arduino e sono percio' da scegliere in funzione di questa (come tra poco spiegheremo)

I collegamenti tra i componenti possono essere effettuati come in figura:

The system allows the real time monitoring of the energy balance in a house equipped with photovoltaic panels and creates a datalog archive .
Data are gathered real time and can be visualized both on an OLED display connected to the Arduino board and on a monitoring web page. The web page is also providing the user with graphs on the historical recordings.
Information about the Arduino board and the programming through the Integrated Development Environment (IDE) is largely available on the Internet and it's not part of the scope of this page.

Proposed system requires following HW:

-1 Arduino UNO board
-1 ESP8266 board with WIFI communication
-1 OLED I2C screen SSD1306 128x64
-1 Touch Sensor TTP223B
-4 1kOhm resistors (R8, R9, R10, R11^*)
-1 100kOhm resistor (R7^**)
-3 4.7kOhm resistors (R1, R2, R6^**)
-3 10kOhm resistors (R3, R4, R5)
-1 10uF capacitor (either ceramic or electrolytic)
-1 LED
-3 CT sensors SCT-013-XXX (where XXX should refer to the maximum nominal current on each specific branch)
-1 AC-AC transformer to get the reference of the grid voltage

^*The R11 rating should prevent any damage to the LED connected in series with it but can vary based on the desired LED light intensity.
^**R6 and R7 ratings should be chosen in order to ensure that the voltage divider is bringing the AC-AC transformer output within a suitable range for the Arduino analog input (more explanation below).

Connections among components are as per following schematic:

Appunti sul circuitoNotes on the circuit

Il CT sensor SCT-013-XXX e' un sensore che restituisce una tensione istantanea direttamente proporzionale al valore istantaneo della corrente e, a corrente nominale (XXX), i picchi di tensione alla sua uscita sono di 1V e -1V. Potendo la scheda Arduino misurare tensioni comprese tra 0V e 5V rispetto al proprio GROUND, e' necessario collegare uno dei due pin di uscita del sensore ad una tensione fissa di 2.5V (rispetto al GROUND della scheda Arduino) in modo che la tensione tra il secondo pin del sensore e il GROUND abbia valori compresi tra 2.5V + 1V = 3.5V e 2.5V - 1V = 1.5V. Allo scopo di fornire questo MIDPOINT di tensione (2.5V) viene costruito il partitore di tensione formato dalle resistenze R1 ed R2, di uguale valore, poste a cavallo dei 5V e del GROUND di Arduino.
In maniera analoga, il trasformatore AC-AC fornisce un segnale proporzionale alla tensione di rete che, come quella in uscita dal sensore, oscilla tra valori positivi e negativi. Allo stesso modo quindi uno dei due pin dell'uscita del trasformatore AC-AC viene collegato al MIDPOINT.
La lettura del trasformatore comporta pero' un'ulteriore difficolta'. E' infatti' improbabile avere un trasformatore AC-AC avente un'uscita con picchi massimi di non piu' di 2,5V e minimi di non meno di -2,5V (valori che, traslati per il collegamento con il MIDPOINT, permetterebbero di rimanere nell'intervallo degli 0V-5V misurabile da Arduino). Si deve allora costruire un ulteriore partitore di tensione che permetta di ottenere una tensione picco-picco (NON RMS) entro quei valori appena esposti. Questo partitore e' quello formato dalle resistenze R6 ed R7, i cui valori sono quindi da scegliere in funzione del trasformatore che si ha a disposizione (i valori di R6 ed R7 indicati nella Bill Of Materials sono per un trasformatore con OUTPUT 25V RMS).

The SCT-013-XXX sensor provides a voltage signal proportional to the flowing current. At nominal current (XXX) voltage peaks are 1V and -1V. Since Arduino can measure voltages ranging from 0V to 5V, one of the sensors pins should be connected to a MIDPOINT with a reference voltage of 2.5V with respect to GROUND. In this way the second pin of the sensor will provide values ranging from 2.5V + 1V = 3.5V and 2.5V - 1V = 1.5V. The reference MIDPOINT (2.5V) is generated by R1 and R2 resistors connected across the 5V and the GROUND pins of Arduino.
In a similar way, the AC-AC transformer is providing a voltage signal proportional to the one on the power grid which is oscillating among negative and positive values, like in the current sensor case. Therefore, here as well, one of the AC-AC transformer pins should be connected to the MIDPOINT.
However the reading of the transformer signal implies one additional challenge. As matter of fact, the available AC-AC transformer is unlikely to provide a voltage signal not going beyond the maximum peak of 2.5V and the minimum one of -2.5V (values that once translated by the connection with the MIDPOINT would finally stay within the 0V-5V range compatible with Arduino). An additional voltage divider is therefore needed to get a peak to peak voltage signal (NOT RMS) staying within values mentioned above. This divider is formed by R6 and R7 resistors, whose ratings should be chosen in accordance with the available transformer. R6 and R7 ratings in the Bill of Materials above refer to a 25V RMS transformer.

Il sistemaThe system

La misura della tensione di rete, unitamente a quelle della corrente, della potenza (attiva ed apparente) e del cosφ nei vari rami, viene effettuata dalla scheda Arduino tramite il codice riportato qui di seguito ed attraverso la libreria "EmonLib.h". Maggiori informazioni sono reperibili sul sito OpenEnergyMonitor.

The measurement of the grid voltage together with current, power (active and apparent) and cosφ in the various branches, is done by Arduino with the code shown below based on the "EmonLib.h" library. More information can be found in the OpenEnergyMonitor website.

Energy_Monitor_Arduino_Sensor2serial_display.ino:

#define VOLTAGE_ANALOG_INPUT_PIN 0  // A0 pin on Arduino
#define VOLTAGE_CALIBRATION_FACTOR 198.5  // multiplier to go from analog voltage rms input to real voltage rms (to calibrate)
#define VOLTAGE_PHASE_SHIFT 1.7  // phase shift to compensate Arduino sampling delay between Current and Voltage (to calibrate)
#define GRID_CURRENT_ANALOG_INPUT_PIN 1  // A1 pin on Arduino
#define GRID_CURRENT_CALIBRATION_FACTOR 20  // multiplier to go from analog current rms input to real current rms
#define PV_CURRENT_ANALOG_INPUT_PIN 2  // A2 pin on Arduino
#define PV_CURRENT_CALIBRATION_FACTOR 15  // multiplier to go from analog current rms input to real current rms
#define LOAD_CURRENT_ANALOG_INPUT_PIN 3  // A3 pin on Arduino
#define LOAD_CURRENT_CALIBRATION_FACTOR 30  // multiplier to go from analog current rms input to real current rms

#define PV_ZERO_POWER_TOLERANCE 0.0 // below this value, PV power is considered to be 0 (PV sensor error with 0 current) 
#define DISPLAY_TIMEOUT 60000  // timeout for display power saving mode

#include <U8g2lib.h>
U8G2_SH1106_128X64_NONAME_1_HW_I2C u8g2(U8G2_R0);

#include "EmonLib.h"
EnergyMonitor emonGrid;   
EnergyMonitor emonPV;           
EnergyMonitor emonLoad;

char c;
long LastRequestedGridEnergymillis=0;
long LastCalculatedGridEnergymillis=0;
float GridEnergy;
long LastRequestedPVEnergymillis=0;
long LastCalculatedPVEnergymillis=0;
float PVEnergy;
long LastRequestedLoadEnergymillis=0;
long LastCalculatedLoadEnergymillis=0;
float LoadEnergy;

long millisTouch=0;

int i=17;

void setup()
{
  pinMode(6,OUTPUT); //LED PIN
  pinMode(7,INPUT);  //input pin for touch sensor
  u8g2.begin();
  Serial.begin(9600);
  u8g2.setPowerSave(1);
  
  emonGrid.voltage(VOLTAGE_ANALOG_INPUT_PIN, VOLTAGE_CALIBRATION_FACTOR, VOLTAGE_PHASE_SHIFT);  // Voltage: input pin, calibration, phase_shift
  emonGrid.current(GRID_CURRENT_ANALOG_INPUT_PIN, GRID_CURRENT_CALIBRATION_FACTOR);       // Grid Current: input pin, calibration.
  emonPV.voltage(VOLTAGE_ANALOG_INPUT_PIN, VOLTAGE_CALIBRATION_FACTOR, VOLTAGE_PHASE_SHIFT);  // Voltage: input pin, calibration, phase_shift
  emonPV.current(PV_CURRENT_ANALOG_INPUT_PIN, PV_CURRENT_CALIBRATION_FACTOR);       // PV Current: input pin, calibration.
  emonLoad.voltage(VOLTAGE_ANALOG_INPUT_PIN, VOLTAGE_CALIBRATION_FACTOR, VOLTAGE_PHASE_SHIFT);  // Voltage: input pin, calibration, phase_shift
  emonLoad.current(LOAD_CURRENT_ANALOG_INPUT_PIN, LOAD_CURRENT_CALIBRATION_FACTOR);       // Load Current: input pin, calibration.
}

void loop()
{  
  // Power measurements
  //
  digitalWrite(6,HIGH);    
  emonGrid.calcVI(20, 2000);        // Calculate all. No.of wavelengths, time-out
  GridEnergy=GridEnergy+(millis()-LastCalculatedGridEnergymillis)*emonGrid.realPower/1000; // energy in J
  LastCalculatedGridEnergymillis=millis();
  //
  emonPV.calcVI(20, 2000);        // Calculate all. No.of wavelengths, time-out
  PVEnergy=PVEnergy+(millis()-LastCalculatedPVEnergymillis)*emonPV.realPower/1000; // energy in J
  LastCalculatedPVEnergymillis=millis();
  //
  emonLoad.calcVI(20, 2000);        // Calculate all. No.of wavelengths, time-out
  // LOAD SENSOR AVAILABLE
  LoadEnergy=LoadEnergy+(millis()-LastCalculatedLoadEnergymillis)*emonLoad.realPower/1000; // energy in J
  // LOAD SENSOR NOT AVAILABLE
  //LoadEnergy=LoadEnergy+(millis()-LastCalculatedLoadEnergymillis)*(emonPV.realPower+emonGrid.realPower)/1000; // energy in J
  LastCalculatedLoadEnergymillis=millis();
  //
  digitalWrite(6,LOW);  
  //
  // display timeout management
  //
  if  (digitalRead(7) == HIGH) {
    millisTouch=millis();
  }
  if (millis() - millisTouch < DISPLAY_TIMEOUT) {
    u8g2.setPowerSave(0);    
  } else {
    u8g2.setPowerSave(1);    
  }
  //
  //
  // Display update
  //
  u8g2.firstPage();
  if (i>=40) i=17;
  do {
    if (Serial.available()) {
      digitalWrite(6,HIGH);  
      u8g2.setFont(u8g2_font_open_iconic_www_4x_t);
      u8g2.drawGlyph(96,64,81);
    }
    u8g2.setFont(u8g2_font_open_iconic_all_2x_t);
    u8g2.drawGlyph(0,16,170);
    u8g2.drawGlyph(56,16,184);
    if (emonGrid.realPower > 0) {
      u8g2.drawGlyph(i,16,118);
    } else {
      u8g2.drawGlyph(56-i,16,117);
    }
    if (emonPV.realPower > PV_ZERO_POWER_TOLERANCE) {
      u8g2.drawGlyph(112-i,16,117);
      u8g2.drawGlyph(112,16,259);
    } else {
      u8g2.drawGlyph(112,16,223);      
    }
    u8g2.setFont(u8g2_font_helvR08_tf);
    u8g2.drawStr(0,40,"Grid:");
    u8g2.setCursor(30,40);
    u8g2.print(emonGrid.realPower/1000.0,3);
    u8g2.drawStr(65,40,"kW");
    u8g2.drawStr(0,52,"PV:");
    u8g2.setCursor(30,52);
    u8g2.print(emonPV.realPower/1000.0,3);      
    u8g2.drawStr(65,52,"kW");
    u8g2.drawStr(0,64,"Load:");
    u8g2.setCursor(30,64);
//   LOAD SENSOR AVAILABLE
    u8g2.print(emonLoad.realPower/1000.0,3);
//   LOAD SENSOR NOT AVAILABLE
//    u8g2.print((emonPV.realPower+emonGrid.realPower)/1000.0,3);
//
    u8g2.drawStr(65,64,"kW");
    u8g2.setCursor(128,64);
  } while (u8g2.nextPage());
  i=i+1;  
  //
  // check for a serial request to print
  //
  while (Serial.available()) {
    c=Serial.read();
    if ((c == '?') || (c == '!')) {
      Serial.print(LastCalculatedGridEnergymillis-LastRequestedGridEnergymillis);
      Serial.print(" ");
      Serial.print(GridEnergy);
      Serial.print(" ");
      Serial.print(emonGrid.realPower);
      Serial.print(" ");     
      Serial.print(emonGrid.apparentPower);
      Serial.print(" "); 
      Serial.print(emonGrid.Vrms);
      Serial.print(" "); 
      Serial.print(emonGrid.Irms);
      Serial.print(" "); 
      Serial.print(emonGrid.powerFactor);
      Serial.print(" ");           
//
      Serial.print(LastCalculatedPVEnergymillis-LastRequestedPVEnergymillis);
      Serial.print(" ");
      Serial.print(PVEnergy);
      Serial.print(" ");
      Serial.print(emonPV.realPower);
      Serial.print(" ");     
      Serial.print(emonPV.apparentPower);
      Serial.print(" "); 
      Serial.print(emonPV.Vrms);
      Serial.print(" "); 
      Serial.print(emonPV.Irms);
      Serial.print(" "); 
      Serial.print(emonPV.powerFactor);
      Serial.print(" ");           
//
      Serial.print(LastCalculatedLoadEnergymillis-LastRequestedLoadEnergymillis);
      Serial.print(" ");
      Serial.print(LoadEnergy);
      Serial.print(" ");
//   LOAD SENSOR AVAILABLE
      Serial.print(emonLoad.realPower);
      Serial.print(" ");     
      Serial.print(emonLoad.apparentPower);
      Serial.print(" "); 
      Serial.print(emonLoad.Vrms);
      Serial.print(" "); 
      Serial.print(emonLoad.Irms);
      Serial.print(" "); 
      Serial.print(emonLoad.powerFactor);
      Serial.println(" ");           
//   LOAD SENSOR NOT AVAILABLE
//      Serial.print(emonPV.realPower+emonGrid.realPower);
//      Serial.print(" ");     
//      Serial.print("0.0");
//      Serial.print(" "); 
//      Serial.print(emonLoad.Vrms);
//      Serial.print(" "); 
//      Serial.print("0.0");
//      Serial.print(" "); 
//      Serial.print("0.0");
//      Serial.println(" ");           
//
      if (c== '!') {
        LastRequestedGridEnergymillis=LastCalculatedGridEnergymillis;
        GridEnergy=0;
        LastRequestedPVEnergymillis=LastCalculatedPVEnergymillis;
        PVEnergy=0;
        LastRequestedLoadEnergymillis=LastCalculatedLoadEnergymillis;
        LoadEnergy=0;
      }
    }
  }
}

La condivisione dei dati via Internet avviene grazie al modulo con Wi-Fi integrato ESP8266, che funge da tramite tra il web client e la scheda Arduino.
Sharing of data on the Internet is done thanks to the ESP8266 WIFI module that connects the web client to Arduino.

Energy_Monitor_ESP8266_serial2webserver.ino:

// Same code as "Energy_Monitor_NodeMCU_serial2webserver.ino" but without the softwareserial and using Serial to comunicate to Ardunino board
//
#include <ESP8266WiFi.h>

#define WIFI_LOOP_TIMEOUT 60000  // Timeout for connection to WIFI AP
#define NO_WIFI_CONNECTION_TIMEOUT 600000  // Maximum allowed time without WIFI connection to AP before Reset
#define SERIAL_DATA_TIMEOUT 1000  // short timeout in serial communication
#define WHILE_LOOP_TIMEOUT 5000  // Timeout for while loop in getData()

//
// LOCAL NETWORK SETTINGS
//
const char* ssid = "wifiname"; // Wifi Network name (ssid)
const char* password = "wifipassword"; // Wifi Network password
IPAddress ip(192, 168, 0, 10); // Fixed IP address in the network
//IPAddress dns(192, 168, 0, 1); // network dns
IPAddress gateway(192, 168, 0, 1); // network gateway
IPAddress subnet(255, 255, 255, 0); // network subnet mask
const int httpPort = 80;
//
// END OF LOCAL NETWORK SETTINGS
//
//
// global variables
//
//
char c;
//
WiFiServer server(httpPort); // Set webserver port
//
float GridRealPower=0; //Grid Real Power
float GridApparentPower=0; //Grid Apparent Power
float GridVoltage=0; //Grid Voltage
float GridCurrent=0; //Grid Current
float GridCosPhi=0; //Grid Power Factor
float GridEnergy=0; //Total Grid Energy from last reset
long GridEnergyDeltamillis; // Delta time from last reset
float PVRealPower=0; //PV Real Power
float PVApparentPower=0; //PV Apparent Power
float PVVoltage=0; //PV Voltage
float PVCurrent=0; //PV Current
float PVCosPhi=0; //PV Power Factor
float PVEnergy=0; //Total PV Energy from last reset
long PVEnergyDeltamillis; // Delta time from last reset
float LoadRealPower=0; //Load Real Power
float LoadApparentPower=0; //Load Apparent Power
float LoadVoltage=0; //Load Voltage
float LoadCurrent=0; //Load Current
float LoadCosPhi=0; //Load Power Factor
float LoadEnergy=0; //Total Load Energy from last reset
long LoadEnergyDeltamillis; // Delta time from last reset
boolean EnergyReset; // True in case of an http request to reset calculated energy and starting time
//
unsigned long WIFILoopStart=0;
unsigned long noWIFIConnectionStart=0;
//
String StrDati="";
//
void setup() {
  //Begin serial comunication with Arduino IDE Serial Monitor (PC for debug)
  Serial.begin(9600);
  delay(10);
   
//
// WIFI setting as Station 
// 
  WiFi.config(ip, gateway, subnet);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  WIFILoopStart=millis();
  while ((WiFi.status() != WL_CONNECTED) && ((millis() -  WIFILoopStart) < WIFI_LOOP_TIMEOUT)) {
    delay(500);
  }
  if (WiFi.status() != WL_CONNECTED) {
//    ESP.restart();
  } else {
// Webserver start
    server.begin();
  }
//
// END OF WIFI SETUP
//
//
//
}

void loop() {

String s="";
  
// Check for a client connection
  WiFiClient client = server.available();
  client.setTimeout(100);
  if (!client) {
    return;
  }
  delay(100);
  // Waint until client is sending data
  // Reading of first line of web client request
  String request = client.readStringUntil('\n');
  // Send request for data to Arduino Board
  if (request.indexOf("/energyreset") != -1) {    //request to reset calculated energy and starting time
    EnergyReset=true;
  } else {  
    EnergyReset=false;
  } 
  StrDati=getData(SERIAL_DATA_TIMEOUT);
  // 
  // Parsing of data string
  //
  // Grid
  GridEnergyDeltamillis=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  GridEnergy=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);  
  GridRealPower=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  GridApparentPower=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  GridVoltage=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  GridCurrent=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  GridCosPhi=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  // PV
  PVEnergyDeltamillis=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  PVEnergy=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);  
  PVRealPower=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  PVApparentPower=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  PVVoltage=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  PVCurrent=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  PVCosPhi=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  // Load
  LoadEnergyDeltamillis=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  LoadEnergy=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);  
  LoadRealPower=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  LoadApparentPower=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  LoadVoltage=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  LoadCurrent=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  StrDati=StrDati.substring(StrDati.indexOf(" ")+1);
  LoadCosPhi=StrDati.substring(0,StrDati.indexOf(" ")).toFloat();
  //
  // Prepare the response
  // Request parsing to select requested answer
  s = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nAccess-Control-Allow-Origin: *\r\n\r\n";
  s += "<!DOCTYPE HTML>\r\n<html>\r\n";
  s += "<head>\r\n<title>My Energy Monitor Data</title>\r\n</head>\r\n";
  s += "<body>\r\n";
  s += "<hr>\r\n";
// Grid
  s += "Time since last Grid Energy reset: ";
  s += String(GridEnergyDeltamillis);
  s += " ms\r\n<br>\r\n";
  s += "Grid Energy since last Energy reset: ";
  s += String(GridEnergy);
  s += " J\r\n<br>\r\n";
  s += "Grid Real Power: ";
  s += String(GridRealPower);
  s += " W\r\n<br>\r\n";
  s += "Grid Apparent Power: ";
  s += String(GridApparentPower);
  s += " VA\r\n<br>\r\n";
  s += "Grid Voltage: ";
  s += String(GridVoltage);
  s += " V\r\n<br>\r\n";
  s += "Grid Current: ";
  s += String(GridCurrent);
  s += " A\r\n<br>\r\n";
  s += "Grid Power Factor: ";
  s += String(GridCosPhi);
  s += "\r\n<br>\r\n";
// PV
  s += "Time since last PV Energy reset: ";
  s += String(PVEnergyDeltamillis);
  s += " ms\r\n<br>\r\n";
  s += "PV Energy since last Energy reset: ";
  s += String(PVEnergy);
  s += " J\r\n<br>\r\n";
  s += "PV Real Power: ";
  s += String(PVRealPower);
  s += " W\r\n<br>\r\n";
  s += "PV Apparent Power: ";
  s += String(PVApparentPower);
  s += " VA\r\n<br>\r\n";
  s += "PV Voltage: ";
  s += String(PVVoltage);
  s += " V\r\n<br>\r\n";
  s += "PV Current: ";
  s += String(PVCurrent);
  s += " A\r\n<br>\r\n";
  s += "PV Power Factor: ";
  s += String(PVCosPhi);
  s += "\r\n<br>\r\n";
// Load
  s += "Time since last Load Energy reset: ";
  s += String(LoadEnergyDeltamillis);
  s += " ms\r\n<br>\r\n";
  s += "Load Energy since last Energy reset: ";
  s += String(LoadEnergy);
  s += " J\r\n<br>\r\n";
  s += "Load Real Power: ";
  s += String(LoadRealPower);
  s += " W\r\n<br>\r\n";
  s += "Load Apparent Power: ";
  s += String(LoadApparentPower);
  s += " VA\r\n<br>\r\n";
  s += "Load Voltage: ";
  s += String(LoadVoltage);
  s += " V\r\n<br>\r\n";
  s += "Load Current: ";
  s += String(LoadCurrent);
  s += " A\r\n<br>\r\n";
  s += "Load Power Factor: ";
  s += String(LoadCosPhi);
  s += "\r\n<br>\r\n";
  s += "<hr><a href='http://www.faureragani.it' target='_blank'>www.faureragani.it</a><br>\r\n";
  s += "</body>\r\n";
  s += "</html>\r\n";
  // Send the response to the client
  client.print(s);
  delay(1);
  client.stop();
//
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// check about WIFI connection status and reset if needed 
//
//
  if ((WiFi.status() != WL_CONNECTED) && (noWIFIConnectionStart == 0)) {
    noWIFIConnectionStart=millis();
  } else if ((WiFi.status() == WL_CONNECTED) && (noWIFIConnectionStart > 0)) {
    noWIFIConnectionStart=0;
  }
  if ((WiFi.status() != WL_CONNECTED) && ((millis() -  noWIFIConnectionStart) > NO_WIFI_CONNECTION_TIMEOUT)) {
    ESP.restart();
  } 
// 
// End of check about WIFI connection status and reset if needed 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
////
}

String getData(const int timeout)
{
  String response = "";
  unsigned long inizio = millis();
  unsigned long trascorso;
  unsigned long WhileLoopStart=0;
  //
  // Watchdog reset
  //
  ESP.wdtFeed();
  //
  if (EnergyReset) { 
      Serial.write('!'); 
  } else {
      Serial.write('?');   
  }
  do {
    WhileLoopStart=millis();
    while (Serial.available()&& ((millis() -  WhileLoopStart) < WHILE_LOOP_TIMEOUT)) {
      // The esp has data so display its output to the serial window 
      c = Serial.read(); // read the next character.
      response+=c;
      if (!Serial.available()) delay(10);
    }  
    trascorso = millis()-inizio;
    ESP.wdtFeed();
  } while(( trascorso < timeout) && (!response.endsWith("\r\n")));
  //
  // Watchdog reset
  //
  ESP.wdtFeed();
  //
  return response;
}

Lo storico viene prodotto attraverso la periodica chiamata alla pagina powerenergylog.aspx da parte di un web monitoring tool come UptimeRobot o di un qualsiasi altro client attivato ad intervalli regolari. Questa pagina chiede i dati alla scheda Arduino e li salva in un file di testo sul web server. I dati inviati con questa chiamata sono, per ciascun sensore, il tempo trascorso dall'ultima chiamata avvenuta da parte del log e l'energia trasportata in questo lasso di tempo dal cavo che il sensore monitora. Arduino calcola l'energia facendo l'integrale della potenza nel tempo.
The history datalog is generated through a regular call to the powerenergylog.aspx web page done by a web monitoring tool like UptimeRobot or by any web client activated on a periodic basis. The page is requesting data to the Arduino board and saving them in a text file on the web server. For each of the current sensors, requested data are the time duration and the energy passed through the monitored cable since the last call. Arduino is calculating the energy by integrating the measured power over time.

powerenergylog.aspx:

<%@ Page Language="VB" debug="true" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Net.Sockets" %>

' Global Variables
' Energy Monitor URL or IP Address
Dim ServerURL As String ="http://xxx.xxx.xxx.xxx/energyreset"

Dim path As String = Server.Mappath(".\log")
Dim sw As StreamWriter
Dim sr As StreamReader
Dim DateString as String
Dim TimeString as String
Dim StringaTmp as String

Dim StringaDati as String
Dim ConnectionOK as Boolean
Dim ParseOK as Boolean

Dim GridEnergy as Single
Dim PVEnergy as Single
Dim LoadEnergy as Single
Dim SelfConsumptionEnergy as Single

Dim PreviousGridEnergy as Single
Dim PreviousPVEnergy as Single
Dim PreviousLoadEnergy as Single
Dim PreviousSelfConsumptionEnergy as Single

' Average values considered, not istantaneous one
Dim AverageGridRealPower as Single
Dim AveragePVRealPower  as Single
Dim AverageLoadRealPower as Single
Dim AverageSelfCunsumptionRealPower as Single

Dim GridEnergyDeltamillis as Long
Dim PVEnergyDeltamillis as Long
Dim LoadEnergyDeltamillis as Long

Public Function GetHtmlPage(ByVal strURL As String) As Boolean
	Dim strResult As String
	Dim objResponse As System.Net.WebResponse
	Dim objRequest As System.Net.WebRequest = System.Net.HttpWebRequest.Create(strURL)
	Try 
		objResponse = objRequest.GetResponse()
		Using sr As New System.IO.StreamReader(objResponse.GetResponseStream())
			strResult = sr.ReadToEnd()
			sr.Close()
		End Using
		StringaDati=strResult
	Catch
		Return false
	End Try	
	Return true
End Function

Public Function ParseData(ByVal str As String) As Boolean
	ParseOK=false
	Try
' Grid
		str=Right(str,str.Length()-str.IndexOf("Time since last Grid Energy reset: ")-35)
		GridEnergyDeltamillis=CLng(Left(str,str.IndexOf(" ")))
		str=Right(str,str.Length()-str.IndexOf("Grid Energy since last Energy reset: ")-37)
		GridEnergy=CSng(Left(str,str.IndexOf(" ")))		' Energy in J
		AverageGridRealPower=GridEnergy/GridEnergyDeltamillis*1000	'Power in kW
		GridEnergy=GridEnergy/3600000	'Conversion from J to kWh
		str=Right(str,str.Length()-str.IndexOf("Time since last PV Energy reset: ")-33)
' PV
		PVEnergyDeltamillis=CLng(Left(str,str.IndexOf(" ")))
		str=Right(str,str.Length()-str.IndexOf("PV Energy since last Energy reset: ")-35)
		PVEnergy=CSng(Left(str,str.IndexOf(" ")))		' Energy in J
		AveragePVRealPower=PVEnergy/PVEnergyDeltamillis*1000	'Power in kW
		PVEnergy=PVEnergy/3600000	'Conversion from J to kWh
' Load
		str=Right(str,str.Length()-str.IndexOf("Time since last Load Energy reset: ")-35)
		LoadEnergyDeltamillis=CLng(Left(str,str.IndexOf(" ")))
		str=Right(str,str.Length()-str.IndexOf("Load Energy since last Energy reset: ")-37)
		LoadEnergy=CSng(Left(str,str.IndexOf(" ")))		' Energy in J
		AverageLoadRealPower=LoadEnergy/LoadEnergyDeltamillis*1000	'Power in kW
		LoadEnergy=LoadEnergy/3600000	'Conversion from J to kWh
		
		if (GridEnergy < 0) then 
			SelfConsumptionEnergy = LoadEnergy
			AverageSelfCunsumptionRealPower= SelfConsumptionEnergy/LoadEnergyDeltamillis*1000*3600000
		else 
			SelfConsumptionEnergy = PVEnergy
			AverageSelfCunsumptionRealPower= SelfConsumptionEnergy/PVEnergyDeltamillis*1000*3600000
		end if
		Return True
	Catch
		Return False
	End Try
End Function

Sub Page_Load(sender As Object, e As EventArgs)

'
' International English setting(dot as digital separation)
	Session.LCID = 1033
	DateString = DateTime.Now.ToString("yyyy-MM-dd")
	TimeString = DateTime.Now.ToString("HH:mm:ss")
'
' Reading data from Energy Monitor
	ConnectionOK=GetHtmlPage(ServerURL)
	if (ConnectionOK = true) then
		ParseOK=ParseData(StringaDati)
	End If

' Files update 
	if ((ConnectionOK = true) And (ParseOK = true)) then

' Log file is created if it does not exists

If File.Exists(path & "\" & DateString & ".txt") = False Then
			sw = File.CreateText(path & "\" & DateString & ".txt")
			sw.WriteLine("Time, Average Grid Real Power, Average PV Real Power, Average Load Real Power, Grid Energy, PV Energy, Load Energy, Self Consumption Energy")
			sw.Flush()
			sw.Close()
		End If
' Reading log file to load previous energy values
		PreviousGridEnergy = 0.0
		PreviousPVEnergy = 0.0
		PreviousLoadEnergy = 0.0
		PreviousSelfConsumptionEnergy = 0.0
		sr = File.OpenText(path & "\" & DateString & ".txt")
' first line
		StringaTmp=sr.ReadLine()
' subsequent lines
		if sr.Peek()>=0 then
			Do While sr.Peek() >= 0
				StringaTmp=sr.ReadLine()
			Loop
			StringaTmp=Right(StringaTmp, StringaTmp.Length()-StringaTmp.IndexOf(",")-1)
			StringaTmp=Right(StringaTmp, StringaTmp.Length()-StringaTmp.IndexOf(",")-1)
			StringaTmp=Right(StringaTmp, StringaTmp.Length()-StringaTmp.IndexOf(",")-1)
			StringaTmp=Right(StringaTmp, StringaTmp.Length()-StringaTmp.IndexOf(",")-1)
			PreviousGridEnergy=CSng(Left(StringaTmp, StringaTmp.IndexOf(",")))
			StringaTmp=Right(StringaTmp, StringaTmp.Length()-StringaTmp.IndexOf(",")-1)
			PreviousPVEnergy=CSng(Left(StringaTmp, StringaTmp.IndexOf(",")))
			StringaTmp=Right(StringaTmp, StringaTmp.Length()-StringaTmp.IndexOf(",")-1)
			PreviousLoadEnergy=CSng(Left(StringaTmp, StringaTmp.IndexOf(",")))
			StringaTmp=Right(StringaTmp, StringaTmp.Length()-StringaTmp.IndexOf(",")-1)
			PreviousSelfConsumptionEnergy=CSng(StringaTmp)
		end if
		sr.Close()
' Updating log file
		sw = File.AppendText(path & "\" & DateString & ".txt")
		sw.WriteLine(TimeString & "," & AverageGridRealPower & "," & AveragePVRealPower & "," & AverageLoadRealPower & "," & PreviousGridEnergy+GridEnergy & "," & PreviousPVEnergy+PVEnergy & "," & PreviousLoadEnergy+LoadEnergy & "," & PreviousSelfConsumptionEnergy+SelfConsumptionEnergy)
		sw.Flush()
		sw.Close()
	End If
End Sub

</script>

<html>
<head>
<title>My Energy Monitor Log</title>
</head>
<body>

Date: <% Response.Write(DateString) %><br>
Time: <% Response.Write(TimeString) %><br>
<% 
If (ConnectionOK = true) then 
	Response.Write("Connection: OK<br>") 
else 
	Response.Write("Connection: KO!<br>") 
end if 
If (ParseOK = true) then 
	Response.Write("Data Parsing: OK<br>") 
else 
	Response.Write("Data Parsing: KO!<br>") 
end if 
if ((ConnectionOK = true) And (ParseOK = true)) then
	Response.Write("Average Grid Real Power: " & AverageGridRealPower & " W<br>")
	Response.Write("Grid Energy: " & GridEnergy & " kWh<br>")
	Response.Write("CumulatedGrid Energy: " & PreviousGridEnergy+GridEnergy & " kWh<br>")
	Response.Write("Average PV Real Power: " & AveragePVRealPower & " W<br>")
	Response.Write("PV Energy: " & PVEnergy & " kWh<br>")
	Response.Write("Cumulated PV Energy: " & PreviousPVEnergy+PVEnergy & " kWh<br>")
	Response.Write("Average Load Real Power: " & AverageLoadRealPower & " W<br>")
	Response.Write("Load Energy: " & LoadEnergy & " kWh<br>")
	Response.Write("Cumulated Load Energy: " & PreviousLoadEnergy+LoadEnergy & " kWh<br>")
	Response.Write("Self Consumption Energy: " & SelfConsumptionEnergy & " kWh<br>")
	Response.Write("Cumulated Self Consumption Energy: " & PreviousSelfConsumptionEnergy+SelfConsumptionEnergy & " kWh<br>")
end if %>

</body>
</html>

I dati possono essere fruiti attraverso 3 pagine web: myenergymonitor.html, monitorpowergraphs.aspx e monitorenergygraphs.aspx.
Dalla prima e' possibile monitorare in tempo reale il valore di tensione di rete e potenza attiva, corrente e cosφ per ciascun sensore (Esempio).
Dalla seconda si puo' accedere ai dati di giorni passati e vedere i grafici dell'andamento della potenza e dell'energia nell'arco di una giornata (Esempio).
Dalla terza si e' in grado, sempre accedendo allo storico, di valutare l'andamento della produzione e dei consumi giornalieri in un periodo piu' o meno ampio di tempo (Esempio).

Qui sono riportati i loro codici.

Data can be visualized with 3 web pages: myenergymonitor.html, monitorpowergraphs.aspx and monitorenergygraphs.aspx.
The first one is monitoring real time values of grid voltage and active power, current and cosφ for each sensor (Example).
The second one gives you access to data on previous days and visualizes graphs on power and energy over the day (Example).
The third one reads the datalog and shows graphs about daily generated and consumed energy over a given time span (Example).

Here below are their respective codes:

myenergymonitor.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Energy Monitor</title>
<link href='./style.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////////////////////////
// Energy Monitor Server Address (URL or IP)
var ServerURL = "http://xxx.xxx.xxx.xxx";
/////////////////////////////////////////////////////////////////////////////////////////////////
//Global variables
var Charts=[];
var bool=0;
//
//////Array structurre:
//
//Chart[x][y][z]
//x -> Grid, PV, Load
//y -> Power, Voltage, Current, Power Factor
//z -> Gauge/Bar, Value, div_id, searching string
//
//
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['gauge']});
google.charts.load("current", {packages:["corechart"]});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(Start);
//
//////////////////////////////
//Arrays construction
var div="chart_div";
for(x=0; x<3; x++){
	Charts[x]=[];
		for(y=0; y<4; y++){
			Charts[x][y]=[];
		Charts[x][y][2] = div.concat(x, "_", y);
		}
}
///Values before connection
for(x=0; x<3; x++){
	Charts[x][0][1]=0;
	Charts[x][1][1]=230;
	Charts[x][2][1]=0;
	Charts[x][3][1]=1.00;
}
//Searching strings (for parsing)
var names=["Grid ", "PV ", "Load "];
for(x=0; x<3; x++){
	Charts[x][0][3]=names[x].concat("Real Power: ");
	Charts[x][1][3]=names[x].concat("Voltage: ");
	Charts[x][2][3]=names[x].concat("Current: ");
	Charts[x][3][3]=names[x].concat("Power Factor: ");
}
///FUNCTIONS/////////////////////////////////////////////////////////////////////////////////////////////////////////////
function Start(){
	//Object with options for Gauges and Bars

////Real Power
	//Grid
	Charts[0][0][0] = new Gauge("kW", Charts[0][0][1]/1000, Charts[0][0][2], -4, 4, -4, 0, 0, 3, 3, 4);
	Charts[0][0][0].options.majorTicks = ['-4', '-3', '-2', '-1', '0', '1', '2', '3', '4'];
	//PV
	Charts[1][0][0] = new Gauge("kW", Charts[1][0][1]/1000, Charts[1][0][2], 0, 4, 0, 4, 0, 0, 0, 0);
	Charts[1][0][0].options.majorTicks = ['0', '0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4'];
	//Load
	Charts[2][0][0] = new Gauge("kW", Charts[2][0][1]/1000, Charts[2][0][2], 0, 8, 0, 0, 0, 8, 0, 0);
	Charts[2][0][0].options.majorTicks = ['0', '1', '2', '3', '4', '5', '6', '7', '8'];
	//
	////Voltage
	//Switch between red and green color to generate a gauge with more complex colors sequence (red,yellow,green, yellow, red). Standard available sequence is green,yellow, red only
	for(x=0; x<3; x++){
		Charts[x][1][0] = new Gauge("V", Charts[x][1][1], Charts[x][1][2], 210, 250, 210, 250, 214, 246, 222, 238);
		Charts[x][1][0].options.redColor='#109618';
		Charts[x][1][0].options.greenColor='#DC3912';
		Charts[x][1][0].options.majorTicks = ['210', '215', '220', '225', '230', '235', '240', '245', '250'];
	}
	//
	////Current
	//Grid and PV
	for(x=0; x<2; x++){
		Charts[x][2][0] = new Gauge("A", Charts[x][2][1], Charts[x][2][2], 0, 18, 0, 13, 13, 16, 16, 18);
//		Charts[x][2].options.majorTicks = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18'];
		Charts[x][2][0].options.majorTicks = ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18'];
	}
	//Load
	Charts[2][2][0] = new Gauge("A", Charts[2][2][1], Charts[2][2][2], 0, 30, 0, 22, 22, 27, 27, 30);
	Charts[2][2][0].options.majorTicks = ['0', '3', '6', '9', '12', '15', '18', '21', '24', '27', '30'];
	//
	////Cos(phi)
	for(x=0; x<3; x++){
		Charts[x][3][0] = new Bar(Charts[x][3][1], '#109618', Charts[x][3][2]);
		////////
		for(y=0; y<4; y++){
			Charts[x][y][0].chart.draw(Charts[x][y][0].data, Charts[x][y][0].options);
		}
	}
	loop=setInterval(ObtainData, 1000);
}
///////////
function Bar(value, color, div){
	this.data = google.visualization.arrayToDataTable([
		['', 'Cos(φ)', { role: 'style' }, { role: 'annotation' }],
		['', value, color, value ]
      ]);
	this.options = {
		hAxis: {
			ticks: [-1, -0.75, -0.50, -0.25, 0, 0.25, 0.50, 0.75, 1],
			maxValue: 1,
			minValue: -1,
			viewWindow: {
				max: 1,
				min: -1
			}
		},
		legend: {position: 'none'},
		animation: {easing: 'linear', duration: 250},
		title: "",
		width: 180,
		height: 50
		};
	this.chart = new google.visualization.BarChart(document.getElementById(div));
}
////////////
function Gauge(label, value, div, min, max, greenFrom, greenTo, yellowFrom, yellowTo, redFrom, redTo) {
  this.data = google.visualization.arrayToDataTable([
		['Label', 'Value'],
		[label, value]
	]);
  this.options = {
        width: 180, height: 180,
        redFrom: redFrom, redTo: redTo,
	yellowFrom:yellowFrom, yellowTo: yellowTo,
	greenFrom: greenFrom, greenTo: greenTo,
	min: min,
	max: max,
        minorTicks: 5
        };
  this.chart = new google.visualization.Gauge(document.getElementById(div));
}
//////////////////
function drawChart(){
	for(x=0; x<3; x++){
		Charts[x][0][0].data.setValue(0, 1, Charts[x][0][1]/1000);
		for(y=1; y<4; y++){
	        	Charts[x][y][0].data.setValue(0, 1, Charts[x][y][1]);
		}
		Charts[x][3][0].data.setValue(0, 3, Charts[x][3][1]);
		if(Charts[x][3][1]>0.80 || Charts[x][3][1]<-0.80){Charts[x][3][0].data.setValue(0, 2, '#109618');
		}
		else if(Charts[x][3][1]>0.50 || Charts[x][3][1]<-0.50){Charts[x][3][0].data.setValue(0, 2, '#FF9900');
		}
		else{Charts[x][3][0].data.setValue(0, 2, '#DC3912');
		}
		for(y=0; y<4; y++){
			Charts[x][y][0].chart.draw(Charts[x][y][0].data, Charts[x][y][0].options);
		}
	}
}
/////////////////
function parseData(data) {
	for(x=0; x<3; x++){
		for(y=0; y<3; y++){
		Charts[x][y][1]=parseFloat(data.substring(data.indexOf(Charts[x][y][3])+Charts[x][y][3].length, data.indexOf(" ", data.indexOf(Charts[x][y][3])+Charts[x][y][3].length)), 10);
		}
		Charts[x][3][1]=parseFloat(data.substring(data.indexOf(Charts[x][3][3])+Charts[x][3][3].length, data.indexOf("<br>", data.indexOf(Charts[x][3][3])+Charts[x][3][3].length)), 10);
	}
}
///////////////
function ObtainData() {
  fetch(ServerURL).then(function(response) {
  	response.text().then(function(text) {
		parseData(text);
		document.getElementById("demo").innerHTML = "";
		drawChart();
		bool=1;
  	});
	});
}
////////////////////////////////////////////////////////////////////////////
//Animation
//////////////
var position=0;
var FrameSpeed = 70;
var jump = 1;

<tr><td colspan=4 class=listhdrlr>Graphs</td></tr>
<tr><td colspan=2 class=listr>Power and energy within a day:</td><td class=listbg colspan=2><b><A HREF='../myenergymonitor/monitorpowergraphs.aspx' target='_self'> =>GRAPH</A></b></td></tr>
<tr><td colspan=2 class=listr>Daily energies distribution over a period:</td><td class=listbg colspan=2><b><A HREF='../myenergymonitor/monitorenergygraphs.aspx' target='_self'> =>GRAPH</A></b></td></tr>

</table>

<div id=pagefooter>
Paolo Faure Ragani - <A HREF='https://www.faureragani.it' target='_blank'>www.faureragani.it</A>
</div>
</table>
</body>
</html>

monitorpowergraphs.aspx:

<%@ Page Language="VB" debug="true" EnableViewState="true" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Net.Sockets" %>
<%@ Import Namespace="System.Web" %>

Dim path As String = Server.Mappath(".\log")
Dim sr As StreamReader
Dim DateString as String
Dim StringaDati as String
Dim StringaTmp as String

Sub Page_Load(sender As Object, e As EventArgs)
	CaricaDati()
End Sub

Sub CaricaDati()
If txtDate.Text = "" Then
DateString = DateTime.Now.ToString("yyyy-MM-dd")
txtDate.Text = DateString
Else
DateString = txtDate.Text
end If

If File.Exists(path & "\" & DateString & ".txt") = True Then
	sr = File.OpenText(path & "\" & DateString & ".txt")
	' first line
	StringaTmp=sr.ReadLine()
	StringaDati="["
	Do While InStr(StringaTmp,",") > 0
	   StringaDati=StringaDati & "'" & Left(StringaTmp, InStr(StringaTmp,",")-1) & "'" 
	   StringaTmp=Right(StringaTmp, Len(StringaTmp)-InStr(StringaTmp,","))
	   If InStr(StringaTmp,",") > 0 then
	      StringaDati=StringaDati & ","
	   Else
	      StringaDati=StringaDati & ",'" & StringaTmp & "'"
	   End If
	Loop
	StringaDati=StringaDati & "]"
	' subsequent lines
	Do While sr.Peek() >= 0
	   StringaDati=StringaDati & "," & vbCrLf & "[" 
	   StringaTmp=sr.ReadLine() 
	   StringaDati=StringaDati & "'" & Left(StringaTmp, InStr(StringaTmp,",")-1) & "'" 
	   StringaDati=StringaDati & "," & Right(StringaTmp, Len(StringaTmp)-InStr(StringaTmp,","))
	   StringaDati=StringaDati & "]" 
	Loop
	sr.Close()
Else
	StringaDati="[]"
End If
End Sub

Sub calDate_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs)
txtDate.Text = calDate.SelectedDate.ToString("yyyy-MM-dd")
CaricaDati()
End Sub

</script>

<html>
  <head>
<title>My Energy Monitor - Day Graphs</title>
<link href='./style.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
	var data = google.visualization.arrayToDataTable([<% Response.Write(StringaDati) %>]);
	var view = new google.visualization.DataView(data);
	view.setColumns([0,1,2,3]);
	view.hideColumns([4,5,6,7]);
	var chart = new google.visualization.LineChart(document.getElementById('powerchart_div'));
	var options = {
		title: 'Power (W)',
		legend: { position: 'top', alignment: 'start'},
		chartArea: {width: '80%'}

};
	chart.draw(view, options);
	var view = new google.visualization.DataView(data);
	view.setColumns([0,4,5,6,7]);
	view.hideColumns([1,2,3]);
	var chart = new google.visualization.LineChart(document.getElementById('energychart_div'));
	var options = {
	title: 'Energy (kWh)',
	legend: { position: 'top', alignment: 'start'},
	chartArea: {width: '80%'}
	};
	chart.draw(view, options);
	}
</script>

</head>
<body>
<table width=750px cellspacing=0 cellpadding=0 border=0>
<tr><td colspan=2 class=listhdrlr>Power and energy within a day</td></tr>
<tr><td colspan=2 class=listr>
<form id="form1" runat="server" >
<div align="center"> Select day: <asp:TextBox id="txtDate" Runat="server" /></div>
<div id="dateField" align="center">
<asp:Calendar id="calDate" OnSelectionChanged="calDate_SelectionChanged" Runat="server" /></div> 
</form>
</td></tr>
<tr><td colspan=2 class=listr>
<div id="powerchart_div" style="width: 100%; height: 450px;"></div>
</td></tr>
<tr><td colspan=2 class=listr>
<div id="energychart_div" style="width: 100%; height: 350px;"></div>
</td></tr>
<tr><td colspan=2 class=listhdrlr>Monitoring page and energy graphs</td></tr>
<tr><td class=listr>Daily energies distribution over a period</td><td class=listbg ><b><A HREF='../myenergymonitor/monitorenergygraphs.aspx' target='_self'> =>GRAPH</A></b></td>
</tr>
<tr><td class=listr> Main monitoring page</td><td class=listbg ><b><A HREF='../myenergymonitor/myenergymonitor.html' target='_self'> <=LINK BACK</A></b></td>
</tr>
</table>

</body>
</html>

monitorenergygraphs.aspx:

<%@ Page Language="VB" debug="true" EnableViewState="true" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Net.Sockets" %>
<%@ Import Namespace="System.Web" %>

Dim path As String = Server.Mappath(".\log")
Dim DateString1 as String
Dim DateString2 as String
Dim DateStringTmp as String
Dim DateTmp as Date
Dim StringaDati as String
Dim StringaTmp as String
Dim i as Integer
Dim NDays as Integer
Dim TotalGridEnergy as Single
Dim MeanGridEnergy as Single
Dim DayGridEnergy as Single
Dim TotalPVEnergy as Single
Dim MeanPVEnergy as Single
Dim DayPVEnergy as Single
Dim TotalLoadEnergy as Single
Dim MeanLoadEnergy as Single
Dim DayLoadEnergy as Single
Dim TotalSelfConsumptionEnergy as Single
Dim MeanSelfConsumptionEnergy as Single
Dim DaySelfConsumptionEnergy as Single

Sub Page_Load(sender As Object, e As EventArgs)
' English international settings (dot as decimal separator)
	Session.LCID = 1033	
	CaricaDati()
End Sub

Sub CaricaDati()
If txtDate1.Text = "" Then
	DateString1 = DateTime.Now.AddDays(-DateTime.Now.Day+1).ToString("yyyy-MM-dd")
	txtDate1.Text = DateString1
Else
	DateString1 = txtDate1.Text
end If

If txtDate2.Text = "" Then
	DateString2 = DateTime.Now.ToString("yyyy-MM-dd")
	txtDate2.Text = DateString2
Else
	DateString2 = txtDate2.Text
end If

' data reading loop start (all daily files to be open)
StringaDati="['Date', 'Grid Energy', 'PV Energy', 'Load Energy', 'Self Consumption Energy']," & vbCrLf
TotalGridEnergy = 0.0
TotalPVEnergy = 0.0
TotalLoadEnergy = 0.0
TotalSelfConsumptionEnergy = 0.0
NDays = DateDiff("d", DateString1, DateString2) + 1
For i = 0 to NDays-1
	DateStringTmp=DateAdd("d",i,DateString1).ToString("yyyy-MM-dd")
	If File.Exists(path & "\" & DateStringTmp & ".txt") Then
		StringaTmp=File.ReadAllText(path & "\" & DateStringTmp & ".txt")
		If IsNumeric(Right(StringaTmp, Len(StringaTmp)-InStrRev(StringaTmp,","))) Then
			DaySelfConsumptionEnergy=CSng(Right(StringaTmp, Len(StringaTmp)-InStrRev(StringaTmp,",")))
		Else
			DaySelfConsumptionEnergy=0.0
		End If
		StringaTmp=Left(StringaTmp, InStrRev(StringaTmp,",")-1)
		If IsNumeric(Right(StringaTmp, Len(StringaTmp)-InStrRev(StringaTmp,","))) Then
			DayLoadEnergy=CSng(Right(StringaTmp, Len(StringaTmp)-InStrRev(StringaTmp,",")))
		Else
			DayLoadEnergy=0.0
		End If
		StringaTmp=Left(StringaTmp, InStrRev(StringaTmp,",")-1)
		If IsNumeric(Right(StringaTmp, Len(StringaTmp)-InStrRev(StringaTmp,","))) Then
			DayPVEnergy=CSng(Right(StringaTmp, Len(StringaTmp)-InStrRev(StringaTmp,",")))
		Else
			DayPVEnergy=0.0
		End If
		StringaTmp=Left(StringaTmp, InStrRev(StringaTmp,",")-1)
		If IsNumeric(Right(StringaTmp, Len(StringaTmp)-InStrRev(StringaTmp,","))) Then
			DayGridEnergy=CSng(Right(StringaTmp, Len(StringaTmp)-InStrRev(StringaTmp,",")))
		Else
			DayGridEnergy=0.0
		End If
	Else
		DayGridEnergy=0.0
		DayPVEnergy=0.0
		DayLoadEnergy=0.0
		DaySelfConsumptionEnergy=0.0
		
	End If
	TotalGridEnergy=TotalGridEnergy+DayGridEnergy
	TotalPVEnergy=TotalPVEnergy+DayPVEnergy
	TotalLoadEnergy=TotalLoadEnergy+DayLoadEnergy
	TotalSelfConsumptionEnergy=TotalSelfConsumptionEnergy+DaySelfConsumptionEnergy
	StringaDati=StringaDati & "['" & DateStringTmp & "'," & CStr(DayGridEnergy) & "," & CStr(DayPVEnergy) & "," & CStr(DayLoadEnergy) & "," & CStr(DaySelfConsumptionEnergy) & "]" 
	If i < DateDiff("d", DateString1, DateString2) Then
		StringaDati = StringaDati & "," & vbCrLf
	End If
Next
MeanGridEnergy=TotalGridEnergy/NDays
MeanPVEnergy=TotalPVEnergy/NDays
MeanLoadEnergy=TotalLoadEnergy/NDays
MeanSelfConsumptionEnergy=TotalSelfConsumptionEnergy/NDays
End sub

Sub calDate1_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs)
txtDate1.Text = calDate1.SelectedDate.ToString("yyyy-MM-dd")
CaricaDati()
End Sub

Sub calDate2_SelectionChanged(ByVal sender As Object, ByVal e As EventArgs)
txtDate2.Text = calDate2.SelectedDate.ToString("yyyy-MM-dd")
CaricaDati()
End Sub

</script>

<html>
  <head>
<title>My Energy Monitor - Energy Graphs</title>
<link href='./style.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
	var data = google.visualization.arrayToDataTable([<% Response.Write(StringaDati) %>]);
	var view = new google.visualization.DataView(data);
	var chart = new google.visualization.ColumnChart(document.getElementById('day_energy_barchart_div'));
	var options = {
		title: 'Daily Energy (kWh)', 
		legend: { position: 'top'},
		chartArea: {width: '80%'}
	};
	chart.draw(view, options);
	var view = new google.visualization.DataView(data);
	var chart = new google.visualization.Histogram(document.getElementById('energy_count_chart_div'));
	var options = {
		title: 'Daily energy distribution (days)',
		legend: { position: 'top', maxLines: 2 },
		chartArea: {width: '80%'}
	};
	chart.draw(view, options);
}
</script>

</head>
<body>
<table width=750px cellspacing=0 cellpadding=0 border=0>
<tr><td colspan=2 class=listhdrlr>Daily energies distribution over a period</td></tr>
<tr><td colspan=1 class=listr>
<form id="form1" runat="server" >
<div>From: <asp:TextBox id="txtDate1" Runat="server" /></div>
<div id="dateField" >
<asp:Calendar id="calDate1" OnSelectionChanged="calDate1_SelectionChanged" Runat="server" /></div> 
</td><td colspan=1 class=listr>
<div>To: <asp:TextBox id="txtDate2" Runat="server" /></div>
<div id="dateField" >
<asp:Calendar id="calDate2" OnSelectionChanged="calDate2_SelectionChanged" Runat="server" /></div> 
</form>
</td></tr>
<tr><td colspan=1 class=listr width=50%>Number of Days: </td><td class=listbg width=50% colspan=1><b><% Response.Write(NDays) %></b></td></tr>
<tr><td colspan=1 class=listr width=50%>Total Grid Energy for this period: </td><td class=listbg width=50% colspan=1><b><% Response.Write(TotalGridEnergy) %></b></td></tr>
<tr><td colspan=1 class=listr width=50%>Mean Daily Grid Energy: </td><td class=listbg width=50% colspan=1><b><% Response.Write(MeanGridEnergy) %></b></td></tr>
<tr><td colspan=1 class=listr width=50%>Total PV Energy for this period: </td><td class=listbg width=50% colspan=1><b><% Response.Write(TotalPVEnergy) %></b></td></tr>
<tr><td colspan=1 class=listr width=50%>Mean Daily PV Energy: </td><td class=listbg width=50% colspan=1><b><% Response.Write(MeanPVEnergy) %></b></td></tr>
<tr><td colspan=1 class=listr width=50%>Total Load Energy for this period: </td><td class=listbg width=50% colspan=1><b><% Response.Write(TotalLoadEnergy) %></b></td></tr>
<tr><td colspan=1 class=listr width=50%>Mean Daily Load Energy: </td><td class=listbg width=50% colspan=1><b><% Response.Write(MeanLoadEnergy) %></b></td></tr>
<tr><td colspan=1 class=listr width=50%>Total Self Consumption Energy for this period: </td><td class=listbg width=50% colspan=1><b><% Response.Write(TotalSelfConsumptionEnergy) %></b></td></tr>
<tr><td colspan=1 class=listr width=50%>Mean Daily Self Consumption Energy: </td><td class=listbg width=50% colspan=1><b><% Response.Write(MeanSelfConsumptionEnergy) %></b></td></tr>
<tr><td colspan=2 class=listr>
<div id="day_energy_barchart_div" style="width: 100%; height: 350px;"></div>
</td></tr>
<tr><td colspan=2 class=listr>
<div id="energy_count_chart_div" style="width: 100%; height: 400px;"></div>
</td></tr>
<tr><td colspan=2 class=listhdrlr>Monitoring page and energy graphs</td></tr>
<tr><td class=listr>Power and energy within a day:</td><td class=listbg ><b><A HREF='../myenergymonitor/monitorpowergraphs.aspx' target='_self'> =>GRAPH</A></b></td>
</tr>
<tr><td class=listr> Main monitoring page:</td><td class=listbg ><b><A HREF='../myenergymonitor/myenergymonitor.html' target='_self'> <=LINK BACK</A></b></td>
</tr>
</table>

</body>
</html>

Nella stessa cartella di queste pagine deve essere inserito anche il file style.css, necessario per la loro corretta visualizzazione. The same folder should host the style.css file as well to ensure a proper visualization.

style.css:

.icons {
  position: absolute;
  height: 100%;
}
.arrows {
  position: absolute;
  height: 50%;
  top: 25px;
  display: none;
}
#pylons {
  left: 0px;
}
#house {
  left: 220px;
}
#sun {
  right: 0px;
}
#moon {
  right: 0px;
  display: none;
}
body {
  background: none repeat scroll 0 0 #F7F7F7;
  margin: 0 auto;
  font-family: Tahoma,Verdana,Arial,Helvetica,sans-serif;
  padding: 0;
}

div#pagefooter {
  border: 1px solid #DEDBD1;
  margin: 15px 15px 10px;
  padding: 0 15px 15px;
  color: #777777;
  font-size: 11px;
  text-align: center;
}
.listhdrlr {
  background: url("./images/gradient_listhdr.png") repeat-x scroll left top #BBBBBB;
  border-bottom: 1px solid #999999;
  border-right: 1px solid #999999;
  border-left: 1px solid #BBBBBB;
  font-size: 11px;
  font-weight: bold;
  padding: 5px 16px 5px 6px;
  white-space: nowrap;
  vertical-align: top;
}

.listr {
  background-color: #FFFFFF;
  border-bottom: 1px solid #999999;
  border-right: 1px solid #999999;
  font-size: 11px;
  padding: 4px 6px;
  cursor: pointer;
}
.listbg {
  background-color: #D9DEE8;
  border-bottom: 1px solid #999999;
  border-right: 1px solid #999999;
  padding-left: 6px;
  font-size: 11px;
}

In aggiunta, toccando il Touch Sensor, verranno mostrati sullo schermo OLED collegato all'Arduino i valori istantanei di potenza attiva per ciascun sensore (Esempio).

Tutti i file necessari per realizzare il progetto possono essere scaricati a questo link.

When touching the touch sensor, instantaneous values of active power from each sensor are shown on the OLED display connected to Arduino (Example).

All files needed to build this project can be downloaded at this link.

"Arduino", "ESP8266", "TTP223B", "UptimeRobot" ed altri marchi citati in queste pagine sono proprieta' dei rispettivi titolari.
Le immagini dei collegamenti e dello schema circuitale sono state create con "Fritzing". "Arduino", "ESP8266", "TTP223B", "UptimeRobot" and other brands mentioned in these pages are trademarks of their respective owners.
Images of connections and schematics were created using "Fritzing".