如何更新数据值=“ADC”从服务器的计？(How to update the data-value=

我使用的是NodeMCU（ESP8266）和Arduino的IDE。草图一部分工作，我能看到的串行显示器上模拟解读，因为我动了锅。

Web服务器的index.html是在SPIFFs文件系统。
当连接和服务器加载我可以看到浏览器上的压力表，但不显示从针运动。

我的目标是让ADC读数和更新仪表针。
这是我到目前为止，这是从样品https://rawgit.com/Mikhus/canvas-gauges/master/examples/issue-63.html

怎样才可以修改，以获得ADC读数？

 <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Gauge Test</title> <script src="../gauge.min.js"></script> <style>body { padding: 20px; margin: 0; background: #fff }</style> </head> <body> <a href="#" onclick="gaugePS.value=570">570</a> <a href="#" onclick="gaugePS.value=583">583</a> <a href="#" onclick="gaugePS.value=830">830</a> <hr> <canvas id="gauge-ps"></canvas> <script> var gaugePS = new RadialGauge({ renderTo: 'gauge-ps', width: 400, height: 400, units: 'PS', minValue: 0, maxValue: 1000, majorTicks: [ '0','100','200','300','400','500','600','700','800','900','1000' ], minorTicks: 2, ticksAngle: 270, startAngle: 45, strokeTicks: true, highlights : [ { from : 457, to : 880, color : 'rgba(78, 78, 76, 0.5)' }, { from : 880, to : 1000, color : 'rgba(225, 7, 23, 0.75)' } ], valueInt: 1, valueDec: 0, colorPlate: "#fff", colorMajorTicks: "#686868", colorMinorTicks: "#686868", colorTitle: "#000", colorUnits: "#000", colorNumbers: "#686868", valueBox: true, colorValueText: "#000", colorValueBoxRect: "#fff", colorValueBoxRectEnd: "#fff", colorValueBoxBackground: "#fff", colorValueBoxShadow: false, colorValueTextShadow: false, colorNeedleShadowUp: true, colorNeedleShadowDown: false, colorNeedle: "rgba(200, 50, 50, .75)", colorNeedleEnd: "rgba(200, 50, 50, .75)", colorNeedleCircleOuter: "rgba(200, 200, 200, 1)", colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)", borderShadowWidth: 0, borders: true, borderInnerWidth: 0, borderMiddleWidth: 0, borderOuterWidth: 5, colorBorderOuter: "#fafafa", colorBorderOuterEnd: "#cdcdcd", needleType: "arrow", needleWidth: 2, needleCircleSize: 7, needleCircleOuter: true, needleCircleInner: false, animationDuration: 1500, animationRule: "dequint", fontNumbers: "Verdana", fontTitle: "Verdana", fontUnits: "Verdana", fontValue: "Led", fontValueStyle: 'italic', fontNumbersSize: 20, fontNumbersStyle: 'italic', fontNumbersWeight: 'bold', fontTitleSize: 24, fontUnitsSize: 22, fontValueSize: 50, animatedValue: true }); gaugePS.draw(); gaugePS.value = "510"; </script> </body> </html>

该NodeMCU是服务了一个HTML文件到浏览器。然后，浏览器需要一种机制来从NodeMCU获得最新的值。

有两个部分来实现这一目标：

添加HTTP端点上NodeMCU提供最新读数
让浏览器从NodeMCU获得的价值

实施HTTP端点

该HTTP端点将使用最新的阅读浏览器的响应。

首先添加处理程序的路由/ps ：

// declare handlePsPath before this snippet
server.on("/ps", handlePsPath);

然后实现处理程序：

void handlePsPath()
{
  auto requestMethod = server.method();
  if (requestMethod == HTTP_GET)
  {
    auto psValue = getValue();
    String psJson = String("{ \"ps\": ") + String(psValue) + String(" }");
    server.send(200, "application/json", psJson);
  }
}

这是假设你实现getValue()函数来获取读数。

例如一个实例函数读取销A3：

int getValue()
{
  return analogRead(A3);
}

更新HTML来从NodeMCU最新值

添加一个函数来获取读数从上面添加通过将以下在HTML文件中的脚本块端点：

function handlePsValue() {
    var json = JSON.parse(this.responseText);
    gaugePS.value = json.ps;
}

function updatePsValue() {
    var request = new XMLHttpRequest();
    request.addEventListener("load", handlePsValue);
    request.open("GET", "/ps");
    request.send();
}

然后在页面调用这个函数。最平凡的方式做到这一点是添加一个按钮来调用页面updatePsValue()

<button onClick="updatePsValue()">Update</button>

另外，浏览器可以轮询使用脚本块一些JavaScript的更新：

// poll for updates once per second
setInterval(updatePsValue, 1000);