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

ESP8266/ESP32 - d3.js Pie chart gauge - MicroPython

d3 - Pie chart gauge

필요한 배경 지식
d3 - Pie chart gauge basic
Pie chart gauge customization
2개의 Pie chart gauge 출력하기

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

d3 - Pie chart gauge 시험을 위한 시스템 구성과 실험

ESP8266/ESP32 - d3.js Pie chart gauge - 관련 페이지 보기

d3 - Pie chart gauge

필요한 배경 지식

이 페이지에서는 ESP8266/ESP32 Web server와 D3.js Pie chart을 이용한 Gauge에 대하여 설명한다.

필요한 배경 지식

MicroPython과 JavaScript 언어
ESP8266/ESP32 Module(WiFi)
ESP8266/ESP32 Module(WiFi)을 이용한 원격 제어(Web server)
DHT11/12 온습도센서
D3.js Pie chart

d3 - Pie chart gauge basic

Pie chart gauge 프로그램 예

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>Gauge</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
	<style>
	body {
		font-family:  Helvetica, Arial, sans-serif;
		margin: 32px;
	}

#gaugeTemper g.arc {
		fill: steelblue;
	}

#gaugeTemper g.pointer {
		fill: #e85116;
		stroke: #b64011;
	}
	
	#gaugeTemper g.label text {
		text-anchor: middle;
		font-size: 14px;
		font-weight: bold;
		fill: #666;
	}
	</style>
</head>
<body>

    <table align='center'>
      <caption style="font-size:25px;">Pie chart gauge</caption>
	  <tr>
        <th align='center'>
          <p id="gaugeTemper" style="margin-left:40px;"> </p>
        </th>
      </tr>
    </table>

// Degrees를 Radians로 변환하는 함수 
	function deg2rad(deg) {
		return deg * Math.PI / 180;
	}

// Gauge 구성을 초기화한다. 
	function configure(config) {
		// Gauge의 표시 범위(각도)를 구한다. 예: 90 -(-90) = 180
		range = config.maxAngle - config.minAngle;
		// Pie chart의 반경(arc의 반경) r을 구한다. 예: 300 / 2 = 150
		r = config.size / 2;
		// Pointer head의 Length. 예: round(150 * 0.9) = 135
		pointerHeadLength = Math.round(r * config.pointerHeadLengthPercent);

// A linear scale that maps domain values to a percent from 0..1
		scale = d3.scaleLinear()
			.range([0,1])
			.domain([config.minValue, config.maxValue]);
		// Tick No Array를 생성한다. 예: [0, 2, 4, 6, 8, 10]
		ticks = scale.ticks(config.majorTicks);
		console.log("ticks: ", ticks);		
		// tickData를 생성한다. tickData는 보간법으로 arc의 색상을 계산하는 기본 데이터 또는 
		// arc의 Sector의 시작과 종료 각도를 구하는데 사용한다.
		// 1/config.majorTicks 값을 갖는 길이 majorTicks인 Array를 생성한다.
		// 예: [0.2, 0.2, 0.2, 0.2, 0.2]
		tickData = d3.range(config.majorTicks).map(function() {return 1/config.majorTicks;});
		//console.log("tickData: ", tickData);		
		
		// arc를 객체를 생성한다.
		arc = d3.arc()
			// arc 내부 반경: r - ringWidth - ringInset(Gauge 외부에 숫자를 표시하는 여백)
			.innerRadius(r - config.ringWidth - config.ringInset)
			// arc 외부 반경: r - ringInset(Gauge 외부에 숫자를 표시하는 여백)
			.outerRadius(r - config.ringInset)
			// tickData와 index i를 이용하여 Gauge의 i번째 Sector의 시작 각도를 구한다.
			.startAngle(function(d, i) {
				var ratio = d * i;
				return deg2rad(config.minAngle + (ratio * range));
			})
			// tickData와 index i를 이용하여 Gauge의 i번째 Sector의 종료 각도를 구한다.
			.endAngle(function(d, i) {
				var ratio = d * (i+1);
				return deg2rad(config.minAngle + (ratio * range));
			});
	}
	// configure 함수의 Ponter를 that 객체에 추가한다.
	that.configure = configure;
	
	// Gauge의 center를 설정하기 위하여 translate() 함수를 생성한다.
	// "translate(tx, ty)" 는 x 방향으로 tx, y 방향으로 ty 만큼 위치를 변경한다.
	function centerTranslation(CenterposX, CenterposY) {
		return 'translate('+ CenterposX +','+ CenterposY +')';
	}
	
	function isRendered() {
		return (svg !== undefined);
	}
	// isRendered 함수의 Ponter를 that 객체에 추가한다.
	that.isRendered = isRendered;
	
	// Gauge 도형의 초기화 
	function render(newValue) {
		// container(id) 위치에 svg 창을 생성한다.
		svg = d3.select(container)
			.append('svg:svg')
				.attr('class', 'gauge')
				.attr('width', config.clipWidth)
				.attr('height', config.clipHeight);
		
		// Gauge의 중심 위치를 구 한다.
		var CenterposX = r + config.posOffsetX;
		var CenterposY = r + config.posOffsetY;
		var centerTx = centerTranslation(CenterposX, CenterposY);
		//console.log("centerTx: ", centerTx);		
		var arcs = svg.append('g')
				.attr('class', 'arc')
				// Gauge의 중심 위치를 설정한다.
				.attr('transform', centerTx);
		// arc를 Drawing하고 Color를 채운다.
		arcs.selectAll('path')
				.data(tickData)
			.enter().append('path')
				// 보간법으로 arc의 색상을 구하여 Gauge sector의 설정한다.
				.attr('fill', function(d, i) {
					// d3.interpolateHsl() 함수를 사용하여 보간법으로 arc의 색상을 구 한다.
					return config.arcColorFn(d * i);
				})
				// arc를 Drawing 한다.
				.attr('d', arc);
		
		// Gauge 외각에 각 sector에 해당하는 숫자(label)를 출력한다.
		var lg = svg.append('g')
				.attr('class', 'label')
				// Gauge의 중심 위치를 설정한다.
				.attr('transform', centerTx);
		lg.selectAll('text')
				// 각 sector에 출력 할 숫자(Label)를 .data로 설정한다.
				// 이 예에서 ticks: [0, 2, 4, 6, 8, 10]
				.data(ticks)
			.enter().append('text')
				.attr('transform', function(d) {
					// ticks 값의 ratio를 구한다. 이 예에서 ratio: 0, 0.2, 0.4, 0.6, 0.8, 1
					var ratio = scale(d);
					console.log("ratio: ", ratio);		
					// 숫자(Label)를 표시할 위치에 따라 문자를 회전하여야 하는 각도를 구한다.
					var newAngle = config.minAngle + (ratio * range);
					// 숫자(Label)를 표시할 위치에 따라 문자를 회전하고, 위치를 결정하는 변환을 실행한다.
					return 'rotate(' +newAngle +') translate(0,' +(config.labelInset - r) +')';
				})
				// Gauge 숫자(Label)를 출력한다.
				.text(config.labelFormat);

// Pointer를 그리기 위한 점의 위치를 설정한다.
		var lineData = [ [config.pointerWidth / 2, 0], 
						[0, -pointerHeadLength],
						[-(config.pointerWidth / 2), 0],
						[0, config.pointerTailLength],
						[config.pointerWidth / 2, 0] ];
		// Pointer를 그리는 함수를 설정한다.
		// Curve interpolation type을 curveLinear로 설정한다.
		var pointerLine = d3.line().curve(d3.curveLinear)
		// lineData를 .data로 사용한다.
		var pg = svg.append('g').data([lineData])
				.attr('class', 'pointer')
				// Pointer의 중심 위치를 설정한다.
				.attr('transform', centerTx);
				
		pointer = pg.append('path')
			// Pointer를 출력한다.
			// pointerLine <= function(d) { return pointerLine(d) +'Z';}
			.attr('d', pointerLine)
			// render() 함수를 실행 시 Pointer의 초기 위치는 minAngle로 설정한다.
			.attr('transform', 'rotate(' +config.minAngle +')');
		// Pointer update() 함수를 실행한다.
		update(newValue === undefined ? 0 : newValue);
		
		// Gauge 이름(표제)을 출력한다.
		var cap = svg.append('g')
			.attr('transform','translate('+config.CapPosX +', '+config.CapPosY +')');
		cap.append('text')
			.text(config.Caption);
	}
	// render 함수의 Ponter를 that 객체에 추가한다.
	that.render = render;

// Pointer의 위치를 update 한다.
	function update(newValue, newConfiguration) {
		if ( newConfiguration  !== undefined) {
			configure(newConfiguration);
		}
		var ratio = scale(newValue);
		var newAngle = config.minAngle + (ratio * range);
		pointer.transition()
			.duration(config.transitionMs)
			// transition.ease의 제어 motion을 설정한다.
			// 제어 motion 예: easeElastic, easeBounce, easeBack ...
			.ease(d3.easeElastic)
			// 새로 설정된 각도로 rotation을 실행한다.
			.attr('transform', 'rotate(' +newAngle +')');
	}
	// update 함수의 Ponter를 that 객체에 추가한다.
	that.update = update;
	// Gauge 구성을 초기화한다.
	configure(config);
	// gauge 함수에서 정의된 함수를 외부에서 사용할 수 있게 return 한다.
	return that;
};
</script>

size: 250,
		clipWidth: 300,
		clipHeight: 300,
		// ringWidth 폭의 중심이 빈 원을 그린다.
		ringInset					: 20,
		ringWidth: 60,

pointerWidth				: 10,
		pointerTailLength			: 5,
		pointerHeadLengthPercent	: 0.9,

minValue: -20,
		maxValue: 60,

minAngle					: -90,
		maxAngle					: 90,

majorTicks: 8,
		transitionMs: 4000,
		labelFormat					: d3.format('d'),
		labelInset					: 10,
		// d3.interpolateHsl() : 두 Hsl 색상 사이의 값을 보간법(interpolation)으로 구하는 함수 
		arcColorFn: d3.interpolateHsl(d3.rgb('#00BFFF'), d3.rgb('#FF4500'))
	};

function updateTemperature() {
		// just pump in random data here...
		tempGauge.update(Math.random() * 60, tempConfig);
	}
	
	// every few seconds update reading values
	updateTemperature();
	setInterval(function() {
		updateTemperature();
	}, 3 * 1000);
}

if ( !window.isLoaded ) {
	// HTML Page가 처음 Load될 때 실행된다.
	window.addEventListener("load", function() {
		onDocumentReady();
	}, false);
} else {
	onDocumentReady();
}
</script>
</body>
</html>

Pie chart gauge 프로그램 실행 결과 예

Pie chart gauge 프로그램 실행하기

위 HTML 문서를 복사하여 d3-gauge-pie-chart-basic.html 파일을 만들고 실행(더블 클릭)하면 웹브라우저에 "Pie chart gauge 프로그램 실행 결과 예"와 같은 Gauge가 출력된다.

Pie chart gauge customization

Pie chart gauge의 옵션 설정을 변경하여 Gauge의 모양을 변경(Customize)한다.

Gauge 모양 설정(Customize)에 사용하는 옵션

옵션 설정 예

// Temperature gauge configure
	tempConfig = {
		// Gauge 이름과 위치(X, Y) 설정
		// Gauge 이름 설정
		Caption: "Temper",
		// Gauge 위치(X, Y) 설정
		posOffsetX: 10,
		posOffsetY: 10,
		// Gauge 이름 출력 위치(X, Y) 설정
		CapPosX: 105,
		CapPosY: 110,
		
		// Pie chart size
		size: 250,
		// Gauge 출력창 크기
		clipWidth: 300,
		clipHeight: 300,
		// Gauge ring의 위치와 폭을 설정. 중심이 빈 원을 그린다.
		// Gauge ring의 Y축 위치
		ringInset					: 20,
		// Gauge ring의 폭
		ringWidth: 60,

// Pointer 모양(폭, Tail length, Head 길이) 설정
		pointerWidth				: 10,
		pointerTailLength			: 5,
		pointerHeadLengthPercent	: 0.9,

// Gauge에 표시되는 최소값과 최대값
		minValue: -20,
		maxValue: 60,

// Gauge가 표시되는 Angle의 최소값과 최대값
		minAngle					: -90,
		maxAngle					: 90,

// Major ticks 수
		majorTicks: 8,
		transitionMs: 4000,
		// Label format과 위치 설정
		labelFormat					: d3.format('d'),
		labelInset					: 10,
		// d3.interpolateHsl() : 두 Hsl 색상 사이의 값을 보간법(interpolation)으로 구하는 함수 
		arcColorFn: d3.interpolateHsl(d3.rgb('#00BFFF'), d3.rgb('#FF4500'))
	};

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

Gauge 이름과 위치(X, Y) 설정
Gauge(Pie chart) size
Gauge 출력창 크기
Gauge ring의 위치와 폭
Pointer 모양
Gauge에 표시되는 최소값과 최대값
Gauge가 표시되는 Angle의 최소값과 최대값
Major ticks 수
Label format과 위치 설정
보간법으로 Gauge 색상을 구하는 함수와 색 데이터

참고자료: D3.js - Pie chart를 이용한 gauge

2개의 Pie chart gauge 출력하기

Pie chart gauge 프로그램 예

#gaugeTemper g.arc {
		fill: steelblue;
	}

#gaugeTemper g.pointer {
		fill: #e85116;
		stroke: #b64011;
	}
	
	#gaugeTemper g.label text {
		text-anchor: middle;
		font-size: 14px;
		font-weight: bold;
		fill: #666;
	}

#gaugeHumidity g.arc {
		fill: steelblue;
	}

#gaugeHumidity g.pointer {
		fill: #e85116;
		stroke: #b64011;
	}
	
	#gaugeHumidity g.label text {
		text-anchor: middle;
		font-size: 14px;
		font-weight: bold;
		fill: #666;
	}
	</style>
</head>
<body>

    <table align='center'>
      <caption style="font-size:25px;">Pie chart gauge</caption>
	  <tr>
        <th align='center'>
          <p id="gaugeTemper" style="align='center';"> </p>
        </th>
        <th align='center'>
          <p id="gaugeHumidity" style="align='center';"> </p>
        </th>
      </tr>
    </table>

// Degrees를 Radians로 변환하는 함수 
	function deg2rad(deg) {
		return deg * Math.PI / 180;
	}

// Gauge 구성을 초기화한다. 
	function configure(config) {
		// Gauge의 표시 범위(각도)를 구한다. 예: 90 -(-90) = 180
		range = config.maxAngle - config.minAngle;
		// Pie chart의 반경(arc의 반경)를 구한다. 예: 300 / 2 = 150
		r = config.size / 2;
		// pointer Head의 Length. 예: round(150 * 0.9) = 135
		pointerHeadLength = Math.round(r * config.pointerHeadLengthPercent);

// a linear scale that maps domain values to a percent from 0..1
		scale = d3.scaleLinear()
			.range([0,1])
			.domain([config.minValue, config.maxValue]);
		// tick No Array를 생성한다. 예: [0, 2, 4, 6, 8, 10]
		ticks = scale.ticks(config.majorTicks);
		console.log("ticks: ", ticks);		
		// tickData를 생성한다. tickData는 보간법으로 arc의 색상을 계산하는 기본 데이터 또는 
		// arc의 Sector의 시작과 종료 각도를 구하는데 사용한다.
		// 1/config.majorTicks 값을 갖는 길이 majorTicks인 Array를 생성한다.
		// 예: [0.2, 0.2, 0.2, 0.2, 0.2]
		tickData = d3.range(config.majorTicks).map(function() {return 1/config.majorTicks;});
		//console.log("tickData: ", tickData);		
		
		// arc를 객체를 생성한다.
		arc = d3.arc()
			// arc 내부 반경: r - ringWidth - ringInset(Gauge 외부에 숫자를 표시하는 여백)
			.innerRadius(r - config.ringWidth - config.ringInset)
			// arc 외부 반경: r - ringInset(Gauge 외부에 숫자를 표시하는 여백)
			.outerRadius(r - config.ringInset)
			// tickData와 index i를 이용하여 Gauge의 i번째 Sector의 시작 각도를 구한다.
			.startAngle(function(d, i) {
				var ratio = d * i;
				return deg2rad(config.minAngle + (ratio * range));
			})
			// tickData와 index i를 이용하여 Gauge의 i번째 Sector의 종료 각도를 구한다.
			.endAngle(function(d, i) {
				var ratio = d * (i+1);
				return deg2rad(config.minAngle + (ratio * range));
			});
	}
	// configure 함수의 Ponter를 that 객체에 추가한다.
	that.configure = configure;
	
	// Gauge의 center를 설정하기 위하여 translate() 함수를 생성한다.
	// "translate(tx, ty)" 는 x 방향으로 tx, y 방향으로 ty 만큼 위치를 변경한다.
	function centerTranslation(CenterposX, CenterposY) {
		return 'translate('+ CenterposX +','+ CenterposY +')';
	}
	
	function isRendered() {
		return (svg !== undefined);
	}
	// isRendered 함수의 Ponter를 that 객체에 추가한다.
	that.isRendered = isRendered;
	
	// Gauge 도형의 초기화 
	function render(newValue) {
		// container(id) 위치에 svg 창을 생성한다.
		svg = d3.select(container)
			.append('svg:svg')
				.attr('class', 'gauge')
				.attr('width', config.clipWidth)
				.attr('height', config.clipHeight);
		
		// Gauge의 중심 위치를 구 한다.
		var CenterposX = r + config.posOffsetX;
		var CenterposY = r + config.posOffsetY;
		var centerTx = centerTranslation(CenterposX, CenterposY);
		//console.log("centerTx: ", centerTx);		
		var arcs = svg.append('g')
				.attr('class', 'arc')
				// Gauge의 중심 위치를 설정한다.
				.attr('transform', centerTx);
		// arc를 Drawing하고 Color를 채운다.
		arcs.selectAll('path')
				.data(tickData)
			.enter().append('path')
				// 보간법으로 arc의 색상을 구하여 Gauge sector의 설정한다.
				.attr('fill', function(d, i) {
					// d3.interpolateHsl() 함수를 사용하여 보간법으로 arc의 색상을 구 한다.
					return config.arcColorFn(d * i);
				})
				// arc를 Drawing 한다.
				.attr('d', arc);
		
		// Gauge 외각에 각 sector에 해당하는 숫자(label)를 출력한다.
		var lg = svg.append('g')
				.attr('class', 'label')
				// Gauge의 중심 위치를 설정한다.
				.attr('transform', centerTx);
		lg.selectAll('text')
				// 각 sector에 출력 할 숫자(Label)를 .data로 설정한다.
				// 이 예에서 ticks: [0, 2, 4, 6, 8, 10]
				.data(ticks)
			.enter().append('text')
				.attr('transform', function(d) {
					// ticks 값의 ratio를 구한다. 이 예에서 ratio: 0, 0.2, 0.4, 0.6, 0.8, 1
					var ratio = scale(d);
					console.log("ratio: ", ratio);		
					// 숫자(Label)를 표시할 위치에 따라 문자를 회전하여야 하는 각도를 구한다.
					var newAngle = config.minAngle + (ratio * range);
					// 숫자(Label)를 표시할 위치에 따라 문자를 회전하고, 위치를 결정하는 변환을 실행한다.
					return 'rotate(' +newAngle +') translate(0,' +(config.labelInset - r) +')';
				})
				// Gauge 숫자(Label)를 출력한다.
				.text(config.labelFormat);

// Pointer의 위치를 update 한다.
	function update(newValue, newConfiguration) {
		if ( newConfiguration  !== undefined) {
			configure(newConfiguration);
		}
console.log("newValue: ", newValue);		
		var ratio = scale(newValue);
		var newAngle = config.minAngle + (ratio * range);
		pointer.transition()
			.duration(config.transitionMs)
			// transition.ease의 제어 motion을 설정한다.
			// 제어 motion 예: easeElastic, easeBounce, easeBack ...
			.ease(d3.easeElastic)
			// 새로 설정된 각도로 rotation을 실행한다.
			.attr('transform', 'rotate(' +newAngle +')');
	}
	// update 함수의 Ponter를 that 객체에 추가한다.
	that.update = update;
	// Gauge 구성을 초기화한다.
	configure(config);
	// gauge 함수에서 정의된 함수를 외부에서 사용할 수 있게 return 한다.
	return that;
};
</script>

size: 250,
		clipWidth: 300,
		clipHeight: 300,
		// ringWidth 폭의 중심이 빈 원을 그린다.
		ringInset					: 20,
		ringWidth: 60,

pointerWidth				: 10,
		pointerTailLength			: 5,
		pointerHeadLengthPercent	: 0.9,

minValue: -20,
		maxValue: 60,

minAngle					: -90,
		maxAngle					: 90,

// #Temp-gauge: Gauge가 출력되는 <div> id
	// tempConfig Temperature Gauge 설정에 필요한 파라메터 값
	var tempGauge = gauge('#gaugeTemper', tempConfig);
	// render() 함수를 실행하여 Temperature Gauge의 기본 Arc를 그리고 Rendering 한다.
	tempGauge.render();
	
	// Humidity gauge configure
	var humConfig = {
		// Gauge 이름과 위치(X, Y)
		Caption: "Humidity",
		posOffsetX: 10,
		posOffsetY: 10,
		CapPosX: 100,
		CapPosY: 110,

size: 250,
		clipWidth: 300,
		clipHeight: 300,
		// ringWidth 폭의 중심이 빈 원을 그린다.
		ringInset					: 20,
		ringWidth: 60,

pointerWidth				: 10,
		pointerTailLength			: 5,
		pointerHeadLengthPercent	: 0.9,

minValue: 0,
		maxValue: 100,

minAngle					: -90,
		maxAngle					: 90,

majorTicks: 10,
		transitionMs: 4000,
		labelFormat					: d3.format('d'),
		labelInset					: 10,
		// d3.interpolateHsl() : 두 Hsl 색상 사이의 값을 보간법(interpolation)으로 구하는 함수 
		arcColorFn: d3.interpolateHsl(d3.rgb('#FFEFD5'), d3.rgb('#1E90FF'))
	};
	var humGauge = gauge('#gaugeHumidity', humConfig);
	// render() 함수를 실행하여 Humidity Gauge의 기본 Arc를 그리고 Rendering 한다.
	humGauge.render();

setInterval(function() {
		updateHumidity();
	}, 4 * 1000);
}

2개의 Pie chart gauge 출력 예

2개의 Pie chart gauge 프로그램 실행하기

위 HTML 문서를 복사하여 d3-gauge-pie-chart-two.html 파일을 만들고 실행(더블 클릭)하면 웹브라우저에 "2개의 Pie chart gauge 출력 예"와 같이 2개의 Gauge가 출력된다.

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

d3 - Pie chart gauge 시험을 위한 시스템 구성과 실험

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

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

시스템 구성과 설정

Web 환경에서 ESP 모듈과 DHT11(온도센서 모듈)을 이용한 온도측정 시스템 예이다. AJAX를 이용하여 Web 페이지에서 필요한 측정 결과만 Update 한다.
AJAX 란?

Ajax(Asynchronous Javascript And Xml)는 브라우저가 가지고있는 XMLHttpRequest 객체를 이용하여 전체 페이지를 새로 고치지 않고 페이지의 일부만 Update 할 수있는 라이브러리 이다.

참고자료: w3schools.com: AJAX Introduction

STA Mode를 사용하기 때문에 자신이 사용하는 WiFI Router 가 있어야 한다. WiFI Router 가 없는 경우에는 아래 AP Mode를 참고 바람.
외부(WiFI Router 외부)에서 접속하고자 하는 경우에는 자신의 WiFI Router에서 포트포워드 설정(ip-TIME 과 같이 공유기를 제공하는 회사 자료에서 공유기 포트포워드 설정을 참고 바람)을 하여야 한다.
자신이 사용하는 WiFI Router의 SSID(Service Set IDentifier)와 PASSWORD를 프로그램에 설정한다.
DHT11 온도센서 모듈(Single-Wire Two-Way 방식의 통신을 이용)을 사용한다. MicroPython이 DHT 리이브러리를 제공하기 때문에 DHT11 통신 프로토콜에 잘 모르는 경우에도 쉽게 프로그램을 작성할 수 있다.

온도 측정 결과와 현재 시간을 보여주는 Web page 예

Web 환경에서 ESP 모듈과 DHT11(온도센서 모듈)을 이용한 온도측정 프로그램 예:"python_web_AJAX_DHT11_pie-chart_gauge.py"를 Download 하여 저장 한다.
실험을 위한 준비

STA Mode 예이기 때문에 자신이 사용하는 WiFi Router 가 있어야 한다.
위 "Web 환경에서 ESP 모듈을 이용한 온도 측정(DHT11) 구성도"를 참고하여 ESP 모듈과 DHT11 통신에 필요한 회로를 구성한다.

ESP8266/ESP32의 GPIO14와 DHT11의 Data 핀을 연결한다.
10K 저항을 DHT11 Data 선에 연결한다. DHT11 모듈(10K 저항이 내부에 포함된 모듈)에 따라 이 저항은 생략할 수 있다.
DHT11 Vcc 단자에 3.3V(or 5V) 전원을 연결한다.
ESP8266/ESP32 GND 와 DHT11 GND를 연결한다.

실험 방법

Thonny IDE를 실행하고 Thonny IDE의 사용 환경(Thonny 실행에 사용할 장치와 COM Port 선택)이 바르게 되어 있는지 확인한다.
Thonny IDE의 Python shell 창에 prompt( >>> )가 출력되었는 확인한다.
Thonny IDE의 "파일 -> 열기"를 실행하여 프로그램 파일(python_web_AJAX_DHT11_pie-chart_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')

이 예를 참고하여 STA Mode로 설정한 ESP 모듈이 WiFI Router로 부터 자동으로 부여 받은 IP Address(이 예에서는 192.168.0.30)를 확인한다. 자신의 WiFI Router(공유기)에 관리자로 접속하여 "고급설정 -> 네트워크 관리 -> 내부 네트워크 설정"에서 사용중인 IP 주소 정보 창에서 확인 하여도 된다.
웹 브라우저에서 192.168.0.30 번지에 연결하면 윗 "온도 측정 결과와 현재 시간을 보여주는 Web page 예"와 같이 온도 측정 결과와 현재 시간이 출력된다.
외부(WiFI Router 외부)에서 접속하고자 하는 경우에는 자신의 WiFI Router에서 포트포워드 설정(ip-TIME 과 같이 공유기를 제공하는 회사 자료에서 공유기 포트포워드 설정을 참고 바람)을 하여야 한다.

주: 개발이 완료되면 프로그램 이름을 "main.py"로 변경한 다음 개발 보드에 저장한다.

google chrome의 "DNS_PROBE_FINISHED_BAD_CONFIG" Error 문제 해결하기

WEb server를 반복하여 실험하는 경우 "DNS_PROBE_FINISHED_BAD_CONFIG" Error가 발생하여 Server 접속에 문제가 발생할 수 있다.

"DNS_PROBE_FINISHED_BAD_CONFIG" Error 가 발생하면 Chrome 개발자 도구 Console 창에 아래와 같은 Error message 가 출력된다.

crbug/1173575, non-JS module files deprecated.

(anonymous) @ (index):5551

문제 해결하기: DOS 명령창을 열고(> Command Prompt 상태에서) 아래 명령을 순서대로 실행한다.

ipconfig /release

ipconfig /flushdns

ipconfig /renew

ESP8266/ESP32 - d3.js Pie chart gauge - 관련 페이지 보기