위즈네트 아카데미

TUTORIAL

튜토리얼

Home  > 튜토리얼

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

WIZnet Academy 2016.06.03 11:28 조회 수 : 16

이번 포스팅에서는 W5500-EVB에 입력된 Analog 값을 웹서버 기반의 Google Gauge Chart 로 표현해 보는 예제를 소개하겠습니다.

이번 예제는 Analog 입력 모니터링의 시각적 효과를 높이기 위한 수단 중 하나로 JavaScript로 구현된 interactive chart를 활용하게 되며, 기반이 되는 값인 Analog 입력을 웹에서 보이기 위한 예제는 이전 튜토리얼에 설명이 되어 있습니다.

본 내용을 활용하기 위해 W5500-EVB의 Analog 입력 모니터링 예제 구현 내용에 대한 학습을 선행 하는 것이 좋은데, 이전 예제를 활용하기 위해서는 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)로, 가변저항 (Potentiometer)과 Pin을 공유합니다. 따라서 이전 예제 코드와 동일한 CGI 요청을 사용하게 되며 W5500-EVB의 ADC Select 스위치를 Temperature sensor 측으로 조정하여야 올바른 값을 확인할 수 있습니다.

w5500-EVB

Google Chart 소개


google_chart

Google 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
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 코드


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)

 

아래는 구글 Gauge Chart 가 동작하는 웹페이지 내용을 보여주는 이미지입니다.

Goggle_Result

글출처 : Eric's LAB