ESP8266WebServer.h don't serve "live" data?

Your new topic does not fit any of the above??? Check first. Then post here. Thanks.

Moderator: igrr

 Reply

User avatar

ESP8266WebServer.h don't serve "live" data?

By toni
- Tue Aug 07, 2018 3:54 am #77614 Hi all,

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
You do not have the required permissions to view the files attached to this post.
 Reply
Return to General Discussions