求Arduino编程的8266 web绘制温度曲线的代码或者库

lemontreenm · 发表于 2022-8-4 08:35:57

爱科技、爱创意、爱折腾、爱极致，我们都是技术控

您需要登录才可以下载或查看，没有账号？立即注册

x

最近发现我们卧室的CH空调温度非常不准，实际温度和设定温度严重不符，室内温度受室外温度影响严重，温度波动大（变频空调用出了定频空调的感觉）。于是想写个程序利用8266模块记录开了空调后房间里温度的变化曲线，以此来简单检测下家里的几个不同牌子的空调倒地谁的温度更准确波动更小。

无奈自己技术烂的可以，所以在万能的论坛求教一下万能的坛友，有没有Arduino（我这个小白只会这个）编程的8266用的可以在web页面上绘制曲线的代码或者库？
不胜感激。

fryefryefrye · 发表于 2022-8-11 10:32:06

本帖最后由 fryefryefrye 于 2022-8-11 10:45 编辑

lemontreenm 发表于 2022-8-11 09:32
效果很好啊。不过arduino 8266能用吗？

理论上可以。
先把一个模板html放在8266的文件系统，开web服务。
浏览器访问后，会打开这个html模板。
然后html有脚本通过web地址访问数据，你在web服务里做一下，某个地址，返回所有的数据。
图就能画出来了。

<html>
<head>
<title>测试标题</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
</head>
<body>
<div id="container" style="width: 850px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
//type: 'scatter',
zoomType: 'x'
};
var title = {
text: '测试名称'
};
var subtitle = {
text: 'Source: xxx'
};
var xAxis = {
tickInterval: 60 * 1000, // time interval of xAxis in ms
tickWidth: 0,
gridLineWidth: 1,
labels: {
align: 'left',
x: 3,
y: -3
}
};
var yAxis = [{ // 左边 Y 轴
title: {
text: null
},
labels: {
align: 'left',
x: 3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
},{ // 右边 Y 轴
linkedTo: 0,
gridLineWidth: 0,
opposite: true,
title: {
text: null
},
labels: {
align: 'right',
x: -3,
y: 16,
format: '{value:.,0f}'
},
showFirstLabel: false
}
];
var tooltip = {
shared: true,
crosshairs: true
}
var legend = {
align: 'left',
verticalAlign: 'top',
y: 20,
floating: true,
borderWidth: 0
};
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
$.get('dailychartdata', function (csv) {
var data = {
csv: csv
};
json.data = data;
$('#container').highcharts(json);
});
});
</script>
</body>
</html>

复制代码

模板文件第87行的URL地址，请求数据的时候，按以下格式返回数据即可。
一根线数据格式示例:
2021-08-20 23:59:01,1
2021-08-21 23:59:00,2
2021-08-22 23:59:01,2
2021-08-23 23:59:00,1
2021-08-24 23:59:01,1
2021-08-25 23:59:00,1

复制代码

lemontreenm · 发表于 2022-8-11 09:32:34

fryefryefrye 发表于 2022-8-10 22:37
还是highchart效果好，还能随意放大，看任意一点数据。这是空调功率：

效果很好啊。不过arduino 8266能用吗？

gamenesea · 发表于 2022-8-11 08:08:42

空调小白，难怪家里空调设定同一个温度，不同时候的体感温度不同，原来不是自己感觉的问题。

fryefryefrye · 发表于 2022-8-10 22:37:52

本帖最后由 fryefryefrye 于 2022-8-10 22:41 编辑

还是highchart效果好，还能随意放大，看任意一点数据。这是空调功率：

这是房间温度湿度

lemontreenm · 发表于 2022-8-10 18:08:59

zipcord 发表于 2022-8-5 09:41
这个host应该是主机名，只是标识而已，不好意思啊，这个好久以前看到的，我的研究也不是很深，昨天给你说 ...

对，我要的就是这么个效果。

wenxueroom · 发表于 2022-8-10 15:04:04

我感觉你应该研究的是js

jpdd521 · 发表于 2022-8-5 19:36:04

zipcord 发表于 2022-8-5 09:41
这个host应该是主机名，只是标识而已，不好意思啊，这个好久以前看到的，我的研究也不是很深，昨天给你说 ...

瞬间解决问题了，好评。

tetgrt · 发表于 2022-8-5 11:38:11

zipcord 发表于 2022-8-5 09:41
这个host应该是主机名，只是标识而已，不好意思啊，这个好久以前看到的，我的研究也不是很深，昨天给你说 ...

谢谢，支持一下，跟学。

zipcord · 发表于 2022-8-5 09:41:25

lemontreenm 发表于 2022-8-4 16:39
M给了。另外问下，这个例程里面除了wifi信号名称和密码以外还有个host = "graph"需要修改，这个是什么内 ...

这个host应该是主机名，只是标识而已，不好意思啊，这个好久以前看到的，我的研究也不是很深，昨天给你说的那个示例有点难，你看看示例里面的AdvancedWebServer示例，这个好像更简单点。你要的效果应该是这个样子吧，

下面是画图的关键代码，里面的x,y,y2 替换成你的数据应该就可以了，具体要试试吧
void drawGraph() {
  String out;
  out.reserve(2600);
  char temp[70];
  out += "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" width=\"400\" height=\"150\">\n";
  out += "<rect width=\"400\" height=\"150\" fill=\"rgb(250, 230, 210)\" stroke-width=\"1\" stroke=\"rgb(0, 0, 0)\" />\n";
  out += "<g stroke=\"black\">\n";
  int y = rand() % 130;
  for (int x = 10; x < 390; x += 10) {
int y2 = rand() % 130;
sprintf(temp, "<line x1=\"%d\" y1=\"%d\" x2=\"%d\" y2=\"%d\" stroke-width=\"1\" />\n", x, 140 - y, x + 10, 140 - y2);
out += temp;
y = y2;
  }
  out += "</g>\n</svg>\n";

  server.send(200, "image/svg+xml", out);
}

lemontreenm · 发表于 2022-8-5 09:27:07

40560335 发表于 2022-8-4 23:08
咋跟我想法一样，我也是一直想做个，但是实在是懒得动，一个是冬天暖气不给力，一个和你一样，感觉空调不对 ...

没装挡风板。空调装的位置都不是直吹人的位置，而且可以通过改变出风口朝向不直接吹人，挡风板完全没用。

zipcord · 发表于 2022-8-5 09:21:05

lemontreenm 发表于 2022-8-4 16:39
M给了。另外问下，这个例程里面除了wifi信号名称和密码以外还有个host = "graph"需要修改，这个是什么内 ...

这里的host 应该是主机名，相当于一个标识而已，这个可改可不改，不影响

40560335 · 发表于 2022-8-4 23:08:01

咋跟我想法一样，我也是一直想做个，但是实在是懒得动，一个是冬天暖气不给力，一个和你一样，感觉空调不对劲，忽冷忽热，有时候设置26度就很凉快，有时候设置25度还总是把人热醒，一看温度计都28度了，外机还不启动，但是听你这么一说，我就更懒得做了，因为我家也是长虹空调。。。。这下我就知道了，我家的长虹空调温度不准、启停温差大并不是个例。另外问下，你家空调是不是安装了挡风板？