Как обновить data-value = "adc" на датчике с сервера? - PullRequest
Новая
       9

Как обновить data-value = "adc" на датчике с сервера?

0 голосов
/ 28 января 2019

Я использую NodeMCU (ESP8266) и Arduino IDE.Эскизная часть работает, я могу видеть аналоговые показания на мониторе последовательного порта при перемещении банка.

Веб-сервер index.html находится в файловой системе SPIFFs.
При подключениии сервер загружен. Я вижу индикатор в браузере, но движение иглы не отображается.

Моя цель - получить АЦП для чтения и обновить стрелку на датчике.
Это то, что у меня есть, это образец из https://rawgit.com/Mikhus/canvas-gauges/master/examples/issue-63.html

Как это можнобыть изменены, чтобы получить показание АЦП? 

<!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 Ответ

0 голосов
/ 07 февраля 2019

NodeMCU передает файл HTML в браузер.Затем браузеру необходим механизм для получения последних значений из NodeMCU.

Для этого есть две части:

  1. Добавьте конечную точку HTTP на NodeMCU, чтобы обеспечить последнее чтение
  2. Пусть браузер получит значение от 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);
...