How to update the data-value= “adc” on the gauge from the server?

问题

I'm using an NodeMCU (ESP8266) and Arduino IDE. The sketch part works, I can see the analog reading on the serial monitor as I move the pot.

The webserver index.html is in the SPIFFs file system.
When connected and server is loaded I can see the gauge on the browser but no movement from the needle is displayed.

My goal is to get the ADC Reading and update the needle on the gauge.
This is what I have so far, this is a sample from https://rawgit.com/Mikhus/canvas-gauges/master/examples/issue-63.html

How can it be modified to get the ADC reading?

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

回答1:

The NodeMCU is serving up an HTML file to the browser. The browser then needs a mechanism to get the latest values from the NodeMCU.

There are two parts to achieving this:

Add an HTTP endpoint on the NodeMCU to provide the latest reading
Have the browser get the value from the NodeMCU

Implementing the HTTP endpoint

The HTTP endpoint will respond to the browser with the latest reading.

First add a handler on the route /ps:

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

Then implement the handler:

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

This assumes that you implement the getValue() function to obtain the reading.

e.g. An example function to read pin A3:

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

Update the HTML to get the latest value from the NodeMCU

Add a function to get the reading from the endpoint added above by adding the following to the script block in the HTML file:

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

Then have the page call this function. The most trivial way to do this is to add a button to the page that calls updatePsValue():

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

Alternatively the browser could poll for updates using some javascript in the script block:

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

来源：https://stackoverflow.com/questions/54396375/how-to-update-the-data-value-adc-on-the-gauge-from-the-server

标签

html5

arduino

nodemcu