Note 7. W5500-EVB Web Server 기반의 Google Gauge Chart 구현

Analog Input 값의 Gauge chart 표현


W5500-EVB 웹 서버를 활용한 세 번째 예제로, W5500-EVB의 Analog 입력 값을 Google Charts API 중 Gauge를 활용하여 웹 페이지 상에 표현하는 예제이다. 이번 예제는 Analog 입력 모니터링의 시각적 효과를 높이기 위한 수단 중 하나로 JavaScript로 구현된 interactive chart를 활용하게 되며, 기반이 되는 값인 Analog 입력을 웹에서 보이기 위한 예제는 앞선 Note 6.에 코드와 함께 설명 되어 있다.

본 내용을 활용하기 위해 W5500-EVB의 Analog 입력 모니터링 예제 구현 내용에 대한 학습을 선행 하는 것이 좋다. 이전 예제에 대한 자세한 내용은 다음 링크의 Note 6.를 참고 바란다.

Note 6. W5500-EVB Web Server를 이용한 Analog Input 모니터링 

본 예제에서는 Google Chart API에 대한 간단한 소개와, W5500-EVB 상에서 동작하는 웹 서버와 연동하여 주기적으로 업데이트 되는 Analog 입력 값을 Gauge Chart로 표현하는 방법에 대해 설명한다. Google Chart API의 코드 예제는 Apache 2.0 License를 따르고 있으므로 자유롭게 수정 및 활용 할 수 있다.

모니터링 할 Analog 입력은 W5500-EVB에 On-board 되어 있는 온도 센서 (TC1047)로, Note 6.에서 다룬 가변저항 (Potentiometer)과 Pin을 공유한다. 따라서 이전 예제 코드와 동일한 CGI 요청을 사용하게 되며 W5500-EVB의 ADC Select 스위치를 Temperature sensor 측으로 조정하여야 올바른 값을 확인할 수 있다.

W5500-EVB_adc_select_sw

 

Google Charts 소개


Google Chart: visualization_introGoogle Developer 사이트에서는 Google API를 이용하여 Visualization 도구로 활용할 수 있는 다양한 Chart 예제를 제공한다. 이를 활용하면 손쉽게 웹 페이지 상에 여러가지 형태의 그래프와 표를 나타낼 수 있으며, 잘 정리된 데이터를 기반으로 높은 시각적 효과를 얻을 수 있다. 사용자는 웹 페이지에 간단한 Google API (JavaScript)의 링크와 JavaScript 함수, HTML tag를 추가함으로써 단순 수치 데이터를 그래프와 표로 바꾸어 웹 브라우저에 표현 할 수 있다.

Google Charts 에 대한 소개는 다음 링크를 참조 바란다.

https://developers.google.com/chart/interactive/docs/index

Google Charts: Gauge Chart

Gauge chart는 측정된 값을 표현하기 위한 방법 중 하나로 간단한 option 설정을 통해 값의 폭과 모양, 색깔 등을 변경할 수 있으며 Label과 Value의 두 가지 항목 만으로 표현 가능하다. 본 예제에서는 Value 값을 주기적인 Analog 입력 값으로 설정하여 변화 폭을 효과적으로 표현할 수 있게 하였다.

Google Gauge chart에 대한 상세 내용은 다음 링크를 참조 바란다.

https://developers.google.com/chart/interactive/docs/gallery/gauge

다음은 Google Developer 사이트의 Gauge chart 예제 코드이다.

Google_Gauge_Chart_Examples


<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["gauge"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {

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

        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);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

 

CGI 정의와 JavaScript 코드


Note 5.와 동일하게 get_ain6.cgi 를 웹 서버에 요청하여 온도 센서의 현재 ADC 값을 얻을 수 있다. 이 때 온도를 표현하기 위한 Gauge chart의 draw를 위해 다음과 같은 JavaScript API 링크 및 함수를 추가한다. temp_val 변수는 10-bit ADC의 0 ~ 1023 범위 값 Analog 입력을 온도 범위로 변환하는 수식을 포함한다.


<script type='text/javascript' src='https://www.google.com/jsapi'></script>

<script type="text/javascript">
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(AinDrawGoogleGauge);

function AinDrawGoogleGauge(o){
	var val=o.ain_v;
	var temp_val=Number(((((val*3300)/1023)-500)/10).toFixed(2));
	var data = google.visualization.arrayToDataTable([
		['Label', 'Value'],
		['Temp.', 80]
	]);
	var options = {
		width:400, height:120,
		max:100, min:-40,
		greenFrom:-40, greenTo:0,
		redFrom:90, redTo:100,
		yellowFrom:75, yellowTo:90,
		minorTicks: 5
	};
	var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
	data.setValue(0, 1, temp_val);
	chart.draw(data, options);
}
</script>

 

버튼 등에 onclick 이벤트로 지정한 getAin6_update()가 수행되면 지정된 주기(예제 코드에서는 500ms)마다 해당 함수를 호출하여 AJAX get_ain6.cgi 요청을 웹 서버로 전송하고, 그에 대한 응답은 AinCallback()에서 JavaScript callback으로 처리되어 DOM을 조작한다. 이 때 웹 서버의 응답은 JavaScript function과 동일한 이름으로 전송되도록 미리 정의되어야 한다. 응답의 형태는 다음과 같다.

  • AinCallback({“ain_p” : “6”}, {“ain_v” : “821”})

AinCallback function은 pin과 pin에 해당하는 ADC value를 받아 txtain_v+pin을 id로 가지는 HTML tag의 값을 ADC value로 업데이트 하고, AinDrawGoogleGauge()를 호출하여 웹 브라우저에 보이는 Gauge를 업데이트 한다. 이를 통해 사용자는 웹 페이지 로딩 없이 analog 입력의 변화된 값을 웹 브라우저에서 확인할 수 있다.


<script type="text/javascript">
function AinCallback(o){
	var pin = o.ain_p;
	$('txtain_v'+pin).value=o.ain_v;
	AinDrawGoogleGauge(o);
}

function getAin6_update() {
	var oUpdate;
	setTimeout(function(){
		oUpdate=new AJAX('get_ain6.cgi',function(t){try{eval(t);}catch(e){alert(e);}});
	oUpdate.doGet();},300);
	setTimeout('getAin6_update()',500);
}
</script>

 

HTML 코드


HTML 코드는 매우 간단하게 구성된다. Body에는 Analog 입력 값을 text로 표시하기 위한 input tag와  Analog 입력 요청을 수행하는 getAin(), getAin6_update() function이 onclick 이벤트로 설정된 버튼, 그리고 Google Gauge chart가 그려질 div tag만 위치하면 된다. 이 때 값이 업데이트 되어 사용자에게 보여질 tag는 id (id attribute)가 반드시 설정되어야 하고 JavaScript 함수를 이용하여 조작할 수 있도록 JavaScript 함수와 HTML tag가 일치하는 id로 구성되어야 한다. (만약 동일한 속성이 여러 개 반복되어 한 번에 조작되어야 할 경우 name attribute를 활용한다. 동일한 속성을 갖는 tag들은 동일한 name을 설정하여 차례대로 조작하면 된다)


<!DOCTYPE html>
<html>
	<head>
	<title>W5500-EVB Web Server Analog Input Gauge</title>
	<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
	<meta http-equiv='pragma' content='no-cache' />
 	<meta http-equiv='content-type' content='no-cache, no-store, must-revalidate' />
	<script type='text/javascript' src='ajax.js'></script>
	</head>
	<body>
		<div>
			<input type='text' id='txtain_v6' size='5' disabled='disabled' value=''>
			<input type='button' value='Get AIN' pin='6' onclick='getAin(this);'>
			<input type='button' value='Get AIN Auto' onclick='getAin6_update();'>
			<br>
			<!--Draw the Google Gauge Chart-->
			<div id='chart_div' style='width: 400px; height: 120px;'></div>
		</div>
	</body>
</html>

 

Firmware 코드


펌웨어 코드는 W5500-EVB 라이브러리 코드 내 userHandler.c 파일에 정리되어 있다.

핵심은 미리 정의된 CGI 파일 명에 대한 요청이 들어왔을 때 이를 확인하여 해당하는 I/O 제어 함수에 mapping하는 작업이다. 자세한 코드를 확인 하고자 하면 userHandler.c 파일 내 다음 함수들을 살펴보기 바란다.

>> userHandler.c (GitHub Repository)

  • predefined_get_cgi_processor()
  • predefined_set_cgi_processor()
  • make_json_ain() – Analog 입력 값 요청에 대한 응답 생성 (JavaScript callback)

완성된 예제 코드는 다음 링크에서 다운로드 할 수 있다.

W5500-EVB HTTP Server GitHub Repository

Direct Download: W5500-EVB HTTP Server Example Source code (ZIP)

 결과


 

W5500-EVB Google gauge chart demo

W5500-EVB: Google Gauge Chart demo

Advertisements

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중