html - 如何从服务器更新仪表上的 data-value="adc"?
问题描述
我正在使用 NodeMCU (ESP8266) 和 Arduino IDE。草图部分有效,当我移动锅时,我可以在串行监视器上看到模拟读数。
网络服务器index.html位于 SPIFFs 文件系统中。
连接并加载服务器后,我可以在浏览器上看到仪表,但没有显示针的移动。
我的目标是获取 ADC 读数并更新仪表上的指针。
这是我到目前为止所拥有的,这是来自https://rawgit.com/Mikhus/canvas-gauges/master/examples/issue-63.html的示例
如何修改它以获得 ADC 读数?
<!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 获取最新值。
实现这一点有两个部分:
- 在 NodeMCU 上添加 HTTP 端点以提供最新读数
- 让浏览器从 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);
推荐阅读
- windows - 如何解决 psutil 问题 - Taurus
- html - 嵌套的 ng-repeat 无法正常工作
- spring-boot - Spring Boot 应用程序针对两个不同的 okta 授权服务器进行验证
- java - 在 Java 中解锁多次锁定的对象需要多少次解锁操作?
- r - Shinyalerts:我如何知道用户是否按下了确定或取消?
- fastreport - FastReport4中的累计
- django - Django2.0,python-version3.6,django-simpl-captcha-5.6,为什么我的验证码没有出现?
- postgresql - 即使在索引扫描之后,PostgreSQL 查询也很慢
- jquery - CKEditor 5:将表格功能添加到经典构建中失败
- sql - 在 SQL 中一起使用 count 和 sum