Question

我的ESP8266配置为接入点，目前已编程为读取多个DS18B20传感器并将读取值存储在SD卡上的文本文件中。我可以从我的Android手机连接到AP，并在浏览器中导航到10.10.10.1（ESP的静态IP地址），我可以通过HTML / JS更改设置（读取间隔时间/删除SD卡数据）并查看HTML表格中显示的存储值。

我想知道是否有方法绘制一个包含多行（每个传感器就行）的简单二维图表，而无需连接到网络以获取Google图表等库，这不是一个选项，因为控制器意味着放置在没有信号的偏远地方。 ESP的目的是随着时间的推移获取数据，以后可以通过Web服务器将其呈现给用户。

Answer 1

您可以使用* svg image创建一个简单的网页作为图表。像这样：

    <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>

您可以将Web服务器路径server.on ( "/chart.svg", drawGraph );映射到生成svg文件的某个方法。 SVG file这是一个简单的文本文件。你只需要知道几个标记triks来做这样的事情：

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);
}

是否可以在作为接入点运行的ESP8266 Web服务器上绘制图表？

1 个答案: