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

W5500-EVB의 ADC Monitor


W5500-EVB의 웹 서버를 활용하는 두 번째 예제로, 웹 페이지를 통해 W5500-EVB에 on-board 되어 있는 가변저항 (Potentiometer)의 값을 확인하는 예제이다. 이 예제로 analog input 값을 digital 데이터로 converting하여 읽을 수 있는 ADC의 제어 방법과 이렇게 읽은 값을 웹 페이지에 표시하는 방법에 대해 알 수 있다.

본 내용을 이해하려면 W5500-EVB 웹 서버 라이브러리의 I/O 제어 흐름과 CGI 등에 대한 학습이 선행되어야 한다.  자세한 내용은 이전 노트인 Note 5.를 참고 바란다.

Note 5. W5500-EVB Web Server를 이용한 I/O 제어

본 예제에서 제어할 Potentiometer (on-board Temperature sensor와 Pin 공유) 는 별도의 Pin이 할당되어 있어 외부와 인터페이스 할 수 없고 Arduino compatible pinout (A0 ~ A5) 과는 무관하다. 때문에 W5500-EVB 라이브러리에서는 해당 핀을 AIN (A6)으로 임의 정의하여 구성하였으므로 착오 없길 바란다.

CGI 정의와 JavaScript 코드


>> Analog Input : A0 ~ A5, A6(AIN) (7)

  • GET CGI : get_ain[n].cgi (A0 ~ A5, A6(AIN) )
    1. 지정한 Analog Input 의 값을 전달한다. 이 값은 NXP LPC11Exx의 10-bit ADC를 통해 converting 된 값으로, 10-bit resolution은 0 ~ 1023의 범위를 가진다.
      1. ain_p : pin
      2. ain_v : pin adc value
    2. n은 0 ~ 6 까지의 Analog Input Pin + AIN을 의미한다. (Arduino compatible pinout을 기준으로 작성)
    3. 요청 시 Parameter는 없으며 웹 서버는 해당 요청에 대해 JavaScript Callback으로 응답한다. 해당 CGI를 요청하는 웹 페이지 내에 JavaScript Callback과 대응하는 동일한 이름의 JavaScript 함수가 있어야 한다.
      • Ex) A6 요청에 대해 미리 정의된 웹서버의 응답은 다음과 같다.
        • AinCallback({"ain_p" : "6"}, {"ain_v" : "821"})

실제 JavaScript 함수는 다음과 같이 구현되어 AJAX로 GET CGI를 요청한다. 해당 함수 구현에 활용된 AJAX 관련 JavaScript 함수는 코드 내에 포함되어 있다.

function getAin(o) {
  var p=o.attributes['pin'].value;
  var oUpdate;
  setTimeout(function(){
    oUpdate=new AJAX('get_ain'+p+'.cgi',function(t){try{eval(t);}catch(e){alert(e);}});
    oUpdate.doGet();
  },300);
}

A6에 대해 get_ain6.cgi GET 요청을 수행했다면 동일 웹 페이지 내에 구현된 AinCallback 함수에서 자동으로 DOM을 조작한다. 이 때  txtain_v6 는 해당 HTML value attribute를 찾기 위한 input tag id이다. 따라서 HTTP request를 수신하면 해당 HTML tag id를 가진 HTML tag의 value에 수신된 값이 설정된다.

function AinCallback(o){
  var pin = o.ain_p;
  $('txtain_v'+pin).value=o.ain_v;
} 

HTML 코드


<!DOCTYPE html>
<html>
	<head>
	<title>W5500-EVB Web Server Analog Input</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>
	<script type='text/javascript' src='ain.js'></script>
	<style>
		.analog{margin-top:2px;margin-right:10px;border:1px solid #ccc;height:20px;width:500px;display:block;}
		.ain{width:0%;height:100%;text-align:center;background:red;float:left;display:block;}
	</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>
		<div class='analog' style='padding:0px;'><strong id='ain_v6' name='ain' class='ain' style='width:0%;'></strong></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()

결과


webpage_adc_monitor

Advertisements

Note 6. W5500-EVB Web Server를 이용한 Analog Input 모니터링”에 대한 2개의 생각

  1. 핑백: Note 7. W5500-EVB Web Server 기반의 Google Gauge Chart 구현 | Eric's Labs

  2. 핑백: W5500-EVB Web Server 를 이용한 Analog Input 모니터링 | WIZnet Academy

답글 남기기

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

WordPress.com 로고

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

Twitter 사진

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

Facebook 사진

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

Google+ photo

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

%s에 연결하는 중