ESP8266WebServer.h don't serve "live" data?
Posted: Tue Aug 07, 2018 3:54 amHi all,
I'm trying to show live data using this html:
who needs json data as input. Example in https://bl.ocks.org/mbostock/4241134.
I'm using this code:
I tried several ways, but none of them refreshes client side. What I'm doing bad? (some parts are only for testing).
Attached are all used the files.
Thank you
Toni
I'm trying to show live data using this html:
Code: Select all
<!DOCTYPE html>
<svg width="960" height="673" stroke="#fff" stroke-width="0.5"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-hsv.v0.1.min.js"></script>
<script src="https://d3js.org/d3-contour.v1.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var i0 = d3.interpolateHsvLong(d3.hsv(120, 1, 0.65), d3.hsv(60, 1, 0.90)),
i1 = d3.interpolateHsvLong(d3.hsv(60, 1, 0.90), d3.hsv(0, 0, 0.95)),
interpolateTerrain = function(t) { return t < 0.5 ? i0(t * 2) : i1((t - 0.5) * 2); },
color = d3.scaleSequential(interpolateTerrain).domain([90, 190]);
d3.json("volcano.json", function(error, volcano) {
if (error) throw error;
svg.selectAll("path")
.data(d3.contours()
.size([volcano.width, volcano.height])
.thresholds(d3.range(90, 195, 5))
(volcano.values))
.enter().append("path")
.attr("d", d3.geoPath(d3.geoIdentity().scale(width / volcano.width)))
.attr("fill", function(d) { return color(d.value); });
});
</script>
who needs json data as input. Example in https://bl.ocks.org/mbostock/4241134.
I'm using this code:
Code: Select all
#include <ArduinoJson.h>
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <FS.h>
const char* ssid = "yourSSID";
const char* password = "yourPASS";
const char* htmlfile = "/index.html";
ESP8266WebServer server(80);
// Mux 1
int oneA = D6;
int oneB = D7;
int oneC = D5;
int oneD = D8;
// Read off Values from Here
int COM1 = A0;
// Mux 2
int twoA = D3;
int twoB = D4;
int twoC = D2;
int twoD = D1;
// Apply voltage from here
int COM2 = D0;
// since not all pins of each multiplexer are connected to rows/columns on the skin
// the following arrays indicates which pins are connected, to reflect the following:
int colPinRef [] = {
0, 1, 2, 3, 4, 5, 6, 7
};
int rowPinRef [] = {
0, 1, 2, 3, 4, 5, 6, 7
};
int metaMsk[16][4] = {
{ 0, 0, 0, 0 },
{ 1, 0, 0, 0 },
{ 0, 1, 0, 0 },
{ 1, 1, 0, 0 },
{ 0, 0, 1, 0 },
{ 1, 0, 1, 0 },
{ 0, 1, 1, 0 },
{ 1, 1, 1, 0 },
{ 0, 0, 0, 1 },
{ 1, 0, 0, 1 },
{ 0, 1, 0, 1 },
{ 1, 1, 0, 1 },
{ 0, 0, 1, 1 },
{ 1, 0, 1, 1 },
{ 0, 1, 1, 1 },
{ 1, 1, 1, 1 }
};
// We will read off values one row at a time, this array will store those values
int matrixSize = 1 * 8;
int matrixValues[8];
// The values of these variables will be used to select the pin from multiplexers 1 and 2
// See HEF4067B Datasheet for codes (function table)
int c0 = 0;
int c1 = 0;
int c2 = 0;
int c3 = 0;
int col = 0; // storeing the bin code
// Used to select the pin from multiplexers 3 and 4
// See HEF4067B Datasheet for codes (function table)
int r0 = 0;
int r1 = 0;
int r2 = 0;
int r3 = 0;
int row = 0; // storeing the bin code
int rowCount; // just a count
int ciclos;
long tiempoInicial;
String output;
void setup() {
// Columns = INPUT
// Mux 1
pinMode(oneA, OUTPUT); //A
pinMode(oneB, OUTPUT); //B
pinMode(oneC, OUTPUT); //C
pinMode(oneD, OUTPUT); //D
// Read values from here
pinMode(COM1, INPUT);
// ROWS = OUTPUT
// Mux 2
pinMode(twoA, OUTPUT); //A
pinMode(twoB, OUTPUT); //B
pinMode(twoC, OUTPUT); //C
pinMode(twoD, OUTPUT); //D
pinMode(COM2, OUTPUT);
digitalWrite(COM2, HIGH);
tiempoInicial = millis();
ciclos = 0;
Serial.begin(115200);
SPIFFS.begin();
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.on("/volcano.json", volcano);
server.on("/",HTTP_GET, volcano);
server.onNotFound(handleNotFound);
/*server.on("/index.html", HTTP_GET, []() {
StaticJsonBuffer<1174> jsonBuffer;
JsonObject& volcano = jsonBuffer.createObject();
volcano["width"] = 8;
volcano["height"] = 8;
JsonArray& analogValues = volcano.createNestedArray("values");
for (int rowCount = 0; rowCount < 8; rowCount++) {
r0 = metaMsk[rowPinRef[rowCount]][0];
r1 = metaMsk[rowPinRef[rowCount]][1];
r2 = metaMsk[rowPinRef[rowCount]][2];
r3 = metaMsk[rowPinRef[rowCount]][3];
digitalWrite(twoA, r0); //send to Digital OUT 1
digitalWrite(twoB, r1); //send to Digital OUT 2
digitalWrite(twoC, r2); //send to Digital OUT 3
digitalWrite(twoD, r3); //send to Digital OUT 4
for (int colCount = 0; colCount < 8; colCount++) {
c0 = metaMsk[colPinRef[colCount]][0];
c1 = metaMsk[colPinRef[colCount]][1];
c2 = metaMsk[colPinRef[colCount]][2];
c3 = metaMsk[colPinRef[colCount]][3];
digitalWrite(oneA, c0); //send to Digital OUT 1
digitalWrite(oneB, c1); //send to Digital OUT 2
digitalWrite(oneC, c2); //send to Digital OUT 3
digitalWrite(oneD, c3); //send to Digital OUT 4
int val = analogRead(COM1);
matrixValues[colCount] = val;
analogValues.add(val);
}//end for
delay(2);
}//end for
output = "";
volcano.printTo(output);
Serial.println("server.volc" + (output));
server.send(200, "application/json", output);
});*/
server.begin();
Serial.println("HTTP server started");
}
void loop () {
WiFiClient(keepalive);
WiFiClient client;
server.handleClient();
}
void volcano() {
StaticJsonBuffer<1174> jsonBuffer;
JsonObject& volcano = jsonBuffer.createObject();
volcano["width"] = 8;
volcano["height"] = 8;
JsonArray& analogValues = volcano.createNestedArray("values");
for (int rowCount = 0; rowCount < 8; rowCount++) {
r0 = metaMsk[rowPinRef[rowCount]][0];
r1 = metaMsk[rowPinRef[rowCount]][1];
r2 = metaMsk[rowPinRef[rowCount]][2];
r3 = metaMsk[rowPinRef[rowCount]][3];
digitalWrite(twoA, r0); //send to Digital OUT 1
digitalWrite(twoB, r1); //send to Digital OUT 2
digitalWrite(twoC, r2); //send to Digital OUT 3
digitalWrite(twoD, r3); //send to Digital OUT 4
for (int colCount = 0; colCount < 8; colCount++) {
c0 = metaMsk[colPinRef[colCount]][0];
c1 = metaMsk[colPinRef[colCount]][1];
c2 = metaMsk[colPinRef[colCount]][2];
c3 = metaMsk[colPinRef[colCount]][3];
digitalWrite(oneA, c0); //send to Digital OUT 1
digitalWrite(oneB, c1); //send to Digital OUT 2
digitalWrite(oneC, c2); //send to Digital OUT 3
digitalWrite(oneD, c3); //send to Digital OUT 4
int val = analogRead(COM1);
matrixValues[colCount] = val;
analogValues.add(val);
}//end for
delay(2);
}//end for
output = "";
volcano.printTo(output);
Serial.println("volcano" + (output));
server.send(200, "application/json", output);
// client.println(output);
}
void handleRoot() {
server.sendHeader("Location", "/index.html", true); //Redirect to our html web page
server.send(302, "text/plane", "");
}
void handleNotFound() {
if (loadFromSpiffs(server.uri())) return;
String message = "File Not Found\n\n";
message += "URI: ";
message += server.uri();
message += "\nMethod: ";
message += (server.method() == HTTP_GET) ? "GET" : "POST";
message += "\nArguments: ";
message += server.args();
message += "\n";
for (uint8_t i = 0; i < server.args(); i++) {
message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
}
server.send(404, "text/plain", message);
}
bool loadFromSpiffs(String path) {
String dataType = "text/plain";
if (path.endsWith("/")) path += "index.htm";
if (path.endsWith(".src")) path = path.substring(0, path.lastIndexOf("."));
else if (path.endsWith(".html")) dataType = "text/html";
else if (path.endsWith(".htm")) dataType = "text/html";
else if (path.endsWith(".css")) dataType = "text/css";
else if (path.endsWith(".js")) dataType = "application/javascript";
else if (path.endsWith(".png")) dataType = "image/png";
else if (path.endsWith(".gif")) dataType = "image/gif";
else if (path.endsWith(".jpg")) dataType = "image/jpeg";
else if (path.endsWith(".ico")) dataType = "image/x-icon";
else if (path.endsWith(".xml")) dataType = "text/xml";
else if (path.endsWith(".pdf")) dataType = "application/pdf";
else if (path.endsWith(".zip")) dataType = "application/zip";
File dataFile = SPIFFS.open(path.c_str(), "r");
if (server.hasArg("download")) dataType = "application/octet-stream";
if (server.streamFile(dataFile, dataType) != dataFile.size()) {
}
dataFile.close();
return true;
}
I tried several ways, but none of them refreshes client side. What I'm doing bad? (some parts are only for testing).
Attached are all used the files.
Thank you
Toni