User Tools

Site Tools


products:wiz550web:wiz550web_tutorial_kr:tutorial_0

Tutorial 0: Introduce the I/O Interface functions and Test page

Overview


WIZ550web은 펌웨어의 수정 없이 웹 페이지의 제작 만으로 장치 이름 및 Network 설정, 각각의 Digital I/O와 Analog input의 제어와 모니터링을 수행할 수 있도록 HTTP Request function set을 제공한다. Get과 Set 요청으로 구성되어 있으며, 웹 서버(WIZ550web) 측으로 미리 정의된 (pre-defined) CGI name을 포함하여 해당 요청을 전송하면 AJAX 방식으로 손쉽게 결과를 확인 할 수 있다.

사용자의 Web browser와 WIZ550web 제품 간 I/O의 제어는 다음과 같은 흐름으로 이루어진다.

미리 정의된 Interface function을 이용하여 제어 및 확인 가능한 기능의 리스트는 다음과 같으며, 웹 페이지에서는 제공된 AJAX Get / Post용 JavaScript를 이용하여 요청을 전송하면 된다.

Interface funcions를 활용하기 위한 CGI name과 parameter 등의 상세 내용은 아래 링크의 WIZ550web Interface Functions Guide를 참조하기 바란다.

I/O Interface Functions

GET functions (HTTP GET Method)

  • Device Informations: Firmware version, Device name, Product code, MAC address
  • Network Settings: Device IP / Gateway / Subnet mask / DNS / DHCP enable
  • Serial Port Settings: Baudrate / Databit / Paritybit / Stopbit / Flowcontrol
  • 16-Digital I/O: Digital I/O [0 ~ 15]'s State / Direction / Alias
  • 4-Analog Inputs: Analog Input [0 ~ 3]'s Value

SET functions (HTTP POST Method)

  • Device Informations: Device name
  • Network Informations: Device IP / Gateway / Subnet mask / DNS / DHCP enable
  • Serial Port Informations: Baudrate / Databit / Paritybit / Stopbit / Flowcontrol
  • 16-Digital I/O: Digital I/O [0 ~ 15]'s State / Direction / Alias

Example Webpage for Test


WIZ550web v1.0.1 이후 버전의 펌웨어는 Get/Set Interface function을 테스트 할 수 있는 webpage example을 제공한다. 제품 출하 시 func_test.html로 함께 탑재되어 있으므로 다음과 같이 웹 브라우저를 이용하여 WIZ550web에 접속 후 Function test page를 확인 할 수 있다. WIZnet WIZ550web GitHub repository의 func_test.html 파일 링크를 통해 직접 코드의 확인도 가능하다.

WIZ550web GitHub Repository: Webpage source code

GET/SET Interface functions Testpage

제공된 web page example을 응용하면 각 I/O의 제어와 H/W의 모니터링 및 설정 기능을 활용 할 수 있으며 상세 구현 내용은 각 튜토리얼을 확인하기 바란다.

다음과 같이 web browser를 이용하여 Interface function test page를 확인 할 수 있다.

Interface function test page는 다음과 같이 구성되어 있다.

» Device Information / Network Configuration / Serial Port Settings

» Digital I/O: State, Direction, Alias

» Analog Input Value and Bar

각 기능 별 Get / Set 버튼을 눌러 WIZ550web과 webpage example 간 값의 교환을 확인 할 수 있다. 이 때 MS Internet Explorer나 Google Chrome 등 대부분 web browser의 경우, [F12] 키를 눌러 개발자 도구를 활성화 하고 example page를 reload 및 Get/Set을 수행하면 HTTP request와 그에 대한 response를 직접 확인 할 수 있다.

개발자 도구는 JavaScript의 실시간 Debugging에도 매우 유용하므로, webpage 제작 및 customize를 목표로 한다면 사용해 보는 것이 좋다.



products/wiz550web/wiz550web_tutorial_kr/tutorial_0.txt · Last modified: 2017/05/30 10:52 by hkjung