- Sun Nov 01, 2015 2:50 pm
#32772
I have a few lines from an Environment logger to offer to anyone logging to SD or Similar, the data is saved to the SPI FLASH (3MB usable on -12) in the format for Google Charts but can easily be chopped and presented using the following snippets....
Install the FS Tool and upload webpages to SPIFFS
If the Webpage files are KEPT below 2KB then there is no need to chop them up to send, just save the file in 2KB chunks...index1.htm, index2.htm etc.....then send each file consecutively......
Using lots of SPIFFS but virtually no memory or sketch space.....
Manage your files and send old data to an email address before clearing....
The FS needs included as does the "user_interface.h" to allow the SDK Functions like ESP.getVcc()
This is saving to an already existing file create a new file with "w".
This is to present a table within a webpage from the file Above....Sent 1 line at a time, fast enough....
Finally the Google chart data, the files can be as large as SPIFFS Allows, again 1 line at a time...
First Part Google Chart Web Page.....save as graphp01.htm
Second Part Google Chart Web Page.....save as graphp02.htm
Install the FS Tool and upload webpages to SPIFFS
If the Webpage files are KEPT below 2KB then there is no need to chop them up to send, just save the file in 2KB chunks...index1.htm, index2.htm etc.....then send each file consecutively......
Using lots of SPIFFS but virtually no memory or sketch space.....
Manage your files and send old data to an email address before clearing....
The FS needs included as does the "user_interface.h" to allow the SDK Functions like ESP.getVcc()
This is saving to an already existing file create a new file with "w".
Code: Select all
logdata = "['";
if (tm.Hour <10){logdata += "0";}
logdata += tm.Hour;
logdata += ":";
if (tm.Minute <10){logdata += "0";}
logdata += tm.Minute;
logdata += "-";
if (tm.Day <10){logdata += "0";}
logdata += tm.Day;
logdata += "/";
if (tm.Month <10){logdata += "0";}
logdata += tm.Month;
logdata += "',";
logdata += tI;
logdata += ",";
logdata += hI;
logdata += ",";
logdata += t1;
logdata += ",";
logdata += h1;
logdata += ",";
logdata += itemp1;
logdata += ",";
logdata += servolt1/1000, 3;
logdata += "],";
dataFile1 = SPIFFS.open("/humidlog.CSV", "a");
if (dataFile1) {
dataFile1.print(logdata);
Dfsize = dataFile1.size();
dataFile1.close();
delay(1);
}
else {
lcd.clear();
lcd.print("rOr humidlog.CSV");
}
This is to present a table within a webpage from the file Above....Sent 1 line at a time, fast enough....
Code: Select all
File logF = SPIFFS.open("/humidlog.CSV", "r");
if (!logF) {
lcd.clear();
lcd.print("rOr humidlog.CSV");
}
String sTable;
String DsTable; //Discarded characters used to seperate the data into single readings
sTable = "<table style=\"width:100%\"><tr><th>Time / GMT</th><th>Date </th><th>IntT °C</th><th>IntHum %</th><th>ExtT °C</th><th>ExtHum %</th><th>SysTemp °C</th><th>Vcc V</th></tr>";
sTable += "<style>table, th, td {border: 2px solid black; border-collapse: collapse;} th, td {padding: 5px;} th {text-align: left;}</style><tr><td>";
DsTable = logF.readStringUntil('\'');
logF.setTimeout(0);
while(logF.available()) {
sTable += logF.readStringUntil('-');
sTable += "</td><td>";
sTable += logF.readStringUntil('\'');
sTable += "</td><td>";
DsTable = logF.readStringUntil(',');
sTable += logF.readStringUntil(',');
sTable += "</td><td>";
sTable += logF.readStringUntil(',');
sTable += "</td><td>";
sTable += logF.readStringUntil(',');
sTable += "</td><td>";
sTable += logF.readStringUntil(',');
sTable += "</td><td>";
sTable += logF.readStringUntil(',');
sTable += "</td><td>";
sTable += logF.readStringUntil(']');
sTable+="</td></tr>";
client.print(sTable);
DsTable = logF.readStringUntil('\'');
sTable = "<tr><td>";
}
logF.close();
Finally the Google chart data, the files can be as large as SPIFFS Allows, again 1 line at a time...
Code: Select all
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
client.println("<!DOCTYPE HTML>");
File webFile1 = SPIFFS.open("/graphp01.htm", "r"); // open web page file
if (webFile1) {
while(webFile1.available()) {
client.print(webFile1.readString()); // send web page to client
}
webFile1.close();
}
File in = SPIFFS.open("/humidlog.CSV", "r");
if (!in) {
lcd.clear();
lcd.print("rOr humidlog.CSV");
}
String sTable; //Send Log as a String, formatting for webpage via ' , written into file
String DsTable; //Discarded characters used to seperate the data into single records
sTable = "";
in.setTimeout(0);
while(in.available()) {
sTable += in.readStringUntil(']');
sTable += "],";
client.println(sTable);
DsTable = in.readStringUntil('[');
sTable="[";
}
in.close();
File webFile2 = SPIFFS.open("/graphp02.htm", "r"); // open web page file
if (webFile2) {
while(webFile2.available()) {
client.print(webFile2.readString()); // send web page to client
}
webFile2.close();
}
First Part Google Chart Web Page.....save as graphp01.htm
Code: Select all
<html>
<head>
<title>Environment Monitor</title>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<script type="text/javascript"> google.setOnLoadCallback(drawChart);
function drawChart() {var data = google.visualization.arrayToDataTable([
['Time / GMT', 'InTmp', 'InHum', 'ExTmp', 'ExHum', 'SysT', 'Vcc'],
Second Part Google Chart Web Page.....save as graphp02.htm
Code: Select all
]);
var options = {title: 'Environment',vAxes:{0:{viewWindowMode:'explicit',gridlines:{color:'black'},format:"##.##°C"},1: {gridlines:{color:'transparent'},format:"##,##%"},},series:{0:{targetAxisIndex:0},1:{targetAxisIndex:1},2:{targetAxisIndex:0},3:{targetAxisIndex:1},4:{targetAxisIndex:0},5:{targetAxisIndex:0},},curveType:'function',legend:{ position: 'bottom'}};var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));chart.draw(data, options);}
</script>
</head>
<body>
<font color="#000000"><body bgcolor="#d0d0f0"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"><h1>Environment Monitor</h1><BR><a href="/">Sensor Gauges Page</a><BR><a href="/table">Sensor Datalog Page</a><BR><a href="/diag">Diagnostics Page</a><BR><BR>
<div id="curve_chart" style="width: 800px; height: 600px"></div> <BR>environmental.monitor.log@gmail.com<BR><FONT SIZE=-2>ESP8266 With 1602 I2C LCD, DS1307, BMP180 and 2 DHT11 Peripherals Logging to SPIFFS<BR><FONT SIZE=-2>Compiled Using ver. 1.6.5-1160-gef26c5f, built on Sep 30, 2015</body></html>
