二次元温度データの周期的なブラウザ出力

前提・実現したいこと

Grid-EYE(ROBOBA041)という温度センサの出力温度データを，ESP-WROOM-02をWebサーバとして用いて，ブラウザに表示したいと考えております．
ArduinoIDEを用いて，ESPに以下のようなプログラムを書き込んだところ，毎秒ごとに温度データの更新と表示を行うことに成功しました．
しかし，現段階ではブラウザの更新により，温度データの更新を行っている状態であり，今後温度データ以外の要素（ラジオボタンなど）もブラウザ表示するとなった場合，温度データのみ更新を行うようにしたいと考えました．
どうにかして，ブラウザの中での温度データ部分のみ更新を繰り返すようにはできないでしょうか．
よろしくお願いいたします。

該当のソースコード

Arduino
1#include <WiFiClient.h>
2#include <ESP8266WiFi.h>
3#include <ESP8266WebServer.h>
4#include <Wire.h>
5#include <GridEye.h>
6
7GridEye myeye = GridEye(GridEye_DeviceAddress_1);
8ESP8266WebServer server(80);
9
10void onroot() {
11    String msg ;
12    int pixel[64];
13    msg += "<!DOCTYPE html>";
14    msg += "<html><head><meta http-equiv=\"refresh\" content=\"1\" charset=\"utf-8\">";
15    msg += "<meta http-equiv=\"content-type\" content=\"text/html; 
16                                                charset=UTF-8\">";
17    msg += "<title>Temperature</title><body>";
18    myeye.pixelOut(pixel); // Grid-EYEの温度データ読み出し
19    for (int i = 0; i < 64; i++) {
20      if (i && ((i % 8) == 0)) {
21      msg += "<br>";
22    }
23    msg += "<font size='3'>" + String(pixel[i]* 0.25) + "</font>"; //温度デー 
24                                                                    タを表示
25    msg += "&nbsp;";
26    }
27    msg += "<p id=\"LED\"></p>";
28    msg += "</body></html>";
29    server.send(200, "text/html", msg);
30}
31
32void setup() {
33    Serial.begin(115200);
34    Wire.begin();
35    WiFi.config(IPAddress(***, ***, ***, ***), WiFi.gatewayIP(), 
36          WiFi.subnetMask());//使いたいIPアドレスを指定
37    WiFi.begin("*******", "********");
38
39    WiFi.mode(WIFI_STA);
40
41    // Web server setting
42    server.on("/", onroot);
43    server.begin();
44}
45
46void loop() {
47    server.handleClient();
48}

試したこと

上記のプログラムを実行すると，このようなデータが表示され，毎秒ごとに更新されます．

補足情報

Grid-EYEは二次元温度データを88要素の数値として出力する赤外線アレイセンサです．なので出力される温度データも88(64)となっています．

行動規範の内容に同意します

回答1件

ベストアンサー

個人的に「宿題」にしていたのがなんとか動き始めたのでご参考まで。Web系全然知識ありません。JavaScriptはほとんどいじったことないし、Ajaxなんて初めて。Docker入れてnginxでサーバ立てて、なんてやってたもので結構時間かかりました。
なお、ESP32で作っていますが、ほぼ同様に動くものと期待しています。

センサの読み出しとかは無視していますが現行出来ているので問題ないでしょう。
キモはAjaxでブラウザの更新をさせる、ということで。teratailはWeb周りの猛者とかいっぱいいるので、そういう方たちがもっといい解を示してくれるといいなぁ。

Arduino/ESP32
1#include <WiFiClient.h>
2#include <WebServer.h>
3#include <WiFi.h>
4
5WebServer server(80);
6
7void onroot() {
8  String msg =
9    "<!DOCTYPE html>"
10    "<meta http-equiv='content-type' content='text/html; charset=UTF-8'>"
11    "<title>Temperature</title><head>"
12    "</head>"
13
14    "<body>"
15    // Javascript/Ajaxでデータを取得し、ダイナミックに更新する
16    "<script src='//code.jquery.com/jquery-3.1.1.min.js'></script>"
17    "<script>"
18    "$(function() {"
19    "setInterval(function() {"
20    "$.ajax({"
21    "type: 'GET',"
22    "url: 'data.html',"
23    "dataType: 'html',"
24    "}).done(function (results) {"
25    "document.getElementById('t1').innerHTML = results;"
26    "}).fail(function(results) {"
27    "document.getElementById('t1').innerHTML = 'Error.';"
28    "});"
29    "},2000);"
30    "});"
31    "</script>"
32
33    //以下HTML要素
34    "<button>"
35    "<font size='2'>TestButtonA</font>"
36    "</button>"
37
38    //ここに取得したデータをはめ込む
39    "<div id='t1'></div>"
40
41    "<button>"
42    "<font size='2'>TestButton2</font>"
43    "</button>"
44
45    "</body></html>";
46  server.send(200, "text/html", msg);
47}
48void onData() {
49  String msg ;
50  msg += "Now \n\t" + String(millis()) + "...";
51  msg += "<table border='1'>";
52  for(int i=0;i<3;i++){
53    msg+="<tr>";
54    for(int j=0;j<3;j++){
55      msg+="<td>"+String(random(1,100))+"</td>";
56    }
57  }
58  msg+="</table>";
59  server.send(200, "text/html", msg);
60}
61
62void setup() {
63  Serial.begin(115200);
64  WiFi.begin("yourSSID", "yourPass");
65  WiFi.mode(WIFI_STA);
66
67  while (WiFi.status() != WL_CONNECTED) {
68    delay(500);
69    Serial.print(".");
70  }
71  Serial.println("");
72  Serial.print("Connected to ");
73  Serial.print("IP address: "); //シリアルモニタで接続すべきIPアドレスを見る
74  Serial.println(WiFi.localIP());
75
76  // Web server setting
77  server.on("/", onroot);
78  server.on("/data.html", onData); //"test.txt"ファイルget要求に対する返答を登録
79  server.begin();
80}
81
82void loop() {
83  server.handleClient();
84}