WiFi Module(ESP Module)을 이용한 원격제어: google-gauge-chart-arduino

ESP8266/ESP32(Google gauge) - Arduino

ESP8266/ESP32 Module - Google gauge chart

Google gauge chart

Google gauge chart basic
Google gauge customization
하나의 웹 페이지에 여러개의 차트를 그리기

ESP8266/ESP32를 이용한 온습도(DHT11 센서 사용) 측정 Web server - Google gauge

ESP8266/ESP32과 DHT11 센서를 사용한 온습도 측정
온도/습도 센서(DHT11/DHT22) 측정 결과를 Web Page(Google gauge)에 출력하는 예

ESP8266/ESP32 Module - Google gauge chart - 관련 페이지 보기

Google gauge chart

Google gauge chart basic

Google Charts는 웹 사이트에서 데이터를 시각화하는 방법을 제공한다. 단순한 라인 차트에서 복잡한 계층 구조 트리 맵에 이르기까지 차트 갤러리는 즉시 사용할 수있는 다양한 차트(30여종의 차트중 여기서는 측정 결과를 표시할 수 있는 Gauge chart에 대하여 설명함) 유형을 제공한다.

참고자료: Google Charts Guides

Google 차트를 사용하는 가장 일반적인 방법

Google 차트를 사용하는 가장 일반적인 방법은 차트를 웹 페이지에 삽입하는 자바 스크립트를 사용하는 것이다.

사용할 Google 차트 라이브러리를 로드하고,
차트에 표시할 데이터를 나열(List)하고,
차트의 사용자 정의 옵션을 설정하고,
선택한 ID로 차트 개체를 만든다.
그런 다음 웹 페이지에서 해당 ID로 <div>를 만들어 Google 차트를 표시한다.

Googl의 Gauge chart 예

아래 HTML 문서는 Google에서 제공하는 Gauge chart 예이다.

<!DOCTYPE html>
<html>
  <head>
   
   
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      // 특정 차트 유형 패키지를 로드 한다. 아래 예에서는 'gauge' 패키지를 로드 한다.
      // 첫 번째 인수('current'는 버전 이름 또는 숫자(문자열)이다. 
      // 'current'를 지정하면 Google Charts의 최신 공식 릴리스가 로드된다.
      google.charts.load('current', {'packages':['gauge']});
      // 패키지가 로드 되면 호출되는 Callback 함수를 설정한다.
      // 함수의 이름은 본인이 원하는 이름을 사용할 수 있지만 전역함수로 정의되어야 한다.
      google.charts.setOnLoadCallback(drawChart);

// 데이터 테이블을 만들고, gauge 차트를 인스턴스화하고,
      // 데이터를 전달하고 차트를 그리는 콜백 함수이다.
      function drawChart() {
        // 데이터 테이블을 만들고 초기화 한다.
		// 3개 차트(Memory, CPU, Network)의 이름과 초기값(데이터)을 설정한다.
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

// 차트 옵션을 설정한다.
        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

// 옵션(chart id)을 전달하여 Gauge 차트의 인스턴스를 만든다.
        var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
        // 데이터와 옵션을 인수로 전달하여 차트를 그린다.
        chart.draw(data, options);

// 첫번째 차트(Memory)의 데이터 값을 3초 주기로 갱신하고 차트를 그린다.        
        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 3000);
        // 두번째 차트(CPU)의 데이터 값을 2초 주기로 갱신하고 차트를 그린다.        
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 2000);
        // 세번째 차트(Network)의 데이터 값을 6초 주기로 갱신하고 차트를 그린다.        
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 6000);
      }
    </script>
  </head>
  <body>
    
	<div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

위 웹문서(Googl의 Gauge chart)를 웹 브라우저에 브라우징한 예

Gauge chart(google-gauge-chart-basic.html)를 웹 브라우저에 브라우징 하기

이 예에서는 실험 시간을 줄이기 위하여 Web server를 사용하지 않고 PC에 저장된 HTML 문서를 직접 브라우저에 브라우징 한다. ESP Web server를 사용하는 예는 아래에서 설명함.

"google-gauge-chart-basic.html"를 Download 하여 PC에 저장 한다.
"google-gauge-chart-basic.html"을 더블 클릭하면 Web browser에 위 "웹문서(Googl의 Gauge chart)를 웹 브라우저에 브라우징한 예"와 같이 웹 브라우저에 Googl gauge chart가 브라우징 된다.
"google-gauge-chart-basic.html" 내의 data, option, setInterval 등을 변경하며 실험한다.

Google gauge customization

이 예에서는 Chart의 옵션 설정을 변경하여 Gauge의 모양을 변경(Customize)한다.

옵션 설정으로 Gauge 모양 변경(Customize)하기

옵션 설정 예

Gauge chart에서 설정 가능한 옵션은 아래와 같다.

Animation: animation.duration, animation.easing,
Frame: forceIFrame
Size: height, width
Value range: min, max
Green section: greenColor, greenFrom, greenTo
Yellow section: yellowColor, yellowFrom, yellowTo
Red section: redColor, redFrom, redTo
Tick section: majorTicks, minorTicks

아래 참고자료를 참고하여 위에 나열한 옵션을 변경하며 실험하여 보기 바람.

참고자료: Visualization: Gauge

Chart Style 속성 설정을 이용하여 Gauge 모양 변경(Customize)하기

아래 HTML 문서는 Style 속성 설정을 이용하여 Gauge의 모양 변경(Customize)하는 예이다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Outer-ring */
      #chart_div circle:nth-child(1) {
        stroke-width: 5;
        stroke: powderblue;
        fill: #bbb;
      }
      
      /* Main background */
      #chart_div circle:nth-child(2) {
        fill: dimgray;
        stroke: #ddd;
        stroke-width: 5;
      }
      
      /* Circle of the pointer */
      #chart_div circle:nth-child(3) {
        fill: pink;
        stroke: white;
        stroke-width: 6px;
      }
      
      /* Main text of the gauge */
      #chart_div text {
        fill: yellow;
        font-family: 'Comfortaa';
      }
      
      /* Current value text */
      #chart_div text:nth-child(1) {
        fill: white;
        font-size: 33;
        font-weight: 700;
        font-family: 'Orbitron';
      }
      
      /* Ticks */
      #chart_div path {
      /*  stroke: white; */
        stroke: cyan;
      }
      
      /* Circle */
      #chart_div path:nth-child(2) {
        fill: #FC6C05;
        stroke: white;
        stroke-width: 2px;
        fill-opacity: 1;
      }
      
      /* Warning area */
      #chart_div path:nth-child(3) {
        fill: lightsalmon;
      }
      
      /* Danger area */
      #chart_div path:nth-child(4) {
        fill: orangered;
      }
    </style>

function drawChart() {

var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55]
        ]);

var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

var chart = new google.visualization.Gauge(document.getElementById('chart_div'));

chart.draw(data, options);

setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 3000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
      }
    </script>
  </head>
  <body>
    <h3>Google gauge basic</h3>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>

</html>

Style 속성을 이용하여 Gauge 모양을 변경(Customize)한 예

Gauge chart(google-gauge-style-customize.html)를 웹 브라우저에 브라우징 하기

이 예에서는 실험 시간을 줄이기 위하여 Web server를 사용하지 않고 PC에 저장된 HTML 문서를 직접 브라우저에 브라우징 한다.

"google-gauge-style-customize.html"를 Download 하여 PC에 저장 한다.
"google-gauge-style-customize.html"을 더블 클릭하면 Web browser에 Gauge chart가 브라우징 된다.
"google-gauge-style-customize.html" 내의 style 속성을 변경하며 실험한다.

하나의 웹 페이지에 여러개의 차트를 그리기

각각의 차트에 별도의 콜백을 사용하여 여러개의 Gauge chart 그리기

이 예는 별도의 콜백(2개)을 사용하여 2개의 Gauge chart를 그리는 예이다.

<!DOCTYPE html>
<html>
  <head>
   
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      // 'gauge' 패키지를 로드 한다.
      google.charts.load('current', {'packages':['gauge']});
      // 온도를 표시를 위한 Callback 함수(drawTemper)를 설정한다.
      google.charts.setOnLoadCallback(drawTemper);

// 습도를 표시를 위한 Callback 함수(drawHumidity)를 설정한다.
      google.charts.setOnLoadCallback(drawHumidity);

// 온도를 표시하는 차트를 그리는 콜백 함수
      function drawTemper() {
        // 데이터 테이블을 만들고 초기화 한다.
        var dataTemper = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Temper', 0]
        ]);

// 차트 옵션을 설정한다.
         var gaugeOptionsTemper = {
          min: -20,
          max: 60,
          yellowFrom: 30,
          yellowTo: 40,
          redFrom: 40,
          redTo: 60,
          minorTicks: 4
        };

// 옵션(Temper_chart_div)을 전달하여 Gauge 차트의 인스턴스를 만든다.
        var temper_chart = new google.visualization.Gauge(document.getElementById('Temper_chart_div'));
        // 데이터와 옵션을 인수로 전달하여 차트를 그린다.
        temper_chart.draw(dataTemper, gaugeOptionsTemper);

// 온도 차트(Memory)의 데이터 값(-20 ~ 80 도)을 3초 주기로 갱신하고 차트를 그린다.        
        setInterval(function() {
          dataTemper.setValue(0, 1, Math.round(80 * Math.random()) - 20);
          temper_chart.draw(dataTemper, gaugeOptionsTemper);
        }, 3000);
      }

// 습도를 표시하는 차트를 그리는 콜백 함수
      function drawHumidity() {
        // 데이터 테이블을 만들고 초기화 한다.
        var dataHumidity = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Humidity', 0]
        ]);

// 차트 옵션을 설정한다.
         var gaugeOptionsHumidity = {
          min: 0,
          max: 100,
          yellowFrom: 70,
          yellowTo: 85,
          redFrom: 85,
          redTo: 100,
          minorTicks: 5
        };

// 옵션(Humidity_chart_div)을 전달하여 Gauge 차트의 인스턴스를 만든다.
        var humidity_chart = new google.visualization.Gauge(document.getElementById('Humidity_chart_div'));
        // 데이터와 옵션을 인수로 전달하여 차트를 그린다.
        humidity_chart.draw(dataHumidity, gaugeOptionsHumidity);

// 습도 차트(Memory)의 데이터 값(0 ~ 100 도)을 4초 주기로 갱신하고 차트를 그린다.        
        setInterval(function() {
          dataHumidity.setValue(0, 1, Math.round(100 * Math.random()));
          humidity_chart.draw(dataHumidity, gaugeOptionsHumidity);
        }, 4000);
      }
     </script>
  </head>
  <body>
    
    <table class="columns">
      <tr>
        <td><div id="Temper_chart_div" style="width: 230px; height: 200px;"></div></td>
        <td><div id="Humidity_chart_div" style="width: 230px; height: 200px;"></div></div></td>
      </tr>
    </table>
    
  </body>
</html>

별도의 콜백(2개)을 사용하여 2개의 Gauge chart(온도, 습도)를 그리는 예

Gauge chart(google-gauge-2-chart-2-callback.html)를 웹 브라우저에 브라우징 하기

이 예에서는 실험 시간을 줄이기 위하여 Web server를 사용하지 않고 PC에 저장된 HTML 문서를 직접 브라우저에 브라우징 한다.

"google-gauge-2-chart-2-callback.html"를 Download 하여 PC에 저장 한다.
"google-gauge-2-chart-2-callback.html"을 더블 클릭하면 Web browser에 Gauge chart가 브라우징 된다.

하나의 콜백을 사용하여 여러개의 Gauge chart 그리기

이 예는 하나의 콜백을 사용하여 2개의 Gauge chart를 그리는 예이다.

<!DOCTYPE html>
<html>
  <head>
   
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript">
      // 'gauge' 패키지를 로드 한다.
      google.charts.load('current', {'packages':['gauge']});
      // 온도를 표시를 위한 Callback 함수(drawChart)를 설정한다.
      google.charts.setOnLoadCallback(drawChart);

// 습도를 표시를 위한 Callback 함수(drawHumidity)를 설정한다.
      google.charts.setOnLoadCallback(drawHumidity);

// 온도와 습도를 표시하는 차트를 그리는 콜백 함수
      function drawChart() {
        // 온도 데이터 테이블을 만들고 초기화 한다.
        var dataTemper = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Temper', 0]
        ]);

// 온도 차트 옵션을 설정한다.
         var gaugeOptionsTemper = {
          min: -20,
          max: 60,
          yellowFrom: 30,
          yellowTo: 40,
          redFrom: 40,
          redTo: 60,
          minorTicks: 4
        };

// 습도 데이터 테이블을 만들고 초기화 한다.
        var dataHumidity = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Humidity', 0]
        ]);

// 습도 차트 옵션을 설정한다.
         var gaugeOptionsHumidity = {
          min: 0,
          max: 100,
          yellowFrom: 70,
          yellowTo: 85,
          redFrom: 85,
          redTo: 100,
          minorTicks: 5
        };

// 옵션(Temper_chart_div)을 전달하여 온도 Gauge 차트의 인스턴스를 만든다.
        var temper_chart = new google.visualization.Gauge(document.getElementById('Temper_chart_div'));
        // 데이터와 옵션을 인수로 전달하여 차트를 그린다.
        temper_chart.draw(dataTemper, gaugeOptionsTemper);

// 옵션(Humidity_chart_div)을 전달하여 습도 Gauge 차트의 인스턴스를 만든다.
        var humidity_chart = new google.visualization.Gauge(document.getElementById('Humidity_chart_div'));
        // 데이터와 옵션을 인수로 전달하여 차트를 그린다.
        humidity_chart.draw(dataHumidity, gaugeOptionsHumidity);

}
     </script>
  </head>
  <body>
    
    <table class="columns">
      <tr>
        <td><div id="Temper_chart_div" style="width: 230px; height: 200px;"></div></td>
        <td><div id="Humidity_chart_div" style="width: 230px; height: 200px;"></div></div></td>
      </tr>
    </table>
    
  </body>
</html>

하나의 콜백을 사용하여 2개의 Gauge chart(온도, 습도)를 그리는 예

Gauge chart(google-gauge-2-chart-1-callback.html)를 웹 브라우저에 브라우징 하기

이 예에서는 실험 시간을 줄이기 위하여 Web server를 사용하지 않고 PC에 저장된 HTML 문서를 직접 브라우저에 브라우징 한다.

"google-gauge-2-chart-1-callback.html"를 Download 하여 PC에 저장 한다.
"google-gauge-2-chart-1-callback.html"을 더블 클릭하면 Web browser에 Gauge chart가 브라우징 된다.

ESP8266/ESP32를 이용한 온습도(DHT11 센서 사용) 측정 Web server - Google gauge

ESP8266/ESP32과 DHT11 센서를 사용한 온습도 측정

Web 환경에서 ESP 모듈을 이용한 온도 측정(DHT11/DHT22) 구성도

ESP8266/ESP32를 Web server와 온도/습도 센서(DHT11/DHT22) 제어에 사용한다.
온도/습도 센서(DHT11/DHT22) 모듈은 측정한 온도/습도 값을 Single-Wire 통신 프로토콜로 ESP8266/ESP32에 전송한다.
AJAX를 이용하여 Web 페이지에서 필요한 측정 결과만 Update 한다.
측정 결과는 Web 페이지의 Google gauge에 출력(표시)된다.

온도/습도 센서(DHT11/DHT22) 측정 결과를 Web Page(Google gauge)에 출력하는 예

참고 자료

온도/습도 측정 결과를 Web Page(Google gauge)에 출력하는 프로그램 예

Web Browser에 출력되는 Web page(HTML 문서)를 아래와 같이 별도로 작성하여 Arduino IDE 프로그램(web_AJAX_DHT11_google_gauge.ino)과 동일한 폴더에 index.h 이름으로 저장한다.

Web Browser에서 ESP 웹 서버에 접속하면 이 문서가 Web Browser에 전송되어 출력된다.

Web Browser에 출력되는 Web page(HTML): index.h

// Web Browser에 출력되는 Web page
// R" : C++ 11 부터 \n 과 같은 Escape character를 처리하지 말고 Raw strings으로 사용 함을 표시
const char MAIN_page[] PROGMEM = R"=====(
<!DOCTYPE html>
<html>
 <head>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <meta charset='utf-8'>
  <title>Temperature/Humidity</title>
  <style>html {font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}
   body{margin-top: 50px;}
   h2 {color: #444444;margin: 50px auto 24px;}
   h3 {color: #1abc9c;margin-bottom: 30px;}
   p {font-size: 14px;color: #888;margin-bottom: 10px;}
   p.data {line-height: 0.5;}
   .label {line-height: 0.5;}

#time_P { margin: 10px 0px 15px 0px;}
   table {margin:auto; text-align:center;}
  </style>

// drawGauge() 함수 외부에서 chart draw 함수를 사용하기 위하여
      // chart draw, data, Option 객체을 전역 변수로 선언함.
      var temper_chart;
      var dataTemper;
      var gaugeOptionsTemper;

var humidity_chart;
      var dataHumidity;
      var gaugeOptionsHumidity;

// 온도와 습도를 표시하는 차트를 그리는 콜백 함수
      function drawGauge() {
        // 온도 데이터 테이블을 만들고 초기화 한다.
        dataTemper = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Temper', 0]
        ]);

// 온도 차트 옵션을 설정한다.
         gaugeOptionsTemper = {
          min: -20,
          max: 60,
          yellowFrom: 30,
          yellowTo: 40,
          redFrom: 40,
          redTo: 60,
          minorTicks: 4
        };

// 습도 데이터 테이블을 만들고 초기화 한다.
        dataHumidity = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Humidity', 0]
        ]);

// 습도 차트 옵션을 설정한다.
        gaugeOptionsHumidity = {
          min: 0,
          max: 100,
          yellowFrom: 70,
          yellowTo: 85,
          redFrom: 85,
          redTo: 100,
          minorTicks: 5
        };

// 옵션(gaugeTemper)을 전달하여 온도 Gauge 차트의 인스턴스를 만든다.
        temper_chart = new google.visualization.Gauge(document.getElementById('gaugeTemper'));
        // 데이터와 옵션을 인수로 전달하여 차트를 그린다.
        temper_chart.draw(dataTemper, gaugeOptionsTemper);

// 옵션(gaugeHumidity)을 전달하여 습도 Gauge 차트의 인스턴스를 만든다.
        humidity_chart = new google.visualization.Gauge(document.getElementById('gaugeHumidity'));
        // 데이터와 옵션을 인수로 전달하여 차트를 그린다.
        humidity_chart.draw(dataHumidity, gaugeOptionsHumidity);
      }

// 온도와 습도 값을 Update 하고 Chart를 그린다.
    function changeTemp(temper, humi) {
      dataTemper.setValue(0, 1, temper);
      dataHumidity.setValue(0, 1, humi);
      temper_chart.draw(dataTemper, gaugeOptionsTemper);
      humidity_chart.draw(dataHumidity, gaugeOptionsHumidity);
    }

// 현재 시간을 표시하는 함수이다. 이 함수는 주기적으로(보통 1초) 실행된다.
  function updateTime() 
    {  
       var d = new Date();
       var t = "";
       t = d.toLocaleTimeString();
       document.getElementById('Time').innerHTML = t;
    }

// Web page에 주기적으로 Update 할 Data를 Server로 부터 갖어 오기 위한 함수 이다. 
  function getServerData() 
    {  
      // 'getData'를 XMLHttpRequest의 URL로 사용한다.
    // Server에서 이 문자를 명령으로 인식하도록 함.
    ajaxLoad('getData');
    }

// XMLHttpRequest는 현재 사용하는 거의 모든 Browser에 Built-in 되어있는
  // Server로 부터 Data를 Request 하는 object 이다.
  // 주: Internet Explorer old versions(IE5 and IE6)은 지원하지 않는다.
  // XMLHttpRequest는 아래 기능을 가능하게 한다.
  //   Web page를 Reloading 하지 않고 Web page를 Update 할 수 있게 한다.
  //   Web page가 Load된 다음에 Server로 부터 Data를 Requeset 할 수 있다.
  //   Web page가 Load된 다음에 Server로 부터 Data를 Receive 할 수 있다.
  //   Background에서 Server에 Data를 보낼 수 있다.
  var ajaxRequest =new XMLHttpRequest();
 
    // Web server에 URL path(ajaxURL)를 GET Method로 보내고 결과를 Request 하는 함수
  function ajaxLoad(ajaxURL)
    {
      if(!ajaxRequest){ alert('AJAX is not supported.'); return; }
    // Open method는 request type을 지정한다.
    // Open method 기본형: .open(method, url, async)
    // method: GET or POST method를 사용 할 수 있다. 여기서는 GET Method를 사용 한다.
    // url: Server의 (file) Location. 이 프로그램에서는 이 문자열을 명령으로 사용한다.
    // async: true (asynchronous) or false (synchronous)
    // Server에 request를 전송하는 것은 .send() Method를 사용한다.
    ajaxRequest.open('GET',ajaxURL,true);
    // onreadystatechange Property는 XMLHttpRequest 객체의 상태가 변경 될 때마다 실행될 함수를 지정한다.
    ajaxRequest.onreadystatechange = function()
      {
//  alert("ajaxRequest 1: ");
        // readyState property가 4이고 status property가 200이면 응답이 준비된 상태이다.
        if(ajaxRequest.readyState == 4 && ajaxRequest.status==200)
        {
          // Response text를 ajaxResult 변수에 저장한다.
          var ajaxResult = ajaxRequest.responseText;
//  alert("ajaxRequest:" + ajaxResult);
          // 문자열 변수 ajaxResult 내의 문자를 "|" 문자로 분리하여 Array 변수에 저장한다.
          var commandArray = ajaxResult.split("|");
          // commandArray[0]의 문자열이 'data' 인 경우 commandArray[i]의 내용을 Web page에 표시 한다.
          if(commandArray[0] == 'data') {
            document.getElementById('Temperature').innerHTML = commandArray[1];
            document.getElementById('Humidity').innerHTML = commandArray[2];
        // 측정 결과를 Gauge에 표시한다.
      changeTemp(commandArray[1], commandArray[2]);
          }
        } 
      }
    // Server에 request를 전송(GET 사용)한다.
    // POST를 사용하는 경우에는 send(string)를 사용한다.
    ajaxRequest.send();
    }

// setInterval: 일정한 주기로 함수(함수 이름만 설정 가능)를 실행 한다.
    // getData 함수를 2000mSec 주기로 시행한다. 자주 변경하는 Data 표시에 사용 함. 
    var myVar1 = setInterval(getServerData, 2000);
    // updateTime 함수를 1Sec 주기로 시행한다. 현재 시간 표시에 사용 함.
    var myVar2 = setInterval(updateTime, 1000);
  
  </script>
 </head>
 

<body>
     <h2>Temperature/Humidity</h2>
     <p id="Time" class="data">Time</p>
     <table align='center'>
       <tr>
         <th>
           <label>Temperature: </label>
         </th>
         <th>
          <p id="Temperature" class="data">0.0</p>
         </th>
       </tr>
       <tr>
         <th>
           <label>Humidity: </label>
         </th>
         <th>
          <p id="Humidity" class="data">0.0</p>
         </th>
       </tr>
     </table>

<br /> <br />
    <label align='center'>Google gauge</label>
    <table align='center'>
      <tr>
        <th align='center'>
          <p id="gaugeTemper" style="width: 140px; height: 140px; align='center';"> </p>
        </th>
        <th align='center'>
          <p id="gaugeHumidity" style="width: 140px; height: 140px; align='center';"> </p>
        </th>
      </tr>
    </table>
 
 </body>
</html>
)=====";

ESP8266/ESP32 Web Server 프로그램: web_AJAX_DHT11_google_gauge.ino

// ESP WebServer AJAX(STA Mode)

// AJAX(Asynchronous JavaScript and XML)를 이용하여
// Web page가 Load된 후에 비 동기적으로 Web server에 Data를 보내고,
// Web server로 부터 Data를 읽어서 전체 Page를 Reload 하지 않고,
// Web page를 Update 한다.
// Web page 전체를 Reload 하지 않기 때문에 HTML 문서를 R"(Raw strings)으로
// 저장 할 수 있다. 그 결과 HTML 문서 작성이 용이하고 읽기 쉽다.
// 실시간으로 자주 Web page 내의 일부 Data를 Server로 부터 전달 받아 표시하는 경우 유리하다. 
// ESP32 개발보드를 사용하는 경우 WiFi.h와 WebServer.h를 사용한다.
#include <WiFi.h>
#include <WebServer.h>
// ESP8266를 사용하는 경우 ESP8266WiFi.h와 ESP8266WebServer.h를 사용한다.
//#include <ESP8266WiFi.h>
//#include <ESP8266WebServer.h>
#include <WiFiClient.h>

#include "index.h"  //Web page header file
// DHT Sensor를 위한 Library
#include <Adafruit_Sensor.h>
#include <DHT.h>
// 사용하는 DHT Sensor를 설정한다.
#define DHTTYPE    DHT11
//#define DHTTYPE    DHT22
// GPIO14을 Single wire 통신에 사용한다.
const int dhtPin = 14;
DHT dht(dhtPin, DHTTYPE);

// WiFiServer Object의 port 번호를 80(HTTP의 Default port)으로 한다.
// ESP32를 사용하는 경우
WebServer server(80);
// ESP8266를 사용하는 경우
//ESP8266WebServer server(80);

// 본인이 사용하는 공유기(WiFi Router)의 ssid와 psaaword를 설정 한다.
#ifndef STA_SSID
#define STA_SSID "REPLACE_WITH_YOUR_SSID"
#define STA_PASSWORD  "REPLACE_WITH_YOUR_PASSWORD"
#endif
//Enter your SSID and PASSWORD
const char* ssid = STA_SSID;
const char* password = STA_PASSWORD;

float temperature;
float humidity;
char temperChars[10];
char humidityChars[10];

// 웹 브라우저로 부터 웹 페이지를 전송한다. URL path 가 root(/) 인 경우 실행된다.
void handleRoot() {
  // MAIN web page(HTML contents)의 Pointer를 갖어 온다.
  String s = MAIN_page;
  // Web page를 전송한다.
  server.send(200, "text/html", s);
}
// 수신한 URL path 가 /getData 인 경우 온도와 습도를 측정하여 결과를 전송한다.
void handleDHT() {
  // 전송 Format: data|온도|습도
  String response = "data|";
 
  // 온도를 측정하고 결과를 출력한다.
  temperature = dht.readTemperature();
  if (isnan(temperature)) {    
    Serial.println("Failed to read from DHT temperature sensor!");
  }
  else {
    dtostrf(temperature, 4, 1, temperChars);
    response += temperChars;
    response += "|";
    // 개발이 완료되면 아래 두줄을 Comment 처리한다.
    Serial.print("Temperature: ");
    Serial.println(temperature);
  }
 // 습도를 측정하고 결과를 출력한다.
  humidity = dht.readHumidity();
  if (isnan(humidity)) {    
    Serial.println("Failed to read from DHT humidity sensor!");
  }
  else {
    dtostrf(humidity, 4, 2, humidityChars);
    response += humidityChars;
    // 개발이 완료되면 아래 두줄을 Comment 처리한다.
    Serial.print("Humidity: ");
    Serial.println(humidity);
  }
  // Client ajax request에 측정 결과를 전송한다.
  server.send(200, "text/plane", response);
}

void setup(void){
  Serial.begin(115200);
  Serial.println();
  Serial.println("Booting Sketch...");

dht.begin();

// SSID 와 password를 사용하여 Wi-Fi network에 연결 한다.
  // STA mode에서 ESP은 WIFi Router로 부터 IP Address를 받는다.
  // 이 IP Address를 이용하여 Web server에 접속한다.
  // Internet를 이용하여 외부로 부터 접속하는 경우에는 WIFi Router에 포트 포워드 설정을 하여야 한다.
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);

Serial.println("Connecting to ");
  Serial.print(ssid);

// WIFi 연결을 기다린다. 이 동안 Logger에 . 을 출력 한다.
  while(WiFi.waitForConnectResult() != WL_CONNECTED){      
      Serial.print(".");
    }
    
  // ssid와 Local IP address를 출력한다. 
  // 이 IP address를 이용하여 Web browser에서 Server에 연결한다.
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
  // Web Browser로 부터 수신된 HTTP requests를 처리하기 위하여는
  // Request의 URL path 와 일치 할 경우 실행되는 함수가 필요하다.
  //  이 예에서는 GET Method를 이용하여 Server에 명령을 전달한다.
  //  Get Method는 URL의 일부로 정보를 전달하기 때문에 URL에 포함된 명령을 URL path라 한다.  
  // 아래 예의 Method는 2개의 Parameters(URL과 Function name) 가 필요하다.
  // 아래 예에서 on Method는 URL path 가 root(/) 일때 handle_OnConnect() 함수를 실행한다.
  server.on("/", handleRoot);
  server.on("/getData", handleDHT);
  // Start server
  server.begin();
  Serial.println("HTTP server started");
}

void loop(void){
  // Listen for HTTP requests from clients
  server.handleClient();
  delay(1);
}

위 프로그램의 실행 결과 예

실험을 위한 준비

ESP8266/ESP32 개발보드와 센서 모듈 연결

ESP8266/ESP32 개발보드 Data input pin(GPIO14) <-> 센서의 data pin
Data input line Pull up 저항(1K - 10K): DHT11/DHT22 모듈에 Pull up 저항이 내장된 경우 생략하여도됨.
ESP8266/ESP32 개발보드 VDD(3.3V or 5V} <-> 센서 Vcc pin.

주: 센서에 따라 전원 전압은 5V 또는 3.3V 일 수 있으니 확인 바람.

ESP8266/ESP32 개발보드 GND <-> 센서 GND

실험 방법

Text 편집기에서 새 파일을 만들고 위 index.h 파일을 복사하여 Arduino IDE 프로그램(web_AJAX_DHT11_google_gauge.ino)과 동일한 폴더에 index.h 이름으로 저장한다.
Arduino IDE를 실행하고 "파일 -> 새 파일"을 클릭한다.
윗 web_AJAX_DHT11_google_gauge.ino 프로그램을 프로그램 편집 창에 복사한다.
무선 공유기의 ssid(STA_SSID), password(STA_PASSWORD)를 자신의 공유기 환경에 맞게 편집한다.
사용하는 보드에 따라 Library(WiFi.h, WebServer.h or ESP8266WiFi.h, ESP8266WebServer.h) 설정을 편집한다.
사용하는 보드에 따라 "WebServer server(80); or ESP8266WebServer server(80);" 설정을 편집하고 저장한다.
"툴 -> 보드: "보오드 이름" 에서 보드를 선택("NodeMCU-32S인 경우에는 "NodeMCU-32S" , ESP8266 NodeMCU인 경우에는 "NodeMCU 1.0(ESP-12E Module)) 한다.
"툴 -> 포트: "에서 COM Port(제어판에서 ESP에 연결된 Port 번호를 확인)를 선택 한다.
"스케치 -> 확인/컴파일"을 클릭하여 프로그램이 정상으로 컴파일되는지 확인한다.
"툴 -> 시리얼 모니터"를 실행하여 시리얼 모니터 창을 Open 한다.
"업 로드"를 실행 한다. 컴파일이 완료되고 Arduino IDE와 개발 보드 사이에 연결이 시작되면 FLASH Switch를 약 2초 동안 누른다.

주: ESP8266 NodeMCU 개발보드를 사용하는 경우에는 FLASH Switch와 RST Switch를 누르지 않아도 자동으로 업 로드 된다.

실험

업로드가 완료되면 프로그램이 자동으로 실행되고 시리얼 모니터 창에 아래 예와 같이 WiFi 연결 메세지와 IP address가 아래 예와 같이 출력된다.

IP address: 192.168.0.21

시리얼 모니터 창에서 IP Address(예: 192.168.0.21)를 확인한다. 자신의 WiFI Router(공유기)에 관리자로 접속하여 "고급설정 -> 네트워크 관리 -> 내부 네트워크 설정"에서 사용중인 IP 주소 정보 창에서 확인 하여도 된다.
PC(또는 휴대폰)의 웹 부라우저에서 ESP Web server에 연결(위 예에서 '192.168.0.21'이 ESP Web server의 IP Address 임)하면 윗 예와 같이 온도 측정 결과가 표시된다.
외부(WiFI Router 외부)에서 접속하고자 하는 경우에는 자신의 WiFI Router에서 포트포워드 설정(ip-TIME 과 같이 공유기를 제공하는 회사 자료에서 공유기 포트포워드 설정을 참고 바람)을 하여야 한다.
실험: 프로그램이 실행되면 2초 간격으로 측정된 온도와 습도 값이 출력된다. 센서에 손가락을 대고 있으면 습도가 변동한다. 유사한 방법으로 온도를 변동 시키며 측정 결과와 비교한다.

주: 개발이 완료되면 handleDHT()에서 온도와 습도를 시리얼 모니터에 출력하는 코드를 Comment 처리한다.

ESP8266/ESP32 Module - Google gauge chart - 관련 페이지 보기