2

My ESP8266, configured as an access point, is currently programmed to read multiple DS18B20 sensors and store read values in a text file on an SD card. I can connect to the AP from my Android phone and navigate to 10.10.10.1 (the ESP's static IP address) in the browser, where I can change settings (read interval time/delete SD card data) through HTML/JS and view stored values which are presented in an HTML table.

I was wondering if there's a way to draw a simple 2D chart with multiple lines (each sensor its line) without any need to connect to the web to obtain libraries like Google charts, which is not an option, because the controller is meant to be placed in remote places without signal. The ESP's purpose is to obtain data over time, which can later be presented to the user over a web server.

dda
  • 6,030
  • 2
  • 25
  • 34
Denis Črnič
  • 117
  • 2
  • 9
  • 1
    Why are chart libraries not an option? The client (browser) will fetch them, true, but that doesn't mean it has to fetch them from the ESP8266 server. Rather than rendering SVG (or the like) on the server as was suggested couldn't your server deliver "naked" HTML including the data and references to CSS/JavaScript somewhere on the internet? Of course you'd have to keep the constraints of the [same-domain policy](https://en.wikipedia.org/wiki/Same-origin_policy) in mind. – Marcel Stör Dec 04 '17 at 08:11
  • 1
    How can client which is connected to "offline" access point possibly be able to fetch the libraries from the internet at the same time? – Denis Črnič Dec 04 '17 at 14:42
  • I don't know what an "offline" access point is. An AP that is not connected to the internet (ESP8266 and client connect to it)? – Marcel Stör Dec 05 '17 at 06:06
  • ESP is an AP itself and yes, it's not connected to the internet, it's only accessible localy when client is connected to it, so in that case ESP (AP) and android (client) have no internet connection. – Denis Črnič Dec 06 '17 at 01:46

1 Answers1

1

You can create a simple web page with *svg image as the chart. like this:

    <html>
<head>
    <meta http-equiv='refresh' content='5'/>
    <title>ESP8266 Demo</title>
    <style>
    body { background-color: #cccccc; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }
    </style>
</head>
<body>
    <h1>Hello from ESP8266!</h1>
    <img src=\"/chart.svg\" />
    </body>
</html>

You can map your web server path server.on ( "/chart.svg", drawGraph ); to some method that generates svg file. SVG file it is a simple text file. You just need to know few markup triks to do something like this:

void drawGraph() {
    String out = "";
    char temp[100];
    out += "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"400\" height=\"150\">\n";
    out += "<rect width=\"400\" height=\"150\" fill=\"rgb(250, 230, 210)\" stroke-width=\"1\" stroke=\"rgb(0, 0, 0)\" />\n";
    out += "<g stroke=\"black\">\n";
    int y = rand() % 130;
    for (int x = 10; x < 390; x+= 10) {
        int y2 = rand() % 130;
        sprintf(temp, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke-width=\"1\" />\n", x, 140 - y, x + 10, 140 - y2);
        out += temp;
        y = y2;
    }
    out += "</g>\n</svg>\n";

    server.send ( 200, "image/svg+xml", out);
}
fdistorted
  • 343
  • 3
  • 15