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

Moderator: igrr

User avatar
By toni
#77615 Hi all!

I'm trying to show live data with this index.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 expects json data as shown in the example:

https://bl.ocks.org/mbostock/4241134

The code I'm using (with some testing parts) is:
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've tried different ways, but none of them works, webserver does not refresh new data. What is wrong?

Thank you,

Toni
You do not have the required permissions to view the files attached to this post.