如何更新数据值=“adc"在服务器的仪表上? [英] How to update the data-value= "adc" on the gauge from the server?
问题描述
我使用的是 NodeMCU (ESP8266) 和 Arduino IDE.草图部分有效，当我移动锅时，我可以在串行监视器上看到模拟读数.
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.
网络服务器 index.html 在 SPIFFs 文件系统中.
连接并加载服务器后，我可以在浏览器上看到仪表，但没有显示针的移动.
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.
我的目标是获取 ADC 读数并更新仪表上的指针.
这是我到目前为止所拥有的，这是来自 https 的示例://rawgit.com/Mikhus/canvas-gauges/master/examples/issue-63.html
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
如何修改以获得ADC读数?
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>推荐答案
NodeMCU 正在向浏览器提供 HTML 文件.然后浏览器需要一种机制来从 NodeMCU 获取最新值.
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:
- 在 NodeMCU 上添加 HTTP 端点以提供最新读数
- 让浏览器从 NodeMCU 获取值
实现 HTTP 端点
HTTP 端点将以最新的读数响应浏览器.
Implementing the HTTP endpoint
The HTTP endpoint will respond to the browser with the latest reading.
首先在路由/ps上添加一个处理程序:
First add a handler on the route /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() 函数来获取读数.
This assumes that you implement the getValue() function to obtain the reading.
例如读取引脚 A3 的示例函数:
e.g. An example function to read pin A3:
int getValue()
{
return analogRead(A3);
}
更新 HTML 以从 NodeMCU 获取最新值
通过将以下内容添加到 HTML 文件中的脚本块，添加一个函数以从上面添加的端点获取读数:
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();
}
然后让页面调用这个函数.最简单的方法是在页面上添加一个按钮，调用 updatePsValue():
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>
或者，浏览器可以使用脚本块中的一些 javascript 轮询更新:
Alternatively the browser could poll for updates using some javascript in the script block:
// poll for updates once per second
setInterval(updatePsValue, 1000);
这篇关于如何更新数据值=“adc"在服务器的仪表上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
