- Mon Aug 06, 2018 6:24 am
#77596
Hi all,
I'm trying to adapt
https://bl.ocks.org/mbostock/4241134
with an index.html as:
to show data acquired by esp8266 using ESP8266WebServer, but it not refresh new data so index.html cannot show nothing. I tried several approaches (like keepalive) with no results.
What I'm doing bad??
PD: I used <ArduinoJson.h> as a first attempt to do it, but really it is not necessary. All files are attached below.
Thank you
Toni
I'm trying to adapt
https://bl.ocks.org/mbostock/4241134
with an index.html as:
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>
to show data acquired by esp8266 using ESP8266WebServer, but it not refresh new data so index.html cannot show nothing. I tried several approaches (like keepalive) with no results.
What I'm doing bad??
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 = "YOURPASSWORD";
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;
}
PD: I used <ArduinoJson.h> as a first attempt to do it, but really it is not necessary. All files are attached below.
Thank you
Toni
