User Tools

Site Tools


products:wiz550web:wiz550web_tutorial_en:tutorial_1

Tutorial 1: Set the Digital I/O Status - LED On/Off

Overview


Tutorial 1 describes how to change the current state of Digital I/O set to Output. Users can find out what they need to create a webpage that can change the current state of Digital I/O through each step.

As an example of the most typical Digital I/O output configuration, we will show you each step of how to create a web page that turns the LEDs on and off. First, the following figure assumes that the LED is connected to DIO #0 of the WIZ550web module and shows the process that should be performed to change the LED status when the user presses the LED On/Off button through the web page.

This tutorial uses the predefined I/O Interface functions in the WIZ550web firmware. The user can create a Web Server Device that can control and monitor I/O by simply modifying the web page.

WIZ550web Get/Set Interface Functions Guide

Steps


First, to obtain the current state of WIZ550web Digital I/O from Webpage (HTTP client), the following process is performed.

  1. [Webpage] HTML: The user requests a 'Submit' via a button on the webpage
    1. On request, configure to call the getDio() JavaScript function (such as onclick event)
    2. When calling the getDio() function, the module passes the pin number to the 'pin' attribute in the HTML tag as the parameter.
  2. [Webpage] JavaScript: The getDio() function sends get request with pin number in AJAX way
    1. If requesting the status of pin 2, get_Dio2.cgi is requested to WIZ550web
  3. [WIZ550web] C language: Prepare a response to the request and send it to the client side
    1. In this case, the webpage and the callback function promised in advance are transmitted in the form of JSON with the same name
  4. [Webpage] JavaScript: The JavaScript function with the same name as the received response is called, and the function changes the changed value and applies the changed value using the ID of the HTML tag to show to the user
  5. [Webpage] HTML: In response to 'Submit', the current status of Digital I/O is displayed in the web browser.

The Request CGI name for checking the current status of the specified Digital I/O Pin is as follows. Please refer to WIZ550web Interface Functions Guide for details.

HTTP GET Request: get_dio[n].cgi

  • Requests the current status of the specified digital I/O, the I/O direction, and an alias.
  • [N] is the Digital I/O Pin number from D0 to D15
  • Response Form
    • dio_p : pin number (0 ~ 15)
    • dio_s : pin state (0 : Low, 1 : High)
    • dio_d : pin direction (0 : NotUsed, 1 : Input, 2 : Output)
    • dio_a : pin alias (String, alias size up to 24bytes)
  • On request, there is no parameter, and the web server responds with a JavaScript callback to the request. There must be a JavaScript function with the same name corresponding to the JavaScript Callback in the web page requesting the CGI.
    • Ex) The predefined web server response to the D2 pin state value request is as follows.
  • DioCallback({"dio_p":"2","dio_s":"0","dio_d":"2","dio_a":"Digital IO #2"});

Note

products/wiz550web/wiz550web_tutorial_en/tutorial_1.txt · Last modified: 2017/05/15 14:27 by kei