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

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

d3 - Pie chart gauge

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

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

d3 - Pie chart gauge 시험을 위한 시스템 구성과 설정
온도/습도 센서(DHT11/DHT22) 측정 결과를 Web Page(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 통신 프로토콜에 잘 모르는 경우에도 쉽게 프로그램을 작성할 수 있다.

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

참고 자료

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

Web Browser에 출력되는 Web page(HTML 문서)를 아래와 같이 별도로 작성하여 Arduino IDE 프로그램(web_AJAX_DHT11_pie-chart_gauge-arduino.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"=====(
// 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;}
   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;}

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;
	}

#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>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://d3js.org/d3.v6.min.js"></script>

// 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);

var tempGauge = {};
var humGauge = {};
var tempConfig;
var humConfig;
function onDocumentReady() {
	// gauge에 필요한 함수를 정의하고 configure() 함수를 실행한다.
	// Temperature gauge configure
	tempConfig = {
		// Gauge 이름과 위치(X, Y)
		Caption: "Temper",
		posOffsetX: 10,
		posOffsetY: 10,
		CapPosX: 105,
		CapPosY: 110,

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 설정에 필요한 파라메터 값
	tempGauge = gauge('#gaugeTemper', tempConfig);
	// render() 함수를 실행하여 Temperature Gauge의 기본 Arc를 그리고 Rendering 한다.
	tempGauge.render();
	
	// Humidity gauge configure
	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'))
	};
	humGauge = gauge('#gaugeHumidity', humConfig);
	// render() 함수를 실행하여 Humidity Gauge의 기본 Arc를 그리고 Rendering 한다.
	humGauge.render();
}

// 온도와 습도 값을 Update 하고 Chart를 그린다.
  function updateChart(tempGauge, tempConfig, temper, humGauge, humConfig, humi) {
//console.log("temper: ", temper);		
    tempGauge.update(temper, tempConfig);
//console.log("humi: ", humi);		
	humGauge.update(humi, humConfig);
  }

// 현재 시간을 표시하는 함수이다. 이 함수는 주기적으로(보통 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에 표시한다.

updateChart(tempGauge, tempConfig, commandArray[1], humGauge, humConfig, 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 onload="getServerData()">
     <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'>Pie chart gauge</label>
    <table align='center'>
      <tr>
        <th align='center'>
          <p id="gaugeTemper" style="margin-left:40px;"> </p>
        </th>
        <th align='center'>
          <p id="gaugeHumidity"> </p>
        </th>
      </tr>
    </table>

ESP8266/ESP32 Web Server 프로그램: web_AJAX_DHT11_pie-chart_gauge-arduino.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);
}

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

실험을 위한 준비

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_pie-chart_gauge-arduino.ino)과 동일한 폴더에 index.h 이름으로 저장한다.
Arduino IDE를 실행하고 "파일 -> 새 파일"을 클릭한다.
윗 web_AJAX_DHT11_pie-chart_gauge-arduino.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 처리한다.

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 - 관련 페이지 보기