위즈네트 아카데미

TUTORIAL

튜토리얼

Home  > 튜토리얼
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)에 대해 살펴보면, 다음과 같습니다.

Ajax_flow

 

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

AJAX의 구성은

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

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

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

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

 

Hardware 구성은

1) 아두이노 Mega

Arduino-Mega

 

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

io_s_a-300x246

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

uSD

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

Hardware-connection

 

- 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