mirror of
https://github.com/esp8266/Arduino.git
synced 2025-04-22 21:23:07 +03:00
Graph example (#7299)
* New Graph Example * Now using isFlashInterfacePin() no define default GPIO mask. * Added info about zooming. * Adressed requested changes (boolean > bool, using esp8266::polledTimeout::periodicMs, reducing complexity)
This commit is contained in:
vdeconinck
GitHub
parent
8ee67ab2b5
commit
c3796a4de5
332
libraries/ESP8266WebServer/examples/Graph/Graph.ino
Normal file
332
libraries/ESP8266WebServer/examples/Graph/Graph.ino
Normal file
@ -0,0 +1,332 @@
|
|||||||
|
/*
|
||||||
|
Graph - A web-based Graph display of ESP8266 data
|
||||||
|
|
||||||
|
This file is part of the ESP8266WebServer library for Arduino environment.
|
||||||
|
|
||||||
|
This library is free software; you can redistribute it and/or
|
||||||
|
modify it under the terms of the GNU Lesser General Public
|
||||||
|
License as published by the Free Software Foundation; either
|
||||||
|
version 2.1 of the License, or (at your option) any later version.
|
||||||
|
|
||||||
|
This library is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||||
|
Lesser General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Lesser General Public
|
||||||
|
License along with this library; if not, write to the Free Software
|
||||||
|
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
|
||||||
|
|
||||||
|
See readme.md for more information.
|
||||||
|
*/
|
||||||
|
|
||||||
|
////////////////////////////////
|
||||||
|
|
||||||
|
// Select the FileSystem by uncommenting one of the lines below
|
||||||
|
|
||||||
|
//#define USE_SPIFFS
|
||||||
|
#define USE_LITTLEFS
|
||||||
|
//#define USE_SDFS
|
||||||
|
|
||||||
|
////////////////////////////////
|
||||||
|
|
||||||
|
#include <ESP8266WiFi.h>
|
||||||
|
#include <WiFiClient.h>
|
||||||
|
#include <ESP8266WebServer.h>
|
||||||
|
#include <ESP8266mDNS.h>
|
||||||
|
#include <SPI.h>
|
||||||
|
|
||||||
|
#if defined USE_SPIFFS
|
||||||
|
#include <FS.h>
|
||||||
|
FS* fileSystem = &SPIFFS;
|
||||||
|
SPIFFSConfig fileSystemConfig = SPIFFSConfig();
|
||||||
|
#elif defined USE_LITTLEFS
|
||||||
|
#include <LittleFS.h>
|
||||||
|
FS* fileSystem = &LittleFS;
|
||||||
|
LittleFSConfig fileSystemConfig = LittleFSConfig();
|
||||||
|
#elif defined USE_SDFS
|
||||||
|
#include <SDFS.h>
|
||||||
|
FS* fileSystem = &SDFS;
|
||||||
|
SDFSConfig fileSystemConfig = SDFSConfig();
|
||||||
|
// fileSystemConfig.setCSPin(chipSelectPin);
|
||||||
|
#else
|
||||||
|
#error Please select a filesystem first by uncommenting one of the "#define USE_xxx" lines at the beginning of the sketch.
|
||||||
|
#endif
|
||||||
|
|
||||||
|
|
||||||
|
#define DBG_OUTPUT_PORT Serial
|
||||||
|
|
||||||
|
#ifndef STASSID
|
||||||
|
#define STASSID "your-ssid"
|
||||||
|
#define STAPSK "your-password"
|
||||||
|
#endif
|
||||||
|
|
||||||
|
// Indicate which digital I/Os should be displayed on the chart.
|
||||||
|
// From GPIO16 to GPIO0, a '1' means the corresponding GPIO will be shown
|
||||||
|
// e.g. 0b11111000000111111
|
||||||
|
unsigned int gpioMask;
|
||||||
|
|
||||||
|
const char* ssid = STASSID;
|
||||||
|
const char* password = STAPSK;
|
||||||
|
const char* host = "graph";
|
||||||
|
|
||||||
|
ESP8266WebServer server(80);
|
||||||
|
|
||||||
|
static const char TEXT_PLAIN[] PROGMEM = "text/plain";
|
||||||
|
static const char FS_INIT_ERROR[] PROGMEM = "FS INIT ERROR";
|
||||||
|
static const char FILE_NOT_FOUND[] PROGMEM = "FileNotFound";
|
||||||
|
|
||||||
|
////////////////////////////////
|
||||||
|
// Utils to return HTTP codes
|
||||||
|
|
||||||
|
void replyOK() {
|
||||||
|
server.send(200, FPSTR(TEXT_PLAIN), "");
|
||||||
|
}
|
||||||
|
|
||||||
|
void replyOKWithMsg(String msg) {
|
||||||
|
server.send(200, FPSTR(TEXT_PLAIN), msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
void replyNotFound(String msg) {
|
||||||
|
server.send(404, FPSTR(TEXT_PLAIN), msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
void replyBadRequest(String msg) {
|
||||||
|
DBG_OUTPUT_PORT.println(msg);
|
||||||
|
server.send(400, FPSTR(TEXT_PLAIN), msg + "\r\n");
|
||||||
|
}
|
||||||
|
|
||||||
|
void replyServerError(String msg) {
|
||||||
|
DBG_OUTPUT_PORT.println(msg);
|
||||||
|
server.send(500, FPSTR(TEXT_PLAIN), msg + "\r\n");
|
||||||
|
}
|
||||||
|
|
||||||
|
////////////////////////////////
|
||||||
|
// Request handlers
|
||||||
|
|
||||||
|
/*
|
||||||
|
Read the given file from the filesystem and stream it back to the client
|
||||||
|
*/
|
||||||
|
bool handleFileRead(String path) {
|
||||||
|
DBG_OUTPUT_PORT.println(String("handleFileRead: ") + path);
|
||||||
|
|
||||||
|
if (path.endsWith("/")) {
|
||||||
|
path += "index.htm";
|
||||||
|
}
|
||||||
|
|
||||||
|
String contentType = mime::getContentType(path);
|
||||||
|
|
||||||
|
if (!fileSystem->exists(path)) {
|
||||||
|
// File not found, try gzip version
|
||||||
|
path = path + ".gz";
|
||||||
|
}
|
||||||
|
if (fileSystem->exists(path)) {
|
||||||
|
File file = fileSystem->open(path, "r");
|
||||||
|
if (server.streamFile(file, contentType) != file.size()) {
|
||||||
|
DBG_OUTPUT_PORT.println("Sent less data than expected!");
|
||||||
|
}
|
||||||
|
file.close();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
The "Not Found" handler catches all URI not explicitely declared in code
|
||||||
|
First try to find and return the requested file from the filesystem,
|
||||||
|
and if it fails, return a 404 page with debug information
|
||||||
|
*/
|
||||||
|
void handleNotFound() {
|
||||||
|
String uri = ESP8266WebServer::urlDecode(server.uri()); // required to read paths with blanks
|
||||||
|
|
||||||
|
if (handleFileRead(uri)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dump debug data
|
||||||
|
String message;
|
||||||
|
message.reserve(100);
|
||||||
|
message = F("Error: File not found\n\nURI: ");
|
||||||
|
message += uri;
|
||||||
|
message += F("\nMethod: ");
|
||||||
|
message += (server.method() == HTTP_GET) ? "GET" : "POST";
|
||||||
|
message += F("\nArguments: ");
|
||||||
|
message += server.args();
|
||||||
|
message += '\n';
|
||||||
|
for (uint8_t i = 0; i < server.args(); i++) {
|
||||||
|
message += F(" NAME:");
|
||||||
|
message += server.argName(i);
|
||||||
|
message += F("\n VALUE:");
|
||||||
|
message += server.arg(i);
|
||||||
|
message += '\n';
|
||||||
|
}
|
||||||
|
message += "path=";
|
||||||
|
message += server.arg("path");
|
||||||
|
message += '\n';
|
||||||
|
DBG_OUTPUT_PORT.print(message);
|
||||||
|
|
||||||
|
return replyNotFound(message);
|
||||||
|
}
|
||||||
|
|
||||||
|
void setup(void) {
|
||||||
|
////////////////////////////////
|
||||||
|
// SERIAL INIT
|
||||||
|
DBG_OUTPUT_PORT.begin(115200);
|
||||||
|
DBG_OUTPUT_PORT.setDebugOutput(true);
|
||||||
|
DBG_OUTPUT_PORT.print('\n');
|
||||||
|
|
||||||
|
////////////////////////////////
|
||||||
|
// FILESYSTEM INIT
|
||||||
|
|
||||||
|
fileSystemConfig.setAutoFormat(false);
|
||||||
|
fileSystem->setConfig(fileSystemConfig);
|
||||||
|
bool fsOK = fileSystem->begin();
|
||||||
|
DBG_OUTPUT_PORT.println(fsOK ? F("Filesystem initialized.") : F("Filesystem init failed!"));
|
||||||
|
|
||||||
|
////////////////////////////////
|
||||||
|
// PIN INIT
|
||||||
|
pinMode(4, INPUT);
|
||||||
|
pinMode(12, OUTPUT);
|
||||||
|
pinMode(13, OUTPUT);
|
||||||
|
pinMode(15, OUTPUT);
|
||||||
|
|
||||||
|
////////////////////////////////
|
||||||
|
// WI-FI INIT
|
||||||
|
DBG_OUTPUT_PORT.printf("Connecting to %s\n", ssid);
|
||||||
|
WiFi.mode(WIFI_STA);
|
||||||
|
WiFi.begin(ssid, password);
|
||||||
|
// Wait for connection
|
||||||
|
while (WiFi.status() != WL_CONNECTED) {
|
||||||
|
delay(500);
|
||||||
|
DBG_OUTPUT_PORT.print(".");
|
||||||
|
}
|
||||||
|
DBG_OUTPUT_PORT.println("");
|
||||||
|
DBG_OUTPUT_PORT.print(F("Connected! IP address: "));
|
||||||
|
DBG_OUTPUT_PORT.println(WiFi.localIP());
|
||||||
|
|
||||||
|
////////////////////////////////
|
||||||
|
// MDNS INIT
|
||||||
|
if (MDNS.begin(host)) {
|
||||||
|
MDNS.addService("http", "tcp", 80);
|
||||||
|
DBG_OUTPUT_PORT.print(F("Open http://"));
|
||||||
|
DBG_OUTPUT_PORT.print(host);
|
||||||
|
DBG_OUTPUT_PORT.println(F(".local to open the graph page"));
|
||||||
|
}
|
||||||
|
|
||||||
|
////////////////////////////////
|
||||||
|
// WEB SERVER INIT
|
||||||
|
|
||||||
|
//get heap status, analog input value and all GPIO statuses in one json call
|
||||||
|
server.on("/espData", HTTP_GET, []() {
|
||||||
|
String json;
|
||||||
|
json.reserve(88);
|
||||||
|
json = "{\"time\":";
|
||||||
|
json += millis();
|
||||||
|
json += ", \"heap\":";
|
||||||
|
json += ESP.getFreeHeap();
|
||||||
|
json += ", \"analog\":";
|
||||||
|
json += analogRead(A0);
|
||||||
|
json += ", \"gpioMask\":";
|
||||||
|
json += gpioMask;
|
||||||
|
json += ", \"gpioData\":";
|
||||||
|
json += (uint32_t)(((GPI | GPO) & 0xFFFF) | ((GP16I & 0x01) << 16));
|
||||||
|
json += "}";
|
||||||
|
server.send(200, "text/json", json);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Default handler for all URIs not defined above
|
||||||
|
// Use it to read files from filesystem
|
||||||
|
server.onNotFound(handleNotFound);
|
||||||
|
|
||||||
|
|
||||||
|
// Start server
|
||||||
|
server.begin();
|
||||||
|
DBG_OUTPUT_PORT.println("HTTP server started");
|
||||||
|
|
||||||
|
DBG_OUTPUT_PORT.println("Please pull GPIO4 low (e.g. press button) to switch output mode:");
|
||||||
|
DBG_OUTPUT_PORT.println(" 0 (OFF): outputs are off and hidden from chart");
|
||||||
|
DBG_OUTPUT_PORT.println(" 1 (AUTO): outputs are rotated automatically every second");
|
||||||
|
DBG_OUTPUT_PORT.println(" 2 (MANUAL): outputs can be toggled from the web page");
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Return default GPIO mask, that is all I/Os except SD card ones
|
||||||
|
unsigned int defaultMask() {
|
||||||
|
unsigned int mask = 0b11111111111111111;
|
||||||
|
for (auto pin = 0; pin <= 16; pin++) {
|
||||||
|
if (isFlashInterfacePin(pin)) {
|
||||||
|
mask &= ~(1 << pin);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return mask;
|
||||||
|
}
|
||||||
|
|
||||||
|
int rgbMode = 1; // 0=off - 1=auto - 2=manual
|
||||||
|
int rgbValue = 0;
|
||||||
|
esp8266::polledTimeout::periodicMs timeToChange(1000);
|
||||||
|
bool modeChangeRequested = false;
|
||||||
|
|
||||||
|
void loop(void) {
|
||||||
|
server.handleClient();
|
||||||
|
MDNS.update();
|
||||||
|
|
||||||
|
if (digitalRead(4) == 0) {
|
||||||
|
// button pressed
|
||||||
|
modeChangeRequested = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// see if one second has passed since last change, otherwise stop here
|
||||||
|
if (!timeToChange) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// see if a mode change was requested
|
||||||
|
if (modeChangeRequested) {
|
||||||
|
// increment mode (reset after 2)
|
||||||
|
rgbMode++;
|
||||||
|
if (rgbMode > 2) {
|
||||||
|
rgbMode = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
modeChangeRequested = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// act according to mode
|
||||||
|
switch (rgbMode) {
|
||||||
|
case 0: // off
|
||||||
|
gpioMask = defaultMask();
|
||||||
|
gpioMask &= ~(1 << 12); // Hide GPIO 12
|
||||||
|
gpioMask &= ~(1 << 13); // Hide GPIO 13
|
||||||
|
gpioMask &= ~(1 << 15); // Hide GPIO 15
|
||||||
|
|
||||||
|
// reset outputs
|
||||||
|
digitalWrite(12, 0);
|
||||||
|
digitalWrite(13, 0);
|
||||||
|
digitalWrite(15, 0);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 1: // auto
|
||||||
|
gpioMask = defaultMask();
|
||||||
|
|
||||||
|
// increment value (reset after 7)
|
||||||
|
rgbValue++;
|
||||||
|
if (rgbValue > 7) {
|
||||||
|
rgbValue = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// output new values
|
||||||
|
digitalWrite(12, rgbValue & 0b001);
|
||||||
|
digitalWrite(13, rgbValue & 0b010);
|
||||||
|
digitalWrite(15, rgbValue & 0b100);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 2: // manual
|
||||||
|
gpioMask = defaultMask();
|
||||||
|
|
||||||
|
// keep outputs unchanged
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
527
libraries/ESP8266WebServer/examples/Graph/data/index.htm
Normal file
527
libraries/ESP8266WebServer/examples/Graph/data/index.htm
Normal file
@ -0,0 +1,527 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.7.7/chartjs-plugin-zoom.js"></script>
|
||||||
|
|
||||||
|
<!-- or instead, put those files on the ESP filesystem along with index.htm and use:
|
||||||
|
<script src="Chart.js"></script>
|
||||||
|
<script src="hammer.js"></script>
|
||||||
|
<script src="chartjs-plugin-zoom.js"></script>
|
||||||
|
-->
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
height:100%;
|
||||||
|
padding:0;
|
||||||
|
margin:0;
|
||||||
|
width:100%;
|
||||||
|
display:flex;
|
||||||
|
flex-direction:column;
|
||||||
|
}
|
||||||
|
#config {
|
||||||
|
margin:0px 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
#periodRange {
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
#charts {
|
||||||
|
flex-grow:1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body >
|
||||||
|
<div id="config">
|
||||||
|
<span class="left">Max number of samples: </span>
|
||||||
|
<input id="maxSamplesField" type="number" min="100" max="10000" value="1000" step="100" size="4" class="left" />
|
||||||
|
<span class="left">. Sampling period: </span>
|
||||||
|
<input id="periodField" type="number" min="0" max="10000" value="1000" step="100" size="4" class="left" />
|
||||||
|
<span class="left"> ms </span>
|
||||||
|
<input id="periodRange" type="range" min="0" max="10000" value="1000" step="100" />
|
||||||
|
<button id="startPauseButton">Pause</button>
|
||||||
|
<button id="clearButton" disabled="true">Clear</button>
|
||||||
|
</div>
|
||||||
|
<div id="charts">
|
||||||
|
<div class="chart-container" style="position: relative; height:50%;"><canvas id="digital" style="background-color:#000000"></canvas></div>
|
||||||
|
<div class="chart-container" style="position: relative; height:25%;"><canvas id="analog"></canvas></div>
|
||||||
|
<div class="chart-container" style="position: relative; height:25%;"><canvas id="heap" style="background-color:#EEEEEE"></canvas>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
/////////////////////////////////////
|
||||||
|
// CREATE DIGITAL CHART
|
||||||
|
|
||||||
|
// Remember all GPIO datasets
|
||||||
|
var allDigitalDatasets = [];
|
||||||
|
|
||||||
|
var gpioColors = ['#D2FF71', '#59FFF4', '#DB399C', '#4245FF', '#FFB312', '#BB54E9', '#0BD400', '#42C2FF', '#FFFFFF', '#FF4242'];
|
||||||
|
|
||||||
|
var digitalChart = new Chart(document.getElementById('digital'), {
|
||||||
|
// The type of chart we want to create
|
||||||
|
type: 'scatter',
|
||||||
|
|
||||||
|
// The data for our dataset
|
||||||
|
data: {
|
||||||
|
// 17 GPIO datasets will be added by a loop at init time
|
||||||
|
datasets: []
|
||||||
|
},
|
||||||
|
|
||||||
|
// Configuration options go here
|
||||||
|
options: {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Digital I/Os'
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
id:"x-axis",
|
||||||
|
ticks: {
|
||||||
|
minRotation:0,
|
||||||
|
maxRotation:0
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
// 17 GPIO scales will be added by a loop at init time
|
||||||
|
yAxes: []
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
intersect: false
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
duration: 0
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
animationDuration: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/////////////////////////////////////
|
||||||
|
// CREATE ANALOG CHART
|
||||||
|
|
||||||
|
var analogChart = new Chart(document.getElementById('analog'), {
|
||||||
|
// The type of chart we want to create
|
||||||
|
type: 'scatter',
|
||||||
|
|
||||||
|
// The data for our dataset
|
||||||
|
data: {
|
||||||
|
datasets: [{
|
||||||
|
label: 'Analog',
|
||||||
|
backgroundColor: 'rgb(0,0,0,0)',
|
||||||
|
borderColor: 'rgb(255, 99, 132)',
|
||||||
|
data: [],
|
||||||
|
showLine:true
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
|
||||||
|
// Configuration options go here
|
||||||
|
options: {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Analog input'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
id:"x-axis",
|
||||||
|
ticks: {
|
||||||
|
minRotation:0,
|
||||||
|
maxRotation:0
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
beginAtZero:true
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
intersect: false
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
duration: 0
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
animationDuration: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// Zoom plugin options
|
||||||
|
plugins: {
|
||||||
|
zoom: {
|
||||||
|
pan: {
|
||||||
|
enabled: true,
|
||||||
|
mode: 'y',
|
||||||
|
},
|
||||||
|
zoom: {
|
||||||
|
enabled: true,
|
||||||
|
mode: 'y',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onClick: function() {this.resetZoom()}
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/////////////////////////////////////
|
||||||
|
// CREATE HEAP CHART
|
||||||
|
|
||||||
|
var heapChart = new Chart(document.getElementById('heap'), {
|
||||||
|
// The type of chart we want to create
|
||||||
|
type: 'scatter',
|
||||||
|
|
||||||
|
// The data for our dataset
|
||||||
|
data: {
|
||||||
|
datasets: [{
|
||||||
|
label: 'Heap',
|
||||||
|
backgroundColor: 'rgb(99, 99, 255)',
|
||||||
|
borderColor: 'rgb(99, 99, 255)',
|
||||||
|
data: [],
|
||||||
|
showLine:true,
|
||||||
|
cubicInterpolationMode:'monotone'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
|
||||||
|
// Configuration options go here
|
||||||
|
options: {
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Free heap'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
id:"x-axis",
|
||||||
|
ticks: {
|
||||||
|
minRotation:0,
|
||||||
|
maxRotation:0
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxes: [{
|
||||||
|
ticks: {
|
||||||
|
beginAtZero:true
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
intersect: false
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
duration: 0
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
animationDuration: 0
|
||||||
|
},
|
||||||
|
|
||||||
|
// Zoom plugin options
|
||||||
|
plugins: {
|
||||||
|
zoom: {
|
||||||
|
pan: {
|
||||||
|
enabled: true,
|
||||||
|
mode: 'y',
|
||||||
|
},
|
||||||
|
zoom: {
|
||||||
|
enabled: true,
|
||||||
|
mode: 'y',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onClick: function() {this.resetZoom()}
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/////////////////////////////////////
|
||||||
|
// UTILITY FUNCTIONS
|
||||||
|
|
||||||
|
// Crete a blank dataset for the Digital chart
|
||||||
|
function createDigitalDataset(gpio) {
|
||||||
|
return {
|
||||||
|
showLine:true,
|
||||||
|
steppedLine: true,
|
||||||
|
backgroundColor: 'rgb(0, 0, 0, 0)',
|
||||||
|
xAxisID: 'x-axis',
|
||||||
|
pointRadius: 1,
|
||||||
|
borderWidth: 1,
|
||||||
|
|
||||||
|
data: [],
|
||||||
|
label: gpio,
|
||||||
|
yAxisID: 'gpio' + gpio + '-axis'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Init structures for digitalChart
|
||||||
|
function initDigitalChart() {
|
||||||
|
// Clear auto-generated Y axis
|
||||||
|
digitalChart.options.scales.yAxes.length = 0;
|
||||||
|
|
||||||
|
// Add 17 hidden axes (one per GPIO) to be able to shift (stack) graphs vertically
|
||||||
|
for (var gpio = 0; gpio <= 16; gpio++) { // 17 GPIOs
|
||||||
|
// Add a scale
|
||||||
|
digitalChart.options.scales.yAxes.push(
|
||||||
|
{
|
||||||
|
id: 'gpio' + gpio + '-axis',
|
||||||
|
type: 'linear',
|
||||||
|
display:false,
|
||||||
|
ticks: {
|
||||||
|
min:0,
|
||||||
|
max:2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Create a blank dataset for this gpio
|
||||||
|
allDigitalDatasets.push(createDigitalDataset(gpio));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only show the first two Y axes (one for each side), with all tick labels showing only 0's and 1's (modulo)
|
||||||
|
for (var i = 0; i < 2; i++) {
|
||||||
|
digitalChart.options.scales.yAxes[i].display = true;
|
||||||
|
digitalChart.options.scales.yAxes[i].ticks.autoSkip = false;
|
||||||
|
digitalChart.options.scales.yAxes[i].ticks.stepSize = 1;
|
||||||
|
digitalChart.options.scales.yAxes[i].ticks.callback = function(value, index, values) {return Math.abs(value)%2;};
|
||||||
|
}
|
||||||
|
// Show gridLines of first axis
|
||||||
|
digitalChart.options.scales.yAxes[0].gridLines = {color: "#333333"};
|
||||||
|
|
||||||
|
// Move second axis to the right
|
||||||
|
digitalChart.options.scales.yAxes[1].position = 'right';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Compute a string with min/max/average on the given array of (x, y) points
|
||||||
|
function computeStats(sampleArray) {
|
||||||
|
var minY = Number.MAX_SAFE_INTEGER, maxY = 0, avgY = 0;
|
||||||
|
var prevX = 0;
|
||||||
|
sampleArray.forEach(function (point, index) {
|
||||||
|
if (point.y < minY) minY = point.y;
|
||||||
|
if (point.y > maxY) maxY = point.y;
|
||||||
|
if (prevX > 0) avgY = avgY + point.y * (point.x - prevX); // avg is weighted: samples with a longer period weight more
|
||||||
|
prevX = point.x;
|
||||||
|
});
|
||||||
|
avgY = avgY / (prevX - sampleArray[0].x);
|
||||||
|
return "min: " + minY + ", max: " + maxY + ", avg: " + Math.floor(avgY);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/////////////////////////////////////
|
||||||
|
// PERIODIC FETCH OF NEW DATA
|
||||||
|
|
||||||
|
var running = true;
|
||||||
|
var configDiv = document.getElementById("config");
|
||||||
|
var periodField = document.getElementById("periodField");
|
||||||
|
|
||||||
|
var currentGpioMask = 0;
|
||||||
|
|
||||||
|
function fetchNewData() {
|
||||||
|
if (!running) return;
|
||||||
|
var fetchStartMs = Date.now();
|
||||||
|
var xmlHttp = new XMLHttpRequest();
|
||||||
|
xmlHttp.onload = function() {
|
||||||
|
var processingDurationMs;
|
||||||
|
if(xmlHttp.status != 200) {
|
||||||
|
// Server error
|
||||||
|
configDiv.style.backgroundColor = "red";
|
||||||
|
console.log("GET ERROR: [" + xmlHttp.status+"] " + xmlHttp.responseText);
|
||||||
|
processingDurationMs = new Date() - fetchStartMs;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
configDiv.style.backgroundColor = "white";
|
||||||
|
|
||||||
|
// Response is e.g.: {"time":963074, "heap":47160, "analog":60, "gpioMask":16447, "gpioData":16405}
|
||||||
|
var espData = JSON.parse(xmlHttp.responseText);
|
||||||
|
|
||||||
|
var x = espData.time;
|
||||||
|
|
||||||
|
var maxSamples = parseInt(document.getElementById("maxSamplesField").value);
|
||||||
|
|
||||||
|
// Add point to heap chart
|
||||||
|
var data = heapChart.data.datasets[0].data;
|
||||||
|
data.push({x: espData.time, y: espData.heap});
|
||||||
|
// Limit its length to maxSamples
|
||||||
|
data.splice(0, data.length - maxSamples);
|
||||||
|
// Put stats in chart title
|
||||||
|
heapChart.options.title.text = "Free heap (" + computeStats(data) + ") - use mouse wheel or pinch to zoom";
|
||||||
|
// Remember smallest X
|
||||||
|
var minX = data[0].x;
|
||||||
|
|
||||||
|
// Add point to analog chart
|
||||||
|
data = analogChart.data.datasets[0].data;
|
||||||
|
data.push({x: espData.time, y: espData.analog});
|
||||||
|
// Limit its length to maxSamples
|
||||||
|
data.splice(0, data.length - maxSamples);
|
||||||
|
// Put stats in chart title
|
||||||
|
analogChart.options.title.text = "Analog input (" + computeStats(data) + ") - use mouse wheel or pinch to zoom";
|
||||||
|
// Remember smallest X
|
||||||
|
if (data[0].x < minX) minX = data[0].x;
|
||||||
|
|
||||||
|
|
||||||
|
// If GPIO mask has changed, reconfigure chart
|
||||||
|
if (espData.gpioMask != currentGpioMask) {
|
||||||
|
// Remove all datasets from chart
|
||||||
|
digitalChart.data.datasets.length = 0;
|
||||||
|
|
||||||
|
// And re-add the required datasets
|
||||||
|
var position = 0;
|
||||||
|
for (var gpio = 0; gpio <= 16; gpio++) { // 17 GPIOs
|
||||||
|
var gpioBitMask = 1 << gpio;
|
||||||
|
|
||||||
|
if (espData.gpioMask & gpioBitMask) {
|
||||||
|
// This GPIO must be part of the chart
|
||||||
|
dataset = allDigitalDatasets[gpio];
|
||||||
|
// give it the next available color
|
||||||
|
dataset.borderColor = gpioColors[position % gpioColors.length];
|
||||||
|
// add it to the chart
|
||||||
|
digitalChart.data.datasets.push(dataset);
|
||||||
|
|
||||||
|
// offset graph
|
||||||
|
digitalChart.options.scales.yAxes[gpio].ticks.min = position * -2;
|
||||||
|
position++;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Clear data
|
||||||
|
allDigitalDatasets[gpio].data = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// make sure all graphs have the same scale (max-min)
|
||||||
|
for (var gpio = 0; gpio <= 16; gpio++) { // 17 GPIOs
|
||||||
|
var ticks = digitalChart.options.scales.yAxes[gpio].ticks;
|
||||||
|
ticks.max = ticks.min + position * 2 - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// chart must be updated, otherwise adding to previously hidden dataset fail
|
||||||
|
digitalChart.update();
|
||||||
|
|
||||||
|
currentGpioMask = espData.gpioMask
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// And process each dataset, adding it back to the chart if requested, and adding the received value to it.
|
||||||
|
var position = 0;
|
||||||
|
for (var gpio = 0; gpio <= 16; gpio++) { // 17 GPIOs
|
||||||
|
var gpioBitMask = 1 << gpio;
|
||||||
|
|
||||||
|
if (espData.gpioMask & gpioBitMask) {
|
||||||
|
// This GPIO must be part of the chart
|
||||||
|
var dataset = digitalChart.data.datasets[position];
|
||||||
|
|
||||||
|
// Add received value to dataset
|
||||||
|
// console.log(espData.gpioData + " & " + gpioBitMask + " => " + (espData.gpioData & gpioBitMask));
|
||||||
|
data = dataset.data;
|
||||||
|
var point = {x: espData.time, y: (espData.gpioData & gpioBitMask)?1:0}
|
||||||
|
data.push(point);
|
||||||
|
|
||||||
|
// limit number of samples to maxSamples
|
||||||
|
data.splice(0, data.length - maxSamples);
|
||||||
|
// Remember smallest X
|
||||||
|
if (data[0].x < minX) minX = data[0].x;
|
||||||
|
|
||||||
|
position++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set origin of X axis to minimum X value
|
||||||
|
if (heapChart.options.scales.xAxes[0].ticks.min === undefined || heapChart.options.scales.xAxes[0].ticks.min < minX) {
|
||||||
|
heapChart.options.scales.xAxes[0].ticks.min = minX;
|
||||||
|
analogChart.options.scales.xAxes[0].ticks.min = minX;
|
||||||
|
digitalChart.options.scales.xAxes[0].ticks.min = minX;
|
||||||
|
}
|
||||||
|
|
||||||
|
heapChart.update();
|
||||||
|
analogChart.update();
|
||||||
|
digitalChart.update();
|
||||||
|
|
||||||
|
// Check if we can keep up with this fetch rate, or increase interval by 50ms if not.
|
||||||
|
processingDurationMs = new Date() - fetchStartMs;
|
||||||
|
periodField.style.backgroundColor = (processingDurationMs > parseInt(periodField.value))?"#FF7777":"#FFFFFF";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Schedule next call with the requested interval minus the time needed to process the previous call
|
||||||
|
// Note that contrary to setInterval, this technique guarantees that we will never have
|
||||||
|
// several fetch in parallel in case we can't keep up with the requested interval
|
||||||
|
var waitingDelayMs = parseInt(periodField.value) - processingDurationMs;
|
||||||
|
if (running) {
|
||||||
|
window.setTimeout(fetchNewData, (waitingDelayMs > 0)?waitingDelayMs:0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xmlHttp.onerror = function(e) {
|
||||||
|
// Ajax call error
|
||||||
|
configDiv.style.backgroundColor = "red";
|
||||||
|
console.log("ERROR: [" + xmlHttp.status+"] " + xmlHttp.responseText);
|
||||||
|
// Also schedule next call in case of error
|
||||||
|
var waitingDelayMs = parseInt(periodField.value) - (new Date() - fetchStartMs);
|
||||||
|
window.setTimeout(fetchNewData, (waitingDelayMs > 0)?waitingDelayMs:0);
|
||||||
|
};
|
||||||
|
xmlHttp.open("GET", "/espData", true);
|
||||||
|
xmlHttp.send();
|
||||||
|
}
|
||||||
|
|
||||||
|
/////////////////////////////////////
|
||||||
|
// EVENT HANDLERS
|
||||||
|
|
||||||
|
// Keep range slider and text input in sync
|
||||||
|
document.getElementById('periodRange').addEventListener('input', function (e) {
|
||||||
|
document.getElementById('periodField').value = e.target.value;
|
||||||
|
});
|
||||||
|
document.getElementById('periodField').addEventListener('input', function (e) {
|
||||||
|
document.getElementById('periodRange').value = e.target.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Start/pause button
|
||||||
|
document.getElementById('startPauseButton').addEventListener('click', function (e) {
|
||||||
|
running = !running;
|
||||||
|
if (running) {
|
||||||
|
document.getElementById('startPauseButton').textContent = "Pause";
|
||||||
|
document.getElementById('clearButton').disabled = true;
|
||||||
|
fetchNewData();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
document.getElementById('startPauseButton').textContent = "Start";
|
||||||
|
document.getElementById('clearButton').disabled = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Clear button
|
||||||
|
document.getElementById('clearButton').addEventListener('click', function (e) {
|
||||||
|
heapChart.data.datasets[0].data.length = 0;
|
||||||
|
analogChart.data.datasets[0].data.length = 0;
|
||||||
|
for (var gpio = 0; gpio <= 16; gpio++) { // 17 GPIOs
|
||||||
|
allDigitalDatasets[gpio].data = [];
|
||||||
|
}
|
||||||
|
heapChart.update();
|
||||||
|
analogChart.update();
|
||||||
|
digitalChart.update();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/////////////////////////////////////
|
||||||
|
// GET THE BALL ROLLING
|
||||||
|
|
||||||
|
// Configure the digital chart
|
||||||
|
initDigitalChart();
|
||||||
|
|
||||||
|
// Get first sample
|
||||||
|
fetchNewData();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
48
libraries/ESP8266WebServer/examples/Graph/readme.md
Normal file
48
libraries/ESP8266WebServer/examples/Graph/readme.md
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
# Graph readme
|
||||||
|
|
||||||
|
## What is this sketch about ?
|
||||||
|
This example consists of a web page that displays misc ESP8266 information, namely values of GPIOs, ADC measurement and free heap
|
||||||
|
using http requests and a html/javascript frontend.
|
||||||
|
A similar functionality used to be hidden in previous versions of the FSBrowser example.
|
||||||
|
|
||||||
|
## How to use it ?
|
||||||
|
1. Uncomment one of the `#define USE_xxx` directives in the sketch to select the ESP filesystem to store the index.htm file on
|
||||||
|
2. Provide the credentials of your WiFi network (search for `STASSID`)
|
||||||
|
3. Compile and upload the sketch to your ESP8266 device
|
||||||
|
4. For normal use, copy the contents of the `data` folder to the filesystem. To do so:
|
||||||
|
- for SDFS, copy that contents (not the data folder itself, just its contents) to the root of a FAT/FAT32-formated SD card connected to the SPI port of the ESP8266
|
||||||
|
- for SPIFFS or LittleFS, please follow the instructions at https://arduino-esp8266.readthedocs.io/en/latest/filesystem.html#uploading-files-to-file-system
|
||||||
|
5. Once the data and sketch have been uploaded, access the page by pointing your browser to http://graph.local
|
||||||
|
|
||||||
|
## What does it demonstrate ?
|
||||||
|
1. Use of the ESP8266WebServer library to return files from the ESP filesystem
|
||||||
|
2. Use of the ESP8266WebServer library to return a dynamic JSON document
|
||||||
|
3. Querying the state of ESP I/Os as well as free heap
|
||||||
|
4. Ajax calls to a JSON API of the ESP from a webpage
|
||||||
|
5. Rendering of "real-time" data in a webpage
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
- the page should start showing samples right away
|
||||||
|
- the sampling period (interval between requests to the ESP) can be selected. If the system cannot keep up with the rhythm, the interval will get longer (and the period input field will turn red to indicate it). Note that the X-axis is the time since ESP bootup, in milliseconds.
|
||||||
|
- the maximum number of samples can be selected. Warning: this uses up browser memory and power, so a large number might increase the sampling period.
|
||||||
|
- sampling can be paused or restarted, and graph can be cleared during pause
|
||||||
|
- the list of GPIOs to be displayed can be customized from Arduino code by changing the gpioMask value included in the json document
|
||||||
|
- in that list, some GPIOs can be temporarily hidden by clicking on their labels on top
|
||||||
|
- analog and heap graphs can be zoomed in using the mouse wheel. A click resets the zoom level
|
||||||
|
|
||||||
|
## Options
|
||||||
|
This sample is "fully compatible" with the FSBrowser sample. In other words, if you copy the `espData` handler over from this sketch to the FSBrowser example sketch, and upload the index.htm page to its filesystem, you will be able to use both the FSBrowser and the graph page at the same time.
|
||||||
|
|
||||||
|
## Dependency
|
||||||
|
The html page requires the [Chart.js](https://www.chartjs.org/) (v2.9.3 at the time of writing) library, which is loaded from a CDN, as well as its [zoom plugin](https://github.com/chartjs/chartjs-plugin-zoom/blob/master/README.md) (v0.7.7) and [hammer.js](http://hammerjs.github.io/) (v2.0.8) for gesture capture.
|
||||||
|
Consequently, internet access from your web browser is required for this app to work as-is.
|
||||||
|
If your browser has no web access (e.g. if you are connected to the ESP8266 as an access-point), you can download those three files locally and upload them along with the index.htm page, and uncomment the block at the top of the index.htm page
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
- The code in the loop is just to demonstrate that the app is working by toggling a few I/Os.
|
||||||
|
However, values have been particularly chosen to be meaningful for the [Witty Cloud](https://gregwareblog.wordpress.com/2016/01/10/esp-witty/) board, rotating colors of the RGB led.
|
||||||
|
When placed close to a reflecting area, the light sensor (LDR) of the board also shows an analog image of the RGB led power.
|
||||||
|
The button rotates mode between "RGB rotate", "RGB stop", "RGB off" (and corresponding GPIOs disappearing from the graph), .
|
||||||
|
- If you use SDFS, if your card's CS pin is not connected to the default pin (4), uncomment the `fileSystemConfig.setCSPin(chipSelectPin);` line and specify the GPIO the CS pin is connected to
|
||||||
|
- `index.htm` is the default index returned if your URL does not end with a filename (works on subfolders as well)
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user