WIZnet Museum 에는 Web Server 구현에 대해 여러 예제들이 소개되고 있습니다.  그중에 가장 시각적으로 들어오는 예제는 W5100 Ethernet Shield 를 이용하여 Gauge로 센서(ADC)값을 표현하는 것이었다.

영문이기는 하지만  소스가 오픈되어 있으므로  따라하며 공부하기는 그리 어렵지 않으니, 웹서버 구현에 관심이 있으신 분들은 눈여겨 볼 수 있을 것 같습니다.

Gauge 자바스크립트를 활용하고, 강력한 TCP/IP hard-wired 칩인 W5500 이 적용된 ioShield-A를 이용하여, Ajax를 활용해 실시간 모니터링이 가능한 Web Server 구현을 실행해 보겠습니다.

먼저 AJAX(Asynchronous JavaScript And XML)에 대해 살펴보면, 다음과 같습니다.



 

비동기식 자바스크립트와 XML의 결합으로, 웹페이지를 전체 재갱신하지 않고 웹페이지의 일부만을 갱신하여 웹서버와 데이터를 교환하는 방법입니다.

AJAX의 구성은

1) XMLHttpRequest : 웹 서버와 통신을 담당한다.  사용자의 요청을 웹 서버에 전송하고, 웹 서버로부터 받은 결과를 웹 브라우저에 전달한다.

2) DOM : 문서의 구조를 나타낸다. 폼 등의 정보나 화면 구성을 조작할 때 사용한다.

3) CSS : 글자색, 배경색, 위치, 투명도 등 UI와 관련된 부분을 담당한다.

4) JavaScript : 사용자가 마우스를 드래그하거나 버튼을 클릭하면,   XMLHttpRequest 객체를 사용해서 웹 서버에 요청을 전송한다.   또한, XMLHttpRequest 객체로부터 응답이 오면 DOM, CSS 등을 사용해서 화면을 조작한다.

 

Hardware 구성은

1) 아두이노 Mega



 

2) ioShield-A (WIZ550io+Arduino Interface Board)



3) uSD, 브레드 보드, 점퍼선, 가변저항



하드웨어 연결은 아래와 같이 합니다.



 

- Arduino Mega 보드의 VCC 핀, Analog8 번핀, GND핀을 가변저항의 3핀과 브레드 보드와 점퍼선을 이용하여 순서대로 연결합니다.

- 센서는 결국 가변저항과 같으므로 즉시적인 반응을 테스트 하기 위해 가변저항을 사용하였습니다. (Sensor의 원리 및 Arduino 에서 ADC 사용하기 링크 참조)

 

Programming

- WIZnet ioShield-A library for Ethernet of Arduino Sckech

- Adafruits SD liblary

프로그래밍은 위의 두가지 라이브러리를 사용하였습니다. 기존 라이브러리를 삭제하고 위의 라이브러리로 교체하여 사용하면 됩니다.

Ethernet Library 의 경우 WIZnet 의 김수환님의 블로그에 잘 설명되어 있습니다.

이번 프로젝트에서 사용된 아두이노 스케치 파일과 웹페이지 파일은 아래 링크에서 다운로드 받으실 수 있습니다.

Ajax Web Sever File Download : Ajax_WebServer

GitHub 에서 Download

주의할 점은 HTML 파일을 SD 카드에 저장할 때 index.htm 으로 이름을 바꾼후 저장합니다.

 

Gauge용 HTML 데모영상


Graph용 데모영상

자신의 입맛에 맞는 HTML을 작성하고 싶을 때는 아래의 링크를 참조합니다.

단 HTML, CSS, JavaScript 에 대한 이해가 없으면 불가능하므로, 이에 대해 스터디는 꼭 필요하니, 위즈네트 아카데미의 Web Server 강좌를 추천합니다.

아래의 링크는 가장 기본적인 Frame 구조에 대해서 설명하고 추가적인 작업은 본인의 색깔에 맞게 작업합니다.

index.html 로 웹 브라우져의 Frame 나누기.

(1) top frame 구조 및 변경 방법

(2) submunu 구조 및 변경 방법

main frame 구조

출처 : Andrew's IoT