Обновление данных для датчиков иглы - PullRequest
0 голосов
/ 02 февраля 2019

Спасибо за ваше время.Я не могу заставить Иглу двигаться, Я использовал следующее и не повезло.В последовательном мониторе я вижу значение изменения АЦП при перемещении потенциометра. По адресу веб-сервера 192.168.4.1. Я вижу датчик, но при движении сосуда игла не двигается.В HTML есть 2 скрипта.это неправильно?Есть ли лучший способ?

<!doctype html>
<html>
<head>
    <title>Testing Gauges</title>
    <script src="gauge.min.js"></script>
</head>
<body>
<canvas id="gauge-ps"></canvas>

<script>
setInterval(function() {
	  // Gets ADC value at every one second
	  GetADC();
	}, 1000);
	
function GetADC() {
	  var xhttp = new XMLHttpRequest();
          var adc=0;
	  xhttp.onreadystatechange = function() {
	    if (this.readyState == 4 && this.status == 200) {
		adc = Number(this.responseText);
	    }   
       };
	  
       xhttp.open("GET", "/getADC", false);
	  xhttp.send();
	}
</script>


<script>	
    
var gaugePS = new RadialGauge({
    renderTo: 'gauge-ps',
    width: 400,
    height: 400,
    units: 'Temp',
    minValue: 0,
    maxValue: 100,
    majorTicks: [
        '0','10','20','30','40','50','60','70','80','90','100'
    ],
    minorTicks: 2,
    ticksAngle: 270,
    startAngle: 45,
    strokeTicks: true,
    highlights  : [
        { from : 45,  to : 80, color : 'rgba(78,   78, 76, 0.5)' },
        { from : 80, to : 100, 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 = "adc" ;


</script>

</body>
</html>

1 Ответ

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

Добавьте конечную точку HTTP для браузера, чтобы он отвечал последним чтением.

Сначала добавьте обработчик на маршруте / getADC:

// declare handleAdcPath before this snippet
server.on("/getADC", handleAdcPath);

Затем реализуйте обработчик:

void handleAdcPath()
{
    auto requestMethod = server.method();
    if (requestMethod == HTTP_GET)
    {
        server.send(200, "text/plain", getAdc());
    }
}

Где getAdc было объявлено перед фрагментом выше.например,

int getAdc()
{
    return analogRead(A0);
}
...