Памяти у нас много, флэш тоже. Поэтому мы можем изгаляться как хотим.
Тема урока: графики.
Есть такая штука для рисования графиков - http://www.highcharts.com/
Все достаточно просто, но вот примеров простых(!) не хватает. Все бы им PHP, MySQL, и прочие навороты. Но у нас то этого барахла нет ! А красивый график показаний охота.
А пожалуйста !
В примере 2 типа основных графиков - chart и stock.
Странички в виде констант в PROGMEM.
Так же пример работы ntp, потому как график показаний без реального времени фигня.
Разбираемся, комментируем ...
Тема урока: графики.
Есть такая штука для рисования графиков - http://www.highcharts.com/
Все достаточно просто, но вот примеров простых(!) не хватает. Все бы им PHP, MySQL, и прочие навороты. Но у нас то этого барахла нет ! А красивый график показаний охота.
А пожалуйста !
В примере 2 типа основных графиков - chart и stock.
Странички в виде констант в PROGMEM.
Так же пример работы ntp, потому как график показаний без реального времени фигня.
Разбираемся, комментируем ...
Код:
#include <FS.h> //this needs to be first, or it all crashes and burns...
#include <ESP8266WiFi.h> //https://github.com/esp8266/Arduino
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiUdp.h>
#include <WiFiManager.h> //https://github.com/tzapu/WiFiManager
#include <time.h>
#define debug true
ESP8266WebServer server(80);
int co2a[60];
long co2t[60];
const char PAGE_stock[] PROGMEM = R"=====(
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<title>Stock</title>
<script type='text/javascript'>//<![CDATA[
$(function () {
$.getJSON('data.json', function (data) {
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'CO2PPM'
},
series : [{
name : 'CO2:',
data : data,
tooltip: {
valueDecimals: 0
}
}]
});
});
});
//]]>
</script>
</head>
<body>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js" type="text/javascript"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
<a href="/chart.html">Chart</a>
</body>
</html>)=====";
const char PAGE_chart[] PROGMEM = R"=====(
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chart</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
title: {
text: 'CO2'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'CO2 (PPM)'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true
}
},
series: [{
type: 'spline',
name: 'CO2 Sensor data',
tooltip: {
valueDecimals: 0,
valueSuffix: 'PPM'
}
}]
};
$.getJSON('data.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
//]]>
</script>
</head>
<body>
<script src="https://code.highcharts.com/stock/highstock.js" type="text/javascript"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js" type="text/javascript"></script>
<div id="container" style="height: 400px; min-width: 310px"></div>
<a href="/stock.html">Stock</a>
</body>
</html>
)=====";
void wifimanstart() { // Волшебная процедура начального подключения к Wifi.
// Если не знает к чему подцепить - создает точку доступа ESP8266 и настроечную таблицу http://192.168.4.1
// Подробнее: https://github.com/tzapu/WiFiManager
WiFiManager wifiManager;
wifiManager.setDebugOutput(debug);
wifiManager.setMinimumSignalQuality();
if (!wifiManager.autoConnect("ESP8266")) {
if (debug) Serial.println("failed to connect and hit timeout");
delay(3000);
//reset and try again, or maybe put it to deep sleep
ESP.reset();
delay(5000); }
if (debug) Serial.println("connected...");
}
void processCSV()
{
String str = "[\n";
for (int i=0; i<=59; i++) {
if ((i>0)&&(String(co2t[i])!="0")) str +=",\n";
if (String(co2t[i])!="0") str += "["+String(co2t[i])+"000,"+String(co2a[i])+"]";}
str +="\n]";
server.send ( 200, "application/json", str);
}
void ServerInit() {
server.on ( "/", []() { server.send ( 200, "text/html", PAGE_chart ); });
server.on ( "/chart.html", []() { server.send ( 200, "text/html", PAGE_chart ); });
server.on ( "/stock.html", []() { server.send ( 200, "text/html", PAGE_stock ); });
server.on ( "/data.json", processCSV );
server.onNotFound ( []() { Serial.println("Page Not Found"); server.send ( 400, "text/html", "Page not Found" ); } );
server.begin();
}
int timezone = 3;
int dst = 0;
time_t now;
void setup() {
Serial.begin(115200);
wifimanstart();
configTime(timezone * 3600, 0, "pool.ntp.org", "time.nist.gov");
if (debug) Serial.print("\nWaiting for time");
while (!time(nullptr)) { if (debug) Serial.print("."); delay(200);} if (debug) Serial.println("");
now = time(nullptr);
Serial.print("Unix time:");Serial.println(now);
Serial.println(ctime(&now));
for (int i=0; i<=59; i++) {co2t[i]=(now-3600)+(60*i); co2a[i]=random(100,1000);} //co2t - datetime измерения в формате unixtime, co2a - значение измерения
ServerInit();
Serial.print("http://"); Serial.print(WiFi.localIP());Serial.println("/");
}
void loop() {
server.handleClient();
yield();
}
