Question

谢谢您的时间。我无法移动量规上的针，我使用了以下方法，但没有运气。在串行监视器中，当我移动电位计时，我可以看到adc值的变化。在Web服务器地址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>

Answer 1

为浏览器添加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);
}

更新数据以量针

1 个答案: