In this tutorial, we will introduce a web server example code. From this code, you can learn how to read the input value of potentiometer which is mounted on W5500-EVB. You can also understand how to control ADC and diplay the output value on the web page.
In order to understand the code that introduced in this posting, you need to know the basic concept of W5500-EVB web server library to control I/O, CGI and etc in advance. You can study them from below link.
CGI and Javascript Code
- GET CGI: get_ain[n].cgi (A0 ~ A5, A6(AIN) )
- It transmists analog input value. This value has been converted by 10-bit ADC of NXPLPC11Exx, and the 10-bit resolution is ranged from 0 to 1023.
- ain_p : pin
- ain_v : pin adc value
- ‘n’ means Analog Iput Pin+AIN from 0 to 6.
- Web server responds with JavaScropt Callback to te request. There must be correspondant Javascript function of which name is identical to Javascrip Callback name
- EX) The pre-defined webserver response to the A6 request is AinCallback({“ain_p”:”6”}, {“ain_v” : “821”})
The javascript function can be implemented as below. It calls GET CGI with AJAX.
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);
}If the get_ain6.cgi GET request is perforemd, AinCallback function in the same web page, automatically controls DOM. At this time, txtain_v6 is the input tag id to find the HTML value attribute. Therfore, if the HTTP request is received, the received value is set to the HTML tag value of the same HTML tag id.
function AinCallback(o){
var pin = o.ain_p;
$('txtain_v'+pin).value=o.ain_v;
}HTML Code
<!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 Code
The firmware code is in ‘userHandler.c’ file of W5500-EVB library code. You must understand how to map CGI file request into correspondant I/O control function. For more detail, study below two function in the userHandler.c file.
>> userHandler.c (GitHub Repository)
- predefined_get_cgi_processor()
- predefined_set_cgi_processor()
Result
As you see below image, you can monitor the Analog Input value change on the web page.
COMMENTS