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

ESP8266/ESP32(Google gauge) - MicroPython

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)에 출력하는 프로그램 예:

# python_web_server_STA_AJAX_DHT11.py

# usocket를 socket(별칭)으로 import한다. 
try:
  import usocket as socket
# 만약 usocket의 import에 실패하면 socket를 import한다. 
except:
  import socket

# machine module로 부터 Pin, Timer class를 import 한다.
from machine import Pin, Timer
# Timer object를 생성한다.
timer = Timer(0)

import dht 
sensor = dht.DHT11(Pin(14))

# network library는 ESP32/ESP8266를 Wi-Fi network에 연결할 수 있게한다.
import network
# Vendor OS debugging 메세지를 Turn off 한다.
import esp
esp.osdebug(None)
# Garbage collector를 실행한다.
import gc
gc.collect()
# Router 연결에 필요한 정보(네트워크 자격 증명)를 변수에 저장한다.
ssid = 'REPLACE_WITH_YOUR_SSID'
password = 'REPLACE_WITH_YOUR_PASSWORD'
# ESP32/ESP8266를 Wi-Fi station mode으로 설정한다.
station = network.WLAN(network.STA_IF)
# Wi-Fi station을 활성화한다.
station.active(True)
# ESP32/ESP8266을 Router에 연결(SSID 과 password 사용)한다.
station.connect(ssid, password)
# ESP32/ESP8266가 네트워크에 연결될 때까지 기다린다.
while station.isconnected() == False:
  pass
# ESP32/ESP8266가 네트워크 연결에 성공하였음을 확인하는 메세지를 출력한다.
print('Connection successful')
# ifconfig() method를 사용하여 ESP32/ESP8266 IP Address와
# network interface parameters를 출력한다.
print(station.ifconfig())

# 이 함수는 Web Client에 전송할 HTML 문서를 Return 한다.
def web_page():
  html = """
<!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>
 
 </body>
</html>
  """
  return html

# 수신 요청(Incoming requests)을 수신하고 HTML 텍스트를 client에 보내기 위한 소켓을 생성한다.
# 주어진 Address family와 Socket type으로 새 socket object(s)를 생성한다.
s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
# bind() 메서드를 사용하여 소켓을 주소(네트워크 인터페이스 및 포트 번호)에 바인딩한다.
# bind() 메서드는 IP 주소와 포트 번호를 인수로 사용한다.
# 아래 예에서는 IP 주소(빈 문자열‘‘)와 포트 번호 80을 인수로 전달한다.
# 이 경우 빈 문자열은 ESP32/ESP8266의 IP 주소로 로컬 호스트 주소를 사용함을 표시한다.
s.bind(('', 80))
# 서버가 연결을 허용(Listening socket을 만듬)하도록한다.
# 인수는 대기중인 최대 연결 수를 지정한다. 이 예에서 최대 값은 5 이다.
s.listen(5)

# Web client로 부터 Request를 듣고(수신)하고 Responses를 보내는 무한 Loop를 실행한다.
while True:
#  global temperat
#  global humidity
  # Client가 연결되면 서버는 accept() 메서드를 호출하여 연결을 수락한다.
  # 새 소켓 객체(데이터의 수신 및 전송에 사용함)를 conn 변수(소켓 객체가 저장됨)에 저장하고,
  # addr 변수에는 서버에 연결한 클라이언트의 주소를 저장한다.
  conn, addr = s.accept()
  # addr 변수에 저장된 client 주소를 출력한다.
  print('Got a connection from %s' % str(addr))
  # client와 server는 send()와 recv() methods를 사용하여 데이터를 교환한다.
  # 새로 생성된 소켓에 수신된 request를 가져와 request 변수에 저장한다.
  # recv() method는 client 소켓에서 데이터를 받는다(새 소켓 객체가 conn 변수에 저장되어 있음).
  # recv() method의 인수는 한번에 받을 수있는 최대 데이터를 지정한다.
  request = conn.recv(1024)
  # request 변수에 저장된 내용을 문자열로 변환한다.
  request = str(request)
  # request 내용을 출력한다.
  print('Content = %s' % request)

# request 문자열에서 '/getData' 문자열을 찾는다.
  # 만약 문자열이 발견되면 문자열의 위치(이 예에서는 6)가 반환되고, 아니면 -1 이 반환된다.
  getData = request.find('/getData')
  # 만약 6번째 문자 위치에서 '/getData' 문자열이 발견되었으면
  # 현재 온도와 습도를 측정하고 결과를 Web client에 Return 한다.
  if getData == 6:
    try:
      sensor.measure()
      temp = sensor.temperature()
      hum = sensor.humidity()
#      temp_f = temp * (9/5) + 32.0
      print('Temperature: %3.1f C' %temp)
#    print('Temperature: %3.1f F' %temp_f)
      print('Humidity: %3.1f %%' %hum)
    except OSError as e:
      print('Failed to read sensor.')

# 측정 결과를 Web client에 전송하기 위한 문자열로 변환한다.
	# "data" Tag 뒤에 "|" 문자로 구분한 온도와 습도 값을 첨부한다.
    response = "data|"
    # 실수를 Bytes로 변환한 다음 String으로 변환한다.
    response += (b'{0:4.1f}'.format(temp)).decode("utf-8")
    response += "|"
    response += (b'{0:4.1f}'.format(hum)).decode("utf-8")
    #print('response = %s' % response)
    # send()와 sendall() 메서드를 사용하여 소켓 client에 응답(Web page)을 보낸다.
    conn.send('HTTP/1.1 200 OK\n')
    conn.send('Content-Type: text/html\r\n\r\n')
    conn.sendall(response)
    conn.close()

# request 문자열에'/getData' 가 없는 경우 Wbe page를 Upload 한다.
  else:
    # web_page() 함수에서 반환한 HTML 텍스트를 response 변수에 저장한다.
    response = web_page()
    # send()와 sendall() 메서드를 사용하여 소켓 client에 응답(Web page)을 보낸다.
    conn.send('HTTP/1.1 200 OK\n')
    conn.send('Content-Type: text/html\n')
    conn.send('Connection: close\n\n')
    conn.sendall(response)
    conn.close()

위 프로그램의 실행 결과 예

실험을 위한 준비

"python_web_AJAX_DHT11_google_gauge.py"를 Download 하여 PC에 저장 한다.
ESP32 개발보드와 센서 모듈 연결

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

실험 방법

Thonny IDE를 실행하고 Thonny IDE의 사용 환경(Thonny 실행에 사용할 장치와 COM Port 선택)이 바르게 되어 있는지 확인한다.
Thonny IDE의 Python shell 창에 prompt( >>> )가 출력되었는 확인한다.
Thonny IDE의 "파일 -> 열기"를 실행하여 프로그램 파일(python_web_AJAX_DHT11_google_gauge.py)을 Open 한다.
Thonny IDE의 Scripts 편집 창 프로그램에서 본인의 무선 공유기 연결을 위한 네트워크 자격 증명(ssid와 password)를 설정하고 "이 컴퓨터"에 저장한다.
실험

"실행 -> 현재 스크립트 실행"을 실행하거나 Toolbar의 "실행" Icon을 클릭하면 스크립트가 개발보드에 전송되고 프로그램이 실행된다.
프로그램이 실행되면 Thonny IDE의 Python shell 창에 아래 예와 같이 네트워크 연결에 성공하였음을 알리는 메세지와 Network interface parameters가 출력(약간의 시간 지연이 있음)된다.

Connection successful

('192.168.0.30', '255.255.255.0', '192.168.0.1', '210.220.163.82')

웹 부라우저에서 ESP Web server에 연결(위 예에서 '192.168.0.30'이 ESP Web server의 IP Address 임)하면 윗 예와 같이 온도 측정 결과가 표시된다.
외부(WiFI Router 외부)에서 접속하고자 하는 경우에는 자신의 WiFI Router에서 포트포워드 설정(ip-TIME 과 같이 공유기를 제공하는 회사 자료에서 공유기 포트포워드 설정을 참고 바람)을 하여야 한다.
실험: 프로그램이 실행되면 2초 간격으로 측정된 온도와 습도 값이 출력된다. 센서에 손가락을 대고 있으면 습도가 변동한다. 유사한 방법으로 온도를 변동 시키며 측정 결과와 비교한다.

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